Merge branch 'dev' into feature/dev-yj-layout

public/static/images/sub/oneonone_profile_icon.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<circle cx="12" cy="12" r="8.25" stroke="#101010" stroke-width="1.5"/>
+<path d="M7.94995 16.5C10.0485 14.302 13.9289 14.1986 16.05 16.5M14.2455 9.75C14.2455 10.9926 13.2367 12 11.9923 12C10.7479 12 9.73912 10.9926 9.73912 9.75C9.73912 8.50736 10.7479 7.5 11.9923 7.5C13.2367 7.5 14.2455 8.50736 14.2455 9.75Z" stroke="#101010" stroke-width="1.5" stroke-linecap="round"/>
+</svg>

src/components/floor-plan/modal/basic/step/Trestle.jsx

@@ -667,46 +667,67 @@ const Trestle = forwardRef((props, ref) => {
             </div>
           </div>
 
-          <div className="module-area mt10">
+          <div className="module-input-area">
             <div className="module-area-title">{getMessage('modal.module.basic.setting.module.placement.area')}</div>
-            <div className="outline-form mr15">
+            <div className="module-input-wrap">
-              <span>{getMessage('modal.module.basic.setting.module.placement.area.eaves')}</span>
+              <div className="outline-form mr15">
-              <div className="input-grid mr10">
+                <span>{getMessage('modal.module.basic.setting.module.placement.area.eaves')}</span>
-                <input
+                <div className="input-grid mr10">
-                  type="number"
+                  <input
-                  className="input-origin block"
+                    type="number"
-                  value={eavesMargin ?? 0}
+                    className="input-origin block"
-                  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}
+                    value={eavesMargin ?? 0}
-                  onChange={(e) => setEavesMargin(+e.target.value)}
+                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, eavesMargin: e.target.value } })}
-                />
+                    onChange={(e) => setEavesMargin(+e.target.value)}
+                  />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+              <div className="outline-form mr15">
+                <span>{getMessage('modal.module.basic.setting.module.placement.area.ridge')}</span>
+                <div className="input-grid mr10">
+                  <input
+                    type="number"
+                    className="input-origin block"
+                    value={ridgeMargin ?? 0}
+                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}
+                    onChange={(e) => setRidgeMargin(+e.target.value)}
+                  />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+              <div className="outline-form ">
+                <span>{getMessage('modal.module.basic.setting.module.placement.area.keraba')}</span>
+                <div className="input-grid mr10">
+                  <input
+                    type="number"
+                    className="input-origin block"
+                    value={kerabaMargin ?? 0}
+                    // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}
+                    onChange={(e) => setKerabaMargin(+e.target.value)}
+                  />
+                </div>
+                <span className="thin">mm</span>
               </div>
-              <span className="thin">mm</span>
             </div>
-            <div className="outline-form mr15">
+          </div>
-              <span>{getMessage('modal.module.basic.setting.module.placement.area.ridge')}</span>
+          <div className="module-input-area">
-              <div className="input-grid mr10">
+            <div className="module-area-title">{getMessage('modal.module.basic.setting.module.placement.margin')}</div>
-                <input
+            <div className="module-input-wrap">
-                  type="number"
+              <div className="outline-form">
-                  className="input-origin block"
+                <span>{getMessage('modal.module.basic.setting.module.placement.margin.horizontal')}</span>
-                  value={ridgeMargin ?? 0}
+                <div className="input-grid mr10">
-                  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, ridgeMargin: e.target.value } })}
+                  <input type="text" className="input-origin block" defaultValue={trestleDetail?.moduleIntvlHor} readOnly />
-                  onChange={(e) => setRidgeMargin(+e.target.value)}
+                </div>
-                />
+                <span className="thin">mm</span>
               </div>
-              <span className="thin">mm</span>
+              <div className="outline-form">
-            </div>
+                <span>{getMessage('modal.module.basic.setting.module.placement.margin.vertical')}</span>
-            <div className="outline-form ">
+                <div className="input-grid mr10">
-              <span>{getMessage('modal.module.basic.setting.module.placement.area.keraba')}</span>
+                  <input type="text" className="input-origin block" defaultValue={trestleDetail?.moduleIntvlVer} readOnly />
-              <div className="input-grid mr10">
+                </div>
-                <input
+                <span className="thin">mm</span>
-                  type="number"
-                  className="input-origin block"
-                  value={kerabaMargin ?? 0}
-                  // onChange={(e) => dispatch({ type: 'SET_TRESTLE_DETAIL', roof: { ...trestleState, kerabaMargin: e.target.value } })}
-                  onChange={(e) => setKerabaMargin(+e.target.value)}
-                />
               </div>
-              <span className="thin">mm</span>
             </div>
           </div>
         </div>

src/locales/ja.json

@@ -97,9 +97,12 @@
   "modal.module.basic.setting.module.under.roof": "屋根下地",
   "modal.module.basic.setting.module.setting": "モジュールの選択",
   "modal.module.basic.setting.module.placement.area": "モジュール配置領域",
+  "modal.module.basic.setting.module.placement.margin": "モジュール間の間隙",
   "modal.module.basic.setting.module.placement.area.eaves": "軒側",
   "modal.module.basic.setting.module.placement.area.ridge": "棟側",
   "modal.module.basic.setting.module.placement.area.keraba": "けらぱ",
+  "modal.module.basic.setting.module.placement.margin.horizontal": "左右",
+  "modal.module.basic.setting.module.placement.margin.vertical": "上下",
   "modal.module.basic.setting.module.hajebichi": "ハゼピッチ",
   "modal.module.basic.setting.module.setting.info1": "※勾配の範囲には制限があります。屋根傾斜が2.5値未満10値を超える場合は、施工が可能かどうか施工マニュアルを確認してください。",
   "modal.module.basic.setting.module.setting.info2": "※モジュール配置時は、施工マニュアルに記載されている＜モジュール配置条件＞を必ずご確認ください。",

src/locales/ko.json

@@ -97,9 +97,12 @@
   "modal.module.basic.setting.module.under.roof": "지붕밑바탕",
   "modal.module.basic.setting.module.setting": "모듈 선택",
   "modal.module.basic.setting.module.placement.area": "모듈 배치 영역",
+  "modal.module.basic.setting.module.placement.margin": "모듈 배치 간격",
   "modal.module.basic.setting.module.placement.area.eaves": "처마쪽",
   "modal.module.basic.setting.module.placement.area.ridge": "용마루쪽",
   "modal.module.basic.setting.module.placement.area.keraba": "케라바쪽",
+  "modal.module.basic.setting.module.placement.margin.horizontal": "좌우",
+  "modal.module.basic.setting.module.placement.margin.vertical": "상하",
   "modal.module.basic.setting.module.hajebichi": "망둥어 피치",
   "modal.module.basic.setting.module.setting.info1": "※ 구배의 범위에는 제한이 있습니다. 지붕경사가 2.5치 미만 10치를 초과하는 경우에는 시공이 가능한지 시공 매뉴얼을 확인해주십시오.",
   "modal.module.basic.setting.module.setting.info2": "※ 모듈 배치 시에는 시공 매뉴얼에 기재된 <모듈 배치 조건>을 반드시 확인해주십시오.",

src/styles/_contents.scss

@@ -806,28 +806,28 @@
     color: #45576F;
     margin-left: 5px;
 }
-.drag-file-box{
+.btn-area{
-    padding: 10px;
+    padding-bottom: 15px;
-    .btn-area{
+    border-bottom: 1px solid #ECF0F4;
-        padding-bottom: 15px;
+    .file-upload{
-        border-bottom: 1px solid #ECF0F4;
+        display: inline-block;
-        .file-upload{
+        height: 30px;
-            display: inline-block;
+        background-color: #94A0AD;
-            height: 30px;
+        padding: 0 10px;
-            background-color: #94A0AD;
+        border-radius: 2px;
-            padding: 0 10px;
+        font-size: 13px;
-            border-radius: 2px;
+        line-height: 30px;
-            font-size: 13px;
+        color: #fff;
-            line-height: 30px;
+        font-weight: 500;
-            color: #fff;
+        cursor: pointer;
-            font-weight: 500;
+        transition: background .15s ease-in-out;
-            cursor: pointer;
+        &:hover{
-            transition: background .15s ease-in-out;
+            background-color: #607F9A;
-            &:hover{
-                background-color: #607F9A;
-            }
         }
     }
+}
+.drag-file-box{
+    padding: 10px;
     .drag-file-area{
         position: relative;
         margin-top: 15px;

src/styles/_modal.scss

@@ -2363,20 +2363,6 @@ $alert-color: #101010;
     }
 }
 
-.module-area{
-    display: flex;
-    align-items: center;
-    .module-area-title{
-        flex: none;
-        font-size: 12px;
-        color: #fff;
-        font-weight: 500;
-        margin-right: 20px;
-    }
-    .outline-form{
-        flex: 1;
-    }
-}
 
 .placement-name-guide{
     font-size: 11px;
@@ -2422,4 +2408,32 @@ $alert-color: #101010;
         overflow: hidden;
         height: 0;
     }
+}
+
+// 2025-05-07 지붕모듈
+.module-input-area{
+    display: flex;
+    align-items: center;
+    margin-top: 10px;
+    .module-area-title{
+        flex: none;
+        font-size: 12px;
+        color: #fff;
+        font-weight: 500;
+        margin-right: 20px;
+    }
+    .module-input-wrap{
+        width: 100%;
+        display: flex;
+        .outline-form{
+            width: calc(33.333% - 10px);
+            margin-right: 15px;
+            &:last-child{
+                margin-right: 0;
+            }
+            .input-grid{
+                width: 100%;
+            }
+        }
+    }
 }

src/styles/_reset.scss

@@ -1024,4 +1024,23 @@ input:checked + .slider {
 // alert z-index 
 .swal2-container{
     z-index: 120000;
+}
+
+// textarea
+.textarea-form{
+    width: 100%;
+    outline: none;
+    resize: none;
+    border: none;
+    border: 1px solid #eee;
+    min-height: 150px;
+    padding: 10px;
+    font-size: 13px;
+    color: #45576F;
+    border-radius: 2px;
+    font-family: "Noto Sans JP", sans-serif;
+    transition: border .15s ease-in-out;
+    &:focus{
+        border-color: #94a0ad;
+    }
 }

src/styles/_submodal.scss

@@ -288,55 +288,56 @@
 }
 
 // 커뮤니티
-.community_detail{
+.community_detail-tit{
-    .community_detail-tit{
+    font-size: 16px;
-        font-size: 16px;
+    color: #101010;
-        color: #101010;
+    font-weight: 600;
-        font-weight: 600;
+    padding-bottom: 14px;
-        padding-bottom: 14px;
+    border-bottom: 2px solid #101010;
-        border-bottom: 2px solid #101010;
+}
-    }
+.community_detail-file-wrap{
-    .community_detail-file-wrap{
+    padding: 24px 0;
-        padding: 24px 0;
+    border-bottom: 1px solid #E5E5E5;
-        border-bottom: 1px solid #E5E5E5;
+    dt{
-        dt{
-            font-size: 13px;
-            color: #101010;
-            font-weight: 500;
-            margin-bottom: 15px;
-        }
-        dd{
-            font-size: 12px;
-            font-weight: 400;
-            margin-bottom: 3px;
-            color: #344356;
-            &:last-child{
-                margin-bottom: 0;
-            }
-        }
-    }
-    .community_detail-inner{
-        max-height: 300px;
-        overflow-y: auto;
-        margin-top: 20px;
-        margin-bottom: 20px;
         font-size: 13px;
+        color: #101010;
+        font-weight: 500;
+    }
+    dd{
+        font-size: 12px;
         font-weight: 400;
-        color: #45576F;
+        margin-bottom: 3px;
-        line-height: 26px;
+        color: #344356;
-        word-break: keep-all;
+        &:nth-child(2){
-        &::-webkit-scrollbar {
+            margin-top: 15px;
-            width: 4px;
-            background-color: transparent;
         }
-        &::-webkit-scrollbar-thumb {
+        &:last-child{
-            background-color: #C1CCD7;
+            margin-bottom: 0;
-        }
-        &::-webkit-scrollbar-track {
-            background-color: transparent;
         }
     }
 }
+.community_detail-inner{
+    max-height: 300px;
+    overflow-y: auto;
+    margin-top: 20px;
+    margin-bottom: 20px;
+    font-size: 13px;
+    font-weight: 400;
+    color: #45576F;
+    line-height: 26px;
+    word-break: keep-all;
+    &::-webkit-scrollbar {
+        width: 4px;
+        background-color: transparent;
+    }
+    &::-webkit-scrollbar-thumb {
+        background-color: #C1CCD7;
+    }
+    &::-webkit-scrollbar-track {
+        background-color: transparent;
+    }
+}
+
 
 // 견적 복사
 .estimate-copy-info-item{
@@ -368,4 +369,117 @@
             color: #999;
         }
     }
+}
+
+// 1:1문의
+.one-on-one{
+    .select-wrap{
+        width: 250px;
+    }
+    .input-wrap{
+        flex: 1 1 auto;
+    }
+    &.btn-area{
+        padding-bottom: 0;
+        border: none;
+        margin-left: 10px;
+    }
+    &.drag-file-box{
+        border: 1px solid #eee;
+        .drag-file-area{
+            margin-top: 0;
+        }
+    }
+}
+
+.oneonone-header-wrap{
+    padding-bottom: 14px;
+    border-bottom: 2px solid #101010;
+    .oneonone-title{
+        font-size: 16px;
+        color: #101010;
+        font-weight: 600;
+        margin-bottom: 14px;
+    }
+}
+.oneonone-infor{
+    display: flex;
+    align-items: center;
+    .profile{
+        position: relative;
+        padding-left: 26px;
+        padding-right: 8px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #101010;
+        &::before{
+            content: '';
+            position: absolute;
+            top: 50%;
+            left: 0;
+            transform: translateY(-50%);
+            width: 24px;
+            height: 24px;
+            background: url(./../../public/static/images/sub/oneonone_profile_icon.svg)no-repeat center;
+        }
+        &::after{
+            content: '';
+            position: absolute;
+            top: 50%;
+            right: 0;
+            transform: translateY(-50%);
+            width: 1px;
+            height: 8px;
+            background-color: #CCCCCC;
+        }
+    }
+    .date{
+        padding-left: 8px;
+        font-size: 13px;
+        font-weight: 400;
+        color: #101010;
+    }
+}
+.oneonone-detail{
+    padding: 20px;
+    border: 1px solid #101010;
+    border-top: none;
+    .community_detail-file-wrap{
+        padding-top: 0;
+    }
+    .community_detail-inner{
+        max-height: 110px;
+        margin-top: 24px;
+        margin-bottom: 0;
+    }
+}
+
+.oneonone-answer{
+    margin-top: 8px;
+    padding: 20px;
+    border: 1px solid #101010;
+    .community_detail-inner{
+        max-height: 110px;
+        
+    }
+    .community_detail-file-wrap{
+        border-top: 1px solid #D4DCE7;
+        padding: 16px 0 0 0;
+        border-bottom: none;
+    }
+}
+
+.answer-title-wrap{
+    display: flex;
+    align-items: center;
+    padding-bottom: 14px;
+    border-bottom: 1px solid #D4DCE7;
+    .answer-title{
+        font-size: 14px;
+        color: #101010;
+        font-weight: 600;
+    }
+    .oneonone-infor{
+        margin-left: auto;
+    }
 }