[feat] 스터디 목록 페이지 추가

frontend/config.ts

@@ -0,0 +1 @@
+export const BASE_URL = 'https://mock.chongchong.com';

frontend/main.tsx

@@ -1,9 +1,11 @@
 import ReactDOM from 'react-dom/client';
+import { QueryClientProvider, QueryClient } from '@tanstack/react-query';
 import { createBrowserRouter, RouterProvider } from 'react-router';
 import { Global } from '@emotion/react';
 import { globalStyles } from './src/styles/global';
 import App from './src/App';
 import NoticeListPage from './src/features/notice/NoticeListPage';
+import { routes as studiesRoutes } from './src/features/studies/routes';
 
 const router = createBrowserRouter([
   {
@@ -14,6 +16,7 @@ const router = createBrowserRouter([
     path: '/studies/:studyId/notices',
     element: <NoticeListPage />,
   },
+  ...studiesRoutes,
 ]);
 
 const root = document.getElementById('root')!;
@@ -27,11 +30,15 @@ async function enableMocking() {
   return worker.start();
 }
 
+const queryClient = new QueryClient();
+
 enableMocking().then(() => {
   ReactDOM.createRoot(root).render(
     <>
-      <Global styles={globalStyles} />
-      <RouterProvider router={router} />
+      <QueryClientProvider client={queryClient}>
+        <Global styles={globalStyles} />
+        <RouterProvider router={router} />
+      </QueryClientProvider>
     </>,
   );
 });

frontend/package.json

@@ -33,7 +33,10 @@
     },
     "transformIgnorePatterns": [
       "/node_modules/.pnpm/(?!(ky|rettime|until-async|outvariant|strict-event-emitter|headers-polyfill|is-node-process|@open-draft\\+[^@]+|@bundled-es-modules\\+[^@]+|@mswjs\\+[^@]+)@)"
-    ]
+    ],
+    "moduleNameMapper": {
+      "\\.(png|svg|jpg|jpeg|gif|woff2?|eot|ttf|otf)$": "<rootDir>/src/test/stub.ts"
+    }
   },
   "msw": {
     "workerDirectory": [

frontend/src/client.ts

@@ -1,7 +1,8 @@
 import ky from 'ky';
+import { BASE_URL } from '../config';
 
 const api = ky.create({
-  baseUrl: 'https://api.github.com/',
+  baseUrl: BASE_URL,
   hooks: {},
 });
 

frontend/src/features/studies/api.ts

@@ -0,0 +1,12 @@
+import api from '../../client';
+import { STUDY_URLS } from './urls';
+import { Study } from './types';
+
+export async function fetchStudies() {
+  try {
+    const response = await api.get(STUDY_URLS.list);
+    return await response.json<{ studies: Study[] }>();
+  } catch {
+    throw new Error('스터디 목록을 불러오는데 실패했습니다.');
+  }
+}

frontend/src/features/studies/components/MyStudies.tsx

@@ -0,0 +1,28 @@
+import { useSuspenseQuery } from '@tanstack/react-query';
+import studyQueries from '../queries';
+import StudyList from './StudyList';
+import EmptyState from '../../../shared/ui/EmptyState';
+import { typography } from '../../../styles/global';
+import { tokens } from '../../../styles/global';
+
+export default function MyStudies() {
+  const { data: studies } = useSuspenseQuery({
+    ...studyQueries.list(),
+    select: (data) => data.studies,
+  });
+
+  return (
+    <section aria-labelledby="my-studies-heading">
+      <h2 id="my-studies-heading" css={typography.subtitle}>
+        내 스터디
+      </h2>
+      {studies.length === 0 ? (
+        <div css={{ margin: `${tokens.spacing[8]} 0` }}>
+          <EmptyState message="아직 스터디가 없어요" />
+        </div>
+      ) : (
+        <StudyList studies={studies} />
+      )}
+    </section>
+  );
+}

frontend/src/features/studies/components/StudyList.tsx

@@ -0,0 +1,49 @@
+import List from '../../../shared/ui/List';
+import ContentCard from '../../../shared/ui/card/ContentCard';
+import Badge from '../../../shared/ui/Badge';
+import noticeIcon from '../../../shared/assets/notice.svg';
+import assignIcon from '../../../shared/assets/assign.svg';
+import rightArrowIcon from '../../../shared/assets/right-arrow.svg';
+import { Study } from '../types';
+
+export default function StudyList({ studies }: { studies: Study[] }) {
+  return (
+    <List>
+      {studies.map((study) => {
+        return (
+          <a href="">
+            <List.Item key={study.id}>
+              <ContentCard>
+                <ContentCard.Badges>
+                  <Badge variant="BrandSolid" size="Small">
+                    {study.role === 'STUDY_LEADER' ? '스터디 리드' : '스터디원'}
+                  </Badge>
+                </ContentCard.Badges>
+
+                <ContentCard.TitleRow>
+                  <ContentCard.Title>{study.title}</ContentCard.Title>
+                  <ContentCard.Trailing>
+                    <img src={rightArrowIcon} alt="" css={{ width: '20px', height: '20px' }} />
+                  </ContentCard.Trailing>
+                </ContentCard.TitleRow>
+
+                <ContentCard.Description>{study.description}</ContentCard.Description>
+
+                <ContentCard.Footer>
+                  <ContentCard.Badge variant="NeutralSolid" size="Small">
+                    <img src={noticeIcon} alt="" css={{ width: '12px', height: '12px' }} />
+                    공지 {study.noticeCount}
+                  </ContentCard.Badge>
+                  <ContentCard.Badge variant="NeutralSolid" size="Small">
+                    <img src={assignIcon} alt="" css={{ width: '12px', height: '12px' }} />
+                    과제 {study.assignmentCount}
+                  </ContentCard.Badge>
+                </ContentCard.Footer>
+              </ContentCard>
+            </List.Item>
+          </a>
+        );
+      })}
+    </List>
+  );
+}

frontend/src/features/studies/mocks/handlers.ts

@@ -1,18 +1,28 @@
 import { http, HttpResponse } from 'msw';
+import { BASE_URL } from '../../../../config';
+import { STUDY_URLS } from '../urls';
 
 export const handlers = [
-  http.get('https://mock.chongchong.com/studies', () => {
+  http.get(`${BASE_URL}${STUDY_URLS.list}`, () => {
     return HttpResponse.json({
-      notifications: [
+      studies: [
         {
-          id: 1,
-          title: '8월 스터디 운영 방식이 바뀝니다',
-          content: '8월부터 스터디 운영 방식을 변경하려고 합니다.',
-          createdAt: '2025-04-16 16:44:10',
-          memberCount: 4,
-          completeCount: 2,
-          remindedAt: '2025-04-16 16:44:10',
-          isComplete: false,
+          id: '1',
+          role: 'STUDY_LEADER',
+          title: '리액트 스터디',
+          description: '매주 화요일 10시에 진행하는 리액트 스터디',
+          memberCount: 3,
+          noticeCount: 2,
+          assignmentCount: 2,
+        },
+        {
+          id: '2',
+          role: 'SOME',
+          title: '우테코 8기 FE 스터디',
+          description: '매주 화요일 저녁 9시, 프론트엔드 CS와 코드 리뷰',
+          memberCount: 5,
+          noticeCount: 2,
+          assignmentCount: 1,
         },
       ],
     });

frontend/src/features/studies/pages/MyStudiesPage.test.tsx

@@ -0,0 +1,68 @@
+import { render, screen } from '@testing-library/react';
+import { createWrapper, mockResponse } from '../../../test/render';
+import { http, HttpResponse } from 'msw';
+import { server } from '../../../mocks/msw-node';
+import MyStudiesPage from './MyStudiesPage';
+import { BASE_URL } from '../../../../config';
+import { STUDY_URLS } from '../urls';
+import { Study } from '../types';
+
+const studies: Study[] = [
+  {
+    id: '1',
+    role: 'STUDY_LEADER',
+    title: '점심메뉴 스터디',
+    description: '매주 진행하는 점심메뉴 정하기',
+    memberCount: 3,
+    noticeCount: 2,
+    assignmentCount: 2,
+  },
+  {
+    id: '2',
+    role: 'SOME',
+    title: '저녁메뉴 스터디',
+    description: '매주 진행하는 저녁메뉴 정하기',
+    memberCount: 5,
+    noticeCount: 1,
+    assignmentCount: 0,
+  },
+];
+
+const STUDIES_URL = `${BASE_URL}${STUDY_URLS.list}`;
+
+test('응답으로 받은 스터디들을 렌더링 한다', async () => {
+  mockResponse(STUDIES_URL, studies);
+
+  render(<MyStudiesPage />, { wrapper: createWrapper() });
+
+  expect(await screen.findAllByRole('listitem')).toHaveLength(studies.length);
+
+  expect(screen.getByText('점심메뉴 스터디')).toBeInTheDocument();
+  expect(screen.getByText('저녁메뉴 스터디')).toBeInTheDocument();
+});
+
+test('스터디 역할에 따라 다른 뱃지를 렌더링 한다', async () => {
+  mockResponse(STUDIES_URL, studies);
+
+  render(<MyStudiesPage />, { wrapper: createWrapper() });
+
+  expect(await screen.findByText('스터디 리드')).toBeInTheDocument();
+  expect(screen.getByText('스터디원')).toBeInTheDocument();
+});
+
+test('스터디 목록 요청이 실패하면 에러 메시지가 렌더링 한다', async () => {
+  server.use(http.get(STUDIES_URL, () => new HttpResponse(null, { status: 500 })));
+
+  render(<MyStudiesPage />, { wrapper: createWrapper() });
+
+  expect(await screen.findByText('스터디 목록을 불러오는데 실패했습니다.')).toBeInTheDocument();
+});
+
+test('참여 중인 스터디가 없으면 비어있는 상태를 렌더링 한다', async () => {
+  mockResponse(STUDIES_URL, []);
+
+  render(<MyStudiesPage />, { wrapper: createWrapper() });
+
+  expect(await screen.findByRole('heading', { name: '내 스터디' })).toBeInTheDocument();
+  expect(screen.queryAllByRole('listitem')).toHaveLength(0);
+});

frontend/src/features/studies/pages/MyStudiesPage.tsx

@@ -0,0 +1,71 @@
+import { Suspense, CSSProperties } from 'react';
+import { ErrorBoundary, getErrorMessage } from 'react-error-boundary';
+import TopHeader from '../../../shared/ui/TopHeader';
+import logo from '../../../shared/assets/icons/header-icon.svg';
+import MyStudies from '../components/MyStudies';
+import Main from '../../../shared/ui/Main';
+import footerIcon from '../../../shared/assets/icons/footer-icon.svg';
+import { tokens } from '../../../styles/global';
+import { typography } from '../../../styles/global';
+import Button from '../../../shared/ui/Button';
+
+const pageStyle = {
+  display: 'flex',
+  flexDirection: 'column',
+  minHeight: '100dvh',
+  background: tokens.bg.default,
+} satisfies CSSProperties;
+
+const actionsStyle = {
+  display: 'flex',
+  gap: tokens.spacing[3],
+  flexDirection: 'column',
+  margin: `${tokens.spacing[3]} 0`,
+} satisfies CSSProperties;
+
+const footerBannerStyle = {
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+  gap: tokens.spacing[1],
+} satisfies CSSProperties;
+
+export default function StudyListPage() {
+  return (
+    <div css={pageStyle}>
+      <TopHeader
+        middle={
+          <div>
+            <img css={{ width: '40px', height: '40px' }} src={logo} alt="" />
+          </div>
+        }
+        right={<a href="#">My</a>}
+      />
+      <Main>
+        <ErrorBoundary fallbackRender={({ error }) => <p>{getErrorMessage(error)}</p>}>
+          <Suspense fallback={<p>loading ...</p>}>
+            <MyStudies />
+          </Suspense>
+        </ErrorBoundary>
+        <div css={actionsStyle}>
+          {/* 진짜 link로 전환하는게 접근성 더 좋음, 스크린 리더의 링크에 안잡힘 */}
+          <Button role="link" variant="brandSolid" size="large">
+            스터디 만들기
+          </Button>
+          <Button role="link" variant="neutralOutline" size="large">
+            스터디 참여하기
+          </Button>
+        </div>
+        <aside css={footerBannerStyle}>
+          <img src={footerIcon} css={{ height: '52px', width: '52px' }} alt="" />
+          <div css={{ display: 'flex', gap: tokens.spacing[1], flexDirection: 'column' }}>
+            <p css={typography.paragraph}>리마인드는 총총이 보낼게요.</p>
+            <p css={{ ...typography.footnote, color: tokens.color.optionSubFontColor55 }}>
+              정해둔 시각에 미확인자, 미제출자에게 알림을 보내요
+            </p>
+          </div>
+        </aside>
+      </Main>
+    </div>
+  );
+}

frontend/src/features/studies/queries.ts

@@ -0,0 +1,14 @@
+import { queryOptions } from '@tanstack/react-query';
+import { fetchStudies } from './api';
+
+const studyQueries = {
+  all: () => ['studies'],
+  lists: () => [...studyQueries.all(), 'list'],
+  list: () =>
+    queryOptions({
+      queryKey: [...studyQueries.lists()],
+      queryFn: () => fetchStudies(),
+    }),
+};
+
+export default studyQueries;

frontend/src/features/studies/routes.tsx

@@ -0,0 +1,9 @@
+import { RouteObject } from 'react-router';
+import MyStudiesPage from './pages/MyStudiesPage';
+
+export const routes: RouteObject[] = [
+  {
+    path: '/studies',
+    element: <MyStudiesPage />,
+  },
+];

frontend/src/features/studies/types.ts

@@ -0,0 +1,11 @@
+type Role = 'STUDY_LEADER' | 'SOME';
+
+export interface Study {
+  id: string;
+  role: Role;
+  title: string;
+  description: string;
+  memberCount: number;
+  noticeCount: number;
+  assignmentCount: number;
+}

frontend/src/features/studies/urls.ts

@@ -0,0 +1,3 @@
+export const STUDY_URLS = {
+  list: '/studies/me',
+};

frontend/src/shared/ui/Badge.tsx

@@ -26,7 +26,7 @@ const variantStyle = {
   },
   NeutralSolid: {
     background: tokens.bg.neutral,
-    color: tokens.text.onBrandStrong,
+    color: tokens.text.muted,
   },
   BrandOutline: {
     background: tokens.bg.default,

frontend/src/shared/ui/Button.tsx

@@ -37,7 +37,7 @@ const variantStyle = {
   neutralOutline: {
     background: tokens.bg.default,
     border: tokens.border.neutral,
-    color: tokens.text.primary,
+    color: tokens.text.brand,
   },
 };