diff --git a/package-lock.json b/package-lock.json index c01d1c1..ff1d883 100644 --- a/package-lock.json +++ b/package-lock.json @@ -833,9 +833,9 @@ } }, "node_modules/caniuse-lite": { - "version": "1.0.30001564", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz", - "integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==", + "version": "1.0.30001570", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001570.tgz", + "integrity": "sha512-+3e0ASu4sw1SWaoCtvPeyXp+5PsjigkSt8OXZbF9StH5pQWbxEjLAZE3n8Aup5udop1uRiKA7a4utUk/uoSpUw==", "funding": [ { "type": "opencollective", @@ -4543,9 +4543,9 @@ "dev": true }, "caniuse-lite": { - "version": "1.0.30001564", - "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001564.tgz", - "integrity": "sha512-DqAOf+rhof+6GVx1y+xzbFPeOumfQnhYzVnZD6LAXijR77yPtm9mfOcqOnT3mpnJiZVT+kwLAFnRlZcIz+c6bg==" + "version": "1.0.30001570", + "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001570.tgz", + "integrity": "sha512-+3e0ASu4sw1SWaoCtvPeyXp+5PsjigkSt8OXZbF9StH5pQWbxEjLAZE3n8Aup5udop1uRiKA7a4utUk/uoSpUw==" }, "chalk": { "version": "4.1.2", diff --git a/package.json b/package.json index 976b058..d314917 100644 --- a/package.json +++ b/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" } } diff --git a/public/loading_snow.svg b/public/loading_snow.svg new file mode 100644 index 0000000..605f1eb --- /dev/null +++ b/public/loading_snow.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/app/globals.css b/src/app/globals.css index a52ff30..a13e289 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -1,4 +1,4 @@ -@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"); +@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/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 { diff --git a/src/app/loading/loading.module.scss b/src/app/loading/loading.module.scss new file mode 100644 index 0000000..7a1533c --- /dev/null +++ b/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; + } +} diff --git a/src/app/loading/page.tsx b/src/app/loading/page.tsx new file mode 100644 index 0000000..b176d6d --- /dev/null +++ b/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 ( +
+

분석 중이에요!

+ +
+ ); +} diff --git a/src/app/login/page.module.scss b/src/app/login/login.module.scss similarity index 62% rename from src/app/login/page.module.scss rename to src/app/login/login.module.scss index ea1a3e4..98d436a 100644 --- a/src/app/login/page.module.scss +++ b/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; } } diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index c91ed63..621ba5b 100644 --- a/src/app/login/page.tsx +++ b/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 ( -
-
- - background -
- - title - line - -

엠비티아이

+
+ + background +
+ + title character -
- - -
-
+ +

엠비티아이

+ character + + + + ); } diff --git a/src/app/page.tsx b/src/app/page.tsx index 0c96476..c2a5cdb 100644 --- a/src/app/page.tsx +++ b/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); diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss index f94e061..793c5f7 100644 --- a/src/components/Button/Button.module.scss +++ b/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; diff --git a/src/components/FallingSnow/FallingSnow.module.scss b/src/components/FallingSnow/FallingSnow.module.scss new file mode 100644 index 0000000..8772bcd --- /dev/null +++ b/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; + } +} diff --git a/src/components/FallingSnow/FallingSnow.tsx b/src/components/FallingSnow/FallingSnow.tsx new file mode 100644 index 0000000..3238e2b --- /dev/null +++ b/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 ( + + snow + + ); + }); +}; + +const FallingSnow: React.FC = () => { + return
{makeSnowFlakes()}
; +}; + +export default FallingSnow; diff --git a/src/components/FallingSnow/index.ts b/src/components/FallingSnow/index.ts new file mode 100644 index 0000000..d36df71 --- /dev/null +++ b/src/components/FallingSnow/index.ts @@ -0,0 +1,3 @@ +import FallingSnow from './FallingSnow'; + +export default FallingSnow;