-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Browse files
Browse the repository at this point in the history
feat: 프로필리스트, 보호소 프로필 api 연결, 스켈레톤 구현
- Loading branch information
Showing
17 changed files
with
481 additions
and
238 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,14 +1,7 @@ | ||
| import { ProfileListProps } from 'pages/profileList/VProfileListHome'; | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import VProfileCard from './VProfileCard'; | ||
| import VProfileCard, { VProfileInfoProps } from './VProfileCard'; | ||
|
|
||
| const ProfileCard = (data: ProfileListProps) => { | ||
| return <VProfileCard {...data} />; | ||
| const ProfileCard = (vProfileListProps: VProfileInfoProps) => { | ||
| return <VProfileCard {...vProfileListProps} />; | ||
| }; | ||
| // const navigate = useNavigate(); | ||
|
|
||
| // export function navigatePet(id: number) { | ||
| // return navigate('pet/$id'); | ||
| // } | ||
|
|
||
| export default ProfileCard; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,24 +1,61 @@ | ||
| import { useEffect, useState } from 'react'; | ||
| import { useQuery } from '@tanstack/react-query'; | ||
| import VProfileListHome, { ProfileListProps } from './VProfileListHome'; | ||
| import ProfileListHomeSkeleton from './ProfileListHomeSkeleton'; | ||
|
|
||
| const ProfileListHome = () => { | ||
| // const [list, setlist] = useState([]); | ||
|
|
||
| // useEffect(() => { | ||
| // fetch('public/data/profileHomeMock.json') | ||
| // .then((res) => res.json()) // javascript객체로 변환 | ||
| // .then(setlist); // list에 저장 | ||
| // }, []); | ||
| const profileListProps: ProfileListProps = { | ||
| image: '/assets/pet.png', | ||
| id: 1, | ||
| name: '보리', | ||
| age: 1, | ||
| shelter: '광주보호소', | ||
| state: '입양완료', | ||
| const [profileListProps, setProfileListProps] = | ||
| useState<ProfileListProps | null>(null); | ||
|
|
||
| const getProfiles = async () => { | ||
| const response = await fetch(`${process.env.REACT_APP_URI}/pet/profiles`, { | ||
| method: 'GET', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| }); | ||
|
|
||
| if (!response.ok) { | ||
| throw new Error(`HTTP error! Status: ${response.status}`); | ||
| } | ||
|
|
||
| const json = await response.json(); | ||
| return json.response; | ||
| }; | ||
|
|
||
| // JSX를 VAC로 교체 | ||
| const { data, isLoading, isError } = useQuery({ | ||
| queryKey: ['pet-list'], | ||
| queryFn: getProfiles, | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| if (!isLoading && !isError && data) { | ||
| const sosListData = data.sosList; | ||
|
|
||
| const newListData = data.newList; | ||
|
|
||
| const updatedProfileListProps: ProfileListProps = { | ||
| sosListProps: sosListData, | ||
| newListProps: newListData, | ||
| }; | ||
|
|
||
| return <VProfileListHome {...profileListProps} />; | ||
| setProfileListProps(updatedProfileListProps); | ||
| } | ||
| }, [data, isLoading, isError]); | ||
|
|
||
| if (isLoading) { | ||
| return <ProfileListHomeSkeleton />; | ||
| } | ||
|
|
||
| if (isError) { | ||
| return <div>Error: {isError}</div>; | ||
| } | ||
|
|
||
| if (profileListProps) { | ||
| return <VProfileListHome {...profileListProps} />; | ||
| } | ||
|
|
||
| return null; | ||
| }; | ||
|
|
||
| export default ProfileListHome; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,38 @@ | ||
| const ProfileListHomeSkeleton = () => { | ||
| return ( | ||
| <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 | ||
| href="profile/urgent/1" | ||
| 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 md:grid-cols-2 my-10 w-full whitespace-nowrap"> | ||
| <div className="w-3/4 h-28 bg-gray-200 m-2" /> | ||
| <div className="w-3/4 h-28 bg-gray-200 m-2" /> | ||
| <div className="w-3/4 h-28 bg-gray-200 m-2" /> | ||
| <div className="w-3/4 h-28 bg-gray-200 m-2" /> | ||
| </div> | ||
| <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 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 md:grid-cols-2 my-10 w-full whitespace-nowrap"> | ||
| <div className="w-3/4 h-28 bg-gray-200 m-2" /> | ||
| <div className="w-3/4 h-28 bg-gray-200 m-2" /> | ||
| <div className="w-3/4 h-28 bg-gray-200 m-2" /> | ||
| <div className="w-3/4 h-28 bg-gray-200 m-2" /> | ||
| </div> | ||
| </div> | ||
| ); | ||
| }; | ||
|
|
||
| export default ProfileListHomeSkeleton; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,44 +1,77 @@ | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import { useState } from 'react'; | ||
| import VNewList, { PageNationProps, Props } from './VNewList'; | ||
| import { ProfileListProps } from '../VProfileListHome'; | ||
| import { useEffect, useState } from 'react'; | ||
| import { useQuery } from '@tanstack/react-query'; | ||
| import VNewList, { Props } from './VNewList'; | ||
| import NewListSkeleton from './NewListSkeleton'; | ||
|
|
||
| const NewList = () => { | ||
| const [currentPage, setCurrentPage] = useState(1); // 현재 페이지 상태 | ||
| const navigate = useNavigate(); | ||
| // 페이지 변경 함수 | ||
| const handlePageChange = (page: number) => { | ||
| setCurrentPage(page); | ||
| navigate(`/profile/urgent/${page}`); | ||
| }; | ||
| // const [list, setlist] = useState([]); | ||
|
|
||
| // useEffect(() => { | ||
| // fetch('public/data/profileHomeMock.json') | ||
| // .then((res) => res.json()) // javascript객체로 변환 | ||
| // .then(setlist); // list에 저장 | ||
| // }, []); | ||
| const profileListProps: ProfileListProps = { | ||
| image: '/assets/pet.png', | ||
| id: 1, | ||
| name: '보리', | ||
| age: 1, | ||
| shelter: '광주보호소', | ||
| state: '입양완료', | ||
| }; | ||
| const pageNationProps: PageNationProps = { | ||
| currentPage, // 현재 페이지 상태를 전달 | ||
| lastPage: 10, | ||
| maxLength: 7, | ||
| setCurrentPage: handlePageChange, // 페이지 변경 함수를 전달 | ||
| navigate(`/profile/new/${page}`); | ||
| }; | ||
|
|
||
| const props: Props = { | ||
| pageNationProps, | ||
| profileListProps, | ||
| const [newList, setNewList] = useState<Props | null>(null); | ||
|
|
||
| const getProfiles = async () => { | ||
| const response = await fetch( | ||
| `${process.env.REACT_APP_URI}/pet/profiles/new?page=${currentPage}`, | ||
| { | ||
| method: 'GET', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| }, | ||
| }, | ||
| ); | ||
|
|
||
| if (!response.ok) { | ||
| throw new Error(`HTTP error! Status: ${response.status}`); | ||
| } | ||
|
|
||
| const json = await response.json(); | ||
| return json.response; | ||
| }; | ||
| // JSX를 VAC로 교체 | ||
|
|
||
| return <VNewList {...props} />; | ||
| const { data, isLoading, isError } = useQuery({ | ||
| queryKey: ['new-list', currentPage], | ||
| queryFn: getProfiles, | ||
| }); | ||
|
|
||
| useEffect(() => { | ||
| if (!isLoading && !isError && data) { | ||
| const pageData = { | ||
| currentPage, // 현재 페이지 상태를 전달 | ||
| lastPage: data.totalPages, | ||
| maxLength: 7, | ||
| setCurrentPage: handlePageChange, | ||
| }; | ||
|
|
||
| const newListData = data.newList; | ||
|
|
||
| const newListProps: Props = { | ||
| pageNationProps: pageData, | ||
| profileListProps: newListData, | ||
| }; | ||
|
|
||
| setNewList(newListProps); | ||
| } | ||
| }, [data, isLoading, isError]); | ||
|
|
||
| if (isLoading) { | ||
| return <NewListSkeleton />; | ||
| } | ||
|
|
||
| if (isError) { | ||
| return <div>Error: {isError}</div>; | ||
| } | ||
|
|
||
| if (newList) { | ||
| return <VNewList {...newList} />; | ||
| } | ||
|
|
||
| return null; | ||
| }; | ||
|
|
||
| export default NewList; |
Oops, something went wrong.