Merge pull request #65 from woowacourse-teams/develop-frontend

develop-frontend를 develop에 머지

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.style.ts

@@ -1,7 +1,6 @@
 import { css } from '@emotion/react';
 
 const font = css`
-  border: none;
   color: #fff;
   font-family: Pretendard;
   font-size: 1rem;
@@ -10,31 +9,37 @@ const font = css`
   line-height: normal;
   letter-spacing: -0.02rem;
 `;
-export const shapes = {
-  default: css``,
-  circle: css`
-    ${font};
-    flex-shrink: 0;
-    border-radius: 50%;
-    background: #ffffff;
-    &:active {
-      background-color: #e9ecef;
-    }
-  `,
-  bar: css`
-    ${font}
-    display: flex;
-    width: 100%;
-    height: 4rem;
-    padding: 1rem 3.6875rem;
-    justify-content: center;
-    align-items: center;
-    gap: 0.625rem;
-    flex-shrink: 0;
-    border-radius: 1.875rem;
-    background: #477bff;
-    &:active {
-      background-color: #005bb5;
-    }
-  `,
+export const shapes = (shape: 'circle' | 'bar', disabled: boolean) => {
+  if (shape === 'circle') {
+    return css`
+      ${font};
+      flex-shrink: 0;
+      border: none;
+      box-shadow: 0px 0px 3px #444;
+      border-radius: 50%;
+      background: ${disabled ? '#868e96' : '#ffffff'};
+      &:active {
+        background-color: #868e96;
+      }
+    `;
+  }
+  if (shape === 'bar') {
+    return css`
+      ${font}
+      border: none;
+      display: flex;
+      width: 100%;
+      height: 4rem;
+      padding: 1rem 3.6875rem;
+      justify-content: center;
+      align-items: center;
+      gap: 0.625rem;
+      flex-shrink: 0;
+      border-radius: 1.875rem;
+      background: ${disabled ? '#868e96' : '#477bff'};
+      &:active {
+        background-color: ${disabled ? '#868e96' : '#005bb5'};
+      }
+    `;
+  }
 };

frontend/src/components/Button/Button.tsx

@@ -1,10 +1,17 @@
-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, children } = props;
+  const { shape, onClick, disabled, children } = props;
   return (
-    <button css={shapes[shape]} onClick={onClick}>
+    <button css={shapes(shape, disabled)} onClick={onClick} disabled={disabled}>
       {children}
     </button>
   );

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,18 +1,28 @@
-import * as S from './MoimCard.style';
-import MoimCardProps from './MoimCard.type';
+import * as S from '@_components/Card/MoimCard.style';
+
+import {
+  formatHhmmToKorean,
+  formatYyyymmddToKorean,
+} from '../../utils/formatters';
+
+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 (
     <div css={S.cardBox}>
       <h2 css={S.cardTitle}>{title}</h2>
       <div css={S.subjectBox}>
         <span css={S.subjectTag}>날짜 및 시간</span>
         <span css={S.subjectInfo}>
-          {date}
-          {time}
+          {`${formatYyyymmddToKorean(date)} ${formatHhmmToKorean(time)}`}
         </span>
       </div>
       <div css={S.subjectBox}>
@@ -21,7 +31,7 @@ export default function MoimCard(props: MoimCardProps) {
       </div>
       <div css={S.subjectBox}>
         <span css={S.subjectTag}>최대인원수</span>
-        <span css={S.subjectInfo}>{maxPeople}</span>
+        <span css={S.subjectInfo}>{maxPeople}명</span>
       </div>
     </div>
   );

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>
   );