21ow · 21ow · Jan 4, 2025 · Jan 4, 2025 · Jan 4, 2025 · Jan 4, 2025
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -21,15 +21,15 @@
     "@eslint/eslintrc": "^3.2.0",
     "@mui/material": "^6.2.0",
     "@svgr/webpack": "^8.1.0",
-    "@tanstack/react-query": "^5.63.0",
+    "@tanstack/react-query": "^5.62.11",
+    "@tanstack/react-query-devtools": "^5.62.14",
     "axios": "^1.7.9",
     "classnames": "^2.5.1",
     "next": "15.0.3",
     "react": "18.3.1",
     "react-dom": "18.3.1",
     "react-hook-form": "^7.54.1",
     "react-merge-refs": "^2.1.1",
-    "react-query": "^3.39.3",
     "sass": "^1.83.0",
     "vercel": "^39.2.2",
     "zustand": "^5.0.2"

diff --git a/public/icon/ic-add-item.svg b/public/icon/ic-add-item.svg
diff --git a/public/icon/ic-compare.svg b/public/icon/ic-compare.svg
diff --git a/public/icon/ic-search.svg b/public/icon/ic-search.svg
diff --git a/src/app/auth/signin/page.tsx b/src/app/auth/signin/page.tsx
@@ -0,0 +1,7 @@
+import SignIn from '@/feature/auth/signin/SignIn';
+
+const SignInPage = () => {
+  return <SignIn />;
+};
+
+export default SignInPage;
diff --git a/src/app/auth/signup/page.tsx b/src/app/auth/signup/page.tsx
@@ -0,0 +1,7 @@
+import SignUp from '@/feature/auth/signup/SignUp';
+
+const SignUpPage = () => {
+  return <SignUp />;
+};
+
+export default SignUpPage;
diff --git a/src/app/globals.scss b/src/app/globals.scss
@@ -4,4 +4,7 @@
 body {
   font-family: Pretendard;
   background-color: $black-450;
+  color: $white;
+  min-width: 375px;
+  height: 100vh;
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,18 +1,30 @@
-import type { Metadata } from 'next';
-import './globals.scss';
+'use client';
 
-export const metadata: Metadata = {
-  title: 'Mogazoa',
-};
+import Head from 'next/head';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
+import './globals.scss';
 
 export default function RootLayout({
   children,
 }: Readonly<{
   children: React.ReactNode;
 }>) {
+  const queryClient = new QueryClient();
+
   return (
-    <html lang="kr">
-      <body>{children}</body>
+    <html lang="ko">
+      <Head>
+        <title>Mogazoa</title>
+        <meta name="description" content="Mogazoa application" />
+        <meta name="viewport" content="width=device-width, initial-scale=1" />
+      </Head>
+      <body>
+        <QueryClientProvider client={queryClient}>
+          {children}
+          <ReactQueryDevtools initialIsOpen={false} />
+        </QueryClientProvider>
+      </body>
     </html>
   );
 }
diff --git a/src/asset/variables.scss b/src/asset/variables.scss
@@ -1,9 +1,9 @@
-$black-500: #17171c; //dard
-$black-450: #1c1c22; //배경
+$black-500: #17171c;
+$black-450: #1c1c22;
 $black-400: #181d26;
 $black-350: #252530;
-$black-300: #2e2e3a; //light
-$black-200: #353542; //mood
+$black-300: #2e2e3a;
+$black-200: #353542;
 
 $dark-gray: #6e6e82;
 $gray: #9fa6b2;
@@ -31,7 +31,7 @@ $border-blue: 1px solid $blue;
 
 $pad-input: 20px;
 $pad-button: 24px 288px;
-$pad-search: 16px 20px 16px 64px;
+$pad-search: 16px 20px 16px 44px;
 $pad-menu: 15px 20px;
 $pad-category: 4px 10px;
 $pad-category-small: 4px 8px;
@@ -46,7 +46,7 @@ $pad-statistics: 30px 74px;
   $right: auto,
   $transform: none,
   $color: $dark-gray,
-  $background-color: $black-350
+  $background-color: inherit
 ) {
   position: $position;
   top: $top;
@@ -57,3 +57,32 @@ $pad-statistics: 30px 74px;
   color: $color;
   background-color: $background-color;
 }
+
+@mixin form-style(
+  $width: 100%,
+  $display: grid,
+  $grid-template-columns: none,
+  $column-gap: 0,
+  $grid-template-rows: none,
+  $row-gap: 0
+) {
+  width: $width;
+  display: $display;
+  grid-template-columns: $grid-template-columns;
+  column-gap: $column-gap;
+  grid-template-rows: $grid-template-rows;
+  row-gap: $row-gap;
+  column-gap: $column-gap;
+}
+
+@mixin tablet {
+  @media (max-width: 1199px) {
+    @content;
+  }
+}
+
+@mixin mobile {
+  @media (max-width: 767px) {
+    @content;
+  }
+}
diff --git a/src/feature/auth/component/SocialSiginin.module.scss b/src/feature/auth/component/SocialSiginin.module.scss
@@ -0,0 +1,13 @@
+@use '@/shared/button/Button.module.scss' as button;
+
+.socialButton {
+  @include button.button-style(
+    $background: $black-450,
+    $border: $border-black,
+    $radius: $radius-rank,
+    $width: 56px,
+    $height: 56px,
+    $padding: 0
+  );
+  display: flex;
+}
diff --git a/src/feature/auth/component/SocialSignin.tsx b/src/feature/auth/component/SocialSignin.tsx
@@ -0,0 +1,18 @@
+import Image from 'next/image';
+import Button from '@/shared/button/Button';
+import styles from './SocialSiginIn.module.scss';
+
+type SocialSignInProps = {
+  src: string;
+  social: string;
+};
+
+const SocialSignIn = ({ src, social }: SocialSignInProps) => {
+  return (
+    <Button className={styles.socialButton}>
+      <Image src={src} width={28} height={28} alt={`${social} 간편로그인`} />
+    </Button>
+  );
+};
+
+export default SocialSignIn;
diff --git a/src/feature/auth/signin/Signin.module.scss b/src/feature/auth/signin/Signin.module.scss
@@ -0,0 +1,73 @@
+@use '@/shared/button/Button.module.scss' as button;
+
+.signInWrapper {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 20px;
+}
+
+.form {
+  @include form-style(
+    $width: 640px,
+    $grid-template-rows: repeat(3, auto),
+    $row-gap: 40px
+  );
+
+  @include tablet {
+    width: 440px;
+  }
+
+  @include mobile {
+    width: 335px;
+    row-gap: 30px;
+  }
+}
+
+.submitButton {
+  @include button.button-style(
+    $width: 100%,
+    $height: 65px,
+    $font-weight: 600,
+    $font-size: 18px,
+    $background: linear-gradient(90deg, #5097fa, #5363ff),
+    $padding: 0
+  );
+
+  &:hover {
+    background: linear-gradient(90deg, #3a7bc7, #3c50e0);
+  }
+
+  @include tablet {
+    height: 55px;
+    font-size: 16px;
+  }
+}
+
+.accountActions {
+  display: flex;
+  gap: 20px;
+  color: $gray;
+  font-size: 13px;
+}
+
+.socialSignIn {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 20px;
+  margin-top: 15px;
+}
+
+.socialTitle {
+  color: $dark-gray;
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.socialWrapper {
+  display: flex;
+  gap: 20px;
+}
diff --git a/src/feature/auth/signin/Signin.tsx b/src/feature/auth/signin/Signin.tsx
@@ -0,0 +1,89 @@
+'use client';
+
+import { useForm, SubmitHandler } from 'react-hook-form';
+import { useRouter } from 'next/navigation';
+import { useMutation } from '@tanstack/react-query';
+import { AuthResponse, SignInRequest } from '@/api/type/Auth';
+import axiosInstance from '@/lib/axiosInstance';
+import { AxiosError } from 'axios';
+import Input from '@/shared/Input/Input';
+import Button from '@/shared/button/Button';
+import SocialSignIn from '../component/SocialSignIn';
+import Link from 'next/link';
+import styles from './SignIn.module.scss';
+
+const SignIn = () => {
+  const {
+    register,
+    handleSubmit,
+    formState: { errors },
+  } = useForm<SignInRequest>();
+
+  const router = useRouter();
+
+  const { mutate } = useMutation<AuthResponse, AxiosError, SignInRequest>({
+    mutationFn: (data) => axiosInstance.post(`/auth/signIn`, data),
+    onSuccess: (response) => {
+      localStorage.setItem('signInToken', response.accessToken);
+      router.push('/'); //임시
+    },
+    onError: (error: AxiosError) => {
+      const message = (error.response?.data as { message: string })?.message;
+      console.error(message);
+    },
+  });
+
+  const onSubmit: SubmitHandler<SignInRequest> = (data) => {
+    mutate(data);
+  };
+
+  return (
+    <div className={styles.signInWrapper}>
+      <form onSubmit={handleSubmit(onSubmit)} className={styles.form}>
+        <Input
+          label="이메일"
+          placeholder="이메일을 입력해 주세요"
+          autoComplete="username"
+          formErrorMessage={errors.email?.message}
+          {...register('email', {
+            required: '이메일을 입력해주세요.',
+            pattern: {
+              value: /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,4}$/i,
+              message: '유효한 이메일을 입력해주세요.',
+            },
+          })}
+        />
+        <Input
+          type="password"
+          label="비밀번호"
+          placeholder="비밀번호를 입력해 주세요"
+          autoComplete="current-password"
+          formErrorMessage={errors.password?.message}
+          {...register('password', {
+            required: '비밀번호를 입력해주세요.',
+            minLength: {
+              value: 8,
+              message: '최소 8자 이상',
+            },
+          })}
+        />
+        <Button type="submit" className={styles.submitButton}>
+          로그인
+        </Button>
+      </form>
+      <div className={styles.accountActions}>
+        <Link href="#">비밀번호 재설정</Link>
+        <Link href="/auth/signup">회원가입</Link>
+      </div>
+      <div className={styles.socialSignIn}>
+        <div className={styles.socialTitle}>SNS로 바로 시작하기</div>
+        <div className={styles.socialWrapper}>
+          <SocialSignIn src={'/icon/ic-google.svg'} social="구글" />
+          <SocialSignIn src={'/icon/ic-kakaotalk.svg'} social="카카오톡" />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default SignIn;