Merge pull request #19 from JongMany/feature/main

feature: useInview을 활용

fe/src/pages/not-found/page.tsx

@@ -1,3 +1,3 @@
 export default function NotFound() {
-  return <div></div>;
+  return <div>찾을 수 없는 페이지</div>;
 }

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>

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>
   );
 };

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);
     },

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>,
+      },
     ],
   },
 ]);