[Feat] 배송 및 해금 로직 수정 + 트래킹 모달 추가 (#81)

* feat: api 연결

* feat: 트래킹 모달 설정

Author: BeanMouse

.pnp.cjs

@@ -23,6 +23,7 @@
     "clsx": "^2.1.1",
     "react": "^19.1.0",
     "react-calendar": "^6.0.0",
+    "react-daum-postcode": "^3.2.0",
     "react-dom": "^19.1.0",
     "react-router-dom": "^7.6.3",
     "swiper": "^11.2.10",

package.json

@@ -50,9 +50,9 @@ const App = () => {
         <Route path="/option" element={<OptionPage />} />
         <Route path="/register" element={<RegisterPage />} />
         <Route path="/onboarding" element={<OnboardingPage />} />
-        <Route path="unlock-garden" element={<UnlockGardenPlotPage />} />
-        <Route path="delivery" element={<DeliveryPage />} />
-        <Route path="delivery/complete" element={<CompletePage />} />
+        <Route path="/unlock-garden" element={<UnlockGardenPlotPage />} />
+        <Route path="/delivery" element={<DeliveryPage />} />
+        <Route path="/delivery/complete" element={<CompletePage />} />
         <Route path="/profile/:userId" element={<ProfilePage />} />
       </Route>
     </Routes>

src/App.tsx

@@ -260,7 +260,7 @@ const BottomSheet: React.FC<{ setIsModalOpen: (isOpen: boolean) => void }> = ({
                         ? "border-transparent bg-primary-varient text-primary-font text-body1"
                         : "border-gray-200 bg-white text-gray-600 text-body2"
                     }`}
-                  onClick={action}
+                  onClick={on ? () => {} : action}
                 >
                   {label}
                   {on ? (
@@ -280,7 +280,7 @@ const BottomSheet: React.FC<{ setIsModalOpen: (isOpen: boolean) => void }> = ({
                 소망 나무
               </div>
               <p>
-                {percent && percent > 100 ? (
+                {percent && percent >= 100 ? (
                   <span>
                     지금 바로{" "}
                     <span className="text-primary-font">새로운 텃밭</span>을 열

src/assets/icons/common/plus.svg

@@ -1,19 +1,39 @@
+import React, { useState } from "react";
+import DaumPostcode, { Address } from "react-daum-postcode";
+
 interface DeliveryAddressFormProps {
   zipcode: string;
   setZipcode: (v: string) => void;
+  setAddress: (v: string) => void;
   detailAddress: string;
   setDetailAddress: (v: string) => void;
 }
 
 const DeliveryAddressForm: React.FC<DeliveryAddressFormProps> = ({
   zipcode,
   setZipcode,
+  setAddress,
   detailAddress,
   setDetailAddress,
 }) => {
+  // 임베디드 검색창 열림/닫힘
+  const [isPostcodeOpen, setIsPostcodeOpen] = useState(false);
+  // 기준 주소(도로명/지번 등 최종 선택 주소)
+  const [baseAddress, setBaseAddress] = useState("");
+
+  const handleComplete = (data: Address) => {
+    // 선택된 값 반영
+    setZipcode(data.zonecode);
+    setBaseAddress(data.address); // 도로명/지번 자동 선택 규칙에 따른 최종 주소
+    setIsPostcodeOpen(false); // 선택 후 검색창 닫기 (원하면 유지해도 OK)
+    setAddress(data.address);
+  };
+
   return (
     <div className="flex flex-col gap-3 w-full max-w-md">
       <h2 className="text-lg font-semibold">받는 분 정보</h2>
+
+      {/* 주소 + 우편번호 */}
       <div className="flex flex-col gap-3">
         <div
           className={`flex flex-col gap-1 border-b py-2 ${
@@ -22,29 +42,47 @@ const DeliveryAddressForm: React.FC<DeliveryAddressFormProps> = ({
         >
           <label className="block text-gray-600 text-sm">주소</label>
           <div>
-            <div className="flex justify-between w-full gap-0.25">
+            <div className="flex justify-between w-full gap-0.5">
               <input
                 type="text"
                 value={zipcode}
                 onChange={e => setZipcode(e.target.value)}
-                placeholder="우편번호를 입력해주세요"
-                className="flex-1 text-sm placeholder:text-gray-400 placeholder:text-body2 focus:outline-none"
+                placeholder="우편번호를 찾아 선택해주세요"
+                className="flex-1 text-body2 placeholder:text-gray-400 placeholder:text-body2 focus:outline-none"
+                readOnly
               />
               <button
                 type="button"
                 className="whitespace-nowrap bg-gray-200 text-gray-600 px-3 py-1 text-body-sb rounded-lg"
+                onClick={() => setIsPostcodeOpen(v => !v)}
               >
-                우편번호 찾기
+                {isPostcodeOpen ? "닫기" : "주소 검색"}
               </button>
             </div>
           </div>
         </div>
-        <textarea
-          className="w-full border rounded-[8px] text-body2 resize-none border-gray-400 bg-gray-200"
-          rows={2}
+
+        {/* 임베디드 우편번호 검색창 */}
+        {isPostcodeOpen && (
+          <div className="w-full rounded-lg overflow-hidden border border-gray-200">
+            <DaumPostcode
+              onComplete={handleComplete}
+              style={{ width: "100%", height: "380px" }}
+              autoClose={false} // 임베디드에선 수동으로 닫는 게 자연스럽습니다
+            />
+          </div>
+        )}
+
+        {/* 선택된 기준 주소 표시 */}
+        <input
+          className="flex items-center justify-center w-full resize-none border rounded-[8px] border-gray-400 bg-gray-50 p-2 py-3 text-body2 focus:outline-none placeholder:text-gray-400 placeholder:text-body2"
+          placeholder="주소가 자동으로 입력 됩니다."
+          value={baseAddress}
+          readOnly
         />
       </div>
 
+      {/* 상세 주소 */}
       <div
         className={`flex flex-col border-b py-2 gap-1 ${
           detailAddress ? "border-primary" : "border-gray-400"