1 line
18 KiB
JSON
1 line
18 KiB
JSON
{"ast":null,"code":"import{useState}from\"react\";import{jsx as _jsx,jsxs as _jsxs}from\"react/jsx-runtime\";export default function ShipComponent(){//progress bar value 선언\nconst[value,setValue]=useState(60);// 갤러리 이미지\nconst images=[{src:\"/images/photo_ship_001.png\",alt:\"1511함A-05\"},{src:\"/images/photo_ship_002.png\",alt:\"1511함A-05\"}];const[currentIndex,setCurrentIndex]=useState(0);const handlePrev=()=>{if(currentIndex===0)return;setCurrentIndex(prev=>prev-1);};const handleNext=()=>{if(currentIndex===images.length-1)return;setCurrentIndex(prev=>prev+1);};return/*#__PURE__*/_jsx(\"section\",{id:\"shipComponent\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"popupMap shipInfo\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"pmHeader\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"rowL\",children:[/*#__PURE__*/_jsx(\"i\",{className:\"shipType\"}),/*#__PURE__*/_jsx(\"img\",{src:\"/images/flag_kor.svg\",alt:\"\\uB300\\uD55C\\uBBFC\\uAD6D\",className:\"flagIcon\"}),/*#__PURE__*/_jsx(\"span\",{className:\"shipName\",children:\"1511\\uD568A-05\"}),/*#__PURE__*/_jsx(\"span\",{className:\"shipNum\",children:\"13450135\"})]}),/*#__PURE__*/_jsx(\"button\",{type:\"button\",className:\"pmClose\",\"aria-label\":\"\\uB2EB\\uAE30\"})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"pmGallery\",children:[/*#__PURE__*/_jsx(\"button\",{type:\"button\",className:\"navBtn prev\",onClick:handlePrev,disabled:currentIndex===0,children:/*#__PURE__*/_jsx(\"span\",{className:\"blind\",children:\"\\uC774\\uC804\"})}),/*#__PURE__*/_jsx(\"button\",{type:\"button\",className:\"navBtn next\",onClick:handleNext,disabled:currentIndex===images.length-1,children:/*#__PURE__*/_jsx(\"span\",{className:\"blind\",children:\"\\uB2E4\\uC74C\"})}),/*#__PURE__*/_jsx(\"div\",{className:\"galleryView\",children:/*#__PURE__*/_jsx(\"img\",{className:\"galleryImg\",src:images[currentIndex].src,alt:images[currentIndex].alt})})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"pmBody\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"shipAction\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"rowL\",children:[/*#__PURE__*/_jsx(\"button\",{type:\"button\",className:\"detailBtn\",children:\"\\uC0C1\\uC138\\uC815\\uBCF4\"}),/*#__PURE__*/_jsxs(\"ul\",{className:\"shipTypeIco\",children:[/*#__PURE__*/_jsx(\"li\",{children:\"A\"}),/*#__PURE__*/_jsx(\"li\",{children:\"V\"}),/*#__PURE__*/_jsx(\"li\",{children:\"E\"}),/*#__PURE__*/_jsx(\"li\",{children:\"T\"}),/*#__PURE__*/_jsx(\"li\",{children:\"D\"}),/*#__PURE__*/_jsx(\"li\",{children:\"R\"})]})]}),/*#__PURE__*/_jsx(\"button\",{type:\"button\",className:\"favBtn\",\"aria-label\":\"\\uC990\\uACA8\\uCC3E\\uAE30\"})]}),/*#__PURE__*/_jsx(\"div\",{className:\"shipRoute\",children:/*#__PURE__*/_jsxs(\"div\",{className:\"routeProgress\",style:{\"--progress\":value},children:[/*#__PURE__*/_jsxs(\"progress\",{max:\"100\",value:value,children:[value,\"%\"]}),/*#__PURE__*/_jsx(\"span\",{className:\"routeShip\"})]})}),/*#__PURE__*/_jsxs(\"ul\",{className:\"shipStatus\",children:[/*#__PURE__*/_jsxs(\"li\",{className:\"port\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"rowL\",children:[/*#__PURE__*/_jsx(\"span\",{className:\"portLabel\",children:\"\\uCD9C\\uD56D\\uC9C0\"}),/*#__PURE__*/_jsx(\"span\",{className:\"portName\",children:\"\\uC11C\\uADC0\\uD3EC\\uD574\\uC591\\uACBD\\uCC30\\uC11C\"})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"rowR\",children:[/*#__PURE__*/_jsx(\"span\",{className:\"portLabel\",children:\"\\uC785\\uD56D\\uC9C0\"}),/*#__PURE__*/_jsx(\"span\",{className:\"portName\",children:\"\\uD558\\uD0DC\\uB3C4\"})]})]}),/*#__PURE__*/_jsxs(\"li\",{className:\"schedule\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"rowL\",children:[/*#__PURE__*/_jsx(\"span\",{className:\"depart\",children:\"\\uCD9C\\uD56D\\uC77C\\uC2DC\"}),/*#__PURE__*/_jsx(\"span\",{className:\"scheduleDate\",children:\"2024-11-23 11:23:00\"})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"rowR\",children:[/*#__PURE__*/_jsx(\"span\",{className:\"arrive\",children:\"\\uC785\\uD56D\\uC77C\\uC2DC\"}),/*#__PURE__*/_jsx(\"span\",{className:\"scheduleDate\",children:\"2024-11-23 11:23:00\"})]})]}),/*#__PURE__*/_jsxs(\"li\",{className:\"status\",children:[/*#__PURE__*/_jsxs(\"div\",{className:\"statusItem\",children:[/*#__PURE__*/_jsx(\"span\",{className:\"statusLabel\",children:\"\\uC120\\uBC15\\uC0C1\\uD0DC\"}),/*#__PURE__*/_jsx(\"span\",{className:\"statusValue\",children:\"\\uC815\\uBC15\"})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"statusItem w13r\",children:[/*#__PURE__*/_jsx(\"span\",{className:\"statusLabel\",children:\"\\uC18D\\uB3C4/\\uD56D\\uB85C\"}),/*#__PURE__*/_jsx(\"span\",{className:\"statusValue\",children:\"4.2 kn / 13.3\\u02DA\"})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"statusItem\",children:[/*#__PURE__*/_jsx(\"span\",{className:\"statusLabel\",children:\"\\uD758\\uC218\"}),/*#__PURE__*/_jsx(\"span\",{className:\"statusValue\",children:\"1.1m\"})]})]})]}),/*#__PURE__*/_jsxs(\"div\",{className:\"btnWrap\",children:[/*#__PURE__*/_jsx(\"button\",{type:\"button\",className:\"trackBtn\",children:\"\\uD56D\\uC801\\uC870\\uD68C\"}),/*#__PURE__*/_jsx(\"button\",{type:\"button\",className:\"trackBtn\",children:\"\\uD56D\\uB85C\\uC608\\uCE21\"})]})]}),/*#__PURE__*/_jsx(\"div\",{className:\"pmFooter\",children:\"\\uB370\\uC774\\uD130 \\uC218\\uC2E0\\uC2DC\\uAC04 : 2024-11-23 11:23:00\"})]})});}","map":{"version":3,"names":["useState","jsx","_jsx","jsxs","_jsxs","ShipComponent","value","setValue","images","src","alt","currentIndex","setCurrentIndex","handlePrev","prev","handleNext","length","id","children","className","type","onClick","disabled","style","max"],"sources":["/Users/laurynj/Desktop/해양경찰업 공공사업/@GIS_함정용/GIS_함정용_리액트/dark/src/component/wrap/main/ShipComponent.jsx"],"sourcesContent":["import { useState } from \"react\";\nexport default function ShipComponent() { \n //progress bar value 선언\n const [value, setValue] = useState(60);\n\n // 갤러리 이미지\n const images = [\n { src: \"/images/photo_ship_001.png\", alt: \"1511함A-05\" },\n { src: \"/images/photo_ship_002.png\", alt: \"1511함A-05\" },\n ];\n\n const [currentIndex, setCurrentIndex] = useState(0);\n\n const handlePrev = () => {\n if (currentIndex === 0) return;\n setCurrentIndex(prev => prev - 1);\n };\n\n const handleNext = () => {\n if (currentIndex === images.length - 1) return;\n setCurrentIndex(prev => prev + 1);\n };\n\n return(\n <section id=\"shipComponent\">\n\n {/* 배정보 팝업 */}\n <div className=\"popupMap shipInfo\">\n {/* header */}\n <div className=\"pmHeader\">\n <div className=\"rowL\">\n <i className=\"shipType\"></i>\n <img src=\"/images/flag_kor.svg\" alt=\"대한민국\" className=\"flagIcon\" />\n <span className=\"shipName\">1511함A-05</span>\n <span className=\"shipNum\">13450135</span>\n </div>\n <button type=\"button\" className=\"pmClose\" aria-label=\"닫기\"></button>\n </div>\n\n <div className=\"pmGallery\">\n <button\n type=\"button\"\n className=\"navBtn prev\"\n onClick={handlePrev}\n disabled={currentIndex === 0}\n >\n <span className=\"blind\">이전</span>\n </button>\n <button\n type=\"button\"\n className=\"navBtn next\"\n onClick={handleNext}\n disabled={currentIndex === images.length - 1}\n >\n <span className=\"blind\">다음</span>\n </button>\n\n {/* 이미지 영역 */}\n <div className=\"galleryView\">\n <img\n className=\"galleryImg\"\n src={images[currentIndex].src}\n alt={images[currentIndex].alt}\n />\n </div>\n </div>\n {/* body */}\n <div className=\"pmBody\">\n <div className=\"shipAction\">\n <div className=\"rowL\">\n <button type=\"button\" className=\"detailBtn\">상세정보</button>\n <ul className=\"shipTypeIco\">\n <li>A</li>\n <li>V</li>\n <li>E</li>\n <li>T</li>\n <li>D</li>\n <li>R</li>\n </ul>\n </div>\n <button type=\"button\" className=\"favBtn\" aria-label=\"즐겨찾기\"></button>\n </div>\n\n <div className=\"shipRoute\">\n <div\n className=\"routeProgress\"\n style={{ \"--progress\": value }}\n >\n <progress max=\"100\" value={value}>{value}%</progress>\n <span className=\"routeShip\"></span>\n </div>\n </div>\n\n <ul className=\"shipStatus\">\n <li className=\"port\">\n <div className=\"rowL\">\n <span className=\"portLabel\">출항지</span>\n <span className=\"portName\">서귀포해양경찰서</span>\n </div>\n <div className=\"rowR\">\n <span className=\"portLabel\">입항지</span>\n <span className=\"portName\">하태도</span>\n </div>\n </li>\n <li className=\"schedule\">\n <div className=\"rowL\">\n <span className=\"depart\">출항일시</span>\n <span className=\"scheduleDate\">2024-11-23 11:23:00</span>\n </div>\n <div className=\"rowR\">\n <span className=\"arrive\">입항일시</span>\n <span className=\"scheduleDate\">2024-11-23 11:23:00</span>\n </div>\n </li>\n <li className=\"status\">\n <div className=\"statusItem\">\n <span className=\"statusLabel\">선박상태</span>\n <span className=\"statusValue\">정박</span>\n </div>\n <div className=\"statusItem w13r\">\n <span className=\"statusLabel\">속도/항로</span>\n <span className=\"statusValue\">4.2 kn / 13.3˚</span>\n </div>\n <div className=\"statusItem\">\n <span className=\"statusLabel\">흘수</span>\n <span className=\"statusValue\">1.1m</span>\n </div>\n </li>\n </ul>\n \n {/* <ul className=\"shipSensor\">\n <li>\n <span className=\"sensorLabel\">AIS</span>\n <span className=\"sensorValue\"><i className=\"isNomal\"></i>정상</span>\n </li>\n <li>\n <span className=\"sensorLabel\">RF</span>\n <span className=\"sensorValue\"><i className=\"isNomal\"></i>정상</span>\n </li>\n <li>\n <span className=\"sensorLabel\">EO</span>\n <span className=\"sensorValue\"><i className=\"isNomal\"></i>정상</span>\n </li>\n <li>\n <span className=\"sensorLabel\">SAR</span>\n <span className=\"sensorValue\"><i className=\"isOff\"></i>비활성</span>\n </li>\n </ul> */}\n <div className=\"btnWrap\">\n <button type=\"button\" className=\"trackBtn\">항적조회</button>\n <button type=\"button\" className=\"trackBtn\">항로예측</button>\n </div>\n </div>\n {/* footer */}\n <div className=\"pmFooter\">데이터 수신시간 : 2024-11-23 11:23:00</div>\n </div>\n </section>\n )\n}"],"mappings":"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","ignoreList":[]},"metadata":{},"sourceType":"module","externalDependencies":[]} |