Dev -> Main 합병

app/(menu)/media/news/page.tsx

@@ -1,14 +1,35 @@
 import NewsCard from "@/components/media/news-card";
+import CustomPagination from "@/components/ui/custom-pagination";
+import { CustomSelectWithInput } from "@/components/ui/custom-select";
+import { NewsData } from "@/constants/news-data";
+
+type NewsPageProps = {
+  searchParams: { page?: string };
+};
+export default function NewsPage({ searchParams }: NewsPageProps) {
+  const currentPage = Number(searchParams.page) || 1;
+  const itemsPerPage = 5;
+
+  const currentItems = NewsData.slice(
+    (currentPage - 1) * itemsPerPage,
+    currentPage * itemsPerPage
+  );
 
-export default function page() {
   return (
-    <div>
-      <NewsCard
-        title="2024 kt wiz 73승 기념뱃지 수령"
-        content="감사원은 원장을 포함한 5인 이상 11인 이하의 감사위원으로 구성한다. 국회가 재적의원 과반수의 찬성으로 계엄의 해제를 요구한 때에는 대통령은 이를 해제하여야 한다. 이 헌법시행 당시의 대법원장과 대법원판사가 아닌 법관은 제1항 단서의 규정에 불구하고 이 헌법에 의하여 임명된 것으로 본다. 명령·규칙 또는 처분이 헌법이나 법률에 위반되는 여부가 재판의 전제가 된 경우에는 대법원은 이를 최종적으로 심사할 권한을 가진다."
-        date={new Date("2024-12-25")}
-        views={99}
-      />
-    </div>
+    <>
+      <CustomSelectWithInput />
+      {currentItems.map((news) => (
+        <NewsCard
+          key={news.id}
+          title={news.title}
+          content={news.content}
+          date={news.date}
+          views={news.views}
+        />
+      ))}
+      <div className="p-4">
+        <CustomPagination />
+      </div>
+    </>
   );
 }

app/(menu)/player/hitter/catcher/page.tsx

@@ -0,0 +1,3 @@
+export default function page() {
+  return <div>page입니다</div>;
+}

app/(menu)/player/hitter/infielder/page.tsx

@@ -0,0 +1,3 @@
+export default function page() {
+  return <div>page입니다</div>;
+}

app/(menu)/player/hitter/outfielder/page.tsx

@@ -0,0 +1,3 @@
+export default function page() {
+  return <div>page입니다</div>;
+}

components/common/SubMenuBanner.tsx

@@ -1,30 +1,33 @@
-'use client';
+"use client";
 import { usePathname, useRouter } from "next/navigation";
 import React, { useEffect, useState } from "react";
-import { MENU_INFO } from "@/constants/menu-data";
-import submenuBg from '@/assets/images/submenu_bg.png';
+
+import submenuBg from "@/assets/images/submenu_bg.png";
 import Image from "next/image";
+import { SubMenuInfo } from "@/constants/header-menu";
 
 interface SubMenu {
-  id: string,
-  title: string,
-  descript: string,
+  id: string;
+  title: string;
+  descript: string;
 }
 
 const SubBannerMenu = () => {
   const router = useRouter();
   const pathname: string = usePathname();
-  const currentPath: string = pathname.split('/').pop() || ''; // 현재 메뉴 이름
-  const [subMenuList, setSubMenuList] = useState<SubMenu[]>([]) // 해당 메뉴의 하위 메뉴 리스트
+  const currentPath: string = pathname.split("/").pop() || ""; // 현재 메뉴 이름
+  const [subMenuList, setSubMenuList] = useState<SubMenu[]>([]); // 해당 메뉴의 하위 메뉴 리스트
   const [title, setTitle] = useState<string>("");
   const [descript, setDescript] = useState<string>("");
 
   // 현재 진입한 메뉴와 하위메뉴 정보들을 상태로 관리
   useEffect(() => {
     const findMenuInfo = () => {
-      for (const menu in MENU_INFO) {
-        const subMenuAll = MENU_INFO[menu as keyof typeof MENU_INFO] as SubMenu[];
-        const matchedMenu = subMenuAll.find(item => item.id === currentPath);
+      for (const menu in SubMenuInfo) {
+        const subMenuAll = SubMenuInfo[
+          menu as keyof typeof SubMenuInfo
+        ] as SubMenu[];
+        const matchedMenu = subMenuAll.find((item) => item.id === currentPath);
 
         if (matchedMenu) {
           setSubMenuList(subMenuAll);
@@ -61,9 +64,10 @@ const SubBannerMenu = () => {
                   key={tab.id}
                   onClick={() => router.push(tab.id)}
                   className={`flex flex-col items-center space-y-1 px-4 py-2 rounded-lg transition-all duration-300 
-                    ${currentPath === tab.id
-                      ? "bg-SYSTEM-white text-ELSE-CC6" // 적절한 색상 클래스 사용
-                      : "text-ELSE-49 hover:bg-ELSE-DE"
+                    ${
+                      currentPath === tab.id
+                        ? "bg-SYSTEM-white text-ELSE-CC6" // 적절한 색상 클래스 사용
+                        : "text-ELSE-49 hover:bg-ELSE-DE"
                     }`}
                 >
                   <span className="text-sm font-medium">{tab.title}</span>
@@ -77,4 +81,4 @@ const SubBannerMenu = () => {
   );
 };
 
-export default SubBannerMenu;
+export default SubBannerMenu;

components/layout/header.tsx

@@ -1,6 +1,5 @@
 "use client";
-import { useState } from "react";
-import Link from "next/link";
+
 import wizLogo from "@/assets/images/logo_ktwiz_en.svg";
 import Image from "next/image";
 import { MainMenuItems } from "@/constants/header-menu";
@@ -9,29 +8,34 @@ import { usePathname, useRouter } from "next/navigation";
 import HeaderDropMenu from "./headerDropMenu";
 
 const Header = () => {
-  const [isHovering, setIsHovering] = useState(false);
   const router = useRouter();
   const pathName = usePathname();
 
-  // const onHeaderMenuClick = () => {
-  //   console.log(pathName, "나 패스네임");
-  // };
-
   // 현재 경로와  url 경로가 같은지 보는 함수 t/f
   const isCurrentPath = (menuPath: string) => {
-    const formattedPath = `/${menuPath.replace(" ", "-")}`;
+    const formattedPath = `/${menuPath.replace(" ", "")}`;
     return pathName === formattedPath;
   };
 
+  //shop이나 sponsor 버튼 클릭시
+  const isShopSponsorClick = (items: string) => {
+    if (items === "shop") {
+      //새 탭으로 페이지 이동 , 링크 추후에 수정 필요
+      window.open("https://shop.ktwiz.co.kr", "_blank");
+    } else if (items === "sponsor") {
+      window.open("https://www.ktwiz.co.kr", "_blank");
+    }
+  };
+
   return (
-    <div className="relative">
+    <div className="relative z-50 group">
       <header className="w-full">
         <nav
           className={
-            "transition-colors duration-200 text-SYSTEM-white bg-SYSTEM-black"
+            "transition-colors duration-200 text-SYSTEM-white bg-SYSTEM-black cursor-pointer"
           }
-          onMouseEnter={() => setIsHovering(true)}
-          onMouseLeave={() => setIsHovering(false)}
+          // onMouseEnter={() => setIsHovering(true)}
+          // onMouseLeave={() => setIsHovering(false)}
         >
           <div className="max-w-7xl mx-auto px-4">
             <div className="flex items-center justify-between h-20">
@@ -48,22 +52,23 @@ const Header = () => {
               {/* 중앙 메뉴 */}
               <div className="absolute left-1/2 transform -translate-x-1/2 flex items-center">
                 {MainMenuItems.map((item) => (
-                  <Link
+                  <div
                     key={item}
-                    href={""}
-                    // href={`/${item.replace(" ", "-")}`}
                     className={`hover:text-SYSTEM-main w-[110px] text-center  text-xl font-bold${
                       isCurrentPath(item)
                         ? "text-SYSTEM-main"
                         : "text-SYSTEM-white"
                     }`}
+                    onClick={() => isShopSponsorClick(item)}
                   >
                     {item}
-                  </Link>
+                  </div>
                 ))}
               </div>
               {/* 드롭다운 */}
-              <div>{isHovering && <HeaderDropMenu />}</div>
+              <div>
+                <HeaderDropMenu />
+              </div>
               {/* 우측 메뉴 */}
               <HeaderRightMenu />
             </div>

components/layout/headerDropMenu.tsx

@@ -1,19 +1,44 @@
-import { MainMenuItems, MenuData } from "@/constants/header-menu";
+import { SubMenuItems, UNIFIED_MENU } from "@/constants/header-menu";
 import Link from "next/link";
 
 const HeaderDropMenu = () => {
+  const findPathByTitle = (category: string, menuTitle: string) => {
+    const menuCategory = UNIFIED_MENU[category as keyof typeof UNIFIED_MENU];
+    if (!menuCategory) return "#";
+
+    const menuItem = menuCategory.items.find(
+      (item) => item.title.includes(menuTitle) || menuTitle.includes(item.title)
+    );
+
+    if (menuItem) {
+      return `/${menuItem.path}`;
+    }
+    return "#";
+  };
+
+  const handleShopSponsorClick =
+    (category: string, item: string) => (e: React.MouseEvent) => {
+      if (category === "shop" && item === "바로가기") {
+        e.preventDefault();
+        window.open("https://www.ktwizstore.co.kr", "_blank");
+      } else if (category === "sponsor" && item === "바로가기") {
+        e.preventDefault();
+        window.open("https://b2b.ktwiz.co.kr", "_blank");
+      }
+    };
+
   return (
-    <div className="absolute mt-10 left-0 right-0  shadow-lg transition-all duration-300 ease-in-out overflow-hidden w-full animate-slideDown bg-SYSTEM-black items-center flex justify-center border-t border-t-ELSE-34">
+    <div className="invisible group-hover:visible absolute mt-10 left-0 right-0 shadow-lg transition-all duration-150 ease-in-out overflow-hidden w-full group-hover:animate-slideDown animate-slideUp bg-SYSTEM-black items-center flex justify-center border-t border-t-ELSE-34">
       <div className="grid grid-cols-7 w-[770px] py-4">
-        {MainMenuItems.map((category) => (
+        {Object.entries(SubMenuItems).map(([category, items]) => (
           <div key={category} className="flex flex-col items-center">
-            {/* 메뉴 아이템들 */}
             <div className="space-y-2">
-              {MenuData[category]?.map((item) => (
+              {items.map((item) => (
                 <Link
                   key={item}
-                  href="#"
+                  href={findPathByTitle(category, item)}
                   className="block text-sm text-SYSTEM-white hover:text-SYSTEM-main text-center"
+                  onClick={handleShopSponsorClick(category, item)}
                 >
                   {item}
                 </Link>
@@ -25,5 +50,4 @@ const HeaderDropMenu = () => {
     </div>
   );
 };
-
 export default HeaderDropMenu;

components/layout/type.d.ts

@@ -10,3 +10,34 @@ type MenuItem =
 type HeaderMenu = {
   [K in MenuItem]: string[];
 };
+
+type MainMenuItems = {
+  "kt wiz": string[];
+  "wiz park": string[];
+  game: string[];
+  player: string[];
+  media: string[];
+  shop: string[];
+  sponsor: string[];
+};
+type MenuInfoItem = {
+  id: string | number;
+  path: string;
+  title: string;
+  descript: string;
+};
+type UnifiedMenuCategory = {
+  key: string;
+  subMenus: string[];
+  items: UnifiedMenuItem[];
+};
+
+// UNIFIED_MENU의 전체 타입 정의
+type UnifiedMenuType = {
+  [K in MenuItem]: UnifiedMenuCategory;
+};
+
+// MENU_INFO의 타입 정의
+type MenuInfoType = {
+  [key: string]: MenuInfoItem[];
+};

components/media/news-card.tsx

@@ -7,7 +7,12 @@ const NewsCard = ({ title, content, date, views }: NewsCardProps) => {
   return (
     <div className="h-[200px] flex p-4 gap-2 w-full border-b border-b-ELSE-B7">
       <div className="justify-center content-center w-[320px] h-[170px]">
-        <Image src={exampleImage} width={300} height={160} alt="example" />
+        <Image
+          src={exampleImage}
+          width={300}
+          height={160}
+          alt="example_image"
+        />
       </div>
       <div className="flex-1 h-[170px] flex flex-col justify-between">
         <div className="flex flex-col gap-3">

components/ui/custom-pagination.tsx

@@ -0,0 +1,42 @@
+import {
+  Pagination,
+  PaginationContent,
+  //   PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from "@/components/ui/pagination";
+
+export default function CustomPagination() {
+  return (
+    <Pagination>
+      <PaginationContent>
+        <PaginationItem>
+          <PaginationPrevious href="#" />
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">1</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">2</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">3</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">4</PaginationLink>
+        </PaginationItem>
+        <PaginationItem>
+          <PaginationLink href="#">5</PaginationLink>
+        </PaginationItem>
+        {/* <PaginationItem>
+          <PaginationEllipsis />
+        </PaginationItem> */}
+        <PaginationItem>
+          <PaginationNext href="#" />
+        </PaginationItem>
+      </PaginationContent>
+    </Pagination>
+  );
+}

components/ui/custom-select.tsx

@@ -0,0 +1,37 @@
+import * as React from "react";
+
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
+import { Input } from "@/components/ui/input";
+import { Button } from "@/components/ui/button";
+
+export function CustomSelectWithInput() {
+  return (
+    <div className="flex gap-1">
+      <Select>
+        <SelectTrigger className="w-[180px]">
+          <SelectValue placeholder="제목" />
+        </SelectTrigger>
+        <SelectContent>
+          <SelectGroup className="bg-SYSTEM-white">
+            <SelectItem value="apple">제목</SelectItem>
+            <SelectItem value="banana">내용</SelectItem>
+          </SelectGroup>
+        </SelectContent>
+      </Select>
+      <Input
+        id="picture"
+        type="text"
+        className="w-[300px]"
+        placeholder="검색어를 입력해주세요"
+      />
+      <Button className="border">검색</Button>
+    </div>
+  );
+}