package 구조 수정

src/App.jsx

@@ -1,4 +1,4 @@
-import Header from "./componenets/header/index.jsx";
+import Header from "@/componenets/Header.jsx";
 import Main from "./pages/main/index.jsx";
 
 function App() {

src/componenets/header/index.jsx → src/componenets/Header.jsx

@@ -1,8 +1,8 @@
 import React, {useState} from 'react';
-import logo from '../../assets/logo.png';
-import menuItems from './menuItems.json';
+import logo from '@/assets/logo.png';
+import menuItems from '@/data/menuItems.json';
 
-const Index = () => {
+const Header = () => {
     const [activeIndex, setActiveIndex] = useState(null);
 
     return (
@@ -62,4 +62,4 @@ const Index = () => {
     );
 };
 
-export default Index;
+export default Header;

src/data/partnersList.json

@@ -0,0 +1,102 @@
+[
+  {
+    "title": "BNK 경남은행 전산 & 데이터센터",
+    "description": "",
+    "imageUrl": "/hero3.jpg"
+  },
+  {
+    "title": "롯데캐슬 드메르",
+    "description": "발주처 : 롯데건설\n부산 북항 초고층 복합개발사업 중 통신공사 (롯데 드메르)\n계약금액 : 1,351,200,000원",
+    "imageUrl": "/hero3.jpg"
+  },
+  {
+    "title": "협성마리나 G7",
+    "description": "",
+    "imageUrl": "/hero3.png"
+  },
+  {
+    "title": "국방광대역 통합망",
+    "description": "",
+    "imageUrl": "/hero3.png"
+  },
+  {
+    "title": "수원 덕산병원",
+    "description": "",
+    "imageUrl": "/hero3.png"
+  },
+  {
+    "title": "강서구 BGF 리테일 CU 물류창고",
+    "description": "",
+    "imageUrl": "/hero3.png"
+  },
+  {
+    "title": "기장 오시리아 메디타운",
+    "description": "",
+    "imageUrl": "/hero3.png"
+  },
+  {
+    "title": "부산대학교병원 아트리움",
+    "description": "",
+    "imageUrl": "/hero3.png"
+  },
+  {
+    "title": "김해물류센터",
+    "description": "",
+    "imageUrl": "/hero3.png"
+  },
+  {
+    "title": "롯데호텔앤리조트 김해",
+    "description": "",
+    "imageUrl": "/hero3.png"
+  },
+  {
+    "title": "롯데리조트제주 아트발라스",
+    "description": "",
+    "imageUrl": "/hero3.png"
+  },
+  {
+    "title": "부암 서희 스타힐스",
+    "description": "",
+    "imageUrl": "/hero3.png"
+  },
+  {
+    "title": "BNK 경남은행 전산 & 데이터센터",
+    "description": "",
+    "imageUrl": "/hero3.jpg"
+  },
+  {
+    "title": "BNK 경남은행 전산 & 데이터센터",
+    "description": "",
+    "imageUrl": "/hero3.jpg"
+  },
+  {
+    "title": "BNK 경남은행 전산 & 데이터센터",
+    "description": "",
+    "imageUrl": "/hero3.jpg"
+  },
+  {
+    "title": "BNK 경남은행 전산 & 데이터센터",
+    "description": "",
+    "imageUrl": "/hero3.jpg"
+  },
+  {
+    "title": "BNK 경남은행 전산 & 데이터센터",
+    "description": "",
+    "imageUrl": "/hero3.jpg"
+  },
+  {
+    "title": "BNK 경남은행 전산 & 데이터센터",
+    "description": "",
+    "imageUrl": "/hero3.jpg"
+  },
+  {
+    "title": "BNK 경남은행 전산 & 데이터센터",
+    "description": "",
+    "imageUrl": "/hero3.jpg"
+  },
+  {
+    "title": "BNK 경남은행 전산 & 데이터센터",
+    "description": "",
+    "imageUrl": "/hero3.jpg"
+  }
+]

src/main.jsx

@@ -1,4 +1,3 @@
-import { StrictMode } from 'react'
 import { createRoot } from 'react-dom/client'
 import './index.css'
 import App from './App.jsx'

src/componenets/business/index.jsx → src/pages/main/Business.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import businessItems from './businessItems.json';
-import DarkOverlay from "../DarkOverlay.jsx";
+import DarkOverlay from "@/componenets/DarkOverlay.jsx";
+import businessItems from '@/data/businessItems.json';
 
 const Business = () => {
     return (

src/componenets/hero/index.jsx → src/pages/main/Hero.jsx

@@ -1,5 +1,5 @@
 import React, {useState, useEffect} from 'react';
-import DarkOverlay from "../DarkOverlay.jsx";
+import DarkOverlay from "@/componenets/DarkOverlay.jsx";
 
 const images = [
     '/hero.jpg',

src/pages/main/Partners.jsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import DarkOverlay from "@/componenets/DarkOverlay.jsx";
+import partnerList from '@/data/partnersList.json';
+
+const Partners = () => {
+    return (
+        <div
+            className="relative flex-col justify-items-center w-full
+             pt-10 pb-20 bg-cover bg-center gap-5 px-[2vw]"
+            style={{backgroundImage: 'url(/partners-bg.jpg)'}}
+        >
+            <DarkOverlay/>
+
+            <div className="w-full h-25">
+                <div className="relative w-full space-y-2">
+                    <div className="text-white text-5xl font-semibold font-['Inter']">협력사</div>
+                    <div className="text-white text-lg font-semibold font-['Inter']">50개가 넘는 신뢰받는 기업과 상생하고 있습니다.</div>
+                </div>
+            </div>
+
+            <div className="relative w-[70%] grid grid-cols-5 justify-items-center gap-y-15">
+                {partnerList.map((partner, index) => (
+                    <div key={index} className="w-36 h-16">
+                        <div
+                            className="flex-1 self-stretch bg-white inline-flex flex-col justify-center items-center gap-2.5">
+                            <div className="self-stretch flex-1 p-2.5 flex flex-col justify-start items-start gap-2.5">
+                                <img className="self-stretch flex-1" src="https://placehold.co/130x50"/>
+                            </div>
+                        </div>
+                    </div>
+                ))}
+            </div>
+        </div>
+    )
+}
+
+export default Partners;

src/componenets/projeect/index.jsx → src/pages/main/Project.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import projectList from './projectCardList.json';
+import projectList from '@/data/projectCardList.json';
 
 const Project = () => {
     return (

src/pages/main/index.jsx

@@ -1,14 +1,16 @@
 import React from 'react';
-import Hero from "../../componenets/hero/index.jsx";
-import Business from "../../componenets/business/index.jsx";
-import Projeect from "../../componenets/projeect/index.jsx";
+import Hero from "./Hero.jsx";
+import Business from "./Business.jsx";
+import Project from "./Project.jsx";
+import Partners from "./Partners.jsx";
 
 const Main = () => {
     return (
         <>
             <Hero />
             <Business />
-            <Projeect />
+            <Project />
+            <Partners />
         </>
     );
 };

vite.config.js

@@ -2,6 +2,7 @@
 import { defineConfig } from 'vite'
 import tailwindcss from '@tailwindcss/vite'
 import react from '@vitejs/plugin-react'
+import path from 'path';
 
 export default defineConfig({
   plugins: [react(), tailwindcss()],
@@ -9,5 +10,10 @@ export default defineConfig({
     host: true, // 0.0.0.0 으로 바인딩
     port: 5173,
     allowedHosts: ['dev.jonghyun2.com'] // 이 부분 추가
-  }
+  },
+  resolve: {
+    alias: {
+      '@': path.resolve(__dirname, 'src'), // src 디렉터리에 @ 할당
+    },
+  },
 })