translate 리팩토링

services/admin/.eslintrc.json

@@ -1,7 +1,7 @@
 {
   "root": true,
-  "plugins": ["aliens"],
-  "extends": ["eslint:recommended", "plugin:alines/recommended"],
+  "plugins": ["aliens", "prettier"],
+  "extends": ["eslint:recommended", "plugin:alines/recommended", "prettier"],
   "env": {
     "es6": true
   }

services/admin/package.json

@@ -8,7 +8,8 @@
     "prepare": "husky install",
     "lint": "npx eslint --ext .tsx --ext .ts .",
     "lint:fix": "npx eslint --ext .tsx --ext .ts . --fix",
-    "e2e": "yarn cypress run"
+    "e2e": "yarn cypress run",
+    "prettier": "prettier --write \"src/**/*.ts\""
   },
   "license": "MIT",
   "devDependencies": {
@@ -22,12 +23,11 @@
     "@types/file-saver": "^2",
     "@types/jest": "^29.2.6",
     "@types/node": "^18.11.18",
-    "@types/react": "^18.0.27",
+    "@types/react": "^18.0.38",
     "@types/react-color": "^3.0.6",
     "@types/react-dom": "^18.0.10",
     "@types/react-outside-click-handler": "^1.3.1",
     "@types/recoil": "^0.0.9",
-    "@types/styled-components": "^5.1.26",
     "babel-loader": "^8.2.5",
     "case-sensitive-paths-webpack-plugin": "^2.4.0",
     "clean-webpack-plugin": "^4.0.0",
@@ -39,16 +39,18 @@
     "env-cmd": "^10.1.0",
     "eslint": "^8.38.0",
     "eslint-config-airbnb-base": "^15.0.0",
+    "eslint-config-prettier": "^8.8.0",
     "eslint-plugin-aliens": "^1.0.10",
     "eslint-plugin-import": "^2.27.5",
+    "eslint-plugin-prettier": "^4.2.1",
     "html-webpack-plugin": "^5.5.0",
     "husky": ">=7",
     "image-webpack-loader": "^8.1.0",
     "jest": "^29.2.2",
     "lint-staged": ">=10",
     "mini-css-extract-plugin": "^2.6.0",
     "pinst": ">=2",
-    "prettier": "2.8.3",
+    "prettier": "^2.8.7",
     "style-loader": "^3.3.1",
     "ts-loader": "^9.3.0",
     "typescript": "^4.9.4",
@@ -68,11 +70,12 @@
     "react-color": "^2.19.3",
     "react-cookie": "^4.1.1",
     "react-dom": "^18.2.0",
+    "react-is": "^18.2.0",
     "react-outside-click-handler": "^1.3.0",
     "react-query": "^3.39.2",
-    "react-router-dom": "^6.4.2",
+    "react-router-dom": "^6.10.0",
     "recoil": "^0.7.6",
-    "styled-components": "^5.3.6",
+    "styled-components": "^5.3.9",
     "styled-normalize": "^8.0.7"
   },
   "lint-staged": {

services/admin/src/components/apply/remains/timeModal.tsx

@@ -8,9 +8,10 @@ import {
 } from 'react';
 import styled from 'styled-components';
 import { useGetRemainTime, useSetRemainTime } from '@/hooks/useRemainApi';
-import { getDayWithText, getTextWithDay } from '@/utils/translate';
+import { DayToKorean, getDayWithText } from '@/utils/translate';
 import { useModal } from '@/hooks/useModal';
 import { useForm } from '@/hooks/useForm';
+import { useKeyByValue } from '@/hooks/useKeyByValue';
 interface ITimeState {
   startDay: string;
   startHour: string;
@@ -28,30 +29,30 @@ const minToArray = Array(60)
   .fill(void 0)
   .map((_, idx) => `${idx < 10 ? '0' + String(idx) : String(idx)}`);
 
-const dayToArray = ['월', '화', '수', '목', '금', '토', '일'];
+const dayToArray: DayToKorean[] = ['월', '화', '수', '목', '금', '토', '일'];
 export default function TimeModal() {
   const { data: remainTime } = useGetRemainTime();
   const { state: timeState, setState: setTimeState } = useForm<ITimeState>({
-    startDay: getTextWithDay(remainTime?.start_day_of_week),
+    startDay: useKeyByValue(getDayWithText, remainTime?.start_day_of_week),
     startHour: remainTime?.start_time.slice(0, 2),
     startMin: remainTime?.start_time.slice(3, 5),
-    endDay: getTextWithDay(remainTime?.end_day_of_week),
+    endDay: useKeyByValue(getDayWithText, remainTime?.end_day_of_week),
     endHour: remainTime?.end_time.slice(0, 2),
     endMin: remainTime?.end_time.slice(3, 5),
   });
   const { closeModal } = useModal();
   const { mutate } = useSetRemainTime({
-    start_day_of_week: getDayWithText(timeState.startDay),
+    start_day_of_week: getDayWithText[timeState.startDay],
     start_time: `${timeState.startHour}:${timeState.startMin}:00`,
-    end_day_of_week: getDayWithText(timeState.endDay),
+    end_day_of_week: getDayWithText[timeState.endDay],
     end_time: `${timeState.endHour}:${timeState.endMin}:00`,
   });
   useEffect(() => {
     setTimeState({
-      startDay: getTextWithDay(remainTime?.start_day_of_week),
+      startDay: useKeyByValue(getDayWithText, remainTime?.start_day_of_week),
       startHour: remainTime?.start_time.slice(0, 2),
       startMin: remainTime?.start_time.slice(3, 5),
-      endDay: getTextWithDay(remainTime?.end_day_of_week),
+      endDay: useKeyByValue(getDayWithText ,remainTime?.end_day_of_week),
       endHour: remainTime?.end_time.slice(0, 2),
       endMin: remainTime?.end_time.slice(3, 5),
     });

services/admin/src/components/apply/study/DetailOptions.tsx

@@ -19,9 +19,9 @@ import {
 import { useModal } from '@/hooks/useModal';
 import { SetUseTimeModal } from '@/components/modals/SetUseTime';
 
-const sex = ['ALL', 'MALE', 'FEMALE'].map((i: SexType) => sexTypeToKorean(i));
+const sex = ['ALL', 'MALE', 'FEMALE'].map((i: SexType) => sexTypeToKorean[i]);
 
-const grade = [0, 1, 2, 3].map((i: GradeType) => gradeTypeToKorean(i));
+const grade = [0, 1, 2, 3].map((i: GradeType) => gradeTypeToKorean[i]);
 
 interface PropsType {
   onChangeSegmented: (sex: SexToKorean) => void;
@@ -67,15 +67,15 @@ export function CreateStudyRoomDetailOptions({
     <_Wrapper>
       <SegmentedBtn
         selectedArr={sex}
-        cur={sexTypeToKorean(available_sex)}
+        cur={sexTypeToKorean[available_sex]}
         onChange={onChangeSegmented}
       />
       <DropDown
         items={grade}
         placeholder="모든 학년"
         onChange={onChangeGrade}
         label="신청 가능 학년"
-        value={gradeTypeToKorean(available_grade)}
+        value={gradeTypeToKorean[available_grade]}
         margin={['top', 20]}
       />
       <_ColumWrapper>

services/admin/src/components/apply/study/DetailSummary.tsx

@@ -36,12 +36,12 @@ const detailOptions: DetailOption[] = [
   {
     name: '신청 가능 성별',
     value: 'available_sex',
-    func: (item: SexType) => sexTypeToKorean(item),
+    func: (item: SexType) => sexTypeToKorean[item],
   },
   {
     name: '신청 가능 학년',
     value: 'available_grade',
-    func: (item: GradeType) => gradeTypeToKorean(item),
+    func: (item: GradeType) => gradeTypeToKorean[item],
   },
 ];
 

services/admin/src/components/apply/study/SeatSetting.tsx

@@ -12,15 +12,16 @@ import OutsideClickHandler from 'react-outside-click-handler';
 import { SeatStatusType } from '@/apis/studyRooms/request';
 import {
   SeatStatusKorean,
-  seatStatusKoreanToEng,
   seatStatusToKorean,
 } from '@/utils/translate';
 import { SeatType } from '@/apis/studyRooms/response';
 import { SelectedModalType } from '@/context/modal';
 import { useStudyRoom } from '@/hooks/useStudyRoom';
+import { useKeyByValue } from '@/hooks/useKeyByValue';
+import React from "react";
 
 const seatStatus = ['AVAILABLE', 'UNAVAILABLE', 'EMPTY'].map(
-  (i: SeatStatusType) => seatStatusToKorean(i),
+  (i: SeatStatusType) => seatStatusToKorean[i],
 );
 
 interface PropsType {
@@ -43,7 +44,7 @@ export function SeatSetting({
   const { status, type, number } = studyRoomState.seat;
   const onChangeSeatStatus = (changingStatus: SeatStatusKorean) => {
     onChangeSeatSetting({
-      status: seatStatusKoreanToEng(changingStatus),
+      status: useKeyByValue(seatStatusToKorean , changingStatus) as SeatStatusType,
     });
   };
   const onChangeNumber = (e: ChangeEvent<HTMLInputElement>) => {
@@ -66,10 +67,10 @@ export function SeatSetting({
           placeholder="사용 가능"
           onChange={onChangeSeatStatus}
           label="자리 상태"
-          value={seatStatusToKorean(studyRoomState.seat?.status)}
+          value={seatStatusToKorean[studyRoomState.seat?.status]}
           margin={['top', 60]}
         />
-        {seatStatusToKorean(studyRoomState.seat?.status) === '사용 가능' && (
+        {seatStatusToKorean[studyRoomState.seat?.status] === '사용 가능' && (
           <Input
             label="자리 번호"
             type="number"
@@ -142,7 +143,7 @@ export function SeatSetting({
                 (status === 'UNAVAILABLE' && number && !type) ||
                 status === 'EMPTY'
               ) &&
-              seatStatusToKorean(studyRoomState.seat?.status) !== '사용 불가'
+              seatStatusToKorean[studyRoomState.seat?.status] !== '사용 불가'
             }
             kind="contained"
             color="primary"

services/admin/src/components/apply/study/StudyCard.tsx

@@ -24,7 +24,7 @@ export function StudyCard({
       <_Divider />
       <_Info>
         <Text color="primary" size="bodyM">
-          {gradeTypeToKorean(available_grade)} {sexTypeToKorean(available_sex)}
+          {gradeTypeToKorean[available_grade]} {sexTypeToKorean[available_sex]}
         </Text>
         <Text color="gray5" size="bodyM" margin={['left', 'auto']}>
           {in_use_headcount}/{total_available_seat}

services/admin/src/components/main/TagDropDown.tsx

@@ -5,6 +5,7 @@ import { Dispatch, SetStateAction, useMemo, useState } from 'react';
 import OutsideClickHandler from 'react-outside-click-handler';
 import styled from 'styled-components';
 import { Tag } from './Tag';
+import React from "react"
 
 interface PropsType {
   refetchSearchStudents: () => void;
@@ -38,12 +39,14 @@ export function TagDropDown({
     } else setCheckedTagList([...checkedTagList, tagElement]);
   };
 
+  const outSideClick = () => {
+    setClick(false);
+    refetchSearchStudents();
+  }
+
   return (
     <OutsideClickHandler
-      onOutsideClick={() => {
-        setClick(false);
-        refetchSearchStudents();
-      }}
+      onOutsideClick={outSideClick}
     >
       <_TagDropDown>
         <Button

services/admin/src/hooks/useKeyByValue.ts

@@ -0,0 +1,5 @@
+// object의 value를 이용하여 key를 받아옴
+
+export const useKeyByValue = <T, K>(object: T, value: K) => {
+  return Object.keys(object).find((key) => object[key] === value);
+};

services/admin/src/hooks/useStudyRoom.tsx

@@ -5,12 +5,14 @@ import {
   SeatSettingDispatchContext,
 } from '@/context/seatSetting';
 import {
-  gradeKoreanToEng,
   GradeToKorean,
-  sexKoreanToEng,
   SexToKorean,
+  gradeTypeToKorean,
+  sexTypeToKorean,
 } from '@/utils/translate';
 import { StudyRoomDetailResponse } from '@/apis/studyRooms/response';
+import { GradeType, SexType } from '@/apis/studyRooms/request';
+import { useKeyByValue } from './useKeyByValue';
 
 export const useStudyRoom = () => {
   const studyRoomState = useContext(SeatSettingContext);
@@ -49,7 +51,7 @@ export const useStudyRoom = () => {
       type: 'SET_STUDY_ROOM_OPTION',
       payload: {
         ...studyRoomState,
-        available_sex: sexKoreanToEng(sex),
+        available_sex: useKeyByValue(sexTypeToKorean, sex) as SexType,
       },
     });
   };
@@ -58,7 +60,7 @@ export const useStudyRoom = () => {
       type: 'SET_STUDY_ROOM_OPTION',
       payload: {
         ...studyRoomState,
-        available_grade: gradeKoreanToEng(grade),
+        available_grade: +useKeyByValue(gradeTypeToKorean, grade) as GradeType,
       },
     });
   };

services/admin/src/index.tsx

@@ -5,8 +5,7 @@ import { ReactQueryDevtools } from 'react-query/devtools';
 import { App } from './App';
 import { ModalProvider } from '@/context/modal';
 import { SeatSettingProvider } from '@/context/seatSetting';
-import { RouterProvider } from 'react-router-dom';
-import { Router } from './router';
+
 
 export const queryClient = new QueryClient({
   defaultOptions: {

services/admin/src/utils/tagColor.ts

@@ -1,8 +1,8 @@
 export enum tagTextColor {
-  '#F5F5F5' = '#595959',
-  '#FFF1F0' = '#CF1322',
-  '#FFF9DB' = '#874D00',
-  '#F5F9D6' = '#406407',
-  '#F5ECFB' = '#6A46A5',
-  '#ECF9FF' = '#0C408A',
+  '#F5F5F5' = '#595959', //회색
+  '#FFF1F0' = '#CF1322', //빨간색
+  '#FFF9DB' = '#874D00', //노란색
+  '#F5F9D6' = '#406407', //초록색
+  '#F5ECFB' = '#6A46A5', //보라색
+  '#ECF9FF' = '#0C408A', //파란색
 }