(#23) 🐰 �EUNHAK: 구역 가이드 페이지 구현 및 머지

구역 가이드에서 초기 페이지와 해당 좌석 버튼을 클릭하였을 때 이동하는 상세 페이지를 구현한다.

src/pages/Onboarding/components/BackBar.tsx → src/components/layout/BackBar.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 
-import backLeftButtonGrayIcon from '../../../assets/webp/back_left_button_gray.webp';
+import backLeftButtonGrayIcon from '../../assets/webp/back_left_button_gray.webp';
 
 const BackBar = () => {
     return (

src/pages/Onboarding/components/BackLogoBar.tsx → src/components/layout/BackLogoBar.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 
-import logoIcon from '../../../assets/svg/hitzone_logo.svg';
-import backLeftButtonGrayIcon from '../../../assets/webp/back_left_button_gray.webp';
+import logoIcon from '../../assets/svg/hitzone_logo.svg';
+import backLeftButtonGrayIcon from '../../assets/webp/back_left_button_gray.webp';
 
 const BackBar = () => {
     return (

src/pages/Recommendation/Question/HeaderBackBar.tsx → src/components/layout/HeaderBackBar.tsx

@@ -1,7 +1,7 @@
 import Image from 'next/image';
 
-import backLeftButtonGrayIcon from '../../../assets/webp/back_left_button_gray.webp';
-import closeButtonGrayIcon from '../../../assets/webp/close_button_gray.webp';
+import backLeftButtonGrayIcon from '../../assets/webp/back_left_button_gray.webp';
+import closeButtonGrayIcon from '../../assets/webp/close_button_gray.webp';
 
 
 interface Props {

src/pages/Recommendation/Question/HeaderBar.tsx → src/components/layout/HeaderBar.tsx

@@ -1,6 +1,6 @@
 import Image from 'next/image';
 
-import closeButtonGrayIcon from '../../../assets/webp/close_button_gray.webp';
+import closeButtonGrayIcon from '../../assets/webp/close_button_gray.webp';
 
 
 interface Props {

src/components/layout/HeaderCenter.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import Image from 'next/image';
+import Link from 'next/link';
+
+import logoIcon from '../../assets/svg/hitzone_logo.svg';
+
+const BackBar = () => {
+    return (
+        <div className="flex pb-[14px] border-b border-grayscale-10">
+            <div className="flex justify-center w-full">
+                <Link href="/">
+                    <Image src={logoIcon} alt="Logo" width={154} height={27} />
+                </Link>
+            </div>
+        </div>
+    );
+}
+
+export default BackBar;

src/pages/Culture/Culture.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Header from "../../components/layout/Header";
+import Header from "../../components/layout/MainHeader";
 import NavBar from "../../components/layout/NavBar";
 
 const Culture = () => {

src/pages/Guide/Guide.tsx

@@ -1,14 +1,90 @@
-import React from "react";
-import Header from "../../components/layout/Header";
+import React, { useState } from "react";
+import Image from "next/image";
+import Header from "../../components/layout/HeaderCenter";
 import NavBar from "../../components/layout/NavBar";
+import Dropdown from "../Main/components/Dropdown";
+import GuideDetailContent from "./components/GuideDetailContent";
+import guideJamsil from "../../assets/svg/guide_jamsil.svg";
+import jamsilRed from "../../assets/svg/seat/jamsil_red.svg";
+
+// 예시 데이터 (잠실종합운동장 - 레드석)
+const dummyData = {
+  title: "레드석",
+  image: jamsilRed,
+  description: "해당 구역은 다양한 것들을 모두 적절히 즐길 수 있는 구역이에요.",
+  gateInfo: "[1루] 2-3 Gate [3루] 2-1 Gate",
+  stepInfo: "[1루] 약 24~30cm(10열), 약 33~38cm(20열) / [3루] 약 24~30cm(1nn열), 약 33~38cm(22열)",
+  seatSpaceInfo: "[1루] 약 25cm [3루] 약 25cm",
+};
 
 const Guide = () => {
+  const [selectedStadium, setSelectedStadium] = useState<string>("잠실종합운동장 (잠실)");
+  const [selectedSection, setSelectedSection] = useState<string | null>(null);
+
+  const handleStadiumSelect = (stadium: string) => {
+    setSelectedStadium(stadium);
+    setSelectedSection(null);
+  };
+
+  const handleSectionClick = (sectionName: string) => {
+    setSelectedSection(sectionName);
+  };
+
+  const stadiumInfo = {
+    image: guideJamsil,
+    description: "서울의 자존심, LG 트윈스 / 미라클 두산, 두산 베어스",
+    sections: [
+      { color: "bg-jamsil-red", name: "레드석" },
+      { color: "bg-jamsil-blue", name: "블루석" },
+      { color: "bg-jamsil-orange", name: "오렌지석" },
+      { color: "bg-jamsil-navy", name: "네이비석" },
+      { color: "bg-jamsil-premium", name: "프리미엄석" },
+      { color: "bg-jamsil-table", name: "테이블석" },
+      { color: "bg-jamsil-exciting", name: "익사이팅존" },
+      { color: "bg-jamsil-green", name: "외야그린석" },
+    ],
+  };
+
   return (
-    <div>
+    <div className="flex flex-col h-screen">
       <Header />
-      <div className="p-4">
-        <h1>구역 가이드</h1>
+
+      <div className="flex-1 overflow-y-auto mt-[15px]">
+        {selectedSection ? (
+          <div>
+            <GuideDetailContent {...dummyData} />
+          </div>
+        ) : (
+          <>
+            <Dropdown options={["잠실종합운동장 (잠실)"]} selectedOption={selectedStadium} onSelect={handleStadiumSelect} />
+            <div className="mt-4">
+              <Image
+                src={stadiumInfo.image}
+                alt={`${selectedStadium} 이미지`}
+                className="w-full h-auto rounded-lg"
+                width={370}
+                height={198}
+              />
+              <p className="text-center text-sm font-medium text-gray-700 mt-2">{stadiumInfo.description}</p>
+            </div>
+
+            <h2 className="mt-6 text-lg font-bold text-left text-gray-700">궁금하신 구역을 선택해주세요!</h2>
+            <div className="grid grid-cols-2 gap-4 mt-4">
+              {stadiumInfo.sections.map((section) => (
+                <button
+                  key={section.name}
+                  className="flex items-center justify-start h-12 bg-gray-100 rounded-lg"
+                  onClick={() => handleSectionClick(section.name)}
+                >
+                  <div className={`w-3 h-3 rounded-sm ml-3 mr-2 ${section.color}`} />
+                  <span className="text-gray-700 text-sm font-medium">{section.name}</span>
+                </button>
+              ))}
+            </div>
+          </>
+        )}
       </div>
+
       <NavBar />
     </div>
   );

src/pages/Guide/components/GuideDetailContent.tsx

@@ -0,0 +1,74 @@
+import React from "react";
+import Image from "next/image";
+import StadiumInfo from "../../Main/components/StadiumInfo";
+import SeatDropdown from "./SeatDropdown";
+import tipIcon from "../../../assets/svg/tip_button.svg";
+
+interface GuideDetailContentProps {
+  title: string;
+  image: string;
+  description: string;
+  gateInfo: string;
+  stepInfo: string;
+  seatSpaceInfo: string;
+}
+
+export default function GuideDetailContent({
+  title,
+  image,
+  description,
+  gateInfo,
+  stepInfo,
+  seatSpaceInfo,
+}: GuideDetailContentProps) {
+  // 공통 클래스 정의
+  const containerClass = "bg-grayscale-0 p-3 rounded-lg";
+  const sectionTitleClass = "text-sm font-semibold text-grayscale-80 bg-gray-100 px-2 py-1 rounded inline-block";
+  const sectionContentClass = "text-sm font-regular text-black mt-2";
+
+  return (
+    <div className="relative mb-[84px]">
+      {/* 좌석 선택 드롭다운 및 Tip 버튼 */}
+      <div className="flex items-center mb-4">
+        <SeatDropdown
+          options={["레드석", "블루석", "오렌지석", "네이비석", "프리미엄석", "테이블석", "익사이팅석", "외야그린석"]}
+          selectedOption={title}
+          onSelect={(option) => console.log(option)}
+        />
+        <button className="ml-auto w-[54px] h-[30px] flex items-center justify-center">
+          <Image src={tipIcon} alt="Tip" width={54} height={30} />
+        </button>
+      </div>
+
+      {/* 야구장 좌석 이미지 */}
+      <div className="relative">
+        <Image src={image} alt={`${title} 이미지`} className="w-full rounded-lg" width={370} height={198} />
+      </div>
+
+      {/* 구장 정보 */}
+      <StadiumInfo stadium={title} />
+
+      <div className="bg-grayscale-5 p-4 rounded-lg mt-4">
+        {/* 상단 타이틀 섹션 */}
+        <div className={containerClass}>
+          <h2 className="text-lg font-bold">{title}</h2>
+          <p className="text-sm text-gray-700 mt-2">{description}</p>
+        </div>
+
+        {/* 세부 정보 섹션 */}
+        <div className={`${containerClass} mt-3 space-y-4`}>
+          {[
+            { title: "출입구 위치", content: gateInfo },
+            { title: "단차 정보", content: stepInfo },
+            { title: "좌석 간 간격 (무릎 간격) 정보", content: seatSpaceInfo },
+          ].map((section, index) => (
+            <div key={index}>
+              <h3 className={sectionTitleClass}>{section.title}</h3>
+              <p className={sectionContentClass}>{section.content}</p>
+            </div>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+}

src/pages/Guide/components/SeatDropdown.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import Image from "next/image";
+import stadiumDropdownIcon from "../../../assets/webp/stadium_dropdown.webp";
+
+interface SeatDropdownProps {
+  options: string[];
+  selectedOption: string;
+  onSelect: (option: string) => void;
+}
+
+export default function SeatDropdown({ options, selectedOption, onSelect }: SeatDropdownProps) {
+  const [isDropdownOpen, setIsDropdownOpen] = useState(false);
+
+  const toggleDropdown = () => setIsDropdownOpen(!isDropdownOpen);
+
+  return (
+    <div className="relative w-[220px]">
+      <button
+        onClick={toggleDropdown}
+        className="flex items-center justify-between py-[6px] px-3 border border-gray-300 rounded-lg w-full h-[36px] text-md font-semibold text-gray-800"
+      >
+        <span>{selectedOption || "구역을 선택하세요"}</span>
+        <Image src={stadiumDropdownIcon} alt="dropdown icon" width={16} height={16} />
+      </button>
+
+      {isDropdownOpen && (
+        <div className="absolute left-0 w-full mt-2 bg-white shadow-lg text-sm z-10 rounded-lg">
+          <ul className="list-none max-h-60 overflow-y-auto">
+            {options.map((option, index) => (
+              <li
+                key={option}
+                onClick={() => {
+                  onSelect(option);
+                  setIsDropdownOpen(false);
+                }}
+                className={`px-4 py-[10px] cursor-pointer ${
+                  option === selectedOption ? "bg-red-500 text-white font-semibold" : "text-gray-800"
+                } ${index === 0 ? "rounded-t-lg" : ""} ${index === options.length - 1 ? "rounded-b-lg" : ""} ${
+                  option !== selectedOption ? "hover:bg-gray-100" : ""
+                }`}
+              >
+                {option}
+              </li>
+            ))}
+          </ul>
+        </div>
+      )}
+    </div>
+  );
+}

src/pages/Main/Main.tsx

@@ -2,7 +2,7 @@ import React, { useState, useEffect } from "react";
 import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
 
-import Header from "../../components/layout/Header";
+import Header from "../../components/layout/MainHeader";
 import NavBar from "../../components/layout/NavBar";
 import BignnerGuide from "../../components/chips/BignnerGuide";
 import BignnerGuideDialog from "../../components/dialogs/BignnerGuideDialog";

src/pages/MyPage/MyPage.tsx

@@ -1,5 +1,5 @@
 import React from "react";
-import Header from "../../components/layout/Header";
+import Header from "../../components/layout/MainHeader";
 import NavBar from "../../components/layout/NavBar";
 
 const MyPage = () => {

src/pages/Onboarding/Signup/SignupPage1.tsx

@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import BackBar from "../components/BackBar"
+import BackBar from "../../../components/layout/BackBar"
 import { Props } from "./SignupPage";
 
 import Image from 'next/image';

src/pages/Onboarding/Signup/SignupPage2.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import BackBar from "../components/BackBar"
+import BackBar from "../../../components/layout/BackBar"
 import { Props } from "./SignupPage";
 
 import AlarmQuestionDialog from "../../../components/dialogs/AlarmQuestionDialog"

src/pages/Onboarding/Signup/SignupPage3.tsx

@@ -1,5 +1,5 @@
 import React, { useState } from 'react';
-import BackLogoBar from "../components/BackLogoBar"
+import BackLogoBar from "../../../components/layout/BackLogoBar"
 import { Props } from "./SignupPage";
 
 import Image from 'next/image';

src/pages/Recommendation/Question.tsx

@@ -1,8 +1,8 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
 
-import HeaderBar from "./Question/HeaderBar";
-import HeaderBackBar from "./Question/HeaderBackBar";
+import HeaderBar from "../../components/layout/HeaderBar";
+import HeaderBackBar from "../../components/layout/HeaderBackBar";
 import Question1 from "./Question/Question1";
 import Question2 from "./Question/Question2";
 import Question3 from "./Question/Question3";

src/pages/Recommendation/Result.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useRouter } from "next/router";
 
-import HeaderBar from "./Result/HeaderBar";
+import HeaderBar from "../../components/layout/ResultHeader";
 import Question1 from "./Question/Question1";
 import Question2 from "./Question/Question2";
 import Question3 from "./Question/Question3";