diff --git a/public/static/images/canvas/arr_btn_ico_white.svg b/public/static/images/canvas/arr_btn_ico_white.svg new file mode 100644 index 00000000..31e04787 --- /dev/null +++ b/public/static/images/canvas/arr_btn_ico_white.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/ico-flx01.svg b/public/static/images/canvas/ico-flx01.svg new file mode 100644 index 00000000..84185ff6 --- /dev/null +++ b/public/static/images/canvas/ico-flx01.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/ico-flx02.svg b/public/static/images/canvas/ico-flx02.svg new file mode 100644 index 00000000..400d9732 --- /dev/null +++ b/public/static/images/canvas/ico-flx02.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/images/canvas/ico-flx03.svg b/public/static/images/canvas/ico-flx03.svg new file mode 100644 index 00000000..44c2eeae --- /dev/null +++ b/public/static/images/canvas/ico-flx03.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/images/canvas/ico-flx04.svg b/public/static/images/canvas/ico-flx04.svg new file mode 100644 index 00000000..ae584b35 --- /dev/null +++ b/public/static/images/canvas/ico-flx04.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/main/main_background.png b/public/static/images/main/main_background.png new file mode 100644 index 00000000..95b83229 Binary files /dev/null and b/public/static/images/main/main_background.png differ diff --git a/src/components/floor-plan/CanvasFrame.jsx b/src/components/floor-plan/CanvasFrame.jsx index 7c3e6c7c..f9bee2a4 100644 --- a/src/components/floor-plan/CanvasFrame.jsx +++ b/src/components/floor-plan/CanvasFrame.jsx @@ -8,7 +8,7 @@ export default function CanvasFrame() { useEvent() return ( -
+
) diff --git a/src/components/floor-plan/CanvasMenu.jsx b/src/components/floor-plan/CanvasMenu.jsx index 4533747a..cf5ada46 100644 --- a/src/components/floor-plan/CanvasMenu.jsx +++ b/src/components/floor-plan/CanvasMenu.jsx @@ -1,11 +1,16 @@ 'use client' import { useState } from 'react' import MenuDepth01 from './MenuDepth01' +import { useRecoilState } from 'recoil' +import { modalState } from '@/store/modalAtom' import QSelectBox from '@/components/common/select/QSelectBox' +import { useMessage } from '@/hooks/useMessage' -export default function CanvasMenu({ setModalOpen }) { +export default function CanvasMenu() { + const [modalOption, setModalOption] = useRecoilState(modalState) //modal 열림닫힘 state const [menuNumber, setMenuNumber] = useState(null) const [vertical, setVertical] = useState(true) + const { getMessage } = useMessage() const SelectOption = [{ name: '瓦53A' }, { name: '瓦53A' }] const onClickNav = (number) => { setMenuNumber(number) @@ -14,83 +19,127 @@ export default function CanvasMenu({ setModalOpen }) { } } return ( -
+
  • onClickNav(0)}>
  • onClickNav(1)}>
  • onClickNav(2)}>
  • onClickNav(3)}>
  • onClickNav(4)}>
  • onClickNav(5)}>
  • onClickNav(6)}>
-
- - - -
-
- 垂直水平モード - -
-
- -
-
- - - -
-
- - 100% - -
-
- - - -
+ {menuNumber !== 6 && menuNumber !== 5 && ( + <> +
+ + + +
+
+ {getMessage('plan.mode.vertical.horizontal')} + +
+
+ +
+
+ + + +
+
+ + 100% + +
+
+ + + +
+ + )} + + {menuNumber === 5 && ( + <> +
+ + + + +
+ + )} + {menuNumber === 6 && ( + <> +
+ + +
+ + )}
-
- {menuNumber === 0 && } - {menuNumber === 1 && } +
{menuNumber === 2 && } {menuNumber === 3 && } {menuNumber === 4 && } - {menuNumber === 5 && } - {menuNumber === 6 && }
) diff --git a/src/components/floor-plan/FloorPlan.jsx b/src/components/floor-plan/FloorPlan.jsx index fecffea7..e7fe4225 100644 --- a/src/components/floor-plan/FloorPlan.jsx +++ b/src/components/floor-plan/FloorPlan.jsx @@ -1,9 +1,10 @@ 'use client' import CanvasMenu from '@/components/floor-plan/CanvasMenu' -import CanvasLayout from '@/components/floor-plan/CanvasLayout' import SettingModal01 from '@/components/floor-plan/modal/settoing01/SettingModal01' import { useState } from 'react' +import CanvasLayout from '@/components/floor-plan/CanvasLayout' +import '@/styles/contents.scss' export default function FloorPlan() { const [modalOpen, setModalOpen] = useState('option') diff --git a/src/components/floor-plan/MenuDepth01.jsx b/src/components/floor-plan/MenuDepth01.jsx index 90ba4e60..ce4bd6a4 100644 --- a/src/components/floor-plan/MenuDepth01.jsx +++ b/src/components/floor-plan/MenuDepth01.jsx @@ -1,8 +1,10 @@ 'use client' import { ToggleonMouse } from '@/components/header/Header' +import { useMessage } from '@/hooks/useMessage' export default function MenuDepth01() { + const { getMessage } = useMessage() return (
    @@ -30,7 +32,7 @@ export default function MenuDepth01() {
  • ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}> - +
  • ToggleonMouse(e, 'add', 'ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'ul')}> diff --git a/src/components/floor-plan/modal/settoing01/FirstOption.jsx b/src/components/floor-plan/modal/settoing01/FirstOption.jsx index e91f81ab..cddab6c0 100644 --- a/src/components/floor-plan/modal/settoing01/FirstOption.jsx +++ b/src/components/floor-plan/modal/settoing01/FirstOption.jsx @@ -1,9 +1,11 @@ import { useRecoilState } from 'recoil' import { settingModalFirstOptionsState } from '@/store/settingAtom' +import { useMessage } from '@/hooks/useMessage' export default function FirstOption() { const [settingsModalOptions, setSettingModalOptions] = useRecoilState(settingModalFirstOptionsState) const { option1, option2 } = settingsModalOptions + const { getMessage } = useMessage() const onClickOption = (option) => { option.selected = !option.selected @@ -13,23 +15,23 @@ export default function FirstOption() { return ( <>
    -

    ※図面に表示する項目をクリックすると適用されます。

    +

    {getMessage('modal.canvas.setting.first.option.info')}

    {settingsModalOptions?.option1?.map((item) => ( ))}
    -

    画面表示

    +

    {getMessage('modal.canvas.setting.first.option.display')}

    {settingsModalOptions?.option2?.map((item) => ( ))}
    diff --git a/src/components/floor-plan/modal/settoing01/SettingModal01.jsx b/src/components/floor-plan/modal/settoing01/SettingModal01.jsx index 5a79c795..6c9969d2 100644 --- a/src/components/floor-plan/modal/settoing01/SettingModal01.jsx +++ b/src/components/floor-plan/modal/settoing01/SettingModal01.jsx @@ -4,6 +4,7 @@ import { useState } from 'react' import FirstOption from './FirstOption' import WithDraggable from '@/components/common/draggable/withDraggable' import SecondOption from '@/components/floor-plan/modal/settoing01/SecondOption' +import { useMessage } from '@/hooks/useMessage' export default function SettingModal01({ modalOpen, setModalOpen }) { const [buttonAct, setButtonAct] = useState(1) @@ -15,12 +16,13 @@ export default function SettingModal01({ modalOpen, setModalOpen }) { setClose(false) }, 180) } + const { getMessage } = useMessage() return (
    -

    Canvas設定

    +

    {getMessage('modal.canvas.setting')}

    @@ -28,11 +30,11 @@ export default function SettingModal01({ modalOpen, setModalOpen }) {
    {buttonAct === 1 && } diff --git a/src/components/header/Header.jsx b/src/components/header/Header.jsx index 028ef6ed..f81a0ca7 100644 --- a/src/components/header/Header.jsx +++ b/src/components/header/Header.jsx @@ -2,6 +2,7 @@ import Link from 'next/link' import QSelectBox from '@/components/common/select/QSelectBox' import { usePathname } from 'next/navigation' +import { useMessage } from '@/hooks/useMessage' export const ToggleonMouse = (e, act, target) => { const listWrap = e.target.closest(target) @@ -19,6 +20,7 @@ export const ToggleonMouse = (e, act, target) => { } export default function Header() { + const { getMessage } = useMessage() const pathName = usePathname() if (pathName.includes('login') || pathName.includes('join')) { return null @@ -39,28 +41,28 @@ export default function Header() { onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')} > - ホームへ + {getMessage('header.menus.home')}
  • ToggleonMouse(e, 'add', 'nav > ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')} > - +
    • ToggleonMouse(e, 'add', 'li > ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} > - 新規物件登録 + {getMessage('header.menus.management.stuff')}
    • ToggleonMouse(e, 'add', 'li > ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} > - モノ/図面管理 + {getMessage('header.menus.management.plan')}
    • @@ -69,28 +71,28 @@ export default function Header() { onMouseEnter={(e) => ToggleonMouse(e, 'add', 'nav > ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'nav > ul')} > - +
    • ToggleonMouse(e, 'add', 'li > ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} > - お知らせ + {getMessage('header.menus.community.notice')}
    • ToggleonMouse(e, 'add', 'li > ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} > - FAQ + {getMessage('header.menus.community.faq')}
    • ToggleonMouse(e, 'add', 'li > ul')} onMouseLeave={(e) => ToggleonMouse(e, 'remove', 'li > ul')} > - 素材のダウンロード + {getMessage('header.menus.community.archive')}
    @@ -102,13 +104,13 @@ export default function Header() {
- +
- +
diff --git a/src/locales/ja.json b/src/locales/ja.json index ecc55327..50172c83 100644 --- a/src/locales/ja.json +++ b/src/locales/ja.json @@ -1,6 +1,70 @@ { "hi": "こんにちは", "welcome": "환영합니다. {0}님", + "header.menus.home": "ホームへv", + "header.menus.management": "物品及び図面管理", + "header.menus.management.stuff": "新規物件登録", + "header.menus.management.plan": "モノ/図面管理", + "header.menus.community": "コミュニティ", + "header.menus.community.notice": "お知らせ", + "header.menus.community.faq": "FAQ", + "header.menus.community.archive": "素材のダウンロード", + "header.logout": "ログアウト", + "header.go": "移動", + "header.online.warranty.system": "オンライン保証シ", + "header.stem": "ステム", + "plan.menu.plan.drawing": "도면작성", + "plan.menu.placement.surface.initial.setting": "配置面 初期設定", + "plan.menu.root.cover": "지붕덮개", + "plan.menu.root.cover.outline.drawing": "외벽선 그리기", + "modal.cover.outline.drawing": "외벽선 그리기", + "modal.cover.outline": "외벽선", + "modal.cover.outline.right.angle": "직각", + "modal.cover.outline2": "이구배", + "modal.cover.outline.angle": "각도", + "modal.cover.outline.diagonal": "대각선", + "modal.cover.outline.setting": "설정", + "modal.cover.outline.length": "길이", + "modal.cover.outline.arrow": "방향(화살표)", + "modal.cover.outline.fix": "외벽선 확정", + "plan.menu.root.cover.roof.setting": "屋根形状設定", + "plan.menu.root.cover.roof.edit": "지붕형상 편집", + "plan.menu.root.cover.sub.line": "補助線を描", + "plan.menu.placement.surface": "配置面", + "plan.menu.placement.surface.drawing": "배치면 그리기", + "plan.menu.placement.surface.surface": "면형상 배치", + "plan.menu.placement.surface.object": "오브젝트 배치", + "plan.menu.module.circuit.setting": "モジュール回路構成", + "plan.menu.module.circuit.setting.default": "기본 설정", + "plan.menu.module.circuit.setting.circuit.trestle.setting": "회로 및 가대 설정", + "plan.menu.estimate": "見積", + "plan.menu.estimate.roof.alloc": "屋根面の割り当て", + "plan.menu.estimate.save": "保存", + "plan.menu.estimate.reset": "初期化", + "plan.menu.estimate.copy": "コピー", + "plan.menu.simulation": "発展シミュレーション", + "plan.menu.simulation.excel": "Excel", + "plan.menu.simulation.pdf": "PDF", + "plan.mode.vertical.horizontal": "垂直水平モード", + "modal.canvas.setting": "Canvas設定", + "modal.canvas.setting.display": "ディスプレイ設定", + "modal.canvas.setting.font.plan": " フォントと図面サイズの設定", + "modal.canvas.setting.first.option.info": "※図面に表示する項目をクリックすると適用されます。", + "modal.canvas.setting.first.option.alloc": "할당표시", + "modal.canvas.setting.first.option.outline": "외벽선표시", + "modal.canvas.setting.first.option.plan": "도면표시", + "modal.canvas.setting.first.option.roof.line": "지붕선표시", + "modal.canvas.setting.first.option.grid": "그리드표시", + "modal.canvas.setting.first.option.circuit.num": "회로 번호 표시", + "modal.canvas.setting.first.option.word": "문자 표시", + "modal.canvas.setting.first.option.trestle": "가대 표시", + "modal.canvas.setting.first.option.flow": "흐름방향 표시", + "modal.canvas.setting.first.option.total": "집계표 표시", + "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시", + "modal.canvas.setting.first.option.display": "画面表示", + "modal.canvas.setting.first.option.border": "ボーダーのみ", + "modal.canvas.setting.first.option.line": "ラインハッチ", + "modal.canvas.setting.first.option.all": "All painted", "common.message.no.data": "No data", "common.message.no.dataDown": "ダウンロードするデータがありません", "common.message.noData": "表示するデータがありません", @@ -88,18 +152,14 @@ "common.message.writeToConfirm": "作成解除を実行しますか？", "common.message.password.init.success": "パスワード [{0}] に初期化されました。", "common.message.no.edit.save": "この文書は変更できません。", - "common.require": "필수", - "site.name": "Q.CAST III", "site.sub_name": "태양광 발전 시스템 도면관리 사이트", - "login": "로그인", "login.init_password.btn": "비밀번호 초기화 ja", "login.init_password.title": "비밀번호 초기화", "login.init_password.sub_title": "비밀번호를 초기화할 아이디와 이메일 주소를 입력해 주세요.", "login.init_password.complete_message": "비밀번호가 초기화 되었습니다. 초기화된 비밀번호는 아이디와 같습니다.", - "join.title": "Q.CAST3 로그인ID 발행 신청", "join.sub1.title": "판매대리점 정보", "join.sub1.comment": "※ 등록되는 리셀러의 회사 이름을 입력하십시오. (2차점은 「○○판매주식회사(2차점：××설비주식회사)」로 기입해 주세요.)", @@ -141,7 +201,6 @@ "join.complete.contents": "※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.", "join.complete.email_comment": "담당자 이메일 주소", "join.complete.email": "test@naver.com", - "stuff.gridHeader.lastEditDatetime": "갱신일시", "stuff.gridHeader.objectNo": "물건번호", "stuff.gridHeader.planTotCnt": "플랜 수", diff --git a/src/locales/ko.json b/src/locales/ko.json index 21b0115e..f519d872 100644 --- a/src/locales/ko.json +++ b/src/locales/ko.json @@ -1,6 +1,70 @@ { "hi": "안녕하세요", "welcome": "환영합니다. {0}님", + "header.menus.home": "Home", + "header.menus.management": "물건 및 도면 관리", + "header.menus.management.stuff": "신규 물건 등록", + "header.menus.management.plan": "사물/도면 관리", + "header.menus.community": "커뮤니티", + "header.menus.community.notice": "공지", + "header.menus.community.faq": "FAQ", + "header.menus.community.archive": "자료 다운로드", + "header.logout": "로그아웃", + "header.go": "이동", + "header.online.warranty.system": "온라인 보증 시스템", + "header.stem": "Stem", + "plan.menu.plan.drawing": "도면작성", + "plan.menu.placement.surface.initial.setting": "배치면 초기 설정", + "plan.menu.root.cover": "지붕덮개", + "plan.menu.root.cover.outline.drawing": "외벽선 그리기", + "modal.cover.outline.drawing": "외벽선 그리기", + "modal.cover.outline": "외벽선", + "modal.cover.outline.right.angle": "직각", + "modal.cover.outline2": "이구배", + "modal.cover.outline.angle": "각도", + "modal.cover.outline.diagonal": "대각선", + "modal.cover.outline.setting": "설정", + "modal.cover.outline.length": "길이", + "modal.cover.outline.arrow": "방향(화살표)", + "modal.cover.outline.fix": "외벽선 확정", + "plan.menu.root.cover.roof.setting": "지붕형상 설정", + "plan.menu.root.cover.roof.edit": "지붕형상 편집", + "plan.menu.root.cover.sub.line": "보조선 그리기", + "plan.menu.placement.surface": "배치면", + "plan.menu.placement.surface.drawing": "배치면 그리기", + "plan.menu.placement.surface.surface": "면형상 배치", + "plan.menu.placement.surface.object": "오브젝트 배치", + "plan.menu.module.circuit.setting": "모듈,회로 구성", + "plan.menu.module.circuit.setting.default": "기본 설정", + "plan.menu.module.circuit.setting.circuit.trestle.setting": "회로 및 가대 설정", + "plan.menu.estimate": "견적서", + "plan.menu.estimate.roof.alloc": "지붕면 할당", + "plan.menu.estimate.save": "저장", + "plan.menu.estimate.reset": "초기화", + "plan.menu.estimate.copy": "복사", + "plan.menu.simulation": "발전 시뮬레이션", + "plan.menu.simulation.excel": "Excel", + "plan.menu.simulation.pdf": "PDF", + "plan.mode.vertical.horizontal": "수직 수평 모드", + "modal.canvas.setting": "Canvas 설정", + "modal.canvas.setting.display": "디스플레이 설정", + "modal.canvas.setting.font.plan": "글꼴 및 도면 크기 설정", + "modal.canvas.setting.first.option.info": "※도면에 표시하는 항목을 클릭하면 적용됩니다.", + "modal.canvas.setting.first.option.alloc": "할당표시", + "modal.canvas.setting.first.option.outline": "외벽선표시", + "modal.canvas.setting.first.option.plan": "도면표시", + "modal.canvas.setting.first.option.roof.line": "지붕선표시", + "modal.canvas.setting.first.option.grid": "그리드표시", + "modal.canvas.setting.first.option.circuit.num": "회로 번호 표시", + "modal.canvas.setting.first.option.word": "문자 표시", + "modal.canvas.setting.first.option.trestle": "가대 표시", + "modal.canvas.setting.first.option.flow": "흐름방향 표시", + "modal.canvas.setting.first.option.total": "집계표 표시", + "modal.canvas.setting.first.option.corridor.dimension": "복도치수 표시", + "modal.canvas.setting.first.option.display": "화면 표시", + "modal.canvas.setting.first.option.border": "테두리만", + "modal.canvas.setting.first.option.line": "라인해치", + "modal.canvas.setting.first.option.all": "All painted", "common.message.no.data": "No data", "common.message.no.dataDown": "No data to download", "common.message.noData": "No data to display", @@ -88,18 +152,14 @@ "common.message.writeToConfirm": "작성 해제를 실행하시겠습니까?", "common.message.password.init.success": "비밀번호 [{0}]로 초기화 되었습니다.", "common.message.no.edit.save": "This document cannot be changed.", - "common.require": "필수", - "site.name": "Q.CAST III", "site.sub_name": "태양광 발전 시스템 도면관리 사이트", - "login": "로그인", "login.init_password.btn": "비밀번호 초기화", "login.init_password.title": "비밀번호 초기화", "login.init_password.sub_title": "비밀번호를 초기화할 아이디와 이메일 주소를 입력해 주세요.", "login.init_password.complete_message": "비밀번호가 초기화 되었습니다. 초기화된 비밀번호는 아이디와 같습니다.", - "join.title": "Q.CAST3 로그인ID 발행 신청", "join.sub1.title": "판매대리점 정보", "join.sub1.comment": "※ 등록되는 리셀러의 회사 이름을 입력하십시오. (2차점은 「○○판매주식회사(2차점：××설비주식회사)」로 기입해 주세요.)", @@ -141,7 +201,6 @@ "join.complete.contents": "※ 신청한 ID가 승인되면, 담당자 정보에 입력한 이메일 주소로 로그인 관련 안내 메일이 전송됩니다.", "join.complete.email_comment": "담당자 이메일 주소", "join.complete.email": "test@naver.com", - "stuff.gridHeader.lastEditDatetime": "갱신일시", "stuff.gridHeader.objectNo": "물건번호", "stuff.gridHeader.planTotCnt": "플랜 수", diff --git a/src/store/canvasAtom.js b/src/store/canvasAtom.js index 404b9106..4f274620 100644 --- a/src/store/canvasAtom.js +++ b/src/store/canvasAtom.js @@ -29,8 +29,8 @@ export const fontSizeState = atom({ export const canvasSizeState = atom({ key: 'canvasSize', default: { - vertical: 1500, - horizontal: 1500, + vertical: 1000, + horizontal: 1600, }, }) diff --git a/src/store/settingAtom.js b/src/store/settingAtom.js index 0ab99ea1..3f91f509 100644 --- a/src/store/settingAtom.js +++ b/src/store/settingAtom.js @@ -4,22 +4,22 @@ export const settingModalFirstOptionsState = atom({ key: 'settingModalFirstOptions', default: { option1: [ - { id: 1, name: '割り当て表示', selected: false }, - { id: 2, name: '実寸表示', selected: false }, - { id: 3, name: '図面表示', selected: false }, - { id: 4, name: '寸法表示なし', selected: false }, - { id: 5, name: 'グリッド表示', selected: false }, - { id: 6, name: '架台表示', selected: false }, - { id: 7, name: '文字表示', selected: false }, - { id: 8, name: '座標表示', selected: false }, - { id: 9, name: '流れ方向表示', selected: false }, - { id: 10, name: '図面切替表示', selected: false }, - { id: 11, name: 'ü廊下寸法表示', selected: false }, + { id: 1, name: 'modal.canvas.setting.first.option.alloc', selected: false }, + { id: 2, name: 'modal.canvas.setting.first.option.outline', selected: false }, + { id: 3, name: 'modal.canvas.setting.first.option.plan', selected: false }, + { id: 4, name: 'modal.canvas.setting.first.option.roof.line', selected: false }, + { id: 5, name: 'modal.canvas.setting.first.option.grid', selected: false }, + { id: 6, name: 'modal.canvas.setting.first.option.circuit.num', selected: false }, + { id: 7, name: 'modal.canvas.setting.first.option.word', selected: false }, + { id: 8, name: 'modal.canvas.setting.first.option.trestle', selected: false }, + { id: 9, name: 'modal.canvas.setting.first.option.flow', selected: false }, + { id: 10, name: 'modal.canvas.setting.first.option.total', selected: false }, + { id: 11, name: 'modal.canvas.setting.first.option.corridor.dimension', selected: false }, ], option2: [ - { id: 1, name: 'ボーダーのみ', selected: false }, - { id: 2, name: 'ラインハッチ', selected: false }, - { id: 3, name: 'All painted', selected: false }, + { id: 1, name: 'modal.canvas.setting.first.option.border', selected: false }, + { id: 2, name: 'modal.canvas.setting.first.option.line', selected: false }, + { id: 3, name: 'modal.canvas.setting.first.option.all', selected: false }, ], }, dangerouslyAllowMutability: true, diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss index b9dbe68e..216df145 100644 --- a/src/styles/_contents.scss +++ b/src/styles/_contents.scss @@ -131,7 +131,7 @@ transition: all .17s ease-in-out; &.btn01 { - background-image: url(../../public/static/images/canvas/side_icon01.svg); + background-image: url(../../public/static/images/canvas/side_icon03.svg); } &.btn02 { @@ -139,7 +139,7 @@ } &.btn03 { - background-image: url(../../public/static/images/canvas/side_icon03.svg); + background-image: url(../../public/static/images/canvas/side_icon01.svg); } &.btn04 { @@ -176,6 +176,39 @@ } } + .ico-btn-from { + display: flex; + align-items: center; + gap: 5px; + + button { + .ico { + display: block; + width: 14px; + height: 14px; + background-repeat: no-repeat; + background-position: center; + background-size: contain; + + &.ico01 { + background-image: url(../../public/static/images/canvas/ico-flx01.svg); + } + + &.ico02 { + background-image: url(../../public/static/images/canvas/ico-flx02.svg); + } + + &.ico03 { + background-image: url(../../public/static/images/canvas/ico-flx03.svg); + } + + &.ico04 { + background-image: url(../../public/static/images/canvas/ico-flx04.svg); + } + } + } + } + .vertical-horizontal { display: flex; min-width: 170px; @@ -200,6 +233,13 @@ font-weight: 400; color: #fff; padding: 0 7.5px; + transition: all .17s ease-in-out; + } + + &.on { + button { + background-color: #1083E3; + } } } diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index 7dc13a69..30289000 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -149,7 +149,7 @@ button { // button .btn-frame { display: inline-block; - padding: 0 10px; + padding: 0 9px; height: 34px; line-height: 34px; border-radius: 2px; @@ -201,6 +201,7 @@ button { } } + &:hover, &.act { background-color: #1083E3; border: 1px solid #1083E3; @@ -212,6 +213,20 @@ button { display: block; width: 100%; } + + &.ico-flx { + display: flex; + align-items: center; + + .ico { + margin-right: 10px; + } + + &:hover, + &.act { + font-weight: 400; + } + } } // select @@ -293,6 +308,16 @@ button { } // input +.form-input { + label { + display: block; + color: #aaa; + font-size: 12px; + font-weight: 500; + margin-bottom: 10px; + } +} + input[type=text] { &.input-origin { display: inline-block; @@ -305,9 +330,15 @@ input[type=text] { font-weight: 500; font-family: 'Pretendard', sans-serif; padding: 0 10px; + letter-spacing: 0px; &::placeholder { font-size: 12px; + letter-spacing: 0px; + } + + &.block { + width: 100%; } } } @@ -428,4 +459,24 @@ input[type=text] { } } } + + &.dark { + text-align: center; + background-color: #272727; + border: 1px solid #484848; + + span { + color: #Fff; + + &:after { + background: url(../../public/static/images/canvas/arr_btn_ico_white.svg) no-repeat center; + } + } + + &:hover, + &.act { + background-color: #1083E3; + border: 1px solid #1083E3; + } + } } \ No newline at end of file diff --git a/src/styles/common.scss b/src/styles/common.scss index 8152784c..b9a87417 100644 --- a/src/styles/common.scss +++ b/src/styles/common.scss @@ -1,2 +1,3 @@ @import 'fonts.scss'; -@import 'reset.scss'; \ No newline at end of file +@import 'reset.scss'; +@import '_layout.scss'; diff --git a/src/styles/contents.scss b/src/styles/contents.scss new file mode 100644 index 00000000..90dfa532 --- /dev/null +++ b/src/styles/contents.scss @@ -0,0 +1,2 @@ +@import '_contents.scss'; +@import '_modal.scss'; \ No newline at end of file