Merge pull request #64 from woowacourse-teams/refactor/#51

2-1 스프린트 전체 리팩토링

frontend/package.json

@@ -33,6 +33,7 @@
     "@storybook/react-webpack5": "^8.1.11",
     "@storybook/test": "^8.1.11",
     "@stylelint/postcss-css-in-js": "^0.38.0",
+    "@svgr/webpack": "^8.1.0",
     "@tanstack/react-query": "^5.51.1",
     "@types/react": "^18.3.3",
     "@types/react-dom": "^18.3.0",

frontend/src/App.tsx

@@ -1,37 +1,13 @@
 import { Global } from '@emotion/react';
-import reset from './reset';
-
-import {
-  QueryClient,
-  QueryClientProvider,
-  MutationCache,
-} from '@tanstack/react-query';
-import { RouterProvider, createBrowserRouter } from 'react-router-dom';
-
-import ENDPOINTS from './constants/endpoints';
+import { QueryClientProvider } from '@tanstack/react-query';
+import { RouterProvider } from 'react-router-dom';
+import createQueryClient from './queryClient';
+import reset from './common/reset.style';
+import router from './router';
 import { useMemo } from 'react';
-import MoimListPage from './pages/MoimList';
-import MoimRegisterPage from './pages/MoimRegister';
-
-const router = createBrowserRouter([
-  {
-    path: ENDPOINTS.main,
-    element: <MoimListPage />,
-  },
-  {
-    path: ENDPOINTS.addMoim,
-    element: <MoimRegisterPage />,
-  },
-]);
 
 export default function App() {
-  const queryClient = useMemo(() => {
-    return new QueryClient({
-      mutationCache: new MutationCache({
-        onError: (e: Error) => console.log(e),
-      }),
-    });
-  }, []);
+  const queryClient = useMemo(createQueryClient, []);
 
   return (
     <>

frontend/src/apis/endPoints.ts

@@ -0,0 +1,11 @@
+import ENV from '@_apis/env';
+
+const getEndpoint = (string: string) => {
+  return `${ENV.baseUrl}/${string}`;
+};
+
+const ENDPOINTS = {
+  moim: getEndpoint('v1/moim'),
+  moims: getEndpoint('v1/moim'),
+};
+export default ENDPOINTS;

frontend/src/apis/gets.ts

@@ -1,12 +1,9 @@
-import { GetMoim, MoimInfo } from '../types/requests';
-
-import ENV from './env';
+import ENDPOINTS from '@_apis/endPoints';
+import { GetMoim } from '@_apis/responseTypes';
+import { MoimInfo } from '@_types/index';
 
 export const getMoims = async (): Promise<MoimInfo[]> => {
-  const url = `${ENV.baseUrl}/${'v1/moim'}`;
-
-  const headers = new Headers();
-  headers.append('Content-Type', 'application/json');
+  const url = ENDPOINTS.moims;
 
   const options = {
     method: 'GET',
@@ -18,8 +15,10 @@ export const getMoims = async (): Promise<MoimInfo[]> => {
   const response = await fetch(url, options);
 
   const statusHead = Math.floor(response.status / 100);
-  if (statusHead === 4 || statusHead === 5)
+  if (statusHead === 4 || statusHead === 5) {
     throw new Error('모임을 받아오지 못했습니다.');
+  }
+
   const json = (await response.json()) as GetMoim;
   return json.data.moims;
 };

frontend/src/apis/posts.ts

@@ -1,9 +1,9 @@
-import { MoimInfo, PostMoim } from '../types/requests';
-
-import ENV from './env';
+import ENDPOINTS from '@_apis/endPoints';
+import { MoimInfo } from '@_types/index';
+import { PostMoim } from '@_apis/responseTypes';
 
 export const postMoim = async (moim: MoimInfo): Promise<number> => {
-  const url = `${ENV.baseUrl}/${'v1/moim'}`;
+  const url = ENDPOINTS.moim;
 
   const options = {
     method: 'POST',

frontend/src/apis/responseTypes.ts

@@ -0,0 +1,9 @@
+import { MoimInfo } from '../types';
+
+export interface GetMoim {
+  data: { moims: MoimInfo[] };
+}
+
+export interface PostMoim {
+  id: number;
+}

frontend/src/common/reset.style.ts

@@ -1,4 +1,5 @@
 import { css } from '@emotion/react';
+
 const reset = css`
   html,
   body,
@@ -84,9 +85,10 @@ const reset = css`
     margin: 0;
     padding: 0;
     border: 0;
-    font-size: 100%;
+    font-size: 62.5%;
     font: inherit;
     vertical-align: baseline;
+    box-sizing: border-box;
   }
   /* HTML5 display-role reset for older browsers */
   article,

frontend/src/components/Button/Button.tsx

@@ -1,5 +1,12 @@
-import type ButtonProps from './Button.type';
-import { shapes } from './Button.style';
+import { ReactNode } from 'react';
+import { shapes } from '@_components/Button/Button.style';
+
+interface ButtonProps {
+  shape: 'circle' | 'bar';
+  onClick: () => void;
+  disabled: boolean;
+  children: ReactNode;
+}
 
 export default function Button(props: ButtonProps) {
   const { shape, onClick, disabled, children } = props;

frontend/src/components/Card/MoimCard.style.ts

@@ -1,5 +1,5 @@
+import { common } from '@_common/common.style';
 import { css } from '@emotion/react';
-import { common } from '../../common/common.style';
 
 export const cardBox = css`
   display: flex;

frontend/src/components/Card/MoimCard.tsx

@@ -1,12 +1,19 @@
-import * as S from './MoimCard.style';
+import * as S from '@_components/Card/MoimCard.style';
 
-import { hhmmToKorean, yyyymmddToKorean } from '../../utils/formatters';
+import {
+  formatHhmmToKorean,
+  formatYyyymmddToKorean,
+} from '../../utils/formatters';
 
-import MoimCardProps from './MoimCard.type';
+import { MoimInfo } from '../../types';
+
+interface MoimCardProps {
+  moimInfo: MoimInfo;
+}
 
 export default function MoimCard(props: MoimCardProps) {
   const {
-    data: { title, date, time, place, maxPeople },
+    moimInfo: { title, date, time, place, maxPeople },
   } = props;
 
   return (
@@ -15,7 +22,7 @@ export default function MoimCard(props: MoimCardProps) {
       <div css={S.subjectBox}>
         <span css={S.subjectTag}>날짜 및 시간</span>
         <span css={S.subjectInfo}>
-          {`${yyyymmddToKorean(date)} ${hhmmToKorean(time)}`}
+          {`${formatYyyymmddToKorean(date)} ${formatHhmmToKorean(time)}`}
         </span>
       </div>
       <div css={S.subjectBox}>

frontend/src/components/Input/MoimInput.style.ts

@@ -1,5 +1,5 @@
+import { common } from '@_common/common.style';
 import { css } from '@emotion/react';
-import { common } from '../../common/common.style';
 
 export const required = css`
   color: #f00;

frontend/src/components/Input/MoimInput.tsx

@@ -1,12 +1,13 @@
-import MoimInputProps from './MoimInput.type';
-import * as S from './MoimInput.style';
+import * as S from '@_components/Input/MoimInput.style';
 
-export default function MoimInput(props: MoimInputProps) {
-  const {
-    name,
-    data: { title, type, placeholder, required },
-    onChange,
-  } = props;
+import { HTMLProps } from 'react';
+
+export interface LabeledInputProps extends HTMLProps<HTMLInputElement> {
+  title: string;
+}
+
+export default function LabeledInput(props: LabeledInputProps) {
+  const { name, title, type, placeholder, required, onChange } = props;
 
   return (
     <label htmlFor={title}>
@@ -22,7 +23,7 @@ export default function MoimInput(props: MoimInputProps) {
         placeholder={placeholder}
         id={title}
         onChange={onChange}
-      ></input>
+      />
     </label>
   );
 }

frontend/src/components/MoimCardList/MoimCardList.tsx

@@ -1,13 +1,20 @@
-import MoimCard from '../Card/MoimCard';
-import * as S from './MoimCardList.style';
-import MoimCardListProps from './MoimCardList.type';
+import * as S from '@_components/MoimCardList/MoimCardList.style';
+
+import MoimCard from '@_components/Card/MoimCard';
+import { MoimInfo } from '@_types/index';
+
+interface MoimCardListProps {
+  moimInfos: MoimInfo[];
+}
 
 export default function MoimCardList(props: MoimCardListProps) {
-  const { data } = props;
+  const { moimInfos } = props;
   return (
     <div css={S.cardListSection}>
-      {data.map((moimInfo, index) => {
-        return <MoimCard key={`${moimInfo.title}${index}`} data={moimInfo} />;
+      {moimInfos.map((moimInfo, index) => {
+        return (
+          <MoimCard key={`${moimInfo.title}${index}`} moimInfo={moimInfo} />
+        );
       })}
     </div>
   );

frontend/src/constants/poclies.ts

@@ -0,0 +1,18 @@
+const POLICES = {
+  minimumTitleLength: 1,
+  maximumTitleLength: 20,
+
+  minimumPlaceLength: 1,
+  maximumPlaceLength: 100,
+
+  minimumMaxPeople: 1,
+  maximumMaxPeople: 99,
+
+  minimumAuthorNicknameLength: 1,
+  maximumAuthorNicknameLength: 10,
+
+  yyyymmddDashRegex: /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/,
+  hhmmRegex: /^\d{2}:\d{2}$/,
+};
+
+export default POLICES;

frontend/src/constants/routes.ts

@@ -0,0 +1,6 @@
+const ROUTES = {
+  main: '/',
+  addMoim: '/add-moim',
+};
+
+export default ROUTES;

frontend/src/mutaions/useAddMoim.ts → frontend/src/hooks/mutaions/useAddMoim.ts

@@ -1,7 +1,7 @@
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 
-import QUERY_KEYS from '../queryKeys';
-import { postMoim } from '../apis/posts';
+import QUERY_KEYS from '@_constants/queryKeys';
+import { postMoim } from '@_apis/posts';
 
 export default function useAddMoim(onSuccess: () => void) {
   const queryClient = useQueryClient();

frontend/src/queries/useMoims.ts → frontend/src/hooks/queries/useMoims.ts

@@ -1,5 +1,5 @@
-import QUERY_KEYS from '../queryKeys';
-import { getMoims } from '../apis/gets';
+import QUERY_KEYS from '@_constants/queryKeys';
+import { getMoims } from '@_apis/gets';
 import { useMemo } from 'react';
 import { useQuery } from '@tanstack/react-query';
 

frontend/src/layouts/FormLayout/FormBottomButtonWrapper/FormBottomButtonWrapper.tsx → frontend/src/layouts/FormLayout/FormBottomWrapper/FormBottomButtonWrapper.tsx

@@ -1,7 +1,8 @@
+import * as S from './FormBottomWrapper.style';
+
 import { PropsWithChildren } from 'react';
-import * as S from './FormBottomButtonWrapper.style';
 
-export default function FormBottomButtonWrapper(props: PropsWithChildren) {
+export default function FormBottomWrapper(props: PropsWithChildren) {
   const { children } = props;
 
   return <div css={S.bottomFixedStyle}>{children}</div>;

frontend/src/layouts/FormLayout/FormHeader/FormHeader.tsx

@@ -1,7 +1,8 @@
-import { ReactNode } from 'react';
-import BackArrowLogo from './BackArrowLogo';
 import * as S from './FormHeader.style';
 
+import BackLogo from '../../../common/assets/back.svg';
+import { ReactNode } from 'react';
+
 interface FormHeaderProps {
   onBackArrowClick: () => void;
   children: ReactNode;
@@ -14,7 +15,7 @@ export default function FormHeader(props: FormHeaderProps) {
     // TODO: '모임등록하기'가 정가운데에 오지 않음
     <header css={S.headerStyle}>
       <span onClick={onBackArrowClick}>
-        <BackArrowLogo />
+        <BackLogo />
       </span>
       <span css={S.headerTitleStyle}>{children}</span>
       <span></span>