Fix : Footer Mobile

Koreawide-Developer-Conference · Aug 17, 2024 · d1e82ab · d1e82ab
1 parent 37a0616
commit d1e82ab
Show file tree

Hide file tree

Showing 7 changed files with 427 additions and 2 deletions.
diff --git a/app/layout.tsx b/app/layout.tsx
@@ -26,6 +26,7 @@ export default function RootLayout({
   return (
     <html lang='ko-KR'>
       <head>
+        <meta name='viewport' content='width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=0' />
         <link rel='apple-touch-icon' sizes='57x57' href={`${prefix}/icons/apple-icon-57x57.png`} />
         <link rel='apple-touch-icon' sizes='60x60' href={`${prefix}/icons/apple-icon-60x60.png`} />
         <link rel='apple-touch-icon' sizes='72x72' href={`${prefix}/icons/apple-icon-72x72.png`} />

diff --git a/components/2024/animation/index.tsx b/components/2024/animation/index.tsx
@@ -0,0 +1,45 @@
+"use client"
+
+import React from 'react';
+import { Canvas, useFrame, useLoader } from "@react-three/fiber";
+import { OrbitControls } from "@react-three/drei";
+import { GLTFLoader } from "three/examples/jsm/loaders/GLTFLoader";
+import { Mesh } from "three";
+import { prefix } from "@/constants";
+
+export const Animation: React.FC = () => {
+
+  function MeshComponent() {
+    const fileUrl = `${prefix}/assets/2024/objects/kv_object.gltf`;
+    const mesh = React.useRef<Mesh>(null!);
+    const gltf = useLoader(GLTFLoader, fileUrl);
+
+    useFrame(() => {
+      mesh.current.rotation.z -= 0.005;
+      mesh.current.scale.x = 5;
+      mesh.current.scale.y = 5;
+      mesh.current.scale.z = 5;
+
+      gltf.materials.color = 0xE8EEF0;
+    });
+
+
+    return (
+      <mesh ref={mesh}>
+        <primitive object={gltf.scene} />
+      </mesh>
+    );
+  }
+
+
+  return (
+    <div className='flex justify-center items-center h-screen absolute top-0 left-0 w-screen z-0'>
+      <Canvas className='w-screen h-screen'>
+        <OrbitControls enableZoom={false} enablePan={true} />
+        <ambientLight />
+        <pointLight position={[10, 10, 10]} color={'#E8EEF0'} />
+        <MeshComponent />
+      </Canvas>
+    </div>
+  )
+}
diff --git a/components/2024/footer/index.tsx b/components/2024/footer/index.tsx
@@ -78,7 +78,7 @@ export const Footer: React.FC<FooterProps> = ({ cocHide = false }) => {
           </div>
         </div>
       )}
-      <div className='pt-10 lg:w-[1000px] px-5'>
+      <div className='pt-10 lg:w-[1000px] px-5 max-lg:w-full'>
         <p className='text-sm font-semibold text-[#000000E0] mb-2.5'>공식채널</p>
         <div className='flex gap-x-5 text-[#000000B8] font-normal text-xs mb-5'>
           <Link href={DISCORD_LINK} target={"_blank"} className='hover:underline'>

diff --git a/components/2024/index.ts b/components/2024/index.ts
@@ -3,3 +3,4 @@ export * from "./divider";
 export * from "./section";
 export * from "./footer";
 export * from "./ui";
+export * from './animation'
diff --git a/components/2024/section/hero/index.tsx b/components/2024/section/hero/index.tsx
@@ -1,11 +1,13 @@
 import React from "react";
 
 import StairIcon from "@/public/assets/2024/icons/stair.svg";
+import { Animation } from "@/components/2024";
 
 export const HeroSection: React.FC = () => {
   return (
     <section className='flex flex-col pt-12 lg:h-screen min-h-screen w-full items-center'>
-      <div className='max-w-[1440px] max-lg:px-4 lg:px-20 h-full w-full'>
+      <div className='max-w-[1440px] max-lg:px-4 lg:px-20 h-full w-full relative'>
+        {/*<Animation />*/}
         <div className='z-10 pt-20 flex flex-col h-full justify-between max-lg:pt-10'>
           <div className='font-semibold text-center max-lg:text-left flex justify-between items-center max-lg:flex-col'>
             <span className='text-6xl max-lg:text-5xl max-lg:w-full'>It’s a Leap Year.</span>