Skip to content

Commit

Permalink
Merge pull request #107 from Step3-kakao-tech-campus/feat/#33
Browse files Browse the repository at this point in the history 
fix: 등록하기 isComplete 업데이트 오류 수정
  • Loading branch information
@hjiwon
hjiwon authored Oct 14, 2023
2 parents dd706a2 + fe4ee2e commit 686ee83
Show file tree
Hide file tree
Showing 10 changed files with 70 additions and 48 deletions.
5 changes: 0 additions & 5 deletions src/commons/Pagenation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,5 @@ import VPagenation, { Props } from './VPagenation';
const Pagenation = (data: Props) => {
return <VPagenation {...data} />;
};
// const navigate = useNavigate();

// export function navigatePet(id: number) {
// return navigate('pet/$id');
// }

export default Pagenation;
2 changes: 1 addition & 1 deletion src/commons/VPagenation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -101,7 +101,7 @@ export default function Pagination({
const pageNums = getPaginationItems(currentPage, lastPage, maxLength);

return (
<nav className="pagination whitespace-nowrap" aria-label="Pagination">
<nav className="pagination whitespace-nowrap" aria-label="Pagination">
<PageButton
disabled={currentPage === 1}
onClick={() => setCurrentPage(currentPage - 1)}
Expand Down
6 changes: 3 additions & 3 deletions src/pages/profileList/PageButton.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,22 +11,22 @@ export default function PageButton({
}: Props) {
if (disabled) {
return (
<span className="inline-flex h-8 w-8 m-0.5 items-center justify-center rounded border border-gray-200 bg-white text-gray-500 rtl:rotate-180">
<span className="inline-flex cursor-pointer h-8 w-8 m-0.5 items-center justify-center rounded border border-gray-200 bg-white text-gray-500 rtl:rotate-180">
{children}
</span>
);
}
if (active) {
return (
<span className="inline-flex h-8 w-8 m-0.5 items-center justify-center rounded border border-gray-200 bg-orange-400 text-white rtl:rotate-180">
<span className="inline-flex cursor-pointer h-8 w-8 m-0.5 items-center justify-center rounded border border-gray-200 bg-orange-400 text-white rtl:rotate-180">
{children}
</span>
);
}

return (
<a
className="inline-flex h-8 w-fit p-2 m-0.5 items-center justify-center rounded border border-gray-200 bg-white text-gray-500 rtl:rotate-180"
className="inline-flex cursor-pointer h-8 w-8 p-2 m-0.5 items-center justify-center rounded border border-gray-200 bg-white text-gray-500 rtl:rotate-180"
aria-current={active ? 'page' : undefined}
{...otherProps}
>
Expand Down
5 changes: 4 additions & 1 deletion src/pages/profileList/VProfileCard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,10 @@ const VProfileCard = ({
shelter,
state,
}: VProfileInfoProps) => (
<a href="/pet/1" className="flex items-center gap-2 p-2 sm:p-3">
<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">
Expand Down
14 changes: 7 additions & 7 deletions src/pages/profileList/VProfileListHome.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,32 +11,32 @@ export interface ProfileListProps {

const VProfileListHome = (profileListProps: ProfileListProps) => {
return (
<div className="m-20">
<h2 className="font-bold text-xl sm:text-2xl m-10 mr-20 whitespace-nowrap">
<div className="mx-16 sm:mx-72 sm:my-20">
<h2 className="flex w-full font-bold text-xl sm:text-2xl justify-center items-center whitespace-nowrap">
긴급 도움이 필요해요!
<a
href="profile/urgent/1"
className="font-normal text-sm flex sm:float-right mt-3 sm:mt-0 text-gray-600"
className="font-normal w-full text-right justify-end text-sm flex sm:float-right text-gray-600"
>
더보기
</a>
</h2>
<div className="grid grid-cols-1 gap-1 sm:grid-cols-2 m-10">
<div className="grid grid-cols-1 gap-1 sm:grid-cols-2 my-10 w-full">
<ProfileCard {...profileListProps} />
<ProfileCard {...profileListProps} />
<ProfileCard {...profileListProps} />
<ProfileCard {...profileListProps} />
</div>
<h2 className="font-bold text-xl sm:text-2xl m-10 mr-20 whitespace-nowrap">
<h2 className="flex w-full font-bold text-xl sm:text-2xl justify-center items-center whitespace-nowrap">
신규 애니모리 친구들
<a
href="/profile/new/1"
className="font-normal text-sm flex sm:float-right mt-3 sm:mt-0 text-gray-600"
className="font-normal w-full text-right justify-end text-sm flex sm:float-right text-gray-600"
>
더보기
</a>
</h2>
<div className="grid grid-cols-1 gap-4 sm:grid-cols-2 m-10">
<div className="grid grid-cols-1 gap-1 sm:grid-cols-2 my-10 w-full">
<ProfileCard {...profileListProps} />
<ProfileCard {...profileListProps} />
<ProfileCard {...profileListProps} />
Expand Down
8 changes: 4 additions & 4 deletions src/pages/profileList/newList/VNewList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ export interface Props {
}

const VNewList = (props: Props) => (
<div className="m-20">
<h2 className="font-bold text-xl sm:text-2xl m-10 mr-20 whitespace-nowrap">
<div className="mx-16 sm:mx-72 sm:my-20">
<h2 className="flex w-full font-bold text-xl sm:text-2xl whitespace-nowrap">
신규 애니모리 친구들
</h2>
<div className="grid grid-cols-1 gap-1 sm:grid-cols-2 m-10">
<div className="grid grid-cols-1 gap-1 sm:grid-cols-2 my-10 w-full">
<ProfileCard {...props.profileListProps} />
<ProfileCard {...props.profileListProps} />
<ProfileCard {...props.profileListProps} />
Expand All @@ -36,7 +36,7 @@ const VNewList = (props: Props) => (
<ProfileCard {...props.profileListProps} />
<ProfileCard {...props.profileListProps} />
</div>
<div className="flex justify-center">
<div className="flex justify-center mb-11 sm:mb-28">
<Pagination
currentPage={props.pageNationProps.currentPage}
lastPage={props.pageNationProps.lastPage}
Expand Down
8 changes: 4 additions & 4 deletions src/pages/profileList/urgentList/VUrgentList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,11 +23,11 @@ export interface Props {

const VUrgentList = (props: Props) => {
return (
<div className="m-20">
<h2 className="font-bold text-xl sm:text-2xl m-10 mr-20 whitespace-nowrap">
<div className="mx-16 sm:mx-72 sm:my-20">
<h2 className="flex w-full font-bold text-xl sm:text-2xl whitespace-nowrap">
긴급 도움이 필요해요!
</h2>
<div className="grid grid-cols-1 gap-1 sm:grid-cols-2 m-10">
<div className="grid grid-cols-1 gap-1 sm:grid-cols-2 my-10 w-full">
<ProfileCard {...props.profileListProps} />
<ProfileCard {...props.profileListProps} />
<ProfileCard {...props.profileListProps} />
Expand All @@ -37,7 +37,7 @@ const VUrgentList = (props: Props) => {
<ProfileCard {...props.profileListProps} />
<ProfileCard {...props.profileListProps} />
</div>
<div className="flex justify-center">
<div className="flex justify-center mb-11 sm:mb-28">
<Pagination
currentPage={props.pageNationProps.currentPage}
lastPage={props.pageNationProps.lastPage}
Expand Down
40 changes: 32 additions & 8 deletions src/pages/register/MRegisterForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -57,21 +57,45 @@ const MRegisterForm = () => {
// useState의 set함수로 petInfo를 업데이트해도, handleChange가 실행될 때의 petInfo는 업데이트 전의 petInfo를 가리킵니다.
// 따라서 tempPetInfo를 만들어서 최신의 petInfo를 사용하도록 했습니다.
const tempPetInfo = { ...petInfo, [fieldName]: newValue };
const allFieldsFilled = Object.values(tempPetInfo).every((value, index) => {
// isComplete는 petInfo의 모든 필드가 채워져 있을 때 true
if (index === Object.values(petInfo).length - 1) {
return true;
}
return !!value;
const list = [
tempPetInfo.age,
tempPetInfo.name,
tempPetInfo.adoptionStatus,
tempPetInfo.type,
tempPetInfo.weight,
tempPetInfo.description,
tempPetInfo.sex,
tempPetInfo.size,
tempPetInfo.vaccinationStatus,
tempPetInfo.neutralizationStatus,
];
console.log(list);
const lili = list.filter((item) => {
return item !== '';
});
if (allFieldsFilled) {
if (lili.length === 10) {
setPetInfo((prev) => ({ ...prev, isComplete: true }));
}

// 안쓰는 이유 값이 없어서 안만들어지고 업데이트가 잘안됨.
// const allFieldsFilled = Object.values(tempPetInfo).every((value, index) => {
// console.log(value);
// // isComplete는 petInfo의 모든 필드가 채워져 있을 때 true
// if (index === Object.values(tempPetInfo).length - 2) {
// console.log(index, Object.values(tempPetInfo).length - 2);
// return true;
// }
// console.log(index);
// return !!value;
// });
// if (allFieldsFilled) {
// setPetInfo((prev) => ({ ...prev, isComplete: true }));
// }
// };
};

const MRegisterProps = {
handleChange,
handleSubmit,
};

return <VMRegisterForm {...MRegisterProps} />;
Expand Down
5 changes: 3 additions & 2 deletions src/pages/register/RadioGroup.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,7 @@ const RadioGroup = () => {

const handleSexChange = (value: string) => {
setRegisterData((prev) => ({ ...prev, sex: value }));
console.log(registerData);
};
const handleAdoptionStatusChange = (value: string) => {
setRegisterData((prev) => ({ ...prev, adoptionStatus: value }));
Expand Down Expand Up @@ -60,7 +61,7 @@ const RadioGroup = () => {
<h2 className="font-semibold text-sm my-3 whitespace-nowrap">
입양 상태
</h2>
<div className="grid grid-cols-2 gap-5 text-sm whitespace-nowrap">
<div className="grid grid-cols-2 w-full gap-10 text-sm whitespace-nowrap">
<DetailRadio
label="입양"
name="adoptionStatus"
Expand Down Expand Up @@ -95,7 +96,7 @@ const RadioGroup = () => {
<h2 className="font-semibold text-sm my-3 whitespace-nowrap">
중성화 상태
</h2>
<div className="grid grid-cols-3 gap-8 text-sm whitespace-nowrap">
<div className="grid grid-cols-3 w-full gap-16 text-sm whitespace-nowrap">
<DetailRadio
label="했어요"
name="neutralizationStatus"
Expand Down
25 changes: 12 additions & 13 deletions src/pages/register/VMRegisterForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,13 +5,12 @@ import SelectBox from 'commons/SelectBox';
type RegisterProps = {
handleChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
};

const MRegisterForm = ({ handleChange }: RegisterProps) => {
const VMRegisterForm = ({ handleChange }: RegisterProps) => {
return (
<div className="flex flex-col items-center gap-8 mt-10">
<div className="flex justify-center sm:gap-20 w-1/2 text-sm mb-5">
<div className=" flex-col sm:flex-row flex gap-5 w-full ">
<div className="">
<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">
<InputGroup
id="name"
name="이름"
Expand All @@ -23,7 +22,7 @@ const MRegisterForm = ({ handleChange }: RegisterProps) => {
autocomplete="on"
/>
</div>
<div className="flex w-2/4 whitespace-nowrap">
<div className="flex w-3/4 gap-5 whitespace-nowrap items-center ml-10 justify-center">
<InputGroup
id="age"
name="나이"
Expand All @@ -34,16 +33,16 @@ const MRegisterForm = ({ handleChange }: RegisterProps) => {
}}
autocomplete="on"
/>
<SelectBox />
</div>
<SelectBox />
</div>
</div>
<div className="flex justify-center gap-5 sm:gap-20 w-1/2 text-sm mb-5">
<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">
<RadioGroup />
</div>
</div>
<div className="flex justify-center gap-5 sm:gap-20 w-1/2 text-sm mb-5">
<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">
<InputGroup
id="size"
Expand All @@ -57,7 +56,7 @@ const MRegisterForm = ({ handleChange }: RegisterProps) => {
/>
</div>
</div>
<div className="flex flex-col sm:flex-row justify-center gap-5 sm:gap-10 w-1/2 text-sm mb-5">
<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
id="weight"
Expand All @@ -83,7 +82,7 @@ const MRegisterForm = ({ handleChange }: RegisterProps) => {
/>
</div>
</div>
<div className="flex justify-center gap-5 sm:gap-20 w-1/2 text-sm mb-5">
<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">
<InputGroup
id="description"
Expand All @@ -101,4 +100,4 @@ const MRegisterForm = ({ handleChange }: RegisterProps) => {
);
};

export default MRegisterForm;
export default VMRegisterForm;

0 comments on commit 686ee83

Please sign in to comment.