Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/hjinn0813/cinetalk
2024.07 토이 프로젝트로 만든 영화 리뷰 기록 및 공유 사이트
https://github.com/hjinn0813/cinetalk
figma mui react redux sass swiper
Last synced: about 2 months ago
JSON representation
2024.07 토이 프로젝트로 만든 영화 리뷰 기록 및 공유 사이트
- Host: GitHub
- URL: https://github.com/hjinn0813/cinetalk
- Owner: hjinn0813
- Created: 2024-07-03T05:09:50.000Z (6 months ago)
- Default Branch: devel
- Last Pushed: 2024-08-13T01:15:46.000Z (5 months ago)
- Last Synced: 2024-08-13T03:06:31.898Z (5 months ago)
- Topics: figma, mui, react, redux, sass, swiper
- Language: JavaScript
- Homepage: https://cinetalk.vercel.app
- Size: 25.4 MB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# '시네톡 | Cinetalk' 사이트 제작
토이 프로젝트로 만든 영화 리뷰 기록 및 공유 사이트 '시네톡'입니다.
## 💻 배포 주소
https://cinetalk.vercel.app/
https://github.com/hjinn0813/cinetalk
## 👨🏫 프로젝트 소개
- **기획 배경** :
영화를 보고 리뷰를 기록하는게 취미여서, 영화 리뷰 기록 및 공유 사이트 '시네톡' 기획 및 제작
- **개발기간 및 과정**
- 2024.07.01 ~ 07.04 : 기획
- 2024.07.03 ~ 07.20 : 개발
- 2024.07.25 ~ 08.08 : 리팩토링 및 보완
## 🛠 기술 스택
- **Frontend**
- **Version Control**
- **Development Tool**
- **Deploy Platform**
- **Design Tool**
## 🎬 주요 기능
### 메인 페이지
- Header에 호버시 컬러 변경 이벤트, 로그인 여부 검증하여 다른 아이콘 출력 (Redux 상태관리)
→ friends, new 메뉴 예외처리 설정 (Not Found 페이지)
- 최신 리뷰, 친구들의 리뷰, 이벤트 카드 (swiper slide)
→ 리뷰에 신호등 표시로 사용자의 평가를 시각적으로 확인 가능
- 최상단 박스오피스 순위, 최하단 광고 배너 자동 슬라이드 (swiper slide)
### 로그인
- 테스트용 아이디, 비번 검증하여 로그인 (Redux 상태관리)
- 아이디와 비번이 일치하지 않으면 input창 아래에 메시지 등장
- `회원가입` 버튼 라우팅 설정
### 회원가입
- 아이디, 비번 유효성검사가 실시간으로 값을 받아와서 진행
- 이용약관 '모두 동의하기' 체크박스 기능
- 입력한 정보가 모두 저장되어 `프로필`에서 보여지도록 설정 (Redux 상태관리)
### 프로필 (마이 페이지)
- 유저명, 라이브러리 등 개인화 서비스 제공
- `라이브러리`, `리뷰 작성하기` 클릭하면 페이지 이동
- `로그아웃` 버튼 기능 구현 (Redux 상태관리)
### 라이브러리 (개인의 기록)
- 개인이 작성한 리뷰 내역 확인 가능
- 모바일에서만 슬라이드로 넘겨보도록 설정 (swiper)
- 특정 리뷰 클릭하면 해당하는 `리뷰 상세보기`로 이동
### 리뷰 상세보기
- 포스터, 영화제목, 작성일, 본문 등 확인 가능
- `좋아요` 버튼 클릭시 디자인 변경 및 개수 카운트
- `공유하기` 버튼 클릭시 URL 주소 자동 복사
- `삭제하기` 버튼 클릭시 리뷰 삭제 가능 (Redux 상태관리, 삭제시 라이브러리에서도 내역 삭제됨)
### 리뷰 작성하기
- 제목, 본문, URL 주소, 작성일 등 입력 가능
- 사진 첨부 및 미리보기 기능 (1장)
- 스포일러 여부, 비공개 여부 toggle 버튼
### 검색 페이지
- 영화진흥위원회의 영화목록 API를 이용해 작품 검색 가능
(input에 값을 입력하고 Enter를 누르면 해당하는 검색값 등장)
## 📌 API
- **영화진흥위원회 - 영화목록 조회 OPEN API**
- 영화명, 감독명 등 키워드로 검색 가능
## 🚀 [Trouble-shooting History (click to check)](https://github.com/hjinn0813/cinetalk/wiki/%F0%9F%9A%80-Trouble%E2%80%90shooting-History)
## 📍 User Flow
## 📁 프로젝트 구조
```bash
📦cinetalk
┣ 📂public
┃ ┣ 📂favicon
┃ ┃ ┣ 📜apple-touch-icon.png
┃ ┃ ┗ 📜favicon.png
┃ ┗ 📜index.html
┣ 📂src
┃ ┣ 📂assets
┃ ┃ ┗ 📜logo.png
┃ ┣ 📂components
┃ ┃ ┣ 📂Footer
┃ ┃ ┃ ┗ 📜Footer.jsx
┃ ┃ ┣ 📂Header
┃ ┃ ┃ ┗ 📜Header.jsx
┃ ┃ ┣ 📂Login
┃ ┃ ┃ ┣ 📜Kakao.jsx
┃ ┃ ┃ ┣ 📜Naver.jsx
┃ ┃ ┃ ┗ 📜Oauth.js
┃ ┃ ┣ 📂Main
┃ ┃ ┃ ┣ 📜Boxoffice.json
┃ ┃ ┃ ┣ 📜EventBox.jsx
┃ ┃ ┃ ┣ 📜Events.json
┃ ┃ ┃ ┣ 📜Friends.json
┃ ┃ ┃ ┣ 📜RankBox.jsx
┃ ┃ ┃ ┣ 📜ReviewBox.jsx
┃ ┃ ┃ ┗ 📜Reviews.json
┃ ┃ ┣ 📂Review
┃ ┃ ┃ ┣ 📜Posts.json
┃ ┃ ┃ ┗ 📜ReadPosts.jsx
┃ ┃ ┣ 📂Watched
┃ ┃ ┃ ┣ 📜LibraryLists.json
┃ ┃ ┃ ┗ 📜WatchedPoster.jsx
┃ ┃ ┗ 📂Write
┃ ┃ ┃ ┗ 📜Toggles.jsx
┃ ┣ 📂pages
┃ ┃ ┣ 📜Login.jsx
┃ ┃ ┣ 📜Main.jsx
┃ ┃ ┣ 📜NotFound.jsx
┃ ┃ ┣ 📜Profile.jsx
┃ ┃ ┣ 📜Register.jsx
┃ ┃ ┣ 📜Review.jsx
┃ ┃ ┣ 📜Search.jsx
┃ ┃ ┣ 📜Watched.jsx
┃ ┃ ┗ 📜Write.jsx
┃ ┣ 📂redux
┃ ┃ ┣ 📂actions
┃ ┃ ┃ ┣ 📜authActions.js
┃ ┃ ┃ ┗ 📜userActions.js
┃ ┃ ┣ 📂reducers
┃ ┃ ┃ ┣ 📜authReducer.js
┃ ┃ ┃ ┣ 📜headerSlice.js
┃ ┃ ┃ ┣ 📜index.js
┃ ┃ ┃ ┣ 📜postSlice.js
┃ ┃ ┃ ┗ 📜userReducer.js
┃ ┃ ┗ 📜store.js
┃ ┣ 📂styles
┃ ┃ ┣ 📂Footer
┃ ┃ ┃ ┗ 📜Footer.scss
┃ ┃ ┣ 📂Header
┃ ┃ ┃ ┗ 📜Header.scss
┃ ┃ ┣ 📂Login
┃ ┃ ┃ ┣ 📜Kakao.scss
┃ ┃ ┃ ┣ 📜Login.scss
┃ ┃ ┃ ┗ 📜Naver.scss
┃ ┃ ┣ 📂Main
┃ ┃ ┃ ┣ 📜EventBox.scss
┃ ┃ ┃ ┣ 📜Main.scss
┃ ┃ ┃ ┣ 📜RankBox.scss
┃ ┃ ┃ ┗ 📜ReviewBox.scss
┃ ┃ ┣ 📂Profile
┃ ┃ ┃ ┗ 📜Profile.scss
┃ ┃ ┣ 📂Register
┃ ┃ ┃ ┗ 📜Register.scss
┃ ┃ ┣ 📂Review
┃ ┃ ┃ ┣ 📜ReadPosts.scss
┃ ┃ ┃ ┗ 📜Review.scss
┃ ┃ ┣ 📂Search
┃ ┃ ┃ ┗ 📜Search.scss
┃ ┃ ┣ 📂Watched
┃ ┃ ┃ ┣ 📜Watched.scss
┃ ┃ ┃ ┗ 📜WatchedPoster.scss
┃ ┃ ┣ 📂Write
┃ ┃ ┃ ┣ 📜Toggles.scss
┃ ┃ ┃ ┗ 📜Write.scss
┃ ┃ ┣ 📜NotFound.scss
┃ ┃ ┗ 📜root.scss
┃ ┣ 📜App.js
┃ ┗ 📜index.js
┣ 📜package-lock.json
┣ 📜package.json
┣ 📜README.md
┗ 📜vercel.json
```
---
### 📢 해당 사이트 제작에 사용한 모든 이미지의 저작권은 소유자에게 있으며, 학습용으로 사용했음을 알립니다.