From 24e194c221960f08bd6b66a452f3abba7a68902e Mon Sep 17 00:00:00 2001
From: jhynsoo <jhynsoo@gmail.com>
Date: Tue, 8 Oct 2024 10:45:28 +0900
Subject: [PATCH] =?UTF-8?q?Design:=20footer,=20home=20=EB=94=94=EC=9E=90?=
 =?UTF-8?q?=EC=9D=B8=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 frontend/src/components/Footer/index.tsx     | 30 ++++++++------------
 frontend/src/components/PageLayout/index.tsx |  2 +-
 frontend/src/pages/Home.tsx                  | 10 +++----
 3 files changed, 18 insertions(+), 24 deletions(-)

diff --git a/frontend/src/components/Footer/index.tsx b/frontend/src/components/Footer/index.tsx
index 4459e8f..cdbd3fd 100644
--- a/frontend/src/components/Footer/index.tsx
+++ b/frontend/src/components/Footer/index.tsx
@@ -1,24 +1,18 @@
-import * as React from 'react';
-import { cn } from '@/lib/utils';
+import { Link } from 'react-router-dom';
 
-export interface FooterProps extends React.HTMLAttributes<HTMLDivElement> {}
-
-export default function Footer({ className, ...props }: FooterProps) {
+export default function Footer() {
   return (
-    <footer
-      className={cn('mt-[100px] border-t border-gray-200 bg-gray-100', className)}
-      {...props}
-    >
-      <div className="container py-10">
-        <div className="flex flex-col items-start gap-5">
-          <div className="relative">
-            <div className="font-heading text-lg text-gray-600 md:text-xl">WorLabel</div>
-            <p className="font-body-small mt-2 text-gray-500">Copyright © 2024 WorLabel All rights reserved</p>
+    <footer className="select-none bg-gray-100">
+      <div className="container py-8 text-gray-400">
+        <div className="body-small flex flex-col items-start gap-5">
+          <div>
+            <div className="heading">WorLabel</div>
+            <span>Copyright © 2024 WorLabel. All rights reserved.</span>
           </div>
-          <div className="inline-flex items-center gap-4">
-            <div className="font-body-small text-gray-500">서비스 이용약관</div>
-            <div className="h-4 w-px bg-gray-400" />
-            <div className="font-body-small text-gray-500">개인정보 처리방침</div>
+          <div className="inline-flex items-center gap-2">
+            <Link to="#">서비스 이용약관</Link>
+            <span className="h-3 w-px rounded bg-gray-400" />
+            <Link to="#">개인정보 처리방침</Link>
           </div>
         </div>
       </div>
diff --git a/frontend/src/components/PageLayout/index.tsx b/frontend/src/components/PageLayout/index.tsx
index f1952e9..11e4be9 100644
--- a/frontend/src/components/PageLayout/index.tsx
+++ b/frontend/src/components/PageLayout/index.tsx
@@ -15,7 +15,7 @@ export default function PageLayout() {
             </main>
           </Suspense>
         </div>
-        <Footer className="mt-0" />
+        <Footer />
       </div>
     </>
   );
diff --git a/frontend/src/pages/Home.tsx b/frontend/src/pages/Home.tsx
index c8c0498..46e5b3b 100644
--- a/frontend/src/pages/Home.tsx
+++ b/frontend/src/pages/Home.tsx
@@ -9,16 +9,16 @@ export default function Home() {
   const { accessToken } = useAuthStore();
 
   return (
-    <div className="flex h-full w-full flex-col items-center justify-center bg-gray-50">
+    <div className="flex h-full w-full flex-col items-center justify-center break-keep bg-gray-50 px-10">
       <div className="text-center">
-        <p className="text-5xl font-semibold leading-[60px] text-black">
-          <span className="text-primary">웹 기반 오토 레이블링</span> 플랫폼
+        <p className="text-5xl font-semibold leading-[1.2] text-gray-900">
+          <span className="font-bold text-primary">웹 기반 오토 레이블링</span> 플랫폼
           <br />
-          <span className="text-primary">WorLabel</span>에 오신 것을 환영합니다
+          <span className="font-bold text-primary">WorLabel</span>에 오신 것을 환영합니다
         </p>
       </div>
       <div className="mt-4 text-center">
-        <p className="text-xl font-light leading-[28px] text-black">
+        <p className="body font-light leading-[28px] text-gray-500">
           WorLabel로 레이블링 작업을 간소화하세요.
           <br />
           브라우저에서 직접 레이블링을 자동화하여 빠르고 효율적인 워크플로우를 경험하세요.