FE wiki - 100-hours-a-week/2-hertz-wiki GitHub Wiki

TUNING 서비스의 프론트엔드 개발 구조, 기술 스택, UI/UX 전략, 렌더링 방식 및 API 통합 흐름 전반을 정리한 내용입니다.

사용자 경험을 실질적으로 구현하는 프론트엔드 레이어를 중심으로, 서비스의 확장성과 유지보수 효율성을 고려한 설계 방식을 기반으로 구성되어 있습니다.

👩🏻‍💻 프론트엔드 레포지토리
👥 팀 레포지토리

---

TUNING은 Next.js 15 App Router 기반의 모바일 특화 웹 애플리케이션으로,
초기 렌더링 속도 개선과 SEO 대응을 위해 SSR(Server Side Rendering) 및 서버 컴포넌트(Server Components)를 적극 도입했습니다.
또한, UX의 일관성과 성능을 동시에 고려한 설계로 다음과 같은 핵심 기능을 제공합니다

• 소셜 로그인 & 온보딩: Kakao OAuth를 통한 인증 및 사용자 정보 수집
• 유저 성향 기반 매칭: MBTI, 관심사 등 다양한 지표를 바탕으로 한 맞춤형 AI 유저 추천 시스템
• 실시간 채널 채팅 기능: 채널 단위의 메세지 UI 및 감정 기반 시그널 인터랙션
• AI 기반 TUNING 리포트: 매칭 결과를 시각적으로 전달하는 감성 콘텐츠 생성
• 모바일 최적화 설계: 반응형 구조와 iOS 키보드 확대 방지 등 플랫폼별 특수 상황 대응

| TUNING의 프론트엔드는 단순한 렌더링 계층을 넘어, 인공지능 기반 추천 시스템, 유해 표현 필터링, 유저 행동 흐름 제어와 긴밀히 연결되어 있는 복합적 인터페이스 구조로 설계되었습니다.

---

---

기간	주요 작업	이슈
25.04.28 ~ 25.05.18	개발 환경 세팅 / UI 구현 및 v1 MVP 개발 / 첫 프로덕트 릴리즈	개발환경 세팅
25.05.19 ~ 25.06.05	v2 기능 구현 개발

---

• app/ - 라우팅, SSR 처리, layout.tsx 기반 구조
• components/ - 공통 UI 컴포넌트
• features/ - 도메인별 로직
• lib/api/ - API 모듈 및 wrapper
• lib/utils/ - 유틸 함수, Enum 매핑 등

---

브랜치	역할
main	운영 기준 브랜치
dev	기능 개발 통합 브랜치

브랜치 타입	네이밍 패턴
기능 추가	feature/#이슈번호
버그 수정	bug/#이슈번호
리팩토링	refactor/#이슈번호

---

커밋 컨벤션 룰

태그 (타입)	의미	예시
feat	✨ 새로운 기능 추가	feat: 로그인 페이지 구현
fix	🛠️ 버그 수정	fix: 회원가입 오류 수정
docs	📝 문서, 주석, README 수정	docs: API 명세 문서 업데이트
style	🎨 코드 포맷팅 (기능 변화 없음)	style: prettier 적용 및 코드 정리
refactor	♻️ 코드 리팩토링 (기능 변화 없음)	refactor: 로그인 로직 리팩토링
perf	⚡ 성능 개선	perf: 이미지 lazy loading 적용
test	✅ 테스트 코드 추가/수정	test: 유닛 테스트 케이스 추가
chore	🔧 빌드/배포/환경설정 수정	chore: eslint 설정 추가
revert	⏪ 이전 커밋 되돌리기	revert: "feat: 로그인 기능 추가"

---

• 개발 일정
• 컨벤션 룰
• 트러블 슈팅
• 사용 라이브러리
• 디자인 시스템
• 배포 환경 및 CI/CD 파이프라인
• 코드 품질 관리 도구
• 테스트 전략

기간	주요 작업
03/31 ~	기획 및 설계

네이밍 규칙

항목	케이스 규칙
폴더명, 파일명, 변수 및 함수명, 서버 응답 데이터	camelCase
컴포넌트명	PascalCase

Prettier

옵션	값	설명
trailingComma
tabWidth
semi
singleQuote
bracketSpacing
jsxBracketSameLine
printWidth

ESLint

항목	설정 내용
기본 설정
TypeScript 설정
글로벌 환경
무시 폴더
플러그인
커스텀 룰

기본 브랜치

브랜치	설명
main
dev

작업 브랜치 네이밍 규칙

브랜치 타입	네이밍 패턴
기능 추가	feature/#이슈번호
버그 수정	bug/#이슈번호
리팩토링	refactor/#이슈번호

커밋 유형	설명
feat
fix
docs
style
refactor
test
chore
design
comment
rename
remove
BREAKING CHANGE
HOTFIX

예시: Feature - 메인 페이지 UI 구현

태그	의미	설명
코드 구조 개선
성능 개선
코드/파일 제거
버그 수정
긴급 수정
기능 추가
UI/스타일 수정
변경 사항 되돌리기
브랜치 병합
주석 추가/수정
DB 관련 변경

• 1. 트러블 슈팅 제목

라이브러리	역할 / 설명
예시 라이브러리명	설명 작성

• 1. 컬러 시스템
• 2. 폰트 시스템
• 3. 컴포넌트 구조

구성 내용 작성

도구	역할	목적
도구명

도구	역할	목적
도구명