[FEAT] 약관 페이지 및 설정 약관 탭 구현 / 약관 API 연결

apps/timo-web/app/[locale]/(main)/settings/_containers/SettingsNavContainer.tsx

@@ -20,6 +20,7 @@ export const SettingsNavContainer = () => {
   const settingsNavItems = [
     { label: tSettings("nav.account"), tab: "account" as const },
     { label: tSettings("nav.policy"), tab: "policy" as const },
+    { label: tSettings("nav.privacy"), tab: "privacy" as const },
     { label: tSettings("nav.withdrawal"), tab: "withdrawal" as const },
   ];
 

apps/timo-web/app/[locale]/(main)/settings/_containers/SettingsTabsContainer.tsx

@@ -3,12 +3,27 @@
 import { SettingsProfileContainer } from "@/app/[locale]/(main)/settings/_containers/SettingsProfileContainer";
 import { useSettingsTab } from "@/app/[locale]/(main)/settings/_hooks/useSettingsTab";
 import { SettingsPolicyContainer } from "@/app/[locale]/(main)/settings/policy/_containers/SettingsPolicyContainer";
+import { SettingsPrivacyContainer } from "@/app/[locale]/(main)/settings/privacy/_containers/SettingsPrivacyContainer";
 import { SettingsWithdrawalContainer } from "@/app/[locale]/(main)/settings/withdrawal/_containers/SettingsWithdrawalContainer";
+import { AsyncBoundary } from "@/components/boundary/AsyncBoundary";
 
 export const SettingsTabsContainer = () => {
   const tab = useSettingsTab();
 
-  if (tab === "policy") return <SettingsPolicyContainer />;
+  if (tab === "policy") {
+    return (
+      <AsyncBoundary>
+        <SettingsPolicyContainer />
+      </AsyncBoundary>
+    );
+  }
+  if (tab === "privacy") {
+    return (
+      <AsyncBoundary>
+        <SettingsPrivacyContainer />
+      </AsyncBoundary>
+    );
+  }
   if (tab === "withdrawal") return <SettingsWithdrawalContainer />;
   return <SettingsProfileContainer />;
 };

apps/timo-web/app/[locale]/(main)/settings/_hooks/useSettingsTab.ts

@@ -2,14 +2,14 @@
 
 import { useSearchParams } from "next/navigation";
 
-export type SettingsTab = "account" | "policy" | "withdrawal";
+export type SettingsTab = "account" | "policy" | "privacy" | "withdrawal";
 
 const SETTINGS_TAB_PARAM = "tab";
 
 const isSettingsTab = (
   value: string | null,
 ): value is Exclude<SettingsTab, "account"> =>
-  value === "policy" || value === "withdrawal";
+  value === "policy" || value === "privacy" || value === "withdrawal";
 
 export const useSettingsTab = (): SettingsTab => {
   const searchParams = useSearchParams();

apps/timo-web/app/[locale]/(main)/settings/policy/_containers/SettingsPolicyContainer.tsx

@@ -1,8 +1,22 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+import { PolicyDocument } from "@/components/policy/PolicyDocument";
+import { useTerms } from "@/queries/use-terms";
+
 export const SettingsPolicyContainer = () => {
+  const t = useTranslations("Policy");
+  const { data: terms } = useTerms("SERVICE");
+  const term = terms[0];
+
   return (
-    <div className="flex flex-col gap-5 px-15 pt-7.5">
-      <h1 className="typo-headline-m-16 text-timo-gray-900">약관</h1>
-      <hr className="border-timo-gray-500" />
+    <div className="px-15 pt-7.5">
+      {term ? (
+        <PolicyDocument title={term.title} content={term.content} />
+      ) : (
+        <p className="typo-body-m-12 text-timo-gray-700">{t("empty")}</p>
+      )}
     </div>
   );
 };

apps/timo-web/app/[locale]/(main)/settings/privacy/_containers/SettingsPrivacyContainer.tsx

@@ -0,0 +1,22 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+import { PolicyDocument } from "@/components/policy/PolicyDocument";
+import { useTerms } from "@/queries/use-terms";
+
+export const SettingsPrivacyContainer = () => {
+  const t = useTranslations("Policy");
+  const { data: terms } = useTerms("PRIVACY");
+  const term = terms[0];
+
+  return (
+    <div className="px-15 pt-7.5">
+      {term ? (
+        <PolicyDocument title={term.title} content={term.content} />
+      ) : (
+        <p className="typo-body-m-12 text-timo-gray-700">{t("empty")}</p>
+      )}
+    </div>
+  );
+};

apps/timo-web/app/[locale]/login/_containers/LoginContainer.tsx

@@ -6,6 +6,8 @@ import { useTranslations } from "next-intl";
 
 import { OnboardingGoogleButtonContainer } from "@/app/[locale]/onboarding/_containers/OnboardingGoogleButtonContainer";
 import { LottiePlayer } from "@/components/lottie/LottiePlayer";
+import { ROUTES } from "@/constants/routes";
+import { Link } from "@/i18n/navigation";
 
 export const LoginContainer = () => {
   const t = useTranslations("Login");
@@ -51,19 +53,25 @@ export const LoginContainer = () => {
 
           <p className="typo-body-r-12 text-timo-gray-700 text-center">
             {t.rich("termsNotice", {
-              // TODO: 실제 이용약관 페이지 URL 나오면 href 교체
               terms: (chunks) => (
-                // eslint-disable-next-line jsx-a11y/anchor-is-valid
-                <a href="#" className="underline">
+                <Link
+                  href={`${ROUTES.POLICY}?type=SERVICE`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
                   {chunks}
-                </a>
+                </Link>
               ),
-              // TODO: 실제 개인정보 처리방침 페이지 URL 나오면 href 교체
               privacy: (chunks) => (
-                // eslint-disable-next-line jsx-a11y/anchor-is-valid
-                <a href="#" className="underline">
+                <Link
+                  href={`${ROUTES.POLICY}?type=PRIVACY`}
+                  target="_blank"
+                  rel="noopener noreferrer"
+                  className="underline"
+                >
                   {chunks}
-                </a>
+                </Link>
               ),
             })}
           </p>

apps/timo-web/app/[locale]/policy/_containers/PolicyContainer.tsx

@@ -0,0 +1,24 @@
+"use client";
+
+import { useTranslations } from "next-intl";
+
+import type { TermsType } from "@/types/terms-type";
+
+import { PolicyDocument } from "@/components/policy/PolicyDocument";
+import { useTerms } from "@/queries/use-terms";
+
+export interface PolicyContainerProps {
+  type: TermsType;
+}
+
+export const PolicyContainer = ({ type }: PolicyContainerProps) => {
+  const t = useTranslations("Policy");
+  const { data: terms } = useTerms(type);
+  const term = terms.find((item) => item.type === type) ?? terms[0];
+
+  if (!term) {
+    return <p className="typo-body-m-12 text-timo-gray-700">{t("empty")}</p>;
+  }
+
+  return <PolicyDocument title={term.title} content={term.content} />;
+};

apps/timo-web/app/[locale]/policy/page.tsx

@@ -0,0 +1,36 @@
+import timoTextLogo from "@repo/timo-design-system/assets/images/logo/timo-text-logo.svg";
+import Image from "next/image";
+
+import type { TermsType } from "@/types/terms-type";
+
+import { PolicyContainer } from "@/app/[locale]/policy/_containers/PolicyContainer";
+import { AsyncBoundary } from "@/components/boundary/AsyncBoundary";
+import { ROUTES } from "@/constants/routes";
+import { Link } from "@/i18n/navigation";
+
+const isTermsType = (value: string | undefined): value is TermsType =>
+  value === "SERVICE" || value === "PRIVACY";
+
+interface PolicyPageProps {
+  searchParams: Promise<{ type?: string }>;
+}
+
+export default async function PolicyPage({ searchParams }: PolicyPageProps) {
+  const { type } = await searchParams;
+
+  return (
+    <div className="flex min-h-screen w-full flex-col items-center gap-12.5 bg-white">
+      <div className="flex w-full items-center justify-between px-37 py-6.75">
+        <Link href={ROUTES.LOGIN}>
+          <Image src={timoTextLogo} alt="Timo" width={92} height={35} />
+        </Link>
+      </div>
+
+      <div className="flex w-full justify-center px-8 pb-20">
+        <AsyncBoundary>
+          <PolicyContainer type={isTermsType(type) ? type : "SERVICE"} />
+        </AsyncBoundary>
+      </div>
+    </div>
+  );
+}

apps/timo-web/components/policy/PolicyDocument.tsx

@@ -0,0 +1,20 @@
+export interface PolicyDocumentProps {
+  title: string;
+  content: string;
+}
+
+export const PolicyDocument = ({ title, content }: PolicyDocumentProps) => {
+  return (
+    <div className="flex w-full max-w-[1147px] flex-col gap-7.5">
+      <div className="flex flex-col gap-5">
+        <h1 className="typo-headline-b-16 text-timo-gray-900 w-full">
+          {title}
+        </h1>
+        <hr className="border-timo-gray-500 w-full" />
+      </div>
+      <p className="typo-body-m-12 text-timo-gray-900 whitespace-pre-wrap">
+        {content}
+      </p>
+    </div>
+  );
+};

apps/timo-web/constants/routes.ts

@@ -6,4 +6,5 @@ export const ROUTES = {
   FOCUS: "/focus",
   STATISTICS: "/statistics",
   SETTINGS: "/settings",
+  POLICY: "/policy",
 } as const;

apps/timo-web/messages/en.json

@@ -63,7 +63,8 @@
   "Settings": {
     "nav": {
       "account": "Account",
-      "policy": "Terms & Policies",
+      "policy": "Terms of Service",
+      "privacy": "Privacy Policy",
       "withdrawal": "Delete account"
     },
     "profile": {
@@ -226,5 +227,8 @@
       "hourUnit": "h",
       "minuteUnit": "m"
     }
+  },
+  "Policy": {
+    "empty": "This policy content isn't available yet."
   }
 }

apps/timo-web/messages/ko.json

@@ -64,6 +64,7 @@
     "nav": {
       "account": "개인 정보",
       "policy": "약관",
+      "privacy": "개인 정보 처리 방침",
       "withdrawal": "회원 탈퇴"
     },
     "profile": {
@@ -223,5 +224,8 @@
       "hourUnit": "시간",
       "minuteUnit": "분"
     }
+  },
+  "Policy": {
+    "empty": "약관 내용을 아직 준비 중입니다."
   }
 }

apps/timo-web/queries/use-terms.ts

@@ -0,0 +1,19 @@
+"use client";
+
+import { useSuspenseQuery } from "@tanstack/react-query";
+
+import {
+  getGetTermsQueryKey,
+  getTerms,
+} from "@/api/generated/endpoints/terms/terms";
+import { termsListSchema, type TermsType } from "@/types/terms-type";
+
+export const useTerms = (type?: TermsType) => {
+  const params = type ? { type } : undefined;
+
+  return useSuspenseQuery({
+    queryKey: getGetTermsQueryKey(params),
+    queryFn: ({ signal }) => getTerms(params, undefined, signal),
+    select: ({ data }) => termsListSchema.parse(data).terms,
+  });
+};

apps/timo-web/types/terms-type.ts

@@ -0,0 +1,17 @@
+import { z } from "zod";
+
+export const termsTypeSchema = z.enum(["SERVICE", "PRIVACY"]);
+
+export const termsItemSchema = z.object({
+  termsId: z.number(),
+  type: termsTypeSchema,
+  title: z.string(),
+  content: z.string(),
+});
+
+export const termsListSchema = z.object({
+  terms: z.array(termsItemSchema),
+});
+
+export type TermsType = z.infer<typeof termsTypeSchema>;
+export type TermsItem = z.infer<typeof termsItemSchema>;