루틴 실천을 게임처럼 즐기게 도와주는, 도전과 성장 기반의 맞춤형 루틴 관리 플랫폼 루티는 게임적 요소를 도입해 루틴 초보자도 쉽게 시작하고 꾸준히 실천할 수 있도록 설계되었습니다. 루틴 실천의 진입장벽은 낮추고, 몰입도와 지속률은 높이는 구조를 통해 ‘의지’가 아닌 ‘즐거움’으로 습관을 만드는 새로운 루틴 서비스를 제공합니다.
- 1인 가구의 증가와 자취 초보의 생활 패턴 관리의 어려움을 해결하고자 루틴 실천을 게임처럼 즐겁게 하여 지속적인 실천을 도와주는 서비스입니다.
- 사용자 기반 세부 카테고리 별 루틴을 생성하고, 루틴 완료시의 포인트 보상과 캐릭터의 성장을 통한 동기부여를 얻을 수 있습니다.
- 주간/이벤트 퀘스트를 통한 추가 보상 및 활동 기록에 따른 업적 보상을 확인할 수 있습니다.
- 월간 리포트를 통해 활동 이력을 시각화 할 수 있으며 AI 기반 성취 피드백을 얻을 수 있습니다.
- 루틴을 실천하며 얻는 업적 및 퀘스트 보상과 포인트로 실용성과 재미를 모두 갖춘 루틴 도우미입니다.
2025.06.26 ~ 2025.07.31
 남윤서 @ysnam0123 |
 김은지 @keemeunji |
 이서영 @seoyeoxxlee |
 한상아 @hansanga |
- 주 단위 루틴 활동을 분석·시각화하는 리포트 페이지 전체 기능 구현
- AI 분석 코멘트, 월간 요약 카드, 주간 완료율 차트, Top5 루틴 랭킹, 카테고리 분포 차트 등 데이터 기반 인사이트 제공
- Recharts 라이브러리 활용 → 막대/원형 차트 구현으로 루틴 성과를 직관적으로 확인 가능
- 주차 이동 기능(이전/다음 주) 및 데이터 검증 로직(hasValidData) 적용 → 빈 데이터·에러 상황에서도 안정적인 사용자 경험 제공
- 루틴, 퀘스트, 업적 보상 알림을 토글 형태로 on/off 제어 가능
- Optimistic Update 전략 적용 → 서버 응답 대기 없이 UI 즉시 반영, 실패 시 자동 롤백 처리
- 사용자 친화적인 UX 제공 + 데이터 정합성 유지
- 최신순 정렬된 알림 리스트 구현 → 개별 알림 읽음 처리 및 전체 읽음 기능 제공
- 읽음/안 읽음 상태를 시각적으로 구분하여 가독성 강화
- 컴포넌트 기반 구조 설계 → 알림 타입 확장 시에도 유연하게 대응 가능
- 전체 페이지 레이아웃 및 컴포넌트 디자인 설계
- Lottie 애니메이션 적용 → 데이터 없음 / 분석 대기 상태에서 사용자 친화적 안내 제공
- LoadingSpinner 컴포넌트 제작 → 데이터 로딩 시 즉각적인 피드백 제공
- 대분류(MAJOR) / 소분류(SUB) 구조 지원, 계층형 데이터 표시
- 이모지 선택(EmojiPicker)으로 아이콘 지정, 외부 클릭 시 자동 닫힘
- 바텀시트로 카테고리명 입력/수정 -> 직접 입력 방지하고 시트에서 확정
- 대분류/소분류 실시간 수정 -> optimistic 없이 즉시 mutate
- 소분류 카테고리 추가/삭제 지원 -> 삭제 시 확인 모달 활성화
- 기본(DEFAULT) 타입은 편집/이모지 변경 비활성화
- TanStack Query로
user-categories쿼리 관리 -> 생성/수정/삭제 후 캐시 무효화
- 서버 페이지네이션 대신 1회 대량 조회 후(size=999) 클라이언트 후페이징(6개/페이지)
- 보유 필터/티어 및 카테고리 필터 적용 시 후페이징 재계산하여 현재 페이지 범위 보정 -> 필터 결과가 적으면 1페이지로 이동
- 초기 data fetching 시 스켈레톤 UI 카드 로딩
- 배지 장착/해제를 낙관적 업데이트로
user-profile캐시 즉시 반영 -> 서버 성공 후user-badges와user-profileinvalidate - '보상받기' 버튼 오버레이(조건 충족 시 버튼 노출) & 수령 성공/실패 모달 활성화
- 아이템 카테고리별 탭 필터링(전체/상의/하의/액세서리)하여 선택된 카테고리에 따라 목록을 분기 렌더링하여 구현
- 아이템 카드를 그리드 형태로 배치하고 구매 버튼을 연동하여 직관적인 UI 제공
- 구매 성공 시 서버 응답을 기반으로 React Query 캐시 업데이트 후 UI와 데이터 상태 동기화 -> 유저 포인트 차감
- 아이템 추가: 아이템 타입(TOP/BOTTOM/ACCESSORY) 선택 후 자동 itemKey 생성 -> 현재 데이터 목록과 충돌 없는 첫 번째 키를 채택하여 중복검사 진행
- 아이템 수정: 개별 아이템 조회하여 입력 양식을 미리 채워 넣고(form pre-fill), itemKey는 수정 불가하도록 인풋창 readOnly 처리
- PATCH payload:
{itemType, itemName, price, key, itemDescription, isListed}서버 업데이트 - 아이템 등록/수정 성공 모달 -> 목록으로 이동, 실패 시 에러 모달 활성화
- 리스트여부(
isListed)로 실제 유저 상점 노출 여부를 결정 - TanStack Query로
admin-items캐시 관리, 추가/수정/삭제 시 invalidate
- 새로운 대분류 카테고리 생성 플로우: 이모지 선택 + 바텀시트에서 카테고리명 입력 -> 생성 -> 목록 갱신
- 기존 대분류 편집: 카테고리명 변경 시 즉시 수정 API 호출 & 이모지 변경도 즉시 반영
- 세부 카테고리 추가 플로우: 바텀시트에서 카테고리명 입력 -> 생성 -> 목록 갱신
- 세부 카테고리 개별 삭제: 삭제 시 확인 모달 활성화 & 성공 시 로컬 리스트와 캐시 동기화
- react-daum-postcode 라이브러리(Daum 우편번호 API)를 연동하여 프로필 수정 페이지 내 주소 검색 UI 구현
- 주소 선택 시
sido(시/도),sigungu(시/군/구),bname(법정동)을 파싱하여 필요한 행정 단위까지만 정제된 주소 데이터 생성 - 불완전한 주소 입렵을 방지하기 위해
if (!sido || !sigungu || !bname)조건문을 통해 데이터 유효성 검증 로직 적용 next/navigation의router.push를 활용해 선택된 주소를 쿼리스트링 형태(region1, region2, region3)로 전달하여 프로필 수정 폼과 연동- API UI에서
autoClose=false옵션과 스타일 커스터마이징을 적용해 검색 화면의 사용성(높이, 레이아웃) 최적화
- TanStack Query
- 쿼리키:
user-categories,user-badge,user-items,admin-categories,admin-items로 일관 관리 staleTime으로 불필요한 refetch 최소화, 성공 시 필요한 키만invalidateQueries처리- 낙관적 업데이트(onMutate) + 실패 롤백(onError) 패턴 적용
placeholderData로 페이지 전환시 데이터 깜빡임 감소
- 쿼리키:
- UI/상태
- 스켈레톤 컴포넌트로 최초/전환 로딩 대응
- 필터 변경 시 페이징 재계산 및 현재 페이지 보정
- 접근성/사용성
- 모달/바텀시트 외부 클릭 닫기 처리
- 비편집 필드(readOnly) 및 비활성 제어로 사용자 실수 방지
- 사용자 프로필 조회 및 수정 UI 구현
- 닉네임 중복 검사 API 연동 → 실시간 중복 여부 확인 후 사용자에게 피드백 제공
- 주소 검색 API(도로명 주소 서비스 등) 연동 → 직접 입력 대신 검색/선택 방식으로 정확도 개선
- 비밀번호 확인 입력 시 디바운싱 적용 → 입력 지연 후 검증, 일치 여부를 인풋 하단에 즉시 표시
- 닉네임/주소/자취경력 수정 기능 제공 → 실시간 API 호출로 서버에 즉시 반영
- 내 캐릭터 아바타(상의/하의/액세서리 장착 상태) 표시
- TanStack Query로
user-profile관리 → 수정 후 invalidate 처리
- 주간/이벤트 조건 퀘스트 목록 표시
- 퀘스트 진행도(ProgressBar) UI 제공
- 퀘스트 달성 시 ‘보상받기’ 버튼 활성화 → 수령 성공/실패 모달 처리
- 완료된 퀘스트는 화면에서 자동으로 제거(미표시)
- TanStack Query 기반
user-quests캐시 관리 → 보상 수령 시 invalidate 처리
- 현재 포인트 실시간 표시 (헤더/상점 등 주요 UI 연동)
- 포인트 획득/차감 시 낙관적 업데이트 적용 → 즉시 반영 후 실패 시 롤백
- 포인트 변화 이벤트 발생 시
user-point캐시 invalidate로 동기화
- 기본 아바타(base_light) 기반 꾸미기 기능 → 상의/하의/액세서리 장착 가능
- 도트 아바타 디자인: 60x60 사이즈, 테두리 포함, 갈색 머리 + 흰 티셔츠 + 파란 바지 + 흰 운동화 고정
- 아이템 장착/해제 → 즉시 mutate, 성공 시
user-itemsinvalidate - 착용 아이템 미리보기 → 장착 시 아바타 위에 레이어링 적용
- 아이템 없을 시 빈 슬롯 상태 노출
- SVG/PNG 파츠 구조로 조합 가능 → 커스터마이징 확장성 고려
- UI 접근성: 모달 닫기, 탭 전환, hover 툴팁 등 적용
- 페이지 별 다크모드 구현
| 온보딩 페이지(비로그인) | 메인페이지(로그인) | 로그인 페이지 |
|---|---|---|
 |
 |
 |
| - 루티 주요 서비스 정보 제공 | - 유저 정보, 오늘 루틴 제공 | 로그인 페이지 |
| 회원가입 페이지 | ||
|---|---|---|
 |
 |
 |
 |
 |
 |
| 회원가입 페이지 | ||
| 루틴 카테고리 등록 | 카테고리 삭제 | 카테고리 수정 |
|---|---|---|
 |
 |
 |
| - 대분류/소분류 카테고리 제공 - 이모지 아이콘 설정 가능 - 사용자 정의 카테고리 추가 가능 |
- 기본 카테고리 삭제 불가 - 사용자 카테고리 삭제 가능 |
- 대분류 카테고리 수정 가능 - 소분류 카테고리 추가/삭제 지원 |
| 루틴 등록 | 루틴 수정 & 삭제 |
|---|---|
 |
 |
| - 루틴 카테고리, 시작일, 반복 주기, 중요도 설정 가능 - 카테고리별 추천 루틴 제공 - 일간/주간/월간 반복 주기 설정 모달 |
- 일별 루틴 완료율 확인 가능 - 등록된 루틴 수정/삭제 가능 |
| 리포트 페이지 | 상점 페이지 |
|---|---|
 |
 |
| - 주 단위 루틴 활동을 분석·시각화 - AI 분석 코멘트, 월간 요약 카드, 주간 완료율 차트, Top5 루틴 랭킹, 카테고리 분포 차트 제공 |
- 상의/하의/액세서리별 탭 필터링 지원 - 사용자 포인트로 아이템 구매 가능 |
| 도감 | 퀘스트 | 알림 |
|---|---|---|
 |
 |
 |
| - 보유 뱃지 확인 가능 - 티어 및 카테고리 필터 제공 - 특정 조건 달성 시 뱃지 획득 가능 - 뱃지 장착/해제 지원 |
- 주간/이벤트 퀘스트 목록 제공 - 퀘스트 진행 현황 확인 가능 - 퀘스트 달성 시 보상 획득 → 포인트 적립 |
- 실시간 알림 제공 - 개별 알림 읽음 처리 및 전체 읽음 지원 - 루틴/퀘스트/업적 보상 알림 on·off 설정 가능 |
| 캐릭터 꾸미기 | 회원정보 수정 |
|---|---|
 |
 |
| - 유저 캐릭터에 상의/하의/액세서리 장착&해제 가능 - 착용 아이템 미리보기 제공 |
- 비밀번호 확인 후 정보 수정 가능 - 닉네임, 주소, 자취경력 수정 가능 - 닉네임 중복 여부 확인 - 주소 검색 API를 통한 도로명 주소 자동 입력 |
| 다크모드 |
|---|
 |
📦public
┃ 📦src
┃ ┣ 📂api
┃ ┣ 📂app
┃ ┃ ┣ 📂(auth)
┃ ┃ ┣ 📂(protected)
┃ ┃ ┣ 📂(admin)
┃ ┃ ┣ 📂assets
┃ ┃ ┣ 📂styles
┃ ┃ ┣ 📂components
┃ ┃ ┃ ┣ 📂admin
┃ ┃ ┃ ┣ 📂collection
┃ ┃ ┃ ┣ 📂common
┃ ┃ ┃ ┣ 📂main
┃ ┃ ┃ ┣ 📂mypage
┃ ┃ ┃ ┣ 📂onBoarding
┃ ┃ ┃ ┣ 📂report
┃ ┃ ┃ ┣ 📂routine
┃ ┃ ┃ ┣ 📂shop
┃ ┃ ┃ ┗ 📂signup
┃ ┃ ┣ 📂layout.tsx
┃ ┃ ┣ 📂page.tsx
┃ ┃ ┣ 📂provider.tsx
┃ ┣ 📂hooks
┃ ┗ 📂store
┗ 📂types→ 개발 생산성과 안정성을 높여주는 파일입니다.
- 안에서 타입을 정의하거나 함수를 만들어 다른 파일에서 재사용할 수 있습니다.
- 쉽게 말해 Type + JavaScript 로, 실제 실행은 JS로 이루어지고 TS는 개발 단계에서만 타입 검사를 해줍니다.
- page.tsx : Next.js에서 실제 화면을 렌더링하는 엔드포인트 (URL과 매핑됨)
- layout.tsx : 해당 라우트 그룹의 공통 레이아웃을 정의하는 파일
- components/ : 화면을 이루는 작은 단위의 UI 컴포넌트 모음 → 여기 있는 파일들을 import 해서 page.tsx나 layout.tsx 안에서 재사용 가능 → 백엔드의 "부분 템플릿" 또는 "뷰 조각"과 비슷한 개념
1️⃣ GitHub에서 코드 준비 • 프로젝트 코드가 이미 GitHub에 올라가 있습니다. • 먼저 GitHub 계정이 필요합니다. (없으면 GitHub 가입 후 계정 생성) • 프로젝트 저장소 URL을 준비합니다.
2️⃣ Vercel 계정 생성 및 GitHub 연동 1. Vercel 사이트 접속 2. GitHub 계정으로 로그인 3. 처음 로그인하면 GitHub 저장소 접근 권한을 요청합니다. 승인하면 연동 완료
3️⃣ 프로젝트 추가 1. Vercel 대시보드에서 “Add New Project” 클릭 2. GitHub 저장소 목록에서 배포할 프로젝트 선택 3. Import 버튼 클릭 → Next.js 프로젝트라면 Vercel이 자동으로 설정을 읽습니다
4️⃣ 빌드 및 배포 • 별도 설정 없이 기본값으로 두고 Deploy 버튼 클릭 • 몇 분 후 빌드가 끝나면 배포 완료 • 배포 완료 후 Vercel이 자동으로 제공하는 URL이 나옵니다. 예: https://project-name.vercel.app
5️⃣ 업데이트 자동 배포 • GitHub 저장소 main 브랜치에 코드가 업데이트되면 • Vercel이 자동으로 다시 빌드하고 배포합니다. • 별도 작업 없이 최신 코드가 바로 반영됩니다.
6️⃣ 환경변수 설정 (필요할 경우) 1. Vercel 대시보드 → Project → Settings → Environment Variables 2. API 주소, 백엔드 키 등 입력 → 저장 3. 변경 후에는 다시 Deploy 해야 적용됩니다