wr: 표준공사비 2

apps/wr/app/(popUp-layout)/constCostSimulation/page.tsx

@@ -6,6 +6,7 @@
 import { useForm } from "react-hook-form";
 import ConCostForm from "@/components/ui/form/coMat/conCostForm/conCostForm";
 import type { DmdCoReqType } from "@/app/store/matDmd/coMatRvw/type";
+import ListDiv from "@common/business_components/ui/list_div";
 
 export default function ConstCostSimulationPage() {
   const form = useForm<DmdCoReqType>({
@@ -16,5 +17,12 @@ export default function ConstCostSimulationPage() {
     } as any
   });
 
-  return <ConCostForm form={form} type="simulation" readonly={false} />;
+  return (
+    <ListDiv>
+        <div className="card-header flex items-center justify-between">
+            <h3 className="text-2xl font-medium text-label">표준공사비 산정</h3>
+        </div>
+        <ConCostForm form={form} type="simulation" readonly={false} />
+    </ListDiv>
+  )    
 }

apps/wr/app/(with-layout)/matMng/coMat/coMatRvw/page.tsx

@@ -52,6 +52,7 @@ export default function CoMatRvw() {
   const { auth, code, coRvw, coMatRvwInit, coMatRvwSearch, coMatRvwInqua } =
     useWrStore((state) => state);
   const { coMatRvwRes, coMatRvwCount } = coRvw;
+  const [mounted, setMounted] = useState(false);
   const { regAuthrtYn } = auth;
   const alert = useAlertStore((state) => state.setMessage);
 
@@ -185,6 +186,7 @@ export default function CoMatRvw() {
   useEffect(() => {
     if (!initRef.current) {
       coMatRvwInit(1, 13, fromDate, toDate);
+      setMounted(true);
       initRef.current = true;
     }
   }, [coMatRvwInit, initRef, fromDate, toDate]);
@@ -208,9 +210,9 @@ export default function CoMatRvw() {
    */
   const constCostSimulation = () => {
     const url = `/constCostSimulation`;
-    const width = window.screen.availWidth;
-    const height = 600;
-    const left = 0;
+    const width = Math.floor(window.screen.availWidth * 0.6);
+    const height = 500;
+    const left = Math.floor((window.screen.availWidth - width) / 2);
     const top = 0;
     const popupOptions = `width=${width},height=${height},left=${left},top=${top},resizable=yes,scrollbars=yes`;
     window.open(url, "candidatePopup", popupOptions);
@@ -357,10 +359,11 @@ export default function CoMatRvw() {
                             onChange={(e) => {
                               field.onChange(String(e.target.value));
                             }}
-                            value={
-                              moment(field.value).format("YYYY-MM-DD") ?? ""
+                            value={ // 값이 있을 때만 moment 실행, 없으면 빈 문자열
+                              field.value ? moment(field.value).format("YYYY-MM-DD") : ""
                             }
                             readOnly
+                            suppressHydrationWarning // 시간 차이로 인한 경고 무시
                             className={readOnlyInputClass}
                           />
                         </FormUi>

apps/wr/components/ui/form/coMat/conCostForm/conCostForm.tsx

@@ -47,6 +47,11 @@ export default function ConCostForm({
   selectionVersion?: number;
   readonly?: boolean;
 }) {
+  const [mounted, setMounted] = useState(false);
+  useEffect(() => {
+    setMounted(true);
+  }, []);
+
   // 시뮬레이션 모드를 위한 로컬 폼 생성
   const localForm = useForm<DmdCoReqType>({
     defaultValues: {
@@ -344,6 +349,8 @@ export default function ConCostForm({
     window.open(url, "candidatePopup", popupOptions);
   };
 
+  if (!mounted) return null; // 서버 사이드 렌더링 시에는 아무것도 그리지 않음 (선택 사항)
+
   return (
     <>
       
@@ -634,7 +641,7 @@ export default function ConCostForm({
               )}
             />
           </div>
-          {form && (
+          {!isSim && (
             <div className="col-span-3 mt-4">
               <div className="flex items-center justify-between">
                 <Label>공급처 선정</Label>