Merge pull request #136 from Kusitms-29th-ASAP/feat/#135

src/apis/axios.ts

@@ -7,11 +7,19 @@ const getToken = () => {
   return null;
 };
 
+const getLanguage = () => {
+  if (typeof window !== "undefined") {
+    return localStorage.getItem("language");
+  }
+  return null;
+};
+
 const Axios = axios.create({
   baseURL: process.env.NEXT_PUBLIC_BASE_URL,
   headers: {
     Authorization: `Bearer ${getToken()}`,
     "Content-Type": "application/json;charset=UTF-8",
+    "Accept-Language": `${getLanguage()}`,
   },
 });
 export default Axios;

src/app/school/homeGuide/reply/page.tsx

@@ -4,17 +4,27 @@ import Button from "@/components/common/Button";
 import Topbar from "@/components/common/Topbar";
 import styled from "styled-components";
 import Image from "next/image";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import Toast from "@/components/common/Toast";
 import FormPopup from "@/components/school/homeGuide/FormPopup";
+import { ToastMessages } from "@/data/toastMessagesData";
 
 const HomeGuideForm = () => {
   const [writeForm, setWriteForm] = useState(false);
   const [showToast, setShowToast] = useState(false);
+  const [language, setLanguage] = useState<string>("ko");
+
+  useEffect(() => {
+    const lang = localStorage.getItem("language") || "ko";
+    setLanguage(lang);
+  }, []);
+
   const handleWriteFormClick = () => {
     setWriteForm(!writeForm);
   };
 
+  const message = ToastMessages[language as keyof typeof ToastMessages];
+
   return (
     <Container>
       <div>
@@ -37,7 +47,7 @@ const HomeGuideForm = () => {
       )}
       {showToast && (
         <Toast
-          message="제출이 완료되었어요!"
+          message={message}
           type="basic"
           duration={3000}
           onClose={() => setShowToast(false)}

src/components/common/ListBox.tsx

@@ -25,6 +25,7 @@ export interface ListBoxProps {
   onClick?: () => void;
   onDelete?: () => void;
 }
+
 const ListBox = (props: ListBoxProps) => {
   const {
     id,
@@ -45,27 +46,47 @@ const ListBox = (props: ListBoxProps) => {
   } = props;
 
   const [futureDate, setFutureDate] = useState("");
-  const [futureWeekday, setFutureWeekday] = useState("");
+  const [language, setLanguage] = useState<string>("ko");
+
+  useEffect(() => {
+    setLanguage(localStorage.getItem("language") || "ko");
+  }, []);
 
   useEffect(() => {
     const now = new Date();
     const future = new Date(now.setDate(now.getDate() + dday));
-    const futureDateString = future.toLocaleDateString("ko-KR", {
-      weekday: "long",
-      year: "numeric",
-      month: "long",
-      day: "numeric",
-    });
-    setFutureDate(futureDateString);
-    setFutureWeekday(
-      future
-        .toLocaleDateString("ko-KR", { weekday: "short" })
-        .replace("요일", "")
-    );
-  }, [dday]);
 
-  const month = futureDate.split(" ")[1];
-  const day = futureDate.split(" ")[2];
+    const formatDateString = (date: Date) => {
+      const options: Intl.DateTimeFormatOptions = {
+        month: "short",
+        day: "numeric",
+      };
+
+      let formattedDate = date.toLocaleDateString(language, options);
+
+      switch (language) {
+        case "ko":
+          return `${formattedDate} (${future.toLocaleDateString(language, {
+            weekday: "short",
+          })}) 까지`;
+        case "en":
+          return `By ${formattedDate}`;
+        case "zh":
+          return `${formattedDate}`;
+        case "ja":
+          return `${formattedDate}`;
+        case "vi":
+          return `Trước ${formattedDate}`;
+        case "pi":
+          const day = date.getDate();
+          return `Hanggang ${day} Ago`;
+        default:
+          return `${formattedDate} 까지`;
+      }
+    };
+
+    setFutureDate(formatDateString(future));
+  }, [dday, language]);
 
   let listboxClassName = listboxType;
   if (color === "orange") {
@@ -99,7 +120,7 @@ const ListBox = (props: ListBoxProps) => {
                 </span>
               )}
               <span style={{ fontSize: "12px", fontWeight: "500" }}>
-                {month} {day} ({futureWeekday}) 까지
+                {futureDate}
               </span>
             </>
           )}

src/components/school/home/HomeGuideRemind.tsx

@@ -3,12 +3,84 @@ import WhiteBox from "../WhiteBox";
 import More from "@/components/common/More";
 import ListBox from "@/components/common/ListBox";
 import { useRouter } from "next/navigation";
+import { useEffect, useState } from "react";
+
+const textContent = {
+  ko: {
+    listBox1: {
+      text: "현장체험학습 실시 찬반의견 조사",
+      time: "회신 필요",
+    },
+    listBox2: {
+      text: "양원숲 토닥토닥 상담실 운영 안내 및 보호자 동의 안내",
+      time: "제출 완료",
+    },
+  },
+  en: {
+    listBox1: {
+      text: "Field Trip Participation Survey",
+      time: "Reply-needed",
+    },
+    listBox2: {
+      text: "After-School Program Form",
+      time: "Submitted",
+    },
+  },
+  zh: {
+    listBox1: {
+      text: "郊游参与调查",
+      time: "需回复",
+    },
+    listBox2: {
+      text: "课后活动申请表",
+      time: "提交完成",
+    },
+  },
+  ja: {
+    listBox1: {
+      text: "遠足参加調査",
+      time: "回答必要",
+    },
+    listBox2: {
+      text: "放課後プログラム申込書",
+      time: "提出済み",
+    },
+  },
+  vi: {
+    listBox1: {
+      text: "Khảo sát tham gia dã ngoại",
+      time: "Cần-hồi đáp",
+    },
+    listBox2: {
+      text: "Đăng ký ngoại khóa",
+      time: "Đã nộp",
+    },
+  },
+  pi: {
+    listBox1: {
+      text: "Suri sa paglahok sa picnic",
+      time: "Walang-tugon",
+    },
+    listBox2: {
+      text: "Form para sa after-school",
+      time: "Nai-submit na",
+    },
+  },
+};
 
 const HomeGuideRemind = () => {
   const router = useRouter();
   const handleDetailClick = () => {
     router.push("/school/homeGuide");
   };
+  const [language, setLanguage] = useState<string | null>("ko");
+
+  useEffect(() => {
+    setLanguage(localStorage.getItem("language") || "ko");
+  }, []);
+
+  const currentText =
+    textContent[language as keyof typeof textContent] || textContent.ko;
 
   return (
     <WhiteBox>
@@ -20,14 +92,14 @@ const HomeGuideRemind = () => {
       </TitleBox>
       <ListBox
         color="orange"
-        text="현장체험학습 실시 찬반의견 조사"
-        time="회신 필요"
+        text={currentText.listBox1.text}
+        time={currentText.listBox1.time}
         dday={2}
       />
       <ListBox
         color="mint"
-        text="양원숲 토닥토닥 상담실 운영 안내 및 보호자 동의 안내"
-        time="제출 완료"
+        text={currentText.listBox2.text}
+        time={currentText.listBox2.time}
         dday={-2}
       />
     </WhiteBox>

src/components/school/homeGuide/FormPopup.tsx

@@ -1,8 +1,9 @@
 import styled from "styled-components";
-import { Dispatch, useState } from "react";
+import { Dispatch, useState, useEffect } from "react";
 import Popup from "@/components/common/Popup";
 import Button from "@/components/common/Button";
 import Checkbox from "@/components/common/Checkbox";
+import { HomeGuideFormPopup } from "@/data/homeGuideData";
 
 interface FormPopupProps {
   onClose: () => void;
@@ -11,41 +12,49 @@ interface FormPopupProps {
 
 const FormPopup = (props: FormPopupProps) => {
   const [selectedOption, setSelectedOption] = useState<number | null>(null);
+  const [language, setLanguage] = useState<string>("ko");
+
   const { onClose, setShowToast } = props;
 
-  const Title = `3학년 현장체험학습 실시 여부에 \n동의하시겠습니까?`;
+  useEffect(() => {
+    const lang = localStorage.getItem("language") || "ko";
+    setLanguage(lang);
+  }, []);
+
+  const data = HomeGuideFormPopup[language as keyof typeof HomeGuideFormPopup];
 
   const isButtonEnabled = selectedOption !== null;
 
   const handleButtonClick = () => {
     onClose();
     setShowToast && setShowToast(true);
   };
+
   const handleCheckboxChange = (option: number) => {
     setSelectedOption(option);
   };
 
   return (
     <>
-      <Popup onClose={onClose} title={Title} height="394px">
+      <Popup onClose={onClose} title={data.title} height="394px">
         <ContentBox>
           <CheckBoxContainer>
             <Checkbox
               checkboxType="checkBtn"
-              label="동의함"
+              label={data.agree}
               checked={selectedOption === 0}
               onChange={() => handleCheckboxChange(0)}
             />
             <Checkbox
               checkboxType="checkBtn"
-              label="동의하지 않음"
+              label={data.disagree}
               checked={selectedOption === 1}
               onChange={() => handleCheckboxChange(1)}
             />
           </CheckBoxContainer>
 
           <Button
-            text="제출하기"
+            text={data.submit}
             onClick={handleButtonClick}
             disabled={!isButtonEnabled}
           />

src/components/school/homeGuide/ReplyCompleted.tsx

@@ -1,11 +1,32 @@
 import CustomInput from "@/components/common/CustomInput";
 import ListBox from "@/components/common/ListBox";
-import { HomeGideReplyCompletedData } from "@/data/notifyData";
-import { useState } from "react";
+import { HomeGuideReplyCompletedData } from "@/data/notifyData";
+import { useState, useEffect } from "react";
 import styled from "styled-components";
 
+const weekTranslations = {
+  ko: "지난주",
+  en: "Last week",
+  zh: "上周",
+  ja: "先週",
+  vi: "Tuần trước",
+};
+
 const ReplyCompleted = () => {
-  const [selected, setSelected] = useState<string>("지난주");
+  const [language, setLanguage] = useState<"ko" | "en" | "zh" | "ja" | "vi">(
+    "ko"
+  );
+  const selected = weekTranslations[language];
+
+  useEffect(() => {
+    const lang = localStorage.getItem("language") as
+      | "ko"
+      | "en"
+      | "zh"
+      | "ja"
+      | "vi";
+    setLanguage(lang);
+  }, []);
 
   return (
     <>
@@ -17,13 +38,13 @@ const ReplyCompleted = () => {
         <CustomInput inputType="select" value={selected} onChange={() => {}} />
       </Container>
       <Background>
-        {HomeGideReplyCompletedData.map((data) => (
+        {HomeGuideReplyCompletedData.map((data) => (
           <ListBox
             key={data.id}
-            time={"제출 완료"}
+            time={data.content[language].time}
             listboxType={"content"}
-            content1={data.content1}
-            content2={data.content2}
+            content1={data.content[language].content1}
+            content2={data.content[language].content2}
             color={"mint"}
           />
         ))}