[Refactor]Complete

package.json

@@ -9,6 +9,11 @@
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
+    "@types/jest": "^29.5.12",
+    "@types/node": "^20.12.7",
+    "@types/react": "^18.2.79",
+    "@types/react-dom": "^18.2.25",
+    "@types/react-router-dom": "^5.3.3",
     "axios": "^1.6.5",
     "react": "^18.2.0",
     "react-confetti": "^6.1.0",
@@ -21,6 +26,7 @@
     "react-toastify": "^10.0.4",
     "styled-components": "^6.1.8",
     "styled-reset": "^4.5.2",
+    "typescript": "^5.4.5",
     "web-vitals": "^2.1.4",
     "yup": "^1.3.3"
   },
@@ -49,6 +55,7 @@
     ]
   },
   "devDependencies": {
+    "@types/styled-components": "^5.1.34",
     "eslint": "^8.56.0",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-jsx-a11y": "^6.8.0",

src/App.js → src/App.tsx

@@ -1,15 +1,12 @@
 import { ThemeProvider } from 'styled-components';
 import { BrowserRouter } from 'react-router-dom';
-import { Theme } from './styles/Theme';
+import { theme } from './styles/index';
 import GlobalStyle from './styles/GlobalStyle';
 import RoutesContainer from './components/RoutesContainer';
-import useRouteTracker from './hooks/useRouteTracker';
 
 function App() {
-  // useRouteTracker();
-
   return (
-    <ThemeProvider theme={Theme}>
+    <ThemeProvider theme={theme}>
       <GlobalStyle />
       <BrowserRouter>
         <RoutesContainer />

src/components/CardLanyard/CardLanyard.js → src/components/CardLanyard/CardLanyard.tsx

@@ -1,31 +1,40 @@
 import styled from 'styled-components';
+import { PropsWithChildren } from 'react';
 import { ReactComponent as CardString } from '../../assets/imgs/card_string_bg.svg';
 
-/**
- * @param {string} width
- * @param {string} height
- */
+interface CardLanyardProps {
+  width: string;
+  height: string;
+  $pcWidth: string;
+  $pcHeight: string;
+}
 
-const CardLanyard = ({ width, height, pcWidth, pcHeight, children }) => {
+const CardLanyard = ({
+  width,
+  height,
+  $pcWidth,
+  $pcHeight,
+  children,
+}: PropsWithChildren<CardLanyardProps>) => {
   return (
     <CardContainer
       width={width}
       height={height}
-      $pcWidth={pcWidth}
-      $pcHeight={pcHeight}
+      $pcWidth={$pcWidth}
+      $pcHeight={$pcHeight}
     >
       <NameCardString />
       <CardBody>{children}</CardBody>
     </CardContainer>
   );
 };
 
-const CardContainer = styled.div`
+const CardContainer = styled.div<CardLanyardProps>`
   position: relative;
   width: ${({ width }) => width};
   height: ${({ height }) => height};
 
-  @media ${({ theme }) => theme.devices.DESKTOP} {
+  @media ${({ theme }) => theme.size.desktop} {
     width: ${({ $pcWidth }) => $pcWidth};
     height: ${({ $pcHeight }) => $pcHeight};
   }
@@ -38,7 +47,7 @@ const NameCardString = styled(CardString)`
   top: -44px;
   width: 64px;
   height: 62px;
-  @media ${({ theme }) => theme.devices.DESKTOP} {
+  @media ${({ theme }) => theme.size.desktop} {
     top: -88px;
     width: 126px;
     height: 122px;
@@ -49,7 +58,7 @@ const CardBody = styled.div`
   display: flex;
   align-items: center;
   justify-content: center;
-  background-color: ${({ theme }) => theme.colors.MODAL_BG};
+  background-color: ${({ theme }) => theme.colors.background200};
   border-bottom: 24px;
   box-shadow: 7px 6px 0.4em #161515;
   border-radius: 24px;

src/components/checkPage/SmallButton.tsx

@@ -0,0 +1,50 @@
+import { PropsWithChildren } from 'react';
+import styled from 'styled-components';
+
+interface SmallButtonProps {
+  type: 'submit';
+  onClick?: React.MouseEventHandler<HTMLButtonElement>;
+  disabled: boolean;
+}
+
+const SmallButton = ({
+  children,
+  type,
+  onClick,
+  disabled,
+}: PropsWithChildren<SmallButtonProps>) => {
+  return (
+    <Wrapper type={type} onClick={onClick} disabled={disabled}>
+      {children}
+    </Wrapper>
+  );
+};
+
+const Wrapper = styled.button`
+  border-radius: 40px;
+  font-size: 12px;
+  font-weight: 300;
+  padding: 9px 16px;
+  width: 110px;
+  height: 40px;
+  color: ${({ theme }) => theme.colors.white};
+  background-color: ${({ theme }) => theme.colors.pink100};
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.pink200};
+  }
+
+  &:disabled {
+    background-color: ${({ theme }) => theme.colors.background100};
+  }
+
+  @media ${({ theme }) => theme.size.desktop} {
+    ${({ theme }) => theme.typographies.smallBtnTxt};
+    padding: 14px 48px;
+    border-radius: 40px;
+    width: 160px;
+    height: 54px;
+  }
+`;
+
+export default SmallButton;

src/pages/Apply.js → src/pages/Apply.tsx

@@ -10,17 +10,28 @@ import Input from '../components/checkPage/Input';
 import SmallButton from '../components/checkPage/SmallButton';
 import { idValidationSchema } from '../validation/idValidationSchema';
 import CheckCard from '../components/checkPage/CheckCard';
+import axios, { AxiosError } from 'axios';
+
+interface StudentData {
+  id: string;
+}
+
+enum STATUS_CODE {
+  'SUCCESS' = '201',
+  'SERVER_ERROR' = '401',
+  'ALREADY_APPLIED' = '4090',
+}
 
 const Apply = () => {
-  const [isExist, setIsExist] = useState(undefined);
+  const [hasAlreadyApplied, setHasAlreadyApplied] = useState<boolean>(false);
   const [value, setValue] = useState('');
   const [isLoading, setIsLoading] = useState(false);
   const navigate = useNavigate();
 
   const startDay = new Date('2024-03-01 00:00:00').getTime();
   const lastDay = new Date('2024-03-07 23:59:59').getTime();
 
-  const handleFormSubmit = async (data) => {
+  const handleFormSubmit = async (data: StudentData) => {
     setValue(data.id);
 
     const today = new Date().getTime();
@@ -30,23 +41,26 @@ const Apply = () => {
         const response = await Axios.post('/apply', {
           studentId: data.id,
         });
-        const statusCode = response.data.statusCode;
-        if (statusCode === '201') {
+        const statusCode: STATUS_CODE | undefined = response.data.statusCode;
+        if (statusCode === STATUS_CODE.SUCCESS) {
           sessionStorage.setItem('studentId', data.id);
           navigate('/write');
         }
       } catch (error) {
-        const statusCode = error.response.data.statusCode;
-        if (statusCode === '4090') {
-          setIsExist(true);
-        } else if (statusCode === '400') {
-          alert(error.response.data.message);
-        } else {
-          alert(
-            '서버에 이슈가 있습니다. 문제가 지속될 경우 관리자에게 문의해주세요.',
-          );
+        if (axios.isAxiosError(error)) {
+          const statusCode: STATUS_CODE | undefined =
+            error.response?.data.statusCode;
+          if (statusCode === STATUS_CODE.ALREADY_APPLIED) {
+            setHasAlreadyApplied(true);
+          } else if (statusCode === STATUS_CODE.SERVER_ERROR) {
+            alert(error.response?.data.message);
+          } else {
+            alert(
+              '서버에 이슈가 있습니다. 문제가 지속될 경우 메인 홈페이지의 채팅을 통해 관리자에게 문의해주세요.',
+            );
+          }
+          setIsLoading(false);
         }
-        setIsLoading(false);
       }
     } else {
       alert(
@@ -80,33 +94,33 @@ const Apply = () => {
 
   return (
     <Container>
-      {isExist === undefined && (
+      {!hasAlreadyApplied && (
         <form onSubmit={handleSubmit(handleFormSubmit)}>
           <CardLanyard
             width={'250px'}
             height={'318px'}
-            pcWidth={'544px'}
-            pcHeight={'358px'}
+            $pcWidth={'544px'}
+            $pcHeight={'358px'}
           >
             <ContentsWrapper>
               <SubTitle>지원하기</SubTitle>
-              <InputWraaper>
+              <InputWrapper>
                 <Input
                   inputSize={inputSizeValue}
                   captionSize={captionSizeValue}
                   messageSize={messageSizeValue}
                   hookFormRegister={register}
                   messageErrors={errors}
                 />
-              </InputWraaper>
+              </InputWrapper>
               <SmallButton disabled={isLoading} type="submit">
                 {isLoading ? '로딩중' : '지원하기'}
               </SmallButton>
             </ContentsWrapper>
           </CardLanyard>
         </form>
       )}
-      {isExist && <CheckCard status="rejected" value={value} />}
+      {hasAlreadyApplied && <CheckCard status="rejected" value={value} />}
     </Container>
   );
 };
@@ -116,14 +130,14 @@ const Container = styled.div`
   align-items: center;
   width: 100%;
   height: calc(100vh - 100px - 56px);
-  @media ${({ theme }) => theme.devices.TABLET} {
+  @media ${({ theme }) => theme.size.tablet} {
     height: calc(100vh - 100px - 70px);
   }
 `;
-const InputWraaper = styled.div`
+const InputWrapper = styled.div`
   margin: 34px 0 60px 0;
 
-  @media ${({ theme }) => theme.devices.DESKTOP} {
+  @media ${({ theme }) => theme.size.desktop} {
     margin: 18px 0 40px 0;
   }
 `;
@@ -132,7 +146,7 @@ const ContentsWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
-  @media ${({ theme }) => theme.devices.DESKTOP} {
+  @media ${({ theme }) => theme.size.desktop} {
     margin: 85px 54px 24px 52px;
   }
 `;

src/pages/Check.js

@@ -62,15 +62,15 @@ const Check = () => {
           >
             <ContentsWrapper>
               <SubTitle>지원 확인하기</SubTitle>
-              <InputWraaper>
+              <InputWrapper>
                 <Input
                   inputSize={inputSizeValue}
                   captionSize={captionSizeValue}
                   messageSize={messageSizeValue}
                   hookFormRegister={register}
                   messageErrors={errors}
                 />
-              </InputWraaper>
+              </InputWrapper>
               <SmallButton disabled={isLoading} type="submit">
                 {isLoading ? '로딩중' : '확인하기'}
               </SmallButton>
@@ -96,7 +96,7 @@ const Container = styled.div`
     height: calc(100vh - 100px - 70px);
   }
 `;
-const InputWraaper = styled.div`
+const InputWrapper = styled.div`
   margin: 34px 0 60px 0;
 
   @media ${({ theme }) => theme.devices.DESKTOP} {