From 9fba9d147c4de7d67a94914615b3c1cb629e7b36 Mon Sep 17 00:00:00 2001 From: cccwon2 Date: Thu, 26 Dec 2024 15:24:40 +0900 Subject: [PATCH 1/5] =?UTF-8?q?chore:=20clientLayout=20=EC=9C=BC=EB=A1=9C?= =?UTF-8?q?=20=ED=95=B4=EB=8D=94=20=EC=98=81=EC=97=AD=20=EC=9D=B4=EB=8F=99?= =?UTF-8?q?=20=EB=B0=8F=20=ED=99=88=EC=97=90=EC=84=9C=EB=8A=94=20=EC=A0=9C?= =?UTF-8?q?=EC=99=B8=20=EB=93=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/clientLayout.tsx | 3 +- .../components/input/text/LocationInput.tsx | 37 ++++++++++++------- src/app/components/layout/Header.tsx | 8 ++++ src/app/layout.tsx | 4 +- 4 files changed, 35 insertions(+), 17 deletions(-) diff --git a/src/app/clientLayout.tsx b/src/app/clientLayout.tsx index 8f5ec7e4..e5e6e0ce 100644 --- a/src/app/clientLayout.tsx +++ b/src/app/clientLayout.tsx @@ -36,10 +36,11 @@ export default function ClientLayout({ children }: { children: React.ReactNode } // 채널톡을 표시하지 않을 경로들 const excludePaths = ["/login", "/signup", "/auth/callback"]; const showChannelTalk = !excludePaths.some((path) => pathname.startsWith(path)); + const isHome = pathname === "/"; return ( -
+
{children} void }) => { - open: () => void; + // Postcode 클래스 정의 + Postcode: new (config: { + oncomplete: (data: DaumPostcodeData) => void; // 주소 검색 완료 시 실행될 콜백 함수 + }) => { + open: () => void; // 주소 검색 팝업을 여는 메서드 }; }; } } interface LocationInputProps extends BaseInputProps { - onAddressChange?: (fullAddress: string) => void; - readOnly?: boolean; - value?: string; + onAddressChange?: (fullAddress: string) => void; // 주소가 변경될 때 호출될 콜백 함수 + readOnly?: boolean; // 입력 필드 읽기 전용 여부 + value?: string; // 초기 주소 값 } const LocationInput = forwardRef( @@ -39,26 +43,31 @@ const LocationInput = forwardRef( ) => { const [address, setAddress] = useState(""); + // 외부에서 주소 값이 변경될 경우 내부 상태 업데이트 useEffect(() => { if (value) { setAddress(value); } }, [value]); + // 다음 우편번호 검색 팝업을 여는 함수 const handleOpenPostcode = useCallback(() => { + // SSR 환경이거나 다음 스크립트가 로드되지 않은 경우 실행하지 않음 if (typeof window === "undefined" || !window.daum) return; + // 다음 우편번호 검색 팝업 생성 및 설정 new window.daum.Postcode({ oncomplete: (data: DaumPostcodeData) => { const newAddress = data.address; - setAddress(newAddress); - onAddressChange?.(newAddress); + setAddress(newAddress); // 내부 상태 업데이트 + onAddressChange?.(newAddress); // 부모 컴포넌트에 주소 변경 알림 }, }).open(); }, [onAddressChange]); return ( <> + {/* 다음 우편번호 서비스 스크립트 로드 */}