Design: 경비 디자인 수정

WePlanPlans · Jan 21, 2024 · b42e97d · b42e97d
1 parent 838344c
commit b42e97d
Showing 1 changed file with 35 additions and 30 deletions.
diff --git a/src/components/Plan/TripBudget.tsx b/src/components/Plan/TripBudget.tsx
@@ -40,11 +40,11 @@ const TripBudget = () => {
 
   return (
     <>
-      <div className={`${!budget?.budget ? 'pb-[55px]' : 'pb-[25px]'} my-4}`}>
+      <div className={`${!budget?.budget ? 'pb-[55px]' : 'pb-[25px]'}`}>
         <div className="caption1 mb-[2px]">사용 경비</div>
         <div className="flex items-center">
           <span className="title2 mr-[2px]">
-            {budget?.calculatedPrice.toLocaleString() ?? '-'}
+            {budget?.calculatedPrice.toLocaleString() ?? 0}
           </span>
           <span className="body1">원</span>
         </div>
@@ -67,72 +67,77 @@ const TripBudget = () => {
           />
         </Progress.Root>
 
-        <div className="caption2 flex items-center justify-between pt-1">
-          <div className="flex items-center">
-            <span className="body5 mr-[4px] text-gray5">목표 경비</span>
+        <div className="caption2 flex items-start justify-between pt-1">
+          <div className="flex items-start">
+            <span className="body5 mr-[4px] pt-[2px] text-gray5">
+              목표 경비
+            </span>
             {tripAuthority == 'WRITE' && (
               <Alert
                 title={'비용을 입력해주세요'}
                 message={''}
                 onConfirm={() => handleSetTargetBudget(inputBudget)}
+                onCancel={() => setInputBudget('')}
                 closeOnConfirm={true}
                 children={
                   <button className="text-gray3">
-                    <SettingIcons color="#D9D9D9" />
-                    {!budget?.budget && (
-                      <div className="h-[31.2px] w-[141px]">
-                        <div className="h-[27.16px] w-[141px]">
-                          <div className="relative left-[-80px] top-8 flex h-[27.16px] w-[141px] items-center justify-center gap-[0.8043220639228821px] rounded-lg bg-[#062139] px-3 py-[7px]">
+                    <div className="flex flex-col items-start">
+                      <SettingIcons color="#D9D9D9" />
+                      {!budget?.budget && (
+                        <div className="h-[31.2px] w-[141px]">
+                          <div className="relative left-[-58px] top-3 flex h-[27.16px] w-[141px] items-center justify-center gap-[0.8px] rounded-lg bg-[#062139] px-3 py-[7px]">
                             <div className="h-3.5 w-[129.36px]">
-                              <span className="caption1 w-[129.36px] text-center text-white">
+                              <span className="caption1 w-full whitespace-nowrap text-center text-white">
                                 목표 경비를 입력해보세요!
                               </span>
                             </div>
                           </div>
+                          <svg
+                            width={12}
+                            height={7}
+                            viewBox="0 0 12 7"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                            className="relative left-[3px] top-[-21px]"
+                            preserveAspectRatio="xMidYMid meet">
+                            <path
+                              d="M5.94048 0.136719L11.4521 6.20375L0.428827 6.20375L5.94048 0.136719Z"
+                              fill="#062139"
+                            />
+                          </svg>
                         </div>
-                        <svg
-                          width={12}
-                          height={7}
-                          viewBox="0 0 12 7"
-                          fill="none"
-                          xmlns="http://www.w3.org/2000/svg"
-                          className="relative left-[-15.8px] top-0"
-                          preserveAspectRatio="xMidYMid meet">
-                          <path
-                            d="M5.94048 0.136719L11.4521 6.20375L0.428827 6.20375L5.94048 0.136719Z"
-                            fill="#062139"
-                          />
-                        </svg>
-                      </div>
-                    )}
+                      )}
+                    </div>
                   </button>
                 }
                 content={
                   <div className="mb-6 mt-8 flex w-[80%] items-center justify-between border-b-[1px] border-solid border-gray4">
                     <div className="flex w-full items-center justify-between">
                       <input
                         type="number"
-                        className="title3 text-gray6 placeholder:text-gray4 focus:outline-none"
+                        className="title3 pl-[2px] text-gray6 placeholder:text-gray4 focus:outline-none"
                         placeholder="금액"
                         value={inputBudget}
                         onChange={(e) => setInputBudget(e.target.value)}
                       />
                       <div
-                        className="cursor-pointer"
+                        className="ml-[-16px] cursor-pointer"
                         onClick={() => setInputBudget('')}>
                         {showCloseIcon && (
                           <CloseIcon size={16} fill="#D7D7D7" />
                         )}
                       </div>
                     </div>
 
-                    <span className="title3 pl-[4.5px] text-gray4">원</span>
+                    <span className="title3 pl-[4px] pr-[5px] text-gray4">
+                      원
+                    </span>
                   </div>
                 }
               />
             )}
           </div>
-          <div>
+          <div className="flex items-start">
             <span>{budget?.budget.toLocaleString() ?? '- '}</span>
             <span>원</span>
           </div>