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/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/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