PICKY는 사용자가 선택한 영화 장르에 맞춰 영화를 추천받고, 영화 정보를 확인하며 리뷰를 남길 수 있는 플랫폼입니다. 또한, 영화를 사랑하는 사람들을 위한 소셜 기능을 제공하여, 특정 영화에 대한 관람평이나 관련 이야기를 다른 사용자들과 자유롭게 공유하고 소통할 수 있는 영화 리뷰 및 소셜 플랫폼 서비스입니다.
PICKY 이용해 보기 🐻 https://www.picky-movie.com/
 |
 |
 |
 |
|---|---|---|---|
| 조계원 | 전경원 | 손성욱 | 최우진 |
| jgw6372@gmail.com | ashjkw3218@gmail.com | sws19960708@gmail.com | mostwj@gmail.com |
| 메인페이지 장르 페이지 관리자 페이지 관리자 추천 영화 플레이리스트 페이지 마이페이지 알람 페이지 스켈레톤 UI 로딩&splash |
프론트엔드 CI/CD 구축 모든&영화 별 무비로그 조회 페이지 무비로그 페이지 무비로그 CRUD 무비로그 상세 페이지 마이페이지 무비로그 탭 |
소셜 로그인 / 회원가입 검색 페이지 영화 추천 페이지 |
영화 상세 페이지 영화 비하인드 모달창 한줄평 CRUD 팔로우&팔로잉 |
 |
 |
 |
|
| TypeScript | React | Vite | Recoil |
 |
 |
||
| Emotion | Storybook | React Query |
LG-Uplus-Movie-SNS-PICKY-FE/
│
├── public/ // 정적 파일 (HTML, 이미지 등)
│
├── src/ // 소스 코드 폴더
│ ├── api/ // 서버 API 관리
│ │
│ ├── assets/ // 정적 파일 (이미지, 폰트 등)
│ │ ├── icons/ // 아이콘 파일
│ │ └── images/ // 이미지 파일
│ │
│ ├── stories/ // 전역에서 재사용 가능한 UI 컴포넌트
│ │ └── ComponentName/
│ │ ├── index.tsx // 컴포넌트 코드
│ │ ├── index.style.tsx // 스타일 코드
│ │ └── index.stories.tsx // Storybook 스토리 파일
│ │
│ ├── constants/ // 프로젝트 전역 상수
│ │ ├── errorCodes.ts // 에러 코드 정의
│ │ ├── routes.ts // 라우트 상수
│ │ └── globalConstants.ts // 기타 글로벌 상수
│ │
│ ├── hooks/ // 커스텀 훅
│ │
│ ├── pages/ // 각 페이지별 컴포넌트
│ │ └── PageName/ // 예: 특정 페이지
│ │ ├── index.tsx // 페이지 메인 컴포넌트
│ │ ├── index.styles.tsx // 페이지 스타일 파일
│ │ └── components/ // 페이지 전용 하위 컴포넌트
│ │ └── ComponentName
│ │ ├── index.tsx
│ │ └── index.styles.tsx
│ │
│ ├── recoil/ // 상태 관리 (Recoil)
│ │ ├── atoms/ // Recoil Atom 정의
│ │ └── selectors/ // Recoil Selector 정의
│ │
│ ├── styles/ // 글로벌 스타일 및 테마
│ │
│ ├── types/ // TypeScript 타입 정의
│ │ ├── api.ts // API 관련 타입
│ │ ├── components.ts // 컴포넌트 관련 타입
│ │ └── pages.ts // 페이지 관련 타입
│ │
│ ├── routes/ // 라우팅 관련 설정
│ │ ├── index.tsx // 메인 라우팅 설정
│ │ └── privateRoutes.tsx // Private Route 설정
│ │
│ ├── App.tsx // 메인 리액트 컴포넌트
│ └── main.tsx // 애플리케이션 진입점
│
├── vite.config.ts // Vite 설정 파일
├── package.json // 프로젝트 설정 파일
└── yarn.lock // 패키지 버전 관리 파일
// 프로젝트 Clone 방법
git clone https://github.com/LG-Uplus-Movie-SNS-PICKY/PICKY-FE.git
cd LG-Uplus-Movie-SNS-PICKY
// 의존성 설치
yarn intall
// 패키지 추가
yarn add { 패키지명 }
// 로컬 서버 실행
yarn dev카카오, 네이버, 구글 로그인을 통해 서비스 이용이 가능해요!
회원가입을 통해 개인 맞춤형 AI 추천을 받을 수 있어요!
메인페이지에서 다양한 영화 콘텐츠를 추천 받을 수 있어요!
장르 별 추천 영화를 볼 수 있어요!
개인 맞춤형 AI 추천 영화 확인이 가능하고 관리자 추천 영화 플레이 리스트를 제공 받을 수 있어요!
Elasticsearch를 통해 연관 검색어 자동 완성이 가능하고 최근 검색어를 확인할 수 있어요!
영화에 대한 상세 정보를 확인할 수 있어요!
한줄평을 조회, 등록 할 수 있고 데이터 기반 평점 분석이 가능해요!
Elasticsearch 자유롭게 영화에 대한 게시글을 등록/수정할 수 있어요!
무비로그 소셜 피드에서 게시글을 조회하고 좋아요를 누르고 삭제하며 댓글 또한 남기면서 사람들과 자유롭게 소통할 수 있어요!
내가 작성한 게시글, 한줄평, 좋아요한 영화에 대한 나만의 기록을 확인하고 프로필을 수정할 수 있어요!
팔로우 / 팔로잉 목록을 확인하고 다른 유저를 팔로잉 할 수 있어요!
내가 좋아요한 영화 관련 게시글에 대한 알람을 받을 수 있어요!
관리자 기능을 통해 서비스를 관리할 수 있어요!
