OTTi_Frontend

SKHU IT 경진대회 출품작 Team Hoodie Frontend
• OTTi •
OTT 구독료 관리를 효율적으로 지원하고, 사용자 간의 공동 구독 기능을 제공하는 사용자 중심의 앱
Project Resources	| • | • | • | • | • | • | • |	목차
View in Web		Team Hoodie?
		작품 개요
•		작품 구성
Download mobile app		기술 스택 & 서버 아키텍쳐
		Database ERD
•		주요 개발 방법
Documentation		프로젝트 확장성
		Member of Hoodie

---

👕 Team Hoodie?

팀원 모두가 후드를 착용하고 있었던 당시의 모습에서 영감을 받아, 창의적이고 자유로운 협업의 의지를 담고 있음. 'Hoodie'라는 이름은 이러한 팀의 정체성을 반영하며, 협업의 분위기를 강조함.

---

🧐 작품 개요

본 작품은 OTT 구독료 관리의 불편함을 해결하기 위해 개발됨.
매달 OTT 구독료의 자동이체 시점을 기억하기 어렵고,
갑작스럽게 통장에서 인출되는 구독료의 출처를 잊어버리는 경우가 빈번하다는 의견에서 출발함.

이를 해결하기 위해 사용자는 OTT 구독 정보를 저장하고 구독료의 출금 일정을 캘린더와 파이 차트, 디데이 기능을 통해 시각적으로 확인할 수 있음.
또한, '팟' 기능을 도입하여 팀원을 모집하고 OTT 구독료를 공동으로 분담할 수 있도록 함.
사용자는 각자의 조건을 작성하여 팀원을 찾는 게시글을 올릴 수 있으며,
이를 통해 넷플릭스와 같은 여러 계정을 함께 사용할 수 있는 기회를 제공함.
이러한 기능은 사용자 간의 협업을 촉진하고, OTT 구독료 관리의 효율성을 높임.

유사한 앱으로는 피클플러스와 링키드가 있음. 두 앱은 주로 구독 서비스를 공유하는 멤버를 찾는 기능에 중점을 두고 있음.
반면, 본 작품은 구독료 공동 분담 기능을 서브 기능으로 두고, 메인 기능으로는 사용자가 자신의 OTT 구독 스케줄을 한눈에 보고 기억할 수 있도록 돕는 점에서 차별성을 가짐.
구독료 출금 일정을 시각적으로 관리하고, 사용자가 일정 관리를 보다 체계적으로 할 수 있도록 설계된 것이 이 앱의 주요 강점임.

---

📑작품 구성

기능	상세 기능	설명
소셜 로그인	•	카카오 OAuth를 활용한 간편한 소셜 로그인 기능을 제공하여 사용자가 손쉽게 계정을 생성하고 로그인할 수 있음
OTT 구독료 관리	총 구독료 확인	이번 달 기준으로 사용자가 지출한 OTT 구독료를 한눈에 볼 수 있도록 표시, 클릭 시 총 구독료를 각 OTT 결제 비율로 나눈 파이차트를 통해 시각적으로 확인할 수 있음
	한 번에 보기	구독 중인 OTT 서비스들의 결제 날짜를 캘린더로 시각화하여 쉽게 파악할 수 있도록 함
캘린더 기능	•	달력에 구독 서비스의 결제 날짜를 표시하고, 특정 날짜를 클릭하면 해당 OTT 서비스의 구독 정보를 상세히 확인할 수 있는 모달창이 뜸
구독 OTT 추가 및 관리 기능	•	넷플릭스, 웨이브, 티빙, 쿠팡플레이, 디즈니플러스, 왓챠의 요금제, 결제 금액, 결제일 등을 입력 및 수정할 수 있음
구독 정보 관리	구독 정보 전체 확인	사용자의 구독 정보 전체를 한눈에 확인할 수 있으며, 요금제, 결제 금액, 결제일, 메모 등을 수정하거나 삭제 가능
프로필 관리	•	사용자는 프로필 사진, 닉네임을 수정할 수 있으며, 기본 프로필 사진은 오띠 로고로 설정됨
팟(Pot) 기능	팟 만들기	사용자가 원하는 OTT 서비스 및 요금제를 선택하고, 입금 계좌 및 결제일을 설정할 수 있음
	팟 신청 리스트	팟에 지원한 사용자 목록을 확인하고, 각 지원자의 프로필 사진, 닉네임, 한 줄 소개를 볼 수 있음
	팟 관리	팟 멤버 목록 확인, 방장의 멤버 관리(강퇴 가능)의 기능을 제공
	팟 커뮤니티	팟 멤버들 간의 소통을 위한 게시판 기능을 제공하고, 원하는 글을 검색할 수 있음 게시판에서 멤버들은 자유롭게 글을 작성하거나 댓글을 달 수 있으며, 원하는 팟 게시글에서 바로 팟 가입 신청도 가능함
게시글 관리	•	사용자가 작성한 글 목록을 확인하고, 글 제목, 내용 미리보기, 댓글 개수 등의 정보를 확인할 수 있음 커뮤니티 탭에 수록될 게시글을 작성할 수 있으며, 글에 사진을 추가할 수 있음

---

🛠️ 기술 스택	🏛️ 서버 아키텍쳐
Role Stack FE BE Infra App

---

🗄Database ERD

---

💻 주요 개발 방법

FE
김주하	커뮤니티 댓글 작성	박예은	ott 추가, 삭제, 구독 정보 리스트
	설명 handleInputChange: 사용자가 입력한 댓글 내용을 실시간으로 상태에 반영 content 상태를 관리 handleAddComment: 댓글이 입력 시 상위 컴포넌트로 전달 입력 필드를 초기화하는 책임을 가짐 상세 코드		설명 handleChange 함수는 form의 값을 변경할 때 호출되며, ott 정보와 일반 폼 데이터를 구분하여 상태를 업데이트함. if (name.startsWith('ott.')): name이 'ott.'로 시작하면 OTT 관련 정보를 업데이트함. const [_, key] = name.split('.');: name을 ‘.’으로 나누어 두 번째 부분(key)을 가져옴. 이 부분은 ott 객체의 속성 이름이 됨. setFormData((prevFormData) => ({...})): formData 상태를 업데이트함. 이전 상태를 복사하고 ott 객체 안의 해당 속성만 수정하는 기능을 함. [key]: value를 이용해 특정 OTT 속성을 업데이트함. else의 경우 name이 'ott.'로 시작하지 않으면 일반적인 폼 필드로 간주함. 입력 필드의 name이 'payment' 또는 'paymentDate'일 경우 빈 문자열을 0으로 설정함. 그렇지 않으면 입력 값을 그대로 사용하여 formData 상태를 업데이트함. 상세 코드
BE
박세은	팟 가입 요청 처리	박소정	미사용 이미지 삭제 스케줄링
	설명 다른 사용자가 만든 팟에 가입하기 위해서는 PotJoinRequestDTO를 사용하여 가입 요청을 전송해야 함 가입 요청은 해당 팟의 관리자에게 전송되며, 관리자는 이를 승인하거나 거부 가능 관리자는 팟에 대한 가입 요청을 확인하고 승인 또는 거부할 수 있는 권한을 가짐 승인 시 해당 사용자는 Pot 멤버로 추가됨 상세 코드		설명 사용자가 이미지 호스팅 한 글을 작성 중단한 경우, 사용되지 않는 이미지가 Amazon S3 버킷에 계속 남게 됨 이런 이미지는 자원을 낭비하므로 매일 자정 불필요한 이미지 삭제를 요청하는 스케줄링 구현함 Post와 연결되지 않은 이미지 중에서 생성된 지 24시간이 지난 이미지는 버킷과 이미지 레포지토리에서 삭제됨 상세 코드

---

⏩ 프로젝트 확장성

🛠️ 기술 측면	💁‍♀️ 서비스 측면
1. 댓글 수정 기능	1. 배지 기능
2. 팟 해지(퇴장) 기능	2. OTT 종류 추가
3. 팟 정보 수정 기능	3. 본인 인증(PASS 앱 등)
4. 팟 본인 인증 강화(인증 시 아이디, 비번, 계좌 확인)	4. 팟 채팅 기능
5. 프로필 기본 이미지 변경 기능
6. 로그아웃, 탈퇴 기능
7. 알림 기능
8. 로딩 페이지 디자인 수정 및 필요한 페이지 삽입
9. 팟 삭제 기능

---

😏 Member of Hoodie

Frontend		Backend
김주하	박예은	박세은	박소정
@laketree2	@yengniws	@seun123	@sojeong0202