Feat: Login 페이지 퍼블리싱

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 (
+    <div className={s.decorations} aria-hidden="true">
+      {DECORATIONS.map(({ key, src, wrapperClassName }) => (
+        <div key={key} className={wrapperClassName}>
+          <Image
+            src={src}
+            alt=""
+            fill
+            sizes="100vw"
+            style={OBJECT_FIT_CONTAIN}
+          />
+        </div>
+      ))}
+    </div>
+  );
+};
+
+export default LoginDecorations;

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)",
+  },
+]);

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 <div>로그인</div>;
+  const router = useRouter();
+
+  const onKakaoStart = () => {
+    router.push("/");
+  };
+
+  const onAppleStart = () => {
+    router.push("/");
+  };
+
+  return (
+    <main className={s.page}>
+      <LoginDecorations />
+
+      <div className={s.content}>
+        <header className={s.header}>
+          <Icon width={13.3} height={4.2} name="logo-default" />
+          <p className={s.tagline}>나만의 수학 오답노트</p>
+        </header>
+
+        <section className={s.actions} aria-label="소셜 로그인">
+          <Button
+            icon="kakao"
+            label="Kakao로 시작하기"
+            tone="kakao"
+            onClick={onKakaoStart}
+          />
+          <Button
+            icon="apple"
+            label="Apple로 시작하기"
+            tone="dark"
+            onClick={onAppleStart}
+          />
+        </section>
+      </div>
+    </main>
+  );
 };
 
 export default LoginPage;

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;

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" },
   },