<역할>
너는 바이브코딩 프로젝트를 만드는 기획자야.
내 입력을 참고하되, 이것에 국한되지 않게 내용을 보충해서 기획서를 만들어.

<포함해> 사이트맵, 사이트별 핵심기능, 사이트별 UI 구성, 데이터명세, 디자인가이드, …
<포함하지마> 기술스택 명세, 코드, 향후고려사항, 너무 상세한 기술명세

<개발스테이지>
단계별로 개발스테이지를 나눠서 개발하도록 해. Stage 는 3개로 만들어.각 단계에서 작동 가능하게 해줘.
- 1단계: 초반에는 프론트 먼저 만들고, 백엔드 없이도 동작 하게 해줘.
- 2단계: REST API 방식의 백엔드를 모두 구현해줘.
- 3단계: 실시간 관련 동작을 모두 구현해줘.

<출력>
결과는 마크다운(md) 형식으로 줘. 표 사용하지 마. Canvas 로 보여줘.


<웹앱의 목표>
지금 나의 전공 적합도를 점수로 나타내는 사이트.
접속 시 전공, 학교, 성별 등을 넣어서 해당 전공별 문항을 기준에 맞춰서 llm이 선정하고 사용자가 답변을 주면 점수를 메겨줌.
질문에는 다른 분야로의 관심사가 있는지 기본 질문들(적성검사 등)도 랜덤하게 섞어서 제공.
포션은 사용자가 더 바꾸고 싶은 마음이 높을 수록 기본 질문들을 더 제공함.
types 처럼 재미요소를 챙길 수도 진지하게 자신의 진로를 고민할 수도 있는 계기를 제공함.

간단한 검사 이후에는 상담을 신청할 수도 있게.


<메인기능>
자신의 답변을 바탕으로 한줄 요약을 생성하고, 해당 요약으로 png 캐릭터를 출력.
주기적으로 질문을 업데이트하면서 사용자의 관심사를 tracking 가능.
누적된 데이터를 바탕으로 사용자에 더 fit한 정보를 제공할 수 있음.
결국 자신의 페이지까지 연결되면 좋겠음.
아니면 차라리 홈페이지를 설문을 통해서 제공하는것도 낫베드. 일시적으로 자신의 domain을 부여해서 공유할 수 있도록.
다양한 검사의 결과를 자신의 페이지에 나열.


<유저흐름>
첫 페이지는 무조건 로그인, 계정 연결로그인.

아이디 기반으로 자신의 친구들도 추가 가능. 각 페이지에는 각 친구들이 검사한 결과가 정리되어 있음.
나의 경우에는 로그인 시에 treding 검사가 가장 먼저 뜸. 일단 전공 부적합도 검사를 default로 해서 파생 검사들을 연결(llm이 계속해서 자체적으로 검사지를 생성함)
전공으로 시작된 자신의 사이트가 결국 자신의 진정한 관심사를 탐구하고, 지인들과 공유하고 트랙할 수 있는 사이트.


<고려사항>
룩? 그냥 사용자의 이름을 최상단에 띄우고, 메인 화면에 자신과 같은 전공 거리감을 가지거나, 관심사를 공유하는 친구들이 보여짐.
클릭하면 해당 친구의 사이트로 이동. 검사 결과들이 보이고, 시간 순으로 gpt가 재미나게 이야기를 정리해두었음.
위아래 스크롤이 아니라 양옆 스크롤

<역할>
너는 바이브코딩 프로젝트를 만드는 기획자야.
내 입력을 참고하되, 이것에 국한되지 않게 내용을 보충해서 기획서를 만들어.

<포함해> 사이트맵, 사이트별 핵심기능, 사이트별 UI 구성, 데이터명세, 디자인가이드, …
<포함하지마> 기술스택 명세, 코드, 향후고려사항, 너무 상세한 기술명세

<개발스테이지>
단계별로 개발스테이지를 나눠서 개발하도록 해. Stage 는 3개로 만들어.각 단계에서 작동 가능하게 해줘.
- 1단계: 초반에는 프론트 먼저 만들고, 백엔드 없이도 동작 하게 해줘.
- 2단계: REST API 방식의 백엔드를 모두 구현해줘.
- 3단계: 실시간 관련 동작을 모두 구현해줘.

<출력>
결과는 마크다운(md) 형식으로 줘. 표 사용하지 마. Canvas 로 보여줘.

## 🎯 프로젝트 개요

* **서비스명**: 바이브코딩
* **목표**: 사용자의 전공 적합도를 측정하고, LLM 기반의 dynamic questionnaire를 통해 진로 탐색과 친구들과의 공유/트래킹 기능을 제공
* **핵심 Flow**: 로그인 → 기본 검사(전공 적합도) → 답변 기반 추천 및 요약 생성 → PNG 캐릭터 생성 → 추가 검사/상담 신청 → 개인 도메인 공유

---

## 🚀 Development Stages

### Stage 1: Front-end Only

* **목표**: 백엔드 없이도 동작 가능한 프로토타입 구현
* **기능**:

  * 로그인/Sign-in 화면 (+ OAuth 연결)
  * Questionnaire UI (dynamic question render via mock data)
  * 답변 입력 및 요약 생성(Mock LLM API 호출)
  * PNG 캐릭터 display (mock image URL)
  * 친구 리스트 스크롤 UI (side-scroll)

### Stage 2: REST API Backend

* **목표**: 모든 UI 요소에 실제 REST API 연동
* **기능**:

  * User Auth API (sign-up, sign-in, session)
  * Questionnaire API (fetch questions, submit answers)
  * LLM Summary API (실제 GPT 호출)
  * Image Generation API (PNG 캐릭터 생성)
  * User Data CRUD API (프로필, 친구, 검사 결과)

### Stage 3: Real-time Features

* **목표**: WebSocket/Realtime 연동으로 즉각적인 피드백 및 친구 추적
* **기능**:

  * Real-time questionnaire progress tracking (Socket.io)
  * Live feed: 친구들의 검사 시작/완료 알림
  * 채팅/상담 신청 실시간 알림

---

## 🗺️ Sitemap

* **/login**
* **/dashboard**

  * Trending Tests
  * My Major Fit Test
  * 친구 피드 (side-scroll)
* **/test/\:id**

  * Question 화면
  * 실시간 Progress Bar
* **/result/\:id**

  * Summary & PNG Character
  * Recommend Tests & 상담 신청
* **/profile/\:username**

  * 개인 결과 & 공유 도메인
  * Test history timeline

---

## 💡 Site별 핵심 기능

### Login Page

* OAuth social sign-in
* Traditional email/password

### Dashboard

* Trending Tests list
* My Major Fit Test Quick Start
* Friends Carousel (side-scroll)

### Test Page

* Dynamic Questionnaire (LLM-driven)
* 기본 vs 관심사 기반 question mix
* 실시간 progress

### Result Page

* One-line summary (LLM)
* PNG Character display
* 상담 신청 버튼

### Profile Page

* Personal Test History timeline
* Domain sharing link

---

## 🎨 UI 구성

* **Color Scheme**: soft pastel base (light backgrounds), accent color for CTAs
* **Typography**: Headlines: 2xl, Body: base, Buttons: lg
* **Layout**:

  * Side-scroll carousel for 친구
  * Center card for questionnaire
  * Bottom-fixed CTA bar on mobile
  * Responsive design (Flex, Grid)

---

## 🗂️ Data Specification

* **User**: id, name, email, gender, major, school, domain
* **Test**: id, title, description, category, questions\[]
* **Question**: id, prompt, type, options\[], weight
* **Answer**: userId, questionId, response, timestamp
* **Result**: userId, testId, score, summary, characterUrl, timestamp
* **FriendLink**: userId, friendId, sharedDomain

---

## 🎨 Design Guide

* **Logo & Branding**: Simple vibey icon + logotype
* **Iconography**: flat, rounded SVG icons
* **Button**: 2xl rounded corners, shadow, hover transition
* **Interaction**: smooth animation (Framer Motion suggestion)
* **Spacing**: padding p-4 이상, margin m-4
* **Emotion**: 😉 friendly tone, playful UI 요소 mix

> *기술적 용어는 영어로 표기했습니다. 이모지를 적절히 사용하여 기획서를 밝고 기분 좋게 구성했어요!*

[운동소모임 앱]

(운동 소모임 앱)

<역할>
너는 바이브코딩 프로젝트를 만드는 기획자야.
내 입력을 참고하되, 이것에 국한되지 않게 내용을 보충해서 기획서를 만들어.

<포함해> 사이트맵, 사이트별 핵심기능, 사이트별 UI 구성, 데이터명세, 디자인가이드, …
<포함하지마> 기술스택 명세, 코드, 향후고려사항, 너무 상세한 기술명세

<개발스테이지>
단계별로 개발스테이지를 나눠서 개발하도록 해. Stage 는 3개로 만들어.각 단계에서 작동 가능하게 해줘.
- 1단계: 초반에는 프론트 먼저 만들고, 백엔드 없이도 동작 하게 해줘.
- 2단계: REST API 방식의 백엔드를 모두 구현해줘.
- 3단계: 실시간 관련 동작을 모두 구현해줘.

<출력>
결과는 마크다운(md) 형식으로 줘. 표 사용하지 마. spec.md 파일로 다운받을 파일을 줘.

(이하 요구사항)

<웹앱 목표>
소모임 어플을 만들자.
사람들을 소모임으로 연결시키자.

<핵심기능 구상>
핵심기능은 모임방이야.
유저들이 메인페이지에서 모임방을 직접 만들 수 있게 할거야.
유저들은 모임방에서 모임방에서 채팅도 하고, 참석/참석취소 를 할 수 있어.

<유저흐름 구상>
랜딩페이지(대기실):
모임방의 리스트를 볼 수 있음. 카테고리로 필터링 가능. 모임방 이름으로 검색 가능.
모임방의 타이틀, 날짜, 시간, 카테고리, 현재 참석인원 숫자, 최대인원 숫자, 모임장이름

모임방 만들기:
대기실의 '모임방 만들기' 를 클릭해서 모임방 만드는 페이지로 가.
모임방을 만들 때 타이틀, 날짜, 시간, 카테고리, 최대인원 등을 설정해야해.
모임방을 만든 사람은 모임장이 되고, 모임장만 내용을 수정할 수 있어.

모임방 들어가기:
유저는 메인페이지의 모임방을 클릭하고 들어갈거야.
모임방에 들어가면 모임방에 들어온 사람들과 실시간 채팅이 가능해야하고, 모임에 참석할 사람들의 리스트를 확인할 수 있어야 해.
모임방에 참석/참석취소를 할 수 있게 할거야.

<고려사항>
로그인:
대기실에서 모임방 리스트는 로그인 안해도 보여야하고, 모임방을 생성하거나 들어갈 땐 로그인 해야해.
유저는 가입할 때 닉네임을 설정해야해.

카테고리:
운동소모임 어플이니까, 카테고리는 러닝/테니스/농구/축구/탁구 등 으로 해줘.

룩&필:
운동소모임 어플이니까, sporty 하게 black & blue 계열을 쓰고 운동관련 이미지&이모지를 넣어줘.

어플이름: Enthes(enjoy the squash)