diff --git a/apps/web/public/login/divide.svg b/apps/web/public/login/divide.svg new file mode 100644 index 0000000..8e71b66 --- /dev/null +++ b/apps/web/public/login/divide.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/web/public/login/minus.svg b/apps/web/public/login/minus.svg new file mode 100644 index 0000000..fdb3e5b --- /dev/null +++ b/apps/web/public/login/minus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/apps/web/public/login/multiply.svg b/apps/web/public/login/multiply.svg new file mode 100644 index 0000000..580c1fb --- /dev/null +++ b/apps/web/public/login/multiply.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/apps/web/public/login/pencil.svg b/apps/web/public/login/pencil.svg new file mode 100644 index 0000000..d386aba --- /dev/null +++ b/apps/web/public/login/pencil.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/apps/web/public/login/plus.svg b/apps/web/public/login/plus.svg new file mode 100644 index 0000000..9c3ec9c --- /dev/null +++ b/apps/web/public/login/plus.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/apps/web/public/login/vector-14.svg b/apps/web/public/login/vector-14.svg new file mode 100644 index 0000000..cdfdbc2 --- /dev/null +++ b/apps/web/public/login/vector-14.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/apps/web/src/app/login/login-decorations.tsx b/apps/web/src/app/login/login-decorations.tsx new file mode 100644 index 0000000..5c5e783 --- /dev/null +++ b/apps/web/src/app/login/login-decorations.tsx @@ -0,0 +1,37 @@ +import Image from "next/image"; +import * as s from "./login.css"; + +const OBJECT_FIT_CONTAIN = { objectFit: "contain" } as const; + +const DECORATIONS = [ + { + key: "vector14", + src: "/login/vector-14.svg", + wrapperClassName: s.vector14, + }, + { key: "pencil", src: "/login/pencil.svg", wrapperClassName: s.pencil }, + { key: "multiply", src: "/login/multiply.svg", wrapperClassName: s.multiply }, + { key: "minus", src: "/login/minus.svg", wrapperClassName: s.minus }, + { key: "plus", src: "/login/plus.svg", wrapperClassName: s.plus }, + { key: "divide", src: "/login/divide.svg", wrapperClassName: s.divide }, +] as const; + +const LoginDecorations = () => { + return ( + + ); +}; + +export default LoginDecorations; diff --git a/apps/web/src/app/login/login.css.ts b/apps/web/src/app/login/login.css.ts new file mode 100644 index 0000000..9161dfd --- /dev/null +++ b/apps/web/src/app/login/login.css.ts @@ -0,0 +1,126 @@ +import { style } from "@vanilla-extract/css"; +import { bgGradient, color } from "@/shared/styles/color.css"; +import { typo } from "@/shared/styles/typography.css"; + +export const page = style({ + minHeight: "100dvh", + position: "relative", + overflow: "hidden", + display: "flex", + flexDirection: "column", + + selectors: { + "&::before": { + content: '""', + position: "absolute", + left: 0, + right: 0, + bottom: 0, + height: "34.3rem", + background: bgGradient["login-bg"], + zIndex: 0, + pointerEvents: "none", + }, + }, +}); + +export const content = style({ + position: "relative", + zIndex: 2, + display: "flex", + flexDirection: "column", + flex: 1, +}); + +export const header = style({ + paddingTop: "4.8rem", + paddingLeft: "1.6rem", + paddingRight: "1.6rem", + display: "flex", + flexDirection: "column", + gap: "1.6rem", +}); + +export const tagline = style([ + typo.h3, + color["grayscale-700"], + { + fontWeight: 500, + }, +]); + +export const actions = style({ + marginTop: "auto", + paddingLeft: "1.6rem", + paddingRight: "1.6rem", + paddingBottom: "calc(env(safe-area-inset-bottom) + 1.6rem)", + display: "flex", + flexDirection: "column", + gap: "1.2rem", +}); + +export const decorations = style({ + position: "absolute", + inset: 0, + zIndex: 1, + pointerEvents: "none", + userSelect: "none", +}); + +export const deco = style({ + position: "absolute", +}); + +export const vector14 = style([ + deco, + { left: "-4.3rem", top: "27.8rem", width: "45.5rem", height: "51.3rem" }, +]); + +export const pencil = style([ + deco, + { right: "-5.0rem", top: "8.4rem", width: "27.0rem", height: "27.0rem" }, +]); + +export const multiply = style([ + deco, + { + left: "4.5rem", + top: "20.1rem", + width: "6.4rem", + height: "6.4rem", + transform: "rotate(11deg)", + }, +]); + +export const minus = style([ + deco, + { + left: "24.3rem", + top: "43.8rem", + width: "13rem", + height: "4.5rem", + transform: "rotate(4deg)", + }, +]); + +export const plus = style([ + deco, + { + left: "1.5rem", + top: "50.0rem", + width: "7.8rem", + height: "7.8rem", + transform: "rotate(-8deg)", + }, +]); + +export const divide = style([ + deco, + { + left: "20.3rem", + top: "55.0rem", + width: "14.9rem", + height: "13.2rem", + transform: "rotate(-2deg)", + }, +]); diff --git a/apps/web/src/app/login/page.tsx b/apps/web/src/app/login/page.tsx index a0e68b5..d94573e 100644 --- a/apps/web/src/app/login/page.tsx +++ b/apps/web/src/app/login/page.tsx @@ -1,6 +1,49 @@ -/* 로그인 페이지 */ +"use client"; + +import { useRouter } from "next/navigation"; +import Icon from "@/shared/components/icon/icon"; +import { Button } from "@/shared/components/button/button/button"; +import LoginDecorations from "./login-decorations"; +import * as s from "./login.css"; + const LoginPage = () => { - return
로그인
; + const router = useRouter(); + + const onKakaoStart = () => { + router.push("/"); + }; + + const onAppleStart = () => { + router.push("/"); + }; + + return ( +
+ + +
+
+ +

나만의 수학 오답노트

+
+ +
+
+
+
+ ); }; export default LoginPage; diff --git a/apps/web/src/shared/styles/color.css.ts b/apps/web/src/shared/styles/color.css.ts index b2a3372..addc610 100644 --- a/apps/web/src/shared/styles/color.css.ts +++ b/apps/web/src/shared/styles/color.css.ts @@ -84,3 +84,7 @@ export const bgColor = { "login-kakao": style({ backgroundColor: vars.color.login.kakao }), "etc-crown": style({ backgroundColor: vars.color.etc.crown }), }; + +export const bgGradient = { + "login-bg": vars.color.login.bgGradient, +} as const; diff --git a/apps/web/src/shared/styles/theme.css.ts b/apps/web/src/shared/styles/theme.css.ts index c7c959c..c3cadb9 100644 --- a/apps/web/src/shared/styles/theme.css.ts +++ b/apps/web/src/shared/styles/theme.css.ts @@ -36,7 +36,7 @@ export const vars = createThemeContract({ success: { 100: null, 500: null, 700: null }, warning: { 100: null, 500: null, 600: null }, error: { 100: null, 500: null, 700: null }, - login: { kakao: null }, + login: { kakao: null, bgGradient: null }, etc: { crown: null }, }, space: { 0: null, 2: null, 3: null, 4: null, 6: null }, @@ -170,7 +170,10 @@ export const lightTheme = createTheme(vars, { success: { 100: "#E6F9F2", 500: "#08C481", 700: "#068B5C" }, warning: { 100: "#FFEEC9", 500: "#FFC852", 600: "#E8B64B" }, error: { 100: "#FFC5C1", 500: "#FF4538", 700: "#B53128" }, - login: { kakao: "#FEE500" }, + login: { + kakao: "#FEE500", + bgGradient: "linear-gradient(180deg, #ffffff 0%, #ffdbd6 100%)", + }, etc: { crown: "#FFC852" }, },