diff --git a/public/fonts/NotoSansJP-Black.woff b/public/fonts/NotoSansJP-Black.woff new file mode 100644 index 00000000..6d1eb871 Binary files /dev/null and b/public/fonts/NotoSansJP-Black.woff differ diff --git a/public/fonts/NotoSansJP-Black.woff2 b/public/fonts/NotoSansJP-Black.woff2 new file mode 100644 index 00000000..57b73cea Binary files /dev/null and b/public/fonts/NotoSansJP-Black.woff2 differ diff --git a/public/fonts/NotoSansJP-Bold.woff b/public/fonts/NotoSansJP-Bold.woff new file mode 100644 index 00000000..528d5dc0 Binary files /dev/null and b/public/fonts/NotoSansJP-Bold.woff differ diff --git a/public/fonts/NotoSansJP-Bold.woff2 b/public/fonts/NotoSansJP-Bold.woff2 new file mode 100644 index 00000000..7385f01a Binary files /dev/null and b/public/fonts/NotoSansJP-Bold.woff2 differ diff --git a/public/fonts/NotoSansJP-ExtraBold.woff b/public/fonts/NotoSansJP-ExtraBold.woff new file mode 100644 index 00000000..3d5b4030 Binary files /dev/null and b/public/fonts/NotoSansJP-ExtraBold.woff differ diff --git a/public/fonts/NotoSansJP-ExtraBold.woff2 b/public/fonts/NotoSansJP-ExtraBold.woff2 new file mode 100644 index 00000000..e23b5938 Binary files /dev/null and b/public/fonts/NotoSansJP-ExtraBold.woff2 differ diff --git a/public/fonts/NotoSansJP-ExtraLight.woff b/public/fonts/NotoSansJP-ExtraLight.woff new file mode 100644 index 00000000..8d606939 Binary files /dev/null and b/public/fonts/NotoSansJP-ExtraLight.woff differ diff --git a/public/fonts/NotoSansJP-ExtraLight.woff2 b/public/fonts/NotoSansJP-ExtraLight.woff2 new file mode 100644 index 00000000..c43674fb Binary files /dev/null and b/public/fonts/NotoSansJP-ExtraLight.woff2 differ diff --git a/public/fonts/NotoSansJP-Light.woff b/public/fonts/NotoSansJP-Light.woff new file mode 100644 index 00000000..dbe70e43 Binary files /dev/null and b/public/fonts/NotoSansJP-Light.woff differ diff --git a/public/fonts/NotoSansJP-Light.woff2 b/public/fonts/NotoSansJP-Light.woff2 new file mode 100644 index 00000000..d0ead44d Binary files /dev/null and b/public/fonts/NotoSansJP-Light.woff2 differ diff --git a/public/fonts/NotoSansJP-Medium.woff b/public/fonts/NotoSansJP-Medium.woff new file mode 100644 index 00000000..fdfffa10 Binary files /dev/null and b/public/fonts/NotoSansJP-Medium.woff differ diff --git a/public/fonts/NotoSansJP-Medium.woff2 b/public/fonts/NotoSansJP-Medium.woff2 new file mode 100644 index 00000000..5d3da28f Binary files /dev/null and b/public/fonts/NotoSansJP-Medium.woff2 differ diff --git a/public/fonts/NotoSansJP-Regular.woff b/public/fonts/NotoSansJP-Regular.woff new file mode 100644 index 00000000..cad22106 Binary files /dev/null and b/public/fonts/NotoSansJP-Regular.woff differ diff --git a/public/fonts/NotoSansJP-Regular.woff2 b/public/fonts/NotoSansJP-Regular.woff2 new file mode 100644 index 00000000..d31b3285 Binary files /dev/null and b/public/fonts/NotoSansJP-Regular.woff2 differ diff --git a/public/fonts/NotoSansJP-SemiBold.woff b/public/fonts/NotoSansJP-SemiBold.woff new file mode 100644 index 00000000..2922f150 Binary files /dev/null and b/public/fonts/NotoSansJP-SemiBold.woff differ diff --git a/public/fonts/NotoSansJP-SemiBold.woff2 b/public/fonts/NotoSansJP-SemiBold.woff2 new file mode 100644 index 00000000..4ec2170e Binary files /dev/null and b/public/fonts/NotoSansJP-SemiBold.woff2 differ diff --git a/public/fonts/NotoSansJP-Thin.woff b/public/fonts/NotoSansJP-Thin.woff new file mode 100644 index 00000000..517b984f Binary files /dev/null and b/public/fonts/NotoSansJP-Thin.woff differ diff --git a/public/fonts/NotoSansJP-Thin.woff2 b/public/fonts/NotoSansJP-Thin.woff2 new file mode 100644 index 00000000..85a6b500 Binary files /dev/null and b/public/fonts/NotoSansJP-Thin.woff2 differ diff --git a/public/fonts/Pretendard-Black.woff b/public/fonts/Pretendard-Black.woff new file mode 100644 index 00000000..20b0641b Binary files /dev/null and b/public/fonts/Pretendard-Black.woff differ diff --git a/public/fonts/Pretendard-Black.woff2 b/public/fonts/Pretendard-Black.woff2 new file mode 100644 index 00000000..306697cc Binary files /dev/null and b/public/fonts/Pretendard-Black.woff2 differ diff --git a/public/fonts/Pretendard-Bold.woff b/public/fonts/Pretendard-Bold.woff new file mode 100644 index 00000000..bfc573c4 Binary files /dev/null and b/public/fonts/Pretendard-Bold.woff differ diff --git a/public/fonts/Pretendard-Bold.woff2 b/public/fonts/Pretendard-Bold.woff2 new file mode 100644 index 00000000..d99618c2 Binary files /dev/null and b/public/fonts/Pretendard-Bold.woff2 differ diff --git a/public/fonts/Pretendard-ExtraBold.woff b/public/fonts/Pretendard-ExtraBold.woff new file mode 100644 index 00000000..14a61abd Binary files /dev/null and b/public/fonts/Pretendard-ExtraBold.woff differ diff --git a/public/fonts/Pretendard-ExtraBold.woff2 b/public/fonts/Pretendard-ExtraBold.woff2 new file mode 100644 index 00000000..d7a908e3 Binary files /dev/null and b/public/fonts/Pretendard-ExtraBold.woff2 differ diff --git a/public/fonts/Pretendard-ExtraLight.woff b/public/fonts/Pretendard-ExtraLight.woff new file mode 100644 index 00000000..a7af8a24 Binary files /dev/null and b/public/fonts/Pretendard-ExtraLight.woff differ diff --git a/public/fonts/Pretendard-ExtraLight.woff2 b/public/fonts/Pretendard-ExtraLight.woff2 new file mode 100644 index 00000000..0c41886d Binary files /dev/null and b/public/fonts/Pretendard-ExtraLight.woff2 differ diff --git a/public/fonts/Pretendard-Light.woff b/public/fonts/Pretendard-Light.woff new file mode 100644 index 00000000..6e00ad2d Binary files /dev/null and b/public/fonts/Pretendard-Light.woff differ diff --git a/public/fonts/Pretendard-Light.woff2 b/public/fonts/Pretendard-Light.woff2 new file mode 100644 index 00000000..805d10c0 Binary files /dev/null and b/public/fonts/Pretendard-Light.woff2 differ diff --git a/public/fonts/Pretendard-Medium.woff b/public/fonts/Pretendard-Medium.woff new file mode 100644 index 00000000..71b13eb5 Binary files /dev/null and b/public/fonts/Pretendard-Medium.woff differ diff --git a/public/fonts/Pretendard-Medium.woff2 b/public/fonts/Pretendard-Medium.woff2 new file mode 100644 index 00000000..a96e69b8 Binary files /dev/null and b/public/fonts/Pretendard-Medium.woff2 differ diff --git a/public/fonts/Pretendard-Regular.woff b/public/fonts/Pretendard-Regular.woff new file mode 100644 index 00000000..741be57b Binary files /dev/null and b/public/fonts/Pretendard-Regular.woff differ diff --git a/public/fonts/Pretendard-Regular.woff2 b/public/fonts/Pretendard-Regular.woff2 new file mode 100644 index 00000000..a5d5aea8 Binary files /dev/null and b/public/fonts/Pretendard-Regular.woff2 differ diff --git a/public/fonts/Pretendard-SemiBold.woff b/public/fonts/Pretendard-SemiBold.woff new file mode 100644 index 00000000..7bf28607 Binary files /dev/null and b/public/fonts/Pretendard-SemiBold.woff differ diff --git a/public/fonts/Pretendard-SemiBold.woff2 b/public/fonts/Pretendard-SemiBold.woff2 new file mode 100644 index 00000000..d5a77179 Binary files /dev/null and b/public/fonts/Pretendard-SemiBold.woff2 differ diff --git a/public/fonts/Pretendard-Thin.woff b/public/fonts/Pretendard-Thin.woff new file mode 100644 index 00000000..665fe440 Binary files /dev/null and b/public/fonts/Pretendard-Thin.woff differ diff --git a/public/fonts/Pretendard-Thin.woff2 b/public/fonts/Pretendard-Thin.woff2 new file mode 100644 index 00000000..8ce8ee27 Binary files /dev/null and b/public/fonts/Pretendard-Thin.woff2 differ diff --git a/public/static/images/canvas/depth2-arr.svg b/public/static/images/canvas/depth2-arr.svg new file mode 100644 index 00000000..31e04787 --- /dev/null +++ b/public/static/images/canvas/depth2-arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/menu_icon01.svg b/public/static/images/canvas/menu_icon01.svg new file mode 100644 index 00000000..ce77c2dd --- /dev/null +++ b/public/static/images/canvas/menu_icon01.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/static/images/canvas/menu_icon02.svg b/public/static/images/canvas/menu_icon02.svg new file mode 100644 index 00000000..363e483d --- /dev/null +++ b/public/static/images/canvas/menu_icon02.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/menu_icon03.svg b/public/static/images/canvas/menu_icon03.svg new file mode 100644 index 00000000..56896c63 --- /dev/null +++ b/public/static/images/canvas/menu_icon03.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/menu_icon04.svg b/public/static/images/canvas/menu_icon04.svg new file mode 100644 index 00000000..3df7b7da --- /dev/null +++ b/public/static/images/canvas/menu_icon04.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/canvas/menu_icon05.svg b/public/static/images/canvas/menu_icon05.svg new file mode 100644 index 00000000..b5ea63d0 --- /dev/null +++ b/public/static/images/canvas/menu_icon05.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/images/canvas/menu_icon06.svg b/public/static/images/canvas/menu_icon06.svg new file mode 100644 index 00000000..6c9705f3 --- /dev/null +++ b/public/static/images/canvas/menu_icon06.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/images/canvas/minus.svg b/public/static/images/canvas/minus.svg new file mode 100644 index 00000000..6949c3e8 --- /dev/null +++ b/public/static/images/canvas/minus.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/plan_close_black.svg b/public/static/images/canvas/plan_close_black.svg new file mode 100644 index 00000000..47445748 --- /dev/null +++ b/public/static/images/canvas/plan_close_black.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/plan_close_gray.svg b/public/static/images/canvas/plan_close_gray.svg new file mode 100644 index 00000000..bba119ea --- /dev/null +++ b/public/static/images/canvas/plan_close_gray.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/plane_add.svg b/public/static/images/canvas/plane_add.svg new file mode 100644 index 00000000..9b6e3e06 --- /dev/null +++ b/public/static/images/canvas/plane_add.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/plus.svg b/public/static/images/canvas/plus.svg new file mode 100644 index 00000000..6b5fc7f2 --- /dev/null +++ b/public/static/images/canvas/plus.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/images/canvas/side_icon01.svg b/public/static/images/canvas/side_icon01.svg new file mode 100644 index 00000000..6de890e2 --- /dev/null +++ b/public/static/images/canvas/side_icon01.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/side_icon02.svg b/public/static/images/canvas/side_icon02.svg new file mode 100644 index 00000000..e320aefc --- /dev/null +++ b/public/static/images/canvas/side_icon02.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/side_icon03.svg b/public/static/images/canvas/side_icon03.svg new file mode 100644 index 00000000..3f952192 --- /dev/null +++ b/public/static/images/canvas/side_icon03.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/static/images/canvas/side_icon04.svg b/public/static/images/canvas/side_icon04.svg new file mode 100644 index 00000000..cc196515 --- /dev/null +++ b/public/static/images/canvas/side_icon04.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/side_icon05.svg b/public/static/images/canvas/side_icon05.svg new file mode 100644 index 00000000..569c5b64 --- /dev/null +++ b/public/static/images/canvas/side_icon05.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/side_icon06.svg b/public/static/images/canvas/side_icon06.svg new file mode 100644 index 00000000..7ee72ac1 --- /dev/null +++ b/public/static/images/canvas/side_icon06.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/canvas/side_icon07.svg b/public/static/images/canvas/side_icon07.svg new file mode 100644 index 00000000..ec65154f --- /dev/null +++ b/public/static/images/canvas/side_icon07.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/side_icon08.svg b/public/static/images/canvas/side_icon08.svg new file mode 100644 index 00000000..afbb1e64 --- /dev/null +++ b/public/static/images/canvas/side_icon08.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/canvas/side_icon09.svg b/public/static/images/canvas/side_icon09.svg new file mode 100644 index 00000000..aac0b489 --- /dev/null +++ b/public/static/images/canvas/side_icon09.svg @@ -0,0 +1,4 @@ + + + + diff --git a/public/static/images/common/Logo.svg b/public/static/images/common/Logo.svg new file mode 100644 index 00000000..a72d0b4e --- /dev/null +++ b/public/static/images/common/Logo.svg @@ -0,0 +1,17 @@ + + + + + + + + + + + + + + + + + diff --git a/public/static/images/common/nav-arr.svg b/public/static/images/common/nav-arr.svg new file mode 100644 index 00000000..a9ddbf4a --- /dev/null +++ b/public/static/images/common/nav-arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/common/profile_icon.svg b/public/static/images/common/profile_icon.svg new file mode 100644 index 00000000..837e4f5a --- /dev/null +++ b/public/static/images/common/profile_icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/static/images/common/select-arr.svg b/public/static/images/common/select-arr.svg new file mode 100644 index 00000000..aa74665c --- /dev/null +++ b/public/static/images/common/select-arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/common/signout_icon.svg b/public/static/images/common/signout_icon.svg new file mode 100644 index 00000000..a20ccdb1 --- /dev/null +++ b/public/static/images/common/signout_icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/static/images/thomas-tastet-hSODeSbvzE0-unsplash.jpg b/public/static/images/thomas-tastet-hSODeSbvzE0-unsplash.jpg new file mode 100644 index 00000000..fc8774a2 Binary files /dev/null and b/public/static/images/thomas-tastet-hSODeSbvzE0-unsplash.jpg differ diff --git a/src/styles/_contents.scss b/src/styles/_contents.scss new file mode 100644 index 00000000..5d6b0baf --- /dev/null +++ b/src/styles/_contents.scss @@ -0,0 +1,329 @@ +// CanvasPage +.canvas-wrap{ + height: calc(100vh - 47px); + display: flex; + flex-direction: column; + .canvas-content{ + flex: 1 1 auto; + .canvas-layout{ + height: 100%; + } + } +} +// CanvasMenu +.canvas-menu-wrap{ + position: relative; + display: block; + width: 100%; + padding-bottom: 0; + background-color: #383838; + transition: padding .17s ease-in-out; + .canvas-menu-inner{ + position: relative; + display: flex; + align-items: center; + padding: 0 40px 0 20px; + background-color: #2C2C2C; + z-index: 999; + .canvas-menu-list{ + display: flex; + align-items: center; + height: 100%; + .canvas-menu-item{ + display: flex; + align-items: center; + height: 100%; + button{ + display: flex; + align-items: center; + font-size: 12px; + height: 100%; + color: #fff; + font-weight: 600; + padding: 15px 20px; + opacity: 0.55; + transition: all .17s ease-in-out; + .menu-icon{ + display: block; + width: 16px; + height: 16px; + background-repeat: no-repeat; + background-position: center; + background-size: cover; + margin-right: 10px; + &.con01{background-image: url(/static/images/canvas/menu_icon01.svg);} + &.con02{background-image: url(/static/images/canvas/menu_icon02.svg);} + &.con03{background-image: url(/static/images/canvas/menu_icon03.svg);} + &.con04{background-image: url(/static/images/canvas/menu_icon04.svg);} + &.con05{background-image: url(/static/images/canvas/menu_icon05.svg);} + &.con06{background-image: url(/static/images/canvas/menu_icon06.svg);} + } + } + &.active{ + background-color: #383838; + button{ + opacity: 1; + } + } + } + } + .canvas-side-btn-wrap{ + display: flex; + align-items: center; + margin-left: auto; + .select-box{ + width: 124px; + margin-right: 5px; + > div{ + width: 100%; + } + } + .btn-from{ + display: flex; + align-items: center; + gap: 5px; + button{ + display: block; + width: 30px; + height: 30px; + border-radius: 2px; + background-color: #3D3D3D; + background-position: center; + background-repeat: no-repeat; + background-size: 15px 15px; + transition: all .17s ease-in-out; + &.btn01{background-image: url(../../public/static/images/canvas/side_icon01.svg);} + &.btn02{background-image: url(../../public/static/images/canvas/side_icon02.svg);} + &.btn03{background-image: url(../../public/static/images/canvas/side_icon03.svg);} + &.btn04{background-image: url(../../public/static/images/canvas/side_icon04.svg);} + &.btn05{background-image: url(../../public/static/images/canvas/side_icon05.svg);} + &.btn06{background-image: url(../../public/static/images/canvas/side_icon06.svg);} + &.btn07{background-image: url(../../public/static/images/canvas/side_icon07.svg);} + &.btn08{background-image: url(../../public/static/images/canvas/side_icon08.svg);} + &.btn09{background-image: url(../../public/static/images/canvas/side_icon09.svg);} + &:hover{ + background-color: #1083E3; + } + &.active{ + background-color: #1083E3; + } + } + } + .size-control{ + display: flex; + align-items: center; + justify-content: center; + gap: 10px; + background-color: #3D3D3D; + border-radius: 2px; + width: 100px; + height: 30px; + margin: 0 5px; + span{ + font-size: 13px; + color: #fff; + } + .control-btn{ + display: block; + width: 12px; + height: 12px; + background-repeat: no-repeat; + background-size: cover; + background-position: center; + &.minus{ + background-image: url(../../public/static/images/canvas/minus.svg); + } + &.plus{ + background-image: url(../../public/static/images/canvas/plus.svg); + } + } + } + } + } + .canvas-depth2-wrap{ + position: absolute; + top: -100%; + left: 0; + background-color: #383838; + width: 100%; + height: 50px; + transition: all .17s ease-in-out; + .canvas-depth2-inner{ + display: flex; + align-items: center; + padding: 0 40px; + height: 100%; + .canvas-depth2-list{ + display: flex; + align-items: center ; + height: 100%; + .canvas-depth2-item{ + display: flex; + align-items: center; + margin-right: 26px; + height: 100%; + button{ + position: relative; + opacity: 0.55; + color: #fff; + font-size: 12px; + font-weight: normal; + height: 100%; + padding-right: 12px; + } + &.active{ + button{ + opacity: 1; + font-weight: 600; + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 5px; + height: 8px; + background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; + } + } + } + } + } + .canvas-depth2-btn-list{ + display: flex; + align-items: center; + margin-left: auto; + height: 100%; + .depth2-btn-box{ + display: flex; + align-items: center; + margin-right: 34px; + height: 100%; + transition: all .17s ease-in-out; + button{ + position: relative; + font-size: 12px; + font-weight: 400; + height: 100%; + color: #fff; + padding-right: 12px; + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 5px; + height: 8px; + background: url(../../public/static/images/canvas/depth2-arr.svg) no-repeat center; + } + } + &:last-child{ + margin-right: 0; + } + &.mouse{ + opacity: 0.55; + } + } + } + } + &.active{ + top: 47px; + } + } + &.active{ + padding-bottom: 50px; + } +} + +// canvas-layout +.canvas-layout{ + .canvas-page-list{ + display: flex; + background-color: #1C1C1C; + border-top: 1px solid #000; + width: 100%; + .canvas-plane-wrap{ + display: flex; + align-items: center; + max-width: calc(100% - 45px); + .canvas-page-box{ + display: flex; + align-items: center; + background-color: #1c1c1c; + padding: 9.6px 20px; + border-right:1px solid #000; + min-width: 0; + transition: all .17s ease-in-out; + span{ + display: flex; + align-items: center; + width: 100%; + font-size: 12px; + font-family: 'Pretendard', sans-serif; + color: #AAA; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + .close{ + flex: none; + display: block; + width: 7px; + height: 8px; + margin-left: 15px; + background: url(../../public/static/images/canvas/plan_close_gray.svg)no-repeat center; + background-size: cover; + } + &.on{ + background-color: #fff; + span{ + font-weight: 600; + color: #101010; + } + .close{ + background: url(../../public/static/images/canvas/plan_close_black.svg)no-repeat center; + } + &:hover{ + background-color: #fff; + } + } + &:hover{ + background-color: #000; + } + } + } + .plane-add{ + display: flex; + align-items: center; + justify-content: center; + width: 45px; + padding: 13.5px 0; + background-color: #1C1C1C; + border-right: 1px solid #000; + transition: all .17s ease-in-out; + span{ + display: block; + width: 9px; + height: 9px; + background: url(../../public/static/images/canvas/plane_add.svg)no-repeat center; + background-size: cover; + } + &:hover{ + background-color: #000; + } + } + } +} + +.canvas-frame{ + position: relative; + height: calc(100% - 35.5px); + canvas{ + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} \ No newline at end of file diff --git a/src/styles/_fonts.scss b/src/styles/_fonts.scss new file mode 100644 index 00000000..b1d16e89 --- /dev/null +++ b/src/styles/_fonts.scss @@ -0,0 +1,199 @@ +@font-face { + font-family: 'Noto Sans JP'; + src: url('/fonts/NotoSansJP-ExtraBold.woff2') format('woff2'), + url('/fonts/NotoSansJP-ExtraBold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('/fonts/NotoSansJP-Bold.woff2') format('woff2'), + url('/fonts/NotoSansJP-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('/fonts/NotoSansJP-Black.woff2') format('woff2'), + url('/fonts/NotoSansJP-Black.woff') format('woff'); + font-weight: 900; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('/fonts/NotoSansJP-ExtraLight.woff2') format('woff2'), + url('/fonts/NotoSansJP-ExtraLight.woff') format('woff'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('/fonts/NotoSansJP-Light.woff2') format('woff2'), + url('/fonts/NotoSansJP-Light.woff') format('woff'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('/fonts/NotoSansJP-Medium.woff2') format('woff2'), + url('/fonts/NotoSansJP-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('/fonts/NotoSansJP-Regular.woff2') format('woff2'), + url('/fonts/NotoSansJP-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('/fonts/NotoSansJP-SemiBold.woff2') format('woff2'), + url('/fonts/NotoSansJP-SemiBold.woff') format('woff'); + font-weight: 600; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Noto Sans JP'; + src: url('/fonts/NotoSansJP-Thin.woff2') format('woff2'), + url('/fonts/NotoSansJP-Thin.woff') format('woff'); + font-weight: 100; + font-style: normal; + font-display: swap; +} + +// pretendard +@font-face { + font-family: 'Pretendard'; + src: url('/fonts/Pretendard-Bold.woff2') format('woff2'), + url('/fonts/Pretendard-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'), + url('/fonts/Pretendard-ExtraBold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/fonts/Pretendard-ExtraBold.woff2') format('woff2'), + url('/fonts/Pretendard-ExtraBold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'), + url('/fonts/Pretendard-ExtraLight.woff') format('woff'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/fonts/Pretendard-ExtraLight.woff2') format('woff2'), + url('/fonts/Pretendard-ExtraLight.woff') format('woff'); + font-weight: 200; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/fonts/Pretendard-Light.woff2') format('woff2'), + url('/fonts/Pretendard-Light.woff') format('woff'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/fonts/Pretendard-Light.woff2') format('woff2'), + url('/fonts/Pretendard-Light.woff') format('woff'); + font-weight: 300; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/fonts/Pretendard-Medium.woff2') format('woff2'), + url('/fonts/Pretendard-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/fonts/Pretendard-Medium.woff2') format('woff2'), + url('/fonts/Pretendard-Medium.woff') format('woff'); + font-weight: 500; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/fonts/Pretendard-Regular.woff2') format('woff2'), + url('/fonts/Pretendard-Regular.woff') format('woff'); + font-weight: normal; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/fonts/Pretendard-Black.woff2') format('woff2'), + url('/fonts/Pretendard-Black.woff') format('woff'); + font-weight: 900; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/fonts/Pretendard-Black.woff2') format('woff2'), + url('/fonts/Pretendard-Black.woff') format('woff'); + font-weight: 900; + font-style: normal; + font-display: swap; +} + +@font-face { + font-family: 'Pretendard'; + src: url('/fonts/Pretendard-Bold.woff2') format('woff2'), + url('/fonts/Pretendard-Bold.woff') format('woff'); + font-weight: bold; + font-style: normal; + font-display: swap; +} + diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss new file mode 100644 index 00000000..e33d75ea --- /dev/null +++ b/src/styles/_layout.scss @@ -0,0 +1,216 @@ +.wrap{ + display: flex; + flex-direction: column; + min-width: 1600px; + min-height: 100vh; + overflow-x: hidden; +} +.content{ + flex: 1 1 auto; + padding-top: 46px; +} + +// header +// nav item 공통 +@mixin navitem(){ + position: relative; + display: flex; + align-items: center; + font-size: 14px; + color: #fff; + font-weight: 500; + height: 100%; + padding-right: 12px; + transition: color .17s ease-in-out; +} +header{ + position: fixed; + top: 0; + left: 0; + width: 100%; + min-width: 1600px; + height: 46px; + background-color: #1C1C1C; + border-bottom: 1px solid #000; + z-index: 9999; + .header-inner{ + display: flex; + align-items: center; + height: 100%; + padding: 0 40px; + .header-right{ + display: flex; + height: 100%; + align-items: center; + .logo{ + a{ + display: block; + width: 232px; + height: 30px; + background: url(/static/images/common/Logo.svg)no-repeat center; + background-size: contain; + } + } + nav{ + margin-left: 50px; + height: 100%; + .nav-list{ + display: flex; + align-items: center; + height: 100%; + .nav-item{ + position: relative; + margin-right: 62px; + height: 100%; + a{ + @include navitem; + } + button{ + @include navitem; + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 6px; + height: 10px; + background: url(/static/images/common/nav-arr.svg)no-repeat center; + transition: all .17s ease-in-out; + } + } + &:last-child{ + margin-right: 0; + } + .nav-depth2{ + position: absolute; + top: calc(100% - 2px); + left: 50%; + transform: translateX(-50%); + min-width: 100px; + background-color: #1C1C1C; + border: 1px solid #464646; + padding: 24px; + opacity: 0; + visibility: hidden; + transition: all .17s ease-in-out; + .nav-depth2-item{ + margin-bottom: 10px; + transition: all .17s ease-in-out; + a{ + font-size: 13px; + font-weight: normal; + white-space: nowrap; + } + &:last-child{ + margin-bottom: 0; + } + &.mouse{ + opacity: 0.55; + } + } + &::before{ + content: ''; + position: absolute; + top: -5px; + left: 50%; + transform: translateX(-50%) rotate(45deg); + width: 8px; + height: 8px; + background-color: #1c1c1c; + border-top: 1px solid #464646; + border-left: 1px solid #464646; + } + } + &.mouse{ + > a{ + color: rgba(255, 255, 255, 0.30); + } + > button{ + color: rgba(255, 255, 255, 0.30); + &:after{ + opacity: 0.3; + } + } + } + &:hover{ + .nav-depth2{ + opacity: 1; + visibility: visible; + } + > button{ + &:after{ + transform: translateY(-50%) rotate(90deg); + } + } + } + } + } + } + } + .header-left{ + margin-left: auto; + height: 100%; + display: flex; + align-items: center; + .profile-box{ + position: relative; + padding-left: 30px; + height: 100%; + display: flex; + align-items: center; + margin-right: 20px; + cursor: pointer; + .profile{ + font-size: 13px; + font-weight: normal; + color: #fff; + } + &::after{ + content: ''; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 0; + width: 24px; + height: 24px; + background: url(/static/images/common/profile_icon.svg)no-repeat center; + background-size: cover; + } + } + .sign-out-box{ + position: relative; + padding-left: 30px; + height: 100%; + display: flex; + align-items: center; + margin-right: 20px; + cursor: pointer; + .sign-out{ + font-size: 13px; + font-weight: normal; + color: #fff; + } + &::after{ + content: ''; + position: absolute; + top: 50%; + transform: translateY(-50%); + left: 0; + width: 24px; + height: 24px; + background: url(../../public/static/images/common/signout_icon.svg)no-repeat center; + background-size: cover; + } + } + .select-box{ + min-width: 165px; + margin-right: 8px; + >div{ + width: 100%; + } + } + } + } +} + diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss new file mode 100644 index 00000000..286fa384 --- /dev/null +++ b/src/styles/_reset.scss @@ -0,0 +1,280 @@ +* { + -webkit-text-size-adjust:none; + -moz-text-size-adjust:none; + -ms-text-size-adjust:none; + text-size-adjust: none; + box-sizing: content-box +} +*, ::after, ::before { + box-sizing: border-box; +} +html, body{ + width: 100%; + height: 100%; + font-size: 16px; +} +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font: inherit; + vertical-align: baseline; + font-family: 'Noto Sans JP', sans-serif; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1.4; +} +body:first-of-type caption { display:none;} + +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: separate; + border-spacing:0; + border:0 none; +} +caption, th, td { + text-align:left; + font-weight: normal; + border:0; +} + +a { + cursor:pointer; + color:#000; +} +a, a:hover, a:active { + text-decoration:none; + -webkit-tap-highlight-color: transparent; +} +/*form_style*/ +input, select, textarea, button, a, label { + -webkit-tap-highlight-color:rgba(0,0,0,0); +} +button,input[type=text], input[type=button] { + -webkit-appearance: none; + -webkit-border-radius: 0; + -webkit-appearance:none; + appearance: none; + border-radius: 0 +} +input[type=checkbox], input[type=radio] { + box-sizing: border-box; + padding: 0; +} +input, select, button { + border:0 none; + outline:none; + margin:0; +} +select { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; +} +select::-ms-expand { + display: none; +} +::-webkit-input-placeholder { + line-height:1; + font-weight:300; + font-size:0.938rem; + letter-spacing:-0.6px; + color:#8b8b8b; +} +.log-box ::-webkit-input-placeholder{ + color:#8b8b8b; +} +button{ + background: transparent; + font-family: 'Noto Sans JP', sans-serif; + border: none; + padding: 0; + margin: 0; + line-height: 1.4; + color: inherit; + outline: none; + cursor: pointer; +} + + +// button +.btn-frame{ + display: inline-block; + padding: 0 10px; + height: 34px; + line-height: 34px; + border-radius: 2px; + color: #fff; + font-size: 12px; + font-weight: 400; + border: 1px solid #000; + text-align: center; + font-family: 'Pretendard', sans-serif; + transition: color .12s ease-in-out; + cursor: pointer; + &.block{ + width: 100%; + } + &.small{ + font-family: 'Noto Sans JP', sans-serif; + height: 30px; + line-height: 30px; + font-size: 13px; + } + + &.deepgray{ + background-color: #2C2C2C; + border: 1px solid #484848; + } + &.gray{ + background-color: #3C3C3C; + border: 1px solid #545454; + } + &.dark{ + background-color: #1C1C1C; + border: 1px solid #484848; + } +} + +// select +.sort-select{ + position: relative; + display: inline-block; + min-width: 100px; + height: 30px; + line-height: 30px; + padding: 0 10px; + background-color: #373737; + border: 1px solid #3F3F3F; + border-radius: 2px; + border-top-left-radius: 2px; + color: #fff; + cursor: pointer; + p{ + font-size: 13px; + color: #fff; + height: 100%; + } + .select-item-wrap{ + position: absolute; + top: 100%; + left: -1px; + clip-path:inset(0 0 100% 0); + width: calc(100% + 2px); + padding: 8px 0; + background-color: #373737; + border: 1px solid #3F3F3F; + border-radius: 2px; + transition: all 0.17s ease-in-out; + visibility: hidden; + .select-item{ + display: flex; + align-items: center; + padding: 8px 20px; + line-height: 1.4; + transition: all .17s ease-in-out; + button{ + font-size: 12px; + color: #fff; + line-height: 1.4; + } + &:hover{ + background-color: #2C2C2C; + } + } + } + &::after{ + content: ''; + position: absolute; + top: 50%; + right: 7px; + transform: translateY(-50%); + width: 10px; + height: 6px; + background: url(/static/images/common/select-arr.svg) no-repeat center; + background-size: cover; + transition: all .17s ease-in-out; + } + &.active{ + .select-item-wrap{ + clip-path: inset(0 0 0 0); + visibility: visible; + } + &:after{ + transform: translateY(-50%) rotate(-180deg); + } + } +} + +// input +input[type=text]{ + &.input-origin{ + display: inline-block; + height: 30px; + line-height: 30px; + border-radius: 2px; + background-color: #313131; + color: #fff; + font-size: 12px; + font-weight: 500; + font-family: 'Pretendard', sans-serif; + padding: 0 10px; + &::placeholder{ + font-size: 12px; + } + } +} + +// date-picker +.single-date{ + input{ + border-radius: 2px; + color: #fff; + font-size: 12px; + font-family: 'Pretendard', sans-serif; + background-color: #313131; + } +} +.range-date{ + input{ + border-radius: 2px; + color: #fff; + font-size: 12px; + font-family: 'Pretendard', sans-serif; + background-color: #313131; + } + .react-datepicker__input-container{ + button{ + &:after{ + display: none; + } + } + } +} \ No newline at end of file diff --git a/src/styles/common.scss b/src/styles/common.scss new file mode 100644 index 00000000..8152784c --- /dev/null +++ b/src/styles/common.scss @@ -0,0 +1,2 @@ +@import 'fonts.scss'; +@import 'reset.scss'; \ No newline at end of file diff --git a/src/styles/style.scss b/src/styles/style.scss index 862bf204..68f4c54b 100644 --- a/src/styles/style.scss +++ b/src/styles/style.scss @@ -1,18 +1,2 @@ -@import '_test.scss'; -@import 'react-toastify/dist/ReactToastify.css'; - -body { - padding: 0; - margin: 0; - font-family: -apple-system, RoomNo, sans-serif; -} - -.font-test { - font-family: 'RoomNo'; -} - -@font-face { - font-family: 'RoomNo'; - font-weight: 200; - src: url('/fonts/Room No.703.ttf') format('truetype'); -} +@import '_layout.scss'; +@import '_contents.scss'; \ No newline at end of file