feat: 워크스페이스 생성 페이지 구현 (#13)

[wjswlgh96]

Pull Request

작업 내용

• /workspaces/new 워크스페이스 생성 페이지 구현 (템플릿 선택 → 생성 Dialog, 한 라우트)
• Mock 기반 create_workspace로 생성 후 목록으로 이동

작업 결과

• /workspaces/new에서 팀 프로젝트 / 사이드 프로젝트 / 매장 운영 3종 템플릿 카드 표시
• 카드 클릭 시 선택 템플릿 요약(포함 기능 태그)과 함께 생성 Dialog 오픈
• 이름(필수)·설명(선택) 입력 → "워크스페이스 만들기" → Mock 생성 후 /workspaces 이동
• 이름 미입력 시 검증 에러, Dialog는 X·ESC로 닫힘, 열릴 때 이름 입력에 자동 포커스

변경 사항

Added

• entities/workspace — 템플릿 상세 config(WORKSPACE_TEMPLATE_DETAIL) + createWorkspace Mock(ERD create_workspace RPC 형태)
• features/create-workspace — 생성 Dialog(react-hook-form + zod 검증)
• views/create-workspace + src/app/workspaces/new/page.tsx (/workspaces/new 라우트)
• shadcn dialog / input / textarea / label 컴포넌트

Changed

• entities/workspace public API에 템플릿 config·생성 API export 추가

Fixed

• (없음)

실행화면

• 템플릿 선택 화면

• 생성 Dialog

테스트

• 로컬 실행 확인
• 주요 시나리오 확인 (템플릿 선택 → 생성 Dialog → 검증 → 생성 → 라우팅)
• 영향 범위 확인 (신규 라우트/기능, 데스크톱·모바일 375 반응형)

리뷰 체크리스트

• PR base branch가 올바릅니다. (feature/* -> develop, 배포 시 develop 또는 release/* -> main)
• 브랜치명이 Type/#issue-number/description 형식을 따릅니다.
• 커밋 메시지가 컨벤션을 따릅니다.
• 불필요한 console.log, 주석, 임시 코드를 제거했습니다.
• 타입 에러와 린트 에러를 확인했습니다. (npm run check 통과)
• CodeRabbit 1차 리뷰를 확인했습니다.
• CodeRabbit 리뷰 반영 후 Discord에 공유했습니다.
• 최소 1명 이상의 approve 후 merge합니다.

리뷰 요청사항

• 생성 폼을 Dialog(shadcn) 로 띄우는 방식이 적절한지 봐주세요 (Figma 생성 폼이 중앙 카드 형태라 Dialog로 구현).
• Mock create_workspace 구조가 추후 supabase.rpc('create_workspace') 교체에 무리 없는지 확인 부탁드립니다.
• 템플릿 데이터(WORKSPACE_TEMPLATE_DETAIL)를 entities/workspace에 두고 purpose(team-project...)로 매핑했습니다. develop의 WorkspacePurpose(하이픈)와 정합.

관련 이슈

Closes #13

Summary by CodeRabbit

Summary by CodeRabbit

• New Features

  • 워크스페이스 만들기 페이지를 추가해 목적별 템플릿을 선택하고 생성할 수 있습니다.
  • 목적별 템플릿 카드와 생성 다이얼로그(이름/설명 입력) 제공 후 워크스페이스 목록으로 이동합니다.
  • Radix 기반 다이얼로그 UI 래퍼와 Input/Label/Textarea 공통 입력 컴포넌트를 추가했습니다.

• Bug Fixes

  • 다이얼로그를 닫으면 입력값이 초기화되도록 개선했습니다.
  • 열릴 때 이름 입력칸에 포커스가 가도록 개선했습니다.

[coderabbitai]

📝 Walkthrough

Walkthrough

워크스페이스 생성용 템플릿 메타데이터, 생성 다이얼로그, 공용 UI 프리미티브, 그리고 /workspaces/new 페이지가 추가되었다. 생성 흐름은 템플릿 선택 후 이름/설명 입력을 거쳐 Mock createWorkspace를 호출하고 /workspaces로 이동한다.

Changes

워크스페이스 생성 기능

Layer / File(s)	Summary
템플릿 메타데이터 및 Mock 생성 API src/entities/workspace/config/template.ts, src/entities/workspace/api/create-workspace.ts, src/entities/workspace/index.ts	목적별 템플릿 상세 정보와 렌더 순서를 정의하고, 이름을 슬러그화해 임시 id를 반환하는 Mock createWorkspace를 추가하며 이를 엔티티 배럴에서 re-export한다.
공용 UI 프리미티브 src/shared/ui/dialog.tsx, src/shared/ui/input.tsx, src/shared/ui/label.tsx, src/shared/ui/textarea.tsx	Radix 기반 Dialog 래퍼 세트와 Input, Label, Textarea 컴포넌트를 신규 추가한다.
생성 다이얼로그(폼 검증/제출) src/features/create-workspace/model/schema.ts, src/features/create-workspace/ui/CreateWorkspaceDialog.tsx, src/features/create-workspace/index.ts	Zod 스키마로 이름/설명을 검증하고, 제출 시 createWorkspace 호출 후 /workspaces로 라우팅하는 생성 다이얼로그와 공개 진입점을 추가한다.
템플릿 선택 카드 및 페이지 src/views/create-workspace/ui/TemplateSelectCard.tsx, src/views/create-workspace/ui/CreateWorkspacePage.tsx, src/views/create-workspace/index.ts, src/app/workspaces/new/page.tsx	목적 선택 카드와 페이지 상태를 관리하는 뷰를 구현하고 /workspaces/new 라우트에 연결한다.

Estimated code review effort: 3 (Moderate) | ~25 minutes

Sequence Diagram(s)

sequenceDiagram
  participant User
  participant CreateWorkspacePage
  participant TemplateSelectCard
  participant CreateWorkspaceDialog
  participant createWorkspace

  User->>CreateWorkspacePage: /workspaces/new 접속
  CreateWorkspacePage->>TemplateSelectCard: 템플릿 카드 렌더링
  User->>TemplateSelectCard: 목적 선택
  TemplateSelectCard->>CreateWorkspacePage: onSelect(purpose)
  CreateWorkspacePage->>CreateWorkspaceDialog: purpose, open 전달
  User->>CreateWorkspaceDialog: 이름/설명 입력 후 제출
  CreateWorkspaceDialog->>createWorkspace: createWorkspace(input)
  createWorkspace-->>CreateWorkspaceDialog: { id }
  CreateWorkspaceDialog->>User: /workspaces로 라우팅

Loading

Suggested reviewers: Kwon812, 0011810, JiWoongE

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Linked Issues check	✅ Passed	2단계 템플릿 선택→폼 입력→목록 이동 흐름과 mock 생성, 검증, /workspaces/new 라우트가 요구사항과 일치합니다.
Out of Scope Changes check	✅ Passed	요구된 생성 페이지, 공용 UI, 템플릿 설정, mock API 추가로 보이며 명백한 범위 외 변경은 없습니다.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	제목이 /workspaces/new 워크스페이스 생성 페이지 구현이라는 핵심 변경을 정확하고 간결하게 요약합니다.
Description check	✅ Passed	요구된 섹션과 체크리스트를 대부분 갖추고 있으며 작업 내용, 결과, 변경 사항, 실행화면, 테스트, 이슈 링크까지 포함합니다.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch feat/#13/workspace-create

---

_{Comment @coderabbitai help to get the list of available commands.}

[coderabbitai]

Actionable comments posted: 3

🤖 Prompt for all review comments with AI agents

Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.

Inline comments:
In `@src/features/create-workspace/ui/CreateWorkspaceDialog.tsx`:
- Around line 73-151: The CreateWorkspaceDialog can render an empty
DialogContent when purpose data is missing because the current `meta && detail
&& PurposeIcon` check falls through to `null` while `open` is still true. Update
`CreateWorkspaceDialog` to guard earlier by preventing the dialog from opening
when `purpose` is null, or add a defensive early return before rendering the
dialog content so the empty overlay never appears. Use the existing
`CreateWorkspaceDialog` component and its `purpose`, `meta`, `detail`, and
`PurposeIcon` checks to locate the fix.
- Around line 52-57: `CreateWorkspaceDialog`의 `onSubmit`에서 `createWorkspace` 실패
시 예외가 처리되지 않아 `isSubmitting`이 영구적으로 true로 남는 문제가 있습니다. `onSubmit`을
try/catch/finally 구조로 감싸서 `createWorkspace` 호출 실패를 잡고, 실패 시 사용자에게 알림을 표시한 뒤
`setIsSubmitting(false)`가 항상 실행되도록 하세요. 성공 경로에서도 `router.push('/workspaces')`와
무관하게 `finally`에서 상태를 복구하도록 수정하면 됩니다.

In `@src/views/create-workspace/ui/TemplateSelectCard.tsx`:
- Around line 19-36: In TemplateSelectCard, the button content uses an h3
heading inside a <button>, which should be replaced with a non-heading element.
Update the title markup in the TemplateSelectCard component so the element
inside the button becomes a span (or div) while keeping the existing text styles
and structure unchanged.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: e02f7e37-39e2-47d4-ba92-6c01c7b47bc9

📥 Commits

Reviewing files that changed from the base of the PR and between 480d3f9 and c9cf6eb.

📒 Files selected for processing (14)

• src/app/workspaces/new/page.tsx
• src/entities/workspace/api/create-workspace.ts
• src/entities/workspace/config/template.ts
• src/entities/workspace/index.ts
• src/features/create-workspace/index.ts
• src/features/create-workspace/model/schema.ts
• src/features/create-workspace/ui/CreateWorkspaceDialog.tsx
• src/shared/ui/dialog.tsx
• src/shared/ui/input.tsx
• src/shared/ui/label.tsx
• src/shared/ui/textarea.tsx
• src/views/create-workspace/index.ts
• src/views/create-workspace/ui/CreateWorkspacePage.tsx
• src/views/create-workspace/ui/TemplateSelectCard.tsx

[seongjinss555]

고생하셨습니다~

[JiWoongE]

수고하셨습니다 !