Skip to content

Commit

Permalink
Merge pull request #101 from next-petree/boilerPlate
Browse files Browse the repository at this point in the history
Boiler plate
  • Loading branch information
ChanghyeonO authored Jan 21, 2024
2 parents 9f0e850 + 3debaea commit 373f21b
Showing 3 changed files with 193 additions and 203 deletions.
237 changes: 112 additions & 125 deletions src/component/ManageOwnDogs/ContentBox/ContentBox.tsx
Original file line number Diff line number Diff line change
@@ -9,142 +9,129 @@ import * as S from "./styles";
import { Link, useParams } from "react-router-dom";

export interface IContent {
birthDate: string;
breederNickName: string;
gender: string;
id: number;
imgUrl: string;
isBreederVerified: boolean;
name: string;
status: string;
type: string;
birthDate: string;
breederNickName: string;
gender: string;
id: number;
imgUrl: string;
isBreederVerified: boolean;
name: string;
status: string;
type: string;
}

export interface IData {
data: {
content: IContent[];
totalPages: number;
};
status: string;
data: {
content: IContent[];
totalPages: number;
};
status: string;
}

const ContentBox = () => {
// ์ฒซ ํŽ˜์ด์ง€๋กœ ์˜ค์‹ค๋ ค๋ฉด "mypage/owndogs/1" ์ด๋Ÿฐ ์‹์œผ๋กœ url์„ ์—ฐ๊ฒฐ ํ•˜์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค.
// ๋˜๋„๋ก์ด๋ฉด ์ฒซ ํŽ˜์ด์ง€๊ฐ€ "mypage/owndogs/0" ์ด ์•„๋‹Œ "mypage/owndogs/1" ์ด ๋˜๋„๋ก ํ•˜์…”์•ผ ์ œ๊ฐ€ ๋งŒ๋“  Pagenation ์ปดํฌ๋„ŒํŠธ๋ฅผ ์“ฐ์‹œ๊ธฐ ํŽธํ•˜์‹ค ๊ฒ๋‹ˆ๋‹ค.
const param = useParams();
const [page, setPage] = useState(Number(param.pageId));
const [dogs, setDogs] = useState<IContent[]>();
const [category, setCategory] = useState("");
const [result, setResult] = useState<IContent[]>();
const [inputText, setInputText] = useState("");
// ์ฒซ ํŽ˜์ด์ง€๋กœ ์˜ค์‹ค๋ ค๋ฉด "mypage/owndogs/1" ์ด๋Ÿฐ ์‹์œผ๋กœ url์„ ์—ฐ๊ฒฐ ํ•˜์…”์•ผ ํ•ฉ๋‹ˆ๋‹ค.
// ๋˜๋„๋ก์ด๋ฉด ์ฒซ ํŽ˜์ด์ง€๊ฐ€ "mypage/owndogs/0" ์ด ์•„๋‹Œ "mypage/owndogs/1" ์ด ๋˜๋„๋ก ํ•˜์…”์•ผ ์ œ๊ฐ€ ๋งŒ๋“  Pagenation ์ปดํฌ๋„ŒํŠธ๋ฅผ ์“ฐ์‹œ๊ธฐ ํŽธํ•˜์‹ค ๊ฒ๋‹ˆ๋‹ค.
const param = useParams();
const [page, setPage] = useState(Number(param.pageId));
const [dogs, setDogs] = useState<IContent[]>();
const [category, setCategory] = useState("");
const [result, setResult] = useState<IContent[]>();
const [inputText, setInputText] = useState("");

useEffect(() => {
const fetchData = async () => {
const res = await get<IData>(
`${process.env.REACT_APP_API_URL}breeder/dogs`
);
console.log(res.data.data);
useEffect(() => {
const fetchData = async () => {
const res = await get<IData>(
`${process.env.REACT_APP_API_URL}breeder/dogs`,
);

return res.data.data;
};
return res.data.data;
};

fetchData()
.then((res) => {
setPage(res.totalPages);
setDogs(res.content);
})
.catch((err) => console.log(err));
}, []);
fetchData()
.then(res => {
setPage(res.totalPages);
setDogs(res.content);
})
.catch(err => console.log(err));
}, []);

const searchItems = (searchValue: string) => {
setInputText(searchValue);
if (searchValue !== "") {
const filteredData = dogs?.filter((item) => {
return Object.values(item).join("").includes(searchValue);
});
setResult(filteredData);
} else {
setResult(dogs);
}
};
const searchItems = (searchValue: string) => {
setInputText(searchValue);
if (searchValue !== "") {
const filteredData = dogs?.filter(item => {
return Object.values(item).join("").includes(searchValue);
});
setResult(filteredData);
} else {
setResult(dogs);
}
};

return (
<S.Wrapper>
<S.Title>๋ณด์œ ๊ฒฌ์ข… ๊ด€๋ฆฌ</S.Title>
<S.SearchContainer>
<FilterBox
content={["์ „์ฒด", "๊ฐ•์•„์ง€ ์ด๋ฆ„", "๊ฒฌ์ข…"]}
category={category}
onClick={setCategory}
/>
<S.SearchBoxContainer>
<S.Input
placeholder="๊ฒ€์ƒ‰์–ด๋ฅผ ์ž…๋ ฅํ•ด ์ฃผ์„ธ์š”"
value={inputText}
onChange={(e) => searchItems(e.target.value)}
/>
<Button weight={400} size={16} width={120} height={52.5}>
๊ฒ€์ƒ‰
</Button>
</S.SearchBoxContainer>
</S.SearchContainer>
<S.ListContainer>
{inputText.length > 0
? result?.map((d) => (
<S.DogItem key={d.id}>
<Link to={`/mypage/owndogs/edit/${d.id}`}>
<S.DogImg src={d.imgUrl} />
</Link>
<S.DogInfoContainer>
<S.DogName>{d.name}</S.DogName>
<S.DogInfo>
<S.DogInfoItem>
๊ฒฌ์ข…: {d.type}
</S.DogInfoItem>
<S.DogInfoItem>
์„ฑ๋ณ„: {d.name}
</S.DogInfoItem>
<S.DogInfoItem>
์ถœ์ƒ์ผ: {d.birthDate}
</S.DogInfoItem>
</S.DogInfo>
</S.DogInfoContainer>
</S.DogItem>
))
: dogs?.map((d) => (
<S.DogItem key={d.id}>
<Link to={`/mypage/owndogs/edit/${d.id}`}>
<S.DogImg src={d.imgUrl} />
</Link>
<S.DogInfoContainer>
<S.DogName>{d.name}</S.DogName>
<S.DogInfo>
<S.DogInfoItem>
๊ฒฌ์ข…: {d.type}
</S.DogInfoItem>
<S.DogInfoItem>
์„ฑ๋ณ„: {d.name}
</S.DogInfoItem>
<S.DogInfoItem>
์ถœ์ƒ์ผ: {d.birthDate}
</S.DogInfoItem>
</S.DogInfo>
</S.DogInfoContainer>
</S.DogItem>
))}
</S.ListContainer>
<S.PaginationContainer>
{/* ํ˜„์žฌ api์— ๋ฐ์ดํ„ฐ๊ฐ€ ์—†๋Š” ๊ฒƒ ๊ฐ™์•„์„œ totalPage๋Š” ์ผ๋‹จ 10์œผ๋กœ ์„ธํŒ… ํ•ด๋‘์—ˆ์Šต๋‹ˆ๋‹ค */}
{/* ์ƒ๋‹จ์— param.pageId ์— ๋”ฐ๋ผ์„œ ๋ฐ์ดํ„ฐ๊ฐ€ ์ž˜ ํ‘œ์‹œ ๋˜๋„๋ก ํ•˜์…”์•ผ ๋  ๊ฒ๋‹ˆ๋‹ค. */}
<Pagenation
page={page}
totalPage={10}
setPage={setPage}
name={"mypage/owndogs"}
/>
</S.PaginationContainer>
</S.Wrapper>
);
return (
<S.Wrapper>
<S.Title>๋ณด์œ ๊ฒฌ์ข… ๊ด€๋ฆฌ</S.Title>
<S.SearchContainer>
<FilterBox
content={["์ „์ฒด", "๊ฐ•์•„์ง€ ์ด๋ฆ„", "๊ฒฌ์ข…"]}
category={category}
onClick={setCategory}
/>
<S.SearchBoxContainer>
<S.Input
placeholder="๊ฒ€์ƒ‰์–ด๋ฅผ ์ž…๋ ฅํ•ด ์ฃผ์„ธ์š”"
value={inputText}
onChange={e => searchItems(e.target.value)}
/>
<Button weight={400} size={16} width={120} height={52.5}>
๊ฒ€์ƒ‰
</Button>
</S.SearchBoxContainer>
</S.SearchContainer>
<S.ListContainer>
{inputText.length > 0
? result?.map(d => (
<S.DogItem key={d.id}>
<Link to={`/mypage/owndogs/edit/${d.id}`}>
<S.DogImg src={d.imgUrl} />
</Link>
<S.DogInfoContainer>
<S.DogName>{d.name}</S.DogName>
<S.DogInfo>
<S.DogInfoItem>๊ฒฌ์ข…: {d.type}</S.DogInfoItem>
<S.DogInfoItem>์„ฑ๋ณ„: {d.name}</S.DogInfoItem>
<S.DogInfoItem>์ถœ์ƒ์ผ: {d.birthDate}</S.DogInfoItem>
</S.DogInfo>
</S.DogInfoContainer>
</S.DogItem>
))
: dogs?.map(d => (
<S.DogItem key={d.id}>
<Link to={`/mypage/owndogs/edit/${d.id}`}>
<S.DogImg src={d.imgUrl} />
</Link>
<S.DogInfoContainer>
<S.DogName>{d.name}</S.DogName>
<S.DogInfo>
<S.DogInfoItem>๊ฒฌ์ข…: {d.type}</S.DogInfoItem>
<S.DogInfoItem>์„ฑ๋ณ„: {d.name}</S.DogInfoItem>
<S.DogInfoItem>์ถœ์ƒ์ผ: {d.birthDate}</S.DogInfoItem>
</S.DogInfo>
</S.DogInfoContainer>
</S.DogItem>
))}
</S.ListContainer>
<S.PaginationContainer>
{/* ํ˜„์žฌ api์— ๋ฐ์ดํ„ฐ๊ฐ€ ์—†๋Š” ๊ฒƒ ๊ฐ™์•„์„œ totalPage๋Š” ์ผ๋‹จ 10์œผ๋กœ ์„ธํŒ… ํ•ด๋‘์—ˆ์Šต๋‹ˆ๋‹ค */}
{/* ์ƒ๋‹จ์— param.pageId ์— ๋”ฐ๋ผ์„œ ๋ฐ์ดํ„ฐ๊ฐ€ ์ž˜ ํ‘œ์‹œ ๋˜๋„๋ก ํ•˜์…”์•ผ ๋  ๊ฒ๋‹ˆ๋‹ค. */}
<Pagenation
page={page}
totalPage={10}
setPage={setPage}
name={"mypage/owndogs"}
/>
</S.PaginationContainer>
</S.Wrapper>
);
};

export default ContentBox;
Original file line number Diff line number Diff line change
@@ -48,7 +48,6 @@ const RowModal = ({ matchingId }: { matchingId: number }) => {
try {
const response = await get<ApiResponse>(`/me/matchings/${matchingId}`);
setModalData(response.data.data.body.data);
console.log(response.data.data.body.data);
showModal();
} catch (error) {
console.error("๋งค์นญ ์ƒ์„ธ ์กฐํšŒ ์ค‘ ์˜ค๋ฅ˜ ๋ฐœ์ƒ:", error);
Loading

0 comments on commit 373f21b

Please sign in to comment.