From c91ac3338dc121bbb94bec3cf8e179cec29d5c12 Mon Sep 17 00:00:00 2001
From: JongMany <blackberry1114@naver.com>
Date: Tue, 9 Jul 2024 12:52:00 +0900
Subject: [PATCH] =?UTF-8?q?feature:=20useInview=EC=9D=84=20=ED=99=9C?=
 =?UTF-8?q?=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 fe/src/pages/not-found/page.tsx               |  2 +-
 fe/src/pages/root/components/content/Home.tsx |  1 -
 .../pages/root/components/content/Project.tsx | 27 ++++++++++++++++---
 .../pages/root/constants/animationScript.ts   |  2 +-
 fe/src/routes/index.tsx                       |  7 ++++-
 5 files changed, 31 insertions(+), 8 deletions(-)

diff --git a/fe/src/pages/not-found/page.tsx b/fe/src/pages/not-found/page.tsx
index a3ba428..ac09f4c 100644
--- a/fe/src/pages/not-found/page.tsx
+++ b/fe/src/pages/not-found/page.tsx
@@ -1,3 +1,3 @@
 export default function NotFound() {
-  return <div></div>;
+  return <div>찾을 수 없는 페이지</div>;
 }
diff --git a/fe/src/pages/root/components/content/Home.tsx b/fe/src/pages/root/components/content/Home.tsx
index 00d0125..b826812 100644
--- a/fe/src/pages/root/components/content/Home.tsx
+++ b/fe/src/pages/root/components/content/Home.tsx
@@ -12,7 +12,6 @@ export default function Home() {
     waitingTime: 1500,
   });
 
-  console.log(typingText);
   return (
     <div className="flex flex-col px-2 w-[70vw] items-center justify-center min-h-[80vh]">
       <h1 className="py-6 text-4xl">방구석 코딩쟁이, 이종민입니다.</h1>
diff --git a/fe/src/pages/root/components/content/Project.tsx b/fe/src/pages/root/components/content/Project.tsx
index 757b1ef..959cd2c 100644
--- a/fe/src/pages/root/components/content/Project.tsx
+++ b/fe/src/pages/root/components/content/Project.tsx
@@ -1,4 +1,7 @@
-import { PropsWithChildren } from "react";
+import { PropsWithChildren, useRef } from "react";
+import { Link } from "react-router-dom";
+import { motion } from "framer-motion";
+import { useInView } from "framer-motion";
 
 type Props = {
   isAlignReverse?: boolean;
@@ -7,16 +10,29 @@ export default function Project({
   isAlignReverse = false,
   children,
 }: PropsWithChildren<Props>) {
+  const containerRef = useRef<HTMLElement>(null);
+  const isInView = useInView(containerRef, {});
+
+  console.log(isInView);
+
   return (
-    <article className="flex">
+    <motion.article
+      className="flex h-[70vh] items-center justify-center"
+      ref={containerRef}
+      style={{
+        transform: isInView ? "none" : "translateX(-200px)",
+        opacity: isInView ? 1 : 0,
+        transition: "all 0.9s cubic-bezier(0.17, 0.55, 0.55, 1) 0.5s",
+      }}
+    >
       <div
         className={`flex ${
           isAlignReverse ? "flex-row-reverse" : "flex-row"
-        } gap-x-4 w-[70vw] h-[70vh]`}
+        } gap-x-4 w-[70vw]`}
       >
         {children}
       </div>
-    </article>
+    </motion.article>
   );
 }
 
@@ -53,6 +69,9 @@ Project.Description = ({
           <li key={skill}>{skill}</li>
         ))}
       </ul>
+      <p>
+        <Link to="/project">더 자세히 보기</Link>
+      </p>
     </div>
   );
 };
diff --git a/fe/src/pages/root/constants/animationScript.ts b/fe/src/pages/root/constants/animationScript.ts
index a4fc297..e114395 100644
--- a/fe/src/pages/root/constants/animationScript.ts
+++ b/fe/src/pages/root/constants/animationScript.ts
@@ -47,7 +47,7 @@ const makeAnimationScript = () => {
       camera.position.x = xPos;
       camera.position.y = yPos;
       camera.position.z = zPos;
-      console.log(zPos);
+      // console.log(zPos);
 
       camera.lookAt(xPos, yPos, zPos);
     },
diff --git a/fe/src/routes/index.tsx b/fe/src/routes/index.tsx
index 363949a..4d8250b 100644
--- a/fe/src/routes/index.tsx
+++ b/fe/src/routes/index.tsx
@@ -1,8 +1,9 @@
-import { Suspense, createElement } from "react";
+import { Suspense, createElement, lazy } from "react";
 import { createBrowserRouter, RouterProvider } from "react-router-dom";
 import ErrorLayout from "../components/shared/layout/ErrorLayout";
 import { MainLayout } from "../components/shared/layout/MainLayout";
 import RootPage from "../pages/root/page";
+const NotFoundPage = lazy(() => import("@/pages/not-found/page"));
 
 // const MainPage = lazy(() => import("../pages/main/MainPage"));
 
@@ -17,6 +18,10 @@ const router = createBrowserRouter([
         path: "main",
         element: <Suspense fallback={null}>{/* <MainPage /> */}</Suspense>,
       },
+      {
+        path: "*",
+        element: <Suspense fallback={null}>{<NotFoundPage />}</Suspense>,
+      },
     ],
   },
 ]);