Merge pull request #29 from softeerbootcamp4th/feat/#13-header

[Feat] Header 컴포넌트 구현

client/.storybook/preview.ts → client/.storybook/preview.tsx

@@ -1,4 +1,6 @@
+import React from "react";
 import type { Preview } from "@storybook/react";
+import { BrowserRouter as Router } from "react-router-dom";
 import "../src/index.css";
 
 const preview: Preview = {
@@ -10,6 +12,13 @@ const preview: Preview = {
             },
         },
     },
+    decorators: [
+        (Story) => (
+            <Router>
+                <Story />
+            </Router>
+        ),
+    ],
 };
 
 export default preview;

client/src/components/ButtonHeader/index.stories.tsx

@@ -0,0 +1,44 @@
+import type { Meta } from "@storybook/react";
+import Component, { ButtonHeaderProps } from "./index";
+
+const meta = {
+    title: "ButtonHeader",
+    component: Component,
+    tags: ["autodocs"],
+    argTypes: {
+        type: { description: "라이트모드 / 다크모드" },
+        isSelected: { description: "해당 버튼 헤더 선택 여부" },
+        url: { description: "버튼 헤더 클릭 시 이동하는 URL" },
+        children: { description: "버튼 헤더 내부에 들어가는 Node" },
+    },
+} as Meta;
+
+export default meta;
+
+const ButtonHeader = (args: ButtonHeaderProps) => {
+    return <Component {...args} />;
+};
+
+export const LightSelected = (args: ButtonHeaderProps) => (
+    <ButtonHeader {...args} isSelected type="light" url="/">
+        선착순 밸런스 게임
+    </ButtonHeader>
+);
+
+export const LightUnSelected = (args: ButtonHeaderProps) => (
+    <ButtonHeader {...args} isSelected={false} type="light" url="/">
+        선착순 밸런스 게임
+    </ButtonHeader>
+);
+
+export const DarkSelected = (args: ButtonHeaderProps) => (
+    <ButtonHeader {...args} isSelected type="dark" url="/">
+        선착순 밸런스 게임
+    </ButtonHeader>
+);
+
+export const DarkUnSelected = (args: ButtonHeaderProps) => (
+    <ButtonHeader {...args} isSelected={false} type="dark" url="/">
+        선착순 밸런스 게임
+    </ButtonHeader>
+);

client/src/components/ButtonHeader/index.style.tsx

@@ -0,0 +1,29 @@
+import { cva } from "class-variance-authority";
+
+export const buttonVariants = cva(
+    `h-body-2-medium h-[64px] py-300 px-200 inline-flex items-center border-b-2`,
+    {
+        variants: {
+            isSelected: {
+                true: "",
+                false: "text-n-neutral-500 border-transparent",
+            },
+            type: {
+                light: "",
+                dark: "",
+            },
+        },
+        compoundVariants: [
+            {
+                isSelected: true,
+                type: "light",
+                className: "border-n-neutral-950 text-n-neutral-950",
+            },
+            {
+                isSelected: true,
+                type: "dark",
+                className: "border-n-white text-n-white",
+            },
+        ],
+    }
+);

client/src/components/ButtonHeader/index.tsx

@@ -0,0 +1,23 @@
+import { ReactNode } from "react";
+import { Link } from "react-router-dom";
+import { buttonVariants } from "./index.style";
+
+export interface ButtonHeaderProps {
+    type: "light" | "dark";
+    isSelected: boolean;
+    url: string;
+    children: ReactNode;
+}
+
+export default function ButtonHeader({ type, isSelected, url, children }: ButtonHeaderProps) {
+    return (
+        <Link
+            to={url}
+            target="_blank"
+            rel="noopener noreferrer"
+            className={buttonVariants({ isSelected, type })}
+        >
+            <p>{children}</p>
+        </Link>
+    );
+}

client/src/components/Header/index.stories.tsx

@@ -0,0 +1,21 @@
+import type { Meta } from "@storybook/react";
+import Component, { HeaderProps } from "./index";
+
+const meta = {
+    title: "Header",
+    component: Component,
+    tags: ["autodocs"],
+    argTypes: {
+        type: { description: "라이트모드 / 다크모드" },
+    },
+} as Meta;
+
+export default meta;
+
+const Header = (args: HeaderProps) => {
+    return <Component {...args} />;
+};
+
+export const Light = (args: HeaderProps) => <Header {...args} type="light" />;
+
+export const Dark = (args: HeaderProps) => <Header {...args} type="dark" />;

client/src/components/Header/index.style.tsx

@@ -0,0 +1,19 @@
+import { cva } from "class-variance-authority";
+
+export const backgroundBlurVariants = cva(`absolute h-16 backdrop-blur-[32px] w-full z-[-1]`, {
+    variants: {
+        type: {
+            light: "bg-[#d0d0d0]/[.08]",
+            dark: "bg-n-white/[.08]",
+        },
+    },
+});
+
+export const logoVariants = cva(`h-heading-3-medium !text-[24px] !leading-8 h-[32px] self-center`, {
+    variants: {
+        type: {
+            light: "text-n-neutral-950",
+            dark: "text-n-white",
+        },
+    },
+});

client/src/components/Header/index.tsx

@@ -0,0 +1,56 @@
+import { useEffect, useState } from "react";
+import { useLocation } from "react-router-dom";
+import ButtonHeader from "../ButtonHeader";
+import { backgroundBlurVariants, logoVariants } from "./index.style";
+
+export interface HeaderProps {
+    type: "light" | "dark";
+}
+
+const EVENT_TYPE = {
+    RAFFLE: "raffle",
+    FIRST_COME: "first-come",
+};
+type EventType = (typeof EVENT_TYPE)[keyof typeof EVENT_TYPE];
+
+export default function Header({ type }: HeaderProps) {
+    const [selectedEvent, setSelectedEvent] = useState<EventType | "">("");
+    const location = useLocation();
+
+    useEffect(() => {
+        const pathname = location.pathname;
+        const selectedEventType =
+            pathname === "/bot"
+                ? EVENT_TYPE.RAFFLE
+                : pathname === "/balance"
+                  ? EVENT_TYPE.FIRST_COME
+                  : "";
+        setSelectedEvent(selectedEventType);
+    }, [location]);
+
+    return (
+        <header className="flex justify-center fixed top-0 w-full h-16 overflow-hidden z-20">
+            <div className={backgroundBlurVariants({ type })}></div>
+            <div className="w-[1200px] flex justify-between">
+                <h1 className={logoVariants({ type })}>CASPER Electric Event</h1>
+                <div className="flex gap-700">
+                    <ButtonHeader
+                        isSelected={selectedEvent === EVENT_TYPE.RAFFLE}
+                        type={type}
+                        url="/bot"
+                    >
+                        {/* TODO: URL 경로 수정 */}
+                        나만의 캐스퍼 일렉트릭 봇 만들기
+                    </ButtonHeader>
+                    <ButtonHeader
+                        isSelected={selectedEvent === EVENT_TYPE.FIRST_COME}
+                        type={type}
+                        url="/balance"
+                    >
+                        선착순 밸런스 게임
+                    </ButtonHeader>
+                </div>
+            </div>
+        </header>
+    );
+}