diff --git a/public/static/images/canvas/grid_option_arr.svg b/public/static/images/canvas/grid_option_arr.svg new file mode 100644 index 0000000..c2c6cbb --- /dev/null +++ b/public/static/images/canvas/grid_option_arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/main/id_delete.svg b/public/static/images/main/id_delete.svg new file mode 100644 index 0000000..3e5d611 --- /dev/null +++ b/public/static/images/main/id_delete.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/main/login-arr.svg b/public/static/images/main/login-arr.svg new file mode 100644 index 0000000..7de03bc --- /dev/null +++ b/public/static/images/main/login-arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/main/login-logo.svg b/public/static/images/main/login-logo.svg new file mode 100644 index 0000000..eb5d29f --- /dev/null +++ b/public/static/images/main/login-logo.svg @@ -0,0 +1,26 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/public/static/images/main/login_bg.png b/public/static/images/main/login_bg.png new file mode 100644 index 0000000..e78e68d Binary files /dev/null and b/public/static/images/main/login_bg.png differ diff --git a/public/static/images/main/login_id.svg b/public/static/images/main/login_id.svg new file mode 100644 index 0000000..74af51d --- /dev/null +++ b/public/static/images/main/login_id.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/main/login_password.svg b/public/static/images/main/login_password.svg new file mode 100644 index 0000000..ac4757a --- /dev/null +++ b/public/static/images/main/login_password.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/public/static/images/main/password_hidden.svg b/public/static/images/main/password_hidden.svg new file mode 100644 index 0000000..28aeac7 --- /dev/null +++ b/public/static/images/main/password_hidden.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/static/images/main/password_visible.svg b/public/static/images/main/password_visible.svg new file mode 100644 index 0000000..dcbc2a9 --- /dev/null +++ b/public/static/images/main/password_visible.svg @@ -0,0 +1,10 @@ + + + + + + + + + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 0fbce07..356b647 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -2,6 +2,9 @@ import CanvasLayout from '@/components/canvas/CanvasLayout' import CanvasMenu from '@/components/canvas/CanvasMenu' +import GridCopy from '@/components/canvas/modal/gridoption/GridCopy' +import GridMove from '@/components/canvas/modal/gridoption/GridMove' +import GridOption from '@/components/canvas/modal/gridoption/GridOption' import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall' import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01' import Header from '@/components/layout/Header' @@ -21,7 +24,10 @@ export default function CanvasPage() { {modalOption.option && } - {modalOption.outerwall && } + {/* {modalOption.outerwall && } 확인용 숨김처리*/} + {modalOption.gridoption && } + {modalOption.gridcopy && } + {modalOption.gridmove && } diff --git a/src/app/inputwrap/page.jsx b/src/app/inputwrap/page.jsx index 3e9480a..b37232f 100644 --- a/src/app/inputwrap/page.jsx +++ b/src/app/inputwrap/page.jsx @@ -186,6 +186,28 @@ export default function InputWrapPage (){ +
+
+

date-picker-wrap

+
+ check +
+
+ + +
+
+ + +
+
+ + +
+
+
+
+
) } \ No newline at end of file diff --git a/src/app/login/page.jsx b/src/app/login/page.jsx new file mode 100644 index 0000000..549d960 --- /dev/null +++ b/src/app/login/page.jsx @@ -0,0 +1,50 @@ +'use client' + +import '@/styles/style.scss' +import Image from 'next/image' +import Link from 'next/link' +import { useState } from 'react' + +export default function LoginPage(){ + const [passwordVisible, setPasswordVisible] = useState(false); + return( +
+
+ + react + +
+
+ Q.CAST III + 太陽光発電システム図面管理サイト +
+
+
+ + +
+
+ + +
+
+ + +
+
+ +
+
+ パスワードの初期化 +
+
+
+
+ ※当サイトをご利用の際は、事前申請が必要です。
+ IDがない方は ID申請 クリックしてください。 +
+
+
COPYRIGHT©2024 Hanwha Japan All Rights Reserved.
+
+ ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/gridoption/GridCopy.jsx b/src/components/canvas/modal/gridoption/GridCopy.jsx new file mode 100644 index 0000000..c7374c3 --- /dev/null +++ b/src/components/canvas/modal/gridoption/GridCopy.jsx @@ -0,0 +1,54 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; +import { modalState } from "@/store/modalAtom"; +import { useState } from "react"; +import { useRecoilState } from "recoil"; + +export default function GridCopy() { + const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state + const [close, setClose] = useState(false) + + const HandleClickClose = () => { + setClose(true) + setTimeout(() => { + setModalOption({...modalOption, gridcopy: false}) + setClose(false); + }, 180) + } + + + return( + +
+
+

グリッドのコピー

+ +
+
+
+ 間隔を設定し、コピー方向を選択します +
+
+
+
+ 長さ +
+ +
+ mm +
+
+ + + + +
+
+
+
+ +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/gridoption/GridMove.jsx b/src/components/canvas/modal/gridoption/GridMove.jsx new file mode 100644 index 0000000..6c4e4ee --- /dev/null +++ b/src/components/canvas/modal/gridoption/GridMove.jsx @@ -0,0 +1,66 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; +import { modalState } from "@/store/modalAtom"; +import { useState } from "react"; +import { useRecoilState } from "recoil"; + +export default function GridMove() { + const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state + const [close, setClose] = useState(false) + + const HandleClickClose = () => { + setClose(true) + setTimeout(() => { + setModalOption({...modalOption, gridmove: false}) + setClose(false); + }, 180) + } + + + return( + +
+
+

グリッドのコピー

+ +
+
+
+ 移動する方向を入力してください +
+
+
+ + +
+
+
+

長さ

+
+
+ +
+ mm +
+
+
+ +
+ mm +
+
+
+ + + + +
+
+
+
+ +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/gridoption/GridOption.jsx b/src/components/canvas/modal/gridoption/GridOption.jsx new file mode 100644 index 0000000..13c230a --- /dev/null +++ b/src/components/canvas/modal/gridoption/GridOption.jsx @@ -0,0 +1,88 @@ +import WithDraggable from "@/components/common/draggable/withDraggable"; +import Qselect from "@/components/common/select/Qselect"; +import { modalState } from "@/store/modalAtom"; +import { useState } from "react"; +import { useRecoilState } from "recoil"; + +export default function GridOption() { + const [modalOption, setModalOption] = useRecoilState(modalState); //modal 열림닫힘 state + const [close, setClose] = useState(false) + + const SelectOption = [ + {name: 'オンライン保証シ',}, {name: 'ステム'} + ] + + const HandleClickClose = () => { + setClose(true) + setTimeout(() => { + setModalOption({...modalOption, gridoption: false}) + setClose(false); + }, 180) + } + + + return( + +
+
+

ドット・ライングリッドの設定

+ +
+
+
+
+ + +
+
+ + +
+
+
+
+
+ + +
+
+ 横間隔 +
+ +
+ mm +
+
+ 横間隔 +
+ +
+ mm +
+
+
+
+ + +
+
+ 横間隔 +
+ +
+ mm +
+
+ +
+
+
+
+ + +
+
+
+ + ) +} \ No newline at end of file diff --git a/src/components/canvas/modal/settoing01/SecondOption.jsx b/src/components/canvas/modal/settoing01/SecondOption.jsx index 0340605..1adf131 100644 --- a/src/components/canvas/modal/settoing01/SecondOption.jsx +++ b/src/components/canvas/modal/settoing01/SecondOption.jsx @@ -42,8 +42,9 @@ export default function SecondOption (props){ - diff --git a/src/components/canvas/modal/settoing01/SettingModal01.jsx b/src/components/canvas/modal/settoing01/SettingModal01.jsx index 3e9150b..44347d6 100644 --- a/src/components/canvas/modal/settoing01/SettingModal01.jsx +++ b/src/components/canvas/modal/settoing01/SettingModal01.jsx @@ -51,7 +51,7 @@ export default function SettingModal01 (){ className={`btn-frame modal ${buttonAct === 2 ? 'act' : ''}`} onClick={() => setButtonAct(2)} > - フォント/図面サイズ設定 + フォントと図面サイズの設定 ))} diff --git a/src/components/publishpage/PublishPage.jsx b/src/components/publishpage/PublishPage.jsx index afdfe53..e88d2d5 100644 --- a/src/components/publishpage/PublishPage.jsx +++ b/src/components/publishpage/PublishPage.jsx @@ -90,6 +90,13 @@ export default function PublishPage() { 2024-09-11 + + LoginPage + + LoginPage + + 2024-09-23 + 물품 및 도면 관리 diff --git a/src/store/modalAtom.js b/src/store/modalAtom.js index a7f2173..3728655 100644 --- a/src/store/modalAtom.js +++ b/src/store/modalAtom.js @@ -5,6 +5,9 @@ export const modalState = atom({ default: { option: true, outerwall: true, + gridoption: true, + gridcopy: true, + gridmove: true, }, }) diff --git a/src/styles/_inputcommon.scss b/src/styles/_inputcommon.scss index 78534fd..f1b6aab 100644 --- a/src/styles/_inputcommon.scss +++ b/src/styles/_inputcommon.scss @@ -40,6 +40,16 @@ display: flex; align-items: center; } + &.pop{ + .input-wrap{ + .form-input{ + background-color: #272727; + span{ + color: #fff; + } + } + } + } } .title{ max-width: 1600px; diff --git a/src/styles/_main.scss b/src/styles/_main.scss index 29bdec1..334a048 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -358,4 +358,200 @@ margin-bottom: 0; } } +} + +// loginpage +.login-wrap{ + position: relative; + width: 100%; + min-height: 100vh; + display: flex; + flex-direction: column; + justify-content: center; + background: url(../../public/static/images/main/login_bg.png) no-repeat center; + background-size: cover; + .login-inner{ + max-width: 500px; + width: 100%; + margin: 0 auto; + .login-logo{ + display: block; + margin-bottom: 25px; + } + .login-input-frame{ + padding: 40px 50px; + border-radius: 6px; + background: rgba(255, 255, 255, 0.97); + box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); + .login-frame-tit{ + font-size: 18px; + color: #364864; + font-weight: 400; + padding-bottom: 30px; + border-bottom: 1px solid #E5E9EF; + span{ + display: block; + font-weight: 600; + margin-bottom: 5px; + } + } + .login-input-wrap{ + margin-top: 30px; + .login-area{ + position: relative; + display: flex; + align-items: center; + border: 1px solid #E5E9EF; + height: 45px; + padding-left: 40px; + padding-right: 15px; + margin-bottom: 15px; + .login-input{ + flex: 1; + height: 100%; + background-color: transparent; + font-size: 13px; + font-weight: 400; + color: #D1D7E0; + &::placeholder{ + color: #D1D7E0; + } + } + &::before{ + content: ''; + position: absolute; + top: 50%; + left: 15px; + transform: translateY(-50%); + width: 10px; + height: 12px; + background-size: cover; + } + button{ + width: 20px; + height: 100%; + background-repeat: no-repeat; + background-position: center; + } + &.id{ + &::before{ + background: url(../../public/static/images/main/login_id.svg)no-repeat center; + } + .id-delete{ + background-image: url(../../public/static/images/main/id_delete.svg); + background-size: 17px 17px; + } + } + &.password{ + margin-bottom: 20px; + &::before{ + background: url(../../public/static/images/main/login_password.svg)no-repeat center; + } + .password-hidden{ + background-image: url(../../public/static/images/main/password_hidden.svg); + background-size: 19px 13px; + &.visible{ + background-image: url(../../public/static/images/main/password_visible.svg); + } + } + } + } + .login-btn-box{ + margin-bottom: 20px; + .login-btn{ + display: block; + width: 100%; + height: 45px; + background-color: #5C6773; + color: #fff; + font-size: 15px; + font-weight: 600; + border-radius: 4px; + transition: background .15s ease-in-out; + &:hover{ + background-color: #717e8d; + } + } + } + .reset-password{ + width: 100%; + text-align: center; + a{ + position: relative; + font-size: 13px; + color: #364864; + font-weight: 400; + padding-right: 16px; + &::before{ + content: ''; + position: absolute; + top: calc(50% + 1px); + right: 0; + transform: translateY(-50%); + width: 6px; + height: 8px; + background: url(../../public/static/images/main/login-arr.svg)no-repeat center; + } + } + } + } + } + .login-guide-wrap{ + position: relative; + margin-left: 10px; + margin-top: 30px; + padding-left: 15px; + font-size: 13px; + color: #fff; + line-height: 24px; + a{ + color: #fff; + font-weight: 600; + text-decoration: underline; + } + span{ + position: absolute; + top: 0; + left: 0; + } + } + } + .login-copyright{ + position: absolute; + bottom: 40px; + left: 50%; + transform: translateX(-50%); + font-size: 11px; + color: #fff; + font-weight: 500; + } +} + +.d-check-box{ + &.login{ + margin-bottom: 25px; + label{ + padding-left: 20px; + color: #364864; + &:before{ + width: 22px; + height: 22px; + top: -1px; + border-color: #A8B6C7; + border-radius: 3px; + transition: background .05s ease-in-out; + } + } + } + input[type=checkbox]:checked + label::before{ + border-color: #A8B6C7; + background-color: #A8B6C7; + } + input[type=checkbox]:checked + label::after{ + border-color: #fff; + width: 7px; + height: 11px; + top: -2px; + left: 1px; + } } \ No newline at end of file diff --git a/src/styles/_modal.scss b/src/styles/_modal.scss index d623e02..cfd5582 100644 --- a/src/styles/_modal.scss +++ b/src/styles/_modal.scss @@ -12,7 +12,7 @@ top: 200px; right: 100px; width: 100%; - min-width: 380px; + min-width: 300px; max-width: fit-content; height: -webkit-fit-content; height: -moz-fit-content; @@ -22,11 +22,14 @@ background-color: #272727; z-index: 9999999; &.sm{ - max-width: 550px; + max-width: 580px; } &.ssm{ max-width: 380px; } + &.xm{ + max-width: 300px; + } &.mount{ animation: mountpop .17s ease-in-out forwards; } @@ -109,4 +112,149 @@ } } } +} + +.adsorption-point{ + display: flex; + align-items: center; + background-color: #3A3A3A; + border-radius: 3px; + padding-left: 11px; + overflow: hidden; + transition: all 0.17s ease-in-out; + span{ + font-size: 12px; + color: #898989; + } + i{ + display: flex; + align-items: center; + padding: 0 7px; + margin-left: auto; + height: 100%; + font-size: 13px; + color: #898989; + } + &.act{ + i{ + color: #fff; + background-color: #1083E3; + } + } +} + +// grid-option +.grid-check-form{ + display: flex; + align-items: center; + gap: 15px; + padding-bottom: 15px; + border-bottom: 1px solid #3C3C3C; +} +.grid-option-wrap{ + padding: 15px 0; + border-bottom: 1px solid #3C3C3C; + .grid-option-box{ + display: flex; + align-items: center; + background-color: #3D3D3D; + border-radius: 2px; + padding: 10px; + gap: 20px; + margin-bottom: 5px; + .grid-input-form{ + display: flex; + align-items: center; + span{ + font-size: 12px; + color: #fff; + font-weight: 500; + } + .input-grid{ + width: 63px; + input{ + width: 100%; + } + } + } + &:last-child{ + margin-bottom: 0; + } + } +} +.grid-select{ + flex: 1; + .sort-select{ + width: 100%; + background-color: #313131; + } +} +.grid-btn-wrap{ + padding-top: 15px; + text-align: right; + button{ + padding: 0 20px; + } +} + +// grid copy +.grid-option-tit{ + font-size: 12px; + color: #fff; + font-weight: 400; + padding-bottom: 15px; + border-bottom: 1px solid #3C3C3C; +} +.grid-direction{ + display: flex; + align-items: center; + gap: 5px; +} +.direction{ + width: 22px; + height: 22px; + background-color: #757575; + background-image: url(../../public/static/images/canvas/grid_option_arr.svg); + background-repeat: no-repeat; + background-position: center; + background-size: 16px 15px; + border-radius: 50%; + transition: all .15s ease-in-out; + &.down{transform: rotate(180deg);} + &.left{transform: rotate(-90deg);} + &.right{transform: rotate(90deg);} + &:hover, + &.act{ + background-color: #1083E3; + } +} + +// grid-move +.move-form{ + p{ + font-size: 12px; + color: #fff; + font-weight: 500; + } +} +.input-move-wrap{ + display: flex; + align-items: center; + gap: 5px; + span{ + color: #fff; + font-size: 12px; + } + .input-move{ + width: 148px; + input{ + width: 100%; + } + } +} +.direction-move-wrap{ + flex: none; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 10px; } \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index d4f4ed2..7e36fd7 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -338,6 +338,7 @@ button{ margin-bottom: 10px; } } +input[type=number], input[type=text]{ &.input-origin{ display: inline-block; @@ -508,6 +509,11 @@ input[type=text]{ color: #45576F; } } + &.no-text{ + label{ + padding-left: 0; + } + } } .d-check-radio { @@ -565,6 +571,16 @@ input[type=text]{ opacity: 1; visibility: visible; } + &.pop{ + label{ + &:before{ + border-color: #fff; + } + &:after{ + background-color: #fff; + } + } + } } // check-box @@ -611,6 +627,11 @@ input[type=text]{ transform: translate(7.75px,4.5px) rotate(45deg); -ms-transform: translate(7.75px,4.5px) rotate(45deg); } + &.pop{ + input[type=checkbox]:checked + label::after{ + border-color: #fff; + } + } } // date-picker