🎬 바로 보기(YouTube에서 재생됩니다)
🎞️ 발표 자료(PPT 보기)
💫 진행 기간: 2025년 4월 16일 ~ 2025년 4월 30일
💫 주제: 아이돌에게 투표와 후원을 통해 팬과 스타를 연결하는 웹사이트 제작
💫 기획 배경 및 의도
- 좋아하는 아이돌에게 직접 마음을 표현할 수 있는 웹사이트를 만들고 싶었습니다.
- 트위터, 팬카페 등 여러 경로로 흩어져 있는 최애에 대한 정보를 한눈에 볼 수 있는 접근성이 높은 서비스의 필요성을 느꼈습니다.
💫 컨셉
- 팀원 모두가 좋아하는 '오로라'를 테마로, 랜딩/에러 페이지 및 웹사이트 전반에 오로라 느낌을 적용했습니다.
- 귀여운 '모코코'를 팀 통합 아이덴티티로 사용했습니다.
| 🌟 박지섭 | 🌟 송시은 | 🌟 조인성 | 🌟 전유진 | 🌟 손수진 |
|---|---|---|---|---|
팀장 |
팀원 |
팀원 |
팀원 |
팀원 |
|
|
|
|
|
🔗 기반 디자인(Figma)
🔗 API 명세(Swagger)
🔗 개발 가이드라인(스타일 가이드, 브랜치 전략 등)
🔗 전체 프로젝트 문서(Notion)
📌 칸반보드 바로 가기
📌 로드맵 보기(Milestones)
GitHub Projects를 적극 활용하며 이슈 기반으로 작업을 관리하고, 칸반보드로 각 작업의 진행상태를 실시간으로 트래킹하였습니다. 또한 주요 기능 완성 목표를 마일스톤으로 설정하여 프로젝트 전체 일정을 관리하였습니다. 팀 작업의 가시성과 체계성을 높였습니다.
🌠 Frontend: HTML, CSS, Javascript, React, Vite
🌠 배포 및 자동화: S3 + CloudFront, Github Actions, CI/CD 파이프라인
🌠 개발 도구: Lefthook, Biome, Stylelint, coderabbit
🌠 라이브러리: React Router(DataAPI mode), Axios, Emotion, facepaint, motion
- Barrel 패턴 적용
- 역할별 명확한 폴더화 (components, pages, utils, constants, errorBoundary 등)
📂 src
├── 📄 main.jsx // 앱 진입 파일 (React DOM 렌더링)
├── 📄 App.jsx // 초기 로딩(Splash) + 전역 알림(Alert) + Router 연결
├── 📄 Root.jsx // 페이지 레이아웃(Header/Footer) 및 전환 로딩 관리
├── 📂 api // API 요청 함수 모음
│ ├── 📄 chart.js
│ ├── 📄 donation.js
│ ├── 📄 idol.js
│ └── 📄 index.js
├── 📂 assets // 이미지, 아이콘 등 정적 리소스
│ ├── 📂 icons
│ └── 📂 images
├── 📂 components // 재사용 가능한 UI 컴포넌트
│ ├── 📂 alert
│ ├── 📂 alertManager
│ ├── 📂 avatar
│ ├── 📂 button
│ ├── 📂 card
│ ├── 📂 carousel
│ ├── 📂 charge
│ ├── 📂 chart
│ ├── 📂 footer
│ ├── 📂 header
│ ├── 📂 list
│ ├── 📂 loadingStatus
│ ├── 📂 modals // 모달 컴포넌트 묶음
│ │ ├── 📂 creditChargeModal
│ │ ├── 📂 creditLackModal
│ │ ├── 📂 donationModal
│ │ ├── 📂 voteModal
│ │ └── 📄 index.js
│ ├── 📂 template
│ └── 📂 test
├── 📂 constants // 공통 상수 관리
│ ├── 📂 api
│ │ ├── 📄 base.js
│ │ ├── 📄 endpoints.js
│ │ └── 📄 index.js
│ ├── 📂 carousel
│ ├── 📂 creditPrice
│ ├── 📂 errors
│ │ ├── 📄 index.js
│ │ ├── 📄 thrownErrors.js
│ │ └── 📄 uiErrors.js
│ ├── 📂 layout
│ └── 📂 statusCodes
├── 📂 errorBoundary // 에러 바운더리 컴포넌트
│ ├── 📂 apiErrorBoundary
│ ├── 📂 globalErrorBoundary
│ ├── 📂 renderErrorBoundary
│ └── 📂 styles
├── 📂 pages // 페이지 컴포넌트
│ ├── 📂 error
│ ├── 📂 landing
│ ├── 📂 list
│ └── 📂 my
├── 📂 routes // 라우터 설정
│ └── 📄 router.jsx
├── 📂 styles // 글로벌 스타일 및 반응형 스타일
│ ├── 📄 Global.styles.jsx
│ ├── 📄 responsive.js
│ └── 📂 animation
├── 📂 utils // 유틸리티 함수 모음
│ ├── 📂 alert
│ ├── 📂 api
│ │ ├── 📄 axiosInstance.js
│ │ ├── 📄 request.js
│ │ ├── 📄 safeRequest.js
│ │ └── 📄 index.js
│ ├── 📂 carousel
│ ├── 📂 format
│ ├── 📂 responsive
│ └── 📂 validate
- 투표하기 → 크레딧 부족 → 크레딧 충전 모달로 자연스럽게 연결되는 UX 흐름 설계
- 동일 페이지 navigation 클릭 시 새로고침 되도록 적용
- 캐러셀 바 위에 후원 목표 금액을 표시하여 사용자 혼란 최소화
- 차트 1등 아이돌에 대한 시각적 강조 디자인 추가
- 로딩 경험 최적화(Splash Screen, PendingUI, Loading Spinner)
- Axios Interceptor 적용 → 서버에러에 자동 대응하고, 30초마다 재요청하여 프론트엔드 개발의 편의성 확보
- CI/CD 파이프라인 구축 → 배포 자동화, 에러 최소화
- 에러 바운더리 구조 설정 → Global, API, Render 별로 에러를 분리 대응해 안정성 강화
- 폴더 및 파일 컨벤션 정리 → 유지보수성과 코드 가독성 향상
- JSDoc 주석 도입 → 함수/모듈 단위 명세화를 통해 팀 간 협업 시 코드 이해도 향상
- PR 리뷰(+코드레빗)와 데일리 스크럼, 디스커션 등 다양한 커뮤니케이션 적극 활용 → 애자일 협업 방식으로 코드 품질 향상, 효율 증대
🌟 더 많은 트러블 슈팅을 보고싶다면 이곳을 클릭해 확인하세요.
문제 상황 해결 방법 작성자 서버 에러 대응 Axios Interceptor로 30초 동안 자동 재시도 송시은 로딩 상태 관리
- splash screen 이슈Splash Screen 종료 타이밍을 navigation state 기반으로 제어 송시은 스타일 린트 설정 문제 lefthook 코드 품질 관리 자동화 시도 박지섭 에러 바운더리 적용 범위 설정 Global / API / Render 에러 바운더리를 명확히 분리 적용 송시은 Git 이전 커밋 수정 방법 문제 git rebase -i,git reset --soft명령어를 활용전유진 export default 충돌 문제 default as 로 통일하여 모듈 충돌 방지 전유진 facepaint 사용 관련 이슈 null병합 연산자 사용 관리 조인성
🌟 더 많은 TIL을 보고 싶다면 이곳을 클릭해 확인하세요.
제목 작성자 폴더 배럴 패턴을 적용하며 구조적 설계의 중요성 이해 송시은 극단의 칼라 사용 지양 및 색상 조화 고려 송시은, 박지섭 SPA 구조 설계 시 시멘틱 태그 계층화 고려 송시은, 전유진 모달 컴포넌트 관리 위치의 중요성 인식 송시은, 손수진, 전유진, 조인성 프로젝트 협업에서 배운 점 전유진, 손수진 동일 페이지 navigation 클릭 시 새로고침 여부 결정 송시은, 박지섭 useLoaderData()를 사용했을 때 최신 상태 반영조인성
- 크레딧 충전 위치 UX 개선
- 경고창 하단에 진행바(Progress Bar) 추가
- 차트 모달 생성 후 아이돌 정보 추가 연동
- 리액트 라우터 액션 사용해보기
- 아이돌 상세 페이지 생성
- 투표해서 순위를 매기는 것이 아닌, 투표한 아이돌의 이름으로 아동 및 불우 이웃 후원하는 쪽으로 방향 전환