[FE] 🔖 QA 과정에서 발생한 버그 해결

frontend/.eslintrc.cjs

@@ -77,17 +77,11 @@ module.exports = {
             group: 'internal',
             position: 'after',
           },
-          {
-            pattern: '@/validations/**',
-            group: 'internal',
-            position: 'after',
-          },
           {
             pattern: '@/components/**',
             group: 'internal',
             position: 'after',
           },
-
           {
             pattern: '@/common/**',
             group: 'internal',
@@ -118,6 +112,11 @@ module.exports = {
             group: 'internal',
             position: 'after',
           },
+          {
+            pattern: '@/validations/**',
+            group: 'internal',
+            position: 'after',
+          },
           {
             pattern: '@/types/**',
             group: 'internal',

frontend/.stylelintrc

@@ -59,6 +59,7 @@
           "padding-bottom",
           "padding-left",
           "border",
+          "border-color",
           "border-radius"
         ]
       },

frontend/src/App.tsx

@@ -8,13 +8,17 @@ const PairRoom = lazy(() => import('@/pages/PairRoom/PairRoom'));
 
 import Callback from '@/pages/Callback/Callback';
 import CoduoDocs from '@/pages/CoduoDocs/CoduoDocs';
+import CompletedPairRoom from '@/pages/CompletedPairRoom/CompletedPairRoom';
 import Error from '@/pages/Error/Error';
 import Landing from '@/pages/Landing/Landing';
 import Layout from '@/pages/Layout';
 import Loading from '@/pages/Loading/Loading';
 import Main from '@/pages/Main/Main';
 import MyPage from '@/pages/MyPage/MyPage';
 import PairRoomOnboarding from '@/pages/PairRoomOnboarding/PairRoomOnboarding';
+import PrivateRoutes from '@/pages/PrivateRoutes';
+import RetrospectForm from '@/pages/RetrospectForm/RetrospectForm';
+import RetrospectView from '@/pages/RetrospectView/RetrospectView';
 import SignUp from '@/pages/SignUp/SignUp';
 
 import HowToPair from '@/components/Landing/HowToPair/HowToPair';
@@ -71,17 +75,39 @@ const App = () => {
           path: 'onboarding',
           element: (
             <Suspense fallback={<Loading />}>
-              <PairRoomOnboarding />{' '}
+              <PairRoomOnboarding />
             </Suspense>
           ),
         },
         {
-          path: 'room/:accessCode',
-          element: (
-            <Suspense fallback={<Loading />}>
-              <PairRoom />
-            </Suspense>
-          ),
+          path: 'room',
+          element: <PrivateRoutes />,
+          children: [
+            {
+              path: ':accessCode',
+              element: (
+                <Suspense fallback={<Loading />}>
+                  <PairRoom />
+                </Suspense>
+              ),
+            },
+            {
+              path: ':accessCode/completed',
+              element: (
+                <Suspense fallback={<Loading />}>
+                  <CompletedPairRoom />
+                </Suspense>
+              ),
+            },
+            {
+              path: ':accessCode/retrospect',
+              element: <RetrospectView />,
+            },
+            {
+              path: ':accessCode/retrospectForm',
+              element: <RetrospectForm />,
+            },
+          ],
         },
         {
           path: 'sign-up',
@@ -99,6 +125,7 @@ const App = () => {
           path: 'my-page',
           element: <MyPage />,
         },
+
         {
           path: 'error',
           element: <Error />,

frontend/src/apis/member.ts

@@ -21,6 +21,22 @@ export const getMember = async (): Promise<{ username: string }> => {
   return response.json();
 };
 
+export const getMemberName = async (userId: string): Promise<{ memberName: string }> => {
+  const response = await fetcher.get({
+    url: `${API_URL}/member/exists?user_id=${userId}`,
+    errorMessage: ERROR_MESSAGES.GET_MEMBER,
+  });
+
+  return response.json();
+};
+
+export const deleteMember = async () => {
+  await fetcher.delete({
+    url: `${API_URL}/member`,
+    errorMessage: ERROR_MESSAGES.DELETE_MEMBER,
+  });
+};
+
 interface GetMyPairRoomsResponse {
   id: number;
   status: PairRoomStatus;
@@ -37,3 +53,39 @@ export const getMyPairRooms = async (): Promise<GetMyPairRoomsResponse[]> => {
 
   return response.json();
 };
+
+interface GetUserIsInPairRoomRequest {
+  accessCode: string;
+}
+
+interface GetUserIsInPairRoomResponse {
+  exists: boolean;
+}
+
+export const getUserIsInPairRoom = async ({
+  accessCode,
+}: GetUserIsInPairRoomRequest): Promise<GetUserIsInPairRoomResponse> => {
+  const response = await fetcher.get({
+    url: `${API_URL}/member/${accessCode}/exists`,
+    errorMessage: ERROR_MESSAGES.GET_USER_IS_IN_PAIR_ROOM,
+  });
+
+  return await response.json();
+};
+
+interface GetUserRetrospectExistsRequest {
+  accessCode: string;
+}
+interface GetUserRetrospectExistsResponse {
+  existRetrospect: boolean;
+}
+export const getUserRetrospectExists = async ({
+  accessCode,
+}: GetUserRetrospectExistsRequest): Promise<GetUserRetrospectExistsResponse> => {
+  const response = await fetcher.get({
+    url: `${API_URL}/member/retrospect/${accessCode}/exists`,
+    errorMessage: ERROR_MESSAGES.GET_USER_RETROSPECT_EXISTS,
+  });
+
+  return await response.json();
+};

frontend/src/apis/pairRoom.ts

@@ -8,8 +8,9 @@ export type PairRoomStatus = 'IN_PROGRESS' | 'COMPLETED';
 
 export interface GetPairRoomResponse {
   id: number;
-  navigator: string;
   driver: string;
+  navigator: string;
+  missionUrl: string;
   status: PairRoomStatus;
 }
 
@@ -32,16 +33,32 @@ export const getPairRoomExists = async (accessCode: string): Promise<{ exists: b
 };
 
 interface AddPairRoomRequest {
+  pairId: string;
   driver: string;
   navigator: string;
+  missionUrl: string;
   timerDuration: number;
   timerRemainingTime: number;
 }
 
-export const addPairRoom = async ({ driver, navigator, timerDuration, timerRemainingTime }: AddPairRoomRequest) => {
+export const addPairRoom = async ({
+  pairId,
+  driver,
+  navigator,
+  missionUrl,
+  timerDuration,
+  timerRemainingTime,
+}: AddPairRoomRequest) => {
   const response = await fetcher.post({
     url: `${API_URL}/pair-room`,
-    body: JSON.stringify({ driver, navigator, timerDuration, timerRemainingTime, status: 'IN_PROGRESS' }),
+    body: JSON.stringify({
+      pairId: pairId || null,
+      driver,
+      navigator,
+      missionUrl,
+      timerDuration,
+      timerRemainingTime,
+    }),
     errorMessage: '',
   });
 
@@ -60,3 +77,22 @@ export const updatePairRole = async ({ accessCode }: UpdatePairRoleRequest) => {
     errorMessage: '',
   });
 };
+
+interface UpdatePairRoomStatusRequest {
+  accessCode: string;
+}
+
+export const updatePairRoomStatus = async ({ accessCode }: UpdatePairRoomStatusRequest) => {
+  await fetcher.patch({
+    url: `${API_URL}/pair-room/${accessCode}/status`,
+    errorMessage: ERROR_MESSAGES.UPDATE_PAIR_ROOM_STATUS,
+    body: JSON.stringify({ status: 'COMPLETED' }),
+  });
+};
+
+export const deletePairRoom = async (accessCode: string) => {
+  await fetcher.delete({
+    url: `${API_URL}/pair-room/${accessCode}`,
+    errorMessage: ERROR_MESSAGES.DELETE_PAIR_ROOM,
+  });
+};

frontend/src/apis/referenceLink.ts

@@ -4,7 +4,7 @@ import { ERROR_MESSAGES } from '@/constants/message';
 
 const API_URL = process.env.REACT_APP_API_URL;
 
-export interface Link {
+export interface Reference {
   id: number;
   url: string;
   headTitle: string;
@@ -19,7 +19,7 @@ interface GetReferenceLinksRequest {
   categoryId: string;
 }
 
-export const getReferenceLinks = async ({ accessCode, categoryId }: GetReferenceLinksRequest): Promise<Link[]> => {
+export const getReferenceLinks = async ({ accessCode, categoryId }: GetReferenceLinksRequest): Promise<Reference[]> => {
   const categoryParamsUrl = categoryId === '0' ? `` : `?categoryId=${categoryId}`;
 
   const response = await fetcher.get({
@@ -29,7 +29,7 @@ export const getReferenceLinks = async ({ accessCode, categoryId }: GetReference
 
   return await response.json();
 };
-    
+
 interface AddReferenceLinkRequest {
   url: string;
   accessCode: string;

frontend/src/apis/retrospect.ts

@@ -0,0 +1,56 @@
+import fetcher from '@/apis/fetcher';
+
+import { ERROR_MESSAGES } from '@/constants/message';
+
+const API_URL = process.env.REACT_APP_API_URL;
+
+interface AddRetrospectRequest {
+  accessCode: string;
+  answers: string[];
+}
+
+export const addRetrospect = async ({ accessCode, answers }: AddRetrospectRequest) => {
+  await fetcher.post({
+    url: `${API_URL}/retrospects`,
+    body: JSON.stringify({ accessCode, answers }),
+    errorMessage: ERROR_MESSAGES.ADD_RETROSPECT,
+  });
+};
+
+interface GetRetrospectRequest {
+  accessCode: string;
+}
+
+interface GetRetrospectResponse {
+  answers: string[];
+}
+
+export const getRetrospectAnswer = async ({ accessCode }: GetRetrospectRequest): Promise<GetRetrospectResponse> => {
+  const response = await fetcher.get({
+    url: `${API_URL}/retrospects/${accessCode}`,
+    errorMessage: ERROR_MESSAGES.GET_RETROSPECT,
+  });
+
+  return await response.json();
+};
+
+export const deleteRetrospectAnswer = async ({ accessCode }: GetRetrospectRequest) => {
+  await fetcher.delete({
+    url: `${API_URL}/retrospects/${accessCode}`,
+    errorMessage: ERROR_MESSAGES.DELETE_RETROSPECT,
+  });
+};
+
+export interface Retrospect {
+  accessCode: string;
+  answer: string;
+}
+
+export const getUserRetrospects = async (): Promise<{ retrospects: Retrospect[] }> => {
+  const response = await fetcher.get({
+    url: `${API_URL}/retrospects`,
+    errorMessage: ERROR_MESSAGES.GET_USER_RETROSPECTS,
+  });
+
+  return await response.json();
+};

frontend/src/components/PairRoom/ReferenceCard/CategoryManagementModal/CategoriesEditor/CategoryItem/ReadonlyCategoryItem/ReadonlyCategoryItem.styles.ts → frontend/src/components/CompletedPairRoom/ReferenceCard/CategoryManagementModal/CategoryItem/CategoryItem.styles.ts

@@ -1,21 +1,34 @@
 import styled from 'styled-components';
 
 export const Layout = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  gap: 2rem;
+
+  width: 100%;
+`;
+
+export const Container = styled.div`
   display: flex;
   align-items: center;
   gap: 1rem;
 
-  width: 28rem;
+  width: 100%;
+
+  img {
+    width: 2rem;
+    height: 2rem;
+  }
 `;
 
-export const ReadonlyCategoryItem = styled.li<{ $isChecked: boolean }>`
+export const Item = styled.li<{ $isChecked: boolean }>`
   display: flex;
-  justify-content: space-between;
   align-items: center;
 
   width: 100%;
   height: 4.4rem;
-  padding: 0 1rem;
+  padding: 0 1.2rem;
   border: 1px solid ${({ theme }) => theme.color.black[50]};
   border-radius: 0.5rem;
 
@@ -29,9 +42,4 @@ export const ReadonlyCategoryItem = styled.li<{ $isChecked: boolean }>`
     background-color: ${({ theme }) => theme.color.primary[700]};
     color: ${({ theme }) => theme.color.black[10]};
   }
-
-  &:active {
-    background-color: ${({ theme }) => theme.color.primary[800]};
-    color: ${({ theme }) => theme.color.black[10]};
-  }
 `;