Skip to content

feat: 내 워크스페이스 페이지 구현 (#8) - #10

Merged
wjswlgh96 merged 6 commits into
developfrom
feat/#8/my-workspace
Jul 8, 2026
Merged

feat: 내 워크스페이스 페이지 구현 (#8)#10
wjswlgh96 merged 6 commits into
developfrom
feat/#8/my-workspace

Conversation

@wjswlgh96

@wjswlgh96 wjswlgh96 commented Jul 6, 2026

Copy link
Copy Markdown
Contributor

Pull Request

작업 내용

  • 백엔드/인증 부재 상황에서 Mock 데이터 기반 "내 워크스페이스" 페이지(/workspaces) 구현
  • 참여 중인 워크스페이스 목록 상태빈 상태를 Figma 디자인대로 구현
  • Tailwind spacing 임의값을 프리셋으로 강제하는 검사 게이트 추가

작업 결과

  • /workspaces 접속 시 Mock 워크스페이스 3종(팀 프로젝트·사이드 프로젝트·매장 운영) 카드 렌더링
  • 카드: 템플릿 아이콘(gradient) · 이름 · 유형 · 멤버 수 · 최근 활동 · 완료 수 · 진행률 바 · chevron
  • 워크스페이스가 없을 때 일러스트 + 안내 문구의 빈 상태 표시
  • 데스크톱(768 중앙 컬럼) ~ 모바일(320px)까지 반응형 확인, 가로 스크롤 없음

변경 사항

Added

  • entities/workspaceWorkspaceSummary 타입(get_my_workspaces RPC 반환 shape), purpose 표시 메타, getMyWorkspaces() Mock
  • widgets/workspace-listWorkspaceCard / EmptyWorkspaces / WorkspaceList
  • views/workspaces + src/app/workspaces/page.tsx (/workspaces 라우트)
  • shared/lib/date — 상대 시간 포맷 유틸
  • scripts/check-tailwind-spacing.mjs + npm run lint:tw (spacing -[Npx] → 0.25 프리셋 강제, check 체인에 포함)

Changed

  • 히어로 무빙 그라데이션 배경 크기: bg-[length:200%_auto]bg-size-[200%_auto] (Tailwind v4 유틸리티, 시각 동등)

Fixed

  • 좁은 화면(~320px)에서 완료 수가 긴 카드의 메타 행이 넘치지 않도록 flex-wrap 처리

실행화면

  • 워크스페이스 목록 (List)
workspaces-list
  • 워크스페이스 없음 (Empty State)
workspaces-empty

테스트

  • 로컬 실행 확인
  • 주요 시나리오 확인 (목록 상태 / 빈 상태 / 320~1280 반응형)
  • 영향 범위 확인 (독립 라우트, 히어로는 시각 동등 소규모 변경)

리뷰 체크리스트

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

리뷰 요청사항

  • Mock 데이터 구조: get_my_workspaces RPC 반환 형태(snake_case, progress 계산, updated_at)에 맞춰 두어 추후 supabase.rpc(...)로 교체 시 매핑이 없도록 했습니다. ERD와 어긋나는 부분 있는지 봐주세요.
  • "최근 활동"workspaces.updated_at 기준으로 잡았습니다 (get_my_workspaces에 없던 필드 → RPC가 updated_at도 반환하는 방향).
  • spacing 게이트 도입 방식(무의존성 Node 스크립트 + check 포함)이 팀에 맞는지 의견 부탁드립니다.

관련 이슈

Closes #8

Summary by CodeRabbit

  • New Features

    • 내 워크스페이스 페이지가 추가되어 참여 중인 워크스페이스 목록을 확인할 수 있습니다.
    • 워크스페이스 카드에서 진행률, 멤버 수, 최근 업데이트 시간을 한눈에 볼 수 있습니다.
    • 워크스페이스가 없을 때 안내용 빈 상태 화면이 표시됩니다.
    • 새 워크스페이스로 이동하는 버튼이 추가되었습니다.
  • Bug Fixes

    • Tailwind 간격 값 검사 기준이 강화되어 잘못된 픽셀 단위 사용을 더 쉽게 찾아냅니다.
  • Documentation

    • 실행 스크립트 안내가 최신 동작에 맞게 갱신되었습니다.

wjswlgh96 added 4 commits July 6, 2026 16:43
- get_my_workspaces RPC 반환 형태에 맞춘 entities/workspace (타입/purpose 메타/Mock)
- workspace-list 위젯: 카드 리스트 + 빈 상태
- views/workspaces 조립 및 /workspaces 라우트 추가
- shared/lib/date 상대 시간 포맷 유틸
- purpose(team_project/side_project/store/custom) 기반 프론트 표시 매핑, progress는 done/task 계산
- gap/p*/m*/space 계열 -[Npx] 임의값을 0.25 프리셋으로 강제하는 check 스크립트
- npm run check 체인에 lint:tw 포함 (eslint로 안 잡히던 규칙을 CI에서 차단)
- 좁은 화면(~320px)에서 완료 수가 긴 카드의 메타 행이 넘치지 않도록 flex-wrap 적용
- bg-[length:200%_auto] → bg-size-[200%_auto] (Tailwind v4 유틸리티, 시각 동등)
@coderabbitai

coderabbitai Bot commented Jul 6, 2026

Copy link
Copy Markdown

Review Change Stack

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Pro Plus

Run ID: 20259878-dabc-475f-a183-1c975133ed54

📥 Commits

Reviewing files that changed from the base of the PR and between 3a245d7 and 20f95d0.

📒 Files selected for processing (10)
  • src/entities/work-schedule/lib/count-schedules-by-weekday.ts
  • src/entities/work-schedule/lib/get-work-members-by-weekday.ts
  • src/entities/workspace/api/get-my-workspaces.ts
  • src/entities/workspace/config/purpose.ts
  • src/entities/workspace/index.ts
  • src/entities/workspace/model/workspace.types.ts
  • src/features/manage-work-schedule/model/use-work-schedule-state.ts
  • src/features/manage-work-schedule/ui/WorkShiftSettingsPanel.tsx
  • src/widgets/landing/landing-hero/ui/HeroSection.tsx
  • src/widgets/workspace-list/ui/WorkspaceCard.tsx

📝 Walkthrough

Walkthrough

Mock 데이터 기반 "내 워크스페이스" 페이지가 추가되었다(엔티티 타입/API, 목적 메타데이터, 상대 시간 유틸, WorkspaceCard/List/EmptyWorkspaces 위젯, 뷰/라우트). Tailwind spacing 검사 스크립트(lint:tw)가 추가되어 package.json/README에 연결되었고, HeroSection 그라데이션 클래스가 교체되었으며, 일부 work-schedule 파일에 포맷 전용 변경이 포함되었다.

Changes

내 워크스페이스 페이지 구현

Layer / File(s) Summary
워크스페이스 도메인
src/entities/workspace/model/workspace.types.ts, src/entities/workspace/api/get-my-workspaces.ts, src/entities/workspace/config/purpose.ts, src/entities/workspace/index.ts, src/shared/lib/date.ts
WorkspaceSummary 타입, mock getMyWorkspaces, 목적별 메타(WORKSPACE_PURPOSE_META/FALLBACK_PURPOSE_META), public export, 상대 시간 포맷 유틸이 추가되었다.
워크스페이스 목록 위젯
src/widgets/workspace-list/index.ts, src/widgets/workspace-list/ui/EmptyWorkspaces.tsx, src/widgets/workspace-list/ui/WorkspaceCard.tsx, src/widgets/workspace-list/ui/WorkspaceList.tsx
WorkspaceCard, EmptyWorkspaces, WorkspaceList가 추가되어 목록/빈 상태를 분기 렌더링하며, 카드에는 멤버 수·상대 시간·진행률 바가 표시된다.
워크스페이스 페이지 조립
src/views/workspaces/index.ts, src/views/workspaces/ui/WorkspacesPage.tsx, src/app/workspaces/page.tsx
/workspaces 라우트와 WorkspacesPage가 추가되어 서버에서 목록을 조회해 헤더, CTA 버튼, WorkspaceList를 렌더링한다.

Tailwind 검사 및 Hero 스타일 수정

Layer / File(s) Summary
Tailwind spacing 검사
scripts/check-tailwind-spacing.mjs, package.json, README.md
임의 px 값을 탐지하는 검사 스크립트가 추가되고 lint:twcheck 스크립트/문서에 연결되었다.
HeroSection 클래스 수정
src/widgets/landing/landing-hero/ui/HeroSection.tsx
배경 사이징 클래스가 bg-[length:200%_auto]에서 bg-size-[200%_auto]로 교체되었다.

근무표 관련 파일 포맷 정리

Layer / File(s) Summary
포맷 전용 변경
src/entities/work-schedule/lib/count-schedules-by-weekday.ts, src/entities/work-schedule/lib/get-work-members-by-weekday.ts, src/features/manage-work-schedule/model/use-work-schedule-state.ts, src/features/manage-work-schedule/ui/WorkShiftSettingsPanel.tsx
동작 변화 없이 초기화 표현식, 파라미터 구조 분해, import 구문의 개행/들여쓰기만 조정되었다.

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

Sequence Diagram(s)

sequenceDiagram
  participant AppPage as src/app/workspaces/page.tsx
  participant WorkspacesPage
  participant getMyWorkspaces
  participant WorkspaceList
  participant WorkspaceCard

  AppPage->>WorkspacesPage: default render
  WorkspacesPage->>getMyWorkspaces: 워크스페이스 목록 조회
  getMyWorkspaces-->>WorkspacesPage: WorkspaceSummary[] 반환
  WorkspacesPage->>WorkspaceList: workspaces 전달
  alt 목록이 비어있음
    WorkspaceList->>WorkspaceList: EmptyWorkspaces 렌더링
  else 목록 존재
    WorkspaceList->>WorkspaceCard: 각 workspace 전달
  end
Loading

Possibly related PRs

  • TeampleRun/syncly#3: 동일한 HeroSection.tsxanimate-gradient-x 배경 사이징 클래스에 직접 영향을 준다.
  • TeampleRun/syncly#16: src/entities/workspace/index.tsWorkspacePurpose public export 및 purpose 기반 처리와 직접적으로 맞물린다.

Suggested reviewers: Kwon812, JiWoongE, 0011810

Poem

토끼가 새 워크스페이스 문을 열고,
카드마다 진행률 막대를 세어보네,
그라데이션은 조금 더 크게 번지고,
lint:tw가 여백을 콕콕 잡아내니,
포맷도 가지런히 줄을 맞춰 앉았다네 🐇

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Out of Scope Changes check ⚠️ Warning work-schedule 관련 파일들의 포맷 변경처럼 워크스페이스/spacing 게이트와 무관한 수정이 포함되어 있습니다. 이런 비관련 변경은 별도 PR로 분리하거나 제거하고, 워크스페이스 페이지와 Tailwind 검사 관련 변경만 남기세요.
✅ Passed checks (4 passed)
Check name Status Explanation
Title check ✅ Passed 제목이 내 워크스페이스 페이지 구현이라는 핵심 변경을 짧고 명확하게 반영합니다.
Description check ✅ Passed 작업 내용, 결과, 변경 사항, 실행화면, 테스트, 리뷰 체크리스트, 관련 이슈가 모두 포함되어 템플릿을 대부분 충족합니다.
Linked Issues check ✅ Passed 목록/빈 상태, /workspaces 라우트, Mock 데이터 레이어, 위젯 조합, 반응형, 체크 스크립트까지 이슈 #8 요구를 충족합니다.
Docstring Coverage ✅ Passed No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
✨ 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/#8/my-workspace

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

@coderabbitai coderabbitai Bot left a comment

Copy link
Copy Markdown

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 4

🤖 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 `@package.json`:
- Around line 10-14: The README script table is out of sync with the
package.json `check` script: `check` now runs `lint:tw` in addition to `lint`,
`typecheck`, and `format:check`. Update the README entry for `npm run check` to
reflect the full current behavior, and make sure the description near the script
table stays consistent with the `check` definition in package.json.

In `@scripts/check-tailwind-spacing.mjs`:
- Around line 34-40: The spacing matcher in check-tailwind-spacing.mjs is too
broad and can flag example class text inside comments as real violations.
Tighten the scan around PATTERN and the line-processing logic so it ignores
comment content first—either strip // and /* */ comments before testing or limit
checks to actual string/class contexts—while preserving detection for real
Tailwind spacing classes.
- Around line 35-40: The RegExp in check-tailwind-spacing.mjs uses a nested
quantifier in the variant-prefix part, which can trigger catastrophic
backtracking on long alpha/hyphen strings. Update the PATTERN definition so the
prefix matching in the regex no longer uses the repeated nested group in the
RegExp construction, and keep the same matching behavior using a single
non-nested repetition in the variant-prefix portion.

In `@src/widgets/workspace-list/ui/WorkspaceCard.tsx`:
- Around line 14-15: WorkspaceCard의 purpose 매핑에서 WORKSPACE_PURPOSE_META[purpose]
결과가 없을 때 meta.icon을 바로 접근하면 런타임 예외가 발생하므로, meta를 WorkspaceCard에서 안전하게 검사하고 기본값
폴백을 추가하세요. WORKSPACE_PURPOSE_META와 PurposeIcon을 사용하는 흐름에서 purpose가 매핑에 없으면 대체
아이콘/메타를 사용하거나 렌더링을 건너뛰도록 처리해, supabase.rpc('get_my_workspaces')로 데이터 소스가 바뀌어도
undefined 접근이 일어나지 않게 수정하세요.
🪄 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: d25e8091-c3b8-4409-987b-887213bb8776

📥 Commits

Reviewing files that changed from the base of the PR and between ccf6b02 and cd57478.

⛔ Files ignored due to path filters (1)
  • public/workspaces/empty-workspace.png is excluded by !**/*.png, !public/**
📒 Files selected for processing (15)
  • package.json
  • scripts/check-tailwind-spacing.mjs
  • src/app/workspaces/page.tsx
  • src/entities/workspace/api/get-my-workspaces.ts
  • src/entities/workspace/config/purpose.ts
  • src/entities/workspace/index.ts
  • src/entities/workspace/model/types.ts
  • src/shared/lib/date.ts
  • src/views/workspaces/index.ts
  • src/views/workspaces/ui/WorkspacesPage.tsx
  • src/widgets/landing/landing-hero/ui/HeroSection.tsx
  • src/widgets/workspace-list/index.ts
  • src/widgets/workspace-list/ui/EmptyWorkspaces.tsx
  • src/widgets/workspace-list/ui/WorkspaceCard.tsx
  • src/widgets/workspace-list/ui/WorkspaceList.tsx

Comment thread package.json
Comment thread scripts/check-tailwind-spacing.mjs
Comment thread scripts/check-tailwind-spacing.mjs
Comment thread src/widgets/workspace-list/ui/WorkspaceCard.tsx Outdated
- 게이트 스크립트: 스캔 전 주석 제거로 주석 내 예시 클래스 오탐 방지
- 게이트 정규식 variant prefix를 유한 반복({0,10})으로 바운딩해 ReDoS 방지
- WorkspaceCard: purpose 미매핑 시 custom으로 폴백
- README 스크립트 표에 lint:tw 반영

@seongjinss555 seongjinss555 left a comment

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다~

- entities/workspace index 충돌 해결: develop(Workspace/mockWorkspace)와 목록 기능(WorkspaceSummary/getMyWorkspaces) 통합
- WorkspacePurpose를 develop 값(team-project/side-project/store-operation)으로 통일하고 중복 타입 제거
- purpose 미매핑 시 중립 폴백(FALLBACK_PURPOSE_META) 적용
- develop work-schedule 파일 prettier 포맷 정리
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

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

2 participants