로그인페이지_퍼블리싱 (#2)

* New : 메테리얼 아이콘 설치

* New : 로그인 DTO 정의(임시)

* New : 로그인 관련 훅 생성

* New : 로그인 Form 컴포넌트 구현

* New : 로그인 Form Storybook

* New : 로그인 페이지 구현

client/package.json

@@ -16,6 +16,7 @@
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
     "@mui/material": "^5.14.15",
+    "@mui/icons-material": "^5.14.15",
     "framer-motion": "^10.16.4",
     "next": "14.0.0",
     "react": "^18",

client/src/app/auth/login/page.tsx

@@ -0,0 +1,65 @@
+import { Avatar, Box, Grid, Paper, Typography } from "@mui/material";
+import SigninForm from "@/components/user/signin/SigninForm";
+import Link from "next/link";
+import { SIGNUP, FORGOTPASSWORD } from "@/const/clientPath";
+import { Metadata } from "next";
+import { nameOfApp } from "@/const/brand";
+import { LockOutlined as LockOutlinedIcon } from "@mui/icons-material";
+
+export const metadata: Metadata = {
+  title: `${nameOfApp} | 로그인`,
+};
+
+const LoginPage = () => {
+  return (
+    <Grid container component="main" sx={{ height: "100vh" }}>
+      <Grid
+        item
+        xs={false}
+        sm={4}
+        md={7}
+        sx={{
+          backgroundImage: "url(https://source.unsplash.com/random?wallpapers)",
+          backgroundRepeat: "no-repeat",
+          backgroundSize: "cover",
+          backgroundPosition: "center",
+        }}
+      />
+      <Grid item xs={12} sm={8} md={5} component={Paper} elevation={6} square>
+        <Box
+          sx={{
+            my: 8,
+            mx: 4,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+          }}
+        >
+          {/* heading */}
+          <Avatar sx={{ m: 1, bgcolor: "secondary.main" }}>
+            <LockOutlinedIcon />
+          </Avatar>
+          <Typography component="h1" variant="h5">
+            Sign in
+          </Typography>
+          {/* form */}
+          <SigninForm />
+          <Grid container>
+            <Grid item xs>
+              <Link href={FORGOTPASSWORD}>
+                <Typography variant="body2">Forgot password?</Typography>
+              </Link>
+            </Grid>
+            <Grid item>
+              <Typography variant="body2">
+                계정이 없으신가요? <Link href={SIGNUP}>회원가입</Link>
+              </Typography>
+            </Grid>
+          </Grid>
+        </Box>
+      </Grid>
+    </Grid>
+  );
+};
+
+export default LoginPage;

client/src/components/user/signin/SigninForm.tsx

@@ -0,0 +1,62 @@
+"use client";
+import useLogin from "@/hooks/useLogin";
+import {
+  Box,
+  Button,
+  Checkbox,
+  FormControlLabel,
+  TextField,
+} from "@mui/material";
+
+import { useState } from "react";
+
+const SigninForm = () => {
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const handleSubmit = useLogin();
+
+  return (
+    <Box
+      component="form"
+      onSubmit={(event) => {
+        event.preventDefault();
+        handleSubmit({ email, password });
+      }}
+      sx={{ mt: 1 }}
+    >
+      <TextField
+        value={email}
+        onChange={({ target }) => setEmail(target.value)}
+        margin="normal"
+        required
+        fullWidth
+        id="email"
+        label="Email Address"
+        name="email"
+        autoComplete="email"
+        autoFocus
+      />
+      <TextField
+        value={password}
+        onChange={({ target }) => setPassword(target.value)}
+        margin="normal"
+        required
+        fullWidth
+        name="password"
+        label="Password"
+        type="password"
+        id="password"
+        autoComplete="current-password"
+      />
+      <FormControlLabel
+        control={<Checkbox value="remember" color="primary" />}
+        label="Remember me"
+      />
+      <Button type="submit" fullWidth variant="contained" sx={{ mt: 3, mb: 2 }}>
+        Sign In
+      </Button>
+    </Box>
+  );
+};
+
+export default SigninForm;

client/src/hooks/useLogin.ts

@@ -0,0 +1,13 @@
+import { SigninRequirement } from "@/types/auth/signin"
+
+/**
+ * 로그인 관련 로직들이 모여있는 Hook
+ * @returns login Handler
+ */
+export default function useLogin () {
+  const loginHandler = (props:SigninRequirement)=>{
+    const {email,password} = props
+    console.log(`email : ${email}, password : ${password}`)
+  }
+  return loginHandler
+}

client/src/stories/Components/Auth/LoginForm.stories.tsx

@@ -0,0 +1,35 @@
+import SigninForm from "@/components/user/signin/SigninForm";
+import { Box, Paper } from "@mui/material";
+import { Meta, StoryObj } from "@storybook/react";
+
+const meta = {
+  title: "Components/Auth/LoginForm",
+  component: SigninForm,
+  tags: ["autodocs"],
+  decorators: [
+    (Story) => {
+      return (
+        <Paper sx={{ mx: "auto", maxWidth: "768px", height: "100%" }}>
+          <Box
+            sx={{
+              my: 8,
+              mx: 4,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+            }}
+          >
+            <Story />
+          </Box>
+        </Paper>
+      );
+    },
+  ],
+} satisfies Meta<typeof SigninForm>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const LoginForm: Story = {
+  args: {},
+};

client/src/types/auth/signin.ts

@@ -0,0 +1,4 @@
+export interface SigninRequirement {
+  email: string;
+  password: string;
+}