Feat: Login 페이지 퍼블리싱

apps/web/src/app/login/login-decorations.tsx

@@ -0,0 +1,64 @@
+import Image from "next/image";
+import * as s from "./login.css";
+
+export const LoginDecorations = () => {
+  return (
+    <div className={s.decorations} aria-hidden>
+      <div className={s.vector14}>
+        <Image
+          src="/login/vector-14.svg"
+          alt=""
+          fill
+          style={{ objectFit: "contain" }}
+        />
+      </div>
+
+      <div className={s.pencil}>
+        <Image
+          src="/login/pencil.svg"
+          alt=""
+          fill
+          style={{ objectFit: "contain" }}
+        />
+      </div>
+
+      <div className={s.multiply}>
+        <Image
+          src="/login/multiply.svg"
+          alt=""
+          fill
+          style={{ objectFit: "contain" }}
+        />
+      </div>
+
+      <div className={s.minus}>
+        <Image
+          src="/login/minus.svg"
+          alt=""
+          fill
+          style={{ objectFit: "contain" }}
+        />
+      </div>
+
+      <div className={s.plus}>
+        <Image
+          src="/login/plus.svg"
+          alt=""
+          fill
+          style={{ objectFit: "contain" }}
+        />
+      </div>
+
+      <div className={s.divide}>
+        <Image
+          src="/login/divide.svg"
+          alt=""
+          fill
+          style={{ objectFit: "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 { 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: "linear-gradient(180deg, #ffffff 0%, #ffdbd6 100%)",
+      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;