연혁

src/pages/about/History.tsx

@@ -4,12 +4,99 @@ import Tabs, {TabItem} from "@/components/common/Tabs";
 const tabItems: TabItem[] = [
   {id: '1', label: '현재'},
   {id: '2', label: '2010 ~ 2020'},
-  {id: '3', label: '2010 ~'},
+  {id: '3', label: '~ 2010'},
+];
+
+const tabYears: Record<string, { start: string; end: string }> = {
+  '1': { start: '2021', end: '현재' },
+  '2': { start: '2010', end: '2020' },
+  '3': { start: '1994', end: '2009' },
+};
+
+const tabDescriptions: Record<string, string> = {
+  '1': '지속가능한 성장과<br/>미래를 준비하는 반도산전',
+  '2': '새로운 출발과 함께<br/>반도산전의 경쟁력 강화',
+  '3': '기술혁신과 함께<br/>미래를 향한 도약',
+};
+
+const historyItems = [
+  { date: '1994.09', description: '반도정보통신(주)설립 - 사업개시' },
+  { date: '1995.12', description: '정보통신공사업등록(제120234호)' },
+  { date: '2001.03', description: '부산광역시 기장군 정관면(정관산업단지)으로 공장이전' },
+  { date: '2001.06', description: 'KSA9001/ISO9001 품질경영인증취득' },
+  { date: '2002.01', description: '공장등록(기장군청)' },
+  { date: '2003.01', description: '부설연구소설립인가(한국산업기술진흥협회)' },
+  { date: '2003.04', description: '공장설립및등록(해운대구청)' },
+  { date: '2003.07', description: '벤처기업확인획득(기술보증기금)' },
+  { date: '2004.01', description: '정보통신부정보통신기기CATV기자재25개\n품목 형식승인취득(전파연구소)' },
+  { date: '2004.11', description: 'ISO9001:2000 인증획득(한국품질재단)' },
+  { date: '2005.01', description: '(주)KT 1군 협력업체 선정' },
+  { date: '2005.03', description: '수출유망중소기업지정(중소기업청)' },
+  { date: '2005.10', description: '국가 사회복지발전 공로 표창장 수상\n(보건복지부장관)(제51636호)' },
+  { date: '2006.03', description: '기술혁신형 중소기업(INNO-BIZ)확인(중소기업청)' },
+  { date: '2006.12', description: '부산광역시장 표창장수여(부산광역시청)' },
+  { date: '2007.01', description: '㈜반도산전 법인전환' },
+  { date: '2007.03', description: '부산중소기업청장 표창장 수여(중소기업청)' },
+  { date: '2007.04', description: '산업자원부장관 표창장 수여(산업자원부)' },
+  { date: '2007.06', description: '고객만족경영대상 최우수상 수상(산업자원부)' },
+  { date: '2007.11', description: '기술혁신개발사업 성공판정(중소기업청)' },
+  { date: '2008.01', description: '병역특례지정업체 선정(병무청)' },
+  { date: '2008.03', description: '기술혁신형 중소기업(INNO-BIZ)확인(중소기업청)' },
+  { date: '2008.11', description: '부산지방중소기업청장 표창장 수여(중소기업청)' },
+  { date: '2009.03', description: '기업부설연구소 인정(한국산업기술진흥협회)' },
+  { date: '2009.07', description: '연구개발전담부서 인정(한국산업기술진흥협회)' },
+  { date: '2010.01', description: '산업디자인전문회사 신고(산업자원부)' },
+  { date: '2010.11', description: '기술혁신형 중소기업(INNO-BIZ)확인(중소기업청)' },
+  { date: '2010.12', description: '연구개발전담부서 인정(한국산업기술진흥협회)' },
+  { date: '2011.02', description: '중소기업청장표창장수여(제80335호)' },
+  { date: '2011.06', description: '기업부설연구소설립(한국산업기술진흥협회)' },
+  { date: '2011.09', description: '환경경영인증취득(ISO14001:2004)', image: '/static/img/logo.png' },
+  { date: '2011.10', description: '부산지방경찰청장감사장(제255호)' },
+  { date: '2012.06', description: '기장군 일자리창출 우수기업선정(부산광역시기장군)' },
+  { date: '2012.07', description: '본사사옥이전(해운대구 센텀중앙로78, 센텀그린타워 1308)' },
+  { date: '2013.12', description: '부산시 전략사업선도기업 인증(부산광역시청)' },
+  { date: '2014.01', description: '기장군 일자리창출 우수기업선정(부산광역시기장군)' },
+  { date: '2014.06', description: '부산광역시 일자리창출 우수기업선정(부산광역시청)' },
+  { date: '2015.03', description: '기술혁신형 중소기업(INNO-BIZ)확인(중소기업청)' },
+  { date: '2016.05', description: '벤처기업확인(기술보증기금)' },
+  { date: '2016.12', description: '기술혁신형 중소기업(INNO-BIZ)확인(중소기업청)' },
+  { date: '2017.12', description: '산업통상자원부장관 표창장 수여(산업통상자원부)' },
+  { date: '2018.07', description: '기장군 우수중소기업 인증(부산광역시기장군)' },
+  { date: '2018.12', description: '기술혁신형 중소기업(INNO-BIZ)확인(중소기업청)' },
+  { date: '2019.01', description: '기장군 우수중소기업 인증(부산광역시기장군)' },
+  { date: '2020.06', description: '기장군 우수중소기업 인증(부산광역시기장군)' },
+  { date: '2021.01', description: '부산시 전략사업 선도기업 인증(부산광역시청)' },
+  { date: '2022.01', description: '기술혁신형 중소기업(INNO-BIZ)확인(중소벤처기업부)' },
+  { date: '2023.06', description: '기장군 우수중소기업 인증(부산광역시기장군)' },
+  { date: '2024.06', description: '부산광역시 일자리창출 우수기업선정(부산광역시청)' }
 ];
 
 const History: React.FC = () => {
-  const [activeTab, setActiveTab] = useState('2');
+  const [activeTab, setActiveTab] = useState('1');
+  
+  // 연도 필터링 함수
+  const getFilteredHistory = (tabId: string) => {
+    if (tabId === '1') {
+      return historyItems.filter(item => parseInt(item.date) >= 2021);
+    }
+    if (tabId === '2') {
+      return historyItems.filter(item => {
+        const year = parseInt(item.date);
+        return year >= 2010 && year <= 2020;
+      });
+    }
+    if (tabId === '3') {
+      return historyItems.filter(item => parseInt(item.date) < 2010);
+    }
+    return historyItems;
+  };
 
+  const filteredItems = getFilteredHistory(activeTab);
+  const timeLineClass = 'before:content-[\'\'] before:block before:absolute before:top-[2.4rem] before:left-0 before:w-0.5 before:h-[calc(100%-2.4rem)] before:bg-[#b1b3ba] before:-z-10';
+  const ballClass = 'before:content-[\'\'] before:block before:absolute before:top-[1.5rem] before:left-[-0.4rem] before:w-[1rem] before:h-[1rem] before:bg-[#2C3E50] before:rounded-full';
+  const yearRange = tabYears[activeTab];
+  const description = tabDescriptions[activeTab];
+  
   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">
@@ -21,19 +108,28 @@ const History: React.FC = () => {
         onTabChange={setActiveTab}
       >
         <div className="flex max-w-7xl mx-auto">
-          <div className="border flex-1 text-center">
+          <div className="flex-1 pt-30 space-y-10 text-center">
             <h2 className="text-[28px] font-semibold">
-              <span className="text-black text-5xl">2010</span>
+              <span className="text-black text-5xl">{yearRange.start}</span>
               <span className="relative -top-0 mx-4 text-black text-5xl">-</span>
-              <span className="text-[#0033A0] text-6xl">2020</span>
+              <span className="text-[#0033A0] text-6xl">{yearRange.end}</span>
             </h2>
-            <p className="mt-1 text-2xl font-semibold text-neutral-600 leading-tight">
+            <p className="mt-1 text-3xl font-semibold text-neutral-600 leading-tight">
               새로운 출발과 함께<br/>
               반도산전의 경쟁력 강화
             </p>
           </div>
-          <div className="border flex-1">
-            2
+          <div id="history-list" className={`pt-9 relative flex-1 flex flex-col gap-[3rem] w-[calc(100%-52rem)] ${timeLineClass}`}>
+            {filteredItems.map(({date, description, image}) => (
+              <div key={date + description} className={`relative px-15 ${image && ballClass}`}>
+                <div className="text-[#1e293b] font-bold text-2xl leading-tight">
+                  {date}
+                </div>
+                <div className="text-[#334155] text-xl leading-snug whitespace-pre-line">
+                  {description}
+                </div>
+              </div>
+            ))}
           </div>
         </div>
       </Tabs>