From 91df3b2993eef68514847c045e3b9634949b7393 Mon Sep 17 00:00:00 2001
From: jeonbinggu <tinyjbk123@gmail.com>
Date: Wed, 11 Feb 2026 07:39:13 +0900
Subject: [PATCH 1/5] =?UTF-8?q?refactor:=20=EC=98=B5=EC=85=98=20=EB=A6=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=84=A0=ED=83=9D=EC=8B=9C=20=EB=B0=94?=
 =?UTF-8?q?=EB=A1=9C=20=EB=8B=AB=ED=9E=88=EA=B2=8C=20=EB=B3=80=EA=B2=BD(#2?=
 =?UTF-8?q?02)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/photoManage/DropBox.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/components/photoManage/DropBox.tsx b/src/components/photoManage/DropBox.tsx
index 9cc4948b..af35ca7f 100644
--- a/src/components/photoManage/DropBox.tsx
+++ b/src/components/photoManage/DropBox.tsx
@@ -20,14 +20,8 @@ export function DropBox({
   onToggle,
   onSelect,
 }: DropBoxProps) {
-  //선택되면: 왼쪽(흰색)은 옵션 label
-  //미선택이면: 왼쪽(흰색)은 카테고리 title
   const leftText = value ? value.label : category.title;
-
   const leftTextClass = value ? "text-neutral-100" : "text-neutral-600";
-
-  // 선택되면: 오른쪽(회색)은 가격/배수(priceText)
-  // 미선택이면: placeholder
   const rightText = value ? value.priceText : category.placeholder;
 
   return (
@@ -37,10 +31,9 @@ export function DropBox({
       aria-expanded={isOpen}
       className="w-full"
     >
-      {/* 상단 박스(첫번째 스크린샷) */}
       <div className="border-neutral-850 flex h-12.75 w-full items-center justify-between gap-2.5 rounded-[0.625rem] border px-4 py-3">
         <div className="flex flex-1 justify-between">
-          <p className={`${leftTextClass}`}>{leftText}</p>
+          <p className={leftTextClass}>{leftText}</p>
           <p className="text-neutral-400">{rightText}</p>
         </div>
 
@@ -53,7 +46,6 @@ export function DropBox({
         </div>
       </div>
 
-      {/* 펼쳐졌을 때 옵션 리스트 */}
       {isOpen && (
         <div className="border-neutral-850 mt-2 overflow-hidden rounded-[0.625rem] border">
           <ul>
@@ -64,7 +56,11 @@ export function DropBox({
                 <li key={opt.value}>
                   <button
                     type="button"
-                    onClick={() => onSelect(category.key, opt)}
+                    onClick={(e) => {
+                      e.preventDefault();
+                      e.stopPropagation(); //핵심: 바깥 토글 버튼 클릭 막기
+                      onSelect(category.key, opt); //부모에서 setOpenKey(null)로 닫힘
+                    }}
                     className={`flex w-full items-center justify-between px-4 py-3 text-left ${
                       selected ? "bg-neutral-850" : "bg-neutral-900"
                     }`}

From e721430b60e9995af9e661a3dfdfc7ac865d204d Mon Sep 17 00:00:00 2001
From: jeonbinggu <tinyjbk123@gmail.com>
Date: Wed, 11 Feb 2026 07:49:57 +0900
Subject: [PATCH 2/5] =?UTF-8?q?refactor:=20zustand=EB=A5=BC=20=EC=9D=B4?=
 =?UTF-8?q?=EC=9A=A9=ED=95=9C=20=EC=83=81=ED=83=9C=EA=B0=92=20=EC=9C=A0?=
 =?UTF-8?q?=EC=A7=80(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/photoManage/DetailInfoPage.tsx   |  46 ++++++-
 src/pages/photoManage/PickUpMethodPage.tsx |  47 ++++++--
 src/pages/photoManage/PrintOptionPage.tsx  | 134 +++++++++++++++------
 3 files changed, 178 insertions(+), 49 deletions(-)

diff --git a/src/pages/photoManage/DetailInfoPage.tsx b/src/pages/photoManage/DetailInfoPage.tsx
index e63f81bc..0330a7a4 100644
--- a/src/pages/photoManage/DetailInfoPage.tsx
+++ b/src/pages/photoManage/DetailInfoPage.tsx
@@ -1,20 +1,54 @@
+import type React from "react";
 import { InputForm } from "@/components/auth";
 import { CTA_Button } from "@/components/common";
 import { usePrintOrderStore } from "@/store/usePrintOrder.store";
-import { useMemo, useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router";
 
 export function DetailInfoPage() {
   const navigate = useNavigate();
+
   const deliveryAddress = usePrintOrderStore((s) => s.deliveryAddress);
   const setDeliveryAddress = usePrintOrderStore((s) => s.setDeliveryAddress);
+  const setSelectedOptions = usePrintOrderStore((s) => s.setSelectedOptions);
+
+  //store 값으로 초기화
+  const [recipientName, setRecipientName] = useState(
+    deliveryAddress?.recipientName ?? "",
+  );
+  const [phone, setPhone] = useState(deliveryAddress?.phone ?? "");
 
-  const [recipientName, setRecipientName] = useState("");
-  const [phone, setPhone] = useState("");
+  //뒤로 갔다가 다시 들어왔을 때(또는 주소 선택 페이지에서 address가 갱신됐을 때)
+  //로컬 state가 store를 따라가게 동기화
+  useEffect(() => {
+    const id = window.setTimeout(() => {
+      setRecipientName(deliveryAddress?.recipientName ?? "");
+      setPhone(deliveryAddress?.phone ?? "");
+    }, 0);
+
+    return () => window.clearTimeout(id);
+  }, [deliveryAddress?.recipientName, deliveryAddress?.phone]);
 
   const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
     const digits = e.target.value.replace(/\D/g, "").slice(0, 11);
     setPhone(digits);
+
+    if (!deliveryAddress) return;
+    setDeliveryAddress({
+      ...deliveryAddress,
+      phone: digits,
+    });
+  };
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const next = e.target.value;
+    setRecipientName(next);
+
+    if (!deliveryAddress) return;
+    setDeliveryAddress({
+      ...deliveryAddress,
+      recipientName: next.trimStart(), //앞 공백만 제거
+    });
   };
 
   const isNextEnabled = useMemo(() => {
@@ -31,6 +65,9 @@ export function DetailInfoPage() {
       recipientName: recipientName.trim(),
       phone,
     });
+
+    setSelectedOptions({});
+
     navigate("/photoManage/print-option");
   };
 
@@ -42,7 +79,7 @@ export function DetailInfoPage() {
           placeholder="받는 사람의 이름을 입력해 주세요"
           size="large"
           value={recipientName}
-          onChange={(e) => setRecipientName(e.target.value)}
+          onChange={handleNameChange}
         />
         <InputForm
           name="휴대폰 번호"
@@ -52,6 +89,7 @@ export function DetailInfoPage() {
           onChange={handlePhoneChange}
         />
       </main>
+
       <footer className="border-neutral-850 sticky bottom-0 z-50 h-[var(--tabbar-height)] w-full max-w-6xl border-t bg-neutral-900">
         <div className="flex h-full items-center">
           <CTA_Button
diff --git a/src/pages/photoManage/PickUpMethodPage.tsx b/src/pages/photoManage/PickUpMethodPage.tsx
index c82be680..383d3faf 100644
--- a/src/pages/photoManage/PickUpMethodPage.tsx
+++ b/src/pages/photoManage/PickUpMethodPage.tsx
@@ -3,7 +3,7 @@ import { CTA_Button } from "@/components/common";
 import { BigButton } from "@/components/photoManage/BigButton";
 import { usePrintOrderStore } from "@/store/usePrintOrder.store";
 import type { ReceiptMethod } from "@/types/photomanage/process";
-import { useState } from "react";
+import { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router";
 
 type PickUpMethod = "pickup" | "delivery";
@@ -11,26 +11,53 @@ type PickUpMethod = "pickup" | "delivery";
 const toReceiptMethod = (m: PickUpMethod): ReceiptMethod =>
   m === "pickup" ? "PICKUP" : "DELIVERY";
 
+const fromReceiptMethod = (
+  m: ReceiptMethod | null | undefined,
+): PickUpMethod | null => {
+  if (m === "PICKUP") return "pickup";
+  if (m === "DELIVERY") return "delivery";
+  return null;
+};
+
 export function PickUpMethodPage() {
   const navigate = useNavigate();
+
+  const receiptMethod = usePrintOrderStore((s) => s.receiptMethod);
   const setReceiptMethod = usePrintOrderStore((s) => s.setReceiptMethod);
   const setDeliveryAddress = usePrintOrderStore((s) => s.setDeliveryAddress);
+
   const [selectedMethod, setSelectedMethod] = useState<PickUpMethod | null>(
-    null,
+    fromReceiptMethod(receiptMethod),
   );
 
-  const isNextEnabled = selectedMethod;
+  useEffect(() => {
+    setSelectedMethod(fromReceiptMethod(receiptMethod));
+  }, [receiptMethod]);
+
+  const isNextEnabled = useMemo(
+    () => Boolean(selectedMethod),
+    [selectedMethod],
+  );
+
+  const handlePick = (m: PickUpMethod) => {
+    setSelectedMethod(m);
+    //선택은 store에 유지
+    setReceiptMethod(toReceiptMethod(m));
+  };
 
   const handleNext = () => {
     if (!selectedMethod) return;
-    setReceiptMethod(toReceiptMethod(selectedMethod));
 
-    if (selectedMethod === "delivery") {
-      navigate("/photoManage/select-address");
-    } else {
-      setDeliveryAddress(null);
+    // 다음을 누르면 항상 주소 초기화(새로 입력 유도)
+    setDeliveryAddress(null);
+
+    if (selectedMethod === "pickup") {
       navigate("/photoManage/print-option");
+      return;
     }
+
+    // delivery
+    navigate("/photoManage/select-address");
   };
 
   return (
@@ -48,14 +75,14 @@ export function PickUpMethodPage() {
           description="매장 방문 후 직접 수령"
           icon={ShoeIcon}
           isSelected={selectedMethod === "pickup"}
-          onClick={() => setSelectedMethod("pickup")}
+          onClick={() => handlePick("pickup")}
         />
         <BigButton
           title="배송"
           description="배송비 3000원 추가"
           icon={TruckIcon}
           isSelected={selectedMethod === "delivery"}
-          onClick={() => setSelectedMethod("delivery")}
+          onClick={() => handlePick("delivery")}
         />
       </main>
 
diff --git a/src/pages/photoManage/PrintOptionPage.tsx b/src/pages/photoManage/PrintOptionPage.tsx
index a64283bd..f4a1f797 100644
--- a/src/pages/photoManage/PrintOptionPage.tsx
+++ b/src/pages/photoManage/PrintOptionPage.tsx
@@ -11,17 +11,13 @@ import type {
   DropDownSelection,
   PrintOptionItem,
 } from "@/types/photomanage/category";
-import type {
-  PrintQuoteRequest,
-  PrintQuoteResponse,
-} from "@/types/photomanage/printOrder";
+import type { PrintQuoteRequest } from "@/types/photomanage/printOrder";
 import { useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { useNavigate } from "react-router";
 
 const formatWon = (n: number) => `${n.toLocaleString("ko-KR")}원`;
 const formatPlusWon = (n: number) => `+ ${n.toLocaleString("ko-KR")}원`;
 
-// PrintOptionItem → DropDownOption 변환
 function toOption(item: PrintOptionItem, type: CategoryKey): DropDownOption {
   let priceText = "+0원";
 
@@ -45,6 +41,17 @@ function toOption(item: PrintOptionItem, type: CategoryKey): DropDownOption {
   };
 }
 
+function findOption(
+  categories: DropDownCategory[],
+  key: CategoryKey,
+  value?: string,
+): DropDownOption | null {
+  if (!value) return null;
+  const cat = categories.find((c) => c.key === key);
+  if (!cat) return null;
+  return cat.options.find((o) => o.value === value) ?? null;
+}
+
 export function PrintOptionPage() {
   const navigate = useNavigate();
 
@@ -53,18 +60,22 @@ export function PrintOptionPage() {
   const developmentOrderId = usePrintOrderStore((s) => s.developmentOrderId);
   const selectedPhotos = usePrintOrderStore((s) => s.selectedPhotos);
   const deliveryAddress = usePrintOrderStore((s) => s.deliveryAddress);
+
+  const selectedOptions = usePrintOrderStore((s) => s.selectedOptions);
   const setSelectedOptions = usePrintOrderStore((s) => s.setSelectedOptions);
-  const setPrintOrderId = usePrintOrderStore((s) => s.setPrintOrderId);
+
+  const totalPrice = usePrintOrderStore((s) => s.totalPrice);
   const setTotalPrice = usePrintOrderStore((s) => s.setTotalPrice);
 
+  const setPrintOrderId = usePrintOrderStore((s) => s.setPrintOrderId);
+
   const { data: printOptions } = usePrintOptions();
   const { mutate: submitOrder, isPending: isSubmitting } =
     useCreatePrintOrder();
 
-  const [quote, setQuote] = useState<PrintQuoteResponse | null>(null);
   const quoteRequestId = useRef(0);
+  const [isQuoting, setIsQuoting] = useState(false);
 
-  // API 데이터 → DropDownCategory[] 변환
   const categories = useMemo<DropDownCategory[]>(() => {
     if (!printOptions) return [];
     return [
@@ -104,6 +115,7 @@ export function PrintOptionPage() {
   }, [printOptions]);
 
   const [openKey, setOpenKey] = useState<CategoryKey | null>(null);
+
   const [selection, setSelection] = useState<DropDownSelection>({
     FILM: null,
     PRINT_METHOD: null,
@@ -112,6 +124,31 @@ export function PrintOptionPage() {
     PRINT_TYPE: null,
   });
 
+  //뒤로가기/새로고침 복원: store.selectedOptions(코드) -> DropDownOption
+  useEffect(() => {
+    if (!categories.length) return;
+
+    const id = window.setTimeout(() => {
+      setSelection({
+        FILM: findOption(categories, "FILM", selectedOptions.filmType),
+        PRINT_METHOD: findOption(
+          categories,
+          "PRINT_METHOD",
+          selectedOptions.printMethod,
+        ),
+        PAPER: findOption(categories, "PAPER", selectedOptions.paperType),
+        SIZE: findOption(categories, "SIZE", selectedOptions.size),
+        PRINT_TYPE: findOption(
+          categories,
+          "PRINT_TYPE",
+          selectedOptions.frameType,
+        ),
+      });
+    }, 0);
+
+    return () => window.clearTimeout(id);
+  }, [categories, selectedOptions]);
+
   const handleToggle = (key: CategoryKey) => {
     setOpenKey((prev) => (prev === key ? null : key));
   };
@@ -119,18 +156,32 @@ export function PrintOptionPage() {
   const handleSelect = (key: CategoryKey, option: DropDownOption) => {
     setSelection((prev) => ({ ...prev, [key]: option }));
     setOpenKey(null);
-    setQuote(null);
+
+    //선택 즉시 persist 저장
+    const next = {
+      ...selectedOptions,
+      ...(key === "FILM" ? { filmType: option.value } : null),
+      ...(key === "PRINT_METHOD" ? { printMethod: option.value } : null),
+      ...(key === "PAPER" ? { paperType: option.value } : null),
+      ...(key === "SIZE" ? { size: option.value } : null),
+      ...(key === "PRINT_TYPE" ? { frameType: option.value } : null),
+    };
+    setSelectedOptions(next);
+
+    //재조회 중 표시에 맞춰 일단 0으로
+    setTotalPrice(0);
   };
 
-  // 견적 요청 빌드
+  // 서버 견적 요청 빌드
   const buildQuoteRequest = useCallback((): PrintQuoteRequest | null => {
     if (
       !developmentOrderId ||
       !receiptMethod ||
       !selection.SIZE ||
       !selection.PRINT_TYPE
-    )
+    ) {
       return null;
+    }
 
     return {
       developmentOrderId,
@@ -154,45 +205,58 @@ export function PrintOptionPage() {
     deliveryAddress,
   ]);
 
-  // 옵션 변경 시 견적 API 호출 (stale 응답 무시)
+  // 옵션 변경/복원 시 서버 가격조회 계속 수행
   useEffect(() => {
     const request = buildQuoteRequest();
     if (!request) return;
 
     const id = ++quoteRequestId.current;
 
+    const t = window.setTimeout(() => {
+      setIsQuoting(true);
+    }, 0);
+
     quotePrintPrice(request)
       .then((res) => {
-        if (quoteRequestId.current === id) setQuote(res.data);
+        if (quoteRequestId.current !== id) return;
+
+        //store에 바로 반영
+        setTotalPrice(res.data.totalAmount ?? 0);
       })
       .catch((err) => {
         console.error("견적 조회 실패:", err);
+        if (quoteRequestId.current !== id) return;
+        setTotalPrice(0);
+      })
+      .finally(() => {
+        if (quoteRequestId.current !== id) return;
+        window.setTimeout(() => setIsQuoting(false), 0);
       });
-  }, [buildQuoteRequest]);
 
-  // 사이즈·인화유형 미선택 시 견적 표시하지 않음
-  const displayedQuote = selection.SIZE && selection.PRINT_TYPE ? quote : null;
+    return () => window.clearTimeout(t);
+  }, [buildQuoteRequest, setTotalPrice]);
+
   const isDelivery = receiptMethod === "DELIVERY";
   const shippingLabel = isDelivery ? "배송" : "직접수령";
-  const shippingFee =
-    displayedQuote?.deliveryFee ?? (isDelivery ? DELIVERY_FEE_WON : 0);
+  const shippingFee = isDelivery ? DELIVERY_FEE_WON : 0;
+
+  const hasRequired = Boolean(selection.SIZE && selection.PRINT_TYPE);
+
+  //총 금액은 서버 조회 결과(store.totalPrice)
+  const displayedTotal = hasRequired ? totalPrice : 0;
+
+  //송금 가능 조건: 필수옵션 선택 + 견적조회 완료 + 금액>0 + 제출중X
+  const canPay =
+    hasRequired && !isQuoting && displayedTotal > 0 && !isSubmitting;
 
   const handleSubmit = () => {
     const request = buildQuoteRequest();
     if (!request) return;
-
-    setSelectedOptions({
-      filmType: selection.FILM?.value,
-      printMethod: selection.PRINT_METHOD?.value,
-      paperType: selection.PAPER?.value,
-      size: selection.SIZE?.value,
-      frameType: selection.PRINT_TYPE?.value,
-    });
+    if (!canPay) return;
 
     submitOrder(request, {
       onSuccess: (res) => {
         setPrintOrderId(res.data);
-        setTotalPrice(displayedQuote?.totalAmount ?? 0);
         navigate("/photoManage/transaction");
       },
     });
@@ -239,21 +303,21 @@ export function PrintOptionPage() {
           <div className="mt-4 mb-4 flex justify-between text-[1.1875rem]">
             <p>총 금액</p>
             <p className="text-orange-500">
-              {displayedQuote
-                ? formatWon(displayedQuote.totalAmount)
-                : formatWon(0)}
+              {isQuoting && hasRequired
+                ? "계산 중..."
+                : formatWon(displayedTotal)}
             </p>
           </div>
         </section>
       </main>
 
-      <footer className="border-neutral-850 sticky bottom-0 z-50 h-[var(--tabbar-height)] w-full max-w-6xl border-t bg-neutral-900">
-        <div className="flex h-full items-center">
+      <footer className="border-neutral-850 fixed inset-x-0 bottom-0 z-50 h-[var(--tabbar-height)] w-full max-w-6xl border-t bg-neutral-900">
+        <div className="flex h-full items-center px-4 py-5">
           <CTA_Button
-            text="송금하기"
+            text={isQuoting ? "금액 계산 중..." : "송금하기"}
             size="xlarge"
-            color={displayedQuote ? "orange" : "black"}
-            disabled={!displayedQuote || isSubmitting}
+            color={canPay ? "orange" : "black"}
+            disabled={!canPay}
             onClick={handleSubmit}
           />
         </div>

From c370e050c23bd0b4f9dbaeed877ba19862dd2ba8 Mon Sep 17 00:00:00 2001
From: jeonbinggu <tinyjbk123@gmail.com>
Date: Wed, 11 Feb 2026 10:54:52 +0900
Subject: [PATCH 3/5] =?UTF-8?q?feat:=20=EC=A3=BC=EC=86=8C=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EC=A0=95=EB=B3=B4=20=EC=9E=85=EB=A0=A5=20=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/CTA_Button.tsx        |  2 +-
 src/pages/photoManage/AddressDetailPage.tsx |  6 ++++++
 src/pages/photoManage/SelectAddressPage.tsx | 15 +++++++++++++++
 src/router/Router.tsx                       |  6 ++++++
 4 files changed, 28 insertions(+), 1 deletion(-)
 create mode 100644 src/pages/photoManage/AddressDetailPage.tsx

diff --git a/src/components/common/CTA_Button.tsx b/src/components/common/CTA_Button.tsx
index f86eb316..1b719449 100644
--- a/src/components/common/CTA_Button.tsx
+++ b/src/components/common/CTA_Button.tsx
@@ -36,7 +36,7 @@ export const CTA_Button = ({
 }: CTA_ButtonProps) => {
   const router = useNavigate();
   const baseClass =
-    "inline-flex items-center justify-center rounded-2xl border shadow-sm active:scale-[0.99]";
+    "inline-flex items-center justify-center rounded-2xl border shadow-sm active:scale-[0.99] gap-2";
   const sizeClass: Record<CTA_ButtonSize, string> = {
     xsmall: "h-[2.875rem] w-[7.5625rem] text-[0.875rem]",
     small: "h-[3.5rem] w-[7.5625rem]",
diff --git a/src/pages/photoManage/AddressDetailPage.tsx b/src/pages/photoManage/AddressDetailPage.tsx
new file mode 100644
index 00000000..46ea2b27
--- /dev/null
+++ b/src/pages/photoManage/AddressDetailPage.tsx
@@ -0,0 +1,6 @@
+export function AddressDetailPage() {
+  return <>주소 상세 정보 페이지</>;
+}
+
+// 입력 폼 받아서 상태 저장 후 slecectAdress 로 이동
+// back을 하면 어떻게 할지..?
diff --git a/src/pages/photoManage/SelectAddressPage.tsx b/src/pages/photoManage/SelectAddressPage.tsx
index c55f7a53..929f2810 100644
--- a/src/pages/photoManage/SelectAddressPage.tsx
+++ b/src/pages/photoManage/SelectAddressPage.tsx
@@ -29,7 +29,21 @@ export function SelectAddressPage() {
       },
       {
         onSuccess: (res) => {
+          //1) 선택 처리
           setSelectedId(res.data.addressId);
+
+          //2) store에 바로 넣고 (상세는 detail에서 입력)
+          setDeliveryAddress({
+            recipientName: "",
+            phone: "",
+            zipcode: data.zipcode,
+            address: data.address,
+            addressDetail: "",
+          });
+
+          //3) 상세 입력 페이지로 바로 이동
+          navigate("../address-detail");
+          //prettier-ignore
         },
       },
     );
@@ -46,6 +60,7 @@ export function SelectAddressPage() {
       address: selected.address,
       addressDetail: selected.addressDetail,
     });
+
     navigate("./detail");
   };
 
diff --git a/src/router/Router.tsx b/src/router/Router.tsx
index 57d50aae..e40cfbc2 100644
--- a/src/router/Router.tsx
+++ b/src/router/Router.tsx
@@ -59,6 +59,7 @@ import {
   SocialPage,
   WithDrawPage,
 } from "@/pages/mypage";
+import { AddressDetailPage } from "@/pages/photoManage/AddressDetailPage";
 
 type RouteHandle =
   | {
@@ -151,6 +152,11 @@ const photoManageRoutes = [
     Component: TransactionPage,
     handle: h({ title: "송금하기" }),
   },
+  {
+    path: "address-detail",
+    Component: AddressDetailPage,
+    handle: h({ title: "상세 정보 입력하기" }),
+  },
 ];
 
 // MyPageLayout 하위(공통 prefix: mypage)

From babe8e842edc970799f9c44388396509441bf1d8 Mon Sep 17 00:00:00 2001
From: jeonbinggu <tinyjbk123@gmail.com>
Date: Wed, 11 Feb 2026 12:08:24 +0900
Subject: [PATCH 4/5] =?UTF-8?q?feat:=20=EC=A3=BC=EC=86=8C=20=EC=83=81?=
 =?UTF-8?q?=EC=84=B8=20=EC=A0=95=EB=B3=B4=20=EC=9E=85=EB=A0=A5=20UI=20?=
 =?UTF-8?q?=EA=B5=AC=ED=98=84(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/photoManage/AddressDetailPage.tsx | 118 +++++++++++++++++++-
 1 file changed, 114 insertions(+), 4 deletions(-)

diff --git a/src/pages/photoManage/AddressDetailPage.tsx b/src/pages/photoManage/AddressDetailPage.tsx
index 46ea2b27..b8eb3dcd 100644
--- a/src/pages/photoManage/AddressDetailPage.tsx
+++ b/src/pages/photoManage/AddressDetailPage.tsx
@@ -1,6 +1,116 @@
+import type React from "react";
+import { ActionButton, InputForm } from "@/components/auth";
+import { CTA_Button } from "@/components/common";
+import { usePrintOrderStore } from "@/store/usePrintOrder.store";
+import { useEffect, useMemo, useState } from "react";
+import { useNavigate } from "react-router";
+
 export function AddressDetailPage() {
-  return <>주소 상세 정보 페이지</>;
-}
+  const navigate = useNavigate();
+
+  const deliveryAddress = usePrintOrderStore((s) => s.deliveryAddress);
+  const setDeliveryAddress = usePrintOrderStore((s) => s.setDeliveryAddress);
+  const setSelectedOptions = usePrintOrderStore((s) => s.setSelectedOptions);
+
+  //store 값으로 초기화
+  const [recipientName, setRecipientName] = useState(
+    deliveryAddress?.recipientName ?? "",
+  );
+  const [phone, setPhone] = useState(deliveryAddress?.phone ?? "");
+
+  //뒤로 갔다가 다시 들어왔을 때(또는 주소 선택 페이지에서 address가 갱신됐을 때)
+  //로컬 state가 store를 따라가게 동기화
+  useEffect(() => {
+    const id = window.setTimeout(() => {
+      setRecipientName(deliveryAddress?.recipientName ?? "");
+      setPhone(deliveryAddress?.phone ?? "");
+    }, 0);
+
+    return () => window.clearTimeout(id);
+  }, [deliveryAddress?.recipientName, deliveryAddress?.phone]);
+
+  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const digits = e.target.value.replace(/\D/g, "").slice(0, 11);
+    setPhone(digits);
+
+    if (!deliveryAddress) return;
+    setDeliveryAddress({
+      ...deliveryAddress,
+      phone: digits,
+    });
+  };
+
+  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const next = e.target.value;
+    setRecipientName(next);
 
-// 입력 폼 받아서 상태 저장 후 slecectAdress 로 이동
-// back을 하면 어떻게 할지..?
+    if (!deliveryAddress) return;
+    setDeliveryAddress({
+      ...deliveryAddress,
+      recipientName: next.trimStart(), //앞 공백만 제거
+    });
+  };
+
+  const isNextEnabled = useMemo(() => {
+    const nameOk = recipientName.trim().length > 0;
+    const phoneOk = phone.length >= 10 && phone.length <= 11;
+    return nameOk && phoneOk;
+  }, [recipientName, phone]);
+
+  const handleComplete = () => {
+    if (!deliveryAddress) return;
+
+    setDeliveryAddress({
+      ...deliveryAddress,
+      recipientName: recipientName.trim(),
+      phone,
+    });
+
+    setSelectedOptions({});
+
+    navigate("/photoManage/print-option");
+  };
+
+  return (
+    <div className="flex h-full flex-col">
+      <main className="flex flex-1 flex-col gap-10 py-10">
+        <section className="flex gap-[1.25rem]">
+          <InputForm
+            name="주소"
+            placeholder="주소를 입력해주세요"
+            size="medium"
+            value={recipientName}
+            onChange={handleNameChange}
+          />
+          <ActionButton type="button" text="주소 찾기" disabled />
+        </section>
+        <InputForm
+          name="상세주소"
+          placeholder="상세주소를 입력해주세요"
+          size="large"
+          value={phone}
+          onChange={handlePhoneChange}
+        />
+        <InputForm
+          name="배송지명"
+          placeholder="배송지명을 입력해주세요 (예: 우리집, 회사)"
+          size="large"
+          value={phone}
+          onChange={handlePhoneChange}
+        />
+      </main>
+
+      <footer className="border-neutral-850 sticky bottom-0 z-50 h-[var(--tabbar-height)] w-full max-w-6xl border-t bg-neutral-900">
+        <div className="flex h-full items-center">
+          <CTA_Button
+            text="입력 완료"
+            size="xlarge"
+            color={isNextEnabled ? "orange" : "black"}
+            disabled={!isNextEnabled}
+            onClick={handleComplete}
+          />
+        </div>
+      </footer>
+    </div>
+  );
+}

From 78b2b6342667e1d08314b0750cdc2b651ea57c94 Mon Sep 17 00:00:00 2001
From: jeonbinggu <tinyjbk123@gmail.com>
Date: Thu, 12 Feb 2026 23:43:28 +0900
Subject: [PATCH 5/5] =?UTF-8?q?feat:=20PM-043=20UI=20=EA=B5=AC=ED=98=84=20?=
 =?UTF-8?q?=EB=B0=8F=20api=20=EC=97=B0=EB=8F=99(#202)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/photoManage/AddressDetailPage.tsx | 141 ++++++++++++--------
 src/pages/photoManage/PickUpMethodPage.tsx  |   6 +
 src/pages/photoManage/SelectAddressPage.tsx |  63 +++++----
 src/store/useAddressId.store.ts             |  11 ++
 4 files changed, 133 insertions(+), 88 deletions(-)
 create mode 100644 src/store/useAddressId.store.ts

diff --git a/src/pages/photoManage/AddressDetailPage.tsx b/src/pages/photoManage/AddressDetailPage.tsx
index b8eb3dcd..338267ee 100644
--- a/src/pages/photoManage/AddressDetailPage.tsx
+++ b/src/pages/photoManage/AddressDetailPage.tsx
@@ -1,6 +1,8 @@
 import type React from "react";
 import { ActionButton, InputForm } from "@/components/auth";
 import { CTA_Button } from "@/components/common";
+import { DaumAddressSearch } from "@/components/photoManage/DaumAddressSearch";
+import { useCreateAddress } from "@/hooks/member";
 import { usePrintOrderStore } from "@/store/usePrintOrder.store";
 import { useEffect, useMemo, useState } from "react";
 import { useNavigate } from "react-router";
@@ -10,65 +12,74 @@ export function AddressDetailPage() {
 
   const deliveryAddress = usePrintOrderStore((s) => s.deliveryAddress);
   const setDeliveryAddress = usePrintOrderStore((s) => s.setDeliveryAddress);
-  const setSelectedOptions = usePrintOrderStore((s) => s.setSelectedOptions);
 
-  //store 값으로 초기화
-  const [recipientName, setRecipientName] = useState(
-    deliveryAddress?.recipientName ?? "",
+  const { mutate: addAddress, isPending } = useCreateAddress();
+
+  //주소 재검색 모달
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+
+  //입력값: 배송지명 / 상세주소
+  const [addressName, setAddressName] = useState("");
+  const [addressDetail, setAddressDetail] = useState(
+    deliveryAddress?.addressDetail ?? "",
   );
-  const [phone, setPhone] = useState(deliveryAddress?.phone ?? "");
 
-  //뒤로 갔다가 다시 들어왔을 때(또는 주소 선택 페이지에서 address가 갱신됐을 때)
-  //로컬 state가 store를 따라가게 동기화
+  //store(주소선택)에서 온 값이 바뀌면 상세주소는 유지
   useEffect(() => {
     const id = window.setTimeout(() => {
-      setRecipientName(deliveryAddress?.recipientName ?? "");
-      setPhone(deliveryAddress?.phone ?? "");
+      setAddressDetail(deliveryAddress?.addressDetail ?? "");
     }, 0);
 
     return () => window.clearTimeout(id);
-  }, [deliveryAddress?.recipientName, deliveryAddress?.phone]);
+  }, [deliveryAddress?.addressDetail]);
 
-  const handlePhoneChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const digits = e.target.value.replace(/\D/g, "").slice(0, 11);
-    setPhone(digits);
+  const zipcode = deliveryAddress?.zipcode ?? "";
+  const address = deliveryAddress?.address ?? "";
 
-    if (!deliveryAddress) return;
-    setDeliveryAddress({
-      ...deliveryAddress,
-      phone: digits,
-    });
-  };
+  const canSubmit = useMemo(() => {
+    const nameOk = addressName.trim().length > 0;
+    const detailOk = addressDetail.trim().length > 0;
+    const baseOk = zipcode.trim().length > 0 && address.trim().length > 0;
+    return nameOk && detailOk && baseOk && !isPending;
+  }, [addressName, addressDetail, zipcode, address, isPending]);
 
-  const handleNameChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    const next = e.target.value;
-    setRecipientName(next);
-
-    if (!deliveryAddress) return;
+  const handleAddressFound = (data: { zipcode: string; address: string }) => {
+    //주소 다시 선택하면 store 갱신
     setDeliveryAddress({
-      ...deliveryAddress,
-      recipientName: next.trimStart(), //앞 공백만 제거
+      recipientName: "", // store 타입 유지용(지금 플로우에선 안 씀)
+      phone: "", // store 타입 유지용(지금 플로우에선 안 씀)
+      zipcode: data.zipcode,
+      address: data.address,
+      addressDetail, // 현재 입력중 상세주소 유지
     });
-  };
-
-  const isNextEnabled = useMemo(() => {
-    const nameOk = recipientName.trim().length > 0;
-    const phoneOk = phone.length >= 10 && phone.length <= 11;
-    return nameOk && phoneOk;
-  }, [recipientName, phone]);
-
-  const handleComplete = () => {
-    if (!deliveryAddress) return;
 
-    setDeliveryAddress({
-      ...deliveryAddress,
-      recipientName: recipientName.trim(),
-      phone,
-    });
-
-    setSelectedOptions({});
+    setIsSearchOpen(false);
+  };
 
-    navigate("/photoManage/print-option");
+  const handleSubmit = () => {
+    if (!canSubmit) return;
+
+    // 기본주소는 zustand에서 가져온 그대로 사용
+    addAddress(
+      {
+        addressName: addressName.trim(),
+        zipcode,
+        address,
+        addressDetail: addressDetail.trim(),
+        isDefault: false,
+      },
+      {
+        onSuccess: (res) => {
+          const newId = res.data.addressId;
+
+          // SelectAddressPage로 돌아가면서 상세 주소 정보 입력한 주소가 선택되게
+          navigate("../select-address", {
+            replace: true,
+            state: { selectedAddressId: newId },
+          });
+        },
+      },
+    );
   };
 
   return (
@@ -77,40 +88,58 @@ export function AddressDetailPage() {
         <section className="flex gap-[1.25rem]">
           <InputForm
             name="주소"
-            placeholder="주소를 입력해주세요"
+            placeholder="주소를 선택해주세요"
             size="medium"
-            value={recipientName}
-            onChange={handleNameChange}
+            value={address}
+            onChange={() => {}}
+            disabled={true}
+          />
+          <ActionButton
+            type="button"
+            text="주소 찾기"
+            disabled={false}
+            onClick={() => setIsSearchOpen(true)}
           />
-          <ActionButton type="button" text="주소 찾기" disabled />
         </section>
+
         <InputForm
           name="상세주소"
           placeholder="상세주소를 입력해주세요"
           size="large"
-          value={phone}
-          onChange={handlePhoneChange}
+          value={addressDetail}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setAddressDetail(e.target.value)
+          }
         />
+
         <InputForm
           name="배송지명"
           placeholder="배송지명을 입력해주세요 (예: 우리집, 회사)"
           size="large"
-          value={phone}
-          onChange={handlePhoneChange}
+          value={addressName}
+          onChange={(e: React.ChangeEvent<HTMLInputElement>) =>
+            setAddressName(e.target.value)
+          }
         />
       </main>
 
       <footer className="border-neutral-850 sticky bottom-0 z-50 h-[var(--tabbar-height)] w-full max-w-6xl border-t bg-neutral-900">
         <div className="flex h-full items-center">
           <CTA_Button
-            text="입력 완료"
+            text={isPending ? "저장 중..." : "입력 완료"}
             size="xlarge"
-            color={isNextEnabled ? "orange" : "black"}
-            disabled={!isNextEnabled}
-            onClick={handleComplete}
+            color={canSubmit ? "orange" : "black"}
+            disabled={!canSubmit}
+            onClick={handleSubmit}
           />
         </div>
       </footer>
+
+      <DaumAddressSearch
+        open={isSearchOpen}
+        onClose={() => setIsSearchOpen(false)}
+        onComplete={handleAddressFound}
+      />
     </div>
   );
 }
diff --git a/src/pages/photoManage/PickUpMethodPage.tsx b/src/pages/photoManage/PickUpMethodPage.tsx
index 383d3faf..b46b66a0 100644
--- a/src/pages/photoManage/PickUpMethodPage.tsx
+++ b/src/pages/photoManage/PickUpMethodPage.tsx
@@ -1,6 +1,7 @@
 import { ShoeIcon, TruckIcon } from "@/assets/icon";
 import { CTA_Button } from "@/components/common";
 import { BigButton } from "@/components/photoManage/BigButton";
+import { useAddressIdStore } from "@/store/useAddressId.store";
 import { usePrintOrderStore } from "@/store/usePrintOrder.store";
 import type { ReceiptMethod } from "@/types/photomanage/process";
 import { useEffect, useMemo, useState } from "react";
@@ -22,9 +23,12 @@ const fromReceiptMethod = (
 export function PickUpMethodPage() {
   const navigate = useNavigate();
 
+  const setSelectedAddressId = useAddressIdStore((s) => s.setSelectedAddressId);
+
   const receiptMethod = usePrintOrderStore((s) => s.receiptMethod);
   const setReceiptMethod = usePrintOrderStore((s) => s.setReceiptMethod);
   const setDeliveryAddress = usePrintOrderStore((s) => s.setDeliveryAddress);
+  const setSelectedOptions = usePrintOrderStore((s) => s.setSelectedOptions);
 
   const [selectedMethod, setSelectedMethod] = useState<PickUpMethod | null>(
     fromReceiptMethod(receiptMethod),
@@ -50,8 +54,10 @@ export function PickUpMethodPage() {
 
     // 다음을 누르면 항상 주소 초기화(새로 입력 유도)
     setDeliveryAddress(null);
+    setSelectedAddressId(null);
 
     if (selectedMethod === "pickup") {
+      setSelectedOptions({});
       navigate("/photoManage/print-option");
       return;
     }
diff --git a/src/pages/photoManage/SelectAddressPage.tsx b/src/pages/photoManage/SelectAddressPage.tsx
index 929f2810..3a69fde2 100644
--- a/src/pages/photoManage/SelectAddressPage.tsx
+++ b/src/pages/photoManage/SelectAddressPage.tsx
@@ -2,53 +2,52 @@ import { PlusIcon } from "@/assets/icon";
 import { CTA_Button } from "@/components/common";
 import { AddressCard } from "@/components/photoManage/AddressCard";
 import { DaumAddressSearch } from "@/components/photoManage/DaumAddressSearch";
-import { useAddressList, useCreateAddress } from "@/hooks/member";
+import { useAddressList } from "@/hooks/member";
+import { useAddressIdStore } from "@/store/useAddressId.store";
 import { usePrintOrderStore } from "@/store/usePrintOrder.store";
-import { useMemo, useState } from "react";
-import { useNavigate } from "react-router";
+import { useEffect, useMemo, useState } from "react";
+import { useLocation, useNavigate } from "react-router";
+
+type LocationState = { selectedAddressId?: number } | null;
 
 export function SelectAddressPage() {
   const navigate = useNavigate();
+  const location = useLocation();
+  const state = (location.state as LocationState) ?? null;
   const setDeliveryAddress = usePrintOrderStore((s) => s.setDeliveryAddress);
 
   const { data: addresses = [] } = useAddressList();
-  const { mutate: addAddress } = useCreateAddress();
 
-  const [selectedId, setSelectedId] = useState<number | null>(null);
+  const selectedId = useAddressIdStore((s) => s.selectedAddressId);
+  const setSelectedId = useAddressIdStore((s) => s.setSelectedAddressId);
   const [isSearchOpen, setIsSearchOpen] = useState(false);
 
   const isNextEnabled = useMemo(() => selectedId !== null, [selectedId]);
 
   const handleAddressFound = (data: { zipcode: string; address: string }) => {
-    addAddress(
-      {
-        addressName: "새 주소",
-        zipcode: data.zipcode,
-        address: data.address,
-        isDefault: addresses.length === 0,
-      },
-      {
-        onSuccess: (res) => {
-          //1) 선택 처리
-          setSelectedId(res.data.addressId);
-
-          //2) store에 바로 넣고 (상세는 detail에서 입력)
-          setDeliveryAddress({
-            recipientName: "",
-            phone: "",
-            zipcode: data.zipcode,
-            address: data.address,
-            addressDetail: "",
-          });
-
-          //3) 상세 입력 페이지로 바로 이동
-          navigate("../address-detail");
-          //prettier-ignore
-        },
-      },
-    );
+    //1) store에 바로 넣고 (상세는 detail에서 입력)
+    setDeliveryAddress({
+      recipientName: "",
+      phone: "",
+      zipcode: data.zipcode,
+      address: data.address,
+      addressDetail: "",
+    });
+
+    //2) 상세 입력 페이지로 바로 이동
+    navigate("../address-detail");
+    //prettier-ignore
   };
 
+  useEffect(() => {
+    if (state?.selectedAddressId == null) return;
+
+    setSelectedId(state.selectedAddressId);
+
+    // 뒤로가기/재진입 때 계속 남는 것 방지: state 제거
+    navigate(location.pathname, { replace: true, state: null });
+  }, [state?.selectedAddressId, navigate, location.pathname]);
+
   const handleComplete = () => {
     const selected = addresses.find((a) => a.addressId === selectedId);
     if (!selected) return;
diff --git a/src/store/useAddressId.store.ts b/src/store/useAddressId.store.ts
new file mode 100644
index 00000000..3e9a0c00
--- /dev/null
+++ b/src/store/useAddressId.store.ts
@@ -0,0 +1,11 @@
+import { create } from "zustand";
+
+type PrintOrderState = {
+  selectedAddressId: number | null;
+  setSelectedAddressId: (id: number | null) => void;
+};
+
+export const useAddressIdStore = create<PrintOrderState>()((set) => ({
+  selectedAddressId: null,
+  setSelectedAddressId: (id) => set({ selectedAddressId: id }),
+}));