🎬 ReadMe & LeadMe

ReadMe & LeadMe는 영화 및 콘텐츠 정보를 쉽고 빠르게 탐색하고,
리뷰를 남기며 다양한 유저들과 소통할 수 있는 콘텐츠 큐레이션 서비스입니다.

🚀 주요 기능

콘텐츠 추천

• 사용자의 취향, 시청 이력, 인기 순위 등을 기반으로 맞춤형 영화/콘텐츠 추천
• 홈 화면에서 다양한 추천 섹션(오늘의 추천, 장르별 추천 등) 제공

쇼츠(Shorts)

• 짧은 영상(쇼츠) 형태로 콘텐츠 하이라이트, 예고편 등 제공
• 스와이프/스크롤 기반 UI로 빠르고 직관적인 탐색
• 쇼츠별 좋아요, 공유, 댓글 등 인터랙션 지원

리뷰(평점/코멘트) 작성 및 조회

• 내 리뷰 작성/수정/삭제 및 별도 스타일 강조
• 모든 유저의 리뷰를 무한스크롤로 탐색
• 리뷰 작성 시 상태 관리(작성 중, 완료, 에러 등) 및 에러 핸들링

📱 기능 소개

기능 미리보기	기능 설명
	1. 온보딩 - 사용자 정보 및 취향을 파악하는 첫 단계 - 선호 콘텐츠 직접 선택 - 선택한 콘텐츠의 장르 및 분위기를 기반으로 맞춤 콘텐츠 추천
	2. 홈 - 취향 기반 추천 콘텐츠를 한눈에 볼 수 있는 메인 페이지 - 홈은 총 4단으로 구성   ① 맞춤 콘텐츠 영상 배너 (최상단)   ② 개인 맞춤 콘텐츠 추천   ③ 장르별 추천 콘텐츠   ④ 추천 큐레이션 - 구성 요소는 유저별로 실시간 개인화 - 시청 이력, 좋아요, 리뷰 등 행동 데이터 기반 추천 로직 반영
	3. 콘텐츠 상세 - 홈에서 관심 콘텐츠를 선택하면 상세 페이지로 이동 - 예고편 영상, 시놉시스, 사용자 리뷰를 한눈에 확인 - 리뷰 작성 -> 사용자의 반응 데이터로 추천에 반영
	4. 쇼츠 (Shorts) - 끊김 없는 무한 스크롤로 콘텐츠 탐색 - 무작위가 아닌 추천 로직 기반으로 자동 구성 - 시청 기록, 좋아요 등 반응 데이터를 활용해 개인화 쇼츠 추천 - 타임라인 기반 댓글/좋아요 기능 제공 - 영상의 특정 시점에 반응 포인트가 시각적으로 표시되어   다른 사용자와 함께 보는 경험 제공 - 모든 반응은 실시간 피드백으로 추천 시스템에 반영
	5. 큐레이션 - 에디터 이상 권한 사용자만 큐레이션 등록 가능 - 사용자가 선택한 콘텐츠로 큐레이션 구성 및 제목·설명 작성 - 썸네일은 사용자가 고른 콘텐츠 이미지로 자동 생성 - 등록된 큐레이션은 다른 사용자 홈에서 큐레이션 추천에 반영

🛠️ 기술 스택

분야	기술 스택
Frontend
State Management
API 통신
인증
Code Quality
기타

📦 폴더 구조

src/
  apis/           # API 함수 모음
  components/     # UI 컴포넌트
  hooks/          # 커스텀 훅
  pages/          # 라우트별 페이지
  types/          # 타입 정의
  constants/      # 상수/엔드포인트

💡 아토믹 디자인 패턴

구조 적용 예시	구성 설명
	UI 컴포넌트를 Atom, Molecule, Organism 단위로 계층화하여 역할을 명확히 분리하고, 일관된 UI 설계를 구축 Template 컴포넌트는 시각적 레이아웃과 구성에 집중하고, Page 컴포넌트는 데이터 주입과 비즈니스 로직을 담당하도록 구조화

💡 HLS 기반 영상 스트리밍 구조

구조 적용 예시	구성 설명
	계층적 스트림 관리: 하나의 마스터 playlist(m3u8)가 여러 해상도별 playlist(m3u8)로 분기되며, 각 해상도 playlist는 초 단위로 분할된 세그먼트(ts) 파일로 구성 적응형 스트리밍(ABR): 클라이언트는 재생 중 네트워크 속도, 디바이스 성능 등의 환경 정보를 실시간으로 감지하여, 최적의 해상도 playlist와 segment 조각을 선택·다운로드 네트워크가 느려지면 더 낮은 해상도의 segment로, 빨라지면 고해상도 segment로 자동 전환되어 끊김 없는 재생

🖥️ 로컬 개발 환경

1. 의존성 설치

   npm install

2. 환경변수 설정
   • .env 파일에 API 서버 주소, 카카오 키 등 입력
3. 개발 서버 실행

   npm run dev

👥 팀원 소개

이은비 @silverain02	박재민 @0Jaemin0	이예슬 @neungdong
- 팀장, 기획 및 디자인 총괄 - 콘텐츠 상세 페이지 - 쇼츠 영상 스트리밍 - 레이팅 로직 도입	- FE 기술 담당 - 사용자 인증 - 온보딩 페이지 - 마이페이지 - 백오피스	- 홈 페이지 개발 - 쇼츠 인터랙션 - 프리패칭 적용