[Feat/#74] 인증 화면 개발

apps/web/src/views/login/components/Button.tsx

@@ -0,0 +1,33 @@
+interface ButtonProps {
+  label: string;
+  style?: React.CSSProperties;
+  onClick?: () => void;
+  disabled?: boolean;
+  className?: string;
+}
+
+export function Button({ label, style, onClick, disabled, className }: ButtonProps) {
+  return (
+    <button
+      type="button"
+      style={{
+        backgroundColor: disabled ? "#B7B7B7" : "#3A8DFF",
+        color: "white",
+        borderRadius: "5px",
+        height: "50px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: disabled ? "not-allowed" : "pointer",
+        position: "relative",
+        width: "100%",
+        ...style,
+      }}
+      onClick={onClick}
+      disabled={disabled}
+      className={className}
+    >
+      <span style={{ fontSize: 16, fontWeight: 600, letterSpacing: "-0.32px" }}>{label}</span>
+    </button>
+  );
+}

apps/web/src/views/login/components/SNSLoginButton.tsx

@@ -0,0 +1,48 @@
+"use client";
+
+import Image from "next/image";
+
+export function SNSLoginButton({ provider }: { provider: "google" | "kakao" }) {
+  const variants = {
+    google: {
+      label: "구글 로그인",
+      bg: "#FFFFFF",
+      color: "#000000",
+      border: "1px solid #E3E8EF",
+    },
+    kakao: {
+      label: "카카오 로그인",
+      bg: "#FEE500",
+      color: "#000000",
+      border: "1px solid #FEE500",
+    },
+  };
+
+  return (
+    <button
+      type="button"
+      style={{
+        background: variants[provider].bg,
+        color: variants[provider].color,
+        border: variants[provider].border,
+        borderRadius: "5px",
+        height: "45px",
+        display: "flex",
+        alignItems: "center",
+        justifyContent: "center",
+        cursor: "pointer",
+        position: "relative",
+        width: "100%",
+      }}
+    >
+      <Image
+        src={`/icons/${provider}.svg`}
+        alt={variants[provider].label}
+        width={26}
+        height={26}
+        style={{ position: "absolute", left: "25px" }}
+      />
+      <span style={{ fontSize: 16, fontWeight: 600, letterSpacing: "-0.32px" }}>{variants[provider].label}</span>
+    </button>
+  );
+}

apps/web/src/views/login/components/TextField.tsx

@@ -0,0 +1,107 @@
+"use client";
+
+import { useId, useState } from "react";
+
+interface TextFieldProps {
+  type: "text" | "password";
+  label: string;
+  validate?: (value: string) => boolean;
+  onChange?: (value: string) => void;
+  value?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  required?: boolean;
+  disabled?: boolean;
+  readonly?: boolean;
+  placeholder?: string;
+  error?: string;
+}
+
+export function TextField({
+  type,
+  label,
+  validate,
+  onChange,
+  value,
+  className,
+  style,
+  required,
+  disabled,
+  readonly,
+  placeholder,
+  error,
+}: TextFieldProps) {
+  const id = useId();
+  const [isFocused, setIsFocused] = useState(false);
+  const hasValidationError = validate ? !validate(value || "") : false;
+  const displayError = hasValidationError ? error : "";
+
+  const getBorderColor = () => {
+    if (hasValidationError) return "#E52929"; // 에러 상태
+    if (isFocused) return "#3A8DFF"; // focus 상태
+    return "#E3E8EF";
+  };
+
+  return (
+    <div style={{ position: "relative" }}>
+      <label
+        style={{
+          color: "#111",
+          fontSize: "12px",
+          fontStyle: "normal",
+          fontWeight: "600",
+          lineHeight: "140%",
+          letterSpacing: "-0.24px",
+          marginBottom: "2px",
+        }}
+        htmlFor={id}
+      >
+        {label}
+      </label>
+      <input
+        id={id}
+        type={type}
+        className={className}
+        onChange={onChange ? (e: React.ChangeEvent<HTMLInputElement>) => onChange(e.target.value) : undefined}
+        onFocus={() => setIsFocused(true)}
+        onBlur={() => setIsFocused(false)}
+        value={value}
+        required={required}
+        disabled={disabled}
+        readOnly={readonly}
+        placeholder={placeholder}
+        style={{
+          width: "100%",
+          height: "43px",
+          borderBottom: `1px solid ${getBorderColor()}`,
+          display: "flex",
+          flexDirection: "row",
+          alignItems: "center",
+          color: "#111",
+          fontSize: "14px",
+          fontStyle: "normal",
+          fontWeight: "500",
+          lineHeight: "140%",
+          letterSpacing: "-0.28px",
+          outline: "none",
+          transition: "border-color 0.2s ease-in-out",
+          ...style,
+        }}
+      />
+      <span
+        style={{
+          color: "#E52929",
+          position: "absolute",
+          bottom: "-24px",
+          left: "0",
+          fontSize: "12px",
+          fontWeight: "500",
+          lineHeight: "140%",
+          letterSpacing: "-0.24px",
+        }}
+      >
+        {displayError}
+      </span>
+    </div>
+  );
+}

apps/web/src/views/login/index.tsx

@@ -1,11 +1,6 @@
 "use client";
 
-import GoogleButton from "@/widgets/login/GoogleButton";
-import { useSession } from "next-auth/react";
-
 export function LoginPage() {
-  const { data: session } = useSession();
-
   return (
     <div
       style={{
@@ -16,19 +11,7 @@ export function LoginPage() {
         height: "100vh",
       }}
     >
-      <GoogleButton />
-      <div style={{ width: 300, marginTop: 20 }}>
-        <pre
-          style={{
-            whiteSpace: "pre-wrap",
-            wordWrap: "break-word",
-            overflowWrap: "break-word",
-            maxWidth: "100%",
-          }}
-        >
-          {JSON.stringify(session, null, 2)}
-        </pre>
-      </div>
+      <div>Login</div>
     </div>
   );
 }

apps/web/src/views/login/login.stories.tsx

@@ -0,0 +1,103 @@
+import type { Meta, StoryObj } from "@storybook/nextjs-vite";
+import React from "react";
+import { LoginPage } from ".";
+import { Button } from "./components/Button";
+import { SNSLoginButton } from "./components/SNSLoginButton";
+import { TextField } from "./components/TextField";
+
+const meta = {
+  title: "v2/Views/Login",
+  component: LoginPage,
+  parameters: {
+    layout: "centered",
+  },
+  tags: ["autodocs"],
+  argTypes: {},
+} satisfies Meta<typeof LoginPage>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// 구글 로그인
+export const 구글_로그인: Story = {
+  args: {},
+  render: () => (
+    <div style={{ width: "360px" }}>
+      <SNSLoginButton provider="google" />
+    </div>
+  ),
+};
+
+// 카카오 로그인
+export const 카카오_로그인: Story = {
+  args: {},
+  render: () => (
+    <div style={{ width: "360px" }}>
+      <SNSLoginButton provider="kakao" />
+    </div>
+  ),
+};
+
+// 이메일 주소 입력
+export const 이메일_주소_입력: Story = {
+  args: {},
+  render: () => {
+    const [email, setEmail] = React.useState("");
+
+    return (
+      <div style={{ width: "360px" }}>
+        <TextField
+          type="text"
+          label="이메일 주소"
+          placeholder="abcdef@naver.com"
+          value={email}
+          onChange={setEmail}
+          error="잘못된 이메일 주소입니다."
+          validate={value => {
+            // 빈 값이거나 유효한 이메일 형식인지 확인
+            if (value.length === 0) return true;
+            const emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
+            return emailRegex.test(value);
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+// 비밀번호 입력
+export const 비밀번호_입력: Story = {
+  args: {},
+  render: () => {
+    const [password, setPassword] = React.useState("");
+
+    return (
+      <div style={{ width: "360px" }}>
+        <TextField
+          type="password"
+          label="비밀번호"
+          placeholder="8~16자리 영대•소문자, 숫자, 특수문자 조합"
+          value={password}
+          onChange={setPassword}
+          error="잘못된 비밀번호입니다."
+          validate={value => {
+            // 8~16자리 영대•소문자, 숫자, 특수문자 조합
+            if (value.length === 0) return true;
+            return value.length >= 8 && value.length <= 16;
+          }}
+        />
+      </div>
+    );
+  },
+};
+
+// 로그인 버튼
+export const 로그인_버튼: Story = {
+  args: {},
+  render: () => (
+    <div style={{ width: "360px", display: "flex", flexDirection: "column", gap: "12px" }}>
+      <Button label="로그인" />
+      <Button label="로그인" disabled />
+    </div>
+  ),
+};

apps/web/src/views/register/index.tsx

@@ -0,0 +1,17 @@
+"use client";
+
+export function RegisterPage() {
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "center",
+        alignItems: "center",
+        height: "100vh",
+      }}
+    >
+      <div>Register</div>
+    </div>
+  );
+}