herrakam / finda-2.0

FINDA와 함께 빠르게 영화를 찾아봐요!

영화를 어디서 봐야 찾아야 할지 모르겠나요?

FINDA는 영화가 어디 있는지,비슷한 영화는 뭐가 있는지 알려줘요!

영화가 어디에 있지?

영화 뭐보지?

비슷한 영화는 뭐가 있지?

프로젝트 개요

Period

  23.05.1 ~ 24.03.13

  유지보수,업데이트 중

 

업데이트 내용

23.3.28

• result 페이지 모바일 화면 여백 조절
• 썸네일 이미지, 설명글 추가
• 페이지 텝에 이미지,제목 변경
• 푸터 변경
• 화폐 단위 대신 역슬레시 나오는 문제 해결

23.3.15

• 영화 페이지 로딩 에러 해결
• 포스터 길이 조절
• 비슷한 영화 스크롤바 삭제
• 라이트모드 색상 변경

Link

  - 배포 사이트

  - 개발 로그

Member

🧑🏻‍💻 JS

기술 스택

FrontEnd

Server,Infra

finda-2.0's Issues

파이어베이스 설치,연결

해야 할 것

• 파이어베이스 공부
• 설치, 연결

ResultPage db 연결

해야 할 것

• db 연결
  • 요청 없을 때는 전체 정보 가져오기
  • 요청 있는 경우에는 요청된 데이터 가져오기

1차 유지보수

해야 할 것

• result 페이지 모바일 화면 여백 맞추기
• 구현 안된 부분 빼기
  • 헤더의 로그아웃, 마이픽
  • 댓글의 아이디
• 메타 테그 작성
  • 썸네일 이미지
  • 설명글
• 페이지 텝 변경
  • 파비콘
  • 텝 내용
• 푸터에 공부목적 추가
• merge시 실행되는 yml파일 변경

result 페이지 기능 구현

구현해야 할 것

• 이벤트 대응
  • 클릭시 상세페이지로 이동
• 에러 처리
  • 결과 없을 때 에러 처리

3차 업데이트 - 로그인 구현, 유지보수

해야 할 것

• ui
  • 로그인 페이지
  • 회원가입 페이지
• db
  • firebase oauth 관련 기능 구축
• 기능
  • 로그인
  • 로그아웃
  • 회원가입(oauth로만)
  • 필요한 정보 불러오기
  • 필요 정보 페이지에 보내주기
  • 댓글에 아이디 보여주기
  • 본인 댓글일시 삭제하기
• etc

• 유지보수
  • 장르 선택 made in Europe ui 변경
  • 중복된 장르 선택 처리

1차 리팩토링

해야 할 것

• movie page 리랜더링 이슈 해결
  • 비슷한 영화 포스터 클릭시 내용 바로 안바뀜
  • 브라우저에 포커스가 들어오면 리랜더링됨
• 반응형 베이스 준비
  • global style 개선
  • 단위 변경, 고정될 것 변경될 것 구분

고민할 것

• 반응형은 어디까지 구현할 것인가? (패드 할거임?)
• 배포는 언제 할 것인가?

로그인 기반 라우터 환경 구현

구현할 것들

• 로그인 상태 구현
• 조건부로 로그인 정보 넘겨줄 라우터 구현
• 라우터로 적용

에러, 로딩 리팩토링

• ErrorBoundary 적용
• suspense 적용

mainbottom ui 구현

구현 목표

• mainBottom의 여백, 크기 등 기본적인 마크업 작업

해야 할 것

• 마크업

무한스크롤

구현해야 할 것들

• tanstack query 무한스크롤 공부
• 파이어스토어 무한스크롤 공부
• 페이지네이션 구현
• 무한스크롤 구현

rank, poster 컴포넌트 구현

구현해야 할 것

• rank
  • ui
  • 데이터 기반 렌더링 구조 구현
• poster
  • ui
  • 호버 이벤트 구현

유저 편의성 버튼 구현

구현해야 할 것들

• 레이아웃
• 가장 위로
• 로그인/로그아웃
• 테마 변경

main 페이지 ui 구현

📙 기대 동작

• main 페이지 ui 구현

📘 작업 내역

• 기본 레이아웃 구현
• 헤더 구현
• 검색창 구현

메인 페이지 검색 기능 구현

구현해야 할 것

• 메인 페이지 검색어 넘겨주기
• 서치바 밑에 간략한 검색 결과 보여주기
• 장르 검색 결과 구현하기
  • 비슷한 영화 로직 리팩토링

반응형

해야 할 것

• 모바일 버전 반응형
• 웹 버전 반응형
• 동적 반응

footer 구현

구현할 내용

• footer 컴포넌트 구현
  • ui
  • github 연동
  • 이력서 연동

환경 구축

1.프로젝트 생성

• vite로 설치

2.필요한 라이브러리 결정

• 상태 관리
• 스타일링
• 테스트
• 기능 구현

3.라이브러리 설치

댓글 기능 구현

구현 해야 할 것

• 댓글 데이터베이스 구현
• 댓글 추가 로직 구현
• 댓글 조회 로직 구현

고민해야 할 것

• db에 어떤 필드를 넣어야 할 것인가( 어떤 구조로 만들 것인가)
  • 나중에 로그인을 구현했을 때 변경 사항을 최소화 해야 함
  • admin을 만들어 볼까?
• 로그인 어떻게 처리할 것인가
  • 로그아웃일 때, 로그인일 때 어떻게 해야 할지 확실하게 해줘야 함

상세 페이지 ui 구현

• 페이지 생성
• 정보 ui
• 댓글 영역

서버 구축

구현해야 할 것

• 웹서버 개설, 연결
• resultpage api 생성
• 서버에 데이터 입력 자동화 찾기

result page 구현

구현해야 할 것

• ui