|
|
@@ -0,0 +1,106 @@
|
|
|
+import React from "react";
|
|
|
+
|
|
|
+type BoxProps = {
|
|
|
+ left: string;
|
|
|
+ top: string;
|
|
|
+ color?: string;
|
|
|
+ text: string;
|
|
|
+ type?: "default" | "vertical";
|
|
|
+};
|
|
|
+
|
|
|
+type LineProps = {
|
|
|
+ width: string;
|
|
|
+ height: string;
|
|
|
+ left: string;
|
|
|
+ top: string;
|
|
|
+};
|
|
|
+
|
|
|
+
|
|
|
+// Box 컴포넌트에 타입 적용
|
|
|
+const Box: React.FC<BoxProps> = ({
|
|
|
+ left,
|
|
|
+ top,
|
|
|
+ color = "#70CCBF",
|
|
|
+ text,
|
|
|
+ type = "default",
|
|
|
+ }) => {
|
|
|
+ return (
|
|
|
+ <div className={`absolute ${left} ${top} ${type === 'vertical' ? 'rotate-90' : ''}`}>
|
|
|
+ <div className="relative w-[191px] h-[46px]">
|
|
|
+ <svg width="191" height="46" viewBox="0 0 191 46" fill="none" xmlns="http://www.w3.org/2000/svg">
|
|
|
+ <path fill={color}
|
|
|
+ d="M177.145 0.211548H165.717H149.626H41.4384H24.949H13.9197L0.151367 22.8621L13.9197 45.5128H24.949H41.4384H149.626H165.717H177.145L190.913 22.8621L177.145 0.211548Z"/>
|
|
|
+ </svg>
|
|
|
+ <div
|
|
|
+ className={`absolute text-center left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 whitespace-pre text-white text-base font-medium font-['Noto_Sans_KR'] ${type === 'vertical' ? 'rotate-270' : ''}`}>
|
|
|
+ <span>{text}</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+// Line 컴포넌트에 타입 적용
|
|
|
+const Line: React.FC<LineProps> = ({width, height, left, top}) => (
|
|
|
+ <div className={`absolute ${width} ${height} ${left} ${top} outline outline-offset-[-0.5px] outline-neutral-600`}/>
|
|
|
+);
|
|
|
+
|
|
|
+const Organization: React.FC = () => {
|
|
|
+ const lines = [
|
|
|
+ {width: "w-0", height: "h-[755.07px]", left: "left-[435.65px]", top: "top-[17.12px]"},
|
|
|
+ {width: "w-35", height: "h-0", left: "left-[300px]", top: "top-[137.81px]"},
|
|
|
+ {width: "w-35", height: "h-0", left: "left-[438px]", top: "top-[137.81px]"},
|
|
|
+ {width: "w-36", height: "h-0", left: "left-[291px]", top: "top-[483.41px]"},
|
|
|
+ {width: "w-72", height: "h-0", left: "left-[295.29px]", top: "top-[713.97px]"},
|
|
|
+ {width: "w-0", height: "h-56", left: "left-[133.48px]", top: "top-[772.19px]"},
|
|
|
+ {width: "w-0", height: "h-56", left: "left-[356.20px]", top: "top-[772.19px]"},
|
|
|
+ {width: "w-0", height: "h-56", left: "left-[708.63px]", top: "top-[772.19px]"},
|
|
|
+ {width: "w-144", height: "h-0", left: "left-[133px]", top: "top-[772.12px]"},
|
|
|
+ {width: "w-55.5", height: "h-0", left: "left-[21.17px]", top: "top-[919.23px]"},
|
|
|
+ {width: "w-[485.21px]", height: "h-0", left: "left-[466.11px]", top: "top-[919.23px]"},
|
|
|
+ {width: "w-0", height: "h-20", left: "left-[21.30px]", top: "top-[919.23px]"},
|
|
|
+ {width: "w-0", height: "h-20", left: "left-[466.11px]", top: "top-[919.23px]"},
|
|
|
+ {width: "w-0", height: "h-20", left: "left-[587.36px]", top: "top-[919.23px]"},
|
|
|
+ {width: "w-0", height: "h-20", left: "left-[829.84px]", top: "top-[919.23px]"},
|
|
|
+ {width: "w-0", height: "h-20", left: "left-[951.07px]", top: "top-[919.23px]"},
|
|
|
+ {width: "w-0", height: "h-20", left: "left-[244.48px]", top: "top-[919.23px]"},
|
|
|
+ ];
|
|
|
+
|
|
|
+ const boxes = [
|
|
|
+ // 기존 상단 박스
|
|
|
+ {left: "left-[342.99px]", top: "top-0", color: "#1e3a8a", text: "대표이사"},
|
|
|
+ {left: "left-[343px]", top: "top-[230.41px]", color: "#1e3a8a", text: "부사장"},
|
|
|
+ {left: "left-[342.99px]", top: "top-[345.62px]", color: "#1e3a8a", text: "전무이사"},
|
|
|
+ {left: "left-[126.55px]", top: "top-[460.83px]", color: "#70CCBF", text: "품질경영실"},
|
|
|
+ {left: "left-[559.44px]", top: "top-[115.21px]", color: "#70CCBF", text: "고문"},
|
|
|
+ {left: "left-[121.15px]", top: "top-[115.21px]", color: "#70CCBF", text: "안전보건팀"},
|
|
|
+ {left: "left-[343px]", top: "top-[576.02px]", color: "#1e3a8a", text: "상무이사"},
|
|
|
+ {left: "left-[260.78px]", top: "top-[806.44px]", color: "#8883BB", text: "경영지원팀장"},
|
|
|
+ {left: "left-[613.32px]", top: "top-[806.44px]", color: "#8883BB", text: "공사관리팀장"},
|
|
|
+ {left: "left-[38.33px]", top: "top-[806.44px]", color: "#8883BB", text: "생산 및 영업팀장"},
|
|
|
+ {left: "left-[126.55px]", top: "top-[691.23px]", color: "#8883BB", text: "서울경기지사"},
|
|
|
+ {left: "left-[559px]", top: "top-[691.23px]", color: "#8883BB", text: "경남지사"},
|
|
|
+
|
|
|
+ // 하단 박스 추가 (세로)
|
|
|
+ {left: "left-[-75px]", top: "top-[1060px]", type: "vertical" as const, color: "#8883BB", text: "생\n산\n팀"},
|
|
|
+ {left: "left-[37px]", top: "top-[1060px]", type: "vertical" as const, color: "#8883BB", text: "자\n재\n관\n리\n팀"},
|
|
|
+ {left: "left-[148px]", top: "top-[1060px]", type: "vertical" as const, color: "#8883BB", text: "영\n업\nA\nS\n팀"},
|
|
|
+ {left: "left-[260px]", top: "top-[1060px]", type: "vertical" as const, color: "#8883BB", text: "총\n무\n경\n리\n팀"},
|
|
|
+ {left: "left-[370px]", top: "top-[1060px]", type: "vertical" as const, color: "#a3a3a3", text: "정\n보\n통\n신\n설\n비"},
|
|
|
+ {left: "left-[491px]", top: "top-[1060px]", type: "vertical" as const, color: "#a3a3a3", text: "기\n간\n망\nS\nI\n팀"},
|
|
|
+ {left: "left-[613px]", top: "top-[1060px]", type: "vertical" as const, color: "#a3a3a3", text: "보\n안\n설\n비\n팀"},
|
|
|
+ {left: "left-[734px]", top: "top-[1060px]", type: "vertical" as const, color: "#4b5563", text: "전\n기\n설\n비\n팀"},
|
|
|
+ {left: "left-[855px]", top: "top-[1060px]", type: "vertical" as const, color: "#4b5563", text: "소\n방\n설\n비\n팀"}
|
|
|
+ ];
|
|
|
+
|
|
|
+ return (
|
|
|
+ <div className="relative flex justify-center h-[1300px] mx-auto max-w-7xl mt-20">
|
|
|
+ <div className="relative w-[974px] h-[1190px]">
|
|
|
+ {lines.map((l, i) => <Line key={i} {...l} />)}
|
|
|
+ {boxes.map((b, i) => <Box key={i} {...b} />)}
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ );
|
|
|
+};
|
|
|
+
|
|
|
+export default Organization;
|
jh-mac
