refactor: use createTranslation instead of drilling props

gsainfoteam · Nov 16, 2023 · db895b5 · db895b5
1 parent 55ad170
commit db895b5
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 19 deletions.
diff --git a/src/app/[lng]/mypage/MypageProfile.tsx b/src/app/[lng]/mypage/MypageProfile.tsx
@@ -1,3 +1,6 @@
+import { createTranslation } from '@/app/i18next';
+import { Locale } from '@/app/i18next/settings';
+
 interface IconProps {
   size?: string;
   color?: string;
@@ -49,9 +52,9 @@ export default async function MypageProfile({
   id,
   phone,
   email,
-  logout = '',
-  quit = '',
-}: MypageProfileProps) {
+  lng,
+}: MypageProfileProps & { lng: Locale }) {
+  const { t } = await createTranslation(lng, 'translation');
   return (
     <div>
       <div className="flex flex-col items-center mr-20">
@@ -71,8 +74,8 @@ export default async function MypageProfile({
           </div>
         </div>
         <div className="flex flex-row items-center ">
-          <UnderLinedText text={logout}></UnderLinedText>
-          <UnderLinedText text={quit}></UnderLinedText>
+          <UnderLinedText text={t('mypage.logout')}></UnderLinedText>
+          <UnderLinedText text={t('mypage.quit')}></UnderLinedText>
         </div>
       </div>
     </div>

diff --git a/src/app/[lng]/mypage/MypageTable.tsx b/src/app/[lng]/mypage/MypageTable.tsx
@@ -1,5 +1,7 @@
 import dayjs from 'dayjs';
 
+import { createTranslation } from '@/app/i18next';
+import { Locale } from '@/app/i18next/settings';
 import LazyCat from '@/assets/lazy-cat.svg';
 
 // interface Tag {
@@ -26,8 +28,6 @@ interface MypageTableProps {
   title: string;
   articles: Notice[];
   link: string;
-  noArticle: string;
-  totalList: string;
 }
 
 interface UnderLinedTextProps {
@@ -40,13 +40,13 @@ const UnderLinedText = ({ text }: UnderLinedTextProps) => {
   );
 };
 
-const MypageTable = ({
+const MypageTable = async ({
   title,
   articles,
   link,
-  noArticle,
-  totalList,
-}: MypageTableProps) => {
+  lng,
+}: MypageTableProps & { lng: Locale }) => {
+  const { t } = await createTranslation(lng, 'translation');
   return (
     <div className="rounded-lg shadow-md bg-white w-[550px] xl:w-[600px]">
       <div className="w-full border border-white border-collapse border-spacing-0 rounded-lg">
@@ -56,7 +56,7 @@ const MypageTable = ({
           </div>
           <div className="w-1/4 rounded-tr-10 text-right">
             <div className="flex items-end justify-end text-s text-regular text-white h-full">
-              <UnderLinedText text={totalList}></UnderLinedText>
+              <UnderLinedText text={t('mypage.totalList')}></UnderLinedText>
             </div>
           </div>
         </div>
@@ -92,7 +92,7 @@ const MypageTable = ({
           <div className="flex flex-col h-full justify-center items-center p-30 bg-colorless rounded-bl-0 rounded-br-10">
             <LazyCat className="p-5 w-50 h-50" />
             <div className="text-regular m-5 text-secondayText">
-              {noArticle}
+              {t('mypage.noArticle')}
             </div>
           </div>
         )}

diff --git a/src/app/[lng]/mypage/page.tsx b/src/app/[lng]/mypage/page.tsx
@@ -17,8 +17,7 @@ export default async function MyPage({
       <div className="mt-10 w-full flex h-1500 xl:h-1000 justify-center items-center flex-col xl:flex-row gap-20">
         <div className="flex flex-col relative m-10">
           <MypageProfile
-            logout={t('mypage.logout')}
-            quit={t('mypage.quit')}
+            lng={lng}
             name={'김지현'}
             id={'201910808'}
             email={'ss@gm.gist.ac.kr'}
@@ -31,17 +30,15 @@ export default async function MyPage({
         <div className="flex justify-center items-center flex-col">
           <div className="mb-10 p-0 xl:p-50">
             <MypageTable
-              totalList={t('mypage.totalList')}
-              noArticle={t('mypage.noArticle')}
+              lng={lng}
               title={t('mypage.myNotice')}
               articles={[]}
               link={''}
             />
           </div>
           <div className="p-0 xl:p-50">
             <MypageTable
-              totalList={t('mypage.totalList')}
-              noArticle={t('mypage.noArticle')}
+              lng={lng}
               title={t('mypage.remindNotice')}
               articles={[
                 { title: '제목1', createdAt: '2021-09-01' },