feat: 워크스페이스 생성 페이지 구현 (Mock 데이터)

[wjswlgh96]

Issue

작업 유형

• Feat: 새로운 기능 추가
• Fix: 버그 수정
• Docs: 문서 수정
• Refactor: 리팩토링
• Design: UI/CSS 수정
• Chore: 설정, 패키지, 기타 작업
• Hotfix: 긴급 수정

작업 내용

• /workspaces/new 워크스페이스 생성 플로우 구현 (한 라우트, 2단계)
  • Step 1 — 템플릿 선택: "어떤 용도로 쓰실 건가요?" + 팀 프로젝트 / 사이드 프로젝트 / 매장 운영 3종 카드(선택 상태 표시)
  • Step 2 — 생성 폼: 선택 템플릿 요약(+ 변경) + 포함 기능 태그 + 워크스페이스 이름(필수) / 설명(선택) + "워크스페이스 만들기"
• Mock 기반 create_workspace — 생성 후 워크스페이스 id 반환 → 라우팅

작업 배경

• "내 워크스페이스"(feat: 내 워크스페이스 페이지 구현 (Mock 데이터) #8)의 "새 워크스페이스" 버튼 목적지이자, User Flow의 워크스페이스 생성 단계
• 백엔드/인증 부재로 Mock 우선 구현, 이후 supabase.rpc('create_workspace')로 교체
• 템플릿 테이블 없이 선택한 목적을 purpose로 저장하는 ERD 방침을 따른다

To Do

• /workspaces/new 라우트 추가 (src/app/workspaces/new/page.tsx)
• Step 1 템플릿 선택 UI (3종 카드, 선택 상태/보더)
• Step 2 생성 폼 UI (선택 요약 + 포함 기능 + 이름[필수]/설명[선택] + 만들기 + 변경/뒤로 이동)
• 템플릿 데이터 재사용 — landing-templates config를 공용(entities/workspace)으로 이동 검토
• 폼 검증 (이름 필수) — react-hook-form + zod
• Mock create_workspace — ERD RPC 형태(name/description/purpose → workspace_id, purpose 기준 기본 모듈) 반영
• 생성 완료 후 라우팅 (신규 워크스페이스 상세 or /workspaces)
• 데스크톱/모바일 반응형
• Figma 픽셀 대조 검증

완료 기준

• /workspaces/new에서 템플릿 선택 → 폼 입력 → 생성까지 2단계 플로우 동작
• 이름 미입력 시 생성 불가(검증), 설명은 선택
• Mock 생성 결과가 목록(내 워크스페이스)에 반영되는 흐름 확인
• npm run check(lint/lint:tw/type/format) 통과

참고 자료

• Figma: https://www.figma.com/design/MGUbA8bYzUb4WdjSm5KKkq/Syncly?node-id=0-1
  • 템플릿 선택: node 238:246
  • 생성 폼: node 51:295
• ERD create_workspace RPC: workspaces 생성 → invite_code → owner 등록 → purpose 기준 workspace_modules 생성 → id 반환
• 기존 템플릿 데이터: src/widgets/landing/landing-templates/config/templates.ts

예상 브랜치명

feat/#13/workspace-create