Style: 예약 가능 시간대 디자인 수정

eunji-0623 · Jul 19, 2024 · a8cac20 · a8cac20
1 parent b69ec20
commit a8cac20
Show file tree

Hide file tree

Showing 3 changed files with 48 additions and 34 deletions.
diff --git a/components/MyActivity/Register/DateInput.tsx b/components/MyActivity/Register/DateInput.tsx
@@ -33,7 +33,7 @@ function Date({ index }: TimeSlotGroupProps) {
 
   return (
     <div className="relative">
-      <div className="w-[374px] t:w-[149px] m:w-[130px]">
+      <div className="w-[374px] t:w-[149px] m:w-full">
         <input
           type="text"
           value={date ? date.toDateString() : ''}

diff --git a/components/MyActivity/Register/TimeDropdown.tsx b/components/MyActivity/Register/TimeDropdown.tsx
@@ -46,7 +46,7 @@ function TimeDropdown({
     <div ref={dropdownRef} className="relative">
       <button
         type="button"
-        className="flex justify-between items-center w-[140px] h-[56px] py-[4px] px-[16px] m:px-[7px] rounded-md border border-var-gray6 bg-white text-var-gray7 text-left t:w-[104px] m:w-[79px]"
+        className="flex justify-between items-center w-[140px] h-[56px] py-[4px] px-[16px] m:px-[7px] rounded-md border border-var-gray6 bg-white text-var-gray7 text-left t:w-[104px] m:w-full"
         onClick={handleClickDropdown}
       >
         <p>{selectedTime}</p>
@@ -58,7 +58,7 @@ function TimeDropdown({
         />
       </button>
       {isOpen && (
-        <ul className="absolute z-10 animate-slideDown w-[140px] h-[200px] rounded-[8px] overflow-y-scroll scrollbar-hide">
+        <ul className="absolute z-10 animate-slideDown w-[140px] h-[200px] rounded-[8px] overflow-y-scroll scrollbar-hide m:w-full">
           {times.map((time) => (
             <li
               key={time}

diff --git a/components/MyActivity/Register/TimeSlot.tsx b/components/MyActivity/Register/TimeSlot.tsx
@@ -56,23 +56,51 @@ function TimeSlotGroup({
   }, [startTime[index], endTime[index]]);
 
   return (
-    <div className="flex items-center t:justify-between m:justify-between gap-[20px] t:gap-[4px] m:gap-[4px]">
-      <div className="flex items-center gap-[20px] t:gap-[4px] m:gap-[4px]">
-        <DateInput index={index} />
-        <div className="flex gap-[12px] items-center t:gap-[4px] m:gap-[4px]">
-          <TimeDropdown
-            type="start"
-            handleChange={handleChange}
-            startTime={startTime[index]}
-            selectedTime={selectedStartTime}
-          />
-          <p className="text-[20px] font-[700] t:hidden m:hidden">~</p>
-          <TimeDropdown
-            type="end"
-            handleChange={handleChange}
-            startTime={startTime[index]}
-            selectedTime={selectedEndTime}
-          />
+    <div className="flex items-end t:justify-between m:justify-between gap-[20px] t:gap-[4px] m:gap-[6px]">
+      <div className="flex items-center gap-[20px] t:gap-[4px] m:gap-[6px] grow">
+        <div className="m:w-[50%]">
+          {isDefault && (
+            <label className="text-[20px] m:text-[16px] font-[500] block mb-[10px] text-var-gray8 ">
+              날짜
+            </label>
+          )}
+          <DateInput index={index} />
+        </div>
+        <div className="flex gap-[12px] items-center t:gap-[2px] m:gap-[2px] grow">
+          <div className="m:w-[50%]">
+            {isDefault && (
+              <label className="text-[20px] m:text-[16px] font-[500] block mb-[10px] text-var-gray8">
+                시작 시간
+              </label>
+            )}
+            <TimeDropdown
+              type="start"
+              handleChange={handleChange}
+              startTime={startTime[index]}
+              selectedTime={selectedStartTime}
+            />
+          </div>
+          <div>
+            {isDefault && (
+              <p className="text-[20px] m:text-[16px] font-[500] block mb-[10px] text-transparent t:hidden m:hidden">
+                ~
+              </p>
+            )}
+            <p className="text-[20px] font-[700] t:hidden m:hidden">~</p>
+          </div>
+          <div className="m:w-[50%]">
+            {isDefault && (
+              <label className="text-[20px] m:text-[16px] font-[500] block mb-[10px] text-var-gray8">
+                종료 시간
+              </label>
+            )}
+            <TimeDropdown
+              type="end"
+              handleChange={handleChange}
+              startTime={startTime[index]}
+              selectedTime={selectedEndTime}
+            />
+          </div>
         </div>
       </div>
       <div className="flex items-center">
@@ -114,20 +142,6 @@ function TimeSlot() {
       <label className="text-[24px] font-[700] block mb-[24px] text-var-black">
         예약 가능한 시간대
       </label>
-      <div className="flex gap-[20px] t:gap-[4px] m:gap-[4px]">
-        <label className="w-[374px] t:w-[149px] m:w-[130px] text-[20px] m:text-[16px] font-[500] block mb-[10px] text-var-gray8 ">
-          날짜
-        </label>
-        <div className="flex gap-[12px] items-center t:gap-[4px] m:gap-[4px]">
-          <label className="w-[140px] t:w-[104px] m:w-[79px] text-[20px] m:text-[16px] font-[500] block mb-[10px] text-var-gray8">
-            시작 시간
-          </label>
-          <label className="w-[140px] t:w-[104px] m:w-[79px] text-[20px] m:text-[16px] font-[500] block mb-[10px] text-var-gray8">
-            종료 시간
-          </label>
-        </div>
-        <label className="text-transparent w-[56px] shrink-0">blank</label>
-      </div>
       <TimeSlotGroup isDefault handleClickPlus={handleClickPlus} index={0} />
       <hr className="mt-[20px] mb-[20px]" />
       <div className="space-y-[20px]">