-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+ {mode}
+ {/* 기본정보 */}
+
+ {/* 전기/지붕정보 */}
+
+
)
diff --git a/src/styles/base/_check-radio.scss b/src/styles/base/_check-radio.scss
index d4d2904..47c50cb 100644
--- a/src/styles/base/_check-radio.scss
+++ b/src/styles/base/_check-radio.scss
@@ -85,6 +85,9 @@
input[type="checkbox"]:disabled + label::after{
cursor: default;
}
+ input[type="checkbox"]:disabled:checked + label::before{
+ background-color: #A8B6C7;
+ }
&.ch-bld{
input[type="checkbox"]:checked + label{
font-weight: 500;
diff --git a/src/styles/components/_sub.scss b/src/styles/components/_sub.scss
index ebcb374..0723ab1 100644
--- a/src/styles/components/_sub.scss
+++ b/src/styles/components/_sub.scss
@@ -77,36 +77,11 @@
}
}
}
-.sale-detail-tab-relative{
- height: 40px;
- margin-bottom: 10px;
-}
-.sale-detail-tab-wrap{
- position: fixed;
- top: 66px;
- left: 0;
- width: 100%;
- height: 40px;
- background-color: $white-fff;
- z-index: 98000;
- .sale-detail-tab-inner{
- position: relative;
- @include flex(0px);
- align-items: center;
- height: 100%;
- .sale-detail-tab{
- flex: 1;
- height: 100%;
- background-color: #fff;
- border-top: 1px solid #DDDFE2;
- border-bottom: 1px solid #DDDFE2;
- @include defaultFont($font-s-13, $font-w-500, $font-c);
- &.act{
- color: $white-fff;
- background-color: #5F738E;
- border-color: #5F738E;
- }
- }
+.sale-form-btn-wrap{
+ padding: 20px 20px 0 ;
+ background-color: #fff;
+ .btn-flex-wrap{
+ margin-top: 0;
}
}
@@ -202,6 +177,11 @@
}
// 매물 상세
+.sale-data-table-wrap{
+ padding: 24px;
+ background-color: #fff;
+ border-top: 1px solid #ECECEC;
+}
.sale-data-table{
width: 100%;
table-layout: fixed;
@@ -242,6 +222,63 @@
}
}
+.sale-detail-toggle-wrap{
+ border-top: 1px solid #ECECEC;
+}
+.sale-detail-toggle-bx{
+ border-bottom: 1px solid #ECECEC;
+}
+.sale-detail-toggle-head{
+ @include flex(5px);
+ padding: 14px 18px;
+ background-color: $white-fff;
+ cursor: pointer;
+ .sale-detail-toggle-name{
+ @include defaultFont($font-s-13, $font-w-500, $font-c);
+ }
+ .sale-detail-toggle-btn-wrap{
+ margin-left: auto;
+ .sale-detail-toggle-btn{
+ display: block;
+ width: 22px;
+ height: 22px;
+ background: url(/assets/images/sub/sale_toggle_btn.svg)no-repeat center;
+ background-size: cover
+ }
+ }
+}
+.sale-detail-toggle-cont{
+ display: none;
+ .sale-frame{
+ padding: 24px 20px;
+ &:first-child{
+ padding-top: 24px;
+ }
+ &:last-child{
+ padding-bottom: 24px;
+ }
+ }
+}
+
+.sale-detail-toggle-bx{
+ &.act{
+ .sale-detail-toggle-head{
+ background-color: #5F738E;
+ .sale-detail-toggle-name{
+ color: #fff
+ }
+ .sale-detail-toggle-btn-wrap{
+ .sale-detail-toggle-btn{
+ background: url(/assets/images/sub/sale_toggle_btn_white.svg)no-repeat center;
+ }
+ }
+ }
+ .sale-detail-toggle-cont{
+ display: block;
+ }
+ }
+}
+
// 매물 기본정보
.form-flex{
@include flex(5px);
diff --git a/src/types/Survey.ts b/src/types/Survey.ts
index 1401c47..83d2ec1 100644
--- a/src/types/Survey.ts
+++ b/src/types/Survey.ts
@@ -1,5 +1,3 @@
-import { SEARCH_OPTIONS_ENUM, SEARCH_OPTIONS_PARTNERS_ENUM, SORT_OPTIONS_ENUM } from '@/store/surveyFilterStore'
-
export type SurveyBasicInfo = {
ID: number
REPRESENTATIVE: string
@@ -130,3 +128,5 @@ export type SurveyRegistRequest = {
SUBMISSION_DATE: string | null
DETAIL_INFO: SurveyDetailRequest | null
}
+
+export type Mode = 'CREATE' | 'EDIT' | 'READ' | 'TEMP' // 등록 | 수정 | 상세 | 임시저장
From e3b755896bf7e21f3c641c90ac8854b07d258648 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=EA=B9=80=EB=AF=BC=EC=8B=9D?=
<43837214+Minsiki@users.noreply.github.com>
Date: Fri, 16 May 2025 15:33:00 +0900
Subject: [PATCH 2/2] =?UTF-8?q?[=EC=A1=B0=EC=82=AC=EB=A7=A4=EB=AC=BC]=20?=
=?UTF-8?q?=EC=A0=84=EA=B8=B0.=EC=A7=80=EB=B6=95=EC=A0=95=EB=B3=B4,=20?=
=?UTF-8?q?=EB=B2=84=ED=8A=BC=20=ED=8F=BC=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../survey-sale/detail/ButtonForm.tsx | 81 ++++
.../survey-sale/detail/RoofForm.tsx | 396 ++++++++++++++++++
2 files changed, 477 insertions(+)
create mode 100644 src/components/survey-sale/detail/ButtonForm.tsx
create mode 100644 src/components/survey-sale/detail/RoofForm.tsx
diff --git a/src/components/survey-sale/detail/ButtonForm.tsx b/src/components/survey-sale/detail/ButtonForm.tsx
new file mode 100644
index 0000000..84b4b4c
--- /dev/null
+++ b/src/components/survey-sale/detail/ButtonForm.tsx
@@ -0,0 +1,81 @@
+import { Mode } from '@/types/Survey'
+
+export default function ButtonForm(props: { mode: Mode; setMode: (mode: Mode) => void }) {
+ const { mode, setMode } = props
+ return (
+ <>
+ {mode === 'CREATE' && (
+
+
+
+ {/* 임시저장 */}
+
+
+
+ {/* 저장 */}
+
+
+
+ {/* 목록 */}
+
+
+
+
+ )}
+ {mode === 'TEMP' && (
+
+
+
+ {/* 수정 */}
+
+
+
+ {/* 삭제 */}
+
+
+
+
+ )}
+ {mode === 'EDIT' && (
+
+
+
+ {/* 목록 */}
+
+
+
+ {/* 제출 */}
+
+
+
+ {/* 수정 */}
+
+
+
+ {/* 삭제 */}
+
+
+
+
+ )}
+
+ )
+}
diff --git a/src/components/survey-sale/detail/RoofForm.tsx b/src/components/survey-sale/detail/RoofForm.tsx
new file mode 100644
index 0000000..878fbf2
--- /dev/null
+++ b/src/components/survey-sale/detail/RoofForm.tsx
@@ -0,0 +1,396 @@
+import { useState } from 'react'
+import { Mode, SurveyBasicInfo } from '@/types/Survey'
+
+export default function RoofForm(props: { surveyInfo: Partial
; mode: Mode }) {
+ const { surveyInfo, mode } = props
+ const [isFlip, setIsFlip] = useState(true)
+ return (
+
+
setIsFlip(!isFlip)}>
+
電気 / 屋根情報
+
+
+
+
+
+
+ {/* 전기 관계 */}
+
電気関係
+
+
+ {/* 전기 계약 용량 */}
+
電気契約容量
+
+
+
+ {mode === 'READ' &&
}
+ {mode !== 'READ' && (
+
+
+
+ )}
+
+
+ {/* 전기 소매 회사사 */}
+
電気小売会社
+
+
+
+ {/* 전기 부대 설비 */}
+
+ 電気袋設備※複数選択可能
+
+
+
+
+
+
+
+ {/* 설치 희망 시스템 */}
+
設置希望システム
+ {mode === 'READ' && (
+
+
+
+ )}
+ {mode !== 'READ' && (
+
+
+
+ )}
+
+
+
+
+ {/* 지붕 관계 */}
+
屋根関係
+
+
+ {/* 건축 연수 */}
+
建築研修
+
+ {mode === 'READ' && }
+ {mode !== 'READ' && (
+
+ )}
+
+
+
+ 年
+
+
+
+ {/* 지붕재 */}
+
+ 屋根材※最大2個まで選択可能
+
+
+
+
+
+
+
+ {/* 지붕 모양 */}
+
建築研修
+
+ {mode === 'READ' && }
+ {mode !== 'READ' && (
+
+ )}
+
+
+
+
+
+
+ {/* 지붕 경사도도 */}
+
屋根の斜面
+
+
+ 寸
+
+
+
+ {/* 주택구조조 */}
+
住宅構造
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 서까래 재질 */}
+
垂木材質
+
+
+
+
+
+
+ {/* 서까래 크기 */}
+
垂木サイズ
+
+ {mode === 'READ' && }
+ {mode !== 'READ' && (
+
+ )}
+
+
+
+
+
+
+ {/* 서까래 피치 */}
+
垂木サイズ
+
+ {mode === 'READ' && }
+ {mode !== 'READ' && (
+
+ )}
+
+
+
+
+
+
+ {/* 서까래 방향 */}
+
垂木の方向
+
+
+
+ {/* 노지판 종류류 */}
+
路地板の種類
+
+ {mode === 'READ' && }
+ {mode !== 'READ' && (
+
+ )}
+
+
+
+
+
+
+
+ 路地板厚※小幅板を選択した場合, 厚さ. 小幅板間の間隔寸法を記載
+
+
+
+ mm
+
+
+
+ {/* 서까래 방향 */}
+
垂木の方向
+
+
+
+ {/* 주택 구조 */}
+
住宅構造
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 단열재 유무 */}
+
断熱材の有無
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {/* 지붕 구조의 순서 */}
+
路地板の種類
+
+ {mode === 'READ' && }
+ {mode !== 'READ' && (
+
+ )}
+
+
+
+
+
+
+ {/* 지붕 제품명 설치 가능 여부 확인 */}
+
屋根製品名 設置可否確認
+
+ {mode === 'READ' && }
+ {mode !== 'READ' && (
+
+ )}
+
+
+
+
+
+
+ {/* 메모 */}
+
メモ
+
+
+
+
+
+
+
+