"함께 만드는 소중한 하루"
아이돌 생일 카페·이벤트 정보를 공유하는 웹/앱 하이브리드 플랫폼의 프론트엔드 레포지토리입니다.
웹 브라우저와 iOS/Android 네이티브 앱 WebView에서 동일한 코드베이스로 동작합니다.
| 구분 |
기능 |
설명 |
| 메인 |
배너 캐러셀 |
메인 배너 이미지 슬라이드 |
|
추천 / HOT / 신규 이벤트 |
이벤트 섹션별 목록, 좋아요(북마크) |
|
리뷰 영역 |
최신 리뷰 목록, 이벤트 상세·리뷰 하이라이트 이동 |
|
HOT 아티스트 롤링 |
InfiniteRolling 컴포넌트로 무한 스크롤 연출 |
| 검색 |
이벤트·아티스트 검색 |
실시간 검색, 검색 결과 목록·상세 |
| 이벤트 |
이벤트 상세 |
이미지, 일정, 장소(카카오맵), 공지, 리뷰 |
|
리뷰 작성/수정 |
사진·텍스트 리뷰, 리뷰 상세·사진별 코멘트 |
|
이벤트 등록 |
주최자용 이벤트 등록 플로우 |
| 북마크 |
이벤트/아티스트 북마크 |
북마크 목록·탭 전환 |
| 알림 |
알림 목록 |
읽음/안읽음 구분, 단일·전체 삭제, 모두 읽음 |
|
당겨서 새로고침 |
Pull-to-refresh, 3바퀴 회전 인디케이터, 진동 |
| 인증 |
이메일·소셜 로그인 |
이메일, 카카오, 애플 (웹/네이티브 분기) |
|
회원가입·닉네임 |
약관, 이메일 인증, 소셜 추가 정보, 닉네임 설정 |
|
비밀번호 찾기 |
이메일 인증 후 비밀번호 변경 |
| 마이페이지 |
프로필·설정 |
닉네임 수정, 비밀번호 변경, 알림 on/off |
|
내가 등록한 이벤트/아티스트/리뷰 |
목록·상세 |
|
1:1 문의·공지 |
문의 등록/목록/상세, 시스템·이벤트 공지 목록/상세 |
| 구분 |
기술 |
비고 |
| Framework |
Next.js 15 |
App Router, Turbopack dev |
| Language |
TypeScript 5 |
strict |
| UI |
React 19 |
|
| Styling |
Tailwind CSS 4 |
@theme, 커스텀 컬러·타이포 유틸 |
| 상태 관리 |
Zustand 5 |
메인 데이터(useMainStore), 모달, 유저/토큰 등 |
| 서버 상태 |
TanStack React Query 5 |
API 캐시·동기화 |
| 구분 |
기술 |
비고 |
| HTTP |
Axios |
단일 api 인스턴스, 인터셉터 |
| 웹 인증 |
Cookie (withCredentials) |
로그인/refresh 쿠키 |
| 네이티브 인증 |
Bearer Token |
Native Bridge로 토큰 수신·갱신 |
| 구분 |
기술 |
비고 |
| 애니메이션 |
Framer Motion |
토글, 캐러셀 등 |
| 폼·입력 |
react-datepicker, react-input-mask, react-calendar |
일정·전화번호 등 |
| 지도 |
react-kakao-maps-sdk |
이벤트 장소 지도·마커 |
| 유틸 |
tailwind-merge, dayjs, date-fns-tz, qs |
스타일 병합, 날짜·쿼리 |
- ESLint (Next.js config)
- SVGR (SVG를 React 컴포넌트로 import)
- Pretendard (로컬 폰트)
# 의존성 설치
npm install
# 개발 서버 (Turbopack)
npm run dev
# 빌드
npm run build
# 프로덕션 실행
npm start
# 린트
npm run lint