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

[wjswlgh96]

Issue

작업 유형

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

작업 내용

• Mock 데이터 기반 "내 워크스페이스" 페이지 구현 (참여 중인 워크스페이스 목록 + 빈 상태)
• 로그인 이후 첫 진입점 화면으로, 사용자가 참여 중인 워크스페이스를 카드 리스트로 조회

작업 배경

• 백엔드·인증·유저 데이터가 아직 없어 실제 API 연동이 불가능한 상태
• 진행을 막지 않도록 전 페이지를 Mock 데이터 우선으로 선구현하고, 이후 실제 API가 준비되면 데이터 소스만 교체하는 전략
• 로그인 페이지는 이번 스코프에서 제외(추후 인증 도입 시 별도 진행)

To Do

• entities/workspace 레이어 신설 — Workspace 타입 정의 + Mock 데이터(zod 스키마 병행 고려)
• /workspaces 라우트 추가 (src/app/workspaces/page.tsx)
• views/workspaces 뷰 조립 (헤더 + 목록/빈 상태 분기)
• widgets/workspace-list 위젯 — 워크스페이스 카드 리스트
  • 카드: 템플릿 아이콘(gradient), 워크스페이스 이름, 템플릿 유형, 멤버 수, 최근 활동 시각, 완료 수(X/Y), 진행률 바 + %, chevron
• 빈 상태 UI — 일러스트 + "아직 워크스페이스가 없어요" + 새 워크스페이스 CTA
• 헤더 — 제목("내 워크스페이스") + 부제("참여 중인 워크스페이스 목록") + "새 워크스페이스" 버튼
• 데스크톱/모바일 반응형
• Figma 픽셀 대조 검증 (데스크톱·모바일)

완료 기준

• Mock 데이터로 목록 상태와 빈 상태가 Figma대로 렌더링됨
• 템플릿 유형/아이콘/그라데이션이 기존 landing-templates config와 정합
• 카드 클릭·"새 워크스페이스" 버튼은 라우팅 스텁 연결 (상세 대시보드, 템플릿 선택/생성 페이지는 별도 이슈)
• npm run check (lint/type/format) 통과

참고 자료

• Figma: https://www.figma.com/design/MGUbA8bYzUb4WdjSm5KKkq/Syncly?node-id=0-1
  • 목록 상태: node 260:926 (128:2)
  • 빈 상태: node 255:617
• 템플릿 유형: 팀 프로젝트(보라·졸업모자) / 사이드 프로젝트(파랑·번개) / 매장 운영(주황·상점)
• Mock 데이터 방침: 인증·유저·백엔드 부재로 전 페이지 Mock 우선, 이후 API로 교체

예상 브랜치명

feat/#8/my-workspace