로딩페이지 (#6)

* fix(login): 조금더 유동적으로 형태 변경

* feat(loading): 로딩 페이지 생성

* feat(loading): snow 애니메이션 효과 추가

* fix(app): 테스트용 로딩창 돌려놓기

package.json

@@ -22,9 +22,9 @@
     "@types/react-dom": "^18",
     "eslint": "^8.55.0",
     "eslint-config-next": "14.0.3",
-    "sass": "^1.69.5",
     "eslint-config-prettier": "^9.1.0",
     "prettier": "^3.1.1",
+    "sass": "^1.69.5",
     "typescript": "^5"
   }
 }

src/app/globals.css

@@ -1,4 +1,4 @@
-@import url("https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css");
+@import url('https://cdn.jsdelivr.net/gh/orioncactus/[email protected]/dist/web/static/pretendard.min.css');
 
 :root {
   --gray-30: #dddde3;
@@ -19,6 +19,10 @@ html,
 body {
   max-width: 100vw;
   overflow-x: hidden;
+  background-color: #0d1116;
+  height: 100vh;
+  width: 100vw;
+  color: var(--gray-30);
 }
 
 body {

src/app/loading/loading.module.scss

@@ -0,0 +1,11 @@
+.loading {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  height: 100%;
+
+  & > p {
+    font-size: 2.25rem;
+  }
+}

src/app/loading/page.tsx

@@ -0,0 +1,12 @@
+'use client';
+import FallingSnow from '@/components/FallingSnow';
+import styles from './loading.module.scss';
+
+export default function Page() {
+  return (
+    <div className={styles.loading}>
+      <p>분석 중이에요!</p>
+      <FallingSnow />
+    </div>
+  );
+}

src/app/login/page.module.scss → src/app/login/login.module.scss

@@ -1,25 +1,16 @@
-.main {
-  background-color: #0d1116;
-  min-height: 806px;
-  height: 100vh;
-  width: 100vw;
-  color: var(--gray-30);
+.login {
   display: flex;
+  flex-direction: column;
+  align-items: center;
   justify-content: center;
+  height: 100%;
 
-  &__background {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
+  & > span {
+    position: relative;
+    width: 100%;
     height: 100%;
-
-    & > span {
-      position: relative;
-      width: 100%;
-      height: 100%;
-      display: flex;
-      justify-content: center;
-    }
+    display: flex;
+    justify-content: center;
   }
 
   &__body {
@@ -45,6 +36,7 @@
 
     & > p {
       font-size: 3.572rem;
+      white-space: nowrap;
     }
   }
 

src/app/login/page.tsx

@@ -1,55 +1,55 @@
-"use client";
-import { signIn } from "next-auth/react";
-import Image from "next/image";
-import Button from "@/components/Button";
+'use client';
+import { signIn } from 'next-auth/react';
+import Image from 'next/image';
+import Button from '@/components/Button';
 
-import styles from "./page.module.scss";
+import styles from './login.module.scss';
 
 export default function Page() {
   return (
-    <main className={styles.main}>
-      <div className={styles.main__background}>
-        <span>
-          <Image
-            src="/index_lines.svg"
-            alt="background"
-            width={0}
-            height={0}
-            sizes="100vh"
-            style={{ width: "auto", height: "100%" }}
-            priority
-          />
-          <div className={styles.main__title}>
-            <span className={styles.main__title__year}>
-              <Image
-                src="/index_title.svg"
-                alt="title"
-                width={265}
-                height={170}
-              />
-              <Image
-                src="/index_0line.svg"
-                alt="line"
-                width={43}
-                height={49}
-                style={{
-                  position: "absolute",
-                  top: "20px",
-                  left: "80px",
-                }}
-              />
-            </span>
-            <p>엠비티아이</p>
+    <div className={styles.login}>
+      <span>
+        <Image
+          src="/index_lines.svg"
+          alt="background"
+          width={0}
+          height={0}
+          //   sizes="100vh"
+          style={{ width: 'auto', height: '100%' }}
+          priority
+        />
+        <div className={styles.login__title}>
+          <span className={styles.login__title__year}>
+            <Image
+              src="/index_title.svg"
+              alt="title"
+              width={265}
+              height={170}
+            />
             <Image
-              src="/index_character.png"
-              alt="character"
-              width={150}
-              height={175}
+              src="/index_0line.svg"
+              alt="line"
+              width={43}
+              height={49}
+              style={{
+                position: 'absolute',
+                top: '20px',
+                left: '80px',
+              }}
             />
-          </div>
-        </span>
-        <Button className={styles.main__button} onClick={() => signIn("github")}>깃허브 로그인하기</Button>
-      </div>
-    </main>
+          </span>
+          <p>엠비티아이</p>
+          <Image
+            src="/index_character.png"
+            alt="character"
+            width={150}
+            height={175}
+          />
+        </div>
+      </span>
+      <Button className={styles.login__button} onClick={() => signIn('github')}>
+        깃허브 로그인하기
+      </Button>
+    </div>
   );
 }

src/app/page.tsx

@@ -1,6 +1,6 @@
-import { getServerSession } from "next-auth/next";
-import { authOptions } from "./api/auth/[...nextauth]/options";
-import Login from "@/app/login/page";
+import { getServerSession } from 'next-auth/next';
+import { authOptions } from './api/auth/[...nextauth]/options';
+import Login from '@/app/login/page';
 
 export default async function Home() {
   const session = await getServerSession(authOptions);

src/components/Button/Button.module.scss

@@ -1,10 +1,10 @@
 .Button {
   width: 21.375rem;
-  height: 3.75rem;
+  min-height: 3.75rem;
   border-radius: 1rem;
   font-size: 1.125rem;
   font-weight: 600;
-  font-family: "Pretendard Variable", Pretendard;
+  font-family: 'Pretendard Variable', Pretendard;
   background-color: #00a881;
   color: white;
   border: none;

src/components/FallingSnow/FallingSnow.module.scss

@@ -0,0 +1,22 @@
+.FallingSnow {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  z-index: -1;
+  height: calc(100% + 100px);
+  width: 100%;
+  top: -100px;
+  overflow: hidden;
+
+  &__snow_flake {
+    height: fit-content;
+    animation: fall 3.5s linear infinite;
+  }
+}
+
+@keyframes fall {
+  to {
+    transform: translateY(100vh);
+    opacity: 0.1;
+  }
+}

src/components/FallingSnow/FallingSnow.tsx

@@ -0,0 +1,37 @@
+import Image from 'next/image';
+import styles from './FallingSnow.module.scss';
+
+const makeSnowFlakes = () => {
+  const delayArray = [
+    '1.34s',
+    '4.76s',
+    '3.12s',
+    '2.89s',
+    '1.45s',
+    '2.23s',
+    '3.90s',
+    '4.67s',
+    '6.54s',
+    '2.98s',
+  ];
+  const sizeArray = [100, 10, 18, 76, 34, 58, 65, 21, 89, 50];
+  const opacityArray = [0.4, 0.6, 1, 0.7, 1, 0.9, 0.6, 0.8, 0.9, 1];
+
+  return sizeArray.map((size, i) => {
+    const style = {
+      animationDelay: delayArray[i],
+      opacity: opacityArray[i],
+    };
+    return (
+      <span className={styles.FallingSnow__snow_flake} key={size} style={style}>
+        <Image src="/loading_snow.svg" alt="snow" width={size} height={size} />
+      </span>
+    );
+  });
+};
+
+const FallingSnow: React.FC = () => {
+  return <div className={styles.FallingSnow}>{makeSnowFlakes()}</div>;
+};
+
+export default FallingSnow;

src/components/FallingSnow/index.ts

@@ -0,0 +1,3 @@
+import FallingSnow from './FallingSnow';
+
+export default FallingSnow;