⌨️ 키보드 리뷰 커뮤니티 Tadak(타닥)

사용자 리뷰를 중심으로 키보드 정보를 공유하고,
멀티 필터로 맞춤형 키보드를 탐색할 수 있는 커뮤니티형 웹 애플리케이션입니다.

주요 기능

• 키보드 목록·리뷰 조회 및 상세 필터
• 로컬스토리지 기반 인증 시스템 (OAuth 포함)
• 키보드 등록/수정/삭제 (회원 기능)
• 키보드 리뷰 등록/수정/삭제 (회원 기능)
• 외부 CDN 기반(wsrv.nl) 이미지 프록시 적용 → Vercel Next.js Image Optimization 한도 초과 방지

배포 링크

https://tadak-163.vercel.app

📸 데모

CRUD	무한 스크롤

인증 시스템	멀티 필터

R&R

이름	역할
김인	키보드 목록 페이지, 멀티 필터, 모달
윤정환	키보드 상세 페이지, 랜딩 페이지, 필터 범위 슬라이더, 별점 버튼, 무한 스크롤
이상달	인증 시스템, 키보드 등록/수정 폼, 키보드 추천 목록, 인풋, 버튼, 토스트
이태경	내 프로필 페이지, 리뷰 등록/수정 폼, 키보드 목록 페이지 퍼블리싱, 멀티 필터, 드롭다운, 라디오 아이템
최재호	헤더, 배포

기술 스택

레퍼런스

• Swagger Document (teamId: 16-3)
• Figma 기획 수정(tadak)
• Figma 원본(WHYNE)

커뮤니케이션

• Discord
  • 실시간 소통, Webhook & GitHub 연동 실시간 PR 알림
• Notion
  • 개발 문서 공유, 일정 관리

폴더 구조

📦public             # 정적 리소스 (폰트, 이미지)
 ┣ 📂fonts
 ┗ 📂images
📦src
 ┣ 📂app
 ┃ ┣ 📂(auth)        # 인증 관련 라우팅 그룹
 ┃ ┃ ┣ 📂oauth
 ┃ ┃ ┣ 📂signIn
 ┃ ┃ ┣ 📂signUp
 ┃ ┗ 📂(global)      # 일반 라우팅 그룹
 ┃   ┣ 📂keyboards
 ┃   ┣ 📂myprofile
 ┣ 📂components
 ┃ ┣ 📂feature       # 도메인 단위 컴포넌트 (페이지/기능 중심)
 ┃ ┣ 📂layout        # layout.tsx
 ┃ ┗ 📂ui            # 공용 컴포넌트
 ┣ 📂constants       # 상수 관리
 ┣ 📂hooks           # 커스텀 훅
 ┣ 📂lib
 ┃ ┗ 📂api           # API 클라이언트, 인증 관련 로직
 ┣ 📂stores          # 전역 상태 관리 (Zustand)
 ┣ 📂types           # 타입 정의
 ┗ 📂utils           # 공용 유틸 함수

시작하기

개발 서버 실행:

npm run dev
# or
yarn dev

Open http://localhost:3000 with your browser to see the result.

This is a Next.js project bootstrapped with create-next-app.