From db56fabe4ec6b1d4900bd831cc5dc56b533a5bb7 Mon Sep 17 00:00:00 2001 From: cjeongmin Date: Thu, 9 May 2024 00:12:16 +0900 Subject: [PATCH] fix: Apply data retrieved from the server to posts (#75) --- src/app/pages/shared-post-page.tsx | 103 ++++++++++--------- src/components/card/VitalSection.tsx | 14 ++- src/components/shared-posts/PostCard.tsx | 19 ++-- src/entities/shared-post/shared-post.type.ts | 3 + src/features/shared/shared.api.ts | 4 - src/features/shared/shared.hook.ts | 6 +- src/features/shared/shared.type.ts | 2 +- 7 files changed, 80 insertions(+), 71 deletions(-) diff --git a/src/app/pages/shared-post-page.tsx b/src/app/pages/shared-post-page.tsx index 598e005846..024519d424 100644 --- a/src/app/pages/shared-post-page.tsx +++ b/src/app/pages/shared-post-page.tsx @@ -372,20 +372,11 @@ const styles = { `, }; -const dummyImages = [ - 'https://s3-alpha-sig.figma.com/img/efd0/12b5/6a0078a4aa75b0e9a9fb53a6d9a7c560?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=ciMXf2L3kV1XzY76T5Ak5h2Ii1fEeZvK7KAykXxq3BIrlhdagKrN13jKM7UcWH5KgkEkHQjTDTHgII6Wv9Ffzswzz1ZabaSwefdVk9~NveeheHxjY2asCCinzAyQOtSXSqFavmapvkqIsc3YKmtqm6ic13PHPfaKEkoqm9lIrpb2fE60VY9A9gWTK1JycwjACH4hy4R44fDTNWaji9ItzR4Ch-vzDWd3rqINyRRFYbnIFj-ow6CSsBDqKWu-5X3Bq2teT9N8Xj2mULZjQtfd7pLtd55QoMHtRzzqtR-M-Pf4cLpmBZYN-0hkC4XHY3rq2HKQHOSd16k~azGjBkOBqQ__', - 'https://s3-alpha-sig.figma.com/img/ff85/788d/96b4a3ec1b31b6baf36b11c772529753?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=nvS2kVR-bHmV41ZhIADPEQMxhHJcFPtvDB2S4-h6IVQRRaRrzmPfYac5YIKkghcQELjIqKfePgsmRO-jVIQj-k6GVCcMQPkXxYJjT7x6UVeygGkBx5AVkmgE4yBgrpv~UzCIPKMY5TrK1KnCkZp9N9rus-8ooKMenzuYjbqqNS41WzYkQQvHD9KHafnRU7nb7pgA0fMe88teFauhpW3sCAgJvEWdkQQTtBgedIiphLU7vX9Kww54tCoNZ3vshSbggZW6L4wG39ztH5oSpjiRyviYmZ6z5WXUCno3YPGSVQLfzpfBYYh-tPEaicdxyUD5QhP9rDTee1aU3DDkPCwx1g__', -]; - -// const dummyMates = [ -// 'https://s3-alpha-sig.figma.com/img/59a5/3c6f/ae49249b51c7d5d81ab89eeb0bf610f1?Expires=1714348800&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Ou47yOoRJ57c0QqtWD~w0S6BP1UYWpmpCOCgsq9YTqfbNq~TmwfAI2T24-fYxpKSiBDv8y1Tkup68OTc5v2ZHIG~~CLwn6NCBF7QqTu7sQB0oPCvdRFdBm~y4wI8VEIErYhPsCuV2k7L0GVlJss4KkeM1tt1RX0kwfINvh03yzFf8wtjd0xsUJjMaKjNxU3muS2Cj8BZymckjgNGrTvafiGbAfHt0Bw2fTkH8tctfNNXpnZgqrEeDldEuENV~g-fSsLSFbMceZGN5ILEd9gd6fnY2YYeB7qtb9xozvczwTbz6kYIzzHJc7veYTsvxjqx~qTiKF2Yrn45cn5pXvOv1w__', -// ]; - export function SharedPostPage({ postId }: { postId: number }) { const auth = useAuthValue(); const [, setMap] = useState(null); - const { data: sharedPost } = useSharedPost({ + const { isLoading, data: sharedPost } = useSharedPost({ postId, enabled: auth?.accessToken !== undefined, }); @@ -406,6 +397,14 @@ export function SharedPostPage({ postId }: { postId: number }) { sharedPost?.data.publisherAccount.memberId ?? '', ); + const [selected, setSelected] = useState< + | { + memberId: string; + profileImage: string; + } + | undefined + >(undefined); + useEffect(() => { const center = new naver.maps.LatLng(37.6090857, 126.9966865); setMap( @@ -417,17 +416,21 @@ export function SharedPostPage({ postId }: { postId: number }) { ); }, []); + if (isLoading || sharedPost == null) return <>; + return ( - + fileName)} + />
-

{sharedPost?.data.title}

+

{sharedPost.data.title}

{ scrapPost(postId); }} @@ -435,79 +438,85 @@ export function SharedPostPage({ postId }: { postId: number }) { />
- 모집 1명 / 총원 2명 - 원룸 / 방 1 + 모집 {sharedPost.data.roomInfo.recruitmentCapacity}명 + + {sharedPost.data.roomInfo.roomType} · 방{' '} + {sharedPost.data.roomInfo.numberOfRoom} · 화장실{' '} + {sharedPost.data.roomInfo.numberOfBathRoom} +
- 희망 월 분담금 65만원 - 저장 4 · 조회 22 + + 희망 월 분담금 {sharedPost.data.roomInfo.expectedPayment}만원 + + + 저장 {sharedPost.data.scrapCount} · 조회{' '} + {sharedPost.data.viewCount} +

상세 정보

-

- 안녕하세요! 저는 현재 룸메이트를 찾고 있는 정연수입니다. 서울시 - 정릉동에서 함께 살아갈 룸메이트를 구하고 있습니다. 주로 밤에 - 작업을 하며 새벽 2시~3시쯤에 취침합니다. 관심있으신 분들 연락 - 주세요! -

+

{sharedPost.data.content}

거래 정보

거래 방식 - 월세 + {sharedPost.data.roomInfo.rentalType}
희망 월 분담금 - 65만원 + {sharedPost.data.roomInfo.expectedPayment}

방 정보

방 종류 - 원룸 + {sharedPost.data.roomInfo.roomType}
거실 보유 - 있음 + + {sharedPost.data.roomInfo.hasLivingRoom ? '유' : '무'} +
방 개수 - 2개 + {sharedPost.data.roomInfo.numberOfRoom}개
화장실 개수 - 1개 + {sharedPost.data.roomInfo.numberOfBathRoom}개
평수 - 14평 + {sharedPost.data.roomInfo.size}평

위치 정보

-

{sharedPost?.data.address.roadAddress}

+

{sharedPost.data.address.roadAddress}

- - - + {sharedPost.data.participants.map( + ({ memberId, profileImage }, index) => ( + { + setSelected({ memberId, profileImage }); + }} + /> + ), + )} @@ -518,15 +527,15 @@ export function SharedPostPage({ postId }: { postId: number }) { />

- {sharedPost?.data.publisherAccount.nickname} + {sharedPost.data.publisherAccount.nickname}

- {sharedPost?.data.publisherAccount.birthYear != null + {sharedPost.data.publisherAccount.birthYear != null ? getAge(+sharedPost.data.publisherAccount.birthYear) : new Date().getFullYear()}

-

서웉특별시 성북구

+

{sharedPost.data.address.roadAddress}

 diff --git a/src/components/card/VitalSection.tsx b/src/components/card/VitalSection.tsx index e33d93a44e..364da6aad4 100644 --- a/src/components/card/VitalSection.tsx +++ b/src/components/card/VitalSection.tsx @@ -271,7 +271,7 @@ export function VitalSection({ }); onFeatureChange(key, value); }, - [], + [onFeatureChange], ); const [initialLocation, setInitialLocation] = useState(''); @@ -279,7 +279,7 @@ export function VitalSection({ if (location !== undefined && type === 'myCard') { setInitialLocation(location); } - }, [location]); + }, [location, type]); const [locationInput, setLocation] = useState(''); useEffect(() => { @@ -289,9 +289,10 @@ export function VitalSection({ const handleLocationChange = (event: React.ChangeEvent) => { setLocation(event.target.value); }; + useEffect(() => { onLocationChange(locationInput); - }, [locationInput]); + }, [onLocationChange, locationInput]); const [initialAge, setInitialAge] = useState(0); const [ageValue, setAgeValue] = useState(0); @@ -305,8 +306,11 @@ export function VitalSection({ }, [initialAge]); const handleAgeChange = (e: React.ChangeEvent) => { - setAgeValue(Number(e.target.value)); - onMateAgeChange(Number(e.target.value)); + if (!Number.isNaN(e.target.value)) { + const n = Number(e.target.value); + setAgeValue(n); + onMateAgeChange(n === 11 ? undefined : n); + } }; let ageValueString; diff --git a/src/components/shared-posts/PostCard.tsx b/src/components/shared-posts/PostCard.tsx index cea8babeba..548ae8214b 100644 --- a/src/components/shared-posts/PostCard.tsx +++ b/src/components/shared-posts/PostCard.tsx @@ -124,26 +124,23 @@ export function PostCard({ post }: { post: SharedPostListItem }) { return (
- +

{post.title}

{post.address.roadAddress}

-

모집 1명 / 총원 2명

-

원룸 · 방1

-

500 / 50 / 5

+

모집 {post.roomInfo.recruitmentCapacity}명

+

+ {post.roomInfo.roomType} · 방 {post.roomInfo.numberOfRoom} · + 화장실 {post.roomInfo.numberOfBathRoom} +

+

희망 월 분담금 {post.roomInfo.expectedPayment}

 - +

50%

 diff --git a/src/entities/shared-post/shared-post.type.ts b/src/entities/shared-post/shared-post.type.ts index 7c8f73c86e..523864c9be 100644 --- a/src/entities/shared-post/shared-post.type.ts +++ b/src/entities/shared-post/shared-post.type.ts @@ -33,6 +33,7 @@ export interface SharedPostListItem { numberOfBathRoom: number; rentalType: string; expectedPayment: number; + recruitmentCapacity: number; }; isScrapped: boolean; createdAt: Date; @@ -131,6 +132,7 @@ export interface DormitorySharedPostListItem { oldAddress: string; roadAddress: string; }; + recruitmentCapacity: number; isScrapped: boolean; createdAt: Date; createdBy: string; @@ -177,6 +179,7 @@ export interface DormitorySharedPost { oldAddress: string; roadAddress: string; }; + recruitmentCapacity: number; isScrapped: boolean; scrapCount: number; viewCount: number; diff --git a/src/features/shared/shared.api.ts b/src/features/shared/shared.api.ts index 5317cdd471..e232014448 100644 --- a/src/features/shared/shared.api.ts +++ b/src/features/shared/shared.api.ts @@ -61,10 +61,6 @@ export const getDormitorySharedPosts = async ({ const baseURL = '/maru-api/shared/posts/dormitory'; let query = ''; - if (filter != null) { - query += `filter=${JSON.stringify(filterConvertToValues(filter))}`; - } - if (search != null) { query += `&search=${search}`; } diff --git a/src/features/shared/shared.hook.ts b/src/features/shared/shared.hook.ts index 108c9a34d4..c2382f5177 100644 --- a/src/features/shared/shared.hook.ts +++ b/src/features/shared/shared.hook.ts @@ -233,7 +233,7 @@ export const usePostMateCardInputSection = () => { const handleEssentialFeatureChange = useCallback( ( key: 'smoking' | 'roomSharingOption' | 'mateAge', - value: string | number, + value: string | number | undefined, ) => { setFeatures(prev => { if (prev[key] === value) { @@ -266,10 +266,10 @@ export const usePostMateCardInputSection = () => { return { smoking: features?.smoking ?? '상관없어요', roomSharingOption: features?.roomSharingOption ?? '상관없어요', - mateAge: features?.mateAge ?? 0, + mateAge: birthYear, options: JSON.stringify(options), }; - }, [features]); + }, [features, birthYear]); const auth = useAuthValue(); useEffect(() => { diff --git a/src/features/shared/shared.type.ts b/src/features/shared/shared.type.ts index e0ba8ebcfa..e809f5ba44 100644 --- a/src/features/shared/shared.type.ts +++ b/src/features/shared/shared.type.ts @@ -76,7 +76,7 @@ export interface CreateSharedPostProps { features: { smoking: string; roomSharingOption: string; - mateAge: number | null; // 0 ~ 10: +- 범위 값, null: 상관 없어요. + mateAge: number | undefined; // 0 ~ 10: +- 범위 값, null: 상관 없어요. options: string; }; };