약관

Author: devkyoung2

src/constants/terms/index.ts

@@ -0,0 +1,47 @@
+import { PRIVACY_POLICY_CONTENT, PRIVACY_POLICY_TITLE } from './privacyPolicy';
+import { TERMS_OF_SERVICE_CONTENT, TERMS_OF_SERVICE_TITLE } from './termsOfService';
+
+export const TERM_ID = {
+  PRIVACY_POLICY: 1,
+  TERMS_OF_SERVICE: 2,
+} as const;
+
+export type TermId = (typeof TERM_ID)[keyof typeof TERM_ID];
+
+export type TermContent = {
+  id: TermId;
+  title: string;
+  content: string;
+};
+
+export const TERM_BY_ID: Record<TermId, TermContent> = {
+  [TERM_ID.PRIVACY_POLICY]: {
+    id: TERM_ID.PRIVACY_POLICY,
+    title: PRIVACY_POLICY_TITLE,
+    content: PRIVACY_POLICY_CONTENT,
+  },
+  [TERM_ID.TERMS_OF_SERVICE]: {
+    id: TERM_ID.TERMS_OF_SERVICE,
+    title: TERMS_OF_SERVICE_TITLE,
+    content: TERMS_OF_SERVICE_CONTENT,
+  },
+};
+
+export type SignUpTerm = {
+  id: TermId;
+  title: string;
+  required: boolean;
+};
+
+export const SIGNUP_TERMS: SignUpTerm[] = [
+  {
+    id: TERM_ID.PRIVACY_POLICY,
+    title: PRIVACY_POLICY_TITLE,
+    required: true,
+  },
+  {
+    id: TERM_ID.TERMS_OF_SERVICE,
+    title: TERMS_OF_SERVICE_TITLE,
+    required: true,
+  },
+];

src/pages/SignUp/TermsDetail/index.tsx

@@ -0,0 +1,27 @@
+import { useParams } from 'react-router-dom';
+
+import { Header } from 'components/Header';
+import { BackButton } from 'components/Header/BackButton';
+
+import { TERM_BY_ID, type TermId } from 'constants/terms';
+
+const TermsDetail = () => {
+  const { termId } = useParams();
+
+  const parsedTermId = Number(termId);
+  const term = TERM_BY_ID[parsedTermId as TermId];
+
+  if (!term) return null;
+
+  return (
+    <>
+      <Header title={term.title} leftBtn={<BackButton />} />
+
+      <section className="h-full overflow-y-auto px-mobile pb-safe-bottom pt-4">
+        <p className="whitespace-pre-wrap text-body1">{term.content}</p>
+      </section>
+    </>
+  );
+};
+
+export default TermsDetail;

src/pages/SignUp/TermsStep/index.tsx

@@ -6,27 +6,18 @@ import { Header } from 'components/Header';
 import { BackButton } from 'components/Header/BackButton';
 import { IconArrowRight } from 'components/icons';
 
+import { SIGNUP_TERMS } from 'constants/terms';
+
 import { Description } from '../shared/Description';
 import { Title } from '../shared/Title';
 
-type TermItem = {
-  id: number;
-  title: string;
-  required: boolean;
-};
-
 type TermsStepProps = {
   agreedTermIds: number[];
   onChangeAgreedTermIds: (ids: number[]) => void;
   onPrev: () => void;
   onNext: () => void;
 };
 
-const TERMS: TermItem[] = [
-  { id: 1, title: '개인정보처리방침', required: true },
-  { id: 2, title: '이용약관', required: true },
-];
-
 const MSG_SIGNUP_HEADER_TITLE = '회원가입';
 const MSG_SIGNUP_TERMS_TITLE = '빼곡에 가입하시려면\n이용약관에 동의해주세요!';
 const MSG_SIGNUP_TERMS_DESCRIPTION = '회원가입을 마치기 전에 빼곡의 이용약관을 확인해주세요';
@@ -38,16 +29,16 @@ export const TermsStep = (props: TermsStepProps) => {
   const { agreedTermIds, onChangeAgreedTermIds, onPrev, onNext } = props;
   const navigate = useNavigate();
 
-  const requiredTermIds = TERMS.filter((term) => term.required).map((term) => term.id);
+  const requiredTermIds = SIGNUP_TERMS.filter((term) => term.required).map((term) => term.id);
   const isCompleteEnabled = requiredTermIds.every((id) => agreedTermIds.includes(id));
 
   const handleToggleAll = () => {
-    if (agreedTermIds.length === TERMS.length) {
+    if (agreedTermIds.length === SIGNUP_TERMS.length) {
       onChangeAgreedTermIds([]);
       return;
     }
 
-    onChangeAgreedTermIds(TERMS.map((term) => term.id));
+    onChangeAgreedTermIds(SIGNUP_TERMS.map((term) => term.id));
   };
 
   const handleClickTermDetail = (termId: number) => {
@@ -84,10 +75,10 @@ export const TermsStep = (props: TermsStepProps) => {
           </Button>
 
           <ul className="mb-3 ml-1.5 mt-4">
-            {TERMS.map((term, index) => {
+            {SIGNUP_TERMS.map((term, index) => {
               const isChecked = agreedTermIds.includes(term.id);
               const detailButtonClass = 'flex items-center gap-1 text-title3 text-neutral-100';
-              const itemBorderClass = index === TERMS.length - 1 ? '' : 'border-b border-neutral-10';
+              const itemBorderClass = index === SIGNUP_TERMS.length - 1 ? '' : 'border-b border-neutral-10';
 
               return (
                 <li key={term.id} className={`flex h-12 items-center justify-between ${itemBorderClass}`}>