[FE] dev-fe 에서 dev 를 머지한다. (#912)

woowacourse-teams · Oct 24, 2024 · 0054304 · 0054304
2 parents 9f606ea + cdd6d81
commit 0054304
Show file tree

Hide file tree

Showing 87 changed files with 575 additions and 318 deletions.
diff --git a/frontend/playwright.api.config.ts b/frontend/playwright.api.config.ts
@@ -19,7 +19,7 @@ export default defineConfig({
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  workers: process.env.CI ? 4 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
@@ -41,11 +41,11 @@ export default defineConfig({
       dependencies: ['setup'],
     },
 
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'], storageState: 'playwright/.auth/user.json' },
-      dependencies: ['setup'],
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'], storageState: 'playwright/.auth/user.json' },
+    //   dependencies: ['setup'],
+    // },
 
     {
       name: 'webkit',

diff --git a/frontend/playwright.mock.config.ts b/frontend/playwright.mock.config.ts
@@ -19,7 +19,7 @@ export default defineConfig({
   /* Retry on CI only */
   retries: process.env.CI ? 2 : 0,
   /* Opt out of parallel tests on CI. */
-  workers: process.env.CI ? 1 : undefined,
+  workers: process.env.CI ? 4 : undefined,
   /* Reporter to use. See https://playwright.dev/docs/test-reporters */
   reporter: 'html',
   /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
@@ -38,10 +38,10 @@ export default defineConfig({
       use: { ...devices['Desktop Chrome'] },
     },
 
-    {
-      name: 'firefox',
-      use: { ...devices['Desktop Firefox'] },
-    },
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
 
     {
       name: 'webkit',

diff --git a/frontend/playwright/tests/api/auth.setup.ts b/frontend/playwright/tests/api/auth.setup.ts
@@ -1,16 +1,18 @@
 import { test as setup } from '@playwright/test';
 import path from 'path';
 
+import { ROUTE_PATH } from '@/constants/routePath';
+
 const authFile = path.join(__dirname, '../../../playwright/.auth/user.json');
 
 setup('authenticate', async ({ page }) => {
   const username = process.env.EMAIL || '';
   const password = process.env.PASSWORD || '';
 
-  await page.goto('/sign-in');
+  await page.goto(ROUTE_PATH.signIn);
   await page.locator('input[name="email"]').fill(username);
   await page.locator('input[name="password"]').fill(password);
   await page.getByRole('button', { name: '로그인 하기' }).click();
-  await page.waitForURL('/home');
+  await page.waitForURL(ROUTE_PATH.home);
   await page.context().storageState({ path: authFile });
 });
diff --git a/frontend/playwright/tests/api/postNewChecklist.spec.ts b/frontend/playwright/tests/api/postNewChecklist.spec.ts
@@ -1,9 +1,11 @@
 import { expect, test } from '@playwright/test';
 
+import { ROUTE_PATH } from '@/constants/routePath';
+
 import { DefaultChecklistTabsNames, FirstCategoryQuestion } from '../constants/constants';
 
 test('체크리스트가 인풋을 채우고 제출할 수 있다.', async ({ page }) => {
-  await page.goto('/checklist/new');
+  await page.goto(ROUTE_PATH.checklistNew);
   const tabs = page.locator('.tab');
   const roomInfoTab = tabs.nth(0);
 

diff --git a/frontend/playwright/tests/api/renderTab.spec.ts b/frontend/playwright/tests/api/renderTab.spec.ts
@@ -1,5 +1,7 @@
 import test, { expect } from '@playwright/test';
 
+import { ROUTE_PATH } from '@/constants/routePath';
+
 import {
   DefaultChecklistTabsNames,
   DefaultQuestionSelectTabsNames,
@@ -8,7 +10,7 @@ import {
 } from '../constants/constants';
 
 test('체크리스트 생성 페이지에 들어가면 탭과 질문들이 잘 렌더링된다.', async ({ page }) => {
-  await page.goto('/checklist/new');
+  await page.goto(ROUTE_PATH.checklistNew);
   const tabs = page.locator('.tab');
   await expect(tabs).toHaveCount(6, { timeout: 3000 });
 
@@ -37,7 +39,7 @@ test('체크리스트 질문 선택 페이지에 들어가면 탭과 질문들
 });
 
 test('체크리스트 편집 페이지에 들어가면 탭과 질문들이 잘 렌더링된다.', async ({ page }) => {
-  await page.goto('/checklist');
+  await page.goto(ROUTE_PATH.checklistList);
   await page.getByTestId('checklist-card').nth(0).click();
   const checklistEditButton = page.locator('button[id="checklistEditButton"]');
   await checklistEditButton.click();

diff --git a/frontend/playwright/tests/mock/postNewChecklist.spec.ts b/frontend/playwright/tests/mock/postNewChecklist.spec.ts
@@ -1,8 +1,10 @@
 import { test } from '@playwright/test';
 
+import { ROUTE_PATH } from '@/constants/routePath';
+
 test('빈 체크리스트를 제출할 수 있다.', async ({ page }) => {
-  await page.goto('/checklist/new');
+  await page.goto(ROUTE_PATH.checklistNew);
   await page.getByRole('button', { name: '저장' }).click();
   await page.getByRole('button', { name: '체크리스트 저장하기' }).click();
-  await page.waitForURL('/checklist');
+  await page.waitForURL(ROUTE_PATH.checklistList);
 });
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -9,19 +9,19 @@
     <meta property="og:type" content="website" />
     <meta property="og:url" content="https://bang-ggood.com" />
     <meta property="og:title" content="방끗 - 방 구하기 끝 그래서 방끗!" />
-    <meta property="og:image" content="https://bang-ggood.com/images/bang-ggood-thumbnail.png" />
+    <meta property="og:image" content="https://bang-ggood.com/static/images/bang-ggood-thumbnail.png" />
     <meta
       property="og:description"
       content="자취 초보를 위한 방 보러 다닐 때 꼭 필요한 체크리스트! 내 방 찾기, 이제 걱정 없이 준비하세요."
     />
     <meta property="og:site_name" content="방끗" />
     <meta property="og:locale" content="ko-KOR" />
     <!-- Preload -->
-    <link href="../src/assets/fonts/SUITE-Variable.woff2" rel="preload" as="font" type="font/woff2" />
-    <link href="../src/assets/images/category-sprite.webp" rel="preload" as="image" />
-    <link href="../src/assets/images/checkingPageScreen.webp" rel="preload" as="image" />
-    <link href="../src/assets/images/customPageScreen.webp" rel="preload" as="image" />
-    <link href="../src/assets/images/mainPageScreen.webp" rel="preload" as="image" />
+    <link href="https://bang-ggood.com/static/fonts/SUITE-Variable.woff2" rel="preload" as="font" type="font/woff2" />
+    <link href="https://bang-ggood.com/static/images/category-sprite.webp" rel="preload" as="image" />
+    <link href="https://bang-ggood.com/static/images/checkingPageScreen.webp" rel="preload" as="image" />
+    <link href="https://bang-ggood.com/static/images/customPageScreen.webp" rel="preload" as="image" />
+    <link href="https://bang-ggood.com/static/images/mainPageScreen.webp" rel="preload" as="image" />
     <base href="/" />
   </head>
   <body>

diff --git a/frontend/src/apis/checklist.ts b/frontend/src/apis/checklist.ts
@@ -18,13 +18,14 @@ export const getChecklistAllQuestions = async () => {
 
 export const getChecklistDetail = async (id: number) => {
   const response = await fetcher.get({ url: BASE_URL + ENDPOINT.CHECKLIST_ID_V1(id) });
-  const data = await response.json();
-  return data as ChecklistInfo;
+  const data = (await response.json()) as ChecklistInfo;
+  data.room = Object.fromEntries(Object.entries(data.room).filter(([, value]) => value !== null));
+  return data;
 };
 
 export const getChecklists = async (isLikeFiltered: boolean = false) => {
   const response = await fetcher.get({
-    url: BASE_URL + (isLikeFiltered ? ENDPOINT.CHECKLISTS_LIKE : ENDPOINT.CHECKLISTS),
+    url: BASE_URL + (isLikeFiltered ? ENDPOINT.CHECKLISTS_LIKE_V1 : ENDPOINT.CHECKLISTS_V1),
   });
   const data = await response.json();
   return data.checklists.map(mapObjNullToUndefined).slice(0, 10);
@@ -40,7 +41,7 @@ export const postChecklist = async (checklist: ChecklistPostForm) => {
 export const putChecklist = async (id: number, checklist: ChecklistPostForm) => {
   const mappedRoomInfo = roomInfoApiMapper(checklist.room);
   const mappedChecklist = { ...checklist, room: mappedRoomInfo };
-  const response = await fetcher.put({ url: BASE_URL + ENDPOINT.CHECKLIST_ID(id), body: mappedChecklist });
+  const response = await fetcher.put({ url: BASE_URL + ENDPOINT.CHECKLIST_ID_V1(id), body: mappedChecklist });
   return response;
 };
 

diff --git a/frontend/src/apis/fetcher.ts b/frontend/src/apis/fetcher.ts
@@ -1,3 +1,5 @@
+import { captureException } from '@sentry/react';
+
 import APIError from '@/apis/error/APIError';
 import { deleteToken, postReissueAccessToken } from '@/apis/user';
 import { API_ERROR_MESSAGE } from '@/constants/messages/apiErrorMessage';
@@ -38,7 +40,9 @@ const handleError = async (response: Response, requestProps: RequestProps) => {
     return handleUnauthorizedError(response, requestProps, errorCode);
   }
 
-  throw new APIError(response.status, errorCode);
+  const apiError = new APIError(response.status, errorCode);
+  captureException(apiError);
+  throw apiError;
 };
 
 const handleUnauthorizedError = async (response: Response, requestProps: RequestProps, errorCode: string) => {

diff --git a/frontend/src/apis/url.ts b/frontend/src/apis/url.ts
@@ -7,6 +7,7 @@ export const ENDPOINT = {
   // checklist
   CHECKLISTS: '/checklists',
   CHECKLISTS_LIKE: '/checklists/like',
+  CHECKLISTS_LIKE_V1: '/v1/checklists/like',
   CHECKLISTS_V1: '/v1/checklists',
   CHECKLIST_QUESTION: '/checklists/questions',
   CHECKLIST_ALL_QUESTION: '/custom-checklist/all',

diff --git a/frontend/src/assets/assets.tsx b/frontend/src/assets/assets.tsx
@@ -16,7 +16,6 @@ import Retry from '@/assets/icons/common/retry.svg';
 import SmallCheck from '@/assets/icons/common/small-check.svg';
 import PlusBlack from '@/assets/icons/plusMinus/plus-black.svg';
 import PlusWhite from '@/assets/icons/plusMinus/plus-white.svg';
-
 // room
 import Building from '@/assets/icons/room/building.svg';
 import Calendar from '@/assets/icons/room/calendar.svg';

diff --git a/frontend/src/assets/icons/kakao/kakao-logo.svg b/frontend/src/assets/icons/kakao/kakao-logo.svg
diff --git a/frontend/src/assets/icons/map/search.svg b/frontend/src/assets/icons/map/search.svg
diff --git a/frontend/src/components/ArticleList/ArticleCard.tsx b/frontend/src/components/ArticleList/ArticleCard.tsx
@@ -47,6 +47,10 @@ const S = {
     background-color: ${({ theme }) => theme.palette.white};
     ${boxShadow};
     cursor: pointer;
+
+    :hover {
+      background-color: ${({ theme }) => theme.palette.grey200};
+    }
   `,
   Keyword: styled.span<{ bgColor: string }>`
     padding: 0.4rem 0.8rem;

diff --git a/frontend/src/components/ChecklistDetail/ChecklistDetailSection.tsx b/frontend/src/components/ChecklistDetail/ChecklistDetailSection.tsx
@@ -20,12 +20,11 @@ const ChecklistDetailSection = () => {
   return (
     <>
       <RoomInfoSection
-        checklist={checklist}
         room={checklist?.room}
         options={checklist?.options}
         isLiked={checklist?.isLiked}
         checklistId={Number(checklistId)}
-        nearSubways={checklist.stations.stations}
+        nearSubways={checklist?.room.address === '' ? [] : checklist?.stations}
       />
       <ChecklistAnswerSection categories={checklist?.categories} />
       <MemoSection memo={checklist?.room?.memo} />