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,8 +667,9 @@ 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="module-input-wrap">
               <div className="outline-form mr15">
                 <span>{getMessage('modal.module.basic.setting.module.placement.area.eaves')}</span>
                 <div className="input-grid mr10">
@@ -710,6 +711,26 @@ const Trestle = forwardRef((props, ref) => {
               </div>
             </div>
           </div>
+          <div className="module-input-area">
+            <div className="module-area-title">{getMessage('modal.module.basic.setting.module.placement.margin')}</div>
+            <div className="module-input-wrap">
+              <div className="outline-form">
+                <span>{getMessage('modal.module.basic.setting.module.placement.margin.horizontal')}</span>
+                <div className="input-grid mr10">
+                  <input type="text" className="input-origin block" defaultValue={trestleDetail?.moduleIntvlHor} readOnly />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+              <div className="outline-form">
+                <span>{getMessage('modal.module.basic.setting.module.placement.margin.vertical')}</span>
+                <div className="input-grid mr10">
+                  <input type="text" className="input-origin block" defaultValue={trestleDetail?.moduleIntvlVer} readOnly />
+                </div>
+                <span className="thin">mm</span>
+              </div>
+            </div>
+          </div>
+        </div>
       </div>
       <div className="module-bottom">
         <div className="module-table-box ">

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,9 +806,7 @@
     color: #45576F;
     margin-left: 5px;
 }
-.drag-file-box{
+.btn-area{
-    padding: 10px;
-    .btn-area{
     padding-bottom: 15px;
     border-bottom: 1px solid #ECF0F4;
     .file-upload{
@@ -827,7 +825,9 @@
             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;
@@ -2423,3 +2409,31 @@ $alert-color: #101010;
         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

@@ -1025,3 +1025,22 @@ input:checked + .slider {
 .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,34 +288,35 @@
 }
 
 // 커뮤니티
-.community_detail{
+.community_detail-tit{
-    .community_detail-tit{
     font-size: 16px;
     color: #101010;
     font-weight: 600;
     padding-bottom: 14px;
     border-bottom: 2px solid #101010;
-    }
+}
-    .community_detail-file-wrap{
+.community_detail-file-wrap{
     padding: 24px 0;
     border-bottom: 1px solid #E5E5E5;
     dt{
         font-size: 13px;
         color: #101010;
         font-weight: 500;
-            margin-bottom: 15px;
     }
     dd{
         font-size: 12px;
         font-weight: 400;
         margin-bottom: 3px;
         color: #344356;
+        &:nth-child(2){
+            margin-top: 15px;
+        }
         &:last-child{
             margin-bottom: 0;
         }
     }
-    }
+}
-    .community_detail-inner{
+.community_detail-inner{
     max-height: 300px;
     overflow-y: auto;
     margin-top: 20px;
@@ -335,9 +336,9 @@
     &::-webkit-scrollbar-track {
         background-color: transparent;
     }
-    }
 }
 
+
 // 견적 복사
 .estimate-copy-info-item{
     margin-bottom: 20px;
@@ -369,3 +370,116 @@
         }
     }
 }
+
+// 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;
+    }
+}