🌐 다국어지원 리팩토링

app/[locale]/about/directions/LocationGuide.tsx

@@ -7,16 +7,15 @@ import { getPath } from '@/utils/page';
 const staffPath = getPath(staff);
 
 export default function LocationGuide() {
-  const t = useTranslations('Footer');
-  const tContent = useTranslations('Content');
+  const t = useTranslations('Page.about.directions');
 
   return (
     <p className="mb-8 text-md leading-[200%]">
-      컴퓨터공학부는 서울대학교 관악 301동(신공학관1)에 있습니다.
+      {t('description')}
       <br />
-      {tContent('주소')}: {t('address')}
+      {t('address')}: {t('addressValue')}
       <br />
-      {tContent('전화')}:{' '}
+      {t('contact')}:{' '}
       <Link href={staffPath} className="text-link hover:underline">
         학부 연락처
       </Link>

app/[locale]/about/future-careers/CareerCompanies.tsx

@@ -17,7 +17,7 @@ import Form from '@/components/form/Form';
 import { handleServerResponse } from '@/utils/serverActionError';
 
 export default function CareerCompanies({ companies }: { companies: FutureCareers['companies'] }) {
-  const t = useTranslations('Content');
+  const t = useTranslations('Page.about.futureCareers');
 
   const [showCreateForm, toggleCreateForm] = useReducer((x) => !x, false);
 
@@ -32,7 +32,7 @@ export default function CareerCompanies({ companies }: { companies: FutureCareer
   return (
     <div className="mt-11 sm:max-w-fit">
       <div className="mb-3 flex items-center justify-between gap-2">
-        <h3 className="text-base font-bold">{t('졸업생 창업 기업')}</h3>
+        <h3 className="text-base font-bold">{t('graduateStartups')}</h3>
         {/* UI가 과하게 깨지는 관계로 모바일 버전에서는 편집 X */}
         <div className="hidden sm:block">
           <LoginVisible staff>
@@ -56,14 +56,14 @@ export default function CareerCompanies({ companies }: { companies: FutureCareer
 const TABLE_COLUMN_SIZE = ['sm:w-[3rem]', 'sm:w-[12.5rem]', 'sm:w-80', 'sm:w-20', 'sm:w-32'];
 
 function CompanyTableHeader() {
-  const t = useTranslations('Content');
+  const t = useTranslations('Page.about.futureCareers');
 
   return (
     <div className="hidden h-10 items-center gap-3 whitespace-nowrap border-b border-neutral-200 sm:flex sm:px-3">
       <p className={TABLE_COLUMN_SIZE[0]}>{t('연번')}</p>
-      <p className={`${TABLE_COLUMN_SIZE[1]} pl-2`}>{t('창업 기업명')}</p>
-      <p className={`${TABLE_COLUMN_SIZE[2]} pl-2`}>{t('홈페이지')}</p>
-      <p className={`${TABLE_COLUMN_SIZE[3]} pl-2`}>{t('창업연도')}</p>
+      <p className={`${TABLE_COLUMN_SIZE[1]} pl-2`}>{t('startupName')}</p>
+      <p className={`${TABLE_COLUMN_SIZE[2]} pl-2`}>{t('startupWebsite')}</p>
+      <p className={`${TABLE_COLUMN_SIZE[3]} pl-2`}>{t('startupYear')}</p>
       {/* 표 본문과 UI 정렬을 맞추기 위함 */}
       <LoginVisible staff>
         <p className={`hidden shrink-0 sm:block ${TABLE_COLUMN_SIZE[4]}`} />

app/[locale]/about/future-careers/CareerStat.tsx

@@ -12,13 +12,13 @@ import { Link } from '@/i18n/routing';
 import { getPath } from '@/utils/page';
 
 export const CAREER_STAT_ROWS = ['삼성', 'LG', '기타 대기업', '중소기업', '진학', '기타'];
-export const CAREER_STAT_COLS = ['학부', '석사', '박사'];
+export const CAREER_STAT_COLS = ['bachelor', 'master', 'doctor'];
 
 const careerPath = getPath(futureCareers);
 
 export default function CareerStat({ stat }: { stat: FutureCareers['stat'] }) {
   const [idx, setIdx] = useState(0);
-  const t = useTranslations('Content');
+  const t = useTranslations('Page.about.futureCareers');
 
   const year = stat[idx].year;
   const yearStat = stat.find((x) => x.year === year);
@@ -29,7 +29,7 @@ export default function CareerStat({ stat }: { stat: FutureCareers['stat'] }) {
     <div className="mt-7 flex flex-col gap-3">
       <div className="flex justify-between sm:w-[432px]">
         <div className="flex items-center gap-2">
-          <h3 className="text-base font-bold">{t('졸업생 진로 현황')}</h3>
+          <h3 className="text-base font-bold">{t('graduateCareerStatus')}</h3>
           <Dropdown
             contents={stat.map((x) => x.year.toString())}
             selectedIndex={idx}
@@ -68,12 +68,14 @@ export default function CareerStat({ stat }: { stat: FutureCareers['stat'] }) {
 }
 
 function TableHeader() {
+  const t = useTranslations('Page.about.futureCareers');
+
   return (
     <div className="flex h-8 flex-1 border-b border-b-neutral-300 bg-neutral-100">
       <div className="w-[6.25rem]" />
       {CAREER_STAT_COLS.map((colName) => (
         <div key={colName} className="flex flex-1 items-center justify-center">
-          <p className="text-sm">{colName}</p>
+          <p className="text-sm">{t(colName)}</p>
         </div>
       ))}
     </div>

app/[locale]/about/overview/page.tsx

@@ -39,7 +39,7 @@ const overviewPath = getPath(overview);
 export default async function OverviewPage(props: OverviewPageProps) {
   const params = await props.params;
   const { description, attachments, imageURL } = await getOverview(params.locale);
-  const t = await getTranslations('Content');
+  const t = await getTranslations('Page.about.overview');
 
   return (
     <PageLayout titleType="big" removePadding>
@@ -66,7 +66,7 @@ export default async function OverviewPage(props: OverviewPageProps) {
         </div>
       </div>
       <div className="px-5 pb-16 pt-10 sm:pb-[7.88rem] sm:pl-[6.25rem] sm:pr-[22.5rem]">
-        <h2 className="mb-6 text-base font-semibold">{t('학부 소개 책자')}</h2>
+        <h2 className="mb-6 text-base font-semibold">{t('brochure')}</h2>
         <div className="mb-10 flex flex-col gap-6 sm:flex-row">
           <Image src={brochure1.src} width={227} height={320} alt="소개 책자" />
           <Image src={brochure2.src} width={227} height={320} alt="소개 책자" />

app/[locale]/academics/components/courses/CourseCard.tsx

@@ -1,7 +1,7 @@
 import { useTranslations } from 'next-intl';
 import { useEffect, useReducer, useRef } from 'react';
 
-import { Course, GRADE, SortOption } from '@/apis/types/academics';
+import { Course, SortOption } from '@/apis/types/academics';
 import styles from '@/app/[locale]/academics/components/courses/style.module.css';
 import { useTypedLocale } from '@/utils/hooks/useTypedLocale';
 
@@ -12,11 +12,11 @@ interface CourseCardProps {
 
 const useSortedProperties = (course: Course, selectedOption: SortOption) => {
   const lang = useTypedLocale();
-  const t = useTranslations('Tag');
+  const t = useTranslations('Page.courses');
 
   const classification = course[lang].classification;
-  const grade = t(GRADE[course.grade]);
-  const credit = t(`${course.credit}학점`);
+  const grade = t('grade', { grade: course.grade });
+  const credit = t('credit', { credit: course.credit });
 
   switch (selectedOption) {
     case '교과목 구분':

app/[locale]/academics/components/courses/CourseListHeader.tsx

@@ -4,16 +4,26 @@ import { useTranslations } from 'next-intl';
 
 import { COURSE_ROW_ITEM_WIDTH } from '@/app/[locale]/academics/components/courses/CourseListRow';
 
+/**
+ * Grade mapping
+ * 0: 대학원
+ * 1: 1학년
+ * 2: 2학년
+ * 3: 3학년
+ * 4: 4학년
+ * 5: 학년
+ */
+
 export default function CourseListHeader() {
-  const t = useTranslations('Content');
+  const t = useTranslations('Page.courses');
 
   return (
     <h5 className="hidden h-11 items-center whitespace-nowrap border-y border-neutral-100 bg-neutral-100 px-4 text-md sm:flex">
-      <span className={COURSE_ROW_ITEM_WIDTH.name}>{t('교과목명')}</span>
-      <span className={COURSE_ROW_ITEM_WIDTH.classification}>{t('교과목 구분')}</span>
-      <span className={COURSE_ROW_ITEM_WIDTH.code}>{t('교과목 번호')}</span>
-      <span className={COURSE_ROW_ITEM_WIDTH.credit}>{t('학점')}</span>
-      <span className={COURSE_ROW_ITEM_WIDTH.grade}>{t('학년')}</span>
+      <span className={COURSE_ROW_ITEM_WIDTH.name}>{t('name')}</span>
+      <span className={COURSE_ROW_ITEM_WIDTH.classification}>{t('classification')}</span>
+      <span className={COURSE_ROW_ITEM_WIDTH.code}>{t('code')}</span>
+      <span className={COURSE_ROW_ITEM_WIDTH.credit}>{t('credit', { credit: 0 })}</span>
+      <span className={COURSE_ROW_ITEM_WIDTH.grade}>{t('grade', { grade: 5 })}</span>
     </h5>
   );
 }

app/[locale]/academics/components/courses/CourseListRow.tsx

@@ -2,7 +2,7 @@
 
 import { useTranslations } from 'next-intl';
 
-import { Course, GRADE } from '@/apis/types/academics';
+import { Course } from '@/apis/types/academics';
 import CourseDetailModal from '@/app/[locale]/academics/components/courses/CourseDetailModal';
 import useModal from '@/utils/hooks/useModal';
 import { useTypedLocale } from '@/utils/hooks/useTypedLocale';
@@ -67,24 +67,24 @@ function CodeCell({ code }: { code: string }) {
 }
 
 function CreditCell({ credit }: { credit: number }) {
-  const t = useTranslations('Tag');
+  const t = useTranslations('Page.courses');
 
   return (
     <span className={`${COURSE_ROW_ITEM_WIDTH.credit} order-5 text-neutral-400 sm:order-4 sm:pl-2`}>
       {credit}
-      <span className="sm:hidden">{t('학점')}</span>
+      <span className="sm:hidden">{t('credit', { credit })}</span>
     </span>
   );
 }
 
 function GradeCell({ grade }: { grade: number }) {
-  const t = useTranslations('Tag');
+  const t = useTranslations('Page.courses');
 
   return (
     <span
       className={`${COURSE_ROW_ITEM_WIDTH.grade} order-4 whitespace-nowrap pr-1 text-neutral-400 sm:order-5 sm:pr-0`}
     >
-      {t(GRADE[grade])}
+      {t('grade', { grade })}
     </span>
   );
 }

app/[locale]/academics/components/courses/CourseToolbar.tsx

@@ -48,22 +48,22 @@ interface ViewOptionsProps {
 }
 
 function ViewOptions({ selectedOption, changeOption }: ViewOptionsProps) {
-  const t = useTranslations('Content');
+  const t = useTranslations('Page.courses');
 
   return (
     <div className="flex gap-3 text-md text-neutral-400">
       <span
         className={selectedOption === '목록형' ? 'text-neutral-800' : 'cursor-pointer'}
         onClick={() => changeOption('목록형')}
       >
-        {t('목록형')}
+        {t('listView')}
       </span>
       <span>|</span>
       <span
         className={selectedOption === '카드형' ? 'text-neutral-800' : 'cursor-pointer'}
         onClick={() => changeOption('카드형')}
       >
-        {t('카드형')}
+        {t('cardView')}
       </span>
     </div>
   );
@@ -74,18 +74,18 @@ interface SortOptionsProps {
   changeOption: (option: SortOption) => void;
 }
 
-export const SORT_OPTIONS: SortOption[] = ['학년', '교과목 구분', '학점'];
+const SORT_OPTIONS: SortOption[] = ['학년', '교과목 구분', '학점'];
 
 function SortOptions({ selectedOption, changeOption }: SortOptionsProps) {
   return (
     <div className="flex flex-wrap items-center gap-2.5">
       {SORT_OPTIONS.map((option) =>
         option === selectedOption ? (
-          <Tag key={option} tag={option} defaultStyle="fill" />
+          <Tag key={option} tag={{ id: option, text: option }} defaultStyle="fill" />
         ) : (
           <Tag
             key={option}
-            tag={option}
+            tag={{ id: option, text: option }}
             hoverStyle="fill"
             defaultStyle="orange"
             onClick={() => changeOption(option)}

app/[locale]/academics/graduate/courses/GraduateCoursePageContent.tsx

@@ -20,7 +20,7 @@ interface CoursePageContentProps {
 export default function GraduateCoursePageContent({ courses, language }: CoursePageContentProps) {
   const { selectedOption, changeOptions } = useCourseToolbar();
   const { isMobile } = useResponsive();
-  const t = useTranslations('Content');
+  const t = useTranslations('Page.courses');
 
   if (isMobile && selectedOption.view !== '목록형') {
     changeOptions({ type: 'view', option: '목록형' });
@@ -31,7 +31,7 @@ export default function GraduateCoursePageContent({ courses, language }: CourseP
       <LoginVisible staff>
         <AddCourseButton studentType="graduate" />
       </LoginVisible>
-      <h4 className="mb-2 text-[17px] font-bold sm:mb-8 sm:pl-5">{t('교과목 정보')}</h4>
+      <h4 className="mb-2 text-[17px] font-bold sm:mb-8 sm:pl-5">{t('courseInformation')}</h4>
       <CourseToolbar
         viewOption={selectedOption.view}
         sortOption={selectedOption.sort}

app/[locale]/academics/undergraduate/courses/UndergraduateCoursePageContent.tsx

@@ -23,7 +23,7 @@ export default function UndergraduateCoursePageContent({
 }: CoursePageContentProps) {
   const { selectedOption, changeOptions } = useCourseToolbar();
   const { isMobile } = useResponsive();
-  const t = useTranslations('Content');
+  const t = useTranslations('Page.courses');
   const sortedCourses = getSortedCourses(courses, selectedOption.sort);
 
   if (isMobile && selectedOption.view !== '목록형') {
@@ -35,7 +35,7 @@ export default function UndergraduateCoursePageContent({
       <LoginVisible staff>
         <AddCourseButton studentType="undergraduate" />
       </LoginVisible>
-      <h4 className="mb-8 text-[17px] font-bold sm:pl-5">{t('교과목 정보')}</h4>
+      <h4 className="mb-8 text-[17px] font-bold sm:pl-5">{t('courseInformation')}</h4>
       <CourseToolbar
         viewOption={selectedOption.view}
         sortOption={selectedOption.sort}

app/[locale]/community/components/PostFooter.tsx

@@ -25,7 +25,7 @@ type AdjPost = {
   title: string;
 };
 
-type RowType = 'next' | 'prev';
+type RowType = 'next' | 'previous';
 
 export default function PostFooter({
   path,
@@ -43,7 +43,7 @@ export default function PostFooter({
   return (
     <div className={`flex flex-col ${margin}`}>
       {nextPost && <Row post={nextPost} type="next" path={path} />}
-      {prevPost && <Row post={prevPost} type="prev" path={path} />}
+      {prevPost && <Row post={prevPost} type="previous" path={path} />}
       <div className="mt-16 flex justify-end">
         <LoginVisible role={role}>
           {id && (
@@ -79,12 +79,9 @@ function RowIcon({ type }: { type: RowType }) {
 }
 
 function RowDescription({ type }: { type: RowType }) {
-  const t = useTranslations('Content');
+  const t = useTranslations('common');
 
-  const description = type == 'next' ? '다음글' : '이전글';
-  return (
-    <p className="mr-3 flex-shrink-0 text-md font-medium text-main-orange">{t(description)}</p>
-  );
+  return <p className="mr-3 flex-shrink-0 text-md font-medium text-main-orange">{t(type)}</p>;
 }
 
 function RowPostTitle({ title }: { title?: string }) {
@@ -101,14 +98,14 @@ function RowPostTitle({ title }: { title?: string }) {
 }
 
 function PostListLink({ href }: { href: string }) {
-  const t = useTranslations('Content');
+  const t = useTranslations('common');
 
   return (
     <PaginatedLink
       href={href}
       className="flex h-[35px] items-center rounded-[0.0625rem] border border-neutral-700 bg-neutral-800 px-[15px] text-md font-semibold tracking-[0.1rem] text-white hover:border-neutral-500 hover:bg-neutral-500"
     >
-      {t('목록')}
+      {t('list')}
     </PaginatedLink>
   );
 }

app/[locale]/community/council/report/[id]/page.tsx

@@ -31,7 +31,7 @@ export async function generateMetadata({ params }: Props) {
 
 export default async function CouncilReportPage({ params }: Props) {
   const { id, locale } = await params;
-  const t = await getTranslations('Content');
+  const t = await getTranslations('Page.report');
   const council = await getCouncilReport(id);
 
   const { title, description, sequence, name, createdAt } = council;
@@ -44,10 +44,10 @@ export default async function CouncilReportPage({ params }: Props) {
         <h2 className="text-[1.25rem] font-semibold leading-[1.4]">{title}</h2>
         <div className="flex gap-5 text-sm font-normal tracking-wide text-neutral-500">
           <p>
-            {t('작성자')}: {author}
+            {t('author')}: {author}
           </p>
           <p>
-            {t('작성 날짜')}: {dateStr}
+            {t('createdDate')}: {dateStr}
           </p>
         </div>
       </div>