[김지윤] Sprint11

package.json

@@ -9,15 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@types/classnames": "^2.3.1",
     "axios": "^1.7.2",
+    "classnames": "^2.5.1",
     "next": "13.5.6",
     "react": "^18",
     "react-dom": "^18",
+    "react-hook-form": "^7.51.5",
+    "react-toastify": "^10.0.5",
     "sass": "^1.77.2"
   },
   "devDependencies": {
     "@types/node": "^20",
-    "@types/react": "^18",
+    "@types/react": "^18.3.3",
     "@types/react-dom": "^18",
     "eslint": "^8",
     "eslint-config-next": "13.5.6",

src/components/Button/Button.module.scss

@@ -15,3 +15,25 @@
     background-color: $dark-blue;
   }
 }
+
+.active {
+  background-color: $grey-400;
+  cursor: not-allowed;
+
+  &:hover {
+    background-color: $grey-400;
+  }
+}
+
+.fullWidth {
+  width: 100%;
+}
+
+.disabled {
+  background-color: $grey-400;
+  cursor: not-allowed;
+
+  &:hover {
+    background-color: $grey-400;
+  }
+}

src/components/Button/Button.tsx

@@ -1,14 +1,54 @@
 import React, { ReactNode } from "react";
+import classNames from "classnames";
 import styles from "./Button.module.scss";
 
 interface ButtonProps {
   onClick?: () => void;
   children: ReactNode;
+  fullWidth?: boolean;
+  disabled?: boolean; // 추가: disabled 상태 여부를 받아오는 prop
+  width?: number;
+  height?: number;
+  radius?: number;
+  fontSize?: number;
 }
 
-const Button: React.FC<ButtonProps> = ({ onClick, children }) => {
+const Button: React.FC<ButtonProps> = ({
+  onClick,
+  children,
+  fullWidth,
+  disabled, // 추가: disabled prop을 받아옴
+  width,
+  height,
+  radius,
+  fontSize,
+}) => {
+  const buttonClassName = classNames(styles.button, {
+    [styles.fullWidth]: fullWidth,
+    [styles.disabled]: disabled,
+  });
+
+  const buttonStyle: React.CSSProperties = {};
+  if (width) {
+    buttonStyle.width = width;
+  }
+  if (height) {
+    buttonStyle.height = height;
+  }
+  if (radius) {
+    buttonStyle.borderRadius = radius;
+  }
+  if (fontSize) {
+    buttonStyle.fontSize = fontSize;
+  }
+
   return (
-    <button className={styles.button} onClick={onClick}>
+    <button
+      className={buttonClassName}
+      onClick={onClick}
+      disabled={disabled}
+      style={buttonStyle}
+    >
       {children}
     </button>
   );

src/components/Header/Header.module.scss

@@ -33,6 +33,35 @@
   }
 }
 
+.headerRight {
+  display: flex;
+  gap: 10px;
+
+  .userControl {
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    gap: 4px;
+
+    .user {
+      display: inline;
+      cursor: default;
+      span {
+        @include font-style(16px, 800, $grey-800);
+      }
+    }
+
+    .signOut {
+      @include font-style(14px, 400, $grey-500);
+      cursor: pointer;
+
+      &:hover {
+        color: $grey-800;
+      }
+    }
+  }
+}
+
 /* mobile */
 @media (max-width: 768px) {
   .headerLeft {

src/components/Header/Header.tsx

@@ -1,16 +1,27 @@
 import Link from "next/link";
 import Image from "next/image";
 import { useRouter } from "next/router";
+
+import { useAuth } from "@/src/contexts/AuthProvider";
 import styles from "./Header.module.scss";
 import Button from "@/src/components/Button/Button";
 import { isMobileDevice } from "@/src/utils/isMobileDevice";
 import logoIcon from "@/public/svgs/logo.svg";
 import mobileLogoIcon from "@/public/svgs/logo-mobile.svg";
+import defaultProfile from "@/public/svgs/default-profile.svg";
 
 const isMobile = typeof window !== "undefined" && isMobileDevice();
 
 export default function Header() {
+  const { user, signOut } = useAuth();
   const router = useRouter();
+
+  const isAuthPath = router.pathname.startsWith("/auth");
+
+  if (isAuthPath) {
+    return null; // /auth 이하 경로에서는 Header 안보이게
+  }
+
   const setCurrentPage = (path: string) => {
     return {
       color:
@@ -41,7 +52,26 @@ export default function Header() {
           </Link>
         </nav>
       </div>
-      <Button onClick={() => router.push("/signin")}> 로그인</Button>
+      {user ? (
+        <div className={styles.headerRight}>
+          <Image
+            src={defaultProfile}
+            alt="기본 프로필 이미지"
+            width={40}
+            height={40}
+          />
+          <div className={styles.userControl}>
+            <div className={styles.user}>
+              <span>{user.nickname}</span>님
+            </div>
+            <div className={styles.signOut} onClick={signOut}>
+              로그아웃
+            </div>
+          </div>
+        </div>
+      ) : (
+        <Button onClick={() => router.push("/auth/signin")}>로그인</Button>
+      )}
     </header>
   );
 }

src/components/Layout/Layout.module.scss

@@ -1,6 +1,5 @@
 .container {
   width: 100%;
-  padding: 0 360px;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -9,18 +8,26 @@
 
 .page.container {
   margin-top: 100px;
+  padding: 0 360px;
+}
+
+.authPage.container {
+  margin-top: 60px;
+  padding: 0 640px;
 }
 
 /* mobile */
 @media (max-width: 768px) {
-  .container {
+  .page.container,
+  .authPage.container {
     padding: 0 16px;
   }
 }
 
 /* tablet */
 @media (max-width: 1280px) {
-  .container {
+  .page.container,
+  .authPage.container {
     padding: 0 24px;
   }
 }

src/components/Layout/Layout.tsx

@@ -1,8 +1,23 @@
+import { useRouter } from "next/router";
+import classNames from "classnames";
 import styles from "./Layout.module.scss";
 
-export default function Layout({ className = "", page = true, ...props }) {
-  const classNames = `${styles.container} ${
-    page ? styles.page : ""
-  } ${className}`;
-  return <div className={classNames} {...props} />;
-}
+const Layout = ({
+  className = "",
+  ...props
+}: {
+  className?: string;
+  children: React.ReactNode;
+}) => {
+  const router = useRouter();
+  const isAuthPage = router.pathname.startsWith("/auth");
+  const pageClassName = classNames(styles.container, {
+    [styles.authPage]: isAuthPage,
+    [styles.page]: !isAuthPage,
+    [className]: className,
+  });
+
+  return <div className={pageClassName} {...props} />;
+};
+
+export default Layout;