From 7b1f36293e52feeb2d5ed9e46977d7b52054c13e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EA=B9=80=EC=B0=BD=EC=88=98?= Date: Wed, 11 Sep 2024 17:31:38 +0900 Subject: [PATCH] =?UTF-8?q?main=20page=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- public/static/images/main/clock.svg | 6 + public/static/images/main/download.svg | 6 + public/static/images/main/id_icon.svg | 8 + public/static/images/main/mail.svg | 6 + public/static/images/main/main_search.svg | 11 + public/static/images/main/more_btn.svg | 5 + public/static/images/main/product_ico01.svg | 8 + public/static/images/main/product_ico02.svg | 6 + public/static/images/main/product_ico03.svg | 7 + public/static/images/main/product_ico04.svg | 6 + public/static/images/main/product_ico05.svg | 7 + public/static/images/main/store-arr.svg | 3 + public/static/images/main/user.svg | 11 + src/app/canvas/page.jsx | 2 +- src/app/inputwrap/page.jsx | 13 + src/app/main/page.jsx | 33 +- src/components/canvas/MenuDepth01.jsx | 2 +- src/components/layout/Footer.jsx | 9 + src/components/{header => layout}/Header.jsx | 0 src/components/main/MainContents.jsx | 95 +++++ src/components/main/ProductItem.jsx | 16 + src/styles/_inputcommon.scss | 1 + src/styles/_layout.scss | 17 +- src/styles/_main.scss | 356 +++++++++++++++++++ src/styles/_reset.scss | 75 +++- 25 files changed, 702 insertions(+), 7 deletions(-) create mode 100644 public/static/images/main/clock.svg create mode 100644 public/static/images/main/download.svg create mode 100644 public/static/images/main/id_icon.svg create mode 100644 public/static/images/main/mail.svg create mode 100644 public/static/images/main/main_search.svg create mode 100644 public/static/images/main/more_btn.svg create mode 100644 public/static/images/main/product_ico01.svg create mode 100644 public/static/images/main/product_ico02.svg create mode 100644 public/static/images/main/product_ico03.svg create mode 100644 public/static/images/main/product_ico04.svg create mode 100644 public/static/images/main/product_ico05.svg create mode 100644 public/static/images/main/store-arr.svg create mode 100644 public/static/images/main/user.svg create mode 100644 src/components/layout/Footer.jsx rename src/components/{header => layout}/Header.jsx (100%) create mode 100644 src/components/main/MainContents.jsx create mode 100644 src/components/main/ProductItem.jsx diff --git a/public/static/images/main/clock.svg b/public/static/images/main/clock.svg new file mode 100644 index 0000000..3d005f5 --- /dev/null +++ b/public/static/images/main/clock.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/main/download.svg b/public/static/images/main/download.svg new file mode 100644 index 0000000..42d1d12 --- /dev/null +++ b/public/static/images/main/download.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/main/id_icon.svg b/public/static/images/main/id_icon.svg new file mode 100644 index 0000000..a84b617 --- /dev/null +++ b/public/static/images/main/id_icon.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/static/images/main/mail.svg b/public/static/images/main/mail.svg new file mode 100644 index 0000000..c55567f --- /dev/null +++ b/public/static/images/main/mail.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/main/main_search.svg b/public/static/images/main/main_search.svg new file mode 100644 index 0000000..25f56b4 --- /dev/null +++ b/public/static/images/main/main_search.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/public/static/images/main/more_btn.svg b/public/static/images/main/more_btn.svg new file mode 100644 index 0000000..5102903 --- /dev/null +++ b/public/static/images/main/more_btn.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/public/static/images/main/product_ico01.svg b/public/static/images/main/product_ico01.svg new file mode 100644 index 0000000..c3a2571 --- /dev/null +++ b/public/static/images/main/product_ico01.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/public/static/images/main/product_ico02.svg b/public/static/images/main/product_ico02.svg new file mode 100644 index 0000000..7391dbd --- /dev/null +++ b/public/static/images/main/product_ico02.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/main/product_ico03.svg b/public/static/images/main/product_ico03.svg new file mode 100644 index 0000000..d2ca10e --- /dev/null +++ b/public/static/images/main/product_ico03.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/static/images/main/product_ico04.svg b/public/static/images/main/product_ico04.svg new file mode 100644 index 0000000..da17d7a --- /dev/null +++ b/public/static/images/main/product_ico04.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/public/static/images/main/product_ico05.svg b/public/static/images/main/product_ico05.svg new file mode 100644 index 0000000..26b0e3d --- /dev/null +++ b/public/static/images/main/product_ico05.svg @@ -0,0 +1,7 @@ + + + + + + + diff --git a/public/static/images/main/store-arr.svg b/public/static/images/main/store-arr.svg new file mode 100644 index 0000000..9648733 --- /dev/null +++ b/public/static/images/main/store-arr.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/static/images/main/user.svg b/public/static/images/main/user.svg new file mode 100644 index 0000000..a421788 --- /dev/null +++ b/public/static/images/main/user.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/src/app/canvas/page.jsx b/src/app/canvas/page.jsx index 708cb17..0fbce07 100644 --- a/src/app/canvas/page.jsx +++ b/src/app/canvas/page.jsx @@ -4,7 +4,7 @@ import CanvasLayout from '@/components/canvas/CanvasLayout' import CanvasMenu from '@/components/canvas/CanvasMenu' import OuterLineWall from '@/components/canvas/modal/outerlinesetting/OuterLineWall' import SettingModal01 from '@/components/canvas/modal/settoing01/SettingModal01' -import Header from '@/components/header/Header' +import Header from '@/components/layout/Header' import { modalState } from '@/store/modalAtom' import '@/styles/contents.scss' import { useRecoilValue } from 'recoil' diff --git a/src/app/inputwrap/page.jsx b/src/app/inputwrap/page.jsx index c27b980..42a6c5b 100644 --- a/src/app/inputwrap/page.jsx +++ b/src/app/inputwrap/page.jsx @@ -81,6 +81,19 @@ export default function InputWrapPage (){ +
+

main-radio

+
+
+ + +
+
+ + +
+
+
) } \ No newline at end of file diff --git a/src/app/main/page.jsx b/src/app/main/page.jsx index 3df9aff..5fc5f47 100644 --- a/src/app/main/page.jsx +++ b/src/app/main/page.jsx @@ -1,4 +1,6 @@ -import Header from "@/components/header/Header"; +import Footer from "@/components/layout/Footer"; +import Header from "@/components/layout/Header"; +import MainContents from "@/components/main/MainContents"; import '@/styles/style.scss' export default function MainPage() { @@ -6,8 +8,35 @@ export default function MainPage() {
- +
+
+
+
+
販売店ID / 販売店名
+
+ +
ナカザワ建販株式会社（その他 )
+
+
+
+
+ + +
+
+ + +
+
+
+ + +
+
+ +
+
) } \ No newline at end of file diff --git a/src/components/canvas/MenuDepth01.jsx b/src/components/canvas/MenuDepth01.jsx index 759cdf4..93f6195 100644 --- a/src/components/canvas/MenuDepth01.jsx +++ b/src/components/canvas/MenuDepth01.jsx @@ -1,7 +1,7 @@ 'use client' import { useRecoilState } from "recoil"; -import { ToggleonMouse } from "../header/Header" +import { ToggleonMouse } from "../layout/Header" import { modalState } from "@/store/modalAtom"; export default function MenuDepth01(){ diff --git a/src/components/layout/Footer.jsx b/src/components/layout/Footer.jsx new file mode 100644 index 0000000..881ad77 --- /dev/null +++ b/src/components/layout/Footer.jsx @@ -0,0 +1,9 @@ +export default function Footer() { + return( + + ) +} \ No newline at end of file diff --git a/src/components/header/Header.jsx b/src/components/layout/Header.jsx similarity index 100% rename from src/components/header/Header.jsx rename to src/components/layout/Header.jsx diff --git a/src/components/main/MainContents.jsx b/src/components/main/MainContents.jsx new file mode 100644 index 0000000..f0d4c37 --- /dev/null +++ b/src/components/main/MainContents.jsx @@ -0,0 +1,95 @@ +import Image from "next/image"; +import ProductItem from "./ProductItem"; + +export default function MainContents() { + return( +
+
+ +
    + {Array.from({length : 3}).map((_, idx) => ( +
  • +
    + 2024.07.29  10:00:10 + R3305X167240611004 + 新津 佑季 + HITエンジニアリング株式会社 +
    +
    • + ))} +
+ + +
+
2024.07.19
+
[不具合のご連] 納品先リスト表示不具合と不具合復 旧のお知らせ
+
+ + Q.TRON S-G2.4+ 285ならびにQ.PEAK DUO S-G11S 275と + 屋根技術研究所 支持金具/YGアンカー/スレート・板金金具の組み + 合わせをしたときに 縦桟が拾い出されなかった不具合の修正 + + + QREADYシリーズを見積りした際、書類一式【配置図】タブの + 『パワーコンディショナ型式』欄にPCS型番が表示されるよう + に変更 + + + QREADYシリーズを見積りした際、書類一式【配置図】タブの + 『パワーコンディショナ型式』欄にPCS型番が表示されるよう + に変更 + QREADYシリーズを見積りした際、書類一式【配置図】タブの + 『パワーコンディショナ型式』欄にPCS型番が表示されるよう + に変更 + QREADYシリーズを見積りした際、書類一式【配置図】タブの + 『パワーコンディショナ型式』欄にPCS型番が表示されるよう + に変更 + +
+
+ +
+
+ +
    + {Array.from({length : 3}).map((_, idx) => ( +
  • +
    +
    FAQ 26
    +
    型番での商品検索機能追加のお知らせ型番での商品検索機能追加のお知らせ型番での商品検索機能追加のお知らせ
    +
    2024.07.19
    +
    +
    • + ))} +
+ + +
+ + +
+ + +
    +
  • +
    + react +
    +
    山本功希
    +
    • +
  • +
    + react +
    +
    yamamoto.k1@qcells.com
    +
    • +
+ +
+
+ ) +} \ No newline at end of file diff --git a/src/components/main/ProductItem.jsx b/src/components/main/ProductItem.jsx new file mode 100644 index 0000000..7ed4c92 --- /dev/null +++ b/src/components/main/ProductItem.jsx @@ -0,0 +1,16 @@ +export default function ProductItem({num, name, children}){ + return( +
+
+

+ + {name} +

+ +
+
+ {children} +
+
+ ) +} \ No newline at end of file diff --git a/src/styles/_inputcommon.scss b/src/styles/_inputcommon.scss index 97e5cc5..450b630 100644 --- a/src/styles/_inputcommon.scss +++ b/src/styles/_inputcommon.scss @@ -23,6 +23,7 @@ margin-bottom: 10px; } } + .form-main-radio, .form-Arrow-btn, .form-Check-btn{ padding: 10px; diff --git a/src/styles/_layout.scss b/src/styles/_layout.scss index fedb694..7e4faf1 100644 --- a/src/styles/_layout.scss +++ b/src/styles/_layout.scss @@ -6,7 +6,6 @@ overflow-x: hidden; } .content{ - position: relative; flex: 1 1 auto; padding-top: 46px; background-color: #F4F4F7; @@ -216,3 +215,19 @@ header{ } } +// footer +footer{ + width: 100%; + background-color: #F4F4F7; + .footer-inner{ + max-width: 1400px; + margin: 0 auto; + padding: 45px 0; + span{ + display: block; + font-size: 11px; + color: #CFCFCF; + text-align: center; + } + } +} \ No newline at end of file diff --git a/src/styles/_main.scss b/src/styles/_main.scss index e69de29..062b404 100644 --- a/src/styles/_main.scss +++ b/src/styles/_main.scss @@ -0,0 +1,356 @@ +// background img +.background-bord{ + position: absolute; + top: 46px; + left: 0; + width: 100%; + height: 280px; + background: url(../../public/static/images/main/main_background.png)no-repeat center; + background-size: cover; + z-index: 0; +} + +// main-wrap +.main-contents{ + position: relative; + z-index: 1; + padding-bottom: 15px; +} + +// contents +.store-id-wrap{ + display: flex; + align-items: center; + justify-content: center; + gap: 12px; + padding: 33.5px 0; + border-bottom: 1px solid rgba(255, 255, 255, 0.08); + background-color: rgba(255, 255, 255, 0.05); + .store-id-title{ + position: relative; + padding-left: 32px; + font-size: 13px; + color: #fff; + &::before{ + content: ''; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + width: 20px; + height: 20px; + background: url(../../public/static/images/main/id_icon.svg)no-repeat center; + } + } + .store-arr{ + display: block; + width: 7px; + height: 10px; + background: url(../../public/static/images/main/store-arr.svg) no-repeat center; + } + .store-id-name{ + font-size: 16px; + color: #fff; + font-weight: 600; + } +} + +// main-search-form +.main-search-wrap{ + display: flex; + align-items: center; + justify-content: center; + padding: 45px 0; + .search-raido-wrap{ + display: flex; + align-items: center; + gap: 16px; + margin-right: 30px; + } +} +.search-input-box{ + display: flex; + align-items: center; + width: 580px; + height: 45px; + border-radius: 100px; + padding: 0 20px; + border: 1px solid rgba(255, 255, 255, 0.30); + background: rgba(31, 31, 31, 0.30); + .main-search{ + flex: 1; + height: 100%; + font-size: 13px; + color: #fff; + background-color: transparent; + outline: none; + border: none; + } + .search-icon{ + width: 20px; + height: 100%; + background-image: url(../../public/static/images/main/main_search.svg); + background-repeat: no-repeat; + background-position: center; + background-size: 21px 21px; + } +} + +// main-contents-inner +.main-product-list-wrap{ + max-width: 1400px; + margin: 0 auto; + .main-product-list{ + display: flex; + gap: 24px; + margin-bottom: 24px; + .product-item{ + display: flex; + flex-direction: column; + padding: 40px; + border-radius: 6px; + background: #FFF; + box-shadow: 0px 3px 30px 0px rgba(0, 0, 0, 0.02); + &.item01{flex: 1; max-height: 400px;} + &.item02{flex: none; width: 451px; max-height: 400px;} + &.item03{flex: 1;} + &.item04{flex: none; width: 351px;} + &.item05{flex: none; width: 451px;} + .product-item-title-wrap{ + display: flex; + align-items: center; + .product-item-title{ + display: flex; + align-items: center; + font-size: 16px; + color: #101010; + font-weight: 600; + .item-logo{ + display: block; + width: 40px; + height: 40px; + border-radius: 50px; + background: #14324F; + margin-right: 12px; + background-repeat: no-repeat; + background-size: 22px 22px; + background-position: center; + &.ico01{background-image: url(../../public/static/images/main/product_ico01.svg);} + &.ico02{background-image: url(../../public/static/images/main/product_ico02.svg);} + &.ico03{background-image: url(../../public/static/images/main/product_ico03.svg);} + &.ico04{background-image: url(../../public/static/images/main/product_ico04.svg);} + &.ico05{background-image: url(../../public/static/images/main/product_ico05.svg);} + } + } + .more-btn{ + display: block; + width: 20px; + height: 20px; + margin-left: auto; + background: url(../../public/static/images/main/more_btn.svg)no-repeat center; + } + } + .product-item-content{ + margin-top: 30px; + overflow: hidden; + .recently-list{ + .recently-item{ + border: 1px solid #F2F2F2; + background-color: transparent; + padding: 29.9px 20px; + margin-bottom: 5px; + cursor: pointer; + .item-inner{ + display: flex; + align-items: center; + span{ + position: relative; + display: block; + font-size: 13px; + color: #101010; + font-weight: 400; + padding: 0 10px; + &.time{ + padding-left: 22px; + &::before{ + content: ''; + position: absolute; + top: 50%; + left: 0; + transform: translateY(-50%); + width: 14px; + height: 14px; + background:url(../../public/static/images/main/clock.svg)no-repeat center; + background-size: cover; + } + } + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 1px; + height: 10px; + background-color: #BBB; + } + &:last-child{ + &:after{ + display: none; + } + } + } + } + &:last-child{ + margin-bottom: 5px; + } + } + } + .notice-box{ + height: 100%; + overflow-y: auto; + .notice-day{ + font-size: 13px; + color: #666; + font-weight: 400; + margin-bottom: 7px; + } + .notice-title{ + font-size: 14px; + color: #101010; + font-weight: 600; + margin-bottom: 25px; + line-height: 24px; + word-break: keep-all; + } + .notice-contents{ + font-size: 12px; + color: #666; + font-weight: 400; + line-height: 22px; + span{ + position: relative; + display: block; + padding-left: 10px; + &::before{ + content: ''; + position: absolute; + top: 10px; + left: 3px; + width: 3px; + height: 3px; + border-radius: 100%; + background-color: #666; + } + } + } + &::-webkit-scrollbar {width: 4px; /* 스크롤바의 너비 */} + &::-webkit-scrollbar-thumb {background: #697C8F; /* 스크롤바의 색상 */} + &::-webkit-scrollbar-track {background: transparent; /*스크롤바 뒷 배경 색상*/} + } + .faq-item{ + position: relative; + margin-bottom: 10px; + cursor: pointer; + .faq-item-inner{ + display: flex; + align-items: center; + + .faq-num{ + flex: none; + padding: 7px 12.5px; + font-size: 13px; + color: #101010; + font-weight: 600; + border-radius: 110px; + border: 1px solid rgba(242, 242, 242, 0.95); + margin-right: 20px; + } + .faq-title{ + width: 0; + flex: 1 1 auto; + font-size: 13px; + color: #101010; + font-weight: 500; + padding-right: 96px; + white-space: nowrap; + text-overflow: ellipsis; + overflow: hidden; + } + .faq-day{ + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + font-size: 13px; + color: #101010; + font-weight: 400; + } + } + &:last-child{ + margin-bottom: 0; + } + } + .data-download-wrap{ + width: 100%; + .data-down{ + display: block; + width: 100%; + padding: 20px; + text-align: left; + border-radius: 4px; + background-color: #697C8F; + margin-bottom: 5px; + span{ + position: relative; + display: block; + padding-right: 30px; + font-size: 13px; + color: #fff; + font-weight: 400; + &:after{ + content: ''; + position: absolute; + top: 50%; + right: 0; + transform: translateY(-50%); + width: 18px; + height: 16px; + background: url(../../public/static/images/main/download.svg)no-repeat center; + background-size: cover; + } + } + &:last-child{ + margin-bottom: 0; + } + } + } + .contact-info-list{ + padding: 30px; + border-radius: 4px; + background-color: #F4F4F7; + .info-item{ + display: flex; + align-items: center; + padding: 15px; + border-bottom: 1px solid #fff; + &:first-child{padding-top: 0;} + &:last-child{padding-bottom: 0; border: none;} + .icon-box{ + display: flex; + margin-right: 12px; + } + .infor-data{ + font-size: 13px; + color: #101010; + font-weight: 500; + } + } + } + } + } + &:last-child{ + margin-bottom: 0; + } + } +} \ No newline at end of file diff --git a/src/styles/_reset.scss b/src/styles/_reset.scss index a47b525..432376c 100644 --- a/src/styles/_reset.scss +++ b/src/styles/_reset.scss @@ -122,7 +122,9 @@ button{ outline: none; cursor: pointer; } - +.pre{ + font-family: 'Pretendard', sans-serif !important; +} // button .btn-frame{ @@ -418,4 +420,73 @@ input[type=text]{ border: 1px solid #1083E3; } } -} \ No newline at end of file +} + +// sort-main-radio +.d-check-radio { + line-height: 1.1; + cursor: pointer; + input[type=radio]{ + position: static; + margin-left: 0; + cursor: pointer; + opacity: 0; + z-index: 1; + flex: 0 0 auto; + } + label{ + position: relative; + padding-left: 10px; + margin-bottom: 0; + word-break: break-all; + line-height: 1.2; + display: inline; + vertical-align: top; + color: #fff; + font-size: 13px; + font-weight: 400; + cursor: pointer; + &::before{ + cursor: pointer; + content: ""; + display: inline-block; + position: absolute; + width: 17px; + height: 17px; + top:2px; + left: 0; + margin-left: -12px; + border: 1px solid #999999; + border-radius: 100%; + background-color: transparent; + text-align:center; + font-size:13px; + line-height:1.4; + transition: border 0.15s ease-in-out, color 0.15s ease-in-out; + } + &::after{ + cursor: pointer; + content: ""; + display: inline-block; + position: absolute; + width: 9px; + height: 9px; + top:6px; + left: 4.8px; + margin-left: -.8rem; + border: none; + border-radius: 100%; + background-color: #fff; + text-align:center; + font-size:13px; + line-height:1.4; + opacity: 0; + visibility: hidden; + transition: opacity 0.15s ease-in-out, color 0.15s ease-in-out; + } + } + input[type=radio]:checked + label::after{ + opacity: 1; + visibility: visible; + } +}