➕ [WV-15] feat : header UI 1차 생성 & favicon 설정

[hayoung78]

개요

• header UI 1차 생성
• favicon 임시 생성

PR Checklist

PR이 다음 요구 사항을 충족하는지 확인하세요.

• PR 제목 및 커밋 메시지 컨벤션 확인
• 직접 만든 함수가 있다면 이에 대한 설명 추가 (ex. JS DOCS)
• 변경 사항에 대한 테스트 완료 (버그 수정/기능에 대한 테스트)
• Label 확인
• Assignees 설정 확인
• Reviewers 설정 확인

PR details

favicon 및 metadata 임시로 생성했습니다.

export const metadata: Metadata = {
  title: "Kt wiz_wizviz",
  description: "한국 야구의 10번째 심장 kt wiz 야구단 공식 홈페이지",
  icons: {
    icon: "/logo_ktwiz_kr.svg",
  },
};

로고는 클로드 친구에게 만들어달라고 했습니다 ㅋㅋㅋ (약간 칠성사이다 같기도,,)

적용후

Header UI 생성

1차로 생성했습니다.. 추후에 리펙토링이 필요합니다. 다음 작업도 같은 브랜치에서 작업하겠습니다.

"use client";
import { useState } from "react";
import Link from "next/link";
import wizLogo from "@/assets/images/logo_ktwiz_en.svg";
import ktSportsLogo from "@/assets/images/logo_ktsports.png";
import Image from "next/image";
import { MainMenuItems, MenuData } from "@/constants/header-menu";

const Header = () => {
  const [isHovering, setIsHovering] = useState(false);

  return (
    <div className="relative">
      <header className="w-full">
        <nav
          className={`transition-colors duration-200 text-SYSTEM-white ${
            isHovering
              ? "bg-SYSTEM-black text-SYSTEM-white border-b"
              : "bg-SYSTEM-black"
          }`}
        >
          <div className="max-w-7xl mx-auto px-4">
            <div className="flex items-center justify-between h-20">
              {/* 로고 */}
              <Link href="/">
                <Image src={wizLogo} alt="wiz_logo" width={90} height={90} />
              </Link>

              {/* 중앙 메뉴 */}
              <div
                className="absolute left-1/2 transform -translate-x-1/2 flex items-center space-x-8"
                onMouseEnter={() => setIsHovering(true)}
                onMouseLeave={() => setIsHovering(false)}
              >
                {MainMenuItems.map((item) => (
                  <Link key={item} href={`/${item.replace(" ", "-")}`}>
                    {item}
                  </Link>
                ))}

                {/* 드롭다운 패널 */}
                {isHovering && (
                  <div className="absolute top-full left-1/2 transform -translate-x-1/2 w-screen bg-SYSTEM-black border-t shadow-lg">
                    <div className="max-w-7xl mx-auto py-6">
                      <div className="grid grid-cols-8 gap-4">
                        {MainMenuItems.map((category) => (
                          <div key={category} className="space-y-2">
                            {MenuData[category]?.map((item) => (
                              <Link
                                key={item}
                                href="#"
                                className="block text-l hover:text-SYSTEM-main"
                              >
                                {item}
                              </Link>
                            ))}
                          </div>
                        ))}
                      </div>
                    </div>
                  </div>
                )}
              </div>

              {/* 우측 메뉴 */}
              <div className="flex items-center space-x-4 text-l">
                <Link href="/login" className="hover:text-SYSTEM-main">
                  로그인
                </Link>
                <span>|</span>
                <Link href="/signup" className="hover:text-SYSTEM-main">
                  회원가입
                </Link>
                <Link href="/sports" className="border border-ELSE-D9 p-1">
                  <Image
                    src={ktSportsLogo}
                    alt="kt_sports_logo"
                    width={50}
                    height={50}
                  />
                </Link>
              </div>
            </div>
          </div>
        </nav>
      </header>
    </div>
  );
};

export default Header;

구조도 바꿔야할거같습니다.. 암튼 임시로만 봐주세요 ㅠㅜㅠㅜ

마우스 호버시,

근데 호버시 검정색으로 펼쳐지는거 다들 어떠신가요 ? ㅋㅋㅋㅋ

When modifying code...

# Request Level
  - [ ] : "🔥 이대로 Merge 하면 안돼요~!"
  - [ ] : "🥹 고치면 분명 나아질 게 분명합니다.."
  - [ ] : "🤷 수정하면 좋지 않을까요?"

# Description

[hee2323]

고생하셨습니당

[naelumcat]

확인했습니다