qcast3/onsitesurvey
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Compare commits

base: qcast3:1746c9174228b8b37fbd32f9d51bc02dd7907721
Branches Tags
qcast3:main
qcast3:dev
qcast3:feature/submition-target
qcast3:feature/pdf-tracking
qcast3:backup
qcast3:release
..
compare: qcast3:0d12239460e0332d00fc7762a05c254ab2f7db31
Branches Tags
qcast3:dev
qcast3:feature/submition-target
qcast3:feature/pdf-tracking
qcast3:backup
qcast3:main
qcast3:release

No commits in common. "1746c9174228b8b37fbd32f9d51bc02dd7907721" and "0d12239460e0332d00fc7762a05c254ab2f7db31" have entirely different histories.
1746c91742 ... 0d12239460

19 changed files with 35 additions and 632 deletions
Show Stats Expand all files Collapse all files

25
src/app/layout.tsx
View File

@ -1,7 +1,6 @@
import type { Metadata } from 'next'
import ReactQueryProviders from '@/providers/ReactQueryProvider'
import EdgeProvider from '@/providers/EdgeProvider'
import PopupController from '@/components/ui/PopupController'
import '@/styles/style.scss'
@ -23,19 +22,17 @@ interface RootLayoutProps {
export default async function RootLayout({ children, header, footer, floatBtn }: RootLayoutProps): Promise<ReactNode> {
return (
<ReactQueryProviders>
<EdgeProvider>
<html lang="en">
<body>
<div className="wrap">
{header}
{children}
{footer}
{floatBtn}
</div>
<PopupController />
</body>
</html>
</EdgeProvider>
<html lang="en">
<body>
<div className="wrap">
{header}
{children}
{footer}
{floatBtn}
</div>
<PopupController />
</body>
</html>
</ReactQueryProviders>
)
}

24
src/app/suitable/layout.tsx
View File

@ -1,24 +0,0 @@
import { ReactNode } from 'react'
interface SuitableLayoutProps {
children: ReactNode
}
export default function layout({ children }: SuitableLayoutProps) {
return (
<>
<div className="container">
<div className="sale-contents">
<div className="border-frame">
<div className="pw-guide">
<div className="pw-guide-txt">この適合表は参考資料として使用してください.</div>
<div className="pw-guide-txt">詳細やお問い合わせは1：1お問い合わせをご利用ください.</div>
<div className="pw-guide-txt">屋根材の選択or屋根材名を直接入力してください.</div>
</div>
</div>
{children}
</div>
</div>
</>
)
}

4
src/app/suitable/page.tsx
View File

@ -1,9 +1,7 @@
import Suitable from '@/components/suitable/Suitable'
export default function page() {
return (
<>
<Suitable />
<h1>지붕재 적합성</h1>
</>
)
}

32
src/components/popup/SuitableDetailPopup.tsx
View File

@ -1,32 +0,0 @@
export default function SuitableDetailPopup() {
return (
<div className="modal-popup">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<div className="modal-header-inner">
<div className="modal-name-wrap">
<div className="modal-img">
<img src="/assets/images/layout/modal_header_icon03.svg" alt="" />
</div>
<div className="modal-name">屋根材適合性詳細 </div>
</div>
<button className="modal-close"></button>
</div>
</div>
<div className="modal-body">
<div className={`compliance-check-bx act`}>
<div className="check-name-wrap">
<div className="check-name">アースティ４０</div>
<div className="check-name-btn">
<button className="bx-btn"></button>
</div>
</div>
<div className="compliance-check-pop-contents"></div>
</div>
</div>
</div>
</div>
</div>
)
}

87
src/components/suitable/Suitable.tsx
View File

@ -1,87 +0,0 @@
'use client'
import { useState } from 'react'
import SuitableCheckData from './SuitableCheckData'
import SuitableNoData from './SuitableNoData'
export default function Suitable() {
const [reference, setReference] = useState(false)
return (
<div className="border-frame">
<div className="sale-form-bx">
<select className="select-form" name="" id="">
<option value="">屋根材を選択してください.</option>
<option value="">屋根材を選択してください.</option>
<option value="">屋根材を選択してください.</option>
<option value="">屋根材を選択してください.</option>
<option value="">屋根材を選択してください.</option>
</select>
</div>
<div className="sale-form-bx">
<div className="search-input">
<input type="text" className="search-frame" placeholder="屋根材 製品名を入力してください." />
<button className="search-icon"></button>
</div>
</div>
<div className="compliance-check-wrap">
<div className={`compliance-check-bx ${reference ? 'act' : ''}`}>
<div className="check-name-wrap">
<div className="check-name">凡例</div>
<div className="check-name-btn">
<button className="bx-btn" onClick={() => setReference(!reference)}></button>
</div>
</div>
<ul className="reference-list">
<li className="reference-item">
<div className="reference-item-bx">
<i className="compliance-icon check"></i>設置可能
</div>
</li>
<li className="reference-item">
<div className="reference-item-bx">
<i className="compliance-icon x"></i>設置可能
</div>
</li>
<li className="reference-item">
<div className="reference-item-bx">
<i className="compliance-icon quest"></i>設置可能
</div>
</li>
<li className="reference-item">
<div className="reference-item-bx">
<i className="compliance-icon tip"></i>設置可能
</div>
</li>
</ul>
</div>
{/* checkData */}
{/* 데이터 없을경우 버튼 영역 안보여야함 */}
<SuitableCheckData />
<SuitableCheckData />
<SuitableCheckData />
<SuitableCheckData />
</div>
{/* 데이터 없을경우 버튼 영역 안보여야함 */}
<div className="btn-flex-wrap com">
<div className="btn-bx">
<button className="btn-frame n-blue icon">
全選択<i className="btn-arr"></i>
</button>
</div>
<div className="btn-bx">
<button className="btn-frame red icon">
詳細を見る<i className="btn-arr"></i>
</button>
</div>
<div className="btn-bx">
<button className="btn-frame n-blue icon">
選択ダウンロード<i className="btn-arr"></i>
</button>
</div>
</div>
{/* 검색기록 없을떄 위에 두 영역 안보이고 이 부분만 보여야 함*/}
{/* <SuitableNoData /> */}
</div>
)
}

68
src/components/suitable/SuitableCheckData.tsx
View File

@ -1,68 +0,0 @@
'use client'
export default function SuitableCheckData() {
return (
<>
<div className={`compliance-check-bx act`}>
<div className="check-name-wrap">
<div className="check-form-box com-tit">
<input type="checkbox" id="ch01" />
<label htmlFor="ch01">アースティ４０</label>
</div>
<div className="check-name-btn">
<button className="bx-btn"></button>
</div>
</div>
<ul className="reference-list check">
<li className="reference-item">
<div className="check-item-wrap">
<div className="check-form-box com-txt">
<input type="checkbox" id="ch02" />
<label htmlFor="ch02">屋根技研 支持瓦</label>
</div>
<div className="compliance-icon-wrap">
<i className="compliance-icon check"></i>
<i className="compliance-icon x"></i>
</div>
</div>
</li>
<li className="reference-item">
<div className="check-item-wrap">
<div className="check-form-box com-txt">
<input type="checkbox" id="ch03" />
<label htmlFor="ch03">屋根技研 支持金具</label>
</div>
<div className="compliance-icon-wrap">
<i className="compliance-icon x"></i>
<i className="compliance-icon tip"></i>
</div>
</div>
</li>
<li className="reference-item">
<div className="check-item-wrap">
<div className="check-form-box com-txt">
<input type="checkbox" id="ch04" />
<label htmlFor="ch04">屋根技研YGアンカー</label>
</div>
<div className="compliance-icon-wrap">
<i className="compliance-icon tip"></i>
<i className="compliance-icon quest"></i>
</div>
</div>
</li>
<li className="reference-item">
<div className="check-item-wrap">
<div className="check-form-box com-txt">
<input type="checkbox" id="ch05" />
<label htmlFor="ch05">ダイドハント支持瓦Ⅱ</label>
</div>
<div className="compliance-icon-wrap">
<i className="compliance-icon check"></i>
</div>
</div>
</li>
</ul>
</div>
</>
)
}

15
src/components/suitable/SuitableNoData.tsx
View File

@ -1,15 +0,0 @@
export default function SuitableNoData() {
return (
<>
<div className="compliace-nosearch">
<span className="mb10">検索結果はありません。</span>
<span className="mb10">屋根材適合性表にない製品の情報を入力してください。 今後返信いたします。</span>
<span>
<button className="btn-frame n-blue icon">
お問い合わせ登録<i className="btn-arr"></i>
</button>
</span>
</div>
</>
)
}

22
src/components/ui/Main.tsx
View File

@ -1,9 +1,27 @@
'use client'
import { useRouter } from 'next/navigation'
import { useHeaderStore } from '@/store/header'
import { useSideNavState } from '@/store/sideNavState'
import { usePathname, useRouter } from 'next/navigation'
import { useEffect } from 'react'
export default function Main() {
const router = useRouter()
const pathname = usePathname()
const { setBackBtn } = useHeaderStore()
const { reset } = useSideNavState()
/**
* 헤더 뒤로가기 버튼 컨트롤
* 사이드바 초기화 컨트롤
*/
useEffect(() => {
if (pathname === '/') {
setBackBtn(false)
}
//사이드바 초기화
reset()
}, [pathname])
return (
<>
@ -12,7 +30,7 @@ export default function Main() {
<div className="head-block-tit">屋根材の照会</div>
<div className="head-block-text">ご使用の屋根材の適合性をご確認いただけます</div>
<div className="head-block-link-wrap">
<button className="head-block-link" onClick={() => alert('test')}>
<button className="head-block-link">
照会まさに移動<i className="block-arr"></i>
</button>
</div>

7
src/components/ui/PopupController.tsx
View File

@ -1,12 +1,8 @@
'use client'
import { usePopupController } from '@/store/popupController'
import MemberInfomationPopup from '../popup/MemberInformationPopup'
import ZipCodePopup from '../popup/ZipCodePopup'
import Alert from './common/Alert'
import DoubleBtnAlert from './common/DoubleBtnAlert'
import SuitableDetailPopup from '../popup/SuitableDetailPopup'
export default function PopupController() {
const popupController = usePopupController()
@ -15,9 +11,6 @@ export default function PopupController() {
<>
{popupController.memberInfomationPopup && <MemberInfomationPopup />}
{popupController.zipCodePopup && <ZipCodePopup />}
{popupController.alert && <Alert />}
{popupController.alert2 && <DoubleBtnAlert />}
{popupController.suitableDetailPopup && <SuitableDetailPopup />}
</>
)
}

24
src/components/ui/common/Alert.tsx
View File

@ -1,24 +0,0 @@
'use client'
import { usePopupController } from '@/store/popupController'
export default function Alert() {
const { alertMsg, alertBtn } = usePopupController()
return (
<div className="modal-popup alert">
<div className="modal-dialog">
<div className="modal-content">
<div className="alert-tit">{alertMsg}</div>
<div className="alert-btn-wrap">
<div className="alert-btn-bx">
<button className="btn-frame red min" onClick={() => alertBtn()}>
確認
</button>
</div>
</div>
</div>
</div>
</div>
)
}

21
src/components/ui/common/DoubleBtnAlert.tsx
View File

@ -1,21 +0,0 @@
import React from 'react'
export default function DoubleBtnAlert() {
return (
<div className="modal-popup alert">
<div className="modal-dialog">
<div className="modal-content">
<div className="alert-tit">本当に削除しますか?</div>
<div className="alert-btn-wrap">
<div className="alert-btn-bx">
<button className="btn-frame red min">確認</button>
</div>
<div className="alert-btn-bx">
<button className="btn-frame n-blue min">キャンセル</button>
</div>
</div>
</div>
</div>
</div>
)
}

64
src/providers/EdgeProvider.tsx
View File

@ -1,64 +0,0 @@
'use client'
import { useHeaderStore } from '@/store/header'
import { usePopupController } from '@/store/popupController'
import { useSideNavState } from '@/store/sideNavState'
import { usePathname } from 'next/navigation'
import { useEffect } from 'react'
declare global {
interface Window {
alert2: (msg: string, alert2BtnYes?: () => void, alert2BtnNo?: () => void) => void
}
}
export default function EdgeProvider({ children }: React.PropsWithChildren) {
const pathname = usePathname()
const { setBackBtn } = useHeaderStore()
const { reset } = useSideNavState()
const { setAlertMsg, setAlertBtn, setAlert, setAlert2, setAlert2BtnYes, setAlert2BtnNo } = usePopupController()
const alertFunc = (msg: string, alertBtn: Function) => {
console.log('🚀 ~ alertFunc ~ msg:', msg)
setAlertMsg(msg)
setAlertBtn(alertBtn)
setAlert(true)
}
/**
* alert2 함수
* @param msg alert 메시지
* @param alertBtn2Yes alert 확인 버튼 클릭시 실행되는 함수
* @param alertBtn2No alert 취소 버튼 클릭시 실행되는 함수
*/
const alertFunc2 = (msg: string, alertBtn2Yes: Function, alertBtn2No: Function) => {
console.log('🚀 ~ alertFunc ~ msg:', msg)
setAlertMsg(msg)
setAlert2BtnYes(alertBtn2Yes)
setAlert2BtnNo(alertBtn2No)
setAlert2(true)
}
useEffect(() => {
window.alert = function (msg, alertBtn = () => setAlert(false)) {
alertFunc(msg, alertBtn)
}
window.alert2 = function (msg, alert2BtnYes = () => setAlert2(false), alert2BtnNo = () => setAlert2(false)) {
alertFunc2(msg, alert2BtnYes, alert2BtnNo)
}
}, [])
/**
* 헤더 뒤로가기 버튼 컨트롤
* 사이드바 초기화 컨트롤
*/
useEffect(() => {
if (pathname === '/') {
setBackBtn(false)
}
//사이드바 초기화
reset()
}, [pathname])
return <>{children}</>
}

36
src/store/popupController.ts
View File

@ -3,59 +3,23 @@ import { create } from 'zustand'
type PoupControllerState = {
memberInfomationPopup: boolean
zipCodePopup: boolean
alertMsg: string
setAlertMsg: (value: string) => void
alert: boolean
alertBtn: Function
alert2: boolean
alert2BtnYes: Function
alert2BtnNo: Function
setMemberInfomationPopup: (value: boolean) => void
setZipCodePopup: (value: boolean) => void
setAlert: (value: boolean) => void
setAlertBtn: (value: Function) => void
setAlert2: (value: boolean) => void
setAlert2BtnYes: (value: Function) => void
setAlert2BtnNo: (value: Function) => void
suitableDetailPopup: boolean
setSuitableDetailPopup: (value: boolean) => void
reset: () => void
}
type InitialState = {
memberInfomationPopup: boolean
zipCodePopup: boolean
alertMsg: string
alert: boolean
alertBtn: Function
alert2: boolean
alert2BtnYes: Function
alert2BtnNo: Function
suitableDetailPopup: boolean
}
const initialState: InitialState = {
memberInfomationPopup: false,
zipCodePopup: false,
alertMsg: '',
alert: false,
alertBtn: () => {},
alert2: false,
alert2BtnYes: () => {},
alert2BtnNo: () => {},
suitableDetailPopup: false,
}
export const usePopupController = create<PoupControllerState>((set) => ({
...initialState,
setMemberInfomationPopup: (value: boolean) => set((state) => ({ ...state, memberInfomationPopup: value })),
setZipCodePopup: (value: boolean) => set((state) => ({ ...state, zipCodePopup: value })),
setAlertMsg: (value: string) => set((state) => ({ ...state, alertMsg: value })),
setAlert: (value: boolean) => set((state) => ({ ...state, alert: value })),
setAlertBtn: (value: Function) => set((state) => ({ ...state, alertBtn: value })),
setAlert2: (value: boolean) => set((state) => ({ ...state, alert2: value })),
setAlert2BtnYes: (value: Function) => set((state) => ({ ...state, alert2BtnYes: value })),
setAlert2BtnNo: (value: Function) => set((state) => ({ ...state, alert2BtnNo: value })),
setSuitableDetailPopup: (value: boolean) => set((state) => ({ ...state, suitableDetailPopup: value })),
reset: () => set(initialState),
}))

13
src/styles/base/_inputs.scss
View File

@ -82,13 +82,13 @@ input::-webkit-inner-spin-button {
width: 100%;
padding: 0 10px;
height: 40px;
font-size: $font-s-13;
color: $font-c;
font-weight: $font-w-400;
background-color: $white-fff;
border: 1px solid #D5DEE8;
border-radius: 4px;
input{
font-size: $font-s-13;
color: $font-c;
font-weight: $font-w-400;
width: 100%;
height: 100%;
background-color: transparent;
@ -194,11 +194,4 @@ input::-webkit-inner-spin-button {
}
}
}
&.change{
height: 40px;
padding-left: 10px;
&::before{
display: none;
}
}
}

6
src/styles/components/_login.scss
View File

@ -16,10 +16,4 @@
margin-top: 24px;
}
}
}
@media screen and (max-width: 360px){
.login-contents{
padding: 70px 34px 0;
}
}

8
src/styles/components/_main.scss
View File

@ -88,12 +88,4 @@
}
}
}
}
@media screen and (max-width: 360px){
.main-grid-wrap{
.main-grid-bx{
padding: 40px 20px 20px;
}
}
}

7
src/styles/components/_pop-contents.scss
View File

@ -33,11 +33,4 @@
.btn-flex-wrap{
margin-top: 20px;
}
}
// 지붕재 적합성 상세
.compliance-check-pop-contents{
padding: 14px;
border-top: 1px solid #ECECEC;
margin-top: 10px;
}

203
src/styles/components/_sub.scss
View File

@ -17,10 +17,6 @@
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
}
}
.data-input-guide{
margin-top: 8px;
@include defaultFont($font-s-13, $font-w-400, #A8B6C7);
}
}
.btn-flex-wrap{
@ -29,14 +25,6 @@
.btn-bx{
flex: 1;
}
&.com{
.btn-bx{
flex: 1 1 auto;
button{
font-size: 12px;
}
}
}
}
// 매물 common
@ -189,13 +177,6 @@
padding-left: 6px;
}
}
&.nodata{
.sale-item-nodata{
padding: 5px 0;
text-align: center;
@include defaultFont($font-s-15, $font-w-500, $font-c);
}
}
}
.sale-edit-btn{
margin-top: 24px;
@ -354,14 +335,6 @@
top: 0;
right: 0;
}
&.nodata{
padding-right: 0;
.inquiry-item-nodata{
padding: 10px 0;
text-align: center;
@include defaultFont($font-s-15, $font-w-500, $font-c);
}
}
}
}
}
@ -387,12 +360,9 @@
@include flex(0px);
align-items: center;
.file-item-name{
@include ellipsis(1);
@include defaultFont($font-s-13, $font-w-400, $font-c);
padding-right: 10px;
}
.file-del{
flex: none;
display: block;
margin-left: auto;
width: 16px;
@ -446,177 +416,4 @@
.inquiry-answer-date{
@include defaultFont($font-s-13, $font-w-400, #F86A56);
}
}
// 비밀번호 변경
.border-frame{
padding: 20px;
border-top: 1px solid #ECECEC;
border-bottom: 1px solid #ECECEC;
background-color: #fff;
margin-bottom: 10px;
&:last-child{
border-bottom: none;
padding-bottom: 0;
margin-bottom: 0;
}
}
.pw-guide{
.pw-guide-tit{
@include defaultFont($font-s-16, $font-w-500, #1259CB);
}
.pw-guide-txt{
@include defaultFont($font-s-13, $font-w-400, #417DDC);
}
}
// 지붕재 적합성
.compliance-icon{
display: block;
width: 22px;
height: 22px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
&.check{
background-image: url(/assets/images/sub/compliance_check_icon.svg);
}
&.x{
background-image: url(/assets/images/sub/compliance_x_icon.svg);
}
&.quest{
background-image: url(/assets/images/sub/compliance_quest_icon.svg);
}
&.tip{
background-image: url(/assets/images/sub/compliance_tip_icon.svg);
}
}
.compliance-check-wrap{
padding-top: 10px;
}
.compliance-check-bx{
position: relative;
padding: 14px 18px;
border: 1px solid #EFEFEF;
border-radius: 4px;
margin-bottom: 10px;
&:last-child{
margin-bottom: 0;
}
&.act{
.bx-btn{
transform: rotate(0) !important;
}
.reference-list{
display: block
}
}
}
.check-name-wrap{
@include flex(0px);
align-items: center;
.check-name{
@include defaultFont($font-s-13, $font-w-500, $font-c);
}
.check-name-btn{
margin-left: auto;
.bx-btn{
display: block;
width: 22px;
height: 22px;
background: url(/assets/images/sub/compliance_bx_icon.svg)no-repeat center;
transform: rotate(180deg);
}
}
}
.reference-list{
display: none;
margin-top: 10px;
padding-top: 14px;
border-top: 1px solid #ECECEC;
transition: all .15s ease-in-out;
.reference-item{
margin-bottom: 8px;
padding-left: 14px;
.reference-item-bx{
@include flex(10px);
@include defaultFont($font-s-13, $font-w-400, $font-c);
align-items: center;
}
&:last-child{
margin-bottom: 0;
}
}
&.check{
.reference-item{
margin-bottom: 14px;
}
}
}
.compliace-nodata{
margin-top: 24px;
padding: 30px 0;
@include defaultFont($font-s-13, $font-w-400, $font-c);
text-align: center;
}
.compliace-nosearch{
padding: 30px 0;
span{
display: block;
@include defaultFont($font-s-13, $font-w-400, $font-c);
text-align: center;
}
}
.check-form-box{
&.com-tit{
label{
&:before{
width: 20px;
height: 20px;
top: 0;
}
}
input[type="checkbox"]:checked + label{
font-weight: 500;
&::after{
left: -1px;
}
}
}
&.com-txt{
label{
@include defaultFont($font-s-13, $font-w-400, #8595A7);
&:before{
width: 20px;
height: 20px;
top: 0;
}
}
input[type="checkbox"]:checked + label{
&::after{
left: -1px;
}
}
}
}
.check-item-wrap{
display: flex;
align-items: center;
}
.compliance-icon-wrap{
margin-left: auto;
display: flex;
align-items: center;
}
@media screen and (max-width: 360px){
.btn-flex-wrap{
flex-direction: column;
}
.data-check-wrap{
.radio-form-box,
.check-form-box{
width: 100%;
}
}
}

1
src/styles/publishpage.scss
View File

@ -31,7 +31,6 @@ $default-color: #2C2C2C;
.p-body{
margin-top: 30px;
padding-bottom: 70px;
flex: 1 1 auto;
.p-contents{
max-width: 1480px;