fix: 등록하기 ui 수정

Step3-kakao-tech-campus · Nov 10, 2023 · 7a4b2fa · 7a4b2fa
1 parent 1553d8f
commit 7a4b2fa
Show file tree

Hide file tree

Showing 4 changed files with 54 additions and 51 deletions.
diff --git a/src/pages/register/components/StatusScore.tsx b/src/pages/register/components/StatusScore.tsx
@@ -19,7 +19,7 @@ const StatusScore = ({ status, selectedOption, handleChange }: StatusProps) => {
         <span className="flex text-base sm:text-sm lg:text-lg font-semibold">
           Low
         </span>
-        <div className="flex flex-row items-center">
+        <div className="flex flex-row w-72 sm:w-auto items-center">
           <input
             type="radio"
             value="1"

diff --git a/src/pages/register/components/VDayModalInput.tsx b/src/pages/register/components/VDayModalInput.tsx
@@ -8,27 +8,32 @@ const VDayModalInput = ({ open, handleClick }: DayModalProps) => {
   const { protectionExpirationDate } = protectionDate;
 
   return (
-    <div className="flex justify-center items-center gap-2 relative">
-      <label htmlFor="day-modal" className="text-sm font-semibold">
-        안락사 일자
-      </label>
-      <input
-        id="day-modal"
-        className="border-2 rounded-md border-gray-300 p-2 text-center"
-        name="안락사 일자"
-        type="text"
-        placeholder="날짜를 선택해주세요."
-        onClick={handleClick}
-        value={protectionExpirationDate}
-        autoComplete="off"
-        readOnly
-      />
-      <dialog
-        open={open}
-        className="absolute top-10 mt-2 border-2 border-gray-300 rounded-md"
-      >
-        <Calendar handleClick={handleClick} />
-      </dialog>
+    <div className="flex flex-col items-center gap-2 relative">
+      <div className="flex flex-col w-80 gap-2">
+        <label
+          htmlFor="day-modal"
+          className="flex justify-start items-start text-start text-sm font-semibold"
+        >
+          안락사 일자
+        </label>
+        <input
+          id="day-modal"
+          className="border-2 rounded-md border-gray-300 p-2 text-center"
+          name="안락사 일자"
+          type="text"
+          placeholder="날짜를 선택해주세요."
+          onClick={handleClick}
+          value={protectionExpirationDate}
+          autoComplete="off"
+          readOnly
+        />
+        <dialog
+          open={open}
+          className="absolute top-10 mt-2 border-2 border-gray-300 rounded-md"
+        >
+          <Calendar handleClick={handleClick} />
+        </dialog>
+      </div>
     </div>
   );
 };

diff --git a/src/pages/register/components/VMRegisterForm.tsx b/src/pages/register/components/VMRegisterForm.tsx
@@ -5,10 +5,10 @@ import { RegisterProps } from '../registerType';
 
 const VMRegisterForm = ({ handleChange }: RegisterProps) => {
   return (
-    <div className="sm:mx-auto flex flex-col items-center gap-8 mt-10">
-      <div className="flex justify-center items-center w-3/4 text-sm  mb-5 sm:gap-20 sm:w-1/2  ">
-        <div className=" flex-col  justify-center sm:flex-row flex gap-5 w-full ">
-          <div className="w-full justify-center">
+    <div className="sm:mx-auto flex flex-col justify-center items-center gap-8 mt-10">
+      <div className="flex justify-center items-center w-fit text-sm  mb-5 sm:gap-20  ">
+        <div className=" flex-col  justify-center md:flex-row flex gap-5 w-full ">
+          <div className=" flex md:w-96 justify-center">
             <InputGroup
               id="name"
               name="이름🔸"
@@ -20,7 +20,7 @@ const VMRegisterForm = ({ handleChange }: RegisterProps) => {
               autocomplete="on"
             />
           </div>
-          <div className="flex w-3/4 gap-2 whitespace-nowrap items-center ml-10 justify-center">
+          <div className="flex gap-2 whitespace-nowrap items-center justify-start md:justify-center">
             <SelectBox id={1} label={'나이🔸'} />
             <div className="flex h-full items-end">년</div>
             <SelectBox id={2} label={'ㅤ'} />
@@ -29,13 +29,13 @@ const VMRegisterForm = ({ handleChange }: RegisterProps) => {
           </div>
         </div>
       </div>
-      <div className="flex justify-center items-center sm:gap-20 w-3/4 sm:w-1/2 text-sm mb-5">
-        <div className="w-full">
+      <div className="flex justify-center items-center md:gap-20 w-fittext-sm mb-5">
+        <div className="w-full center ">
           <RadioGroup />
         </div>
       </div>
-      <div className="flex justify-center gap-5 sm:gap-20 w-3/4 sm:w-1/2 text-sm  mb-5">
-        <div className="w-full">
+      <div className="flex flex-col md:flex-row justify-center gap-5 md:gap-10 w-fit text-sm  mb-5">
+        <div className="flex w-full md:w-80 justify-center">
           <InputGroup
             id="size"
             name="크기🔸"
@@ -47,9 +47,21 @@ const VMRegisterForm = ({ handleChange }: RegisterProps) => {
             autocomplete="on"
           />
         </div>
+        <div className="flex md:w-80 justify-center">
+          <InputGroup
+            id="vaccinationStatus"
+            name="접종여부🔸"
+            type="text"
+            placeholder="접종명과 차수를 입력해주세요"
+            onChange={(e) => {
+              handleChange(e);
+            }}
+            autocomplete="off"
+          />
+        </div>
       </div>
-      <div className="flex flex-col sm:flex-row justify-center gap-5 sm:gap-10 w-3/4 sm:w-1/2 text-sm  mb-5">
-        <div className="flex flex-col gap-1 w-full">
+      <div className="flex flex-col md:flex-row justify-center gap-5 md:gap-10 w-fit text-sm  mb-10">
+        <div className="flex flex-col justify-center gap-1 md:w-64">
           <label htmlFor={'weight'} className="text-sm font-semibold">
             몸무게🔸
           </label>
@@ -66,21 +78,7 @@ const VMRegisterForm = ({ handleChange }: RegisterProps) => {
             min={1}
           />
         </div>
-        <div className=" w-full">
-          <InputGroup
-            id="vaccinationStatus"
-            name="접종여부🔸"
-            type="text"
-            placeholder="접종명과 차수를 입력해주세요"
-            onChange={(e) => {
-              handleChange(e);
-            }}
-            autocomplete="off"
-          />
-        </div>
-      </div>
-      <div className="flex justify-center gap-5 sm:gap-20 w-3/4 sm:w-1/2 text-sm  mb-5">
-        <div className="w-full">
+        <div className="md:w-96 justify-center flex">
           <InputGroup
             id="description"
             name="상세설명🔸"

diff --git a/src/pages/register/components/VRadioGroup.tsx b/src/pages/register/components/VRadioGroup.tsx
@@ -17,7 +17,7 @@ const VRadioGroup = ({
   const [petInfo, setPetInfo] = useRecoilState(registerState);
 
   return (
-    <div className="flex flex-col sm:flex-row sm:gap-20 justify-center">
+    <div className="flex flex-col md:flex-row md:gap-20 justify-center">
       <div>
         <h2 className="font-semibold my-3  whitespace-nowrap">성별🔸</h2>
         <div className="grid grid-cols-2 gap-8 text-sm  whitespace-nowrap">
@@ -56,7 +56,7 @@ const VRadioGroup = ({
         <h2 className="font-semibold text-sm my-3 whitespace-nowrap">
           입양 상태🔸
         </h2>
-        <div className="grid grid-cols-2 w-full  gap-10 text-sm whitespace-nowrap">
+        <div className="grid grid-cols-2 w-full gap-10 text-sm whitespace-nowrap">
           <DetailRadio
             label="입양"
             name="adoptionStatus"
@@ -91,7 +91,7 @@ const VRadioGroup = ({
         <h2 className="font-semibold text-sm my-3 whitespace-nowrap">
           중성화 상태🔸
         </h2>
-        <div className="grid grid-cols-3 w-full gap-16 text-sm whitespace-nowrap">
+        <div className="grid grid-cols-3 w-full gap-14 justify-between text-sm whitespace-nowrap">
           <DetailRadio
             label="했어요"
             name="neutralizationStatus"