main page 생성

This commit is contained in:
김창수 2025-04-28 17:09:11 +09:00
parent a701a9c034
commit 6ce4759db6
13 changed files with 191 additions and 9 deletions

View File

@ -0,0 +1,3 @@
<svg width="6" height="11" viewBox="0 0 6 11" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 1.5L5 5.5L1 9.5" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 211 B

View File

@ -0,0 +1,3 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M5.29297 0.292734C5.65908 -0.0733816 6.23809 -0.0959754 6.63086 0.224375L6.70703 0.292734L11.707 5.29273C12.0976 5.68326 12.0976 6.31627 11.707 6.7068L6.70703 11.7068C6.31651 12.0973 5.68349 12.0973 5.29297 11.7068C4.90244 11.3163 4.90244 10.6833 5.29297 10.2927L8.58594 6.99977H1C0.447715 6.99977 0 6.55205 0 5.99977C0 5.44748 0.447715 4.99977 1 4.99977H8.58594L5.29297 1.7068L5.22461 1.63063C4.90426 1.23785 4.92685 0.65885 5.29297 0.292734Z" fill="#7896BA" fill-opacity="0.6"/>
</svg>

After

Width:  |  Height:  |  Size: 593 B

View File

@ -0,0 +1,6 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M12.5 3H11.5C7.02166 3 4.78249 3 3.39124 4.39124C2 5.78249 2 8.02166 2 12.5C2 16.9783 2 19.2175 3.39124 20.6088C4.78249 22 7.02166 22 11.5 22C15.9783 22 18.2175 22 19.6088 20.6088C21 19.2175 21 16.9783 21 12.5V11.5" stroke="#B2A3FF" stroke-width="1.5" stroke-linecap="round"/>
<path d="M22 5.5C22 7.433 20.433 9 18.5 9C16.567 9 15 7.433 15 5.5C15 3.567 16.567 2 18.5 2C20.433 2 22 3.567 22 5.5Z" stroke="#B2A3FF" stroke-opacity="0.5" stroke-width="1.5"/>
<path d="M7 11H11" stroke="#B2A3FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7 16H15" stroke="#B2A3FF" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 775 B

View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M20 11V7.81818C20 6.12494 20 5.27832 19.732 4.60214C19.3012 3.5151 18.3902 2.65765 17.2352 2.2522C16.5168 2 15.6173 2 13.8182 2C10.6698 2 9.09563 2 7.83836 2.44135C5.81714 3.15089 4.22281 4.65142 3.46894 6.55375C3 7.73706 3 9.21865 3 12.1818V14.7273C3 17.7966 3 19.3313 3.8477 20.3971C4.09058 20.7025 4.37862 20.9736 4.70307 21.2022C5.74797 21.9384 7.21706 21.9952 10 21.9996" stroke="#FFA1A1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M3 12C3 10.1591 4.49238 8.66667 6.33333 8.66667C6.99912 8.66667 7.78404 8.78333 8.43137 8.60988C9.00652 8.45576 9.45576 8.00652 9.60988 7.43136C9.78333 6.78404 9.66667 5.99912 9.66667 5.33333C9.66667 3.49238 11.1591 2 13 2" stroke="#FFA1A1" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M14.3477 21.8557L14.1909 21.1223L14.3477 21.8557ZM13.1443 20.6523L13.8777 20.8091L13.1443 20.6523ZM14.0207 18.1117L13.4903 17.5814H13.4903L14.0207 18.1117ZM20.7963 15.4773L21.4458 15.1023L20.7963 15.4773ZM20.7963 16.9981L21.4458 17.3731L20.7963 16.9981ZM19.5227 14.2037L19.8977 13.5542L19.5227 14.2037ZM17.3285 14.8039L17.8588 15.3342L17.3285 14.8039ZM18.0019 14.2037L17.6269 13.5542L17.6269 13.5542L18.0019 14.2037ZM20.1961 17.6715L19.6658 17.1412L16.358 20.449L16.8883 20.9793L17.4186 21.5097L20.7265 18.2018L20.1961 17.6715ZM14.0207 18.1117L14.551 18.642L17.8588 15.3342L17.3285 14.8039L16.7982 14.2735L13.4903 17.5814L14.0207 18.1117ZM14.3477 21.8557L14.1909 21.1223C14.0155 21.1598 13.8753 21.1897 13.7548 21.2121C13.6333 21.2347 13.5536 21.2454 13.4996 21.2488C13.4441 21.2524 13.4479 21.2458 13.4825 21.2547C13.5296 21.2669 13.5936 21.2972 13.6482 21.3518L13.1179 21.8821L12.5876 22.4124C12.9113 22.7362 13.3158 22.7636 13.5948 22.7458C13.8603 22.7289 14.1839 22.6577 14.5045 22.5891L14.3477 21.8557ZM13.1443 20.6523L12.4109 20.4955C12.3423 20.8161 12.2711 21.1397 12.2542 21.4052C12.2364 21.6842 12.2638 22.0887 12.5876 22.4124L13.1179 21.8821L13.6482 21.3518C13.7028 21.4064 13.7331 21.4704 13.7453 21.5175C13.7542 21.5521 13.7476 21.5559 13.7512 21.5004C13.7546 21.4464 13.7653 21.3667 13.7879 21.2452C13.8103 21.1247 13.8402 20.9845 13.8777 20.8091L13.1443 20.6523ZM20.1961 14.8039L19.6658 15.3342C20.0333 15.7017 20.1084 15.786 20.1467 15.8523L20.7963 15.4773L21.4458 15.1023C21.2839 14.8218 21.0257 14.5728 20.7265 14.2735L20.1961 14.8039ZM20.1961 17.6715L20.7265 18.2018C21.0257 17.9026 21.2839 17.6535 21.4458 17.3731L20.7963 16.9981L20.1467 16.6231C20.1084 16.6894 20.0333 16.7737 19.6658 17.1412L20.1961 17.6715ZM20.7963 15.4773L20.1467 15.8523C20.2844 16.0908 20.2844 16.3846 20.1467 16.6231L20.7963 16.9981L21.4458 17.3731C21.8514 16.6705 21.8514 15.8049 21.4458 15.1023L20.7963 15.4773ZM20.1961 14.8039L20.7265 14.2735C20.4272 13.9743 20.1782 13.7161 19.8977 13.5542L19.5227 14.2037L19.1477 14.8533C19.214 14.8916 19.2983 14.9667 19.6658 15.3342L20.1961 14.8039ZM17.3285 14.8039L17.8588 15.3342C18.2263 14.9667 18.3106 14.8916 18.3769 14.8533L18.0019 14.2037L17.6269 13.5542C17.3465 13.7161 17.0974 13.9743 16.7982 14.2735L17.3285 14.8039ZM19.5227 14.2037L19.8977 13.5542C19.1951 13.1486 18.3295 13.1486 17.6269 13.5542L18.0019 14.2037L18.3769 14.8533C18.6154 14.7156 18.9092 14.7156 19.1477 14.8533L19.5227 14.2037ZM16.8883 20.9793L16.358 20.449C16.1624 20.6445 15.8952 20.771 15.5155 20.8679C15.3253 20.9165 15.1224 20.954 14.8963 20.9931C14.679 21.0306 14.4303 21.0711 14.1909 21.1223L14.3477 21.8557L14.5045 22.5891C14.7063 22.546 14.9131 22.5124 15.1517 22.4712C15.3814 22.4315 15.6346 22.3856 15.8866 22.3213C16.3914 22.1924 16.9533 21.975 17.4186 21.5097L16.8883 20.9793ZM13.1443 20.6523L13.8777 20.8091C13.9289 20.5697 13.9694 20.321 14.0069 20.1037C14.046 19.8776 14.0835 19.6747 14.1321 19.4845C14.229 19.1048 14.3555 18.8376 14.551 18.642L14.0207 18.1117L13.4903 17.5814C13.025 18.0467 12.8076 18.6086 12.6787 19.1134C12.6144 19.3654 12.5685 19.6186 12.5288 19.8483C12.4876 20.0869 12.454 20.2937 12.4109 20.4955L13.1443 20.6523Z" fill="#FFA1A1" fill-opacity="0.5"/>
</svg>

After

Width:  |  Height:  |  Size: 4.0 KiB

View File

@ -0,0 +1,4 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M8 14H16M8 9H12" stroke="#A0C653" stroke-opacity="0.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M6.09881 19.5C4.7987 19.3721 3.82475 18.9816 3.17157 18.3284C2 17.1569 2 15.2712 2 11.5V11C2 7.22876 2 5.34315 3.17157 4.17157C4.34315 3 6.22876 3 10 3H14C17.7712 3 19.6569 3 20.8284 4.17157C22 5.34315 22 7.22876 22 11V11.5C22 15.2712 22 17.1569 20.8284 18.3284C19.6569 19.5 17.7712 19.5 14 19.5C13.4395 19.5125 12.9931 19.5551 12.5546 19.655C11.3562 19.9309 10.2465 20.5441 9.14987 21.0789C7.58729 21.8408 6.806 22.2218 6.31569 21.8651C5.37769 21.1665 6.29454 19.0019 6.5 18" stroke="#A0C653" stroke-width="1.5" stroke-linecap="round"/>
</svg>

After

Width:  |  Height:  |  Size: 782 B

View File

@ -0,0 +1,5 @@
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M21.9165 10.5C21.9351 10.6556 21.9495 10.8126 21.9598 10.9707C22.0134 11.8009 22.0134 12.6607 21.9598 13.4909C21.6856 17.7332 18.3536 21.1125 14.1706 21.3905C12.7435 21.4854 11.2536 21.4852 9.8294 21.3905C9.33896 21.3579 8.8044 21.2409 8.34401 21.0513C7.83177 20.8403 7.5756 20.7348 7.44544 20.7508C7.31527 20.7668 7.1264 20.9061 6.74868 21.1846C6.08268 21.6757 5.24367 22.0285 3.99943 21.9982C3.37026 21.9829 3.05568 21.9752 2.91484 21.7351C2.77401 21.495 2.94941 21.1626 3.30021 20.4978C3.78674 19.5758 4.09501 18.5203 3.62791 17.6746C2.82343 16.4666 2.1401 15.036 2.04024 13.4909C1.98659 12.6607 1.98659 11.8009 2.04024 10.9707C2.31441 6.72838 5.64639 3.34913 9.8294 3.07107C11.0318 2.99114 12.2812 2.97856 13.5 3.03368" stroke="#D7B85A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M15.3477 9.85572L15.1909 9.1223H15.1909L15.3477 9.85572ZM14.1443 8.65228L14.8777 8.80911L14.1443 8.65228ZM15.0207 6.11171L14.4903 5.58138H14.4903L15.0207 6.11171ZM17.8883 8.97933L18.4186 9.50966L17.8883 8.97933ZM21.7963 3.47729L22.4458 3.10229L21.7963 3.47729ZM21.1961 5.67149L20.6658 5.14116L21.1961 5.67149ZM21.7963 4.99807L22.4458 5.37307L21.7963 4.99807ZM20.5227 2.20375L20.8977 1.55423V1.55423L20.5227 2.20375ZM18.3285 2.80388L18.8588 3.33421L18.3285 2.80388ZM19.0019 2.20375L18.6269 1.55423V1.55423L19.0019 2.20375ZM21.1961 5.67149L20.6658 5.14116L17.358 8.449L17.8883 8.97933L18.4186 9.50966L21.7265 6.20182L21.1961 5.67149ZM15.0207 6.11171L15.551 6.64205L18.8588 3.33421L18.3285 2.80388L17.7982 2.27355L14.4903 5.58138L15.0207 6.11171ZM15.3477 9.85572L15.1909 9.1223C15.0155 9.15981 14.8753 9.18973 14.7548 9.21212C14.6333 9.23472 14.5536 9.2454 14.4996 9.24884C14.4441 9.25237 14.4479 9.24579 14.4825 9.25471C14.5296 9.26685 14.5936 9.29719 14.6482 9.35178L14.1179 9.88211L13.5876 10.4124C13.9113 10.7362 14.3158 10.7636 14.5948 10.7458C14.8603 10.7289 15.1839 10.6577 15.5045 10.5891L15.3477 9.85572ZM14.1443 8.65228L13.4109 8.49546C13.3423 8.8161 13.2711 9.13973 13.2542 9.40523C13.2364 9.68419 13.2638 10.0887 13.5876 10.4124L14.1179 9.88211L14.6482 9.35178C14.7028 9.40637 14.7331 9.47039 14.7453 9.51747C14.7542 9.55207 14.7476 9.55591 14.7512 9.50044C14.7546 9.44641 14.7653 9.36674 14.7879 9.24519C14.8103 9.12473 14.8402 8.98455 14.8777 8.80911L14.1443 8.65228ZM21.1961 2.80388L20.6658 3.33421C21.0333 3.7017 21.1084 3.78597 21.1467 3.85229L21.7963 3.47729L22.4458 3.10229C22.2839 2.82184 22.0257 2.57275 21.7265 2.27355L21.1961 2.80388ZM21.1961 5.67149L21.7265 6.20182C22.0257 5.90261 22.2839 5.65353 22.4458 5.37307L21.7963 4.99807L21.1467 4.62307C21.1084 4.6894 21.0333 4.77367 20.6658 5.14116L21.1961 5.67149ZM21.7963 3.47729L21.1467 3.85229C21.2844 4.09077 21.2844 4.38459 21.1467 4.62307L21.7963 4.99807L22.4458 5.37307C22.8514 4.67049 22.8514 3.80488 22.4458 3.10229L21.7963 3.47729ZM21.1961 2.80388L21.7265 2.27355C21.4272 1.97434 21.1782 1.71615 20.8977 1.55423L20.5227 2.20375L20.1477 2.85326C20.214 2.89156 20.2983 2.96671 20.6658 3.33421L21.1961 2.80388ZM18.3285 2.80388L18.8588 3.33421C19.2263 2.96672 19.3106 2.89156 19.3769 2.85326L19.0019 2.20375L18.6269 1.55423C18.3465 1.71615 18.0974 1.97434 17.7982 2.27355L18.3285 2.80388ZM20.5227 2.20375L20.8977 1.55423C20.1951 1.14859 19.3295 1.14859 18.6269 1.55423L19.0019 2.20375L19.3769 2.85327C19.6154 2.71558 19.9092 2.71558 20.1477 2.85327L20.5227 2.20375ZM17.8883 8.97933L17.358 8.449C17.1624 8.64453 16.8952 8.77096 16.5155 8.8679C16.3253 8.91646 16.1224 8.954 15.8963 8.99307C15.679 9.03061 15.4303 9.07112 15.1909 9.1223L15.3477 9.85572L15.5045 10.5891C15.7063 10.546 15.9131 10.5124 16.1517 10.4712C16.3814 10.4315 16.6346 10.3856 16.8866 10.3213C17.3914 10.1924 17.9533 9.97497 18.4186 9.50966L17.8883 8.97933ZM14.1443 8.65228L14.8777 8.80911C14.9289 8.56974 14.9694 8.32097 15.0069 8.1037C15.046 7.87757 15.0835 7.67468 15.1321 7.48447C15.229 7.10477 15.3555 6.83758 15.551 6.64205L15.0207 6.11171L14.4903 5.58138C14.025 6.0467 13.8076 6.60863 13.6787 7.11341C13.6144 7.36544 13.5685 7.61864 13.5288 7.84832C13.4876 8.08687 13.454 8.29366 13.4109 8.49546L14.1443 8.65228Z" fill="#D7B85A" fill-opacity="0.5"/>
<path d="M8.5 15H15.5M8.5 10H11" stroke="#D7B85A" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

After

Width:  |  Height:  |  Size: 4.2 KiB

View File

@ -1,12 +1,13 @@
import Footer from "@/components/layouts/Footer";
import Header from "@/components/layouts/Header";
import MainContents from "@/components/main/MainContents";
export default function Layout(){
return(
<div className="wrap">
<Header name={"Hanasys 現地調査"}/>
<Header name={"Hanasys 現地調査"} backBtn={false}/>
<div className="container">
asdasd
<MainContents/>
</div>
<Footer/>
</div>

View File

@ -6,19 +6,22 @@ import { useState } from 'react';
import Link from 'next/link';
type HeaderProps = {
name: string;
name: string; //header 이름
backBtn: boolean; // 뒤로가기 버튼 유무
}
export default function Header({name}: HeaderProps){
export default function Header({name, backBtn}: HeaderProps){
const [headerAct, setHeaderAct] = useState<boolean>(false);
return(
<div className="header-warp">
<header>
<div className="header-inner">
{/* <div className='back-button-wrap'>
<button className='back-button'></button>
</div> */}
{backBtn &&
<div className='back-button-wrap'>
<button className='back-button'></button>
</div>
}
<h2 className="logo"><Link href={"#"}>{name}</Link></h2>
<div className="side-button-wrap">
<button className="side-button" onClick={() => setHeaderAct(true)}></button>

View File

@ -0,0 +1,63 @@
export default function MainContents(){
return(
<div className="main-contens">
<div className="main-head-block">
<div className="head-block-tit"></div>
<div className="head-block-text">使</div>
<div className="head-block-link-wrap">
<button className="head-block-link"><i className="block-arr"></i></button>
</div>
</div>
<div className="main-grid-wrap">
<div className="main-grid-bx bx01">
<div className="grid-bx-head">
<div className="main-bx-icon">
<img src="/assets/images/main/main_icon01.svg" alt="" />
</div>
<button className="main-bx-arr"></button>
</div>
<div className="grid-bx-body">
<div className="grid-bx-body-tit">調</div>
<div className="grid-bx-body-txt"></div>
</div>
</div>
<div className="main-grid-bx bx02">
<div className="grid-bx-head">
<div className="main-bx-icon">
<img src="/assets/images/main/main_icon02.svg" alt="" />
</div>
<button className="main-bx-arr"></button>
</div>
<div className="grid-bx-body">
<div className="grid-bx-body-tit">調</div>
<div className="grid-bx-body-txt"></div>
</div>
</div>
<div className="main-grid-bx bx03">
<div className="grid-bx-head">
<div className="main-bx-icon">
<img src="/assets/images/main/main_icon03.svg" alt="" />
</div>
<button className="main-bx-arr"></button>
</div>
<div className="grid-bx-body">
<div className="grid-bx-body-tit">1:1お問い合わせ </div>
<div className="grid-bx-body-txt"></div>
</div>
</div>
<div className="main-grid-bx bx04">
<div className="grid-bx-head">
<div className="main-bx-icon">
<img src="/assets/images/main/main_icon04.svg" alt="" />
</div>
<button className="main-bx-arr"></button>
</div>
<div className="grid-bx-body">
<div className="grid-bx-body-tit">1:1問い合わせ登録</div>
<div className="grid-bx-body-txt"> </div>
</div>
</div>
</div>
</div>
)
}

View File

@ -0,0 +1 @@
@forward 'main';

View File

@ -0,0 +1,89 @@
@use "../abstracts" as *;
.main-contens{
width: 100%;
padding: 0 20px;
}
.main-head-block{
padding: 33px 30px;
background: linear-gradient(102deg, #F8F9EC 2.93%, rgba(249, 239, 236, 0.80) 98.22%);
border-radius: 16px;
.head-block-tit{
@include defaultFont($font-s-18, $font-w-600, #F86A56)
}
.head-block-text{
@include defaultFont($font-s-13, $font-w-500, #F86A56)
}
.head-block-link-wrap{
margin-top: 18px;
.head-block-link{
@include flex(10px);
align-items: center;
padding: 8px 13px;
background-color: #CD8888;
border-radius: 100px;
@include defaultFont($font-s-12, $font-w-600, $white-fff);
.block-arr{
display: block;
width: 6px;
height: 11px;
background: url(/assets/images/main/block_arr.svg)no-repeat center;
background-size: cover;
}
}
}
}
.main-grid-wrap{
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 15px;
margin-top: 15px;
.main-grid-bx{
min-height: 160px;
padding: 40px 20px 10px;
border-radius: 16px;
&.bx01{
background: linear-gradient(134deg, #F0EDFF 5.92%, #F0FFF6 96.24%);
}
&.bx02{
background: linear-gradient(134deg, #FFF4F4 3.38%, #F2FFF5 98.09%);
}
&.bx03{
background: linear-gradient(136deg, #F7FAF1 3.75%, #E6FCF7 98.46%);
}
&.bx04{
background: linear-gradient(133deg, #FFFBEF 3.32%, rgba(243, 236, 255, 0.33) 100%);
}
.grid-bx-head{
@include flex(0px);
align-items: center;
.main-bx-icon{
@include flex(0px);
}
.main-bx-arr{
display: block;
margin-left: auto;
width: 24px;
height: 24px;
border-radius: 50%;
background-color: #fff;
background-image: url(/assets/images/main/main_contens_arr.svg);
background-position: center;
background-repeat: no-repeat;
background-size: 12px 12px;
}
}
.grid-bx-body{
margin-top: 16px;
.grid-bx-body-tit{
@include defaultFont($font-s-14, $font-w-600, #7896BA);
}
.grid-bx-body-txt{
@include defaultFont($font-s-12, $font-w-500, #7896BA);
opacity: 0.6;
margin-top: 3px;
}
}
}
}

View File

@ -23,7 +23,6 @@ header{
left: 0;
width: 100%;
height: 66px;
border-bottom:1px solid rgba(236, 236, 236, 0.80);
background-color: $white-fff;
.header-inner{
position: relative;

View File

@ -1,5 +1,5 @@
@use 'abstracts';
@use 'base';
@use 'layout';
@use 'components';