제목: 타잉 클론 프로젝트 일정: 9/4 ~ 9/25 ( 9/4 ~ 9/7 : 컨벤션 확립 및 프로젝트 기획(기존 시안에서 추가하는 부분) 9/8 ~ 9/21 : 개발 9/22 ~ 9/24 : 리팩토링 및 보완 ) 목표: 주어진 기한 내에, 각자 할 수 있는 최선을 다하자
배포 주소 🏠
⬆
| 김경아 | 노치현(Lead/Scrum) | 양시연 | 이예나 |
|---|---|---|---|
| 이름 | 페이지(담당기능) |
|---|---|
| 김경아 | 로그인(유효성 검증 / 카카오 로그인), 회원가입 페이지, ID찾기 페이지 |
| 노치현 | 검색 페이지(데이터 필터링, 스와이퍼, 전역상태관리), 프로필 관련 페이지(전역상태관리), 멤버십 페이지 |
| 양시연 | 온보딩 페이지, 메인 페이지, 카테고리별 리스트 페이지 |
| 이예나 | 상세 페이지, 내가 찜한 콘텐츠 페이지 |
스케폴딩 구조
src 📂
├── App.jsx
├── api
│ └── pocketbase.js
├── assets
│ └── react.svg
├── components
│ ├── category
│ │ ├── Category.module.css
│ │ ├── MovieContent.jsx
│ │ ├── MovieNav.jsx
│ │ ├── NavButton.jsx
│ │ ├── ProgramContent.jsx
│ │ └── ProgramNav.jsx
│ ├── common
│ │ ├── Button
│ │ │ ├── Button.module.css
│ │ │ └── Buttons.jsx
│ │ ├── PendingPage.jsx
│ │ ├── Spinner.jsx
│ │ └── SwiperButton.jsx
│ ├── detail
│ │ ├── Contents.module.css
│ │ ├── DetailData.jsx
│ │ ├── EditReview.jsx
│ │ ├── EpisodeToggle.jsx
│ │ ├── RelatedVideo.jsx
│ │ ├── Review.jsx
│ │ ├── ShareLink.jsx
│ │ └── SimilarVideo.jsx
│ ├── editProfile
│ │ ├── ButtonSection.jsx
│ │ ├── EditProfile.module.css
│ │ ├── EditProfileSection.jsx
│ │ └── TitleSection.jsx
│ ├── editProfiles
│ │ ├── ButtonSection.jsx
│ │ ├── EditProfiles.module.css
│ │ ├── ProfileItem.jsx
│ │ ├── ProfileList.jsx
│ │ ├── ProfileListSection.jsx
│ │ └── TitleSection.jsx
│ ├── findid
│ │ ├── ConfirmButton.jsx
│ │ ├── ConfirmButton.module.css
│ │ ├── InputForm.jsx
│ │ ├── InputForm.module.css
│ │ ├── LoginButton.jsx
│ │ └── LoginButton.module.css
│ ├── footer
│ │ └── footerContents.jsx
│ ├── header
│ │ ├── Header.module.css
│ │ ├── HoverBox.jsx
│ │ ├── LogoutPopUp.jsx
│ │ ├── ProfileModal.jsx
│ │ └── headerContents.jsx
│ ├── home
│ │ ├── EventBanner.jsx
│ │ ├── Home.module.css
│ │ ├── MainBanner.jsx
│ │ ├── MainList.jsx
│ │ └── PopularList.jsx
│ ├── membership
│ │ ├── Membership.module.css
│ │ ├── MembershipTable.jsx
│ │ ├── MembershipTitle.jsx
│ │ ├── MembershipType.jsx
│ │ ├── MembershipTypes.jsx
│ │ └── MembershipWarning.jsx
│ ├── onBoarding
│ │ ├── Find.jsx
│ │ ├── JoinMain.jsx
│ │ ├── LoopSlide.jsx
│ │ ├── OnBoarding.module.css
│ │ ├── OnlyTaing.jsx
│ │ ├── QnA.jsx
│ │ ├── Smart.jsx
│ │ ├── StartButton.jsx
│ │ ├── StartNow.jsx
│ │ ├── Together.jsx
│ │ └── Youtube.jsx
│ ├── profile
│ │ ├── Profile.module.css
│ │ ├── ProfileEditButton.jsx
│ │ ├── ProfileItem.jsx
│ │ ├── ProfileList.jsx
│ │ └── ProfileTitle.jsx
│ ├── search
│ │ ├── Search.module.css
│ │ ├── contents
│ │ │ ├── ListSection.jsx
│ │ │ ├── RealtimeSearch.jsx
│ │ │ ├── RecentView.jsx
│ │ │ ├── SearchResult.jsx
│ │ │ ├── SearchSection.jsx
│ │ │ ├── SearchedResultSwiper.jsx
│ │ │ ├── SearchingResultList.jsx
│ │ │ └── SearchingResultSwiper.jsx
│ │ └── util
│ │ ├── CurrentTime.jsx
│ │ └── HighlightedText.jsx
│ ├── signin
│ │ ├── SubmitButton.jsx
│ │ └── SubmitButton.module.css
│ └── snslogin
│ ├── SnsLogin.jsx
│ └── SnsLogin.module.css
├── hooks
│ └── useStorage.js
├── layout
│ ├── Footer.jsx
│ ├── Footer.module.css
│ ├── Header.jsx
│ ├── RootLayout.jsx
│ └── SimpleHeader.jsx
├── main.jsx
├── pages
│ ├── Contents.jsx
│ ├── EditProfile.jsx
│ ├── EditProfiles.jsx
│ ├── FailedFindId.jsx
│ ├── Favorite.jsx
│ ├── FindId.jsx
│ ├── FindPassword.jsx
│ ├── Home.jsx
│ ├── Membership.jsx
│ ├── Movie.jsx
│ ├── NotFound.jsx
│ ├── OnBoarding.jsx
│ ├── Profile.jsx
│ ├── Program.jsx
│ ├── Search.jsx
│ ├── SignIn.jsx
│ ├── SignInList.jsx
│ ├── SignUp.jsx
│ └── SuccessFindId.jsx
├── routes
│ ├── ProtectRoute.jsx
│ └── route.jsx
├── store
│ ├── buttonStore.js
│ ├── idStore.js
│ ├── useAuthStore.js
│ ├── useContentsStore.js
│ ├── useMovieStore.js
│ ├── useProfileStore.js
│ ├── useProgramStore.js
│ └── useSearchStore.js
├── styles
│ └── index.css
└── utils
├── debounce.js
├── getPbImageURL.js
├── keyDown.js
├── removeQuotes.js
└── separateComma.js
| 페이지 | 기능 |
|---|
결과물 gif
| 검색 페이지 | 최근 검색어 / 검색 전,중,후(다른 UI) / 스와이퍼 / 전역상태관리 |
|---|
- 검색 전 / 중 / 후에 따라 조건부 렌더링으로 UI를 달리 하였습니다.
- 검색버튼을 누른 데이터 들은 상태로서 최근 검색어에 유지됩니다.
- 전역상태관리로서 zustand를 활용했습니다.
| 프로필 관련 페이지 | 전역상태관리 |
|---|
- 프로필 편집(useranme, avatr) 기능을 구현하였습니다.
| 랜딩 페이지 | 스와이퍼(infinite-loop)/아코디언 메뉴 |
|---|
- 무한루프의 스와이퍼를 구현하였습니다.
- 랜덤으로 지정된 이미지가 나오는 기능을 구현하였습니다.
- 아코디언 메뉴 기능이 있습니다.
| 메인 페이지 | 스와이퍼 |
|---|
- 스와이퍼로 대부분의 레이아웃을 구성하였습니다.
- pocketbase에서 콘텐츠를 불러와 렌더링하는 기능을 구현하였습니다.
| 카테고리별 페이지(영화, 드라마) | 전역상태관리/스와이퍼 |
|---|
- 버튼의 클릭된 상태를 위해 zustand를 사용하였습니다.
- 카테고리 버튼 리스트를 스와이퍼로 구현하였습니다.
- pocketbase에서 콘텐츠를 불러와 렌더링하는 기능을 구현하였습니다.
| 상세 페이지 | 스와이퍼/ 전역상태관리/리뷰기능 |
|---|
- 스와이퍼 (네비게이션, 페이지네이션) 기능을 구현하였습니다.
- pocketbase에서 회차 정보, 태그, 비슷한 프로그램 데이터를 불러와 렌더링하였습니다.
- 에피소드 정렬 기능을 구현하였습니다.
- 공유 기능을(링크 복사, 페이스북, 트위터 ) 구현하였습니다.
- 리뷰를 작성, 수정, 삭제할 수 있는 기능을 구현하였습니다.
| 내가 찜한 콘텐츠 | 스와이퍼/ 전역상태관리 |
|---|
| 김경아 | 리액트에 부족함을 느끼고 프로젝트 진행을 할 수 있을지 자신이 없었지만 어려움이 생기면 언제든지 같이 고민해주시는 조원 분들과 함께 머리를 맞대고 고민해보고 해결하면서 결국 끝맺을 수 있었습니다. 한달 동안 지난 3달 간 배운 것들을 다시 익히고 활용해보는 습의 시간이었습니다. 프로젝트를 하며 깨달은 여러 부족한 부분들을 앞으로도 부지런히 공부하며 채워나가고 싶습니다. |
|---|---|
| 노치현 | 좋은 조원 분들을 만나, 무사히 프로젝트를 마칠 수 있었습니다. 개인적인 욕심으로 새로 배운 기술들을 잘 접목시켰던 것 같지 않아서 아쉬움이 들지만, 추후에 리팩토링할 때 도움이 많이 될 것 같습니다. 지난 4개월 간 멋사 프론트엔드 스쿨을 통해 어떤 방향으로 공부해야할 지, 전 어떤 것을 더 배우고 싶은지 알게된 것만 같아, 앞으로가 더욱 기대됩니다. |
| 양시연 | 부족한 점들을 마주할 수 있는 기회가 되었습니다. 그래도 이전에 배운 것들을 활용할 수 있는 기회가 되었고, 아는 것과 활용하는 것이 확실히 다르다는 것을 느낄 수 있었습니다. 이후 리팩토링을 꼭 해보고 싶고, 좋은 조원들 덕분에 부족한 점들을 보완할 수 있었던 것 같습니다. |
| 이예나 | 열심히 적극적으로 참여한 모든 팀원들 덕분에 프로젝트를 잘 마무리할 수 있어 기쁩니다. 4개월의 시간이 너무 빠르게 흘러 아쉬운 마음이 가득이지만 한편으론 앞으로의 개발자를 향한 길이 기대가 되기도 합니다! 그동안 모두 감사했습니다 |
프로젝트 클론 or 압축파일을 다운로드 한 이후
pnpm ipnpm dev
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent