[FE] refactor: LandingPage에 리액트 쿼리 적용 및 리팩토링

frontend/src/apis/endpoints.ts

@@ -18,7 +18,7 @@ const endPoint = {
   gettingDataToWriteReview: (reviewRequestCode: string) =>
     `${process.env.API_BASE_URL}/reviews/write?${REVIEW_WRITING_API_PARAMS.queryString.reviewRequestCode}=${reviewRequestCode}`,
   gettingReviewList: `${process.env.API_BASE_URL}/reviews`,
-  gettingCreatedGroupData: `${process.env.API_BASE_URL}/groups`,
+  postingDataForURL: `${process.env.API_BASE_URL}/groups`,
 };
 
 export default endPoint;

frontend/src/apis/group.ts

@@ -1,13 +1,15 @@
+import { API_ERROR_MESSAGE, INVALID_GROUP_ACCESS_CODE_MESSAGE } from '@/constants';
+
 import createApiErrorMessage from './apiErrorMessageCreator';
 import endPoint from './endpoints';
 
-interface DataForURL {
+export interface DataForURL {
   revieweeName: string;
   projectName: string;
 }
 
-export const getCreatedGroupDataApi = async (dataForURL: DataForURL) => {
-  const response = await fetch(endPoint.gettingCreatedGroupData, {
+export const postDataForURL = async (dataForURL: DataForURL) => {
+  const response = await fetch(endPoint.postingDataForURL, {
     method: 'POST',
     headers: {
       'Content-Type': 'application/json',
@@ -22,3 +24,21 @@ export const getCreatedGroupDataApi = async (dataForURL: DataForURL) => {
   const data = await response.json();
   return data;
 };
+
+// NOTE: 리뷰 목록 엔드포인트(gettingReviewList)에 요청을 보내고 있지만,
+// 요청 성격이 목록을 얻어오는 것이 아닌 유효한 groupAccessCode인지 확인하는 것이므로 group 파일에 작성함
+// 단, 해당 엔드포인트에 대한 정상 요청 핸들러가 동작한다면 아래 에러 핸들러는 동작하지 않음
+export const getIsValidGroupAccessCodeApi = async (groupAccessCode: string) => {
+  const response = await fetch(endPoint.gettingReviewList, {
+    method: 'GET',
+    headers: {
+      'Content-Type': 'application/json',
+      GroupAccessCode: groupAccessCode,
+    },
+  });
+
+  if (response.status === 400) throw new Error(INVALID_GROUP_ACCESS_CODE_MESSAGE);
+  if (response.status === 500) throw new Error(API_ERROR_MESSAGE.serverError);
+
+  return response.ok;
+};

frontend/src/apis/review.ts

@@ -74,15 +74,3 @@ export const getReviewListApi = async (groupAccessCode: string) => {
   const data = await response.json();
   return data as ReviewPreviewList;
 };
-
-export const checkGroupAccessCodeApi = async (groupAccessCode: string) => {
-  const response = await fetch(endPoint.gettingReviewList, {
-    method: 'GET',
-    headers: {
-      'Content-Type': 'application/json',
-      GroupAccessCode: groupAccessCode,
-    },
-  });
-
-  return response.ok;
-};

frontend/src/components/common/Input/index.tsx

@@ -5,19 +5,24 @@ export interface InputStyleProps {
 }
 interface InputProps extends InputStyleProps {
   value: string;
-  onChange: (value: string) => void;
+  onChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
   type: string;
   id?: string;
+  name?: string;
   placeholder?: string;
 }
 
-const Input = ({ id, value, onChange, type, placeholder, $style }: InputProps) => {
-  const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    onChange(event.target.value);
-  };
-
+const Input = ({ id, value, name, onChange, type, placeholder, $style }: InputProps) => {
   return (
-    <S.Input id={id} value={value} type={type} onChange={handleChange} placeholder={placeholder} $style={$style} />
+    <S.Input
+      id={id}
+      value={value}
+      type={type}
+      name={name}
+      onChange={onChange}
+      placeholder={placeholder}
+      style={$style}
+    />
   );
 };
 

frontend/src/constants/errorMessage.ts

@@ -15,3 +15,5 @@ export const API_ERROR_MESSAGE: ApiErrorMessages = {
 export const SERVER_ERROR_REGEX = /^5\d{2}$/;
 
 export const ROUTE_ERROR_MESSAGE = '찾으시는 페이지가 없어요.';
+
+export const INVALID_GROUP_ACCESS_CODE_MESSAGE = '올바르지 않은 확인 코드예요.';

frontend/src/constants/queryKeys.ts

@@ -1,4 +1,9 @@
+// TODO: 내용이 배열이 아니므로 단수형으로 수정하기
 export const REVIEW_QUERY_KEYS = {
   detailedReview: 'detailedReview',
   reviews: 'reviews',
 };
+
+export const GROUP_QUERY_KEY = {
+  dataForURL: 'dataForURL',
+};

frontend/src/index.tsx

@@ -7,6 +7,7 @@ import { RecoilRoot } from 'recoil';
 
 import App from '@/App';
 
+import ErrorSuspenseContainer from './components/error/ErrorSuspenseContainer/index';
 import DetailedReviewPage from './pages/DetailedReviewPage';
 import ErrorPage from './pages/ErrorPage';
 import LandingPage from './pages/LandingPage';
@@ -60,15 +61,36 @@ const router = createBrowserRouter([
 
 const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
 
-root.render(
-  <React.StrictMode>
-    <QueryClientProvider client={queryClient}>
-      <ThemeProvider theme={theme}>
-        <Global styles={globalStyles} />
-        <RecoilRoot>
-          <RouterProvider router={router} />
-        </RecoilRoot>
-      </ThemeProvider>
-    </QueryClientProvider>
-  </React.StrictMode>,
-);
+async function enableMocking() {
+  if (process.env.MSW) {
+    const { worker } = await import('./mocks/browser');
+    return worker.start();
+  }
+}
+
+enableMocking().then(() => {
+  root.render(
+    <React.StrictMode>
+      <QueryClientProvider client={queryClient}>
+        <ThemeProvider theme={theme}>
+          <Global styles={globalStyles} />
+          <RecoilRoot>
+            <RouterProvider router={router} />
+          </RecoilRoot>
+        </ThemeProvider>
+      </QueryClientProvider>
+    </React.StrictMode>,
+  );
+});
+// root.render(
+//   <React.StrictMode>
+//     <QueryClientProvider client={queryClient}>
+//       <ThemeProvider theme={theme}>
+//         <Global styles={globalStyles} />
+//         <RecoilRoot>
+//           <RouterProvider router={router} />
+//         </RecoilRoot>
+//       </ThemeProvider>
+//     </QueryClientProvider>
+//   </React.StrictMode>,
+// );

frontend/src/mocks/handlers/group.ts

@@ -0,0 +1,39 @@
+import { http, HttpResponse } from 'msw';
+
+import endPoint from '@/apis/endpoints';
+
+import { CREATED_GROUP_DATA, INVALID_GROUP_ACCESS_CODE } from '../mockData/group';
+
+const postDataForUrl = () => {
+  return http.post(endPoint.postingDataForURL, async () => {
+    return HttpResponse.json(CREATED_GROUP_DATA, { status: 200 });
+  });
+};
+
+// const postDataForUrl = () => {
+//   return http.post(endPoint.postingDataForURL, async () => {
+//     return HttpResponse.json({ error: '서버 에러 테스트' }, { status: 500 });
+//   });
+// };
+
+const getIsValidGroupAccessCode = () => {
+  return http.get(endPoint.gettingReviewList, async () => {
+    return HttpResponse.json({ status: 200 });
+  });
+};
+
+// const getIsValidGroupAccessCode = () => {
+//   return http.get(endPoint.gettingReviewList, async () => {
+//     return HttpResponse.json(INVALID_GROUP_ACCESS_CODE, { status: 400 });
+//   });
+// };
+
+// const getIsValidGroupAccessCode = () => {
+//   return http.get(endPoint.gettingReviewList, async () => {
+//     return HttpResponse.json({ error: '서버 에러 테스트' }, { status: 500 });
+//   });
+// };
+
+const groupHandler = [postDataForUrl(), getIsValidGroupAccessCode()];
+
+export default groupHandler;

frontend/src/mocks/handlers/index.ts

@@ -1,5 +1,6 @@
+import groupHandler from './group';
 import reviewHandler from './review';
 
-const handlers = [...reviewHandler];
+const handlers = [...reviewHandler, ...groupHandler];
 
 export default handlers;

frontend/src/mocks/mockData/group.ts

@@ -0,0 +1,12 @@
+export const CREATED_GROUP_DATA = {
+  reviewRequestCode: 'mocked-reviewRequestCode',
+  groupAccessCode: 'mocked-groupAccessCode',
+};
+
+export const INVALID_GROUP_ACCESS_CODE = {
+  type: 'about:blank',
+  title: 'Bad Request',
+  status: 400,
+  detail: '올바르지 않은 확인 코드입니다.',
+  instance: '/reviews',
+};

frontend/src/pages/LandingPage/components/FormBody/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { EssentialPropsWithChildren } from '@/types';
 
-import * as S from '../../styles';
+import * as S from './styles';
 
 interface FormBodyProps {
   direction: React.CSSProperties['flexDirection'];

frontend/src/pages/LandingPage/components/FormBody/styles.ts

@@ -0,0 +1,7 @@
+import styled from '@emotion/styled';
+
+export const FormBody = styled.div<{ direction: React.CSSProperties['flexDirection'] }>`
+  display: flex;
+  flex-direction: ${({ direction }) => direction};
+  gap: 1.6em;
+`;

frontend/src/pages/LandingPage/components/FormLayout/index.tsx

@@ -2,8 +2,9 @@ import React from 'react';
 
 import { EssentialPropsWithChildren } from '@/types';
 
-import * as S from '../../styles';
-import FormBody from '../FormBody';
+import { FormBody } from '../index';
+
+import * as S from './styles';
 
 interface FormProps {
   title: string;

frontend/src/pages/LandingPage/components/FormLayout/styles.ts

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+export const FormLayout = styled.form`
+  display: flex;
+  flex-direction: column;
+
+  width: 40rem;
+`;
+
+export const Title = styled.h2`
+  font-size: ${({ theme }) => theme.fontSize.basic};
+
+  margin-bottom: 2.2rem;
+`;

frontend/src/pages/LandingPage/components/ReviewAccessForm/index.tsx

@@ -1,48 +1,55 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router';
 
-import { checkGroupAccessCodeApi } from '@/apis/review';
+import { getIsValidGroupAccessCodeApi } from '@/apis/group';
 import { Input, Button } from '@/components';
 import { useGroupAccessCode } from '@/hooks';
 import { debounce } from '@/utils/debounce';
 
-import * as S from '../../styles';
-import FormLayout from '../FormLayout';
+import { FormLayout } from '../index';
+
+import * as S from './styles';
 
 const DEBOUNCE_TIME = 300;
 
 const ReviewAccessForm = () => {
-  const navigate = useNavigate();
-  const { updateGroupAccessCode } = useGroupAccessCode();
-
   const [groupAccessCode, setGroupAccessCode] = useState('');
   const [errorMessage, setErrorMessage] = useState('');
 
+  const navigate = useNavigate();
+  const { updateGroupAccessCode } = useGroupAccessCode();
+
   const isValidGroupAccessCode = async () => {
-    const isValid = await checkGroupAccessCodeApi(groupAccessCode);
+    const isValid = await getIsValidGroupAccessCodeApi(groupAccessCode);
     return isValid;
   };
 
-  const handleGroupAccessCodeInputChange = (value: string) => {
-    setGroupAccessCode(value);
+  const isAlphanumeric = (groupAccessCode: string) => {
+    const alphanumericRegex = /^[A-Za-z0-9]*$/;
+    return alphanumericRegex.test(groupAccessCode);
+  };
+
+  const handleGroupAccessCodeInputChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    setGroupAccessCode(event.target.value);
   };
 
   const handleAccessReviewButtonClick = debounce(async (event: React.MouseEvent<HTMLElement>) => {
     event.preventDefault();
 
     try {
-      const isValid = await isValidGroupAccessCode();
-
-      if (isValid) {
-        updateGroupAccessCode(groupAccessCode);
-        setErrorMessage('');
-
-        navigate('/user/review-preview-list');
-      } else {
-        setErrorMessage('유효하지 않은 그룹 접근 코드입니다.');
+      if (!isAlphanumeric(groupAccessCode)) {
+        setErrorMessage('알파벳 대소문자와 숫자만 입력 가능합니다.');
+        return;
       }
+
+      await isValidGroupAccessCode();
+
+      updateGroupAccessCode(groupAccessCode);
+      setErrorMessage('');
+
+      navigate('/user/review-preview-list');
     } catch (error) {
-      setErrorMessage('오류가 발생했습니다. 다시 시도해주세요.');
+      if (error instanceof Error) setErrorMessage(error.message);
     }
   }, DEBOUNCE_TIME);
 

frontend/src/pages/LandingPage/components/ReviewAccessForm/styles.ts

@@ -0,0 +1,23 @@
+import styled from '@emotion/styled';
+
+export const ReviewAccessFormContent = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  width: 100%;
+`;
+
+export const ReviewAccessFormBody = styled.div`
+  display: flex;
+  justify-content: space-between;
+
+  width: 100%;
+`;
+
+export const ErrorMessage = styled.p`
+  font-size: 1.3rem;
+
+  color: ${({ theme }) => theme.colors.red};
+
+  padding-left: 0.7rem;
+`;