멋쟁이 사자처럼 프론트엔드 스쿨 1기 Final Project 5조

프로젝트 소개 및 개요

Dear, Xmas는 크리스마스의 감성과 특별한 순간을 함께 쌓아가는 웹 서비스입니다.
크리스마스와 관련된 컨텐츠를 즐길 수 있습니다.

⏰ 작업기간 : 23.12.01 ~ 23.12.25

🔗 배포링크 : https://dear-xmas.vercel.app/

ID : 726yhy@naver.com
PW : istest12**

Five Rookies 팀원 소개

유재영	송수빈	윤선영	이준엽

zxxng	ssb1565b	seonyeongyoon	dv-yeop920

로그인, 회원가입, 비밀번호 찾기 미들웨어 / 라우트 핸들러 프로필 수정 기능 댓글 수정 / 삭제 기능	실시간 채팅&영상 기능 GitHub 잔디 연동 카운트 다운 기능 검색 기능 댓글 좋아요 / 생성 기능 카카오톡 공유 기능	드롭다운 헤더 랜덤 슬롯 머신 설문조사 애니메이션, 데이터 통계 무한스크롤 기능	댓글/crud 좋아요 기능 디바운싱 처리 페러렐,인터셉트 라우팅 모달 모임생성 기능 탭 기능 다크모드 기능

기술 및 개발 환경

Front-end

Back-end

Design

협업

배포

🛠 개발 환경

코드 충돌을 줄이고 브랜치 관리가 용이한 Git Flow 방식을 사용하여 기능 브랜치를 만들고
각자 작업 브랜치를 따로 생성하여 작업하고, 기능 브랜치로 PR을 올립니다.
PR은 코드 리뷰 담당자를 지정하여 검토 후 Merge를 진행합니다.

📚 Branch

main : 배포 브랜치
develop : 메인 브랜치 배포전 테스트 브랜치
feat/개발명 : 기능 개발 브랜치 ex) feat/Askquestion

🙏🏼 커밋 컨벤션

커밋 유형	설명
Feat	새로운 기능 구현, 특징 추가
Fix	버그해결, 수정
Refactor	리팩토링
Design	UI/스타일 파일 추가/수정
Move	파일, 코드의 이동
Rename	파일명, 디렉토리명 변경
Remove	어떤 요소 혹은 파일을 삭제했을 때
Docs	문서 관련 작업
Chore	자잘한 수정에 대한 커밋
Add	npm 등 설치 실행 관련

폴더 구조

📁

src
├── app
│   ├── (common)
│   │   ├── _components
│   │   │   ├── Footer.tsx
│   │   │   ├── Header.tsx
│   │   │   ├── MainMenu.tsx
│   │   │   ├── Profile.tsx
│   │   │   ├── ScrollBtn.module.scss
│   │   │   ├── ScrollBtn.tsx
│   │   │   ├── SearchInput.tsx
│   │   │   ├── footer.module.scss
│   │   │   └── header.module.scss
│   │   ├── developers
│   │   │   ├── Member.tsx
│   │   │   ├── developers.module.scss
│   │   │   └── page.tsx
│   │   ├── layout
│   │   └── search
│   │       ├── _components
│   │       │   ├── NoResult.tsx
│   │       │   └── SearchList.tsx
│   │       ├── page.tsx
│   │       └── search.module.scss
│   ├── (meetUp)
│   │   ├── @createMeetupModal
│   │   │   ├── (.)detail
│   │   │   │   └── [id]
│   │   │   │       └── meetupModal
│   │   │   │           └── page.tsx
│   │   │   └── default.tsx
│   │   ├── _components
│   │   │   └── _meetupModal
│   │   │       ├── _datePicker
│   │   │       │   └── DatePicker.tsx
│   │   │       └── _meetupModal
│   │   │           ├── MeetupModal.tsx
│   │   │           └── meetupModal.module.scss
│   │   ├── detail
│   │   │   └── [id]
│   │   │       ├── _components
│   │   │       │   ├── Comment.tsx
│   │   │       │   ├── CommentList.tsx
│   │   │       │   ├── CreateComment.tsx
│   │   │       │   ├── CreateMeetUpButton.tsx
│   │   │       │   ├── DetailHeader.tsx
│   │   │       │   └── RelatedVedio.tsx
│   │   │       ├── detail.module.scss
│   │   │       ├── error.tsx
│   │   │       ├── layout.tsx
│   │   │       ├── meetupModal
│   │   │       │   └── page.tsx
│   │   │       └── page.tsx
│   │   ├── layout.tsx
│   │   ├── live
│   │   │   ├── _components
│   │   │   │   ├── LiveButton.tsx
│   │   │   │   ├── LiveChat.tsx
│   │   │   │   └── LiveStream.tsx
│   │   │   ├── error.tsx
│   │   │   ├── live.module.scss
│   │   │   └── page.tsx
│   │   └── meetup
│   │       ├── _components
│   │       │   ├── MeetupBox.tsx
│   │       │   ├── MeetupList.tsx
│   │       │   ├── MyMeetupList.tsx
│   │       │   ├── VideoList.tsx
│   │       │   └── _tab
│   │       │       ├── MeetupTabButtons.tsx
│   │       │       ├── MeetupTabPage.tsx
│   │       │       └── TabLoading.tsx
│   │       ├── layout.tsx
│   │       ├── meetup.module.scss
│   │       ├── meetupList
│   │       │   └── page.tsx
│   │       ├── myMeetupList
│   │       │   └── page.tsx
│   │       └── page.tsx
│   ├── (sign)
│   │   ├── _components
│   │   │   ├── SignInput.tsx
│   │   │   └── sign.module.scss
│   │   ├── resetpassword
│   │   │   └── page.tsx
│   │   ├── signIn
│   │   │   ├── findPassword
│   │   │   │   └── page.tsx
│   │   │   └── page.tsx
│   │   └── signUp
│   │       └── page.tsx
│   ├── _components
│   │   ├── @createSurveyModal
│   │   │   ├── (..)surveyModal
│   │   │   │   ├── page.tsx
│   │   │   │   └── surveyModal
│   │   │   │       └── _components
│   │   │   │           ├── SurveyModal.tsx
│   │   │   │           └── surveyModal.module.scss
│   │   │   └── detault.tsx
│   │   ├── ChristmasCounter.tsx
│   │   ├── Main.tsx
│   │   ├── MainMeetupList.tsx
│   │   ├── MeetupList.tsx
│   │   ├── Modal.module.scss
│   │   ├── Slot.tsx
│   │   ├── SlotContent.tsx
│   │   ├── SlotModal.tsx
│   │   ├── Survey.tsx
│   │   ├── SurveyGraph.tsx
│   │   └── SurveyModal.tsx
│   ├── auth
│   │   ├── callback
│   │   │   └── route.ts
│   │   ├── login
│   │   │   └── route.ts
│   │   ├── logout
│   │   │   └── route.ts
│   │   └── sign-up
│   │       └── route.ts
│   ├── datepicker.scss
│   ├── favicon.ico
│   ├── globalButton.module.scss
│   ├── globals.scss
│   ├── layout.tsx
│   ├── loading.tsx
│   ├── not-found.tsx
│   ├── page.module.scss
│   ├── page.tsx
│   └── thems.scss
├── components
├── hooks
│   ├── useInfiniteScroll.ts
│   ├── useLoadMore.ts
│   └── useScrollBottom.ts
├── middleware.ts
├── status
│   └── store.ts
├── type
│   ├── Component.ts
│   ├── SupabaseResponse.ts
│   ├── YoutubeApiResponse.ts
│   └── supabase.ts
└── utils
    ├── apiRequest
    │   ├── commentsApiRequest.ts
    │   ├── defaultApiSetting.ts
    │   ├── defaultServerApiSetting.ts
    │   ├── likeApiRequest.ts
    │   ├── liveApiRequest.ts
    │   ├── meetupApiRequestClient.ts
    │   ├── meetupApiRequestServer.ts
    │   ├── profileApiRequest.ts
    │   ├── signUserSupabase.ts
    │   └── surveyApiRequest.ts
    ├── calculateTimeUntilDay.ts
    ├── cookieClient.ts
    ├── cookieServer.ts
    ├── relativeDate.ts
    └── youtubRequest
        ├── youtubeApiRequest.ts
        ├── youtubeJsonRequest.ts
        └── youtubeRequest.ts

app/page : 메인 페이지
detail : 모임 생성 & 비디오 상세 페이지
developers : 개발자 소개 페이지
search : 검색 페이지
signIn : 로그인 페이지
signUp : 회원가입 페이지
meetup : 모임 리스트 페이지
live : 실시간 영상 시청 & 채팅 페이지
app/loading : 로딩 페이지
app/not-found : 에러 페이지

주요 기능

⭐️ 공통

다크모드
이미지 레이지 로딩
무한 스크롤
API 통신 불가시 대체 데이터 활용
운영/개발서버 각각의 데이터 테이블 활용

📃 메인 페이지

크리스마스 D-Day 확인
오늘 라이브 예정인 영상목록 조회
비디오 상세 페이지 이동
랜덤 슬롯
랜덤 슬롯 결과 카카오톡 공유
크리스마스 설문 통계

🖼 상세 페이지

클릭한 비디오 상세 조회 및 재생
해당 채널 관련 영상 리스트 조회 및 클릭시 링크 이동
댓글 CRUD 및 좋아요
모임 생성 가능 모달(인터셉트,페러렐 라우트)
모달에 사항을 입력 하고 모임 생성

🔍 검색 페이지

키워드 포함 게시물 조회
비디오 상세 페이지 이동

👩‍👩‍👧‍👦 개발자 소개 페이지

기술 스택 소개
멤버 소개

🔒 로그인 / 회원가입

로그인
회원가입
비밀번호 찾기 및 수정
유효성 검사
토큰 검증

🕰️ 실시간 모임 참여 페이지

방장이 설정한 시간에 영상 자동 재생
종료했을때 함께 보고있던 사람들도 촛불모임 페이지로 이동
소켓을 활용한 실시간 유저 채팅 기능
채팅 대화창에 동영상 시간을 입력 => 클릭시 동영상 시간대 이동

✉️ 촛불 모임 조회 페이지

촛불모임 페이지 탭 구현
비디오 영상 리스트 조회
현재 모집중인 모임 리스트 조회
내 모임 리스트 조회 => 내가 생성하거나 참여한 모임 조회
모임 참가 신청
모임 게시글에 좋아요 기능

구현 화면

회원가입	로그인

비밀번호 찾기	인터셉트 라우팅을 이용한 모달창

실시간 채팅	라이브 종료하기

현재 재생시간 공유	Github 잔디 연동

설문조사 통계	랜덤 슬롯

Name		Name	Last commit message	Last commit date
public		public
src		src
.eslintrc.json		.eslintrc.json
.gitignore		.gitignore
.prettierrc.json		.prettierrc.json
README.md		README.md
next.config.js		next.config.js
package-lock.json		package-lock.json
package.json		package.json
tsconfig.json		tsconfig.json

Navigation Menu

Uh oh!

Repository files navigation

멋쟁이 사자처럼 프론트엔드 스쿨 1기 Final Project 5조

프로젝트 소개 및 개요

목차

Five Rookies 팀원 소개

기술 및 개발 환경

Front-end

Back-end

Design

협업

배포

🛠 개발 환경

📚 Branch

🙏🏼 커밋 컨벤션

폴더 구조

주요 기능

⭐️ 공통

📃 메인 페이지

🖼 상세 페이지

🔍 검색 페이지

👩‍👩‍👧‍👦 개발자 소개 페이지

🔒 로그인 / 회원가입

🕰️ 실시간 모임 참여 페이지

✉️ 촛불 모임 조회 페이지

구현 화면

About

Releases

Packages

Contributors

Languages

Uh oh!

Latest commit

History

Folders and files

Repository files navigation

멋쟁이 사자처럼 프론트엔드 스쿨 1기 Final Project 5조

프로젝트 소개 및 개요

목차

Five Rookies 팀원 소개

기술 및 개발 환경

Front-end

Back-end

Design

협업

배포

🛠 개발 환경

📚 Branch

🙏🏼 커밋 컨벤션

폴더 구조

주요 기능

⭐️ 공통

📃 메인 페이지

🖼 상세 페이지

🔍 검색 페이지

👩‍👩‍👧‍👦 개발자 소개 페이지

🔒 로그인 / 회원가입

🕰️ 실시간 모임 참여 페이지

✉️ 촛불 모임 조회 페이지

구현 화면

About

Resources

Stars

Watchers

Forks

Releases

Packages

Contributors

Languages