From 1e22168246baa750f0a5aa7d8f0616b5e4eb9322 Mon Sep 17 00:00:00 2001
From: JiHo Jeon <wjswlgh96@naver.com>
Date: Wed, 8 Jul 2026 10:45:19 +0900
Subject: [PATCH 1/3] =?UTF-8?q?chore:=20shadcn=20Dialog=C2=B7=EC=9E=85?=
 =?UTF-8?q?=EB=A0=A5=20=ED=8F=BC=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?=
 =?UTF-8?q?=EC=B6=94=EA=B0=80=20(#13)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 워크스페이스 생성 폼에 사용할 dialog / input / textarea / label 추가
---
 src/shared/ui/dialog.tsx   | 145 +++++++++++++++++++++++++++++++++++++
 src/shared/ui/input.tsx    |  19 +++++
 src/shared/ui/label.tsx    |  21 ++++++
 src/shared/ui/textarea.tsx |  18 +++++
 4 files changed, 203 insertions(+)
 create mode 100644 src/shared/ui/dialog.tsx
 create mode 100644 src/shared/ui/input.tsx
 create mode 100644 src/shared/ui/label.tsx
 create mode 100644 src/shared/ui/textarea.tsx

diff --git a/src/shared/ui/dialog.tsx b/src/shared/ui/dialog.tsx
new file mode 100644
index 0000000..89fdda6
--- /dev/null
+++ b/src/shared/ui/dialog.tsx
@@ -0,0 +1,145 @@
+'use client';
+
+import * as React from 'react';
+import { Dialog as DialogPrimitive } from 'radix-ui';
+
+import { cn } from '@/shared/lib/utils';
+import { Button } from '@/shared/ui/button';
+import { XIcon } from 'lucide-react';
+
+function Dialog({ ...props }: React.ComponentProps<typeof DialogPrimitive.Root>) {
+  return <DialogPrimitive.Root data-slot="dialog" {...props} />;
+}
+
+function DialogTrigger({ ...props }: React.ComponentProps<typeof DialogPrimitive.Trigger>) {
+  return <DialogPrimitive.Trigger data-slot="dialog-trigger" {...props} />;
+}
+
+function DialogPortal({ ...props }: React.ComponentProps<typeof DialogPrimitive.Portal>) {
+  return <DialogPrimitive.Portal data-slot="dialog-portal" {...props} />;
+}
+
+function DialogClose({ ...props }: React.ComponentProps<typeof DialogPrimitive.Close>) {
+  return <DialogPrimitive.Close data-slot="dialog-close" {...props} />;
+}
+
+function DialogOverlay({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Overlay>) {
+  return (
+    <DialogPrimitive.Overlay
+      data-slot="dialog-overlay"
+      className={cn(
+        'data-open:animate-in data-open:fade-in-0 data-closed:animate-out data-closed:fade-out-0 fixed inset-0 isolate z-50 bg-black/10 duration-100 supports-backdrop-filter:backdrop-blur-xs',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+function DialogContent({
+  className,
+  children,
+  showCloseButton = true,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Content> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <DialogPortal>
+      <DialogOverlay />
+      <DialogPrimitive.Content
+        data-slot="dialog-content"
+        className={cn(
+          'bg-popover text-popover-foreground ring-foreground/10 data-open:animate-in data-open:fade-in-0 data-open:zoom-in-95 data-closed:animate-out data-closed:fade-out-0 data-closed:zoom-out-95 fixed top-1/2 left-1/2 z-50 grid w-full max-w-[calc(100%-2rem)] -translate-x-1/2 -translate-y-1/2 gap-4 rounded-xl p-4 text-sm ring-1 duration-100 outline-none sm:max-w-sm',
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        {showCloseButton && (
+          <DialogPrimitive.Close data-slot="dialog-close" asChild>
+            <Button variant="ghost" className="absolute top-2 right-2" size="icon-sm">
+              <XIcon />
+              <span className="sr-only">Close</span>
+            </Button>
+          </DialogPrimitive.Close>
+        )}
+      </DialogPrimitive.Content>
+    </DialogPortal>
+  );
+}
+
+function DialogHeader({ className, ...props }: React.ComponentProps<'div'>) {
+  return (
+    <div data-slot="dialog-header" className={cn('flex flex-col gap-2', className)} {...props} />
+  );
+}
+
+function DialogFooter({
+  className,
+  showCloseButton = false,
+  children,
+  ...props
+}: React.ComponentProps<'div'> & {
+  showCloseButton?: boolean;
+}) {
+  return (
+    <div
+      data-slot="dialog-footer"
+      className={cn(
+        'bg-muted/50 -mx-4 -mb-4 flex flex-col-reverse gap-2 rounded-b-xl border-t p-4 sm:flex-row sm:justify-end',
+        className,
+      )}
+      {...props}
+    >
+      {children}
+      {showCloseButton && (
+        <DialogPrimitive.Close asChild>
+          <Button variant="outline">Close</Button>
+        </DialogPrimitive.Close>
+      )}
+    </div>
+  );
+}
+
+function DialogTitle({ className, ...props }: React.ComponentProps<typeof DialogPrimitive.Title>) {
+  return (
+    <DialogPrimitive.Title
+      data-slot="dialog-title"
+      className={cn('font-heading text-base leading-none font-medium', className)}
+      {...props}
+    />
+  );
+}
+
+function DialogDescription({
+  className,
+  ...props
+}: React.ComponentProps<typeof DialogPrimitive.Description>) {
+  return (
+    <DialogPrimitive.Description
+      data-slot="dialog-description"
+      className={cn(
+        'text-muted-foreground *:[a]:hover:text-foreground text-sm *:[a]:underline *:[a]:underline-offset-3',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export {
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogOverlay,
+  DialogPortal,
+  DialogTitle,
+  DialogTrigger,
+};
diff --git a/src/shared/ui/input.tsx b/src/shared/ui/input.tsx
new file mode 100644
index 0000000..4bfaadd
--- /dev/null
+++ b/src/shared/ui/input.tsx
@@ -0,0 +1,19 @@
+import * as React from 'react';
+
+import { cn } from '@/shared/lib/utils';
+
+function Input({ className, type, ...props }: React.ComponentProps<'input'>) {
+  return (
+    <input
+      type={type}
+      data-slot="input"
+      className={cn(
+        'border-input file:text-foreground placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 h-8 w-full min-w-0 rounded-lg border bg-transparent px-2.5 py-1 text-base transition-colors outline-none file:inline-flex file:h-6 file:border-0 file:bg-transparent file:text-sm file:font-medium focus-visible:ring-3 disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Input };
diff --git a/src/shared/ui/label.tsx b/src/shared/ui/label.tsx
new file mode 100644
index 0000000..9a4e3ba
--- /dev/null
+++ b/src/shared/ui/label.tsx
@@ -0,0 +1,21 @@
+'use client';
+
+import * as React from 'react';
+import { Label as LabelPrimitive } from 'radix-ui';
+
+import { cn } from '@/shared/lib/utils';
+
+function Label({ className, ...props }: React.ComponentProps<typeof LabelPrimitive.Root>) {
+  return (
+    <LabelPrimitive.Root
+      data-slot="label"
+      className={cn(
+        'flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Label };
diff --git a/src/shared/ui/textarea.tsx b/src/shared/ui/textarea.tsx
new file mode 100644
index 0000000..274140e
--- /dev/null
+++ b/src/shared/ui/textarea.tsx
@@ -0,0 +1,18 @@
+import * as React from 'react';
+
+import { cn } from '@/shared/lib/utils';
+
+function Textarea({ className, ...props }: React.ComponentProps<'textarea'>) {
+  return (
+    <textarea
+      data-slot="textarea"
+      className={cn(
+        'border-input placeholder:text-muted-foreground focus-visible:border-ring focus-visible:ring-ring/50 disabled:bg-input/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 flex field-sizing-content min-h-16 w-full rounded-lg border bg-transparent px-2.5 py-2 text-base transition-colors outline-none focus-visible:ring-3 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:ring-3 md:text-sm',
+        className,
+      )}
+      {...props}
+    />
+  );
+}
+
+export { Textarea };

From c9cf6ebbf227295cdee62b652255924f1c696a7e Mon Sep 17 00:00:00 2001
From: JiHo Jeon <wjswlgh96@naver.com>
Date: Wed, 8 Jul 2026 10:45:36 +0900
Subject: [PATCH 2/3] =?UTF-8?q?feat:=20=EC=9B=8C=ED=81=AC=EC=8A=A4?=
 =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=8A=A4=20=EC=83=9D=EC=84=B1=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EA=B5=AC=ED=98=84=20(#13)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- /workspaces/new 템플릿 선택 화면 + 클릭 시 생성 Dialog
- 생성 Dialog: 선택 템플릿 요약·포함 기능 + 이름(필수)/설명 폼, react-hook-form + zod 검증
- entities/workspace: 템플릿 상세 config, create_workspace Mock (ERD RPC 형태)
- 이름 입력 자동 포커스, X·ESC 닫기, 생성 후 목록으로 이동
---
 src/app/workspaces/new/page.tsx               |  10 ++
 .../workspace/api/create-workspace.ts         |  22 +++
 src/entities/workspace/config/template.ts     |  48 ++++++
 src/entities/workspace/index.ts               |   6 +
 src/features/create-workspace/index.ts        |   2 +
 src/features/create-workspace/model/schema.ts |  12 ++
 .../ui/CreateWorkspaceDialog.tsx              | 155 ++++++++++++++++++
 src/views/create-workspace/index.ts           |   2 +
 .../ui/CreateWorkspacePage.tsx                |  60 +++++++
 .../ui/TemplateSelectCard.tsx                 |  51 ++++++
 10 files changed, 368 insertions(+)
 create mode 100644 src/app/workspaces/new/page.tsx
 create mode 100644 src/entities/workspace/api/create-workspace.ts
 create mode 100644 src/entities/workspace/config/template.ts
 create mode 100644 src/features/create-workspace/index.ts
 create mode 100644 src/features/create-workspace/model/schema.ts
 create mode 100644 src/features/create-workspace/ui/CreateWorkspaceDialog.tsx
 create mode 100644 src/views/create-workspace/index.ts
 create mode 100644 src/views/create-workspace/ui/CreateWorkspacePage.tsx
 create mode 100644 src/views/create-workspace/ui/TemplateSelectCard.tsx

diff --git a/src/app/workspaces/new/page.tsx b/src/app/workspaces/new/page.tsx
new file mode 100644
index 0000000..67c9092
--- /dev/null
+++ b/src/app/workspaces/new/page.tsx
@@ -0,0 +1,10 @@
+import type { Metadata } from 'next';
+import { CreateWorkspacePage } from '@/views/create-workspace';
+
+export const metadata: Metadata = {
+  title: '워크스페이스 만들기 · Syncly',
+};
+
+export default function Page() {
+  return <CreateWorkspacePage />;
+}
diff --git a/src/entities/workspace/api/create-workspace.ts b/src/entities/workspace/api/create-workspace.ts
new file mode 100644
index 0000000..4a62307
--- /dev/null
+++ b/src/entities/workspace/api/create-workspace.ts
@@ -0,0 +1,22 @@
+// create_workspace RPC의 Mock 구현
+// 백엔드 준비 시 supabase.rpc('create_workspace')로 교체한다
+// (실제로는 workspaces insert → invite_code 생성 → owner 등록 → purpose 기준 workspace_modules 생성 후 id 반환)
+import type { WorkspacePurpose } from '../model/workspace.types';
+
+export interface CreateWorkspaceInput {
+  name: string;
+  description?: string;
+  purpose: WorkspacePurpose;
+}
+
+export async function createWorkspace(input: CreateWorkspaceInput): Promise<{ id: string }> {
+  // Mock: 실제 저장 없이 워크스페이스 id만 생성해 반환한다
+  const slug =
+    input.name
+      .trim()
+      .toLowerCase()
+      .replace(/[^a-z0-9가-힣]+/g, '-')
+      .replace(/^-+|-+$/g, '') || 'workspace';
+
+  return { id: `ws-${slug}-${Date.now().toString(36)}` };
+}
diff --git a/src/entities/workspace/config/template.ts b/src/entities/workspace/config/template.ts
new file mode 100644
index 0000000..4e4eff7
--- /dev/null
+++ b/src/entities/workspace/config/template.ts
@@ -0,0 +1,48 @@
+// 워크스페이스 생성 시 보여줄 템플릿(purpose) 상세 정보 — 라벨/아이콘/gradient는 WORKSPACE_PURPOSE_META 참고
+import type { WorkspacePurpose } from '../model/workspace.types';
+
+export interface WorkspaceTemplateDetail {
+  subtitle: string; // 타깃 사용자 (예: 대학교 팀플, 스터디)
+  description: string; // 템플릿 설명
+  tags: string[]; // 포함되는 기능
+  tagBg: string;
+  tagText: string;
+  borderColor: string;
+}
+
+export const WORKSPACE_TEMPLATE_DETAIL: Record<WorkspacePurpose, WorkspaceTemplateDetail> = {
+  'team-project': {
+    subtitle: '대학교 팀플, 스터디',
+    description:
+      '수업 팀플이나 스터디 그룹에 딱 맞는 구성입니다. 역할 분담부터 일정 관리까지 한 곳에서.',
+    tags: ['업무 분담 보드', '회의록', '자료실', '캘린더', '그룹 채팅'],
+    tagBg: '#ede9fe',
+    tagText: '#7008e7',
+    borderColor: '#ede9fe',
+  },
+  'side-project': {
+    subtitle: '개발팀, 스타트업 소규모 팀',
+    description:
+      '빠르게 실행하는 소규모 개발팀을 위한 구성입니다. 칸반과 스프린트로 속도 있게 진행하세요.',
+    tags: ['칸반 보드', '스프린트 관리', '회의록', '채팅', '진행률 차트'],
+    tagBg: '#dbeafe',
+    tagText: '#1447e6',
+    borderColor: '#dbeafe',
+  },
+  'store-operation': {
+    subtitle: '카페, 음식점, 소규모 가게',
+    description:
+      '매장 직원들과 공지, 스케줄, 업무를 쉽게 공유하세요. 복잡한 기능 없이 꼭 필요한 것만.',
+    tags: ['공지 게시판', '업무 스케줄', '자료실', '채팅', '캘린더'],
+    tagBg: '#fef3c6',
+    tagText: '#bb4d00',
+    borderColor: '#ffe888',
+  },
+};
+
+// 선택 화면 카드 렌더 순서
+export const WORKSPACE_TEMPLATE_ORDER: WorkspacePurpose[] = [
+  'team-project',
+  'side-project',
+  'store-operation',
+];
diff --git a/src/entities/workspace/index.ts b/src/entities/workspace/index.ts
index 659fd91..dcb08b6 100644
--- a/src/entities/workspace/index.ts
+++ b/src/entities/workspace/index.ts
@@ -2,4 +2,10 @@
 export type { Workspace, WorkspacePurpose, WorkspaceSummary } from './model/workspace.types';
 export { mockWorkspace } from './model/mock-workspace';
 export { WORKSPACE_PURPOSE_META, FALLBACK_PURPOSE_META } from './config/purpose';
+export {
+  WORKSPACE_TEMPLATE_DETAIL,
+  WORKSPACE_TEMPLATE_ORDER,
+  type WorkspaceTemplateDetail,
+} from './config/template';
 export { getMyWorkspaces } from './api/get-my-workspaces';
+export { createWorkspace, type CreateWorkspaceInput } from './api/create-workspace';
diff --git a/src/features/create-workspace/index.ts b/src/features/create-workspace/index.ts
new file mode 100644
index 0000000..2171c78
--- /dev/null
+++ b/src/features/create-workspace/index.ts
@@ -0,0 +1,2 @@
+// create-workspace 기능의 Public API
+export { default as CreateWorkspaceDialog } from './ui/CreateWorkspaceDialog';
diff --git a/src/features/create-workspace/model/schema.ts b/src/features/create-workspace/model/schema.ts
new file mode 100644
index 0000000..0366cc3
--- /dev/null
+++ b/src/features/create-workspace/model/schema.ts
@@ -0,0 +1,12 @@
+import { z } from 'zod';
+
+export const createWorkspaceSchema = z.object({
+  name: z
+    .string()
+    .trim()
+    .min(1, '워크스페이스 이름을 입력해주세요')
+    .max(50, '이름은 50자 이내로 입력해주세요'),
+  description: z.string().trim().max(200, '설명은 200자 이내로 입력해주세요').optional(),
+});
+
+export type CreateWorkspaceForm = z.infer<typeof createWorkspaceSchema>;
diff --git a/src/features/create-workspace/ui/CreateWorkspaceDialog.tsx b/src/features/create-workspace/ui/CreateWorkspaceDialog.tsx
new file mode 100644
index 0000000..6025d5d
--- /dev/null
+++ b/src/features/create-workspace/ui/CreateWorkspaceDialog.tsx
@@ -0,0 +1,155 @@
+'use client';
+
+// 워크스페이스 생성 Dialog — 선택된 템플릿 요약 + 이름/설명 입력 후 Mock 생성
+import { useRouter } from 'next/navigation';
+import { useState } from 'react';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import {
+  WORKSPACE_PURPOSE_META,
+  WORKSPACE_TEMPLATE_DETAIL,
+  createWorkspace,
+  type WorkspacePurpose,
+} from '@/entities/workspace';
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from '@/shared/ui/dialog';
+import { Input } from '@/shared/ui/input';
+import { Label } from '@/shared/ui/label';
+import { Textarea } from '@/shared/ui/textarea';
+import { createWorkspaceSchema, type CreateWorkspaceForm } from '../model/schema';
+
+interface CreateWorkspaceDialogProps {
+  purpose: WorkspacePurpose | null;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+}
+
+const INPUT_CLASS =
+  'bg-brand-secondary text-brand-ink placeholder:text-brand-ink/50 h-11 w-full rounded-[18px] border-2 border-transparent px-4.5 text-sm transition-colors focus-visible:border-brand focus-visible:ring-0';
+
+export default function CreateWorkspaceDialog({
+  purpose,
+  open,
+  onOpenChange,
+}: CreateWorkspaceDialogProps) {
+  const router = useRouter();
+  const [isSubmitting, setIsSubmitting] = useState(false);
+  const {
+    register,
+    handleSubmit,
+    reset,
+    setFocus,
+    formState: { errors },
+  } = useForm<CreateWorkspaceForm>({
+    resolver: zodResolver(createWorkspaceSchema),
+    defaultValues: { name: '', description: '' },
+  });
+
+  const handleOpenChange = (next: boolean) => {
+    if (!next) reset();
+    onOpenChange(next);
+  };
+
+  const onSubmit = async (values: CreateWorkspaceForm) => {
+    if (!purpose) return;
+    setIsSubmitting(true);
+    await createWorkspace({ name: values.name, description: values.description, purpose });
+    router.push('/workspaces');
+  };
+
+  const meta = purpose ? WORKSPACE_PURPOSE_META[purpose] : null;
+  const detail = purpose ? WORKSPACE_TEMPLATE_DETAIL[purpose] : null;
+  const PurposeIcon = meta?.icon;
+
+  return (
+    <Dialog open={open} onOpenChange={handleOpenChange}>
+      <DialogContent
+        onOpenAutoFocus={(event) => {
+          // 기본 포커스(닫기 버튼) 대신 이름 입력으로 포커스를 보낸다
+          event.preventDefault();
+          setFocus('name');
+        }}
+        className="border-brand/10 gap-0 rounded-[16px] bg-white p-8.25 sm:max-w-[512px]"
+      >
+        {meta && detail && PurposeIcon ? (
+          <>
+            <div className="flex items-center gap-3">
+              <div
+                className="flex size-10 shrink-0 items-center justify-center rounded-[18px]"
+                style={{ backgroundImage: meta.gradient }}
+              >
+                <PurposeIcon className="size-5 text-white" aria-hidden />
+              </div>
+              <div className="flex min-w-0 flex-col">
+                <DialogTitle className="text-brand-ink text-xl leading-[30px] font-bold">
+                  {meta.label}
+                </DialogTitle>
+                <DialogDescription className="text-brand-muted text-xs leading-4">
+                  선택된 템플릿
+                </DialogDescription>
+              </div>
+            </div>
+
+            <div className="bg-brand-secondary mt-6 rounded-[18px] p-3">
+              <p className="text-brand-muted text-xs leading-4 font-semibold">포함되는 기능</p>
+              <div className="mt-2 flex flex-wrap gap-2">
+                {detail.tags.map((tag) => (
+                  <span
+                    key={tag}
+                    className="rounded-full px-2 py-0.5 text-[13px] leading-4 font-semibold"
+                    style={{ backgroundColor: detail.tagBg, color: detail.tagText }}
+                  >
+                    {tag}
+                  </span>
+                ))}
+              </div>
+            </div>
+
+            <form onSubmit={handleSubmit(onSubmit)} className="mt-5 flex flex-col gap-4">
+              <div className="flex flex-col gap-1.5">
+                <Label htmlFor="workspace-name" className="text-brand-ink text-sm font-semibold">
+                  워크스페이스 이름 <span className="text-brand">*</span>
+                </Label>
+                <Input
+                  id="workspace-name"
+                  placeholder="예: 캡스톤 디자인 팀"
+                  autoComplete="off"
+                  className={INPUT_CLASS}
+                  aria-invalid={Boolean(errors.name)}
+                  {...register('name')}
+                />
+                {errors.name && <p className="text-xs text-red-500">{errors.name.message}</p>}
+              </div>
+
+              <div className="flex flex-col gap-1.5">
+                <Label
+                  htmlFor="workspace-description"
+                  className="text-brand-ink text-sm font-semibold"
+                >
+                  설명 (선택)
+                </Label>
+                <Textarea
+                  id="workspace-description"
+                  placeholder="워크스페이스에 대해 간단히 설명해주세요"
+                  className={`${INPUT_CLASS} h-[84px] resize-none py-3`}
+                  aria-invalid={Boolean(errors.description)}
+                  {...register('description')}
+                />
+                {errors.description && (
+                  <p className="text-xs text-red-500">{errors.description.message}</p>
+                )}
+              </div>
+
+              <button
+                type="submit"
+                disabled={isSubmitting}
+                className="bg-brand mt-2 rounded-[18px] py-3 text-base font-semibold text-white transition-opacity disabled:opacity-60"
+              >
+                {isSubmitting ? '만드는 중...' : '워크스페이스 만들기'}
+              </button>
+            </form>
+          </>
+        ) : null}
+      </DialogContent>
+    </Dialog>
+  );
+}
diff --git a/src/views/create-workspace/index.ts b/src/views/create-workspace/index.ts
new file mode 100644
index 0000000..6de07cd
--- /dev/null
+++ b/src/views/create-workspace/index.ts
@@ -0,0 +1,2 @@
+// create-workspace 뷰의 Public API
+export { default as CreateWorkspacePage } from './ui/CreateWorkspacePage';
diff --git a/src/views/create-workspace/ui/CreateWorkspacePage.tsx b/src/views/create-workspace/ui/CreateWorkspacePage.tsx
new file mode 100644
index 0000000..f242b4f
--- /dev/null
+++ b/src/views/create-workspace/ui/CreateWorkspacePage.tsx
@@ -0,0 +1,60 @@
+'use client';
+
+// 워크스페이스 생성 페이지 — 템플릿 선택 후 생성 Dialog로 이어지는 플로우
+import Link from 'next/link';
+import { useState } from 'react';
+import { Plus_Jakarta_Sans } from 'next/font/google';
+import { WORKSPACE_TEMPLATE_ORDER, type WorkspacePurpose } from '@/entities/workspace';
+import { CreateWorkspaceDialog } from '@/features/create-workspace';
+import TemplateSelectCard from './TemplateSelectCard';
+
+const jakarta = Plus_Jakarta_Sans({
+  subsets: ['latin'],
+  weight: ['400', '600', '700', '800'],
+});
+
+export default function CreateWorkspacePage() {
+  const [selectedPurpose, setSelectedPurpose] = useState<WorkspacePurpose | null>(null);
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
+
+  const handleSelect = (purpose: WorkspacePurpose) => {
+    setSelectedPurpose(purpose);
+    setIsDialogOpen(true);
+  };
+
+  return (
+    <div
+      className={`${jakarta.className} bg-brand-surface flex min-h-screen flex-col items-center justify-center px-6 py-6`}
+    >
+      <div className="mx-auto flex w-full max-w-3xl flex-col items-center gap-5">
+        <div className="flex w-full flex-col gap-7.5">
+          <header className="flex flex-col items-center text-center">
+            <h1 className="text-brand-ink text-2xl leading-8 font-bold">
+              어떤 용도로 쓰실 건가요?
+            </h1>
+            <p className="text-brand-muted pt-2 text-sm leading-5">
+              목적에 맞는 템플릿을 선택하면 워크스페이스를 이용할 수 있어요
+            </p>
+          </header>
+          <div className="flex w-full flex-col gap-3.75">
+            {WORKSPACE_TEMPLATE_ORDER.map((purpose) => (
+              <TemplateSelectCard key={purpose} purpose={purpose} onSelect={handleSelect} />
+            ))}
+          </div>
+        </div>
+        <Link
+          href="/workspaces"
+          className="text-brand-muted hover:text-brand text-sm font-semibold"
+        >
+          ← 워크스페이스 목록으로
+        </Link>
+      </div>
+
+      <CreateWorkspaceDialog
+        purpose={selectedPurpose}
+        open={isDialogOpen}
+        onOpenChange={setIsDialogOpen}
+      />
+    </div>
+  );
+}
diff --git a/src/views/create-workspace/ui/TemplateSelectCard.tsx b/src/views/create-workspace/ui/TemplateSelectCard.tsx
new file mode 100644
index 0000000..e61a7c2
--- /dev/null
+++ b/src/views/create-workspace/ui/TemplateSelectCard.tsx
@@ -0,0 +1,51 @@
+// 템플릿 선택 카드 — 클릭 시 해당 purpose로 생성 Dialog를 연다
+import {
+  WORKSPACE_PURPOSE_META,
+  WORKSPACE_TEMPLATE_DETAIL,
+  type WorkspacePurpose,
+} from '@/entities/workspace';
+
+interface TemplateSelectCardProps {
+  purpose: WorkspacePurpose;
+  onSelect: (purpose: WorkspacePurpose) => void;
+}
+
+export default function TemplateSelectCard({ purpose, onSelect }: TemplateSelectCardProps) {
+  const meta = WORKSPACE_PURPOSE_META[purpose];
+  const detail = WORKSPACE_TEMPLATE_DETAIL[purpose];
+  const PurposeIcon = meta.icon;
+
+  return (
+    <button
+      type="button"
+      onClick={() => onSelect(purpose)}
+      style={{ borderColor: detail.borderColor }}
+      className="flex w-full flex-col gap-3 rounded-[16px] border-2 bg-white p-6.5 text-left transition-shadow hover:shadow-md"
+    >
+      <div className="flex items-center gap-3.75">
+        <div
+          className="flex size-11.25 shrink-0 items-center justify-center rounded-[13px] shadow-[0px_3px_3px_rgba(0,0,0,0.1)]"
+          style={{ backgroundImage: meta.gradient }}
+        >
+          <PurposeIcon className="size-[22.5px] text-white" aria-hidden />
+        </div>
+        <div className="flex flex-col gap-1">
+          <h3 className="text-brand-ink text-lg leading-7 font-bold">{meta.label}</h3>
+          <p className="text-brand-muted text-[13px] leading-4">{detail.subtitle}</p>
+        </div>
+      </div>
+      <p className="text-brand-muted text-sm leading-[22.75px]">{detail.description}</p>
+      <div className="flex flex-wrap gap-2.5">
+        {detail.tags.map((tag) => (
+          <span
+            key={tag}
+            style={{ backgroundColor: detail.tagBg, color: detail.tagText }}
+            className="rounded-full px-2 py-0.5 text-[13px] leading-4 font-semibold tracking-[-0.325px]"
+          >
+            {tag}
+          </span>
+        ))}
+      </div>
+    </button>
+  );
+}

From 43b25ba4223e14b33fd0bd12b7e6817d36fbbdbb Mon Sep 17 00:00:00 2001
From: JiHo Jeon <wjswlgh96@naver.com>
Date: Wed, 8 Jul 2026 11:09:19 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix:=20CodeRabbit=20=EB=A6=AC=EB=B7=B0=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81=20=E2=80=94=20=EC=83=9D=EC=84=B1=20=EC=97=90?=
 =?UTF-8?q?=EB=9F=AC=20=EC=B2=98=EB=A6=AC=C2=B7=EB=A7=88=ED=81=AC=EC=97=85?=
 =?UTF-8?q?=C2=B7=EA=B0=80=EB=93=9C=20(#13)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 생성 실패 시 isSubmitting 리셋 및 에러 처리(try/catch) 추가
- purpose 없을 때 Dialog가 열리지 않도록 상위에서 가드
- 선택 카드 제목을 button 내부에서 유효하지 않은 h3 → span으로 교체
---
 .../create-workspace/ui/CreateWorkspaceDialog.tsx     | 11 +++++++++--
 src/views/create-workspace/ui/CreateWorkspacePage.tsx |  2 +-
 src/views/create-workspace/ui/TemplateSelectCard.tsx  |  2 +-
 3 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/src/features/create-workspace/ui/CreateWorkspaceDialog.tsx b/src/features/create-workspace/ui/CreateWorkspaceDialog.tsx
index 6025d5d..038f20f 100644
--- a/src/features/create-workspace/ui/CreateWorkspaceDialog.tsx
+++ b/src/features/create-workspace/ui/CreateWorkspaceDialog.tsx
@@ -52,8 +52,15 @@ export default function CreateWorkspaceDialog({
   const onSubmit = async (values: CreateWorkspaceForm) => {
     if (!purpose) return;
     setIsSubmitting(true);
-    await createWorkspace({ name: values.name, description: values.description, purpose });
-    router.push('/workspaces');
+    try {
+      await createWorkspace({ name: values.name, description: values.description, purpose });
+      router.push('/workspaces');
+      // 성공 시 페이지 이동으로 언마운트되므로 isSubmitting을 리셋하지 않는다(버튼 깜빡임 방지)
+    } catch (error) {
+      // TODO: 실패 알림 UI(toast 등) 추가 — 현재는 Mock이라 실패하지 않음
+      console.error(error);
+      setIsSubmitting(false);
+    }
   };
 
   const meta = purpose ? WORKSPACE_PURPOSE_META[purpose] : null;
diff --git a/src/views/create-workspace/ui/CreateWorkspacePage.tsx b/src/views/create-workspace/ui/CreateWorkspacePage.tsx
index f242b4f..27a6323 100644
--- a/src/views/create-workspace/ui/CreateWorkspacePage.tsx
+++ b/src/views/create-workspace/ui/CreateWorkspacePage.tsx
@@ -52,7 +52,7 @@ export default function CreateWorkspacePage() {
 
       <CreateWorkspaceDialog
         purpose={selectedPurpose}
-        open={isDialogOpen}
+        open={isDialogOpen && selectedPurpose !== null}
         onOpenChange={setIsDialogOpen}
       />
     </div>
diff --git a/src/views/create-workspace/ui/TemplateSelectCard.tsx b/src/views/create-workspace/ui/TemplateSelectCard.tsx
index e61a7c2..23c0096 100644
--- a/src/views/create-workspace/ui/TemplateSelectCard.tsx
+++ b/src/views/create-workspace/ui/TemplateSelectCard.tsx
@@ -30,7 +30,7 @@ export default function TemplateSelectCard({ purpose, onSelect }: TemplateSelect
           <PurposeIcon className="size-[22.5px] text-white" aria-hidden />
         </div>
         <div className="flex flex-col gap-1">
-          <h3 className="text-brand-ink text-lg leading-7 font-bold">{meta.label}</h3>
+          <span className="text-brand-ink text-lg leading-7 font-bold">{meta.label}</span>
           <p className="text-brand-muted text-[13px] leading-4">{detail.subtitle}</p>
         </div>
       </div>