Merge pull request #20 from codeit9-temporary/feature/Header

Feat: 헤더 구현 및 버튼 수정

Author: venise5224

components/Button.tsx

@@ -26,13 +26,10 @@ const Button = ({
   return (
     <button
       style={{
-        width,
-        height,
         borderRadius: radius,
         background: backgroundStyle,
-        fontSize: size,
       }}
-      className="flex justify-center items-center text-white font-[600] whitespace-nowrap hover:opacity-90"
+      className={`flex justify-center ${width} ${height} ${size} items-center text-white font-[600] whitespace-nowrap hover:opacity-90`}
       {...props}
     >
       {children}

components/HeaderMenu.tsx

@@ -0,0 +1,52 @@
+import Image from "next/image";
+import Profile from "@/public/icons/profile.png";
+import Star from "@/public/icons/star.png";
+import Link from "next/link";
+import Button from "./Button";
+import { useRouter } from "next/router";
+
+const HeaderMenu = () => {
+  const isLoggedIn = false;
+  const router = useRouter();
+
+  return (
+    <>
+      {!isLoggedIn ? (
+        <Button
+          onClick={() => {
+            router.push("/login");
+          }}
+          width="w-[80px] md:w-[128px]"
+          height="h-[37px] md:h-[53px]"
+          size="text-[14px] md:text-[18px]"
+          type="button"
+        >
+          로그인
+        </Button>
+      ) : (
+        <div className="flex items-center gap-[24px]">
+          <Link
+            href={"/favorite"}
+            className="flex items-center gap-[6px] bg-gray200 border border-purple100 rounded-[4px] py-[10px] px-[12px] text-[12px] leading-[14.32px] md:text-[14px] md:leading-[16.71px] font-normal"
+          >
+            <Image
+              src={Star}
+              width={14}
+              height={17}
+              alt=""
+              className="align-top"
+            />
+            즐겨찾기
+          </Link>
+          <div className="flex items-center gap-[6px] text-[14px] leading-[16.71px] font-normal">
+            <Image src={Profile} width={28} height={28} alt="프로필" />
+            {/* 임시 유저 네임 */}
+            <span className="hidden md:block">전상민</span>
+          </div>
+        </div>
+      )}
+    </>
+  );
+};
+
+export default HeaderMenu;

components/Layout/Header.tsx

@@ -0,0 +1,24 @@
+import Logo from "@/public/icons/logo.svg";
+import Image from "next/image";
+import Link from "next/link";
+import HeaderMenu from "../HeaderMenu";
+
+const Header = () => {
+  return (
+    <div>
+      <div className="bg-gray100 py-[13px] px-[32px] md:py-[33px] md:px-[200px]">
+        <div className="flex justify-between items-center max-w-[1520px]">
+          <Link
+            href={"/"}
+            className="w-[88.67px] h-[16px] md:w-[133px] md:h-[24px]"
+          >
+            <Image src={Logo} width={133} height={24} alt="로고" />
+          </Link>
+          <HeaderMenu />
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Header;

pages/_app.tsx

@@ -1,6 +1,12 @@
+import Header from "@/components/Layout/Header";
 import "@/styles/globals.css";
 import type { AppProps } from "next/app";
 
 export default function App({ Component, pageProps }: AppProps) {
-  return <Component {...pageProps} />;
+  return (
+    <>
+      <Header />
+      <Component {...pageProps} />
+    </>
+  );
 }