🚨chore: Sync Sass

[조사매물] 상세, 수정 퍼블 수정
2025-05-16 15:32:23 +09:00 · 2025-05-16 15:32:23 +09:00 · cdae73b95e
commit cdae73b95e
parent beba34321d
10 changed files with 249 additions and 168 deletions
--- a/public/assets/images/sub/sale_toggle_btn.svg
+++ b/public/assets/images/sub/sale_toggle_btn.svg
@ -0,0 +1,4 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="0.5" y="0.5" width="21" height="21" rx="10.5" stroke="#2E3A59"/>
+<path d="M7 9L11 13L15 9" stroke="#2E3A59" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
--- a/public/assets/images/sub/sale_toggle_btn_white.svg
+++ b/public/assets/images/sub/sale_toggle_btn_white.svg
@ -0,0 +1,6 @@
+<svg width="22" height="22" viewBox="0 0 22 22" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="toggle btn">
+<rect x="0.5" y="0.5" width="21" height="21" rx="10.5" stroke="white"/>
+<path id="Vector 7412" d="M7 13L11 9L15 13" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
--- a/src/app/survey-sale/[id]/page.tsx
+++ b/src/app/survey-sale/[id]/page.tsx
@ -1,11 +1,29 @@
 import DataTable from '@/components/survey-sale/detail/DataTable'
 import DetailForm from '@/components/survey-sale/detail/DetailForm'
+import { SurveyBasicInfo } from '@/types/Survey'

 export default function page() {
+  const surveyInfo: SurveyBasicInfo = {
+    ID: 1,
+    REPRESENTATIVE: 'HG',
+    STORE: 'HWJ(T01)',
+    CONSTRUCTION_POINT: '施工点名表示',
+    INVESTIGATION_DATE: '2021-01-01',
+    BUILDING_NAME: 'ビル名表示',
+    CUSTOMER_NAME: '顧客名表示',
+    POST_CODE: '1234567890',
+    ADDRESS: '東京都千代田区永田町1-7-1',
+    ADDRESS_DETAIL: '永田町ビル101号室',
+    SUBMISSION_STATUS: true,
+    SUBMISSION_DATE: '2021-01-01',
+    DETAIL_INFO: null,
+    REG_DT: new Date(),
+    UPT_DT: new Date(),
+  }
  return (
    <>
      <DataTable />
-      <DetailForm />
+      <DetailForm surveyInfo={surveyInfo} mode="READ" />
    </>
  )
 }
--- a/src/app/survey-sale/layout.tsx
+++ b/src/app/survey-sale/layout.tsx
@ -9,10 +9,7 @@ export default function layout({ children, navTab }: SurveySaleLayoutProps) {
  return (
    <>
      <div className="container">
-        <div className="sale-contents">
-          {navTab}
-          {children}
-        </div>
+        <div className="sale-contents">{children}</div>
      </div>
    </>
  )
--- a/src/components/survey-sale/detail/BasicForm.tsx
+++ b/src/components/survey-sale/detail/BasicForm.tsx
@ -1,10 +1,18 @@
 'use client'

-import { useEffect } from 'react'
+import { useEffect, useState } from 'react'
 import { useSurveySaleTabState } from '@/store/surveySaleTabState'
+import { SurveyBasicInfo } from '@/types/Survey'
+import { Mode } from 'fs'

-export default function BasicForm() {
+export default function BasicForm(props: {
+  surveyInfo: Partial<SurveyBasicInfo>
+  setSurveyInfo: (surveyInfo: Partial<SurveyBasicInfo>) => void
+  mode: Mode
+}) {
+  const { surveyInfo, setSurveyInfo, mode } = props
  const { setBasicInfoSelected } = useSurveySaleTabState()
+  const [isFlip, setIsFlip] = useState<boolean>(true)

  useEffect(() => {
    setBasicInfoSelected()
@ -12,84 +20,101 @@ export default function BasicForm() {

  return (
    <>
+      <div className={`sale-detail-toggle-bx ${isFlip ? 'act' : ''}`}>
+        <div className="sale-detail-toggle-head" onClick={() => setIsFlip(!isFlip)}>
+          <div className="sale-detail-toggle-name">基本情報</div>
+          <div className="sale-detail-toggle-btn-wrap">
+            <button className="sale-detail-toggle-btn"></button>
+          </div>
+        </div>
+        <div className="sale-detail-toggle-cont">
          <div className="sale-frame">
            <div className="data-form-wrap">
              <div className="data-input-form-bx">
                <div className="data-input-form-tit">担当者名</div>
-            <input type="text" className="input-frame" defaultValue={'HG'} />
+                <input
+                  type="text"
+                  className="input-frame"
+                  readOnly={mode === 'READ'}
+                  value={surveyInfo?.REPRESENTATIVE}
+                  onChange={(e) => setSurveyInfo({ ...surveyInfo, REPRESENTATIVE: e.target.value })}
+                />
              </div>
              <div className="data-input-form-bx">
                <div className="data-input-form-tit">販売店</div>
-            <input type="text" className="input-frame" defaultValue={'HWJ(T01)'} />
+                <input
+                  type="text"
+                  className="input-frame"
+                  readOnly={mode === 'READ'}
+                  value={surveyInfo?.BUILDING_NAME ?? ''}
+                  onChange={(e) => setSurveyInfo({ ...surveyInfo, BUILDING_NAME: e.target.value })}
+                />
              </div>
              <div className="data-input-form-bx">
                <div className="data-input-form-tit">施工店</div>
-            <input type="text" className="input-frame" defaultValue={'施工点名表示'} />
+                <input
+                  type="text"
+                  className="input-frame"
+                  readOnly={mode === 'READ'}
+                  value={surveyInfo?.CONSTRUCTION_POINT ?? ''}
+                  onChange={(e) => setSurveyInfo({ ...surveyInfo, CONSTRUCTION_POINT: e.target.value })}
+                />
              </div>
            </div>
          </div>
-
          <div className="sale-frame">
            <div className="data-form-wrap">
              <div className="data-input-form-bx">
                <div className="data-input-form-tit">現地調査日</div>
+                {['CREATE', 'EDIT'].includes(mode as 'CREATE' | 'EDIT') ? (
                  <div className="date-input">
                    <button className="date-btn">
                      <i className="date-icon"></i>
                    </button>
-              <input type="text" className="date-frame" defaultValue={'2025.04.16'} />
+                    <input type="text" className="date-frame" readOnly defaultValue={surveyInfo?.INVESTIGATION_DATE?.toString()} />
                  </div>
+                ) : (
+                  <input type="text" className="input-frame" disabled defaultValue={surveyInfo?.INVESTIGATION_DATE?.toString()} />
+                )}
              </div>
              <div className="data-input-form-bx">
+                {/* 건물명 */}
                <div className="data-input-form-tit">建物名</div>
-            <input type="text" className="input-frame" defaultValue={'ギルドン'} />
+                <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={surveyInfo?.BUILDING_NAME ?? ''} />
              </div>
              <div className="data-input-form-bx">
+                {/* 고객명 */}
                <div className="data-input-form-tit">建物名</div>
-            <input type="text" className="input-frame" defaultValue={'HWJ Building'} />
+                <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={surveyInfo?.CUSTOMER_NAME ?? ''} />
              </div>
              <div className="data-input-form-bx">
-            <div className="data-input-form-tit">建物名</div>
+                <div className="data-input-form-tit">郵便番号/都道府県</div>
                <div className="form-flex">
+                  {/* 우편번호 */}
                  <div className="form-bx">
-                <input type="text" className="input-frame" defaultValue={'1050013'} disabled />
+                    <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={surveyInfo?.POST_CODE ?? ''} disabled />
                  </div>
+                  {/* 도도부현 */}
                  <div className="form-bx">
-                <select className="select-form" name="" id="">
-                  <option value="">東京都</option>
-                  <option value="">東京都</option>
-                  <option value="">東京都</option>
-                  <option value="">東京都</option>
-                  <option value="">東京都</option>
-                </select>
+                    <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={surveyInfo?.ADDRESS ?? ''} disabled />
                  </div>
                </div>
+                {/* 주소 */}
+                <div className="data-input mt5">
+                  <input type="text" className="input-frame" readOnly={mode === 'READ'} defaultValue={'浜松浜松町'} disabled />
+                </div>
                <div className="form-btn">
                  <button className="btn-frame n-blue icon">
                    郵便番号<i className="btn-arr"></i>
                  </button>
                </div>
              </div>
+
              <div className="data-input-form-bx">
                <div className="data-input-form-tit">市区町村名, 以後の住所</div>
                <input type="text" className="input-frame" defaultValue={'浜松 浜松町'} />
              </div>
            </div>
-        <div className="btn-flex-wrap">
-          <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>
      </div>
--- a/src/components/survey-sale/detail/DataTable.tsx
+++ b/src/components/survey-sale/detail/DataTable.tsx
@ -3,7 +3,7 @@
 export default function DataTable() {
  return (
    <>
-      <div className="sale-frame">
+      <div className="sale-data-table-wrap">
        <table className="sale-data-table">
          <colgroup>
            <col style={{ width: '80px' }} />
--- a/src/components/survey-sale/detail/DetailForm.tsx
+++ b/src/components/survey-sale/detail/DetailForm.tsx
@ -1,62 +1,53 @@
 'use client'

-export default function DetailForm() {
+import { Mode, SurveyBasicInfo } from '@/types/Survey'
+import { useEffect, useState } from 'react'
+import ButtonForm from './ButtonForm'
+import BasicForm from './BasicForm'
+import RoofForm from './RoofForm'
+
+export default function DetailForm(props: { surveyInfo?: SurveyBasicInfo; mode?: Mode }) {
+  const [surveyInfo, setSurveyInfo] = useState<Partial<SurveyBasicInfo>>(
+    props.surveyInfo ?? {
+      REPRESENTATIVE: '',
+      CONSTRUCTION_POINT: '',
+      STORE: '',
+      INVESTIGATION_DATE: '',
+      BUILDING_NAME: '',
+      CUSTOMER_NAME: '',
+      POST_CODE: '',
+      ADDRESS: '',
+      ADDRESS_DETAIL: '',
+      SUBMISSION_STATUS: true,
+      SUBMISSION_DATE: '2021-01-01',
+      DETAIL_INFO: null,
+      REG_DT: new Date(),
+      UPT_DT: new Date(),
+    },
+  )
+  const [roofValue, setRoofValue] = useState<Boolean>(false)
+  const [mode, setMode] = useState<Mode>(props.mode ?? 'CREATE')
+  const basicInfoProps = { surveyInfo, setSurveyInfo, mode }
+  const roofInfoProps = { surveyInfo, mode }
+  const buttonFormProps = { mode, setMode }
+
+  useEffect(() => {
+    // setMode(props.surveyInfo ? 'EDIT' : 'CREATE')
+  }, [props.surveyInfo])
+
+  useEffect(() => {
+    console.log(surveyInfo)
+  }, [surveyInfo])
+
  return (
    <>
-      <div className="sale-frame">
-        <div className="data-form-wrap">
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">担当者名</div>
-            <input type="text" className="input-frame" disabled defaultValue={'HG'} />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">販売店</div>
-            <input type="text" className="input-frame" disabled defaultValue={'HWJ(T01)'} />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">施工店</div>
-            <input type="text" className="input-frame" disabled defaultValue={'施工点名表示'} />
-          </div>
-        </div>
-      </div>
-
-      <div className="sale-frame">
-        <div className="data-form-wrap">
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">現地調査日</div>
-            <input type="text" className="input-frame" disabled defaultValue={'2025/04/05'} />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">建物名</div>
-            <input type="text" className="input-frame" disabled defaultValue={'ハンファジャパンビル'} />
-          </div>
-          <div className="data-input-form-bx">
-            <div className="data-input-form-tit">顧客名</div>
-            <input type="text" className="input-frame" disabled defaultValue={'Hong gi'} />
-          </div>
-        </div>
-        <div className="btn-flex-wrap">
-          <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 className="btn-bx">
-            <button className="btn-frame n-blue icon">
-              削除<i className="btn-arr"></i>
-            </button>
-          </div>
-        </div>
+      <div className="sale-detail-toggle-wrap">
+        {mode}
+        {/* 기본정보 */}
+        <BasicForm {...basicInfoProps} />
+        {/* 전기/지붕정보 */}
+        <RoofForm {...roofInfoProps} />
+        <ButtonForm {...buttonFormProps} />
      </div>
    </>
  )
--- 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;
--- 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%;
+.sale-form-btn-wrap{
+  padding: 20px 20px 0 ;
  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;
-      }
-    }
+  .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);
--- 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' // 등록 | 수정 | 상세 | 임시저장