커뮤니티 사이트. (프로그래머스 데브코스 5기 과제에서 제공해주신 API를 이용한)
OWhat!은 다양하고 많은 OTT플랫폼에 대응하여 만든 커뮤니티 사이트입니다. 플랫폼 별로 정보를 공유하고, 서로 소통할 수 있는 공간입니다!📢
구독한 OTT 플랫폼서 방영하는 콘텐츠들에 관련해서 정보를 공유하거나 소통할 수 있습니다.
OTT별로 채널을 나눔으로써 자신이 구독한 OTT 플랫폼에 따라 필터링해 정보 습득을 할 수 있도록 도와줍니다.
또한 커뮤니티의 기본 기능인 게시글, 좋아요, 댓글, 내 정보, 검색 뿐만아니라 메시지 전송과 알림 기능도 포함되어 있습니다!✨
“너 OTT 뭐(what) 봐?? OWhat에서 얘기해보자!”
점점 다양해지는 OTT 플랫폼과 OTT별로 재미있는 콘텐츠들..
저희는 이런 콘텐츠들에 대한 정보를 한 번에 볼 수 있는 공간이 있으면 좋겠다고 생각하게 되었습니다.
이 서비스를 통해서 OTT마다 재미있는 콘텐츠들을 서로 공유하고, 다른 OTT플랫폼에도 관심을 가질 수 있게 될 것이라 생각합니다.
이제는 OTT 서비스가 점점 인기있어지고, 제작사에서도 OTT를 우선으로 방영하는 시대가 왔습니다. 더 재밌는 콘텐츠를 즐기기 위해서는 OTT 플랫폼을 이용할 수 밖에 없는 상황이 옵니다.
유료로 구독해야 즐길 수 있는 OTT 플랫폼을 더욱 신중하게 선택하고, 구독을 결정하기 위해서는 정보가 필요합니다. OWhat 서비스를 통해 사용자들과 정보를 공유해보세요.
구독하고 싶은 OTT 플래폼에 대해서 더욱 합리적인 선택을 할 수 있고, 다른 OTT 플랫폼의 정보를 보고 해당 플랫폼을 구독하게 되는 계기가 될 수 있습니다.
23년 12월 22일(금) ~ 24년 1월 17일(수)
| 팀장 | 팀원 | 팀원 | 팀원 | 팀원 |
|---|---|---|---|---|
|
|
|
|
|
| 최성민 | 안범 | 신준혁 | 최희라 | 정혜연 |
- 공통 컴포넌트 개발(Icon, Group, Toggle, Imgae Upload, Page Layout, Toast)
- 개발환경 구축
- 메인 페이지 개발
- 메시지 페이지 개발
- 메시지 송수신 페이지 개발
- 404 페이지 개발
- 스토리북 CI/CD배포
- Vercel 배포
- 공통 컴포넌트 개발(Text, Input, Tooltip, ExtraInfo, UserInfo)
- 계정 페이지 개발
- 계정 수정 페이지 개발
- 비밀번호 수정 페이지 개발
- 팔로우 팔로워 페이지 개발
- 공통 컴포넌트 개발 (Image, Avatar, Button, Carousel, Divider, Badge)
- 회원가입 페이지 개발
- 로그인 페이지 개발
- 게시글 상세 페이지 개발
- 다크모드 구현
- 발표 자료 준비
- 공톰 컴포넌트 개발(TextArea, Tab, Alarm)
- API 타입 구축
- 검색 페이지 개발
- 알림 페이지 개발
- 전체/접속 중인 사용자 목록 페이지 개발
- 발표 영상 준비
- 공톰 컴포넌트 개발(Loading, Feed)
- 네비게이션 바 개발
- 게시글 작성 페이지 개발
- 게시글 수정 페이지 개발
| TypeScript | React | Vite |
|---|---|---|
 |
 |
 |
| Storybook | npm | Tanstack Query | TailWind CSS |
|---|---|---|---|
 |
| Axios | React-Router-Dom | Vercel |
|---|---|---|
버전은 아래와 같습니다.
"@tanstack/react-query": "^5.15.0",
"axios": "^1.6.5",
"class-variance-authority": "^0.7.0",
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.21.1"
"@commitlint/cli": "^18.4.3",
"@commitlint/config-conventional": "^18.4.3",
"@storybook/addon-essentials": "^7.6.6",
"@storybook/addon-interactions": "^7.6.6",
"@storybook/addon-links": "^7.6.6",
"@storybook/addon-onboarding": "^1.0.10",
"@storybook/blocks": "^7.6.6",
"@storybook/react": "^7.6.6",
"@storybook/react-vite": "^7.6.6",
"@storybook/test": "^7.6.6",
"@tanstack/react-query-devtools": "^5.15.0",
"@types/react": "^18.2.43",
"@types/react-dom": "^18.2.17",
"@typescript-eslint/eslint-plugin": "^6.16.0",
"@typescript-eslint/parser": "^6.16.0",
"@vitejs/plugin-react": "^4.2.1",
"autoprefixer": "^10.4.16",
"chromatic": "^10.2.0",
"clsx": "^2.0.0",
"eslint": "^8.56.0",
"eslint-config-prettier": "^9.1.0",
"eslint-import-resolver-typescript": "^3.6.1",
"eslint-plugin-import": "^2.29.1",
"eslint-plugin-jsx-a11y": "^6.8.0",
"eslint-plugin-prettier": "^5.1.2",
"eslint-plugin-react-hooks": "^4.6.0",
"eslint-plugin-react-refresh": "^0.4.5",
"eslint-plugin-simple-import-sort": "^10.0.0",
"eslint-plugin-storybook": "^0.6.15",
"husky": "^8.0.3",
"lint-staged": "^15.2.0",
"postcss": "^8.4.32",
"prettier": "^3.1.1",
"prettier-plugin-tailwindcss": "^0.5.9",
"storybook": "^7.6.6",
"tailwind-merge": "^2.2.0",
"tailwindcss": "^3.4.0",
"typescript": "^5.2.2",
"vite": "^5.0.8"
- OTT 플랫폼 별로 채널이 구성되어 있고, 채널마다 게시글을 확인할 수 있습니다.
- 비인증 사용자도 확인 가능합니다.
- 하단 우측에 + 버튼을 누르면 다크모드와 글쓰기 작성이 가능합니다.
- 게시글을 클릭하면 게시글 상세페이지로 이동 가능합니다.
- 게시글의 하트 아이콘을 클릭하면 좋아요가 가능합니다.
- 게시글의 유저 아이콘을 누르면 해당 유저의 계정 페이지로 이동합니다.
- 제목과 내용을 작성해서 게시글을 작성할 수 있습니다.
- 이미지를 첨부하면 이미지를 미리보기 할 수 있습니다.
- 완료 버튼을 누르면 게시글 작성이 완료됩니다.
- 게시글의 전체 내용과 게시글에 작성된 댓글을 확인할 수 있습니다.
- 헤더에는 현재 채널이 출력됩니다.
- 로그인시 해당 게시글에 댓글을 작성할 수 있습니다.
- 자신의 게시글일 때 상단 우측에 수정 삭제가 가능한 버튼이 나타납니다.
- 자신의 작성한 댓글이 존재할 때 우측에 삭제가 가능한 버튼이 나타납니다.
- 사용자 아바타를 누르면 해당 사용자의 계정 페이지로 이동합니다.
- 좋아요가 가능합니다.
- 다크모드가 가능합니다.
- 수정 버튼을 클릭한 게시글의 정보를 불러와서 수정이 가능합니다.
- 수정 버튼을 누르면 게시글이 업데이트 됩니다.
- 로그인이 되지않은 상태에서 네비게이션바의 마이페이지 아이콘을 누르면 로그인 페이지로 이동합니다.
- 이메일 부분에는 타이핑마다 검증을 시도합니다.
- 이메일의 검증과 비밀번호가 빈 값이 아니라면 로그인 버튼이 활성화됩니다.
- 작성한 비밀번호를 볼 수 있도록 visible버튼을 사용할 수 있습니다.
- 회원가입 페이지로 이동 가능합니다.
- 다크모드가 가능합니다.
- 헤더에 홈으로 이동가능한 버튼이 있습니다.
- 이메일, 이름, 비밀번호, 비밀번호 확인을 입력할 수 있습니다.
- 이메일은 정규표현식 검증이 가능합니다.
- 이메일은 검증이 통과되면 중복확인이 가능합니다.
- 사용자이름은 공백,특수문자 제외 3~8자 이상 입력 가능합니다.
- 비밀번호는 비밀번호는 8자 이상이어야 하며, 영문 대/소문자, 숫자, 특수문자를 포함해서 입력이 가능합니다.
- 비밀번호확인은 타이핑 될 때마다 비밀번호와 일치하는지 검증합니다. 비밀번호에서 타이핑이 일어날때도 동일하게 검증합니다.
- 모든 검증과 이메일 중복확인이 완료되면 회원가입 버튼이 활성화 됩니다.
- 다크 모드가 가능합니다.
- 다른 회원의 계정 페이지는 비회원과 회원 모두 접근이 가능합니다.
- 마이 페이지인 경우에는 회원만 접근이 가능합니다.
- 팔로우/팔로워 버튼을 클릭하면 팔로우/팔로워 페이지로 이동합니다.
- 내 게시글을 클릭하면 게시글 상세 페이지로 이동합니다.
- 내 게시글의 내 프로필 이미지를 클릭해도 다시 마이 페이지로 이동하지 않습니다.
- 다른 회원의 계정 페이지에서는 '팔로우/팔로잉' 버튼이 나타납니다.
- 마이 페이지에서는 '내 계정 변경' 버튼이 나타납니다.
- 다크 모드가 가능합니다.
- 마이 페이지에서 넘어가는 팔로우/팔로워 페이지에서는 내가 팔로우한 사람과 나를 팔로우하고 있는 사람들의 목록을 볼 수 있습니다.
- 다른 회원 계정 페이지에서 넘어온 팔로우/팔로워 페이지에서는 해당 회원이 팔로우한 사람(본인 포함)과 해당 회원을 팔로우하고 있는 사람들(본인 포함)의 목록을 볼 수 있습니다.
- 각 팔로우/팔로워의 프로필 이미지를 누르면 해당 회원의 계정 페이지로 이동합니다.
- 다크 모드가 가능합니다.
- 비회원일시 login 페이지로 이동합니다. (회원만 이용이 가능합니다.)
- 회원의 닉네임을 수정할 수 있습니다.
- 닉네임은 3~8글자 사이에 공백 제외하고 작성이 가능하며, 한글인 경우에는 자음이나 모음 형태는 작성할 수 없도록 validation을 설정하였습니다.
- 닉네임, 커버 이미지, 프로필 이미지 중 하나만 수정해도 저장이 가능합니다. (단, 닉네임은 검증을 통과해야 합니다.)
- 커버 이미지 또는 프로필 이미지 하나를 업로드 하여도 저장하기는 활성화 되며, 활성화 이후 닉네임을 수정하면 다시 비활성화 됩니다.
- 모든 검증이 완료되면 저장하기가 활성화됩니다.
- 저장 후 본인의 마이 페이지로 이동합니다.
- 다크 모드가 가능합니다.
- 비회원일 시, 로그인 페이지로 이동합니다. (회원만 이용이 가능합니다.)
- 본인의 비밀번호를 수정할 수 있습니다.
- 비밀번호와 비밀번호 확인이 서로 일치하는지 확인합니다.
- 비밀번호는 영문 소/대문자, 특수문자, 숫자를 모두 포함하여 8자 이상이어야 합니다.
- 검증이 완료되면 '변경하기' 버튼이 활성화 됩니다.
- 저장 후 본인의 마이 페이지로 이동합니다.
- 다크 모드가 가능합니다.
- 다크모드가 가능합니다
- 메인페이지에서는 + 버튼을 클릭한 후 사용합니다.
- 메인페이지를 제외한 모든 페이지에서 다크모드 버튼이 사용가능합니다.
