refactor: make string constant #39

src/pages/Call.tsx

@@ -15,13 +15,17 @@ import {
   MILLISECOND,
   SINGLE_CALL,
   GROUP_CALL,
+  TRANSLATION,
+  PAGE,
 } from "@utils/constant";
 import { toast, Id } from "react-toastify";
 import VoteToast from "@components/Call/VoteToast";
 import TopicModal from "@components/Call/TopicModal";
 import Loading from "@utils/Loading";
+import { useTranslation } from "react-i18next";
 
 const Call = () => {
+  const { t } = useTranslation(TRANSLATION, { keyPrefix: PAGE.CALL });
   const navigate = useNavigate();
   const [opponentStatus, setOpponentStatus] = useState<boolean[]>([]);
   const [isMuted, setIsMuted] = useState(false);

src/pages/Login.tsx

@@ -1,5 +1,5 @@
 import React, { useCallback, useEffect, useState } from "react";
-import { API_URL } from "@utils/constant";
+import { API_URL, PAGE, TRANSLATION } from "@utils/constant";
 import { useNavigate } from "react-router";
 import Loading from "@utils/Loading";
 import { getCookie } from "@utils/manageCookie";
@@ -8,7 +8,7 @@ import { PulseLoader } from "react-spinners";
 
 const Login = () => {
   const navigate = useNavigate();
-  const { t } = useTranslation("translation", { keyPrefix: "login" });
+  const { t } = useTranslation(TRANSLATION, { keyPrefix: PAGE.LOGIN });
   const [login, setLogin] = useState(false);
   const [loading, setLoading] = useState(false);
 

src/pages/Main.tsx

@@ -1,6 +1,12 @@
 import { useEffect, useContext, useCallback } from "react";
 import { AuthContext } from "@contexts/AuthProvider";
-import { API_URL, GROUP_CALL, SINGLE_CALL } from "@utils/constant";
+import {
+  API_URL,
+  GROUP_CALL,
+  PAGE,
+  SINGLE_CALL,
+  TRANSLATION,
+} from "@utils/constant";
 import { useNavigate } from "react-router";
 import axios from "axios";
 import Loading from "@utils/Loading";
@@ -13,7 +19,7 @@ import { useTranslation } from "react-i18next";
 
 const Main = () => {
   const navigate = useNavigate();
-  const { t } = useTranslation("translation", { keyPrefix: "main" });
+  const { t } = useTranslation(TRANSLATION, { keyPrefix: PAGE.MAIN });
   const { myInfo, setMyInfo, isLoading, setIsLoading } =
     useContext(AuthContext);
   const { socket, setSocket } = useContext(SocketContext);

src/pages/Profile.tsx

@@ -7,12 +7,11 @@ import BasicButton from "@utils/BasicButton";
 import Header from "@utils/Header";
 import { useTranslation } from "react-i18next";
 import axios from "axios";
-import { API_URL } from "@utils/constant";
+import { API_URL, PAGE, TRANSLATION } from "@utils/constant";
 
 const Profile = () => {
   const navigate = useNavigate();
-  const { t } = useTranslation("translation", { keyPrefix: "profile" });
-
+  const { t } = useTranslation(TRANSLATION, { keyPrefix: PAGE.PROFILE });
   const logout = useCallback(async () => {
     await axios.get(`${API_URL}/auth/logout`);
     alert("로그아웃 되었습니다.");

src/pages/Setting.tsx

@@ -6,13 +6,13 @@ import { CallContext, CallActionType } from "@contexts/CallProvider";
 import { toast } from "react-toastify";
 import BasicButton from "@utils/BasicButton";
 import MicrophoneSoundChecker from "@utils/MicrophoneSoundChecker";
-import { MIC_STATUS, SINGLE_CALL } from "@utils/constant";
+import { MIC_STATUS, PAGE, SINGLE_CALL, TRANSLATION } from "@utils/constant";
 import Loading from "@utils/Loading";
 import { useTranslation } from "react-i18next";
 
 const Setting = () => {
   const navigate = useNavigate();
-  const { t } = useTranslation();
+  const { t } = useTranslation(TRANSLATION);
   const [isDone, setIsDone] = useState(false);
   const [micStatus, setMicStatus] = useState(MIC_STATUS.DENIED);
   const { myInfo } = useContext(AuthContext);
@@ -100,19 +100,27 @@ const Setting = () => {
   ) : (
     <div className="flex flex-col w-full h-full justify-center items-center">
       <div>
-        {t(callInfo.roomType === SINGLE_CALL.TYPE ? "singleCall" : "groupCall")}
+        {t(
+          `${PAGE.MAIN}.` +
+            (callInfo.roomType === SINGLE_CALL.TYPE
+              ? "singleCall"
+              : "groupCall")
+        )}
       </div>
-      <div>음성 통화를 위해 마이크 권한을 허용으로 설정해 주세요!</div>
+      <div>{t(`${PAGE.SETTING}.info.permission`)}</div>
       <div className="h-[50%]">
         <MicrophoneSoundChecker isDone={isDone} />
       </div>
       <div className="h-[10%]">
         <BasicButton
           onClick={goToWaiting}
-          text="매칭 시작하기"
+          text={t(`${PAGE.SETTING}.button.next`)}
           disabled={micStatus !== MIC_STATUS.GRANTED}
         />
-        <BasicButton onClick={goToMain} text="뒤로 가기" />
+        <BasicButton
+          onClick={goToMain}
+          text={t(`${PAGE.SETTING}.button.back`)}
+        />
       </div>
     </div>
   );

src/pages/Waiting.tsx

@@ -7,14 +7,14 @@ import { AuthContext } from "@contexts/AuthProvider";
 import { CallContext, CallActionType } from "@contexts/CallProvider";
 import { toast } from "react-toastify";
 import "react-toastify/dist/ReactToastify.css";
-import { COUNT, MILLISECOND } from "@utils/constant";
+import { COUNT, MILLISECOND, PAGE, TRANSLATION } from "@utils/constant";
 import { OpponentInfo } from "@typings/front";
 import { useTranslation } from "react-i18next";
 import { SINGLE_CALL } from "@utils/constant";
 
 const Waiting = () => {
   const navigate = useNavigate();
-  const { t } = useTranslation();
+  const { t } = useTranslation(TRANSLATION);
   const [matched, setMatched] = useState(false);
   const { myInfo } = useContext(AuthContext);
   const { socket } = useContext(SocketContext);
@@ -94,16 +94,19 @@ const Waiting = () => {
     <Loading />
   ) : (
     <>
-      <Loading text={"상대방을 찾는 중입니다."}>
+      <Loading text={t(`${PAGE.WAITING}.info`)}>
         <div>
           {t(
-            callInfo.roomType === SINGLE_CALL.TYPE ? "singleCall" : "groupCall"
+            `${PAGE.MAIN}.` +
+              (callInfo.roomType === SINGLE_CALL.TYPE
+                ? "singleCall"
+                : "groupCall")
           )}
         </div>
         <div className="my-auto">
           <BasicButton
             onClick={cancelWaiting}
-            text="매칭 취소하기"
+            text={t(`${PAGE.WAITING}.cancel`)}
             disabled={matched}
           />
         </div>

src/utils/constant.ts

@@ -76,3 +76,15 @@ export const ICE_SERVER = [
     credential: process.env.REACT_APP_TURN_PASSWORD,
   },
 ];
+
+export const PAGE = {
+  CALL: "call",
+  LOGIN: "login",
+  MAIN: "main",
+  NOTFOUND: "notfound",
+  PROFILE: "profile",
+  SETTING: "setting",
+  WAITING: "waiting",
+};
+
+export const TRANSLATION = "translation";