temp1

src/components/common/Tabs.tsx

@@ -0,0 +1,47 @@
+import React from 'react';
+
+export interface TabItem {
+  id: string;
+  label: string;
+}
+
+interface TabsProps {
+  items: TabItem[];
+  activeTab: string;
+  onTabChange: (id: string) => void;
+  children: React.ReactNode;
+  className?: string;
+}
+
+const Tabs: React.FC<TabsProps> = ({
+                                     items,
+                                     activeTab,
+                                     onTabChange,
+                                     children,
+                                     className,
+                                   }) => {
+  return (
+    <div className={className}>
+      <div className="flex text-center items-center justify-around h-40">
+        {items.map((tab, idx) => (
+          <div
+            key={tab.id}
+            className={`w-full py-4 cursor-pointer text-2xl font-semibold font-['Inter'] ${
+              idx !== 0 ? 'border-l' : ''} ${
+              idx !== items.length - 1 ? 'border-r' : ''} ${
+              activeTab === tab.id ? 'text-black' : 'text-black/25'
+            }`}
+            style={{ borderColor: '#E0E1E2' }}
+            onClick={() => onTabChange(tab.id)}
+          >
+            {tab.label}
+          </div>
+        ))}
+      </div>
+
+      <div className="mt-6">{children}</div>
+    </div>
+  );
+};
+
+export default Tabs;

src/components/main/Directions.tsx

@@ -1,119 +1,97 @@
-import React, { useState, useEffect, useRef } from 'react';
+import React, {useState, useEffect, useRef} from 'react';
+import Tabs, {TabItem} from '@/components/common/Tabs';
 
-interface DirectionsProps {
-    disableTitle?: boolean;
-}
-
-const tabs = [
-    { id: 'busan', label: '부산 본사' },
-    { id: 'gimhae', label: '김해 공장' },
-    { id: 'seoul', label: '서울 경기지사' },
+const tabItems: TabItem[] = [
+  {id: 'busan', label: '부산 본사'},
+  {id: 'gimhae', label: '김해 공장'},
+  {id: 'seoul', label: '서울 경기지사'},
 ];
 
-
 const tabContent: Record<string, { lat: number; lng: number; address: string; phone: string }> = {
-    busan: {
-        lat: 35.170833,
-        lng: 129.130833,
-        address: '부산 해운대구 센텀중앙로 78, 1308호(센텀그린타워)',
-        phone: '051-808-8556',
-    },
-    gimhae: {
-        lat: 35.207,
-        lng: 128.848,
-        address: '경남 김해시 주촌면 골든루트로 80-16',
-        phone: '055-123-4567',
-    },
-    seoul: {
-        lat: 37.501274,
-        lng: 127.039585,
-        address: '서울 강남구 테헤란로 123, 5층',
-        phone: '02-987-6543',
-    },
+  busan: {
+    lat: 35.170833,
+    lng: 129.130833,
+    address: '부산 해운대구 센텀중앙로 78, 1308호(센텀그린타워)',
+    phone: '051-808-8556',
+  },
+  gimhae: {
+    lat: 35.207,
+    lng: 128.848,
+    address: '경남 김해시 주촌면 골든루트로 80-16',
+    phone: '055-123-4567',
+  },
+  seoul: {
+    lat: 37.501274,
+    lng: 127.039585,
+    address: '서울 강남구 테헤란로 123, 5층',
+    phone: '02-987-6543',
+  },
 };
 
-const Directions: React.FC<DirectionsProps> = ({ disableTitle }) => {
-    const [activeTab, setActiveTab] = useState('busan');
-    const mapRef = useRef<HTMLDivElement>(null);
-    const mapInstanceRef = useRef<naver.maps.Map>(null);
-    const markerRef = useRef<naver.maps.Marker>(null);
-
-    useEffect(() => {
-        const { naver } = window;
-        if (!naver || !mapRef.current) return;
+const Directions: React.FC<{ disableTitle?: boolean }> = ({disableTitle}) => {
+  const [activeTab, setActiveTab] = useState('busan');
+  const mapRef = useRef<HTMLDivElement>(null);
+  const mapInstanceRef = useRef<naver.maps.Map>(null);
+  const markerRef = useRef<naver.maps.Marker>(null);
 
-        const location = tabContent[activeTab];
-        const position = new naver.maps.LatLng(location.lat, location.lng);
+  useEffect(() => {
+    const {naver} = window;
+    if (!naver || !mapRef.current) return;
 
-        if (!mapInstanceRef.current) {
-            mapInstanceRef.current = new naver.maps.Map(mapRef.current, {
-                center: position,
-                zoom: 16,
-            });
-        } else {
-            mapInstanceRef.current.setCenter(position);
-        }
+    const location = tabContent[activeTab];
+    const position = new naver.maps.LatLng(location.lat, location.lng);
 
-        // ✅ 기존 마커 제거 후 새로운 마커 설정
-        if (markerRef.current) {
-            markerRef.current.setMap(null);
-        }
+    if (!mapInstanceRef.current) {
+      mapInstanceRef.current = new naver.maps.Map(mapRef.current, {
+        center: position,
+        zoom: 16,
+      });
+    } else {
+      mapInstanceRef.current.setCenter(position);
+    }
 
-        markerRef.current = new naver.maps.Marker({
-            position,
-            map: mapInstanceRef.current,
-        });
-    }, [activeTab]);
+    if (markerRef.current) {
+      markerRef.current.setMap(null);
+    }
 
-    return (
-        <div className="px-[2vw] pb-[4vw] space-y-[5vw]">
-            <div className="max-w-7xl mx-auto">
-                {!disableTitle && (
-                    <div className="space-y-2">
-                        <div className="text-4xl text-blue-900 font-bold font-['Inter']">찾아오시는 길</div>
-                    </div>
-                )}
+    markerRef.current = new naver.maps.Marker({
+      position,
+      map: mapInstanceRef.current,
+    });
+  }, [activeTab]);
 
-                <div className="mx-30 h-40 flex text-center items-center justify-around">
-                    {tabs.map((tab, idx) => (
-                        <div
-                            key={tab.id}
-                            className={`w-full py-6 cursor-pointer text-2xl font-semibold font-['Inter'] ${
-                                idx !== 0 ? 'border-l' : ''
-                            } ${idx !== tabs.length - 1 ? 'border-r' : ''} ${
-                                activeTab === tab.id ? 'text-black' : 'text-black/25'
-                            }`}
-                            style={{ borderColor: '#E0E1E2' }}
-                            onClick={() => setActiveTab(tab.id)}
-                        >
-                            {tab.label}
-                        </div>
-                    ))}
-                </div>
-                
-                <div className="mx-30">
-                    <div style={{ height: '500px' }}>
-                        <div id="map" ref={mapRef} style={{ width: '100%', height: '100%' }} />
-                    </div>
-
-                    <div className="flex flex-wrap py-6">
-                        <div className="w-1/2 px-4">
-                            <div className="text-black text-2xl font-semibold font-['Inter'] mb-2">주소</div>
-                            <div className="text-black text-xl font-normal font-['Inter']">
-                                {tabContent[activeTab].address}
-                            </div>
-                        </div>
-                        <div className="w-1/2 px-4">
-                            <div className="text-black text-2xl font-semibold font-['Inter'] mb-2">전화</div>
-                            <div className="text-black text-xl font-normal font-['Inter']">
-                                {tabContent[activeTab].phone}
-                            </div>
-                        </div>
-                    </div>
-                </div>
+  return (
+    <div className="px-[2vw] pb-[4vw] space-y-[5vw]">
+      <div className="max-w-7xl mx-auto">
+        {!disableTitle && (
+          <div className="space-y-2">
+            <div className="text-4xl text-blue-900 font-bold font-['Inter']">찾아오시는 길</div>
+          </div>
+        )}
+        <Tabs
+          items={tabItems}
+          activeTab={activeTab}
+          onTabChange={setActiveTab}
+        >
+          <div className="mx-15">
+            <div style={{height: '500px'}}>
+              <div ref={mapRef} style={{width: '100%', height: '100%'}}/>
+            </div>
+            <div className="flex flex-wrap py-6">
+              <div className="w-1/2 px-4">
+                <div className="text-black text-2xl font-semibold font-['Inter'] mb-2">주소</div>
+                <div className="text-black text-xl font-normal font-['Inter']">{tabContent[activeTab].address}</div>
+              </div>
+              <div className="w-1/2 px-4">
+                <div className="text-black text-2xl font-semibold font-['Inter'] mb-2">전화</div>
+                <div className="text-black text-xl font-normal font-['Inter']">{tabContent[activeTab].phone}</div>
+              </div>
             </div>
-        </div>
-    );
+          </div>
+        </Tabs>
+      </div>
+    </div>
+  );
 };
 
 export default Directions;

src/pages/about/History.tsx

@@ -0,0 +1,44 @@
+import React, {useState} from "react";
+import Tabs, {TabItem} from "@/components/common/Tabs";
+
+const tabItems: TabItem[] = [
+  {id: '1', label: '현재'},
+  {id: '2', label: '2010 ~ 2020'},
+  {id: '3', label: '2010 ~'},
+];
+
+const History: React.FC = () => {
+  const [activeTab, setActiveTab] = useState('2');
+
+  return (
+    <div className="max-w-7xl mx-auto my-20">
+      <div className="text-center justify-center text-neutral-800 text-2xl font-medium font-['Inter'] leading-10 mb-10">
+        반도산전은 1996년 설립 이래 30년의 시간 동안 멈추지 않고 기술혁신과 내실을 다져왔습니다.<br/>대한민국을 선도하는 기업으로 도약해 나갈 것 입니다.
+      </div>
+      <Tabs
+        items={tabItems}
+        activeTab={activeTab}
+        onTabChange={setActiveTab}
+      >
+        <div className="flex max-w-7xl mx-auto">
+          <div className="border flex-1 text-center">
+            <h2 className="text-[28px] font-semibold">
+              <span className="text-black text-5xl">2010</span>
+              <span className="relative -top-0 mx-4 text-black text-5xl">-</span>
+              <span className="text-[#0033A0] text-6xl">2020</span>
+            </h2>
+            <p className="mt-1 text-2xl font-semibold text-neutral-600 leading-tight">
+              새로운 출발과 함께<br/>
+              반도산전의 경쟁력 강화
+            </p>
+          </div>
+          <div className="border flex-1">
+            2
+          </div>
+        </div>
+      </Tabs>
+    </div>
+  );
+};
+
+export default History;