Skip to content

멋쟁이사자처럼 FE 6th 7조(-7ㅏ-7ㅏ오 7ㅏ즈아) 's Final Project

Notifications You must be signed in to change notification settings

FRONTENDSCHOOL6/react-project-7

Repository files navigation

🦁 멋쟁이사자처럼 FE 6th - Final 7조 (-7ㅏ-7ㅏ오7ㅏ즈아) 프로젝트

📜 목차

프로젝트 소개 🚀

제목: 타잉 클론 프로젝트 일정: 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)/아코디언 메뉴

onboarding

  • 무한루프의 스와이퍼를 구현하였습니다.
  • 랜덤으로 지정된 이미지가 나오는 기능을 구현하였습니다.
  • 아코디언 메뉴 기능이 있습니다.

메인 페이지 스와이퍼

main

  • 스와이퍼로 대부분의 레이아웃을 구성하였습니다.
  • pocketbase에서 콘텐츠를 불러와 렌더링하는 기능을 구현하였습니다.

카테고리별 페이지(영화, 드라마) 전역상태관리/스와이퍼

program

  • 버튼의 클릭된 상태를 위해 zustand를 사용하였습니다.
  • 카테고리 버튼 리스트를 스와이퍼로 구현하였습니다.
  • pocketbase에서 콘텐츠를 불러와 렌더링하는 기능을 구현하였습니다.

상세 페이지 스와이퍼/ 전역상태관리/리뷰기능

detail

  • 스와이퍼 (네비게이션, 페이지네이션) 기능을 구현하였습니다.
  • pocketbase에서 회차 정보, 태그, 비슷한 프로그램 데이터를 불러와 렌더링하였습니다.
  • 에피소드 정렬 기능을 구현하였습니다.
  • 공유 기능을(링크 복사, 페이스북, 트위터 ) 구현하였습니다.
  • 리뷰를 작성, 수정, 삭제할 수 있는 기능을 구현하였습니다.

내가 찜한 콘텐츠 스와이퍼/ 전역상태관리

이미지 압축 라이브러리

이미지 압축

프로젝트 회고 👀

김경아 리액트에 부족함을 느끼고 프로젝트 진행을 할 수 있을지 자신이 없었지만 어려움이 생기면 언제든지 같이 고민해주시는 조원 분들과 함께 머리를 맞대고 고민해보고 해결하면서 결국 끝맺을 수 있었습니다. 한달 동안 지난 3달 간 배운 것들을 다시 익히고 활용해보는 습의 시간이었습니다. 프로젝트를 하며 깨달은 여러 부족한 부분들을 앞으로도 부지런히 공부하며 채워나가고 싶습니다.
노치현 좋은 조원 분들을 만나, 무사히 프로젝트를 마칠 수 있었습니다. 개인적인 욕심으로 새로 배운 기술들을 잘 접목시켰던 것 같지 않아서 아쉬움이 들지만, 추후에 리팩토링할 때 도움이 많이 될 것 같습니다. 지난 4개월 간 멋사 프론트엔드 스쿨을 통해 어떤 방향으로 공부해야할 지, 전 어떤 것을 더 배우고 싶은지 알게된 것만 같아, 앞으로가 더욱 기대됩니다.
양시연 부족한 점들을 마주할 수 있는 기회가 되었습니다. 그래도 이전에 배운 것들을 활용할 수 있는 기회가 되었고, 아는 것과 활용하는 것이 확실히 다르다는 것을 느낄 수 있었습니다. 이후 리팩토링을 꼭 해보고 싶고, 좋은 조원들 덕분에 부족한 점들을 보완할 수 있었던 것 같습니다.
이예나 열심히 적극적으로 참여한 모든 팀원들 덕분에 프로젝트를 잘 마무리할 수 있어 기쁩니다. 4개월의 시간이 너무 빠르게 흘러 아쉬운 마음이 가득이지만 한편으론 앞으로의 개발자를 향한 길이 기대가 되기도 합니다! 그동안 모두 감사했습니다

실행 방법 ⚙️

프로젝트 클론 or 압축파일을 다운로드 한 이후

패키지 설치

pnpm i

프로젝트 실행

pnpm dev

About

멋쟁이사자처럼 FE 6th 7조(-7ㅏ-7ㅏ오 7ㅏ즈아) 's Final Project

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Contributors 4

  •  
  •  
  •  
  •