devohda · hazzzi · Jul 5, 2024
diff --git a/haeun/week2/index.html b/haeun/week2/index.html
@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
diff --git a/haeun/week2/src/App.css b/haeun/week2/src/App.css
@@ -0,0 +1,56 @@
+.menu {
+  display: flex;
+  align-items: center;
+  padding: 20px 40px;
+  background-color: #f8f9fa;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+}
+
+.menu li {
+  list-style-type: none;
+  margin-right: 20px;
+}
+
+.menu a {
+  text-decoration: none;
+  color: #333;
+}
+
+.menu a:hover {
+  text-decoration: underline;
+}
+
+.initial-transition {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.initial-transition > div {
+  position: absolute;
+  top: 0;
+  width: 100%;
+  background-color: black;
+}
+
+.block-transition {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  display: grid;
+  grid-template-columns: repeat(11,1fr);
+  pointer-events: none;
+  z-index: 1000
+}
+
+.block-transition > div {
+  width: calc(100% + 2px);
+  height: calc(100% + 2px);
+  margin-left: -1px;
+  margin-top: -1px;
+  transform: scaleY(0);
+  transform-origin: 0 100%;
+  background: #79837a
+}
diff --git a/haeun/week2/src/App.tsx b/haeun/week2/src/App.tsx
@@ -0,0 +1,51 @@
+import { NavLink, Outlet, useLocation } from 'react-router-dom';
+import './App.css';
+// import Scene from './components/Scene';
+import { AnimatePresence, motion } from 'framer-motion';
+import BlockTransition from './components/BlockTransition';
+
+const App = () => {
+  const location = useLocation();
+
+  return (
+    <>
+      <ul
+        className="menu"
+        style={{ display: 'flex', gap: 16, listStyle: 'none' }}
+      >
+        <li>
+          <NavLink
+            style={({ isActive }) => ({
+              textDecoration: isActive ? 'underline' : 'none',
+            })}
+            to="/about"
+          >
+            About
+          </NavLink>
+        </li>
+        <li>
+          <NavLink
+            style={({ isActive }) => ({
+              textDecoration: isActive ? 'underline' : 'none',
+            })}
+            to="/team"
+          >
+            Team
+          </NavLink>
+        </li>
+      </ul>
+      <div style={{ height: '100vh'}}>
+        {/* <Scene /> */}
+        <AnimatePresence mode="wait">
+          <motion.div key={location.pathname} exit={{ opacity: 0 }}>
+            <Outlet />
+            {/* <InitialTransition /> */}
+          </motion.div>
+          <BlockTransition />
+        </AnimatePresence>
+      </div>
+    </>
+  );
+};
+
+export default App;
diff --git a/haeun/week2/src/assets/react.svg b/haeun/week2/src/assets/react.svg
diff --git a/haeun/week2/src/components/BlockTransition.tsx b/haeun/week2/src/components/BlockTransition.tsx
@@ -0,0 +1,22 @@
+import { motion } from 'framer-motion';
+
+const BlockTransition = () => {
+  return (
+    <div className="block-transition">
+      {Array.from({ length: 88 }).map((_, i) => (
+        <motion.div
+          key={i}
+          initial={{ scaleY: 1, originY: 0 }}
+          animate={{ scaleY: 0, originY: 0 }}
+          transition={{
+            duration: 0.5,
+            delay: (Math.random() * i) * 0.01,
+            ease: [0.87, 0, 0.13, 1],
+          }}
+        />
+      ))}
+    </div>
+  );
+};
+
+export default BlockTransition;
diff --git a/haeun/week2/src/components/InitialTransition.tsx b/haeun/week2/src/components/InitialTransition.tsx
@@ -0,0 +1,27 @@
+import { motion } from 'framer-motion';
+
+const InitialTransition = () => {
+  const blackBox = {
+    initial: { height: '100vh' },
+    animate: {
+      height: 0,
+      transition: {
+        duration: 1.5,
+        ease: [0.87, 0, 0.13, 1],
+      },
+    },
+  };
+
+  return (
+    <div className="initial-transition">
+      <motion.div
+        initial="initial"
+        animate="animate"
+        exit="exit"
+        variants={blackBox}
+      />
+    </div>
+  );
+};
+
+export default InitialTransition;
diff --git a/haeun/week2/src/components/Model.tsx b/haeun/week2/src/components/Model.tsx
@@ -0,0 +1,48 @@
+import { MeshTransmissionMaterial, Text, useGLTF } from '@react-three/drei';
+import { useFrame, useThree } from '@react-three/fiber';
+import { useRef } from 'react';
+
+const Model = () => {
+  const { nodes } = useGLTF('/torrus.glb');
+  const { viewport } = useThree();
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  const torus = useRef<any>(null);
+
+  const materialProps = {
+    thickness: 0.2,
+    roughness: 0,
+    transmission: 1,
+    ior: 1.2,
+    chromaticAberration: 0.02,
+    backside: true,
+  }
+
+  useFrame(({ pointer }) => {
+    if (!torus.current) return null;
+
+    const x = pointer.x * 5;
+    const y = pointer.y * 5;
+
+    torus.current.rotation.x = x;
+    torus.current.rotation.y = y;
+  });
+
+  return (
+    <group scale={viewport.width / 3.75}>
+      <Text
+        position={[0, 0, -1]}
+        fontSize={0.5}
+        color="white"
+        anchorX="center"
+        anchorY="middle"
+      >
+        Hello World!
+      </Text>
+      <mesh ref={torus} {...nodes.Torus002}>
+        <MeshTransmissionMaterial {...materialProps} />
+      </mesh>
+    </group>
+  );
+};
+
+export default Model;
diff --git a/haeun/week2/src/components/Scene.tsx b/haeun/week2/src/components/Scene.tsx
@@ -0,0 +1,15 @@
+import { Environment } from '@react-three/drei';
+import { Canvas } from '@react-three/fiber';
+import Model from './Model';
+
+const Scene = () => {
+  return (
+    <Canvas style={{ background: '#000' }}>
+      <Model />
+      <directionalLight intensity={2} position={[0, 2, 3]} />
+      <Environment preset="city" />
+    </Canvas>
+  );
+};
+
+export default Scene;
diff --git a/haeun/week2/src/index.css b/haeun/week2/src/index.css
@@ -0,0 +1,10 @@
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
diff --git a/haeun/week2/src/main.tsx b/haeun/week2/src/main.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import ReactDOM from 'react-dom/client'
+import { RouterProvider, createBrowserRouter } from 'react-router-dom'
+import App from './App.tsx'
+import './index.css'
+import About from './routes/About.tsx'
+import Team from './routes/Team.tsx'
+
+const router = createBrowserRouter([
+  {
+    path: '/',
+    element: <App />,
+    children: [
+      {
+        path: '/about',
+        element: <About />,
+      },
+      {
+        path: '/team',
+        element: <Team />,
+      },
+    ]
+  },
+])
+
+ReactDOM.createRoot(document.getElementById('root')!).render(
+  <React.StrictMode>
+    <RouterProvider router={router} />
+  </React.StrictMode>,
+)
diff --git a/haeun/week2/src/routes/About.tsx b/haeun/week2/src/routes/About.tsx
@@ -0,0 +1,10 @@
+const About = () => {
+  return (
+    <div>
+      <h1>About</h1>
+      <p>This is the about page.</p>
+    </div>
+  );
+};
+
+export default About;
diff --git a/haeun/week2/src/routes/Team.tsx b/haeun/week2/src/routes/Team.tsx
@@ -0,0 +1,10 @@
+const Team = () => {
+  return (
+    <div>
+      <h1>Team</h1>
+      <p>This is the team page.</p>
+    </div>
+  );
+};
+
+export default Team;
diff --git a/haeun/week2/src/vite-env.d.ts b/haeun/week2/src/vite-env.d.ts
@@ -0,0 +1 @@
+/// <reference types="vite/client" />
diff --git a/haeun/week2/vite.config.ts b/haeun/week2/vite.config.ts
@@ -0,0 +1,8 @@
+import react from '@vitejs/plugin-react';
+import { defineConfig } from 'vite';
+
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  root: './haeun/week2',
+});