Refactor/19/codereveiw chanki

src/app/(public)/_components/Footer.tsx

@@ -4,8 +4,9 @@ import ICON_INSTAGRAM from '@/assets/icons/Instagram.svg';
 import Image from 'next/image';
 import Link from 'next/link';
 import { RootInner } from './Inner';
+import { BaseLinkItem, IconLinkItem } from './type';
 
-const FOOTER_NAV_LIST = [
+const FOOTER_NAV_LIST: BaseLinkItem[] = [
   {
     path: '/privacy',
     label: 'Privacy Policy',
@@ -16,7 +17,7 @@ const FOOTER_NAV_LIST = [
   },
 ];
 
-const SNS_LIST = [
+const SNS_LIST: IconLinkItem[] = [
   {
     path: '#',
     icon: ICON_MAIL,

src/app/(public)/_components/Header.tsx

@@ -4,7 +4,7 @@ import Nav from './Nav';
 
 export default function Header() {
   return (
-    <header className='fixed left-0 right-0 top-0 h-[3.75rem] bg-black/40 md:h-[4.375rem]'>
+    <header className='fixed left-0 right-0 top-0 z-50 h-[3.75rem] bg-black/40 md:h-[4.375rem]'>
       <RootInner className='flex h-full items-center justify-between'>
         <Logo />
         <Nav />

src/app/(public)/_components/Nav.tsx

@@ -1,6 +1,7 @@
 import Link from 'next/link';
+import { BaseLinkItem } from './type';
 
-const ROOT_NAV_LIST = [
+const ROOT_NAV_LIST: BaseLinkItem[] = [
   {
     path: '/login',
     label: '로그인',

src/app/(public)/_components/type.tsx

@@ -0,0 +1,10 @@
+import { StaticImageData } from 'next/image';
+
+export type BaseLinkItem = {
+  path: string;
+  label: string;
+};
+
+export type IconLinkItem = BaseLinkItem & {
+  icon: StaticImageData;
+};

src/app/(public)/landing/_components/Feature.tsx

@@ -1,10 +1,18 @@
 import { useRef } from 'react';
-import Image from 'next/image';
+import Image, { StaticImageData } from 'next/image';
 import { useScroll, useTransform, motion } from 'motion/react';
 import feature_img_1 from '@/assets/landings/feature-1.png';
 import feature_img_2 from '@/assets/landings/feature-2.png';
 
-const FEATURE_CONTENT = [
+type FEATURE_CONTENT = {
+  point: number;
+  title: string;
+  image: StaticImageData;
+  imageClassName?: string;
+  reverse?: boolean;
+};
+
+const FEATURE_CONTENTS: FEATURE_CONTENT[] = [
   {
     point: 1,
     title: '일의 우선순위를\n관리하세요',
@@ -40,9 +48,9 @@ export default function Feature() {
 
   return (
     <section className='mb-[12.5rem] grid gap-[5.625rem] py-5' ref={containerRef}>
-      {FEATURE_CONTENT.map((item, index) => (
+      {FEATURE_CONTENTS.map((item, index) => (
         <motion.div
-          key={index}
+          key={item.point}
           // TODO: clsx 패키지 추가되면, 클래스 정리 필요
           className={`sticky overflow-hidden rounded-lg bg-gray-80 lg:flex lg:h-[37.5rem] ${item.reverse ? 'lg:flex-row-reverse' : ''}`}
           style={{

src/app/(public)/privacy/page.tsx

@@ -1,49 +1,67 @@
 import SubHeader from '../_components/SubHeader';
-import { Heading3, List, ListItem, Paragraph, Section } from './_components/Typography';
+
+type PRIVACY_CONTENT = {
+  title: string;
+  contents: string[];
+  items?: string[];
+};
+
+const PRIVACY_CONTENT_DATA: PRIVACY_CONTENT[] = [
+  {
+    title: '개인정보 처리방침 안내',
+    contents: ['테스키파이(이하 "회사")는 이용자의 개인정보를 중요하게 생각하며, 개인정보 보호법 등 관련 법령을 준수합니다.'],
+  },
+  {
+    title: '1. 수집하는 개인정보',
+    contents: ['회사는 다음과 같은 개인정보를 수집합니다.'],
+    items: ['필수 항목 : 이메일, 닉네임'],
+  },
+  {
+    title: '2. 개인정보의 이용 목적',
+    contents: ['회사는 수집한 개인정보를 다음과 같은 목적으로 이용합니다.'],
+    items: ['서비스 회원가입 및 관리', '서비스 제공 및 운영', '고객 문의 응대 및 지원'],
+  },
+  {
+    title: '3. 개인정보 보관 및 파기',
+    contents: [],
+    items: ['이용자의 개인정보는 서비스 제공 목적이 달성되면 지체 없이 파기됩니다.', '단, 관련 법령에 따라 일정 기간 보관이 필요한 경우 해당 법령을 따릅니다.'],
+  },
+  {
+    title: '4. 개인정보 제공 및 위탁',
+    contents: [],
+    items: ['회사는 이용자의 개인정보를 제3자에게 제공하지 않으며, 외부 업체에 위탁하지 않습니다.'],
+  },
+  {
+    title: '5. 문의',
+    contents: ['개인정보 관련 문의 사항은 master@taskify.com로 연락해 주세요.', '본 방침은 변경될 수 있으며, 변경 시 공지사항을 통해 안내드립니다.'],
+  },
+];
 
 export default function PrivacyPage() {
   return (
     <div className='py-20'>
       <SubHeader title='Privacy Policy' desc='개인정보처리방침' />
-      <Section>
-        <Paragraph>테스키파이(이하 &quot;회사&quot;)는 이용자의 개인정보를 중요하게 생각하며, 개인정보 보호법 등 관련 법령을 준수합니다.</Paragraph>
-      </Section>
-      <Section>
-        <Heading3>1. 수집하는 개인정보</Heading3>
-        <Paragraph>회사는 다음과 같은 개인정보를 수집합니다.</Paragraph>
-        <List>
-          <ListItem>필수 항목 : 이메일, 닉네임</ListItem>
-        </List>
-      </Section>
-      <Section>
-        <Heading3>2. 개인정보의 이용 목적</Heading3>
-        <Paragraph>회사는 수집한 개인정보를 다음과 같은 목적으로 이용합니다.</Paragraph>
-        <List>
-          <ListItem>서비스 회원가입 및 관리 </ListItem>
-          <ListItem>서비스 제공 및 운영 </ListItem>
-          <ListItem>고객 문의 응대 및 지원</ListItem>
-        </List>
-      </Section>
-      <Section>
-        <Heading3>3. 개인정보 보관 및 파기</Heading3>
-        <List>
-          <ListItem>이용자의 개인정보는 서비스 제공 목적이 달성되면 지체 없이 파기됩니다.</ListItem>
-          <ListItem>단, 관련 법령에 따라 일정 기간 보관이 필요한 경우 해당 법령을 따릅니다.</ListItem>
-        </List>
-      </Section>
-      <Section>
-        <Heading3>4. 개인정보 제공 및 위탁</Heading3>
-        <List>
-          <ListItem>회사는 이용자의 개인정보를 제3자에게 제공하지 않으며, 외부 업체에 위탁하지 않습니다.</ListItem>
-        </List>
-      </Section>
-      <Section>
-        <Heading3>5. 문의</Heading3>
-        <Paragraph>
-          개인정보 관련 문의 사항은 <strong>master@taskify.com</strong>로 연락해 주세요.
-        </Paragraph>
-        <Paragraph>본 방침은 변경될 수 있으며, 변경 시 공지사항을 통해 안내드립니다.</Paragraph>
-      </Section>
+
+      {PRIVACY_CONTENT_DATA.map((section) => (
+        <section key={section.title} className='mb-10 space-y-3'>
+          <h3 className='mb-3 text-lg font-semibold'>{section.title}</h3>
+
+          {section.contents?.map((content) => (
+            <p key={content} className='text-md'>
+              {content}
+            </p>
+          ))}
+
+          {section.items && (
+            <ul className='list-inside list-disc space-y-1 text-md'>
+              {section.items.map((item) => (
+                <li key={item}>{item}</li>
+              ))}
+            </ul>
+          )}
+        </section>
+      ))}
+
       <span className='text-md opacity-50'>최종 수정일: 2024년 1월 16일</span>
     </div>
   );