@rchemist/listgrid 0.2.9 → 0.2.10

package/dist/listgrid/components/fields/address/PostCodeSelector.d.ts

@@ -5,5 +5,9 @@ interface PostCodeSelectorProps {
     onRemove?: (() => void) | undefined;
     required: boolean;
 }
+/**
+ * 외부 (AddressFieldView / EntityForm) 상호작용을 담당하는 껍데기.
+ * 모달 본문은 아래 PostCodeSelectorForm 으로 분리해 외부 재렌더에 완전히 격리한다.
+ */
 export declare const PostCodeSelector: (props: PostCodeSelectorProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/listgrid/components/fields/address/PostCodeSelector.js

@@ -1,78 +1,41 @@
 'use client';
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
-import { useEffect, useState } from 'react';
+import { memo, useCallback, useRef, useState } from 'react';
 import { isBlank } from '../../../utils/StringUtil';
-import { Box } from '../../../ui';
 import { Flex } from '../../../ui';
-import { Grid } from '../../../ui';
 import { Modal } from '../../../ui';
-import clsx from 'clsx';
-// CSS module removed in Stage 8 (host app supplies styling)
-const classes = {};
 import DaumPostcode from 'react-daum-postcode';
+/**
+ * 외부 (AddressFieldView / EntityForm) 상호작용을 담당하는 껍데기.
+ * 모달 본문은 아래 PostCodeSelectorForm 으로 분리해 외부 재렌더에 완전히 격리한다.
+ */
 export const PostCodeSelector = (props) => {
     const [open, setOpen] = useState(false);
-    const [openDaumPostCode, setOpenDaumPostCode] = useState(false);
-    const [postalCode, setPostalCode] = useState();
-    const [state, setState] = useState();
-    const [city, setCity] = useState();
-    const [address1, setAddress1] = useState();
-    const [address2, setAddress2] = useState();
-    const [longitude, setLongitude] = useState();
-    const [latitude, setLatitude] = useState();
-    const [error, setError] = useState('');
-    const disabled = isBlank(postalCode);
+    const [sessionKey, setSessionKey] = useState(0);
+    // props.onSubmit 이 부모 재렌더마다 새 참조가 되어도 Form 내부 memo 비교를 깨지 않도록
+    // 안정된 핸들러를 ref 패턴으로 구성한다.
+    const onSubmitRef = useRef(props.onSubmit);
+    onSubmitRef.current = props.onSubmit;
+    const handleSubmit = useCallback((address) => {
+        onSubmitRef.current(address);
+        setOpen(false);
+    }, []);
+    const handleOpen = () => {
+        // 모달을 열 때마다 sessionKey 를 증가시켜 Form 인스턴스를 새로 마운트한다.
+        // lazy initializer 가 initialAddress 로부터 깨끗이 초기화된다.
+        setSessionKey((k) => k + 1);
+        setOpen(true);
+    };
+    const handleClose = () => {
+        setOpen(false);
+    };
     const required = props.required;
-    useEffect(() => {
-        // 모달이 열릴 때만 props.address 값으로 내부 상태를 초기화한다.
-        // 편집 중(open=true 유지)에는 부모 재렌더로 props 참조가 바뀌어도 재초기화하지 않아
-        // 사용자가 상세주소(address2) 등에 입력한 값이 유실되지 않도록 한다.
-        if (open) {
-            initializeData();
-        }
-        // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [open]);
-    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { gap: 10, children: [_jsx("button", { type: "button", className: "rcm-button", "data-variant": "primary", onClick: () => {
-                            setOpen(!open);
-                        }, children: "\uC8FC\uC18C \uCC3E\uAE30" }), !required && !isBlank(postalCode) && (_jsx("button", { type: "button", className: "rcm-button", "data-variant": "outline", onClick: () => {
-                            removeAddress();
-                        }, children: "\uC8FC\uC18C \uC81C\uAC70" }))] }), open && (_jsx(Modal, { opened: open, onClose: () => {
-                    initializeData();
-                    setOpen(false);
-                }, closeOnClickOutside: true, closeOnEscape: true, 
+    const hasAddress = !isBlank(props.address?.postalCode);
+    return (_jsxs(_Fragment, { children: [_jsxs(Flex, { gap: 10, children: [_jsx("button", { type: "button", className: "rcm-button", "data-variant": "primary", onClick: handleOpen, children: "\uC8FC\uC18C \uCC3E\uAE30" }), !required && hasAddress && (_jsx("button", { type: "button", className: "rcm-button", "data-variant": "outline", onClick: removeAddress, children: "\uC8FC\uC18C \uC81C\uAC70" }))] }), open && (_jsx(Modal, { opened: open, onClose: handleClose, closeOnClickOutside: true, closeOnEscape: true, 
                 /* lockScroll={true} */
-                position: "center", size: 'lg', zIndex: 11000, title: "\uC8FC\uC18C \uAC80\uC0C9", children: _jsxs("div", { style: { padding: `2rem` }, children: [_jsxs(Grid, { className: classes.row, gutter: 16, align: "center", children: [_jsx(Grid.Col, { span: 2, className: clsx(classes.title, 'text-right pr-2'), children: "\uC6B0\uD3B8\uBC88\uD638" }), _jsx(Grid.Col, { span: 10, children: _jsxs("div", { className: "rcm-postcode-input-row", children: [_jsx("input", { type: "text", value: postalCode, disabled: true, readOnly: true, className: "rcm-input" }), _jsx("button", { type: "button", className: "rcm-button", "data-variant": "primary", onClick: () => {
-                                                    setOpenDaumPostCode(true);
-                                                }, children: "\uC8FC\uC18C \uAC80\uC0C9" })] }) })] }), _jsxs(Grid, { className: clsx(classes.row, classes.subRow), gutter: 16, align: "center", children: [_jsx(Grid.Col, { span: 2, className: clsx(classes.title, 'text-right pr-2'), children: "\uC8FC\uC18C" }), _jsx(Grid.Col, { span: 10, children: _jsx("input", { type: "text", value: address1, placeholder: '주소 검색을 눌러 주소를 선택하세요', readOnly: true, disabled: true, className: "rcm-input" }) })] }), !disabled && (_jsxs(Grid, { className: clsx(classes.row, classes.subRow), gutter: 16, align: "center", children: [_jsx(Grid.Col, { span: 2, className: clsx(classes.title, 'text-right pr-2'), children: "\uC0C1\uC138 \uC8FC\uC18C" }), _jsxs(Grid.Col, { span: 10, children: [_jsx("input", { type: "text", value: address2, placeholder: '상세 주소를 입력하세요', onChange: (e) => {
-                                                setAddress2(e.target.value ?? '');
-                                            }, className: "rcm-input" }), !isBlank(error) && _jsx(Box, { className: classes.error, children: error })] })] })), _jsx(Box, { className: classes.buttonContainer, children: _jsx("button", { type: "button", className: `px-4 py-2 rounded-md text-sm font-medium transition-colors ${disabled || isBlank(address2)
-                                    ? 'btn btn-outline-primary border border-gray-300 text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2'
-                                    : 'btn btn-outline-primary border border-blue-500 text-blue-500 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'}`, disabled: disabled || isBlank(address2), onClick: () => {
-                                    validateAndSubmit();
-                                }, children: "\uC8FC\uC18C \uC785\uB825" }) })] }) })), openDaumPostCode && (_jsx(Modal, { opened: openDaumPostCode, onClose: () => {
-                    setOpenDaumPostCode(false);
-                }, closeOnClickOutside: false, closeOnEscape: true, 
-                /* lockScroll={true} */
-                position: "center", zIndex: 12000, children: _jsx(DaumPostcode, { onComplete: (data) => {
-                        setState(data.sido);
-                        setCity(data.sigungu);
-                        setAddress1(data.roadAddress);
-                        setAddress2('');
-                        setPostalCode(data.zonecode);
-                        setLongitude(data.longitude);
-                        setLatitude(data.latitude);
-                        setOpenDaumPostCode(false);
-                    } }) }))] }));
+                position: "center", size: 'lg', zIndex: 11000, title: "\uC8FC\uC18C \uAC80\uC0C9", children: _jsx(PostCodeSelectorForm, { initialAddress: props.address, required: required, onSubmit: handleSubmit }, sessionKey) }))] }));
     function removeAddress() {
         if (!required) {
-            setState('');
-            setCity('');
-            setAddress1('');
-            setAddress2('');
-            setPostalCode('');
-            setLatitude(undefined);
-            setLongitude(undefined);
-            // onRemove 콜백이 있으면 사용, 없으면 기존 방식 사용
             if (props.onRemove) {
                 props.onRemove();
             }
@@ -88,44 +51,64 @@ export const PostCodeSelector = (props) => {
             }
         }
     }
-    function validateAndSubmit() {
-        let validated = true;
+};
+/**
+ * 모달 내부 전용 입력 폼.
+ * - initialAddress 는 최초 1회 lazy initializer 로만 소비한다 (이후 prop 변화 무시).
+ * - address2 는 빈 문자열로 시작해 controlled input 으로 고정 (uncontrolled→controlled 전이 차단).
+ * - props.onSubmit 은 "주소 입력" 버튼을 누를 때만 호출. 타이핑은 로컬 state 만 갱신.
+ * - React.memo(() => true) 로 부모 재렌더에 완전히 격리하여 타이핑 중 포커스 유실을 방지.
+ *   세션 전환은 부모에서 key 변경으로 처리하므로 prop 업데이트를 막아도 문제 없음.
+ */
+const PostCodeSelectorFormImpl = (props) => {
+    const [postalCode, setPostalCode] = useState(() => props.initialAddress?.postalCode ?? '');
+    const [state, setState] = useState(() => props.initialAddress?.state ?? '');
+    const [city, setCity] = useState(() => props.initialAddress?.city ?? '');
+    const [address1, setAddress1] = useState(() => props.initialAddress?.address1 ?? '');
+    const [address2, setAddress2] = useState(() => props.initialAddress?.address2 ?? '');
+    const [longitude, setLongitude] = useState(() => props.initialAddress?.longitude);
+    const [latitude, setLatitude] = useState(() => props.initialAddress?.latitude);
+    const [error, setError] = useState('');
+    const [openDaumPostCode, setOpenDaumPostCode] = useState(false);
+    const disabled = isBlank(postalCode);
+    const submitDisabled = disabled || isBlank(address2);
+    const handleDaumComplete = (data) => {
+        setState(data.sido);
+        setCity(data.sigungu);
+        setAddress1(data.roadAddress);
+        setAddress2('');
+        setPostalCode(data.zonecode);
+        setLongitude(data.longitude);
+        setLatitude(data.latitude);
+        setOpenDaumPostCode(false);
+    };
+    const validateAndSubmit = () => {
         setError('');
         if (isBlank(address1)) {
             setError('주소 선택을 눌러 주소를 입력하세요');
-            validated = false;
-        }
-        if (validated) {
-            if (isBlank(address2)) {
-                setError('상세 주소를 반드시 입력해야 합니다.');
-                validated = false;
-            }
+            return;
         }
-        if (validated) {
-            const longitudeValue = isBlank(longitude) ? undefined : Number(longitude);
-            const latitudeValue = isBlank(latitude) ? undefined : Number(latitude);
-            const address = {
-                state: state ?? address1.split(' ')[0],
-                city: city ?? address1.split(' ')[1],
-                address1: address1,
-                address2: address2,
-                postalCode: postalCode,
-                ...(longitudeValue !== undefined ? { longitude: longitudeValue } : {}),
-                ...(latitudeValue !== undefined ? { latitude: latitudeValue } : {}),
-            };
-            props.onSubmit(address);
-            setOpen(false);
+        if (isBlank(address2)) {
+            setError('상세 주소를 반드시 입력해야 합니다.');
+            return;
         }
-    }
-    function initializeData() {
-        if (props.address) {
-            setCity(props.address.city);
-            setState(props.address.state);
-            setPostalCode(props.address.postalCode);
-            setAddress1(props.address.address1);
-            setAddress2(props.address.address2);
-            setLongitude(props.address.longitude);
-            setLatitude(props.address.latitude);
-        }
-    }
+        const longitudeValue = isBlank(longitude) ? undefined : Number(longitude);
+        const latitudeValue = isBlank(latitude) ? undefined : Number(latitude);
+        const address = {
+            state: state || address1.split(' ')[0],
+            city: city || address1.split(' ')[1],
+            address1,
+            address2,
+            postalCode,
+            ...(longitudeValue !== undefined ? { longitude: longitudeValue } : {}),
+            ...(latitudeValue !== undefined ? { latitude: latitudeValue } : {}),
+        };
+        props.onSubmit(address);
+    };
+    return (_jsxs("div", { className: "rcm-postcode-form", children: [_jsxs("div", { className: "rcm-postcode-row", children: [_jsx("div", { className: "rcm-postcode-row-label", children: "\uC6B0\uD3B8\uBC88\uD638" }), _jsx("div", { className: "rcm-postcode-row-content", children: _jsxs("div", { className: "rcm-postcode-input-row", children: [_jsx("input", { type: "text", value: postalCode, disabled: true, readOnly: true, className: "rcm-input" }), _jsx("button", { type: "button", className: "rcm-button", "data-variant": "primary", onClick: () => setOpenDaumPostCode(true), children: "\uC8FC\uC18C \uAC80\uC0C9" })] }) })] }), _jsxs("div", { className: "rcm-postcode-row", children: [_jsx("div", { className: "rcm-postcode-row-label", children: "\uC8FC\uC18C" }), _jsx("div", { className: "rcm-postcode-row-content", children: _jsx("input", { type: "text", value: address1, placeholder: "\uC8FC\uC18C \uAC80\uC0C9\uC744 \uB20C\uB7EC \uC8FC\uC18C\uB97C \uC120\uD0DD\uD558\uC138\uC694", readOnly: true, disabled: true, className: "rcm-input rcm-postcode-input-full" }) })] }), !disabled && (_jsxs("div", { className: "rcm-postcode-row", children: [_jsx("div", { className: "rcm-postcode-row-label", children: "\uC0C1\uC138 \uC8FC\uC18C" }), _jsxs("div", { className: "rcm-postcode-row-content", children: [_jsx("input", { type: "text", value: address2, placeholder: "\uC0C1\uC138 \uC8FC\uC18C\uB97C \uC785\uB825\uD558\uC138\uC694", onChange: (e) => setAddress2(e.target.value ?? ''), className: "rcm-input rcm-postcode-input-full" }), !isBlank(error) && _jsx("div", { className: "rcm-postcode-error", children: error })] })] })), _jsx("div", { className: "rcm-postcode-submit-row", children: _jsx("button", { type: "button", className: `px-4 py-2 rounded-md text-sm font-medium transition-colors ${submitDisabled
+                        ? 'btn btn-outline-primary border border-gray-300 text-gray-500 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-gray-500 focus:ring-offset-2'
+                        : 'btn btn-outline-primary border border-blue-500 text-blue-500 hover:bg-blue-50 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-offset-2'}`, disabled: submitDisabled, onClick: validateAndSubmit, children: "\uC8FC\uC18C \uC785\uB825" }) }), openDaumPostCode && (_jsx(Modal, { opened: openDaumPostCode, onClose: () => setOpenDaumPostCode(false), closeOnClickOutside: false, closeOnEscape: true, 
+                /* lockScroll={true} */
+                position: "center", zIndex: 12000, children: _jsx(DaumPostcode, { onComplete: handleDaumComplete }) }))] }));
 };
+const PostCodeSelectorForm = memo(PostCodeSelectorFormImpl, () => true);

package/dist/styles/components.css

@@ -721,9 +721,60 @@
 /* ------------------------------------------------------------------ *
      * PostCodeSelector (주소 선택기)
      * ------------------------------------------------------------------ */
+.rcm-postcode-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rcm-space-md);
+}
+
+.rcm-postcode-row {
+  display: grid;
+  grid-template-columns: 6.5rem 1fr;
+  gap: var(--rcm-space-md);
+  align-items: center;
+}
+
+.rcm-postcode-row-label {
+  text-align: right;
+  padding-right: var(--rcm-space-sm);
+  font-weight: var(--rcm-font-weight-medium);
+  color: var(--rcm-color-text);
+}
+
+.rcm-postcode-row-content {
+  min-width: 0;
+}
+
 .rcm-postcode-input-row {
   display: flex;
   gap: var(--rcm-space-sm);
+  align-items: center;
+}
+
+.rcm-postcode-input-row > .rcm-input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.rcm-postcode-input-row > .rcm-button {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.rcm-postcode-input-full {
+  width: 100%;
+}
+
+.rcm-postcode-submit-row {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--rcm-space-sm);
+}
+
+.rcm-postcode-error {
+  margin-top: var(--rcm-space-xs);
+  color: var(--rcm-color-error);
+  font-size: var(--rcm-font-size-sm);
 }
 
 /* ------------------------------------------------------------------ *

package/dist/styles.css

@@ -5690,9 +5690,60 @@
 /* ------------------------------------------------------------------ *
      * PostCodeSelector (주소 선택기)
      * ------------------------------------------------------------------ */
+.rcm-postcode-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--rcm-space-md);
+}
+
+.rcm-postcode-row {
+  display: grid;
+  grid-template-columns: 6.5rem 1fr;
+  gap: var(--rcm-space-md);
+  align-items: center;
+}
+
+.rcm-postcode-row-label {
+  text-align: right;
+  padding-right: var(--rcm-space-sm);
+  font-weight: var(--rcm-font-weight-medium);
+  color: var(--rcm-color-text);
+}
+
+.rcm-postcode-row-content {
+  min-width: 0;
+}
+
 .rcm-postcode-input-row {
   display: flex;
   gap: var(--rcm-space-sm);
+  align-items: center;
+}
+
+.rcm-postcode-input-row > .rcm-input {
+  flex: 1 1 auto;
+  min-width: 0;
+}
+
+.rcm-postcode-input-row > .rcm-button {
+  flex: 0 0 auto;
+  white-space: nowrap;
+}
+
+.rcm-postcode-input-full {
+  width: 100%;
+}
+
+.rcm-postcode-submit-row {
+  display: flex;
+  justify-content: center;
+  margin-top: var(--rcm-space-sm);
+}
+
+.rcm-postcode-error {
+  margin-top: var(--rcm-space-xs);
+  color: var(--rcm-color-error);
+  font-size: var(--rcm-font-size-sm);
 }
 
 /* ------------------------------------------------------------------ *

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@rchemist/listgrid",
-    "version": "0.2.9",
+    "version": "0.2.10",
     "private": false,
     "description": "Framework-free React CRUD UI engine — primitive-based design system, data-attr theming, and a full list/form renderer for RCM-framework-style entity backends.",
     "keywords": [