Design: 디자인 QA 적용

WePlanPlans · Jan 27, 2024 · f227214 · f227214
1 parent 6ac72a3
commit f227214
Show file tree

Hide file tree

Showing 13 changed files with 35 additions and 31 deletions.
diff --git a/src/components/Plan/PlanItemBox.tsx b/src/components/Plan/PlanItemBox.tsx
@@ -98,14 +98,13 @@ const PlanItemBox = ({
                     {tripAuthority == 'WRITE' && (
                       <Alert
                         title={'비용을 입력해주세요'}
-                        message={''}
                         onConfirm={() =>
                           handlePrice(inputPrice, item.tripItemId)
                         }
                         closeOnConfirm={true}
                         children={
                           <button>
-                            <PenIcon size={14} />
+                            <PenIcon size={15.5} color="#888888" />
                           </button>
                         }
                         content={

diff --git a/src/components/Plan/TripBudget.tsx b/src/components/Plan/TripBudget.tsx
@@ -75,17 +75,16 @@ const TripBudget = () => {
             {tripAuthority == 'WRITE' && (
               <Alert
                 title={'비용을 입력해주세요'}
-                message={''}
                 onConfirm={() => handleSetTargetBudget(inputBudget)}
                 onCancel={() => setInputBudget('')}
                 closeOnConfirm={true}
                 children={
                   <button className="text-gray3">
-                    <div className="flex flex-col items-start">
-                      <SettingIcons color="#D9D9D9" />
+                    <div className="flex flex-col items-start pt-[3px]">
+                      <SettingIcons color="#D9D9D9" size={15} />
                       {!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="relative left-[-62px] 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-full whitespace-nowrap text-center text-white">
                                 목표 경비를 입력해보세요!
@@ -98,7 +97,7 @@ const TripBudget = () => {
                             viewBox="0 0 12 7"
                             fill="none"
                             xmlns="http://www.w3.org/2000/svg"
-                            className="relative left-[3px] top-[-21px]"
+                            className="relative left-[1px] top-[-21px]"
                             preserveAspectRatio="xMidYMid meet">
                             <path
                               d="M5.94048 0.136719L11.4521 6.20375L0.428827 6.20375L5.94048 0.136719Z"

diff --git a/src/components/Tours/ToursCategoryItem.tsx b/src/components/Tours/ToursCategoryItem.tsx
@@ -4,7 +4,7 @@ const ToursCategoryItem = ({
   onSelect,
 }: ToursCategoryItemProps) => {
   const buttonStyle = isSelected
-    ? 'bg-[#28D8FF] text-white font-bold'
+    ? 'bg-[#28D8FF] text-white font-bold border-[#28D8FF]'
     : 'bg-[#fff] text-[#888] border-[#ededed]';
 
   return (

diff --git a/src/components/Trip/LikedToursLists/LikedToursListCategoryItem.tsx b/src/components/Trip/LikedToursLists/LikedToursListCategoryItem.tsx
@@ -16,13 +16,13 @@ export const LikedToursListCategoryItem: React.FC<
   };
 
   const buttonStyle = isSelected
-    ? 'bg-[#28D8FF] text-white font-bold'
+    ? 'bg-[#28D8FF] text-white font-bold border-[#28D8FF]'
     : 'bg-[#fff] text-[#888] border-[#ededed]';
 
   return (
     <button
       onClick={handleCategoryClick}
-      className={`body4 mr-[5px] flex items-center justify-center whitespace-nowrap  rounded-[30px] border border-solid bg-[#28D8FF] px-[16px] py-[7px] leading-normal ${buttonStyle}`}>
+      className={`body4 mr-[5px] flex items-center justify-center whitespace-nowrap rounded-[30px] border border-solid bg-[#28D8FF] px-[18px] py-[7px] leading-normal ${buttonStyle}`}>
       {category.name}
     </button>
   );

diff --git a/src/components/Trip/TripPreference.tsx b/src/components/Trip/TripPreference.tsx
@@ -89,15 +89,15 @@ const RatioBar = ({ value, total, color, label1, label2 }: RatioBarParams) => {
           <div className={`w-[65px] ${isZeroWeight} ${isZeroColor}`}>
             {label1}
           </div>
-          <div className="flex h-[10px] w-[175px] rounded-full bg-gray2">
+          <div className="flex h-[8px] w-[175px] rounded-full bg-gray2">
             <div style={{ width }} className={`rounded-full bg-${color}`}></div>
           </div>
           <div className="ml-auto text-gray6">{label2}</div>
         </>
       ) : (
         <>
           <div className={`w-[65px] text-gray6`}>{label1}</div>
-          <div className="flex h-[10px] w-[175px] rounded-full bg-gray2">
+          <div className="flex h-[8px] w-[175px] rounded-full bg-gray2">
             <div
               style={{ width }}
               className={`ml-auto rounded-full bg-${color}`}></div>

diff --git a/src/components/Wish/WishCategoryItem.tsx b/src/components/Wish/WishCategoryItem.tsx
@@ -21,13 +21,13 @@ const WishCategoryItem: React.FC<WishCategoryItemProps> = ({
   };
 
   const buttonStyle = isSelected
-    ? 'bg-[#28D8FF] text-white font-bold'
+    ? 'bg-[#28D8FF] text-white font-bold border-[#28D8FF]'
     : 'bg-[#fff] text-[#888] border-[#ededed]';
 
   return (
     <button
       onClick={handleCategoryClick}
-      className={`body4 mr-[5px] flex items-center justify-center whitespace-nowrap  rounded-[30px] border border-solid bg-[#28D8FF] px-[16px] py-[7px] leading-normal ${buttonStyle}`}>
+      className={`body4 mr-[5px] flex items-center justify-center whitespace-nowrap rounded-[30px] border border-solid bg-[#28D8FF] px-[18px] py-[7px] leading-normal ${buttonStyle}`}>
       {category.name}
     </button>
   );

diff --git a/src/components/common/alert/Alert.tsx b/src/components/common/alert/Alert.tsx
@@ -33,13 +33,13 @@ const Alert: FC<AlertProps> = ({
     <Dialog.Portal>
       <Dialog.Overlay className="fixed inset-0 z-[120] h-[100%] bg-black opacity-70" />
       <Dialog.Content
-        className={`${
-          content && 'pb-[16px] pt-10'
+        className={`${content && 'pb-[16px] pt-10'} ${
+          !message && content && 'pt-5'
         } fixed left-[50%] top-[50%] z-[130] flex min-h-[192px] w-[309px] translate-x-[-50%] translate-y-[-50%] flex-col items-center justify-center rounded-2xl bg-white px-[14px] shadow-lg focus:outline-none`}>
         <Dialog.Description
           className={`${
             content ? 'w-full pl-2 text-left' : 'text-center text-[15px]'
-          } mt-[10px] font-bold leading-normal`}>
+          } mt-[10px] pb-[5px] font-bold leading-normal`}>
           <p
             className={` ${
               content && 'title3 text-left'

diff --git a/src/components/common/icons/Icons.tsx b/src/components/common/icons/Icons.tsx
@@ -59,7 +59,7 @@ export const CalendarIcon: React.FC<IconProps> = ({
   );
 };
 
-export const CalendarIcon2: React.FC<IconProps> = ({ size = 25 }) => {
+export const CalendarIcon2: React.FC<IconProps> = ({ size = 24 }) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -134,7 +134,7 @@ export const CalendarIcon2: React.FC<IconProps> = ({ size = 25 }) => {
 };
 
 export const CalendarIcon3: React.FC<IconProps> = ({
-  size = 25,
+  size = 24,
   color = 'black',
   fill = 'none',
   className,

diff --git a/src/components/common/nav/Nav.tsx b/src/components/common/nav/Nav.tsx
@@ -55,11 +55,7 @@ const Nav = () => {
             onClick={() => navigate('/mytrip')}
             className="cursor-pointe w-[53.12px] flex-col items-center justify-center px-2">
             <div className="flex justify-center">
-              {isActive('/mytrip') ? (
-                <CalendarIcon2 size={24} />
-              ) : (
-                <CalendarIcon3 size={24} />
-              )}
+              {isActive('/mytrip') ? <CalendarIcon2 /> : <CalendarIcon3 />}
             </div>
             <p className="caption1 mt-[5px] text-center text-xs/[11px] font-normal text-gray7">
               여정

diff --git a/src/components/common/tab/Tab.tsx b/src/components/common/tab/Tab.tsx
@@ -16,11 +16,15 @@ const Tab = ({ lists, contents }: TabProps) => {
   };
 
   let isDayTab = false;
+  let isParticipationTab = false;
 
   lists.forEach((list) => {
     if (list.includes('DAY')) {
       isDayTab = true;
     }
+    if (list.includes('참여')) {
+      isParticipationTab = true;
+    }
   });
 
   return (
@@ -30,15 +34,21 @@ const Tab = ({ lists, contents }: TabProps) => {
       onValueChange={handleTabChange}>
       <Tabs.List
         className={`${
-          !isDayTab && 'justify-center'
+          isParticipationTab
+            ? 'gap-[8px]'
+            : !isDayTab && 'justify-center gap-[14.39px]'
         } border-b-1 no-scrollbar flex shrink-0 overflow-x-scroll`}
         aria-label="Manage your account">
         {lists.map((list, index) => {
           return (
             <Tabs.Trigger
               key={index}
               className={`${
-                isDayTab ? 'caption1' : 'headline1 w-[136px]'
+                isParticipationTab
+                  ? 'headline2 w-[54px]'
+                  : isDayTab
+                    ? 'caption1'
+                    : 'headline1 w-[136px]'
               } flex min-w-[57px] cursor-pointer select-none items-center justify-center border-b-2 border-solid border-gray2 py-[8px] leading-none text-gray4 outline-none data-[state=active]:border-b-2 data-[state=active]:border-solid data-[state=active]:border-black data-[state=active]:text-black`}
               value={`tab${index}`}>
               {list}

diff --git a/src/components/common/toastpopup/ToastPopUp.tsx b/src/components/common/toastpopup/ToastPopUp.tsx
@@ -41,7 +41,7 @@ const ToastPopUp: React.FC<ToastPopUpProps> = ({ noun, verb }) => {
         transform: visible ? 'translate(-50%, 0)' : 'translate(-50%, -50%)',
         width: '335px', // 375 - 40(20 20)(패딩)
         height: '64px',
-        borderRadius: '1rem',
+        borderRadius: '8px',
         border: '1px solid #29DDF6',
         backgroundColor: '#F2FDFF',
         color: '#062139',

diff --git a/src/pages/create/createTrip.page.tsx b/src/pages/create/createTrip.page.tsx
@@ -1,7 +1,7 @@
 import { ButtonPrimary } from '@components/common/button/Button';
 import BackHeader from '@components/common/header/BackHeader';
 import {
-  CalendarIcon,
+  CalendarIcon3,
   CloseIcon,
   CounterIcon,
   PlanIcon,
@@ -134,7 +134,7 @@ export const CreateTrip = () => {
       </InputField>
 
       <InputField
-        icon={CalendarIcon}
+        icon={CalendarIcon3}
         onClick={() => {
           setShowSelectDate(true);
         }}

diff --git a/src/pages/trip/tripEdit.page.tsx b/src/pages/trip/tripEdit.page.tsx
@@ -2,7 +2,7 @@ import { putTrips } from '@api/trips';
 import { BackBox } from '@components/common';
 import { ButtonPrimary } from '@components/common/button/Button';
 import {
-  CalendarIcon,
+  CalendarIcon3,
   CloseIcon,
   CounterIcon,
   PlanIcon,
@@ -158,7 +158,7 @@ const TripEdit = () => {
       </InputField>
 
       <InputField
-        icon={CalendarIcon}
+        icon={CalendarIcon3}
         onClick={() => {
           setShowSelectDate(true);
         }}