[Feat] 그룹 리스트 컴포넌트 UI 구현 (#138)

Author: jeongyou

.github/workflows/chromatic.yml

@@ -0,0 +1,36 @@
+name: Chromatic
+
+on:
+  push:
+    branches: ['main']
+  pull_request:
+    branches: ['**']
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v4
+        with:
+          version: 10.28.2
+          run_install: false
+
+      - name: Setup Node
+        uses: actions/setup-node@v4
+        with:
+          node-version: 22.20.0
+          cache: pnpm
+
+      - name: Install
+        run: pnpm install --frozen-lockfile
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

CLAUDE.md

@@ -2,19 +2,21 @@
 
 This file provides guidance to Claude Code (claude.ai/code) when working with code in this repository.
 
+@AGENTS.md
+
 ---
 
 ## Commands
 
 ```bash
-npm run dev          # 개발 서버
-npm run build        # 프로덕션 빌드
-npm run lint         # ESLint 검사
-npm run typecheck    # TypeScript 타입 검사 (tsc --noEmit)
-npm run storybook    # Storybook 실행 (port 6006)
+pnpm dev          # 개발 서버
+pnpm build        # 프로덕션 빌드
+pnpm lint         # ESLint 검사
+pnpm typecheck    # TypeScript 타입 검사 (tsc --noEmit)
+pnpm storybook    # Storybook 실행 (port 6006)
 ```
 
-테스트는 Storybook Vitest 애드온으로 실행하며, 별도의 `npm test` 명령은 없다.
+테스트는 Storybook Vitest 애드온으로 실행하며, 별도의 `pnpm test` 명령은 없다.
 
 ---
 
@@ -50,13 +52,15 @@ src/
 - `/ztpi-test`, `/ztpi/[ztpiTestId]` → ZTPI 성격 테스트
 - `/calendar` → 캘린더
 - `/reflection`, `/reflection/[reflectionId]` → 회고
+- `/groups` → 그룹 회고 (그룹 목록, 향후 `/groups/[groupId]` 상세 확장 가능)
 - `/characters` → 캐릭터 선택
 - `/profile`, `/profile/nickname` → 프로필
 - `/api/proxy/[...path]` → 개발용 API 프록시
 
 ### 상태 관리
 
 - **서버 상태**: TanStack React Query v5 — staleTime 기본 1분, DevTools는 개발 모드에서만 활성화
+- **전역 상태**: Zustand v5
 - **로컬 상태**: React 훅 (`useState`, `useRef`)
 - 쿼리 훅은 `src/components/features/[feature]/queries/` 에 위치
 

app/groups/page.tsx

@@ -0,0 +1,43 @@
+// TODO: 친구 리스트 컴포넌트와 통합 필요
+
+'use client';
+
+import { useState } from 'react';
+
+import GroupList from '@/src/components/features/groups/GroupList/GroupList';
+import GroupTab, {
+  type TabType,
+} from '@/src/components/features/groups/GroupTab/GroupTab';
+
+// TODO: 실제 API 연동 필요
+const MOCK_FRIENDS_GROUPS = [
+  { id: 1, name: '친구 모임', type: 'friend' as const, image: '' },
+  { id: 2, name: '어떤 모임', type: 'friend' as const, image: '' },
+  { id: 3, name: '친구 어떤 모임', type: 'friend' as const, image: '' },
+];
+
+const MOCK_CHARACTERS_GROUPS = [
+  { id: 1, name: '캐릭터 모임', type: 'character' as const, image: '' },
+  { id: 2, name: '어떤 모임', type: 'character' as const, image: '' },
+  { id: 3, name: '캐릭터 어떤 모임', type: 'character' as const, image: '' },
+];
+
+const GroupsPage = () => {
+  const [activeTab, setActiveTab] = useState<TabType>('friend');
+  const [selectedId, setSelectedId] = useState(MOCK_FRIENDS_GROUPS[0]?.id ?? 0);
+
+  return (
+    <div>
+      <GroupTab activeTab={activeTab} onTabChange={setActiveTab} />
+      <GroupList
+        groups={
+          activeTab === 'friend' ? MOCK_FRIENDS_GROUPS : MOCK_CHARACTERS_GROUPS
+        }
+        selectedId={selectedId}
+        onSelect={setSelectedId}
+      />
+    </div>
+  );
+};
+
+export default GroupsPage;

package.json

@@ -11,7 +11,8 @@
     "typecheck": "tsc --noEmit",
     "prepare": "husky",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "chromatic": "npx chromatic --project-token=$CHROMATIC_PROJECT_TOKEN"
   },
   "lint-staged": {
     "*.{js,ts,tsx,jsx}": [
@@ -56,6 +57,7 @@
     "@types/react-dom": "^19",
     "@vitest/browser-playwright": "4.0.18",
     "babel-plugin-react-compiler": "1.0.0",
+    "chromatic": "^16.10.0",
     "eslint": "^9",
     "eslint-config-next": "16.1.4",
     "eslint-config-prettier": "^10.1.8",

pnpm-lock.yaml

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/nextjs-vite';
+import { useState } from 'react';
+
+import GroupList from './GroupList';
+
+const meta = {
+  title: 'Features/Groups/GroupList',
+  component: GroupList,
+  parameters: {
+    layout: 'fullscreen',
+    viewport: {
+      defaultViewport: 'mobile1',
+    },
+  },
+  tags: ['autodocs'],
+} satisfies Meta<typeof GroupList>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const groups = [
+  { id: 1, name: '친구 많은 모임', type: 'friend' as const, image: '' },
+  { id: 2, name: '어떤 모임', type: 'friend' as const, image: '' },
+  { id: 3, name: '친구 모임', type: 'friend' as const, image: '' },
+  { id: 4, name: '어떤 모임', type: 'friend' as const, image: '' },
+  { id: 5, name: '친구 모임', type: 'friend' as const, image: '' },
+  { id: 6, name: '어떤 모임', type: 'friend' as const, image: '' },
+  { id: 7, name: '친구 모임', type: 'friend' as const, image: '' },
+  { id: 8, name: '어떤 모임', type: 'friend' as const, image: '' },
+  { id: 9, name: '친구 모임', type: 'friend' as const, image: '' },
+  { id: 10, name: '어떤 모임', type: 'friend' as const, image: '' },
+];
+
+export const Default: Story = {
+  render: () => {
+    const [selectedId, setSelectedId] = useState(1);
+    return (
+      <GroupList
+        groups={groups}
+        selectedId={selectedId}
+        onSelect={setSelectedId}
+      />
+    );
+  },
+  args: { groups },
+};