From 266fa6e441577de8caa9e352088e15b1dd372a94 Mon Sep 17 00:00:00 2001 From: ChanghyeonO Date: Sun, 21 Jan 2024 13:31:34 +0900 Subject: [PATCH] =?UTF-8?q?fix:=20=EC=9C=A0=EC=8B=A4=20=ED=8C=8C=EC=9D=BC?= =?UTF-8?q?=20=EA=B8=B4=EA=B8=89=EB=B3=B5=EA=B5=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ManageOwnDogs/ContentBox/ContentBox.tsx | 237 +++++++++--------- .../Modal/Breeder/BreederRowModal.tsx | 1 - src/component/MyPage/Navbar/Navbar.tsx | 158 ++++++------ 3 files changed, 193 insertions(+), 203 deletions(-) diff --git a/src/component/ManageOwnDogs/ContentBox/ContentBox.tsx b/src/component/ManageOwnDogs/ContentBox/ContentBox.tsx index 0845e4a..17ac859 100644 --- a/src/component/ManageOwnDogs/ContentBox/ContentBox.tsx +++ b/src/component/ManageOwnDogs/ContentBox/ContentBox.tsx @@ -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(); - const [category, setCategory] = useState(""); - const [result, setResult] = useState(); - 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(); + const [category, setCategory] = useState(""); + const [result, setResult] = useState(); + const [inputText, setInputText] = useState(""); - useEffect(() => { - const fetchData = async () => { - const res = await get( - `${process.env.REACT_APP_API_URL}breeder/dogs` - ); - console.log(res.data.data); + useEffect(() => { + const fetchData = async () => { + const res = await get( + `${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 ( - - 보유견종 관리 - - - - searchItems(e.target.value)} - /> - - - - - {inputText.length > 0 - ? result?.map((d) => ( - - - - - - {d.name} - - - 견종: {d.type} - - - 성별: {d.name} - - - 출생일: {d.birthDate} - - - - - )) - : dogs?.map((d) => ( - - - - - - {d.name} - - - 견종: {d.type} - - - 성별: {d.name} - - - 출생일: {d.birthDate} - - - - - ))} - - - {/* 현재 api에 데이터가 없는 것 같아서 totalPage는 일단 10으로 세팅 해두었습니다 */} - {/* 상단에 param.pageId 에 따라서 데이터가 잘 표시 되도록 하셔야 될 겁니다. */} - - - - ); + return ( + + 보유견종 관리 + + + + searchItems(e.target.value)} + /> + + + + + {inputText.length > 0 + ? result?.map(d => ( + + + + + + {d.name} + + 견종: {d.type} + 성별: {d.name} + 출생일: {d.birthDate} + + + + )) + : dogs?.map(d => ( + + + + + + {d.name} + + 견종: {d.type} + 성별: {d.name} + 출생일: {d.birthDate} + + + + ))} + + + {/* 현재 api에 데이터가 없는 것 같아서 totalPage는 일단 10으로 세팅 해두었습니다 */} + {/* 상단에 param.pageId 에 따라서 데이터가 잘 표시 되도록 하셔야 될 겁니다. */} + + + + ); }; export default ContentBox; diff --git a/src/component/MyPage/AdoptList/Component/Modal/Breeder/BreederRowModal.tsx b/src/component/MyPage/AdoptList/Component/Modal/Breeder/BreederRowModal.tsx index 71edbd0..5301c9e 100644 --- a/src/component/MyPage/AdoptList/Component/Modal/Breeder/BreederRowModal.tsx +++ b/src/component/MyPage/AdoptList/Component/Modal/Breeder/BreederRowModal.tsx @@ -48,7 +48,6 @@ const RowModal = ({ matchingId }: { matchingId: number }) => { try { const response = await get(`/me/matchings/${matchingId}`); setModalData(response.data.data.body.data); - console.log(response.data.data.body.data); showModal(); } catch (error) { console.error("매칭 상세 조회 중 오류 발생:", error); diff --git a/src/component/MyPage/Navbar/Navbar.tsx b/src/component/MyPage/Navbar/Navbar.tsx index cbe14ab..2cc924e 100644 --- a/src/component/MyPage/Navbar/Navbar.tsx +++ b/src/component/MyPage/Navbar/Navbar.tsx @@ -4,93 +4,97 @@ import Swal from "sweetalert2"; import alertList from "../../../utils/Swal1"; import { removeToken } from "../../../api/token"; import { - AuthDeleteContainer, - CategoryContent, - CategoryContainer, - Main, - NavBarContainer, - LogoutContainer, + AuthDeleteContainer, + CategoryContent, + CategoryContainer, + Main, + NavBarContainer, + LogoutContainer, } from "./Styles1"; -import { useDispatch } from "react-redux"; -import { setProfileImg } from "../../../redux/Breeder1/BreederSlice1"; export const NavCategory = [ - { - id: 1, - name: "분양신청내역", - // App.tsx에 만들어두신 url을 link에 주소로 넣어놓으시면 됩니다. - link: "/adoptlist/breeder", - }, - { - id: 2, - name: "보유견종 관리", - link: "", - }, - { - id: 3, - name: "프로필 관리", - link: "/mypage/profile", - }, - { - id: 4, - name: "회원정보 수정", - link: "/mypage/modifyauth", - }, + { + id: 1, + name: "분양신청내역", + link: "", + }, + { + id: 2, + name: "보유견종 관리", + link: "", + }, + { + id: 3, + name: "프로필 관리", + link: "/mypage/profile", + }, + { + id: 4, + name: "회원정보 수정", + link: "/mypage/modifyauth", + }, ]; const Navbar = () => { - const navigation = useNavigate(); - const location = useLocation(); - const dispath = useDispatch(); - - const DeleteAccount = () => { - navigation("/mypage/remove-account"); - }; + const navigation = useNavigate(); + const location = useLocation(); - const handleLogout = async () => { - const answer = await Swal.fire( - alertList.doubleCheckMessage("로그아웃 하시겠습니까?") - ); + const decodedJWT = DecodeToken(); + let roleBasedLink = "/mypage/adoptlist/breeder"; - if (answer.isConfirmed) { - try { - removeToken("accessToken"); - removeToken("refreshToken"); - removeToken("profileImg") - dispath(setProfileImg("")) - navigation("/"); - Swal.fire( - alertList.successMessage("로그아웃이 완료되었습니다") - ); - } catch (error) { - console.error("로그아웃 중 오류 발생:", error); - } - } - }; + if (decodedJWT.role === "ADOPTER") { + roleBasedLink = "/mypage/adoptlist/adopter"; + } - return ( - -
- {NavCategory.map((category) => ( - navigation(`${category.link}`)} - key={category.id} - $isHere={location.pathname === category.link} - > - {category.name} - - ))} - - - 로그아웃 - - -
- - 회원탈퇴 - - + const NavCategoryWithRole = NavCategory.map(category => { + if (category.name === "분양신청내역") { + return { ...category, link: roleBasedLink }; + } + return category; + }); + + const DeleteAccount = () => { + navigation("/mypage/remove-account"); + }; + + const handleLogout = async () => { + const answer = await Swal.fire( + alertList.doubleCheckMessage("로그아웃 하시겠습니까?"), ); + + if (answer.isConfirmed) { + try { + removeToken("accessToken"); + removeToken("refreshToken"); + navigation("/"); + Swal.fire(alertList.successMessage("로그아웃이 완료되었습니다")); + } catch (error) { + console.error("로그아웃 중 오류 발생:", error); + } + } + }; + + return ( + +
+ {NavCategoryWithRole.map(category => ( + navigation(`${category.link}`)} + key={category.id} + $isHere={location.pathname === category.link} + > + {category.name} + + ))} + + 로그아웃 + +
+ + 회원탈퇴 + + + ); }; export default Navbar;