Merge pull request #123 from Step3-kakao-tech-campus/feat/#122

fix: 등록/수정하기 age 박스 수정, ui 수정, 몸무게 인풋값 수정
Step3-kakao-tech-campus · Oct 18, 2023 · fcf9dad · fcf9dad
2 parents fcef5d3 + aaa70de
commit fcf9dad
Show file tree

Hide file tree

Showing 10 changed files with 153 additions and 86 deletions.
diff --git a/src/commons/SelectBox.tsx b/src/commons/SelectBox.tsx
@@ -7,27 +7,85 @@ const typeOptions = [
   { label: '기타', value: 'ETC' },
   // 기타 타입 추가
 ];
+interface SelectProps {
+  label: string;
+  value: string;
+}
 
-const SelectBox = () => {
+const yearOptions: SelectProps[] = [];
+for (let idx = 0; idx < 32; idx += 1) {
+  yearOptions.push({ label: `${idx}`, value: `${idx}` });
+}
+
+const monthOptions: SelectProps[] = [];
+for (let idx = 0; idx < 13; idx += 1) {
+  monthOptions.push({ label: `${idx}`, value: `${idx}` });
+}
+
+export interface IdProps {
+  id: number;
+  label: string;
+}
+// 기타 타입 추가
+const SelectBox = ({ id, label }: IdProps) => {
   const [selectedType, setSelectedType] = useRecoilState(registerState);
 
-  const handleTypeChange = (value: string) => {
-    setSelectedType((prevType) => ({
-      ...prevType,
-      type: value,
-    }));
+  const year = selectedType.age.substring(0, selectedType.age.indexOf('년'));
+  console.log('년', year);
+  const month = selectedType.age.substring(
+    selectedType.age.indexOf('년') + 1,
+    selectedType.age.indexOf('개'),
+  );
+  const handleChange = (value: string) => {
+    console.log(selectedType.age);
+    console.log(value);
+
+    console.log('달', month);
+    if (label === '종🔸') {
+      setSelectedType((prevType) => ({
+        ...prevType,
+        type: value,
+      }));
+    } else if (label === 'ㅤ') {
+      setSelectedType((prevType) => ({
+        ...prevType,
+        age: `${year}년${value}개월`,
+      }));
+      console.log(value);
+    } else {
+      setSelectedType((prevType) => ({
+        ...prevType,
+        age: `${value}년${month}개월`,
+      }));
+      console.log(value);
+    }
   };
 
+  let code: SelectProps[];
+  let key: string;
+  switch (id) {
+    case 1:
+      key = year;
+      code = yearOptions;
+      break;
+    case 2:
+      key = month;
+      code = monthOptions;
+      break;
+    default:
+      key = selectedType.type;
+      code = typeOptions;
+  }
   return (
-    <div>
-      <h2 className="font-semibold mb-1">종</h2>
+    <div className="justify-end">
+      <h2 className="font-semibold mb-1">{label}</h2>
       <select
-        className="border-2 rounded-md border-gray-300 h-10"
+        className="border-2 rounded-md w-auto border-gray-300 h-10 mx-auto"
         name="type"
-        value={selectedType.type}
-        onChange={(e) => handleTypeChange(e.target.value)}
+        value={key}
+        onChange={(e) => handleChange(e.target.value)}
       >
-        {typeOptions.map((option) => (
+        {code.map((option) => (
           <option key={option.value} value={option.value}>
             {option.label}
           </option>

diff --git a/src/pages/profileList/VProfileCard.tsx b/src/pages/profileList/VProfileCard.tsx
@@ -14,19 +14,18 @@ const VProfileCard = ({
   shelter,
   state,
 }: VProfileInfoProps) => (
-  <a
-    href="/pet/1"
-    className="flex items-center justify-center gap-5 p-2 sm:p-3"
-  >
-    <img className="relative w-28 cursor-pointer mr-3" src={image} alt="" />
-    <div className=" whitespace-nowrap">
-      <div className="flex flex-col-reverse">
-        {name} ({age}살)
+  <div className="flex items-center justify-center m-5 flex-nowrap">
+    <a href="/pet/1" className="flex items-center justify-center gap-6">
+      <img className="relative w-28 cursor-pointer" src={image} alt="" />
+      <div className=" whitespace-nowrap">
+        <div className="flex flex-col-reverse">
+          {name} ({age}살)
+        </div>
+        <div className="text-sm text-gray-400">{shelter}</div>
+        <div className="font-bold">{state}</div>
       </div>
-      <div className="text-sm text-gray-400">{shelter}</div>
-      <div className="font-bold">{state}</div>
-    </div>
-  </a>
+    </a>
+  </div>
 );
 
 export default VProfileCard;
diff --git a/src/pages/profileList/VProfileListHome.tsx b/src/pages/profileList/VProfileListHome.tsx
@@ -11,7 +11,7 @@ export interface ProfileListProps {
 
 const VProfileListHome = (profileListProps: ProfileListProps) => {
   return (
-    <div className="mx-16 sm:mx-72 sm:my-20">
+    <div className="mx-16 sm:mx-40 lg:mx-64 my-14">
       <h2 className="flex w-full font-bold text-xl sm:text-2xl justify-center items-center whitespace-nowrap">
         긴급 도움이 필요해요!
         <a
@@ -21,7 +21,7 @@ const VProfileListHome = (profileListProps: ProfileListProps) => {
           더보기
         </a>
       </h2>
-      <div className="grid grid-cols-1 gap-1 sm:grid-cols-2 my-10 w-full">
+      <div className="grid grid-cols-1 gap-1 md:grid-cols-2 my-10 w-full whitespace-nowrap">
         <ProfileCard {...profileListProps} />
         <ProfileCard {...profileListProps} />
         <ProfileCard {...profileListProps} />
@@ -36,7 +36,7 @@ const VProfileListHome = (profileListProps: ProfileListProps) => {
           더보기
         </a>
       </h2>
-      <div className="grid grid-cols-1 gap-1 sm:grid-cols-2 my-10 w-full">
+      <div className="grid grid-cols-1 gap-1 md:grid-cols-2 my-10 w-full whitespace-nowrap">
         <ProfileCard {...profileListProps} />
         <ProfileCard {...profileListProps} />
         <ProfileCard {...profileListProps} />

diff --git a/src/pages/profileList/newList/VNewList.tsx b/src/pages/profileList/newList/VNewList.tsx
@@ -22,11 +22,11 @@ export interface Props {
 }
 
 const VNewList = (props: Props) => (
-  <div className="mx-16 sm:mx-72 sm:my-20">
-    <h2 className="flex w-full font-bold text-xl sm:text-2xl whitespace-nowrap">
+  <div className="mx-16 sm:mx-40 lg:mx-64 my-14">
+    <h2 className="flex w-full font-bold text-xl sm:text-2xl items-center whitespace-nowrap">
       신규 애니모리 친구들
     </h2>
-    <div className="grid grid-cols-1 gap-1 sm:grid-cols-2 my-10 w-full">
+    <div className="grid grid-cols-1 gap-1 md:grid-cols-2 my-10 w-full whitespace-nowrap">
       <ProfileCard {...props.profileListProps} />
       <ProfileCard {...props.profileListProps} />
       <ProfileCard {...props.profileListProps} />

diff --git a/src/pages/profileList/urgentList/VUrgentList.tsx b/src/pages/profileList/urgentList/VUrgentList.tsx
@@ -23,11 +23,11 @@ export interface Props {
 
 const VUrgentList = (props: Props) => {
   return (
-    <div className="mx-16 sm:mx-72 sm:my-20">
-      <h2 className="flex w-full font-bold text-xl sm:text-2xl whitespace-nowrap">
+    <div className="mx-16 sm:mx-40 lg:mx-64 my-14">
+      <h2 className="flex w-full font-bold text-xl sm:text-2xl items-center whitespace-nowrap">
         긴급 도움이 필요해요!
       </h2>
-      <div className="grid grid-cols-1 gap-1 sm:grid-cols-2 my-10 w-full">
+      <div className="grid grid-cols-1 gap-1 md:grid-cols-2 my-10 w-full whitespace-nowrap">
         <ProfileCard {...props.profileListProps} />
         <ProfileCard {...props.profileListProps} />
         <ProfileCard {...props.profileListProps} />

diff --git a/src/pages/register/VMRegisterForm.tsx b/src/pages/register/VMRegisterForm.tsx
@@ -14,7 +14,7 @@ const VMRegisterForm = ({ handleChange }: RegisterProps) => {
           <div className="w-full justify-center">
             <InputGroup
               id="name"
-              name="이름"
+              name="이름🔸"
               type="text"
               placeholder="이름을 입력해주세요"
               onChange={(e) => {
@@ -23,18 +23,12 @@ const VMRegisterForm = ({ handleChange }: RegisterProps) => {
               autocomplete="on"
             />
           </div>
-          <div className="flex w-3/4 gap-5 whitespace-nowrap items-center ml-10 justify-center">
-            <InputGroup
-              id="age"
-              name="나이"
-              type="text"
-              placeholder="'00년 00개월'과 같이 작성해주세요."
-              onChange={(e) => {
-                handleChange(e);
-              }}
-              autocomplete="on"
-            />
-            <SelectBox />
+          <div className="flex w-3/4 gap-2 whitespace-nowrap items-center ml-10 justify-center">
+            <SelectBox id={1} label={'나이🔸'} />
+            <div className="flex h-full items-end">년</div>
+            <SelectBox id={2} label={'ㅤ'} />
+            <div className="flex w-12 h-full items-end">개월</div>
+            <SelectBox id={3} label={'종🔸'} />
           </div>
         </div>
       </div>
@@ -47,7 +41,7 @@ const VMRegisterForm = ({ handleChange }: RegisterProps) => {
         <div className="w-full">
           <InputGroup
             id="size"
-            name="크기"
+            name="크기🔸"
             type="text"
             placeholder="주변 사물과 비교해서 작성해주셔도 좋아요!"
             onChange={(e) => {
@@ -58,24 +52,29 @@ const VMRegisterForm = ({ handleChange }: RegisterProps) => {
         </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=" w-full">
-          <InputGroup
+        <div className="flex flex-col gap-1 w-full">
+          <label htmlFor={'weight'} className="text-sm font-semibold">
+            몸무게🔸
+          </label>
+          <input
+            className="border-2 rounded-md border-gray-300 p-2"
             id="weight"
             name="몸무게"
             type="number"
             placeholder="kg 단위로 입력해주세요"
             onChange={(e) => {
               handleChange(e);
             }}
-            autocomplete="off"
+            autoComplete="off"
+            min={1}
           />
         </div>
         <div className=" w-full">
           <InputGroup
             id="vaccinationStatus"
-            name="접종여부"
+            name="접종여부🔸"
             type="text"
-            placeholder="접종차수를 입력해주세요"
+            placeholder="접종명과 차수를 입력해주세요"
             onChange={(e) => {
               handleChange(e);
             }}
@@ -87,7 +86,7 @@ const VMRegisterForm = ({ handleChange }: RegisterProps) => {
         <div className="w-full">
           <InputGroup
             id="description"
-            name="상세설명"
+            name="상세설명🔸"
             type="text"
             placeholder="상세 설명을 입력해주세요"
             onChange={(e) => {

diff --git a/src/pages/register/VRadioGroup.tsx b/src/pages/register/VRadioGroup.tsx
@@ -25,7 +25,7 @@ const VRadioGroup = ({
   return (
     <div className="flex flex-col sm:flex-row sm:gap-20 justify-center">
       <div>
-        <h2 className="font-semibold my-3  whitespace-nowrap">성별</h2>
+        <h2 className="font-semibold my-3  whitespace-nowrap">성별🔸</h2>
         <div className="grid grid-cols-2 gap-8 text-sm  whitespace-nowrap">
           <DetailRadio
             label="남"
@@ -62,7 +62,7 @@ const VRadioGroup = ({
 
       <div>
         <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">
           <DetailRadio
@@ -97,7 +97,7 @@ const VRadioGroup = ({
       </div>
       <div>
         <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">
           <DetailRadio

diff --git a/src/pages/update/UpdateInput.tsx b/src/pages/update/UpdateInput.tsx
@@ -1,7 +1,14 @@
 // eslint-disable-next-line import/no-cycle
 import { InputGroupProps } from './UpdateInputGroup';
 
-const Input = ({ id, name, type, placeholder, onChange }: InputGroupProps) => {
+const Input = ({
+  id,
+  name,
+  type,
+  placeholder,
+  onChange,
+  defaultValue,
+}: InputGroupProps) => {
   return (
     <input
       className="border-2 rounded-md border-gray-300 p-2"
@@ -10,6 +17,7 @@ const Input = ({ id, name, type, placeholder, onChange }: InputGroupProps) => {
       type={type}
       placeholder={placeholder}
       onChange={onChange}
+      defaultValue={defaultValue}
     />
   );
 };

diff --git a/src/pages/update/UpdateInputGroup.tsx b/src/pages/update/UpdateInputGroup.tsx
@@ -9,7 +9,7 @@ export interface InputGroupProps {
   type: string;
   placeholder: string;
   onChange: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  value: any;
+  defaultValue: any;
 }
 
 const InputGroup = ({
@@ -18,7 +18,7 @@ const InputGroup = ({
   type,
   placeholder,
   onChange,
-  value,
+  defaultValue,
 }: InputGroupProps) => {
   return (
     <Container className={'flex flex-col gap-1'}>
@@ -31,7 +31,7 @@ const InputGroup = ({
         type={type}
         placeholder={placeholder}
         onChange={onChange}
-        value={value}
+        defaultValue={defaultValue}
       />
     </Container>
   );