랜드마크 디테일

src/components/ProjectModal.tsx

@@ -0,0 +1,91 @@
+import React, { useState } from 'react';
+import { MajorProject } from "@/data/project";
+import IndicatorDots from "@/components/common/IndicatorDots";
+
+interface CommonModalProps {
+    isOpen: boolean;
+    onClose: () => void;
+    item: MajorProject | null;
+}
+
+export const ProjectModal: React.FC<CommonModalProps> = ({ isOpen, onClose, item }) => {
+    const [currentIndex, setCurrentIndex] = useState(0);
+
+    if (!isOpen || !item) return null;
+
+    const images = item.subImgUrl ?? [];
+
+    const handlePrev = () => {
+        if (images.length === 0) return;
+        setCurrentIndex((prev) => (prev === 0 ? images.length - 1 : prev - 1));
+    };
+
+    const handleNext = () => {
+        if (images.length === 0) return;
+        setCurrentIndex((prev) => (prev === images.length - 1 ? 0 : prev + 1));
+    };
+
+    return (
+      <div
+        className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
+        onClick={onClose}
+      >
+          <div
+            className="relative bg-white w-[1222px] h-[901px] p-10 rounded-lg overflow-hidden"
+            onClick={(e) => e.stopPropagation()}
+          >
+              {/* 닫기 버튼 */}
+              <button
+                className="absolute top-6 right-6 text-black text-2xl font-light cursor-pointer"
+                onClick={onClose}
+              >
+                  ×
+              </button>
+
+              {/* 제목 및 정보 */}
+              <div className="mb-6">
+                  <h2 className="text-4xl font-extrabold mb-2">{item.title}</h2>
+                  <div className="text-base font-light space-y-1">
+                      <p>발주처 : {item.client}</p>
+                      <p>계약금액 : {item.contractAmount}</p>
+                      <p>공사기간 : {item.period}</p>
+                  </div>
+              </div>
+
+              {/* 이미지 및 컨트롤 */}
+              <div className="relative w-full h-[578px] flex justify-center items-center">
+                  {images.length > 0 && (
+                    <img
+                      src={images[currentIndex]}
+                      alt={`image-${currentIndex}`}
+                      className="rounded max-h-full object-contain"
+                    />
+                  )}
+                  <button
+                    onClick={handlePrev}
+                    className="absolute left-4 top-1/2 -translate-y-1/2 bg-gray-300/75 w-14 h-14 text-2xl cursor-pointer"
+                  >
+                      {'<'}
+                  </button>
+                  <button
+                    onClick={handleNext}
+                    className="absolute right-4 top-1/2 -translate-y-1/2 bg-gray-300/75 w-14 h-14 text-2xl cursor-pointer"
+                  >
+                      {'>'}
+                  </button>
+              </div>
+
+              {/* 페이지 인디케이터 */}
+              <div className="flex justify-center gap-2 mt-4">
+                  <IndicatorDots
+                    count={images.length}
+                    activeIndex={currentIndex}
+                    onClick={(index) => setCurrentIndex(index)}
+                    activeColorClass="bg-blue-900"
+                    inactiveColorClass="bg-blue-900/20"
+                  />
+              </div>
+          </div>
+      </div>
+    );
+};

src/components/common/CommonModal.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import {MajorProject} from "@/data/project";
-
-interface CommonModalProps {
-    isOpen: boolean;
-    onClose: () => void;
-    item: MajorProject | null;
-}
-
-/**
- * 프로젝트 상세 정보를 보여주는 모달 컴포넌트
- */
-export const CommonModal: React.FC<CommonModalProps> = ({ isOpen, onClose, item }) => {
-    if (!isOpen) return null;
-
-    return (
-        <div
-            className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm"
-            onClick={onClose}
-        >
-            <div
-                className="relative bg-white w-[1222px] h-[901px] p-10 rounded-lg overflow-hidden"
-                onClick={(e) => e.stopPropagation()}
-            >
-                {/* 닫기 버튼 */}
-                <button
-                    className="absolute top-6 right-6 text-black text-2xl font-light cursor-pointer"
-                    onClick={onClose}
-                >
-                    ×
-                </button>
-
-                {/* 제목 및 정보 */}
-                <div className="mb-6">
-                    <h2 className="text-4xl font-extrabold mb-2">{item.title}</h2>
-                    <div className="text-base font-light space-y-1">
-                        <p>발주처 : {item.client}</p>
-                        <p>계약금액 : {item.contractAmount}</p>
-                        <p>공사기간 : {item.period}</p>
-                    </div>
-                </div>
-
-                {/* 이미지 및 컨트롤 */}
-                <div className="relative w-full h-[578px] flex justify-center items-center">
-                    {/*<img*/}
-                    {/*    src={}*/}
-                    {/*    alt={images[currentIndex]?.alt || `image-${currentIndex}`}*/}
-                    {/*    className="rounded max-h-full"*/}
-                    {/*/>*/}
-                    <button onClick={() => {}} className="absolute left-4 top-1/2 -translate-y-1/2 bg-gray-300/75 w-14 h-14 text-2xl">{'<'}</button>
-                    <button onClick={() => {}} className="absolute right-4 top-1/2 -translate-y-1/2 bg-gray-300/75 w-14 h-14 text-2xl">{'>'}</button>
-                </div>
-
-                {/* 페이지 인디케이터 */}
-                {/*<div className="flex justify-center gap-2 mt-4">*/}
-                {/*    {images.map((_, idx) => (*/}
-                {/*        <div*/}
-                {/*            key={idx}*/}
-                {/*            className={`w-2 h-2 rounded-full ${*/}
-                {/*                idx === currentIndex ? 'bg-blue-900' : 'bg-blue-900/20'*/}
-                {/*            }`}*/}
-                {/*        />*/}
-                {/*    ))}*/}
-                {/*</div>*/}
-            </div>
-        </div>
-    );
-};

src/constants.ts

@@ -3,5 +3,6 @@ export const IMAGE_PREFIX = "/image";
 export const BUSINESS_IMAGE_PREFIX = `${IMAGE_PREFIX}/business`;
 export const PARTNER_IMAGE_PREFIX = `${IMAGE_PREFIX}/partners`;
 export const PROJECT_IMAGE_PREFIX = `${IMAGE_PREFIX}/project`;
+export const PROJECT_SUBIMAGE_PREFIX = `${IMAGE_PREFIX}/project/sub`;
 export const LAYOUT_IMAGE_PREFIX = `${IMAGE_PREFIX}/layout`;
 export const FOOTER_IMAGE_PREFIX = `${IMAGE_PREFIX}/footer`;

src/data/project.ts

@@ -1,4 +1,4 @@
-import {PROJECT_IMAGE_PREFIX} from "@/constants";
+import {PROJECT_IMAGE_PREFIX, PROJECT_SUBIMAGE_PREFIX} from "@/constants";
 
 export interface MajorProject {
   title: string;
@@ -7,6 +7,7 @@ export interface MajorProject {
   client?: string;
   contractAmount?: string;
   period?: string;
+  subImgUrl?: string[]
 }
 
 const projectList: MajorProject[] = [
@@ -14,6 +15,11 @@ const projectList: MajorProject[] = [
     title: "BNK 경남은행 전산 & 데이터센터",
     description: "",
     imageUrl: `${PROJECT_IMAGE_PREFIX}/데이터센터.jpg`,
+    subImgUrl: [
+      `${PROJECT_SUBIMAGE_PREFIX}/ICT.jpg`,
+      `${PROJECT_SUBIMAGE_PREFIX}/ICT.jpg`,
+      `${PROJECT_SUBIMAGE_PREFIX}/ICT.jpg`
+    ]
   },
   {
     title: "롯데캐슬 드메르",

src/pages/business/Landmarks.tsx

@@ -1,7 +1,7 @@
 import React, {useState} from 'react';
 import Pagination from "@/components/common/Pagination";
 import {getPaginatedList} from "@/utils/pagination";
-import {CommonModal} from "@/components/common/CommonModal";
+import {ProjectModal} from "@/components/ProjectModal";
 import projectList from "@/data/project";
 import type {MajorProject} from "@/data/project";
 
@@ -70,7 +70,7 @@ const Landmarks = () => {
         onPageChange={setCurrentPage}
       />
 
-      <CommonModal
+      <ProjectModal
         isOpen={isOpen}
         onClose={() => setIsOpen(false)}
         item={selectedItem}