[API] API 명세 변경을 반영한다

src/components/home/CreatePanelModal.tsx

@@ -31,8 +31,8 @@ export function CreatePanelModal({ close }: Props): JSX.Element {
  createPanelMutation.mutate(
  { title, description },
  {
- onSuccess: ({ id }) => {
- navigate(`/panel/${id}`);
+ onSuccess: ({ sid }) => {
+ navigate(`/panel/${sid}`);
  },
  },
  );

src/components/home/DeletePanelModal.tsx

@@ -10,7 +10,7 @@ interface Props {
  panel: Panel;
 }
 export function DeletePanelModal({ close, panel }: Props): JSX.Element {
- const { id, title } = panel;
+ const { sid, title } = panel;
  const deletePanelMutation = useDeletePanelMutation();
 
  return (
@@ -27,7 +27,7 @@ export function DeletePanelModal({ close, panel }: Props): JSX.Element {
  variant="danger"
  type="button"
  onClick={() => {
- deletePanelMutation.mutate(id, {
+ deletePanelMutation.mutate(sid, {
  onSuccess: () => {
  close();
  },

src/components/home/PanelGrid.tsx

@@ -66,7 +66,7 @@ export function PanelGrid({ panelPages }: Props): JSX.Element {
 
  const handlePanelTitleClick = useCallback(
  (panel: Panel) => () => {
- navigate(`/panel/${panel.id}`);
+ navigate(`/panel/${panel.sid}`);
  },
  [navigate],
  );
@@ -89,7 +89,7 @@ export function PanelGrid({ panelPages }: Props): JSX.Element {
  {panelPages.map((page) =>
  page.panels.map((panel) => (
  <PanelItem
- key={panel.id}
+ key={panel.sid}
  panel={panel}
  openActionMenu={handleOpenPanelActionMenu(panel)}
  onPanelTitleClick={handlePanelTitleClick(panel)}

src/components/home/PanelItem.tsx

@@ -20,11 +20,11 @@ export const PanelItem = ({
  openActionMenu,
  onPanelTitleClick,
 }: Props): JSX.Element => {
- const { id, title, createdAt, description } = panel;
+ const { sid, title, createdAt, description } = panel;
 
  return (
  <li
- key={id}
+ key={sid}
  className="flex flex-col gap-6 tracking-tight rounded-md bg-white py-4 px-5 border border-grey-light"
  >
  <div className="flex justify-between items-start">

src/components/home/UpdatePanelModal.tsx

@@ -14,7 +14,7 @@ type Props = CreateOverlayContentProps & {
 };
 
 export function UpdatePanelModal({ close, panel }: Props): JSX.Element {
- const updateMutation = useUpdatePanelMutation(panel.id);
+ const updateMutation = useUpdatePanelMutation(panel.sid);
  const messageRef = useRef<HTMLDivElement | null>(null);
 
  const { inputProps, errors, formProps, hasError } = useForm({

src/components/home/__tests__/DeletePanelModal.test.tsx

@@ -2,6 +2,7 @@ import type { Panel } from '@/lib/api/panel';
 
 import React from 'react';
 
+import { faker } from '@faker-js/faker';
 import { screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -12,10 +13,10 @@ import { DeletePanelModal } from '../DeletePanelModal';
 
 const handleClose = vi.fn();
 const panel: Panel = {
- id: 1,
- author: '[email protected]',
+ sid: faker.datatype.uuid(),
  title: '테스트 패널 제목',
  description: '테스트 패널 설명',
+ authorId: 0,
  createdAt: new Date().toDateString(),
  updatedAt: new Date().toDateString(),
 };

src/components/home/__tests__/PanelGrid.test.tsx

@@ -1,13 +1,11 @@
-import type { GetMyPanelsResult } from '@/lib/api/panel';
-
 import React from 'react';
 
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { PanelGrid } from '@/components/home/PanelGrid';
 import { renderWithQueryClient } from '@/lib/test-utils';
-import { createMockPanel, createMockPanleList } from '@/mocks/data/panel';
+import { createMockPanleList } from '@/mocks/data/panel';
 
 const navigateMockFn = vi.fn();
 vi.mock('react-router-dom', () => ({
@@ -18,13 +16,12 @@ vi.mock('@/hooks/useOverlay', () => ({ useOverlay: vi.fn() }));
 
 describe('PanelGrid', () => {
  it('패널 목록을 렌더링한다', () => {
- const panelPages: GetMyPanelsResult[] = [
- { panels: createMockPanleList(10) },
- ];
+ const panelPage = { panels: createMockPanleList(10), nextPage: -1 };
+ const panelPages = [panelPage];
  renderWithQueryClient(<PanelGrid panelPages={panelPages} />);
 
  expect(
- screen.getAllByText(panelPages[0].panels[0].title)[0],
+ screen.getAllByText(panelPage.panels[0].title)[0],
  ).toBeInTheDocument();
  });
 
@@ -35,13 +32,14 @@ describe('PanelGrid', () => {
  });
 
  it('패널 제목을 누르면 해당 아이디의 패널 페이지로 이동한다', async () => {
- const panel = createMockPanel();
- const panelPages: GetMyPanelsResult[] = [{ panels: [panel] }];
+ const panelPage = { panels: createMockPanleList(10), nextPage: -1 };
+ const panelPages = [panelPage];
  renderWithQueryClient(<PanelGrid panelPages={panelPages} />);
 
+ const panel = panelPage.panels[0];
  const title = screen.getByText(panel.title);
  await userEvent.click(title);
 
- expect(navigateMockFn).toHaveBeenCalledWith(`/panel/${panel.id}`);
+ expect(navigateMockFn).toHaveBeenCalledWith(`/panel/${panel.sid}`);
  });
 });

src/components/home/__tests__/PanelItem.test.tsx

@@ -2,16 +2,17 @@ import type { Panel } from '@/lib/api/panel';
 
 import React from 'react';
 
+import { faker } from '@faker-js/faker';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { PanelItem } from '@/components/home/PanelItem';
 
 const panel: Panel = {
- id: 1,
- author: '[email protected]',
+ sid: faker.datatype.uuid(),
  title: '테스트 패널 제목',
  description: '테스트 패널 설명',
+ authorId: 0,
  createdAt: new Date().toDateString(),
  updatedAt: new Date().toDateString(),
 };

src/components/home/__tests__/UpdatePanelModal.test.tsx

@@ -3,6 +3,7 @@ import type * as Vi from 'vitest';
 
 import React from 'react';
 
+import { faker } from '@faker-js/faker';
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
@@ -19,10 +20,10 @@ vi.mock('@/lib/validator', () => ({
 const handleClose = vi.fn();
 
 const panel: Panel = {
- id: 1,
- author: '[email protected]',
+ sid: faker.datatype.uuid(),
  title: '테스트 패널 제목',
  description: '테스트 패널 설명',
+ authorId: 0,
  createdAt: new Date().toDateString(),
  updatedAt: new Date().toDateString(),
 };
@@ -77,7 +78,7 @@ describe('UpdatePanelModal', () => {
 
  await userEvent.click(submitButton);
 
- expect(spyOnUpdatePanel).toHaveBeenCalledWith(panel.id, {
+ expect(spyOnUpdatePanel).toHaveBeenCalledWith(panel.sid, {
  title: '유효한 패널 제목',
  description: '유효한 패널 설명',
  });

src/components/panel/CreateQuestionModal.tsx

@@ -9,7 +9,7 @@ import { Button } from '@/components/system/Button';
 import { useCreateQuestionMutation } from '@/hooks/queries/question';
 
 interface Props {
- panelId: Panel['id'];
+ panelId: Panel['sid'];
  close: () => void;
 }
 export function CreateQuestionModal({ panelId, close }: Props): JSX.Element {

src/components/panel/InfiniteQuestionList.tsx

@@ -26,7 +26,7 @@ import { IntersectionArea } from '../system/IntersectionArea';
 import { QuestionList } from './QuestionList';
 
 interface Props {
- panelId: Panel['id'];
+ panelId: Panel['sid'];
 }
 type Sort = GetQuestionsParams['sort'];
 export function InfiniteQuestionList({ panelId }: Props): JSX.Element {

src/components/panel/PanelSidebar.tsx

@@ -9,14 +9,13 @@ interface Props {
  panel: Panel;
 }
 export function PanelSidebar({ panel }: Props): JSX.Element {
- const { id, title, author, createdAt, description } = panel;
+ const { sid, title, createdAt, description } = panel;
  return (
  <div className="flex flex-col justify-start w-[280px] divide-y divide-grey-light">
  <div className="flex gap-4 p-5">
  <span className="w-1 bg-primary" />
  <div className="flex flex-col justify-start items-start">
  <h2 className="font-medium">{title}</h2>
- <div className="text-grey-dark text-sm">{author}</div>
  <div className="text-grey-dark text-sm">
  {formatToKRLocaleString(createdAt)}
  </div>
@@ -29,7 +28,7 @@ export function PanelSidebar({ panel }: Props): JSX.Element {
  type="button"
  onClick={() => {
  window.navigator.clipboard.writeText(
- `${window.location.origin}/panel/${id}`,
+ `${window.location.origin}/panel/${sid}`,
  );
  }}
  >

src/components/panel/__tests__/CreateQuestionModal.test.tsx

@@ -2,14 +2,15 @@ import type { Panel } from '@/lib/api/panel';
 
 import React from 'react';
 
+import { faker } from '@faker-js/faker';
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import { CreateQuestionModal } from '@/components/panel/CreateQuestionModal';
 import * as questionApis from '@/lib/api/question';
 import { renderWithQueryClient } from '@/lib/test-utils';
 
-const panelId: Panel['id'] = -1;
+const panelId: Panel['sid'] = faker.datatype.uuid();
 const handleClose = vi.fn();
 describe('CreatePanelModal', () => {
  it('사용자가 입력하는 글자수를 보여준다', () => {

src/components/panel/__tests__/InfiniteQuestionList.test.tsx

@@ -4,6 +4,7 @@ import type { QueryClient } from '@tanstack/react-query';
 
 import React from 'react';
 
+import { faker } from '@faker-js/faker';
 import { fireEvent, screen, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { rest } from 'msw';
@@ -16,7 +17,7 @@ import { delay } from '@/lib/test-utils/delay';
 import { createMockQuestion } from '@/mocks/data/question';
 import { server } from '@/mocks/server';
 
-const panelId: Panel['id'] = 0;
+const panelId: Panel['sid'] = faker.datatype.uuid();
 
 describe('InfiniteQuestionList', () => {
  describe('질문 목록 렌더링', () => {

src/components/panel/__tests__/PanelSidebar.test.tsx

@@ -17,7 +17,6 @@ describe('PanelSidebar', () => {
  render(<PanelSidebar panel={panel} />);
 
  expect(screen.getByText(panel.title)).toBeInTheDocument();
- expect(screen.getByText(panel.author)).toBeInTheDocument();
  expect(
  screen.getByText(formatToKRLocaleString(panel.createdAt)),
  ).toBeInTheDocument();
@@ -37,7 +36,7 @@ describe('PanelSidebar', () => {
 
  await userEvent.click(copyUrlButton);
  expect(window.navigator.clipboard.writeText).toHaveBeenCalledWith(
- `${window.location.origin}/panel/${panel.id}`,
+ `${window.location.origin}/panel/${panel.sid}`,
  );
  });
 });

src/hooks/queries/__tests__/question.test.tsx

@@ -5,6 +5,7 @@ import type {
  GetQuestionsResult,
 } from '@/lib/api/question';
 
+import { faker } from '@faker-js/faker';
 import { act, renderHook, waitFor } from '@testing-library/react';
 import { rest } from 'msw';
 
@@ -20,7 +21,7 @@ import { server } from '@/mocks/server';
 
 describe('question API queries', () => {
  describe('useQuestionsInfiniteQuery', () => {
- const panelId: Panel['id'] = -1;
+ const panelId: Panel['sid'] = faker.datatype.uuid();
 
  it('getQuestions가 nextPage를 -1로 반환하면 hasNextPage는 false이다', async () => {
  overrideGetQuestionsWith200({ questions: [], nextPage: -1 });
@@ -64,7 +65,7 @@ describe('question API queries', () => {
 
  describe('createQuestionMutation', () => {
  it('mutate를 호출하면 createQuestion 함수를 호출한다', async () => {
- const panelId: Panel['id'] = -1;
+ const panelId: Panel['sid'] = faker.datatype.uuid();
  const body: questionApis.CreateQuestionBody = {
  content: '안녕하세요',
  };

src/hooks/queries/active-info.ts

@@ -22,7 +22,7 @@ export type ActiveInfoDetailQueryOptions =
  NonNullableKeys<_ActiveInfoDetailQueryOptions>;
 
 export const activeInfoDetailQuery = (
- panelId: Panel['id'],
+ panelId: Panel['sid'],
 ): ActiveInfoDetailQueryOptions => ({
  queryKey: queryKey.activeInfo.detail(panelId),
  queryFn: async () => getMyActiveInfo(panelId).then((res) => res.result),

src/hooks/queries/auth.ts

@@ -2,11 +2,11 @@ import type {
  LogInBody,
  LogInResult,
  SignUpBody,
- SignUpResult,
  SignUpError,
  LoginError,
- LogoutResult,
  LogoutError,
+ SignUpResponse,
+ LogoutResponse,
 } from '@/lib/api/auth';
 import type { ApiError } from '@/lib/apiClient';
 import type { UseMutationResult } from '@tanstack/react-query';
@@ -17,13 +17,13 @@ import { login, logout, signUp } from '@/lib/api/auth';
 import { queryKey } from '@/lib/queryKey';
 
 export const useSignUpMutation = (): UseMutationResult<
- SignUpResult,
+ SignUpResponse,
  ApiError<SignUpError | undefined> | SyntaxError,
  SignUpBody
 > => {
  const key = queryKey.auth.signup();
  const mutation = useMutation<
- SignUpResult,
+ SignUpResponse,
  ApiError<SignUpError | undefined> | SyntaxError,
  SignUpBody
  >(key, signUp);
@@ -45,13 +45,13 @@ export const useLoginMutation = (): UseMutationResult<
 };
 
 export const useLogoutMutation = (): UseMutationResult<
- LogoutResult,
+ LogoutResponse,
  ApiError<LogoutError | undefined> | SyntaxError,
  void
 > => {
  const key = queryKey.auth.logout();
  const mutation = useMutation<
- LogoutResult,
+ LogoutResponse,
  ApiError<LogoutError | undefined> | SyntaxError
  >(key, logout);