refactor :: Vite로 프로젝트 설정 변경

public/index.html → index.html

@@ -21,5 +21,6 @@
     ></noscript>
     <!-- End Google Tag Manager (noscript) -->
     <div id="root"></div>
+    <script type="module" src="/src/index.tsx"></script>
   </body>
 </html>

package.json

@@ -4,8 +4,9 @@
   "description": "---",
   "main": "index.js",
   "scripts": {
+    "start": "vite",
     "dev": "webpack serve --open --mode development --config webpack.config.js --open --hot",
-    "build": "webpack serve --open --mode production",
+    "build": "tsc && vite build",
     "analyze": "webpack-bundle-analyzer ./dist/bundle-report.json --default-sizes gzip"
   },
   "repository": "git+https://github.com/EntryDSM/Entry-LTS.git",
@@ -44,13 +45,15 @@
     "@pmmmwh/react-refresh-webpack-plugin": "^0.5.10",
     "@svgr/webpack": "^6.5.1",
     "@types/file-saver": "^2.0.5",
-    "@types/node": "^18.11.18",
+    "@types/node": "^18.19.42",
     "@types/react": "^18.0.27",
     "@types/react-dom": "^18.0.10",
     "@types/react-outside-click-handler": "^1.3.1",
     "@types/react-responsive": "^8.0.5",
     "@typescript-eslint/eslint-plugin": "^5.48.0",
     "@typescript-eslint/parser": "^5.48.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "@vitejs/plugin-react-refresh": "^1.3.6",
     "babel-loader": "^9.1.0",
     "clean-webpack-plugin": "^4.0.0",
     "css-loader": "^6.7.3",
@@ -68,6 +71,7 @@
     "style-loader": "^3.3.1",
     "ts-loader": "^9.4.2",
     "typescript": "^4.9.4",
+    "vite": "^5.3.5",
     "webpack": "^5.89.0",
     "webpack-bundle-analyzer": "^4.7.0",
     "webpack-cli": "^5.0.1",

src/assets/MouLogoImgs.tsx

@@ -271,7 +271,7 @@ const MouLogoImgs = [
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
-    <g clip-path="url(#clip0_24_18)">
+    <g clipPath="url(#clip0_24_18)">
       <rect width="320" height="175" fill="white" />
       <rect x="60" y="-12.5" width="200" height="200" fill="url(#pattern0_24_18)" />
     </g>
@@ -386,7 +386,7 @@ const MouLogoImgs = [
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"
   >
-    <g clip-path="url(#clip0_24_28)">
+    <g clipPath="url(#clip0_24_28)">
       <rect width="320" height="175" fill="white" />
       <rect x="46" y="-26.5" width="228" height="228" fill="url(#pattern0_24_28)" />
     </g>

src/components/AboutEntry/DeveloperIntroduce.tsx

@@ -73,15 +73,15 @@ const DeveloperIntroduce = () => {
         <span>사진에 마우스를 올려 더 자세한 정보를 확인해보세요</span>
       </TextWrapper>
       <CardContainer>
-        {developers.map((developer) => (
-          <Card key={developer.id} developer={developer} />
+        {developers.map((developer, index) => (
+          <Card developer={developer} />
         ))}
       </CardContainer>
     </Section>
   );
 };
 
-const Card = ({ developer }) => {
+const Card = ({ developer }: { developer: any }) => {
   const [isOpen, setIsOpen] = useState(false);
   return (
     <CardWrapper onMouseOver={() => setIsOpen(true)} onMouseLeave={() => setIsOpen(false)}>

src/components/AboutEntry/WhatIsEntry.tsx

@@ -78,19 +78,19 @@ const WailContainer = styled.div`
   & .parallax > use {
     animation: ${waveAnimation} 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
   }
-  & .parallax > use:nth-child(1) {
+  & .parallax > use:nth-of-type(1) {
     animation-delay: -2s;
     animation-duration: 7s;
   }
-  & .parallax > use:nth-child(2) {
+  & .parallax > use:nth-of-type(2) {
     animation-delay: -3s;
     animation-duration: 10s;
   }
-  & .parallax > use:nth-child(3) {
+  & .parallax > use:nth-of-type(3) {
     animation-delay: -4s;
     animation-duration: 13s;
   }
-  & .parallax > use:nth-child(4) {
+  & .parallax > use:nth-of-type(4) {
     animation-delay: -5s;
     animation-duration: 20s;
   }

src/components/Answer/QnaAnswer.tsx

@@ -4,7 +4,13 @@ import styled from '@emotion/styled';
 import { Text } from '@team-entry/design_system';
 import React from 'react';
 
-const QnaAnswer = ({ title, content, created_at }) => {
+interface PropsType {
+  title?: string;
+  content?: string;
+  created_at?: string;
+}
+
+const QnaAnswer = ({ title, content, created_at }: PropsType) => {
   const { authorityColor } = useAuthority();
 
   return (

src/components/Board/BoardElement.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import styled from '@emotion/styled';
-import { IBoard } from '@/interfaces/Board';
+import { IBoard } from '../interfaces/Board';
 import { Button, Icon, Stack, Text, theme } from '@team-entry/design_system';
 import { Mobile, Pc, isMobile } from '../../hooks/useResponsive';
 import { keyframes } from '@emotion/react';

src/components/Board/BoardHeader.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { Text } from '@team-entry/design_system';
-import { IBoard } from '@/interfaces/Board';
+import { IBoard } from '../interfaces/Board';
 import { Mobile, Pc } from '../../hooks/useResponsive';
 
 const BoardHeader = (props: IBoard) => {

src/components/Grade/GradeFooter.tsx

@@ -1,7 +1,7 @@
 import { Dispatch, SetStateAction } from 'react';
 import styled from '@emotion/styled';
 import { Button, Text, theme } from '@team-entry/design_system';
-import { GradeStatusType } from '@/interfaces/grade';
+import { GradeStatusType } from '../interfaces/grade';
 import { useModal } from '@/hooks/useModal';
 import { MAIN_URL } from '@/constant/env';
 

src/components/Grade/ProgressBar.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { Text, theme } from '@team-entry/design_system';
-import { GradeStatusType } from '@/interfaces/grade';
+import { GradeStatusType } from '../interfaces/grade';
 
 interface IProgressBarProps {
   step: number;

src/components/Grade/SelectGrade/AllSelect.tsx

@@ -2,7 +2,7 @@ import { SetStateAction, useEffect, useState } from 'react';
 import { Text, theme } from '@team-entry/design_system';
 import styled from '@emotion/styled';
 import { gradeArr } from '../../../constant/grade';
-import { GradeType, ISelectGradeElement } from '@/interfaces/grade';
+import { GradeType, ISelectGradeElement } from '../interfaces/grade';
 
 interface IAllSelect {
   selectGradeElement: ISelectGradeElement;

src/components/Grade/SelectGrade/SelectGrade.tsx

@@ -1,7 +1,7 @@
 import styled from '@emotion/styled';
 import { Text, theme } from '@team-entry/design_system';
 import { gradeArr } from '../../../constant/grade';
-import { GradeType, ISelectGradeElement } from '@/interfaces/grade';
+import { GradeType, ISelectGradeElement } from '../interfaces/grade';
 
 interface ISelectGrade {
   title: string;

src/components/Grade/WriteInfo/WriteAttendence.tsx

@@ -1,6 +1,6 @@
 import { Input, theme } from '@team-entry/design_system';
 import GradeWraper from '../GradeWraper';
-import { GradeStatusType, IWriteGradeElement } from '@/interfaces/grade';
+import { GradeStatusType, IWriteGradeElement } from '../interfaces/grade';
 import styled from '@emotion/styled';
 import { useEffect, useState } from 'react';
 

src/components/Main/ApplyandNotice.tsx

@@ -126,8 +126,8 @@ const ApplyandNotice = () => {
             <_MainNotificationText>신입생 전형 요강 PDF 파일 다운로드</_MainNotificationText>
             <_Img src={Download2} />
           </_MainNoticeBox>
-          {data?.notices.length > 0 &&
-            data.notices.map((notice, index) => {
+          {data.notices.length > 0 &&
+            data?.notices.map((notice, index) => {
               if (index >= 4) return;
 
               return <NoticeBox title={notice.title} createdAt={notice.createdAt} id={notice.id} />;

src/components/Main/Faq.tsx

@@ -51,6 +51,7 @@ const Faq = () => {
         {questions.map((question, idx) => {
           return (
             <SummaryBox
+              key={idx}
               title={question}
               content={answers[idx]}
               idx={idx}

src/components/landing/FourthContainer.tsx

@@ -12,7 +12,7 @@ const Fourth = () => {
             대덕 SW마이스터고등학교와 함께하는
           </Text>
           <_Text>든든한 MOU 기업들</_Text>
-          <Text color size="title2" align="center">
+          <Text size="title2" align="center" color={'orange600'}>
             350여개에 달하는 기업이 본교에 취업을 의뢰했으며,
             <br />
             매년 학생들의 취업으로 이어지고 있습니다
@@ -22,21 +22,21 @@ const Fourth = () => {
           <AnimationBox rotate="left">
             {MouLogoImgs.map((item, idx) => {
               if (idx < 6) {
-                return <_MOULogo>{item}</_MOULogo>;
+                return <_MOULogo key={idx}>{item}</_MOULogo>;
               }
             })}
           </AnimationBox>
           <AnimationBox rotate="right">
             {MouLogoImgs.map((item, idx) => {
               if (idx >= 6 && idx < 12) {
-                return <_MOULogo>{item}</_MOULogo>;
+                return <_MOULogo key={idx}>{item}</_MOULogo>;
               }
             })}
           </AnimationBox>
           <AnimationBox rotate="left">
             {MouLogoImgs.map((item, idx) => {
               if (idx >= 12) {
-                return <_MOULogo>{item}</_MOULogo>;
+                return <_MOULogo key={idx}>{item}</_MOULogo>;
               }
             })}
           </AnimationBox>

src/constant/env.ts

@@ -1,9 +1,11 @@
+import process from 'process';
+
 export const COOKIE_DOMAIN = process.env.NODE_ENV === 'development' ? 'localhost' : 'entrydsm.hs.kr';
 
-export const MAIN_URL = process.env.REACT_APP_MAIN_URL;
+export const MAIN_URL = process.env.VITE_MAIN_URL;
 
-export const AUTH_URL = process.env.REACT_APP_AUTH_URL;
+export const AUTH_URL = process.env.VITE_AUTH_URL;
 
-export const APPLY_URL = process.env.REACT_APP_APPLY_URL;
+export const APPLY_URL = process.env.VITE_APPLY_URL;
 
-export const ADMIN_URL = process.env.REACT_APP_ADMIN_URL;
+export const ADMIN_URL = process.env.VITE_ADMIN_URL;

src/constant/grade.ts

@@ -1,4 +1,4 @@
-import { GradeType } from '@/interfaces/grade';
+import { GradeType } from '../interfaces/grade';
 
 export const gradeArr: GradeType[] = ['A', 'B', 'C', 'D', 'E', 'X'];
 

src/pages/Customer.tsx

@@ -2,10 +2,10 @@ import { useEffect, useState } from 'react';
 import { Link, useSearchParams } from 'react-router-dom';
 import styled from '@emotion/styled';
 import { Text, theme } from '@team-entry/design_system';
-import { Mobile, Pc } from '../hooks/useResponsive';
-import BoardHeader from '../components/Board/BoardHeader';
-import BoardElement from '../components/Board/BoardElement';
-import BoardTitle from '../components/Board/BoardTitle';
+import { Mobile, Pc } from '@/hooks/useResponsive';
+import BoardHeader from '@/components/Board/BoardHeader';
+import BoardElement from '@/components/Board/BoardElement';
+import BoardTitle from '@/components/Board/BoardTitle';
 import { GetAllQna } from '@/utils/api/qna';
 import { AuthorityColorType, useAuthority } from '@/hooks/useAuthority';
 import { GetAllFaq } from '@/utils/api/faq';

src/pages/CustomerDetail.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState } from 'react';
 import styled from '@emotion/styled';
 import { useLocation, useNavigate, useParams } from 'react-router-dom';
 import { Button, Input, Spinner, Stack, Text, Textarea, Toast, theme } from '@team-entry/design_system';
-import { Mobile, Pc } from '../hooks/useResponsive';
+import { Mobile, Pc } from '@/hooks/useResponsive';
 import { GetQnaDetail } from '@/utils/api/qna';
 import { useAuthority } from '@/hooks/useAuthority';
 import QnaAnswer from '@/components/Answer/QnaAnswer';
@@ -12,17 +12,19 @@ import { getCookies } from '@/utils/cookies';
 
 const CustomerDetailPage = () => {
   const navigate = useNavigate();
-  const { id: qnaId } = useParams();
+  const { id: qnaId } = useParams<{ id: string }>();
   const [writeAnswer, setWriteAnswer] = useState(false);
   const { authorityColor, isAdmin } = useAuthority();
   const { form, setForm, onChange } = useInput({ title: '', content: '' });
-  const { mutate: writeReply } = WriteReply(form);
-  const { mutate: editReply } = EditReply(form);
-  const { mutate: deleteReply } = DeleteReply();
-  const { mutate: deleteQna } = DeleteQna();
+  const writeReply = WriteReply(form).mutate;
+  const editReply = EditReply(form).mutate;
+  const deleteReply = DeleteReply().mutate;
+  const deleteQna = DeleteQna().mutate;
 
-  const { data: qnaData, isLoading: qnaIsLoading } = GetQuestionDetail(qnaId);
-  const { data, isLoading } = GetQnaDetail(qnaId);
+  const qnaData = GetQuestionDetail(qnaId ?? '').data;
+  const qnaIsLoading = GetQuestionDetail(qnaId ?? '').isLoading;
+  const data = GetQnaDetail(qnaId ?? '').data;
+  const isLoading = GetQnaDetail(qnaId ?? '').isLoading;
   const accessToken = getCookies('accessToken');
 
   useEffect(() => {
@@ -31,21 +33,22 @@ const CustomerDetailPage = () => {
 
   useEffect(() => {
     if (qnaData) setForm({ title: qnaData?.title, content: qnaData?.content });
-  }, [data]);
+  }, [qnaData]);
 
   useEffect(() => {
     if (!accessToken) {
       Toast('로그인이 필요합니다.', { type: 'error' });
       navigate('/customer');
     }
-  }, []);
+  }, [accessToken, navigate]);
 
   if (isLoading)
     return (
       <_Loading>
         <Spinner margin={[0, 'auto']} size={40} color={authorityColor} />
       </_Loading>
     );
+
   return (
     <_Container>
       <_Wrapper>
@@ -78,7 +81,7 @@ const CustomerDetailPage = () => {
                     <Button color="black" kind="contained" onClick={() => setWriteAnswer(true)}>
                       수정
                     </Button>
-                    <Button color="delete" kind="delete" onClick={() => deleteReply(qnaId)}>
+                    <Button color="delete" kind="delete" onClick={() => deleteReply(qnaId ?? '')}>
                       답변 삭제
                     </Button>
                   </>
@@ -87,7 +90,7 @@ const CustomerDetailPage = () => {
                     <Button color="green" kind="contained" onClick={() => setWriteAnswer(true)}>
                       답변 작성
                     </Button>
-                    <Button color="delete" kind="delete" onClick={() => deleteQna(qnaId)}>
+                    <Button color="delete" kind="delete" onClick={() => deleteQna(qnaId ?? '')}>
                       질문 삭제
                     </Button>
                   </>
@@ -143,7 +146,7 @@ const CustomerDetailPage = () => {
                   color="black"
                   kind="contained"
                   onClick={async () => {
-                    editReply(qnaId);
+                    editReply(qnaId ?? '');
                     setWriteAnswer(false);
                   }}
                 >
@@ -154,7 +157,7 @@ const CustomerDetailPage = () => {
                   color="green"
                   kind="contained"
                   onClick={async () => {
-                    writeReply(qnaId);
+                    writeReply(qnaId ?? '');
                     setWriteAnswer(false);
                   }}
                 >

src/pages/GradeProgramPage.tsx

@@ -7,7 +7,7 @@ import { subject } from '@/constant/grade';
 import AllSelect from '@/components/Grade/SelectGrade/AllSelect';
 import GradePreview from '@/components/Grade/GradePreview';
 import ProgressBar from '@/components/Grade/ProgressBar';
-import { GradeStatusType, ISelectGradeElement, IWriteGradeElement } from '@/interfaces/grade';
+import { GradeStatusType, ISelectGradeElement, IWriteGradeElement } from '../interfaces/grade';
 import SelectGrade from '@/components/Grade/SelectGrade/SelectGrade';
 import WriteAttendence from '@/components/Grade/WriteInfo/WriteAttendence';
 import GradeFooter from '@/components/Grade/GradeFooter';