From 519f3b3fe21df1ac8ad38533bfbed1fe09906e20 Mon Sep 17 00:00:00 2001 From: HeungTak Lee Date: Tue, 3 Feb 2026 08:46:21 +0900 Subject: [PATCH] =?UTF-8?q?chore:=20publish=20=ED=8F=B4=EB=8D=94=20gitigno?= =?UTF-8?q?re=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - 퍼블리시 원본 참조용 폴더 git 추적 제외 - 실제 구현은 src/components, src/pages에서 진행 - 빌드 및 커밋에서 제외 Co-Authored-By: Claude Opus 4.5 --- .gitignore | 5 +- src/publish/PublishRoutes.jsx | 134 ---- src/publish/components/FileUpload.jsx | 35 - src/publish/components/Slider.jsx | 24 - src/publish/layouts/HeaderComponent.jsx | 36 - src/publish/layouts/MainComponent.jsx | 11 - src/publish/layouts/PublishLayout.jsx | 57 -- src/publish/layouts/SideComponent.jsx | 94 --- src/publish/layouts/ToolComponent.jsx | 131 ---- src/publish/layouts/WrapComponent.jsx | 15 - src/publish/pages/Analysis1Component.jsx | 48 -- src/publish/pages/Analysis2Component.jsx | 129 ---- src/publish/pages/Analysis3Component.jsx | 198 ------ src/publish/pages/Analysis4Component.jsx | 235 ------- src/publish/pages/DisplayComponent.jsx | 355 ---------- src/publish/pages/EmptyMain.jsx | 4 - src/publish/pages/LayerComponent.jsx | 91 --- src/publish/pages/MyPageComponent.jsx | 208 ------ src/publish/pages/NavComponent.jsx | 71 -- src/publish/pages/Panel1Component.jsx | 727 -------------------- src/publish/pages/Panel1DetailComponent.jsx | 112 --- src/publish/pages/Panel2Component.jsx | 420 ----------- src/publish/pages/Panel3Component.jsx | 322 --------- src/publish/pages/Panel4Component.jsx | 521 -------------- src/publish/pages/Panel5Component.jsx | 7 - src/publish/pages/Panel6Component.jsx | 77 --- src/publish/pages/Panel7Component.jsx | 7 - src/publish/pages/Panel8Component.jsx | 7 - src/publish/pages/ReplayComponent.jsx | 100 --- src/publish/pages/Satellite1Component.jsx | 189 ----- src/publish/pages/Satellite2Component.jsx | 87 --- src/publish/pages/Satellite3Component.jsx | 94 --- src/publish/pages/Satellite4Component.jsx | 50 -- src/publish/pages/ShipComponent.jsx | 169 ----- src/publish/pages/Signal1Component.jsx | 58 -- src/publish/pages/Signal2Component.jsx | 149 ---- src/publish/pages/ToastComponent.jsx | 59 -- src/publish/pages/TopComponent.jsx | 21 - src/publish/pages/TrackComponent.jsx | 41 -- src/publish/pages/WeatherComponent.jsx | 71 -- src/publish/scss/HeaderComponent.scss | 109 --- src/publish/scss/Layout.scss | 557 --------------- src/publish/scss/MainComponent.scss | 188 ----- src/publish/scss/SideComponent.scss | 539 --------------- src/publish/scss/ToolComponent.scss | 153 ---- src/publish/scss/WrapComponent.scss | 7 - 46 files changed, 4 insertions(+), 6718 deletions(-) delete mode 100644 src/publish/PublishRoutes.jsx delete mode 100644 src/publish/components/FileUpload.jsx delete mode 100644 src/publish/components/Slider.jsx delete mode 100644 src/publish/layouts/HeaderComponent.jsx delete mode 100644 src/publish/layouts/MainComponent.jsx delete mode 100644 src/publish/layouts/PublishLayout.jsx delete mode 100644 src/publish/layouts/SideComponent.jsx delete mode 100644 src/publish/layouts/ToolComponent.jsx delete mode 100644 src/publish/layouts/WrapComponent.jsx delete mode 100644 src/publish/pages/Analysis1Component.jsx delete mode 100644 src/publish/pages/Analysis2Component.jsx delete mode 100644 src/publish/pages/Analysis3Component.jsx delete mode 100644 src/publish/pages/Analysis4Component.jsx delete mode 100644 src/publish/pages/DisplayComponent.jsx delete mode 100644 src/publish/pages/EmptyMain.jsx delete mode 100644 src/publish/pages/LayerComponent.jsx delete mode 100644 src/publish/pages/MyPageComponent.jsx delete mode 100644 src/publish/pages/NavComponent.jsx delete mode 100644 src/publish/pages/Panel1Component.jsx delete mode 100644 src/publish/pages/Panel1DetailComponent.jsx delete mode 100644 src/publish/pages/Panel2Component.jsx delete mode 100644 src/publish/pages/Panel3Component.jsx delete mode 100644 src/publish/pages/Panel4Component.jsx delete mode 100644 src/publish/pages/Panel5Component.jsx delete mode 100644 src/publish/pages/Panel6Component.jsx delete mode 100644 src/publish/pages/Panel7Component.jsx delete mode 100644 src/publish/pages/Panel8Component.jsx delete mode 100644 src/publish/pages/ReplayComponent.jsx delete mode 100644 src/publish/pages/Satellite1Component.jsx delete mode 100644 src/publish/pages/Satellite2Component.jsx delete mode 100644 src/publish/pages/Satellite3Component.jsx delete mode 100644 src/publish/pages/Satellite4Component.jsx delete mode 100644 src/publish/pages/ShipComponent.jsx delete mode 100644 src/publish/pages/Signal1Component.jsx delete mode 100644 src/publish/pages/Signal2Component.jsx delete mode 100644 src/publish/pages/ToastComponent.jsx delete mode 100644 src/publish/pages/TopComponent.jsx delete mode 100644 src/publish/pages/TrackComponent.jsx delete mode 100644 src/publish/pages/WeatherComponent.jsx delete mode 100644 src/publish/scss/HeaderComponent.scss delete mode 100644 src/publish/scss/Layout.scss delete mode 100644 src/publish/scss/MainComponent.scss delete mode 100644 src/publish/scss/SideComponent.scss delete mode 100644 src/publish/scss/ToolComponent.scss delete mode 100644 src/publish/scss/WrapComponent.scss diff --git a/.gitignore b/.gitignore index 474439ba..f9f56088 100644 --- a/.gitignore +++ b/.gitignore @@ -27,4 +27,7 @@ npm-debug.log* **/*.ts **/*.tsx # 단, d.ts 타입 선언 파일은 필요시 포함 가능 -# !**/*.d.ts \ No newline at end of file +# !**/*.d.ts + +# Publish 폴더 (퍼블리시 원본 참조용, 빌드/커밋 제외) +src/publish/ \ No newline at end of file diff --git a/src/publish/PublishRoutes.jsx b/src/publish/PublishRoutes.jsx deleted file mode 100644 index f65a738c..00000000 --- a/src/publish/PublishRoutes.jsx +++ /dev/null @@ -1,134 +0,0 @@ -import { Route } from 'react-router-dom'; - -// 퍼블리시 레이아웃 컴포넌트 -import WrapComponent from './layouts/WrapComponent'; -import HeaderComponent from './layouts/HeaderComponent'; -import SideComponent from './layouts/SideComponent'; -import MainComponent from './layouts/MainComponent'; - -// 퍼블리시 페이지 컴포넌트 -import Panel1Component from './pages/Panel1Component'; -import Panel2Component from './pages/Panel2Component'; -import Panel3Component from './pages/Panel3Component'; -import Panel4Component from './pages/Panel4Component'; -import Panel5Component from './pages/Panel5Component'; -import Panel6Component from './pages/Panel6Component'; -import Panel7Component from './pages/Panel7Component'; -import Panel8Component from './pages/Panel8Component'; - -/** - * 퍼블리시 라우트 정의 - * - /publish/* 하위에서 퍼블리시 파일들을 미리볼 수 있음 - */ -const PublishRoutes = ( - <> - {/* 기본 페이지 - 전체 레이아웃 미리보기 */} - } /> - - {/* 개별 패널 미리보기 */} - } /> - } /> - } /> - } /> - } /> - } /> - } /> - } /> - - {/* 전체 레이아웃 (원본 구조 그대로) */} - } /> - -); - -// 퍼블리시 홈 -function PublishHome() { - return ( -
-

퍼블리시 미리보기

-

좌측 메뉴에서 확인할 페이지를 선택하세요.

-
-

폴더 구조

- 
-{`src/publish/
-├── _incoming/     # 새 퍼블리시 파일 (원본)
-├── layouts/       # 레이아웃 컴포넌트
-├── pages/         # 페이지 컴포넌트
-└── components/    # 공통 컴포넌트`}
-
-

병합 방법

-
    -
  1. 새 퍼블리시 파일을 _incoming/ 폴더에 복사
    2. -
  2. Claude에게 병합 요청
    3. -
  3. 변경사항 확인 후 적용
    4. -
-
-
- ); -} - -// 패널 래퍼 컴포넌트들 -function Panel1Wrapper() { - return ( -
- {}} /> -
- ); -} - -function Panel2Wrapper() { - return ( -
- {}} /> -
- ); -} - -function Panel3Wrapper() { - return ( -
- {}} /> -
- ); -} - -function Panel4Wrapper() { - return ( -
- {}} /> -
- ); -} - -function Panel5Wrapper() { - return ( -
- {}} /> -
- ); -} - -function Panel6Wrapper() { - return ( -
- {}} /> -
- ); -} - -function Panel7Wrapper() { - return ( -
- {}} /> -
- ); -} - -function Panel8Wrapper() { - return ( -
- {}} /> -
- ); -} - -export default PublishRoutes; diff --git a/src/publish/components/FileUpload.jsx b/src/publish/components/FileUpload.jsx deleted file mode 100644 index f55348c6..00000000 --- a/src/publish/components/FileUpload.jsx +++ /dev/null @@ -1,35 +0,0 @@ -import React, { useState } from 'react'; - -export default function FileUpload({ label = "파일 선택", inputId, maxLength = 25, placeholder = "선택된 파일 없음" }) { - const [fileName, setFileName] = useState(''); - - // 중간 생략 함수 - const truncateMiddle = (str, maxLen) => { - if (!str) return ''; - if (str.length <= maxLen) return str; - const keep = Math.floor((maxLen - 3) / 2); - return str.slice(0, keep) + '...' + str.slice(str.length - keep); - }; - - const handleChange = (e) => { - const name = e.target.files[0]?.name || ''; - setFileName(name); - }; - - return ( -
- - - - {fileName ? truncateMiddle(fileName, maxLength) : placeholder} - -
- ); -} diff --git a/src/publish/components/Slider.jsx b/src/publish/components/Slider.jsx deleted file mode 100644 index a8d7e9b2..00000000 --- a/src/publish/components/Slider.jsx +++ /dev/null @@ -1,24 +0,0 @@ -import { useState } from "react"; - -function Slider({ label = "", min = 0, max = 100, defaultValue = 50 }) { - const [value, setValue] = useState(defaultValue); - - const percent = ((value - min) / (max - min)) * 100; - - return ( - - ); -} - -export default Slider; diff --git a/src/publish/layouts/HeaderComponent.jsx b/src/publish/layouts/HeaderComponent.jsx deleted file mode 100644 index ad1626d0..00000000 --- a/src/publish/layouts/HeaderComponent.jsx +++ /dev/null @@ -1,36 +0,0 @@ - -import { Link } from "react-router-dom"; - -export default function HeaderComponent() { - return( - - ) -} \ No newline at end of file diff --git a/src/publish/layouts/MainComponent.jsx b/src/publish/layouts/MainComponent.jsx deleted file mode 100644 index 147476e0..00000000 --- a/src/publish/layouts/MainComponent.jsx +++ /dev/null @@ -1,11 +0,0 @@ -import { Outlet } from "react-router-dom"; -import TopComponent from "../pages/TopComponent"; - -export default function MainComponent() { - return ( -
- - -
- ); -} diff --git a/src/publish/layouts/PublishLayout.jsx b/src/publish/layouts/PublishLayout.jsx deleted file mode 100644 index a7d5adca..00000000 --- a/src/publish/layouts/PublishLayout.jsx +++ /dev/null @@ -1,57 +0,0 @@ -import { Outlet, Link, useLocation } from 'react-router-dom'; - -/** - * 퍼블리시 레이아웃 - * - 퍼블리시 파일들을 미리보기 위한 레이아웃 - * - 상단에 네비게이션 제공 - */ -export default function PublishLayout() { - const location = useLocation(); - const currentPath = location.pathname; - - const menuItems = [ - { path: '/publish', label: '메인', exact: true }, - { path: '/publish/panel1', label: 'Panel1 (선박)' }, - { path: '/publish/panel2', label: 'Panel2 (위성)' }, - { path: '/publish/panel3', label: 'Panel3 (기상)' }, - { path: '/publish/panel4', label: 'Panel4 (분석)' }, - { path: '/publish/panel5', label: 'Panel5 (타임라인)' }, - { path: '/publish/panel6', label: 'Panel6 (AI모드)' }, - { path: '/publish/panel7', label: 'Panel7 (리플레이)' }, - { path: '/publish/panel8', label: 'Panel8 (항적조회)' }, - ]; - - const isActive = (path, exact) => { - if (exact) return currentPath === path; - return currentPath.startsWith(path); - }; - - return ( -
- {/* 퍼블리시 네비게이션 */} - - - {/* 퍼블리시 콘텐츠 */} -
- -
-
- ); -} diff --git a/src/publish/layouts/SideComponent.jsx b/src/publish/layouts/SideComponent.jsx deleted file mode 100644 index 40be2dba..00000000 --- a/src/publish/layouts/SideComponent.jsx +++ /dev/null @@ -1,94 +0,0 @@ -import { useState } from "react"; -import { useNavigate, useLocation } from "react-router-dom"; - -import NavComponent from "../pages/NavComponent"; -import Panel1Component from "../pages/Panel1Component"; -import Panel2Component from "../pages/Panel2Component"; -import Panel3Component from "../pages/Panel3Component"; -import Panel4Component from "../pages/Panel4Component"; -import Panel5Component from "../pages/Panel5Component"; -import Panel6Component from "../pages/Panel6Component"; -import Panel7Component from "../pages/Panel7Component"; -import Panel8Component from "../pages/Panel8Component"; -import DisplayComponent from "../pages/DisplayComponent"; - -export default function SideComponent() { - const navigate = useNavigate(); - //const location = useLocation(); - - // 현재열린패널 - const [activePanel, setActivePanel] = useState("gnb1"); - - // 패널열린상태 - const [isPanelOpen, setIsPanelOpen] = useState(true); - const handleTogglePanel = () => setIsPanelOpen(prev => !prev); - - // Display 탭상태 - const [displayTab, setDisplayTab] = useState("filter"); - - /* ========================= - Nav 클릭 → 패널 + 라우팅 - ========================= */ - const handleChangePanel = (key) => { - setIsPanelOpen(true); - //setActivePanel(key); // navigate 없음 - - switch (key) { - case "gnb8": //항적조회 - setActivePanel("gnb8"); - navigate("/track"); - break; - - case "gnb7": // 리플레이 - setActivePanel("gnb7"); - navigate("/replay"); - break; - - case "filter": // 필터 - case "layer": // 레이어 - setActivePanel(key); - setDisplayTab(key); - - // 항적조회/리플레이에서 넘어올 경우 메인 초기화 - navigate("/main"); - break; - - default: - setActivePanel(key); - navigate("/main"); - break; - } - }; - - /* ========================= - 공통 props - ========================= */ - const panelProps = { - isOpen: isPanelOpen, - onToggle: handleTogglePanel, - }; - - return ( -
- - -
- {activePanel === "gnb1" && } - {activePanel === "gnb2" && } - {activePanel === "gnb3" && } - {activePanel === "gnb4" && } - {activePanel === "gnb5" && } - {activePanel === "gnb6" && } - {activePanel === "gnb7" && } - {activePanel === "gnb8" && } - {(activePanel === "filter" || activePanel === "layer") && ( - - )} -
-
- ); -} diff --git a/src/publish/layouts/ToolComponent.jsx b/src/publish/layouts/ToolComponent.jsx deleted file mode 100644 index 99ac99cf..00000000 --- a/src/publish/layouts/ToolComponent.jsx +++ /dev/null @@ -1,131 +0,0 @@ -import { useState } from "react" -export default function ToolComponent() { - const [isLegendOpen, setIsLegendOpen] = useState(false); - - return( -
- {/* 툴바 */} -
-
    -
    • -
    • -
    • -
-
    -
    • -
    • -
    • -
-
    -
    • -
    • -
-
- {/* 맵컨트롤 툴바 */} -
-
    -
    • -
  • 7
    • -
    • -
-
    -
  • -
    • -
    • -
-
- {/* 범례 */} - {isLegendOpen && ( -
-
    -
  • - 통합통합 - 0 -
    • -
  • - 중국어선중국어선 - 0 -
    • -
  • - 중국어선허가중국어선허가 - 0 -
    • -
  • - 일본어선일본어선 - 0 -
    • -
  • - 위험물위험물 - 0 -
    • -
  • - 여객선여객선 - 0 -
    • -
  • - 함정함정 - 0 -
    • -
  • - 함정-RADAR함정-RADAR - 0 -
    • -
  • - 일반일반 - 0 -
    • -
  • - VTS-일반VTS-일반 - 0 -
    • -
  • - VTS-RADARVTS-RADAR - 0 -
    • -
  • - VPASS일반VPASS일반 - 0 -
    • -
  • - ENAV어선ENAV어선 - 0 -
    • -
  • - ENAV위험물ENAV위험물 - 0 -
    • -
  • - ENAV화물선ENAV화물선 - 0 -
    • -
  • - ENAV관공선ENAV관공선 - 0 -
    • -
  • - ENAV일반ENAV일반 - 0 -
    • -
  • - D-MF/HFD-MF/HF - 0 -
    • -
  • - 항공기항공기 - 0 -
    • -
  • - NLLNLL - 0 -
    • -
-
- )} -
- ) -} \ No newline at end of file diff --git a/src/publish/layouts/WrapComponent.jsx b/src/publish/layouts/WrapComponent.jsx deleted file mode 100644 index f4030866..00000000 --- a/src/publish/layouts/WrapComponent.jsx +++ /dev/null @@ -1,15 +0,0 @@ -import { Outlet } from "react-router-dom"; -import HeaderComponent from "./HeaderComponent"; -import SideComponent from "./SideComponent"; -import ToolComponent from "./ToolComponent"; - -export default function WrapComponent() { - return ( -
- - - {/* Main 영역 */} - -
- ); -} diff --git a/src/publish/pages/Analysis1Component.jsx b/src/publish/pages/Analysis1Component.jsx deleted file mode 100644 index 9c09260b..00000000 --- a/src/publish/pages/Analysis1Component.jsx +++ /dev/null @@ -1,48 +0,0 @@ -import { useState } from 'react'; -import { useNavigate } from "react-router-dom"; - -export default function Analysis1Component() { - const navigate = useNavigate(); - - return ( -
- - {/* 위성 영상 등록 팝업 */} -
-
-
- 관심 해역 설정 -
- -
-
- - - -
-
- -
-
- -
- ); -} diff --git a/src/publish/pages/Analysis2Component.jsx b/src/publish/pages/Analysis2Component.jsx deleted file mode 100644 index b0684528..00000000 --- a/src/publish/pages/Analysis2Component.jsx +++ /dev/null @@ -1,129 +0,0 @@ -import { useState } from 'react'; -import { useNavigate } from "react-router-dom"; - -export default function Analysis2Component() { - const navigate = useNavigate(); - - return ( -
- - {/* 위성 영상 등록 팝업 */} -
-
-
- 관심 해역 설정 -
- -
-
- - -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
관심 해역 설정 - 해상영역명, 설정 옵션, 좌표,영역 옵션,해상영역명 크기, 해상영역명 색상,윤곽선 굵기,윤곽선 종류,윤곽선 색상,채우기 색상 에 대한 내용을 등록하는 표입니다.
해상영역명
설정 옵션 -
- - - -
-
좌표[124,96891368166156, 36.37855817450263]
- [125,25105622872591, 36.37855817450263]
- [125,25105622872591, 36.37855817450263]
- [125,25105622872591, 36.37855817450263]
- [125,25105622872591, 36.37855817450263] -
영역 옵션 -
- - -
-
해상영역명 크기 -
- -
- - -
-
- 		해상영역명 색상
윤곽선 굵기 -
- -
- - -
-
- 		윤곽선 종류 - -
윤곽선 색상 채우기 색상
-
- -
-
- - -
-
-
-
-
- ); -} diff --git a/src/publish/pages/Analysis3Component.jsx b/src/publish/pages/Analysis3Component.jsx deleted file mode 100644 index 0ccc457a..00000000 --- a/src/publish/pages/Analysis3Component.jsx +++ /dev/null @@ -1,198 +0,0 @@ -import { useState } from 'react'; -import { useNavigate } from "react-router-dom"; - -export default function Analysis3Component() { - const navigate = useNavigate(); - - return ( -
- - {/* 위성 영상 등록 팝업 */} -
-
-
- 관심 해역 분석 등록 -
- -
- -
- {/* 지도캡쳐/테이블 영역 */} -
-
- - - - - - - - - - - - - - - - - - - - - - - - - -
관심 해역 분석 등록 - 제목, 상세 내역, 공유 여부,공유 그룹 에 대한 내용을 등록하는 표입니다.
제목
상세 내역 - -
공유 여부 -
- - -
-
공유 그룹 - -
-
- {/* 관심영역 체크박스 목록 -스크롤됨 */} -
-
관심영역 목록
-
    -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
  • - - -
    • -
-
-
-
- -
-
- - -
-
-
-
-
- ); -} diff --git a/src/publish/pages/Analysis4Component.jsx b/src/publish/pages/Analysis4Component.jsx deleted file mode 100644 index efdc3c4d..00000000 --- a/src/publish/pages/Analysis4Component.jsx +++ /dev/null @@ -1,235 +0,0 @@ -import { useState } from 'react'; -import { useNavigate } from "react-router-dom"; - -export default function Analysis4Component() { - const navigate = useNavigate(); - - return ( -
- - {/* 위성 영상 등록 팝업 */} -
-
-
-
- 350 대해구도 - 조회시간: 2026-07-00 17:15:13 -
- -
- -
- -
- {/* 지도캡쳐/테이블 영역 */} -
-
통항 선박
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
통항 선박 - 선박 종류, 승선원, 위험물 운반, 공유 여부 및 그룹 에 대한 표입니다
카고(척)0
카고 승성원(명)-
탱커수(척)
탱커 승선원(명)
위험물 운반석(척)
위험물 운반선 승선원(명)
위험물 양(톤)
어선(척)
어선 승선원(명)
기타 어선(척)
기타 어선 승선원(명)
여객선(척)
유도선(척)
유도선 승선원(명)
기타 선박(척)
기타 선박 승선원(명)
함정수(척)
-
- {/* 관심영역 체크박스 목록 -스크롤됨 */} -
-
신호별
- - - - - - - - - - - - - - - - - - - - - - - - -
신호별 - 제목, 상세 내역, 공유 여부,공유 그룹 에 대한 내용을 등록하는 표입니다.
AIS0
V-PASS-
VHF
MFHF
- - -
E-NAV
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
E-NAV - 여객선, 어선, 카고, 관공선, 기타 선박과 공유 정보 에 대한 표입니다.
E-NAV 여객선(척)0
E-NAV 어선(척)-
E-NAV 카고(척)
E-NAV 관공선(척)
E-NAV 기타(척)
- - -
기상정보
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
기상정보 - 유향, 유속, 유의 파고, 파향, 파주기, 풍속, 풍향 을 나타내는 표입니다
유향0
유속-
유의 파고0.5(m)
파향 -
- 파향 - 350(°) -
-
파주기3.7(s)
풍속9.2(m/s)
풍향 -
- 풍향 - 45(°) -
-
-
-
-
- -
-
-
-
-
- ); -} diff --git a/src/publish/pages/DisplayComponent.jsx b/src/publish/pages/DisplayComponent.jsx deleted file mode 100644 index bf57d9e0..00000000 --- a/src/publish/pages/DisplayComponent.jsx +++ /dev/null @@ -1,355 +0,0 @@ -import { useEffect, useState } from "react"; -import { Link, useNavigate } from "react-router-dom"; -import Slider from '../components/Slider'; - -export default function DisplayComponent({ isOpen, onToggle, activeTab: externalTab }) { - const navigate = useNavigate(); - - // 투명도 - const [opacity, setOpacity] = useState(70); - - // 아코디언 - const [isAccordionOpen1, setIsAccordionOpen1] = useState(true); // 기존 - const [isAccordionOpen2, setIsAccordionOpen2] = useState(true); // - const [isAccordionOpen3, setIsAccordionOpen3] = useState(true); // - const [isAccordionOpen4, setIsAccordionOpen4] = useState(false); // - - const toggleAccordion1 = () => setIsAccordionOpen1(prev => !prev); - const toggleAccordion2 = () => setIsAccordionOpen2(prev => !prev); - const toggleAccordion3 = () => setIsAccordionOpen3(prev => !prev); - const toggleAccordion4 = () => setIsAccordionOpen4(prev => !prev); - - // 탭이동 - const [activeTab, setActiveTab] = useState('filter'); - - useEffect(() => { - if (externalTab) { - setActiveTab(externalTab); - } - }, [externalTab]); - - const tabs = [ - { id: 'filter', label: '필터' }, - { id: 'layer', label: '레이어' }, - ]; - return ( - - ); -} diff --git a/src/publish/pages/EmptyMain.jsx b/src/publish/pages/EmptyMain.jsx deleted file mode 100644 index 2550b09a..00000000 --- a/src/publish/pages/EmptyMain.jsx +++ /dev/null @@ -1,4 +0,0 @@ - -export default function EmptyMain() { - return null; // 또는 지도만 보여주는 영역 -} diff --git a/src/publish/pages/LayerComponent.jsx b/src/publish/pages/LayerComponent.jsx deleted file mode 100644 index 1117ff3f..00000000 --- a/src/publish/pages/LayerComponent.jsx +++ /dev/null @@ -1,91 +0,0 @@ -import { useState } from 'react'; -import { useNavigate } from "react-router-dom"; -import FileUpload from '../components/FileUpload'; - -export default function LayerComponent() { - const navigate = useNavigate(); - - return ( -
- - {/* 레이어등록 팝업 */} -
-
-
- 레이어 등록 -
- -
- - - - - - - - - - - - - - - - - - - - -
레이어등록 - 레이어명, 첨부파일, 공유설정 에 대한 내용을 나타내는 표입니다.
레이어명 *
첨부파일 * -
- - geojson 파일을 첨부해 주세요. -
-
공유설정 -
- - - -
-
-
- -
-
- - -
-
-
-
-
- ); -} diff --git a/src/publish/pages/MyPageComponent.jsx b/src/publish/pages/MyPageComponent.jsx deleted file mode 100644 index c8824c42..00000000 --- a/src/publish/pages/MyPageComponent.jsx +++ /dev/null @@ -1,208 +0,0 @@ -import { useState } from "react"; -import { useNavigate } from "react-router-dom"; - -export default function MyPageComponent() { - const navigate = useNavigate(); - - // 서브 팝업 상태 - // null | "password" | "cert" - const [subPopup, setSubPopup] = useState(null); - - return ( -
- - {/* 내 정보 조회 */} -
-
-
- 내 정보 조회 -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- 내 정보 조회 - 아이디, 비밀번호, 이름, 이메일, 직급, 상세소속, 공인인증서 삭제 -
아이디admin222
비밀번호 - -
이름ADMIN
이메일123@korea.kr
직급경감
상세소속
공인인증서 삭제 - -
-
- -
-
- - -
-
-
-
- - {/* 딤 + 서브 팝업 */} - {subPopup && ( -
- - {/* 비밀번호 변경 */} - {subPopup === "password" && ( -
-
- 비밀번호 수정 -
- -
- - - - - - - - - - - - - - - - - - - - -
- 비밀번호 수정 - 현재 비밀번호, 새 비밀번호, 새 비밀번호 확인 -
현재 비밀번호 - -
새 비밀번호 - -
새 비밀번호 확인 - -
-
- -
-
- - -
-
-
- )} - - {/* 공인인증서 삭제 */} - {subPopup === "cert" && ( -
-
- 공인인증서 삭제 -
- -
-
- 공인인증서를 삭제 하시겠습니까? -
-
- -
-
- - -
-
-
- )} - -
- )} -
- ); -} diff --git a/src/publish/pages/NavComponent.jsx b/src/publish/pages/NavComponent.jsx deleted file mode 100644 index bf44b8d7..00000000 --- a/src/publish/pages/NavComponent.jsx +++ /dev/null @@ -1,71 +0,0 @@ -export default function NavComponent({ activeKey, onChange }) { - const gnbList = [ - { key: 'gnb1', class: 'gnb1', label: '선박' }, - { key: 'gnb2', class: 'gnb2', label: '위성' }, - { key: 'gnb3', class: 'gnb3', label: '기상' }, - { key: 'gnb4', class: 'gnb4', label: '분석' }, - { key: 'gnb5', class: 'gnb5', label: '타임라인' }, - { key: 'gnb6', class: 'gnb6', label: 'AI모드' }, - { key: 'gnb7', class: 'gnb7', label: '리플레이' }, - { key: 'gnb8', class: 'gnb8', label: '항적조회' }, - ]; - - const sideList = [ - { key: 'filter', class: 'filter', label: '필터' }, - { key: 'layer', class: 'layer', label: '레이어' }, - ]; - - return( - - ) -} diff --git a/src/publish/pages/Panel1Component.jsx b/src/publish/pages/Panel1Component.jsx deleted file mode 100644 index 8912f09c..00000000 --- a/src/publish/pages/Panel1Component.jsx +++ /dev/null @@ -1,727 +0,0 @@ -import { useState, useEffect } from 'react'; -import { Link } from "react-router-dom"; -import Panel1DetailComponent from './Panel1DetailComponent'; - -export default function Panel1Component({ isOpen, onToggle }) { - // 내부 뷰 상태 - const [view, setView] = useState('list'); // list | detail - - // 아코디언 - const [isAccordionOpen1, setIsAccordionOpen1] = useState(false); // 기존 - const [isAccordionOpen2, setIsAccordionOpen2] = useState(false); // 새 아코디언 - - const toggleAccordion1 = () => setIsAccordionOpen1(prev => !prev); - const toggleAccordion2 = () => setIsAccordionOpen2(prev => !prev); - - // 탭이동 - const [activeTab, setActiveTab] = useState('ship01'); - - const tabs = [ - { id: 'ship01', label: '선박검색' }, - { id: 'ship02', label: '허가선박' }, - { id: 'ship03', label: '제재단속' }, - { id: 'ship04', label: '침몰선박' }, - { id: 'ship05', label: '선박입출항' }, - { id: 'ship06', label: '관심선박' } - ]; - return ( - - ); -} diff --git a/src/publish/pages/Panel1DetailComponent.jsx b/src/publish/pages/Panel1DetailComponent.jsx deleted file mode 100644 index f1c74977..00000000 --- a/src/publish/pages/Panel1DetailComponent.jsx +++ /dev/null @@ -1,112 +0,0 @@ -import { useState, useEffect } from 'react'; -import { Link } from "react-router-dom"; - -export default function Panel1DetailComponent({ isOpen, onToggle, onBack }) { - - // 탭이동 - const [activeTab, setActiveTab] = useState('ship02'); - - const tabs = [ - { id: 'ship01', label: '선박검색' }, - { id: 'ship02', label: '허가선박' }, - { id: 'ship03', label: '제재단속' }, - { id: 'ship04', label: '침몰선박' }, - { id: 'ship05', label: '선박입출항' }, - { id: 'ship06', label: '관심선박' } - ]; - return ( - <> - {/* */} - - ); -} diff --git a/src/publish/pages/Panel2Component.jsx b/src/publish/pages/Panel2Component.jsx deleted file mode 100644 index 39ae3930..00000000 --- a/src/publish/pages/Panel2Component.jsx +++ /dev/null @@ -1,420 +0,0 @@ -import { useState } from 'react'; -import { Link, useNavigate } from "react-router-dom"; -import Slider from '../components/Slider'; - -export default function Panel2Component({ isOpen, onToggle }) { - const navigate = useNavigate(); - - // 아코디언 - const [isAccordionOpen1, setIsAccordionOpen1] = useState(false); // 기존 - const [isAccordionOpen2, setIsAccordionOpen2] = useState(false); // 새 아코디언 - - const toggleAccordion1 = () => setIsAccordionOpen1(prev => !prev); - const toggleAccordion2 = () => setIsAccordionOpen2(prev => !prev); - - // 탭이동 - const [activeTab, setActiveTab] = useState('ship01'); - - const tabs = [ - { id: 'ship01', label: '위성영상 관리' }, - { id: 'ship02', label: '위성사업자 관리' }, - { id: 'ship03', label: '위성 관리' }, - ]; - return ( - - ); -} diff --git a/src/publish/pages/Panel3Component.jsx b/src/publish/pages/Panel3Component.jsx deleted file mode 100644 index 55780771..00000000 --- a/src/publish/pages/Panel3Component.jsx +++ /dev/null @@ -1,322 +0,0 @@ -import { useState } from 'react'; -import { Link } from "react-router-dom"; -export default function Panel3Component({ isOpen, onToggle }) { - - // 탭이동 - const [activeTab, setActiveTab] = useState('weather01'); - - const tabs = [ - { id: 'weather01', label: '기상특보' }, - { id: 'weather02', label: '태풍정보' }, - { id: 'weather03', label: '조위관측' }, - { id: 'weather04', label: '조석정보' }, - { id: 'weather05', label: '항공기상' }, - ]; - return ( - - ); -} diff --git a/src/publish/pages/Panel4Component.jsx b/src/publish/pages/Panel4Component.jsx deleted file mode 100644 index 1d5bfec2..00000000 --- a/src/publish/pages/Panel4Component.jsx +++ /dev/null @@ -1,521 +0,0 @@ -import { useState } from 'react'; -import { useNavigate } from "react-router-dom"; -export default function Panel4Component({ isOpen, onToggle }) { - const navigate = useNavigate(); - - // 아코디언 - const [isAccordionOpen1, setIsAccordionOpen1] = useState(false); // 기존 - const toggleAccordion1 = () => setIsAccordionOpen1(prev => !prev); - - // 탭이동 - const [activeTab, setActiveTab] = useState('analysis01'); - - const tabs = [ - { id: 'analysis01', label: '관심 해역' }, - { id: 'analysis02', label: '해역 분석' }, - { id: 'analysis03', label: '해역 진입 선박' }, - { id: 'analysis04', label: '해구 분석' }, - ]; - return ( - - ); -} diff --git a/src/publish/pages/Panel5Component.jsx b/src/publish/pages/Panel5Component.jsx deleted file mode 100644 index a469706d..00000000 --- a/src/publish/pages/Panel5Component.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import { useState } from "react"; -export default function Panel5Component() { - - return ( -
- ); -} diff --git a/src/publish/pages/Panel6Component.jsx b/src/publish/pages/Panel6Component.jsx deleted file mode 100644 index 513549d1..00000000 --- a/src/publish/pages/Panel6Component.jsx +++ /dev/null @@ -1,77 +0,0 @@ -import { useState } from "react"; -import { Link } from "react-router-dom"; -export default function Panel6Component({ isOpen, onToggle }) { - - return ( - - ); -} diff --git a/src/publish/pages/Panel7Component.jsx b/src/publish/pages/Panel7Component.jsx deleted file mode 100644 index 3389c12a..00000000 --- a/src/publish/pages/Panel7Component.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import { useState } from "react"; -export default function Panel7Component() { - - return ( -
- ); -} diff --git a/src/publish/pages/Panel8Component.jsx b/src/publish/pages/Panel8Component.jsx deleted file mode 100644 index 868a706e..00000000 --- a/src/publish/pages/Panel8Component.jsx +++ /dev/null @@ -1,7 +0,0 @@ -import { useState } from "react"; -export default function Panel8Component() { - - return ( -
- ); -} diff --git a/src/publish/pages/ReplayComponent.jsx b/src/publish/pages/ReplayComponent.jsx deleted file mode 100644 index 7f734dcd..00000000 --- a/src/publish/pages/ReplayComponent.jsx +++ /dev/null @@ -1,100 +0,0 @@ - -import { useState } from "react"; -import { useNavigate } from "react-router-dom"; - -export default function ReplayComponent() { - const navigate = useNavigate(); - - const max = 100; - const [value, setValue] = useState(30); - - const percent = (value / max) * 100; - - return( -
- -
- - -
- {/* 재생상태 컨트롤 */} -
-
- - -
- -
- setValue(Number(e.target.value))} - style={{ - background: `linear-gradient( - to right, - #FF0000 0%, - #FF0000 ${percent}%, - #D7DBEC ${percent}%, - #D7DBEC 100% - )` - }} - /> -
- 2023-08-20  10:15:30 -
-
- -
- - -
- -
- {/* 재생옵션 영역 */} -
- - -
- -
-
- -
- ) -} \ No newline at end of file diff --git a/src/publish/pages/Satellite1Component.jsx b/src/publish/pages/Satellite1Component.jsx deleted file mode 100644 index d9ad226a..00000000 --- a/src/publish/pages/Satellite1Component.jsx +++ /dev/null @@ -1,189 +0,0 @@ -import { useState } from 'react'; -import { useNavigate } from "react-router-dom"; -import FileUpload from '../components/FileUpload'; - -export default function Satellite1Component() { - const navigate = useNavigate(); - - return ( -
- - {/* 위성 영상 등록 팝업 */} -
-
-
- 위성 영상 등록 -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
위성 영상 등록 - 사업자명/위성명, 영상 촬영일, 위성영상파일,CSV 파일,위성영상명, 영상전송 주기,영상 종류,위성 궤도,영상 출처,촬영 목적,촬영 모드,취득방법,구매가격, 에 대한 내용을 등록하는 표입니다.
사업자명/위성명 * -
- - -
-
영상 촬영일 *
위성영상파일 * -
- -
-
CSV 파일 * -
- -
-
위성영상명 *
영상전송 주기 - -
영상 종류 -
- - - - - -
-
위성 궤도 - - 영상 출처 - -
촬영 목적 - - 촬영 모드 - -
취득방법 - - 구매가격 -
- -
- - -
-
-
-
- -
-
- - -
-
-
-
- -
- ); -} diff --git a/src/publish/pages/Satellite2Component.jsx b/src/publish/pages/Satellite2Component.jsx deleted file mode 100644 index 5d604e62..00000000 --- a/src/publish/pages/Satellite2Component.jsx +++ /dev/null @@ -1,87 +0,0 @@ -import { useState } from 'react'; -import { useNavigate } from "react-router-dom"; - -export default function Satellite2Component() { - const navigate = useNavigate(); - return ( -
- - {/* 위성 사업자 등록 팝업 */} -
-
-
- 위성 사업자 등록 -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - -
위성 사업자 등록 - 사업자 분류, 사업자명, 국가, 소재지, 상세내역 에 대한 내용을 등록하는 표입니다.
사업자 분류 * - -
사업자명
국가 * - -
소재지
상세내역
-
- -
-
- - -
-
-
-
- -
- ); -} diff --git a/src/publish/pages/Satellite3Component.jsx b/src/publish/pages/Satellite3Component.jsx deleted file mode 100644 index f24eec73..00000000 --- a/src/publish/pages/Satellite3Component.jsx +++ /dev/null @@ -1,94 +0,0 @@ -import { useState } from 'react'; -import { useNavigate } from "react-router-dom"; - -export default function Satellite3Component() { - const navigate = useNavigate(); - - return ( -
- - {/* 위성 관리 등록 팝업 */} -
-
-
- 위성 관리 등록 -
- -
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
위성 관리 등록 - 사업자명, 위성명, 센서 타입, 촬영 해상도, 주파수, 상세내역 에 대한 내용을 등록하는 표입니다.
사업자명 * - -
위성명 *
센서 타입 - -
촬영 해상도
주파수
상세내역
-
- -
-
- - -
-
-
-
- -
- ); -} diff --git a/src/publish/pages/Satellite4Component.jsx b/src/publish/pages/Satellite4Component.jsx deleted file mode 100644 index 05c705a7..00000000 --- a/src/publish/pages/Satellite4Component.jsx +++ /dev/null @@ -1,50 +0,0 @@ -import { useState } from 'react'; -import { useNavigate } from "react-router-dom"; - -export default function Satellite4Component() { - const navigate = useNavigate(); - - return ( -
- - {/* 삭제 팝업 */} -
-
-
- 삭제 -
- -
-
삭제 하시겠습니까?
-
- -
-
- - -
-
-
-
- -
- ); -} diff --git a/src/publish/pages/ShipComponent.jsx b/src/publish/pages/ShipComponent.jsx deleted file mode 100644 index bc54d6fa..00000000 --- a/src/publish/pages/ShipComponent.jsx +++ /dev/null @@ -1,169 +0,0 @@ -import { useState } from "react"; -import { useNavigate } from "react-router-dom"; - -export default function ShipComponent() { - const navigate = useNavigate(); - - //progress bar value 선언 - const [value, setValue] = useState(60); - - // 갤러리 이미지 - const 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( -
- - {/* 배정보 팝업 */} -
- {/* header */} -
-
- - 대한민국 - 1511함A-05 - 13450135 -
-
- -
- - - - {/* 이미지 영역 */} -
- {images[currentIndex].alt} -
-
- {/* body */} -
-
-
- -
    -
  • A
    • -
  • V
    • -
  • E
    • -
  • T
    • -
  • D
    • -
  • R
    • -
-
- -
- -
-
- {value}% - -
-
- -
    -
  • -
    - 출항지 - 서귀포해양경찰서 -
    -
    - 입항지 - 하태도 -
    -
    • -
  • -
    - 출항일시 - 2024-11-23 11:23:00 -
    -
    - 입항일시 - 2024-11-23 11:23:00 -
    -
    • -
  • -
    - 선박상태 - 정박 -
    -
    - 속도/항로 - 4.2 kn / 13.3˚ -
    -
    - 흘수 - 1.1m -
    -
    • -
- - {/*
    -
  • - AIS - 정상 -
    • -
  • - RF - 정상 -
    • -
  • - EO - 정상 -
    • -
  • - SAR - 비활성 -
    • -
*/} -
- - -
-
- {/* footer */} -
데이터 수신시간 : 2024-11-23 11:23:00
-
- -
- ) -} \ No newline at end of file diff --git a/src/publish/pages/Signal1Component.jsx b/src/publish/pages/Signal1Component.jsx deleted file mode 100644 index f64b90fa..00000000 --- a/src/publish/pages/Signal1Component.jsx +++ /dev/null @@ -1,58 +0,0 @@ -import { useState } from 'react'; -import { useNavigate } from "react-router-dom"; - -export default function Signal1Component() { - const navigate = useNavigate(); - - return ( -
- - {/* 신호설정 팝업 */} -
-
-
- 신호설정 -
- -
- - - - - - - - - - - - - - - - -
신호설정 - 신호표출반경, 수신수기 설정 에 대한 내용을 나타내는 표입니다.
신호표출반경 - -
수신수기 설정
-
- -
-
- - -
-
-
-
- -
- ); -} diff --git a/src/publish/pages/Signal2Component.jsx b/src/publish/pages/Signal2Component.jsx deleted file mode 100644 index 99f4e694..00000000 --- a/src/publish/pages/Signal2Component.jsx +++ /dev/null @@ -1,149 +0,0 @@ -import { useState } from 'react'; -import { useNavigate } from "react-router-dom"; - -export default function Signal2Component() { - const navigate = useNavigate(); - - // 아코디언 상태 (3개, 초기 모두 열림) - const [accordionOpen, setAccordionOpen] = useState({ - signal1: true, - signal2: true, - signal3: true, - }); - - const toggleAccordion = (key) => { - setAccordionOpen((prev) => ({ ...prev, [key]: !prev[key] })); - }; - - return ( -
- - {/* 신호설정 팝업 */} -
-
-
- 맞춤 설정 -
- -
- {/* 아코디언그룹 01 */} -
-
- NLL 고속 선박 탐지 - -
- {/* 여기서부터 아코디언 */} -
-
    -
  • - - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
- {/* 여기까지 */} -
- - {/* 아코디언그룹 02 */} -
-
- 특정 어업수역 탐지 - -
- {/* 여기서부터 아코디언 */} -
-
    -
  • - - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
  • - -
    • -
-
- {/* 여기까지 */} -
- - {/* 아코디언그룹 03 */} -
-
- 위험화물 식별 - -
- {/* 여기서부터 아코디언 */} -
-
    -
  • - - -
    • -
-
- {/* 여기까지 */} -
-
- -
-
- - -
-
-
-
- -
- ); -} diff --git a/src/publish/pages/ToastComponent.jsx b/src/publish/pages/ToastComponent.jsx deleted file mode 100644 index 1748fe4b..00000000 --- a/src/publish/pages/ToastComponent.jsx +++ /dev/null @@ -1,59 +0,0 @@ -import { Link } from "react-router-dom"; - -export default function ToastComponent() { - return( -
- - {/* 지도상 배표식 */} -
-
- - 1511함A-05 - 12.5 kts | 45° - -
- -
- - 1511함A-05 - 12.5 kts | 45° - -
- -
- - 1511함A-05 - 12.5 kts | 45° - -
-
- - {/* 토스트팝업 */} -
-
- 104 어업구역 비인가 선박 - - - - -
- -
- 104 어업구역 비인가 선박 - - - - -
- -
- 저속 이동 의심 선박 - - - - -
-
-
- ) -} \ No newline at end of file diff --git a/src/publish/pages/TopComponent.jsx b/src/publish/pages/TopComponent.jsx deleted file mode 100644 index f1ffa98a..00000000 --- a/src/publish/pages/TopComponent.jsx +++ /dev/null @@ -1,21 +0,0 @@ -export default function TopComponent() { - return( -
-
-
    -
    • -
  • 경도129° 38’31.071”E
    • -
  • 위도35° 21’24.580”N
    • -
  • KST2024-07-01(화) 12:00:00
    • -
    • -
    • -
-
- -
- - -
-
- ) -} \ No newline at end of file diff --git a/src/publish/pages/TrackComponent.jsx b/src/publish/pages/TrackComponent.jsx deleted file mode 100644 index 9216aa70..00000000 --- a/src/publish/pages/TrackComponent.jsx +++ /dev/null @@ -1,41 +0,0 @@ - -import { useNavigate } from "react-router-dom"; - -export default function TrackComponent() { - const navigate = useNavigate(); - - return( -
- -
- - - {/* 항적조회 검색바 */} -
- - - -
- -
- -
- ) -} \ No newline at end of file diff --git a/src/publish/pages/WeatherComponent.jsx b/src/publish/pages/WeatherComponent.jsx deleted file mode 100644 index eb664225..00000000 --- a/src/publish/pages/WeatherComponent.jsx +++ /dev/null @@ -1,71 +0,0 @@ -import { useNavigate } from "react-router-dom"; - -export default function WeatherComponent() { - const navigate = useNavigate(); - - return( -
- -
- {/* header */} -
-
- 해양관측소 -
- -
- {/* body */} -
- -
    -
  • - 2023.10.16 20:54 -
    • -
  • - 조위 - 251(cm) -
    • -
  • - 수온 - 19.6(°C) -
    • -
  • - 염분 - 31.8(PSU) -
    • -
  • - 기온 - 16.9(°C) -
    • -
  • - 기압 - 1016.6(hPa) -
    • -
  • - 풍향 - 315(deg) -
    • -
  • - 풍속 - 7.1(m/s) -
    • -
  • - 유속방향 - -(deg) -
    • -
  • - 유속 - -(m/s) -
    • -
-
-
-
- ) -} \ No newline at end of file diff --git a/src/publish/scss/HeaderComponent.scss b/src/publish/scss/HeaderComponent.scss deleted file mode 100644 index d033824c..00000000 --- a/src/publish/scss/HeaderComponent.scss +++ /dev/null @@ -1,109 +0,0 @@ - -@charset "utf-8"; - -#wrap { - - /* header */ - #header { - width: 100%; - height: 4.4rem; - position: relative; - display: flex; - justify-content: space-between; - align-items: center; - background: var(--secondary5); - - .logoArea { - display: flex; - align-items: center; - - .logo { - width: 4.3rem; - height: 4.4rem; - display: flex; - align-items: center; - justify-content: center; - background: url(../assets/images/logo.svg) no-repeat center / contain; - } - - .logoTxt { - color: var(--white); - font-weight: var(--fw-bold); - } - } - - aside { - ul { - display: flex; - - li { - position: relative; - width: 3rem; - height: 3rem; - margin-right: .9rem; - - &.setWrap:hover .setMenu { - display: block; - } - - a { - position: relative; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background-repeat: no-repeat; - background-position: center; - background-size: 3rem; - - &.alram { - background-image: url(../assets/images/ico_alarm.svg); - } - - &.set { - background-image: url(../assets/images/ico_set.svg); - } - - &.user { - background-image: url(../assets/images/ico_user.svg); - } - } - } - } - } - .setMenu { - display: none; - position: absolute; - top: 2.8rem; - right: -1rem; - min-width: 22rem; - background-color:var(--secondary2) ; - padding: .6rem 0; - z-index: 100; - pointer-events: auto; - - a { - display: block; - padding: .8rem 1.5rem; - font-size: var(--fs-m); - font-weight: var(--fw-bold); - - &:hover { - background-color:var(--primary1); - } - } - } - - .badge { - position: absolute; - top: .6rem; - right: .8rem; - display: block; - width: .5rem; - height: .6rem; - border-radius: 50%; - background-color: var(--alert); - } - } -} \ No newline at end of file diff --git a/src/publish/scss/Layout.scss b/src/publish/scss/Layout.scss deleted file mode 100644 index 81b9c753..00000000 --- a/src/publish/scss/Layout.scss +++ /dev/null @@ -1,557 +0,0 @@ - -@charset "utf-8"; - -#wrap { - width: 100%; - height: 100%; - - /* header */ - #header { - width: 100%; - height: 4.4rem; - position: relative; - display: flex; - justify-content: space-between; - align-items: center; - background: var(--secondary5); - - .logoArea { - display: flex; - align-items: center; - - .logo { - width: 4.3rem; - height: 4.4rem; - display: flex; - align-items: center; - justify-content: center; - background: url(../assets/images/logo.svg) no-repeat center / contain; - } - - .logoTxt { - color: var(--white); - font-weight: var(--fw-bold); - } - } - - aside { - ul { - display: flex; - - li { - width: 3rem; - height: 3rem; - margin-right: .9rem; - - a { - position: relative; - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background-repeat: no-repeat; - background-position: center; - background-size: 3rem; - - &.alram { - background-image: url(../assets/images/ico_alarm.svg); - } - - &.set { - background-image: url(../assets/images/ico_set.svg); - } - - &.user { - background-image: url(../assets/images/ico_user.svg); - } - } - } - } - } - - .badge { - position: absolute; - top: .6rem; - right: .8rem; - display: block; - width: .5rem; - height: .6rem; - border-radius: 50%; - background-color: var(--alert); - } - } - - #sidePanel { - /* gnb */ - #nav { - position: fixed; - top: 4.4rem; - left: 0; - z-index: 100; - width: 4.3rem; - height: calc(100% - 4.4rem); - display: flex; - flex-direction: column; - justify-content: space-between; - background: var(--secondary1); - border-right: 1px solid var(--tertiary2); - - .gnb { - width: 4.2rem; - display: flex; - flex-direction: column; - - li { - width: 100%; - height: 4.4rem; - display: flex; - align-items: center; - justify-content: center; - - a { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background-repeat: no-repeat; - background-position: center; - background-size: 3rem; - - /* 공통 상태 */ - &:hover, - &:active, - &.active { - background-color: var(--primary1); - } - - /* gnb icons */ - &.gnb1 { - background-image: url(../assets/images/ico_gnb01.svg); - - &:hover, - &:active, - &.active { - background-image: url(../assets/images/ico_gnb01_on.svg); - } - } - - &.gnb2 { - background-image: url(../assets/images/ico_gnb02.svg); - - &:hover, - &:active, - &.active { - background-image: url(../assets/images/ico_gnb02_on.svg); - } - } - - &.gnb3 { - background-image: url(../assets/images/ico_gnb03.svg); - - &:hover, - &:active, - &.active { - background-image: url(../assets/images/ico_gnb03_on.svg); - } - } - - &.gnb4 { - background-image: url(../assets/images/ico_gnb04.svg); - - &:hover, - &:active, - &.active { - background-image: url(../assets/images/ico_gnb04_on.svg); - } - } - - &.gnb5 { - background-image: url(../assets/images/ico_gnb05.svg); - - &:hover, - &:active, - &.active { - background-image: url(../assets/images/ico_gnb05_on.svg); - } - } - - &.gnb6 { - background-image: url(../assets/images/ico_gnb06.svg); - - &:hover, - &:active, - &.active { - background-image: url(../assets/images/ico_gnb06_on.svg); - } - } - } - } - } - } - - - /* side-pannel */ - .slidePanel { - position: fixed; - top: 4.4rem; - left: 4.3rem; - width: 54rem; - height: calc(100% - 4.4rem); - display: flex; - flex-direction: column; - background-color: var(--secondary2); - z-index: 99; - transform: translateX(0); - transition: transform .3s ease; - - /* 닫힘 상태 */ - &.is-closed { - transform: translateX(-100%); - - .toogle::after { - transform: translate(-50%, -50%) rotate(180deg); - } - } - - .tabBox { - flex-shrink: 0; - width: 100%; - height: 4.8rem; - padding: 0 1.9rem; - margin-top: 1.5rem; - } - - .tabWrap { - flex: 1; - min-height: 0; - display: flex; - flex-direction: column; - - &.is-active { - display: flex; - } - - .tabTop { - flex-shrink: 0; - width: 100%; - padding: 0 2rem; - border-bottom: 1px solid var(--secondary1); - - .title { - height: 6.4rem; - font-size: var(--fs-ml); - color: var(--white); - padding: 2rem 0; - } - } - - .tabBtm { - flex: 1; - min-height: 0; - overflow-y: auto; - overflow-x: hidden; - padding: 3rem 1.9rem; - } - } - - .toogle { - position: absolute; - overflow: hidden; - z-index: 10; - top: 50%; - left: 100%; - width: 2.4rem; - height: 5rem; - border-radius: 0 1rem 1rem 0; - transform: translateY(-50%); - background-color: var(--secondary2); - border: solid 1px var(--secondary3); - - &::after { - content: ""; - position: absolute; - top: 50%; - left: 50%; - width: 2.4rem; - height: 2.4rem; - transform: translate(-50%, -50%); - background: url(../assets/images/ico_toggle.svg) no-repeat center / 2.4rem; - transition: transform .3s ease; - } - } - } - - } - /* main */ - #main { - width: 100%; - height: calc(100% - 4.4rem); - position: relative; - - /* top-bar */ - .topBar { - display: grid; - grid-template-columns: 1fr auto 1fr; - align-items: center; - padding: 1.5rem 5.4rem; - } - - /* top-location */ - .locationInfo { - grid-column: 2; - width: 71rem; - max-width: 100%; - height: 3.8rem; - background-color: rgba(var(--secondary6-rgb), .9); - - ul { - display: flex; - align-items: center; - width: 100%; - height: 100%; - - li { - display: flex; - align-items: center; - height: 100%; - padding: 0 1rem; - color: var(--white); - font-weight: var(--fw-bold); - font-size: 1.3rem; - - &:first-child, - &:last-child { - padding: 0; - } - - span + span { - padding-right: .5rem; - } - - &.divider { - position: relative; - - &::after { - content: ""; - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - width: 1px; - height: 1.8rem; - background-color: rgba(255, 255, 255, .3); - } - } - - .wgs { - display: flex; - align-items: center; - padding-right: .5rem; - - &::before { - content: ""; - display: block; - width: 2rem; - height: 2rem; - margin-right: .5rem; - background: url(../assets/images/ico_globe.svg) no-repeat center / 2rem; - } - } - - .kst { - display: flex; - align-items: center; - justify-content: center; - width: 3.1rem; - height: 1.8rem; - margin-right: .5rem; - border-radius: .3rem; - background-color: var(--tertiary3); - color: var(--white); - font-size: var(--fs-s); - } - } - } - - button { - width: 4rem; - height: 3.8rem; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - cursor: pointer; - box-sizing: border-box; - background-color: var(--secondary3); - background-repeat: no-repeat; - background-position: center; - background-size: 3rem; - - &:hover, - &.active { - background-color: rgba(var(--primary1-rgb), .8); - } - - &.map { - background-image: url(../assets/images/ico_map.svg); - } - - &.ship { - background-image: url(../assets/images/ico_ship.svg); - } - - &.set { - width: 2rem; - height: 2rem; - background-color: transparent; - background-image: url(../assets/images/ico_set_s.svg); - background-size: 2rem; - - &:hover, - &.active { - background-color: transparent; - } - } - } - } - - /* top-search */ - .schBox { - position: relative; - grid-column: 3; - justify-self: end; - width: 20rem; - height: 3.8rem; - - .sch { - width: 100%; - height: 100%; - padding-right: 4.4rem; - border-radius: 2rem; - background-color: rgba(var(--secondary6-rgb), .9); - - &::placeholder { - color: var(--white); - } - } - - .mainSchBtn { - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 4rem; - height: 3.8rem; - font-size: 0; - text-indent: -999999em; - border: none; - cursor: pointer; - background: url(../assets/images/ico_search_main.svg) no-repeat center left / 2.4rem; - } - } - } - - /* tool-bar */ - #tool { - .toolBar { - position: absolute; - top: 5.9rem; - right: .9rem; - width: 3rem; - height: 41rem; - } - - .control { - position: absolute; - bottom: 1.8rem; - right: .9rem; - width: 3rem; - height: 20rem; - } - - .toolItem { - width: 100%; - display: flex; - flex-direction: column; - - &.space { - li { - margin-bottom: .5rem; - } - } - - &.zoom { - li { - height: 3rem; - - &.num { - background-color: var(--white); - color: var(--gray-scale2); - border-left: 1px solid rgba(var(--secondary6-rgb), .8); - border-right: 1px solid rgba(var(--secondary6-rgb), .8); - font-size: var(--fs-m); - } - - button { - padding-bottom: 0; - } - } - } - - li { - display: flex; - align-items: center; - justify-content: center; - width: 3rem; - height: 4.2rem; - background-color: rgba(var(--secondary6-rgb), .8); - - &:hover, - &.active { - background-color: rgba(var(--primary1-rgb), .8); - } - - button { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - padding-bottom: .2rem; - cursor: pointer; - text-align: center; - font-size: var(--fs-xxs); - color: var(--white); - background-repeat: no-repeat; - background-position: top left; - background-size: 3rem; - - &::before { - content: ""; - flex-shrink: 0; - width: 3rem; - height: 3rem; - } - - &.tool01 { background-image: url(../assets/images/ico_tool01.svg); } - &.tool02 { background-image: url(../assets/images/ico_tool02.svg); } - &.tool03 { background-image: url(../assets/images/ico_tool03.svg); } - &.tool04 { background-image: url(../assets/images/ico_tool04.svg); } - &.tool05 { background-image: url(../assets/images/ico_tool05.svg); } - &.tool06 { background-image: url(../assets/images/ico_tool06.svg); } - &.tool07 { background-image: url(../assets/images/ico_tool07.svg); } - &.tool08 { background-image: url(../assets/images/ico_tool08.svg); } - - &.zoomin { background-image: url(../assets/images/ico_plus.svg); } - &.zoomout { background-image: url(../assets/images/ico_minus.svg); } - &.legend { background-image: url(../assets/images/ico_legend.svg); } - &.minimap { background-image: url(../assets/images/ico_minimap.svg); } - } - } - } - } - -} \ No newline at end of file diff --git a/src/publish/scss/MainComponent.scss b/src/publish/scss/MainComponent.scss deleted file mode 100644 index f9a1e878..00000000 --- a/src/publish/scss/MainComponent.scss +++ /dev/null @@ -1,188 +0,0 @@ - -@charset "utf-8"; - -#wrap { - //* main */ - #main { - width: 100%; - min-height: calc(100vh - 4.4rem); - position: relative; - overscroll-behavior: none; - overflow: hidden; - - //* top-bar */ - .topBar { - position: absolute; - top: 1.5rem; - left: 0; - right: 0; - height: 4.4rem; - display: flex; - align-items: center; - justify-content: space-between; - padding: 0 5.4rem; - box-sizing: border-box; - z-index: 95; - } - - //* top-location */ - .locationInfo { - flex: 0 0 auto; - min-width: 71rem; - height: 3.8rem; - margin: 0 auto; - display: flex; - align-items: center; - background-color: rgba(var(--secondary6-rgb), .9); - overflow: hidden; - - ul { - display: flex; - align-items: center; - width: 100%; - height: 100%; - - li { - display: flex; - align-items: center; - height: 100%; - padding: 0 1rem; - color: var(--white); - font-weight: var(--fw-bold); - font-size: 1.3rem; - - &:first-child, - &:last-child { - padding: 0; - } - - span + span { - padding-right: .5rem; - } - - &.divider { - position: relative; - - &::after { - content: ""; - position: absolute; - right: 0; - top: 50%; - transform: translateY(-50%); - width: 1px; - height: 1.8rem; - background-color: rgba(255, 255, 255, .3); - } - } - - .wgs { - display: flex; - align-items: center; - padding-right: .5rem; - - &::before { - content: ""; - display: block; - width: 2rem; - height: 2rem; - margin-right: .5rem; - background: url(../assets/images/ico_globe.svg) no-repeat center / 2rem; - } - } - - .kst { - display: flex; - align-items: center; - justify-content: center; - width: 3.1rem; - height: 1.8rem; - margin-right: .5rem; - border-radius: .3rem; - background-color: var(--tertiary3); - color: var(--white); - font-size: var(--fs-s); - } - } - } - - button { - width: 4rem; - height: 3.8rem; - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - cursor: pointer; - box-sizing: border-box; - background-color: var(--secondary3); - background-repeat: no-repeat; - background-position: center; - background-size: 3rem; - - &:hover, - &.active { - background-color: rgba(var(--primary1-rgb), .8); - } - - &.map { - background-image: url(../assets/images/ico_map.svg); - } - - &.ship { - background-image: url(../assets/images/ico_ship.svg); - } - - &.set { - width: 2rem; - height: 2rem; - background-color: transparent; - background-image: url(../assets/images/ico_set_s.svg); - background-size: 2rem; - - &:hover, - &.active { - background-color: transparent; - } - } - } - } - - //* top-search */ - .topSchBox { - flex: 0 0 auto; - width: 20rem; - height: 3.8rem; - display: flex; - justify-content: flex-end; - position: relative; - - .tschInput { - width: 100%; - height: 100%; - padding-right: 4.4rem; - border-radius: 2rem; - background-color: rgba(var(--secondary6-rgb), .9); - border: 0; - - &::placeholder { - color: var(--white); - } - } - - .mainSchBtn { - position: absolute; - top: 50%; - right: 0; - transform: translateY(-50%); - width: 4rem; - height: 3.8rem; - font-size: 0; - text-indent: -999999em; - border: none; - cursor: pointer; - background: url(../assets/images/ico_search_main.svg) no-repeat center left / 2.4rem; - } - } - - } -} \ No newline at end of file diff --git a/src/publish/scss/SideComponent.scss b/src/publish/scss/SideComponent.scss deleted file mode 100644 index 7dc48fe2..00000000 --- a/src/publish/scss/SideComponent.scss +++ /dev/null @@ -1,539 +0,0 @@ - -@charset "utf-8"; - -#wrap { - - #sidePanel { - /* gnb */ - #nav { - position: fixed; - top: 4.4rem; - left: 0; - z-index: 100; - width: 4.3rem; - height: calc(100% - 4.4rem); - display: flex; - flex-direction: column; - justify-content: space-between; - background: var(--secondary1); - border-right: 1px solid var(--tertiary2); - - .gnb { - width: 4.2rem; - display: flex; - flex-direction: column; - - li { - width: 100%; - height: 4.4rem; - display: flex; - align-items: center; - justify-content: center; - - button { - width: 100%; - height: 100%; - display: flex; - align-items: center; - justify-content: center; - background-repeat: no-repeat; - background-position: center; - background-size: 3rem; - - /* 공통 상태 */ - &:hover, - &:active, - &.active { - background-color: var(--primary1); - } - - /* gnb icons */ - &.gnb1 { - background-image: url(../assets/images/ico_gnb01.svg); - - &:hover, - &:active, - &.active { - background-image: url(../assets/images/ico_gnb01_on.svg); - } - } - - &.gnb2 { - background-image: url(../assets/images/ico_gnb02.svg); - - &:hover, - &:active, - &.active { - background-image: url(../assets/images/ico_gnb02_on.svg); - } - } - - &.gnb3 { - background-image: url(../assets/images/ico_gnb03.svg); - - &:hover, - &:active, - &.active { - background-image: url(../assets/images/ico_gnb03_on.svg); - } - } - - &.gnb4 { - background-image: url(../assets/images/ico_gnb04.svg); - - &:hover, - &:active, - &.active { - background-image: url(../assets/images/ico_gnb04_on.svg); - } - } - - &.gnb5 { - background-image: url(../assets/images/ico_gnb05.svg); - - &:hover, - &:active, - &.active { - background-image: url(../assets/images/ico_gnb05_on.svg); - } - } - - &.gnb6 { - background-image: url(../assets/images/ico_gnb06.svg); - - &:hover, - &:active, - &.active { - background-image: url(../assets/images/ico_gnb06_on.svg); - } - } - - &.gnb7 { - background-image: url(../assets/images/ico_gnb07.svg); - - &:hover, - &:active, - &.active { - background-image: url(../assets/images/ico_gnb07_on.svg); - } - } - - &.gnb8 { - background-image: url(../assets/images/ico_gnb08.svg); - - &:hover, - &:active, - &.active { - background-image: url(../assets/images/ico_gnb08_on.svg); - } - } - } - } - } - .side { - width: 4.2rem; - display: flex; - flex-direction: column; - - li { - width: 100%; - height: 4.4rem; - display: flex; - align-items: center; - justify-content: center; - - button { - width: 3rem; - height: 3rem; - display: flex; - align-items: center; - justify-content: center; - background-repeat: no-repeat; - background-position: center; - background-size: 3rem; - background-color: var(--primary3); - - &.filter { - background-image: url('../assets/images/ico_side01.svg'); - } - - &.layer { - background-image: url('../assets/images/ico_side02.svg'); - } - } - } - } - - } - - - /* side-pannel */ - .slidePanel { - position: fixed; - top: 4.4rem; - left: 4.3rem; - width: 54rem; - height: calc(100% - 4.4rem); - min-height: 0; - display: flex; - flex-direction: column; - background-color: var(--secondary2); - border-right: .1rem solid var(--secondary3); - z-index: 99; - transform: translateX(0); - transition: transform .3s ease; - - /* 닫힘 상태 */ - &.is-closed { - transform: translateX(-100%); - - .toogle::after { - transform: translate(-50%, -50%) rotate(180deg); - } - } - - .tabBox { - flex-shrink: 0; - width: 100%; - padding: 1.5rem 2rem 0 2rem; - } - - .tabWrap { - flex: 1; - min-height: 0; - display: none; - flex-direction: column; - - &.is-active { - display: flex; - } - - .tabWrapInner { - display: flex; - flex-direction: column; - flex: 1; - min-height: 100%; - - .tabWrapCnt { - flex: 1 1 auto; - min-height: 0; - overflow-y: auto; - padding-bottom: 3rem; - - // 필터 스위치그룹 - .switchGroup { - display: flex; - flex-direction: column; - width: 100%; - - .sgHeader { - display: flex; - align-items: center; - justify-content: space-between; - padding: 1.2rem 1rem; - background-color: var(--secondary1); - border-bottom: .1rem solid var(--secondary3); - - .colL { - display: flex; - align-items: center; - gap: 1rem; - font-weight: var(--fw-bold); - - .favship { - width: 2rem; - height: 2rem; - background: url(../assets/images/ico_favship.svg) no-repeat center / contain; - } - } - - .toggleBtn { - display: flex; - align-items: center; - width: 2.4rem; - height: 2.4rem; - background: url(../assets/images/ico_arrow_toggle_down.svg) no-repeat center / contain; - transition: transform 0.3s ease; - - &.is-open { - transform: rotate(180deg); - } - } - } - - .switchBox { - overflow: hidden; - max-height: 0; - transition: max-height 0.3s ease; - - &.is-open { - max-height: 500rem; - } - - .switchList { - display: flex; - flex-direction: column; - flex: 1 1 auto; - width: 100%; - background-color: var(--tertiary1); - padding: 1rem; - - li { - display: flex; - justify-content: space-between; - padding: .1rem 0; - - span { - flex: 1; - min-width: 0; - word-break: break-word; - overflow-wrap: break-word; - white-space: normal; - } - } - } - } - } - } - - .btnBox { - flex: 0 0 auto; - margin-top: auto; - display: flex; - justify-content: flex-end; - padding: 2rem; - } - } - - .tabTop { - flex-shrink: 0; - width: 100%; - padding: 0 2rem; - - .title { - font-size: var(--fs-ml); - color: var(--white); - font-weight: var(--fw-bold); - padding: 1.7rem 0; - - .prevBtn { - width: 2rem; - height: 2rem; - background: url(../assets/images/ico_tit_prev.svg) no-repeat center /contain; - margin-right: .5rem; - } - } - // 기상패널 범례 - .legend { - display: flex; - align-items: flex-start; - flex-direction: column; - gap: .4rem; - margin-bottom: 2.5rem; - - .legendTitle { - font-size: var(--fs-m); - } - - .legendList { - width: 100%; - border-radius: .6rem; - padding: 1.5rem; - background-color: rgba(var(--secondary4-rgb), .2); - display: grid; - grid-template-columns: repeat(3, 1fr); - gap: 1rem; - - li { - display: flex; - align-items: center; - justify-content: flex-start; - font-size: var(--fs-ml); - - img { - width: 2.6rem; - height: 2.6rem; - margin-right: .5rem; - } - } - } - } - } - - .tabBtm { - flex: 1; - min-height: 0; - overflow-y: auto; - overflow-x: hidden; - border-top: 1px solid var(--secondary1); - padding: 3rem 2rem; - - &.noLine { - overflow-y: visible; - border-top: 0; - padding: 0 2rem; - } - - &.noSc { - overflow-y: visible; - padding-bottom: 0; - } - .tabBtmInner { - display: flex; - flex-direction: column; - height: 100%; - min-height: 0; - - .tabBtmCnt { - flex: 1 1 auto; - min-height: 0 ; - overflow-y: auto; - padding-bottom: 2rem; - } - - .btnBox { - flex: 0 0 auto; - margin-top: auto; - display: flex; - justify-content: flex-end; - gap: 1rem; - padding: 2rem 0; - - &.rowSB { - justify-content: space-between; - } - - button { - flex: initial; - min-width: 12rem; - } - } - } - } - - } - - .toogle { - position: absolute; - overflow: hidden; - z-index: 10; - top: 50%; - left: 100%; - width: 2.4rem; - height: 5rem; - border-radius: 0 1rem 1rem 0; - transform: translateY(-50%); - background-color: var(--secondary2); - border: solid 1px var(--secondary3); - - &::after { - content: ""; - position: absolute; - top: 50%; - left: 50%; - width: 2.4rem; - height: 2.4rem; - transform: translate(-50%, -50%); - background: url(../assets/images/ico_toggle.svg) no-repeat center / 2.4rem; - transition: transform .3s ease; - } - } - // ai모드 - .panelHeader { - display: flex; - align-items: center; - padding: 0 2rem; - - .panelTitle { - padding: 1.7rem 0; - font-size: var(--fs-ml); - font-weight: var(--fw-bold); - } - } - - .panelBody { - display: flex; - flex: 1; - min-height: 0; - padding: 0 2rem; - - .ai { - display: grid; - grid-template-columns: repeat(2, 1fr); - align-items: start; - gap: 1rem; - row-gap: 1rem; - grid-auto-rows: min-content; - width: 100%; - - li { - display: flex; - align-items: center; - justify-content: flex-start; - - a { - position: relative; - display: flex; - flex-direction: column; - gap: .6rem; - width: 100%; - height: auto; - padding: 2rem 1.2rem; - background-color: var(--secondary1); - border: 2px solid transparent; - border-radius: .6rem; - - &.on { - background-color: var(--secondary5); - border-color: var(--primary1); - } - - &:not(.on) > * { - opacity: .5; - } - - .title { - display: flex; - align-items: center; - font-weight: var(--fw-bold); - - img { - width: 2.2rem; - height: 2.2rem; - margin-right: .5rem; - } - } - - .keyword { - font-weight: var(--fw-bold); - } - - .control { - position: absolute; - top: 2rem; - right: 1.5rem; - display: flex; - align-items: center; - - i { - width: .8rem; - height: .8rem; - border-radius: 50%; - background-color: var(--white); - margin-right: .5rem; - } - } - } - } - } - } - - .panelFooter { - border-top: 1px solid var(--secondary1); - padding: 1rem 2rem; - } - - } - - } -} \ No newline at end of file diff --git a/src/publish/scss/ToolComponent.scss b/src/publish/scss/ToolComponent.scss deleted file mode 100644 index 626898a9..00000000 --- a/src/publish/scss/ToolComponent.scss +++ /dev/null @@ -1,153 +0,0 @@ - -@charset "utf-8"; - -#wrap { - //* tool-bar */ - #tool { - .toolBar { - position: absolute; - top: 5.9rem; - right: .9rem; - width: 3rem; - height: 41rem; - z-index: 95; - } - - .control { - position: absolute; - bottom: 1.8rem; - right: .9rem; - width: 3rem; - height: 20rem; - } - - .toolItem { - width: 100%; - display: flex; - flex-direction: column; - - &.space { - li { - margin-bottom: .5rem; - } - } - - &.zoom { - li { - height: 3rem; - - &.num { - background-color: var(--white); - color: var(--gray-scale1); - border-left: 1px solid rgba(var(--secondary6-rgb), .8); - border-right: 1px solid rgba(var(--secondary6-rgb), .8); - font-size: var(--fs-m); - } - - button { - padding-bottom: 0; - } - } - } - - li { - display: flex; - align-items: center; - justify-content: center; - width: 3rem; - height: 4.2rem; - background-color: rgba(var(--secondary6-rgb), .8); - - button { - display: flex; - flex-direction: column; - align-items: center; - justify-content: center; - width: 100%; - height: 100%; - padding-bottom: .2rem; - cursor: pointer; - text-align: center; - font-size: var(--fs-xxs); - color: var(--white); - background-repeat: no-repeat; - background-position: top left; - background-size: 3rem; - - &:hover, - &.active { - background-color: rgba(var(--primary1-rgb), .8); - } - - &::before { - content: ""; - flex-shrink: 0; - width: 3rem; - height: 3rem; - } - - &.tool01 { background-image: url(../assets/images/ico_tool01.svg); } - &.tool02 { background-image: url(../assets/images/ico_tool02.svg); } - &.tool03 { background-image: url(../assets/images/ico_tool03.svg); } - &.tool04 { background-image: url(../assets/images/ico_tool04.svg); } - &.tool05 { background-image: url(../assets/images/ico_tool05.svg); } - &.tool06 { background-image: url(../assets/images/ico_tool06.svg); } - &.tool07 { background-image: url(../assets/images/ico_tool07.svg); } - &.tool08 { background-image: url(../assets/images/ico_tool08.svg); } - - &.zoomin { background-image: url(../assets/images/ico_plus.svg); } - &.zoomout { background-image: url(../assets/images/ico_minus.svg); } - &.legend { background-image: url(../assets/images/ico_legend.svg); } - &.minimap { background-image: url(../assets/images/ico_minimap.svg); } - } - } - } - // 범례 - .legendWrap { - position: fixed; - right: 5rem; - bottom: 5rem; - - .legendList { - display: flex; - flex-direction: column; - width: 14rem; - height: auto; - border-radius: .5rem; - background-color: var(--gray-scale3); - padding: .7rem; - gap: .4rem; - - li { - display: flex; - justify-content: space-between; - align-items: center; - - &.legendItem { - padding: .5rem 0; - border-bottom: 1px solid var(--gray-scale7); - } - - .legendLabel { - display: flex; - align-items: center; - gap: .2rem; - font-size: var(--fs-s); - font-weight: var(--fw-bold); - - img { - width: 1.6rem; - height: 1.6rem; - } - } - - .legendValue { - font-size: var(--fs-s); - font-weight: var(--fw-heavy); - } - } - } - } - - } -} \ No newline at end of file diff --git a/src/publish/scss/WrapComponent.scss b/src/publish/scss/WrapComponent.scss deleted file mode 100644 index fa86d43f..00000000 --- a/src/publish/scss/WrapComponent.scss +++ /dev/null @@ -1,7 +0,0 @@ - -@charset "utf-8"; - -#wrap { - width: 100%; - min-height: 100vh; -} \ No newline at end of file