fix: Apply data retrieved from the server to posts (kookmin-sw#75)

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<naver.maps.Map | null>(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,97 +416,107 @@ export function SharedPostPage({ postId }: { postId: number }) {
     );
   }, []);
 
+  if (isLoading || sharedPost == null) return <></>;
+
   return (
     <styles.container>
       <styles.contentContainer>
         <styles.postContainer>
-          <styles.ImageGrid images={dummyImages} />
+          <styles.ImageGrid
+            images={sharedPost.data.roomImages.map(({ fileName }) => fileName)}
+          />
           <styles.postInfoContainer>
             <div>
-              <h1>{sharedPost?.data.title}</h1>
+              <h1>{sharedPost.data.title}</h1>
               <Bookmark
                 hasBorder={false}
-                marked={sharedPost?.data.isScrapped ?? false}
+                marked={sharedPost.data.isScrapped}
                 onToggle={() => {
                   scrapPost(postId);
                 }}
                 color="black"
               />
             </div>
             <styles.postInfoContent>
-              <span>모집 1명 / 총원 2명</span>
-              <span>원룸 / 방 1</span>
+              <span>모집 {sharedPost.data.roomInfo.recruitmentCapacity}명</span>
+              <span>
+                {sharedPost.data.roomInfo.roomType} · 방{' '}
+                {sharedPost.data.roomInfo.numberOfRoom} · 화장실{' '}
+                {sharedPost.data.roomInfo.numberOfBathRoom}
+              </span>
               <div>
-                <span>희망 월 분담금 65만원</span>
-                <span>저장 4 · 조회 22</span>
+                <span>
+                  희망 월 분담금 {sharedPost.data.roomInfo.expectedPayment}만원
+                </span>
+                <span>
+                  저장 {sharedPost.data.scrapCount} · 조회{' '}
+                  {sharedPost.data.viewCount}
+                </span>
               </div>
             </styles.postInfoContent>
           </styles.postInfoContainer>
           <styles.postContentContainer>
             <h2>상세 정보</h2>
-            <p>
-              안녕하세요! 저는 현재 룸메이트를 찾고 있는 정연수입니다. 서울시
-              정릉동에서 함께 살아갈 룸메이트를 구하고 있습니다. 주로 밤에
-              작업을 하며 새벽 2시~3시쯤에 취침합니다. 관심있으신 분들 연락
-              주세요!
-            </p>
+            <p>{sharedPost.data.content}</p>
           </styles.postContentContainer>
           <styles.divider />
           <styles.dealInfoContainer>
             <h2>거래 정보</h2>
             <div>
               <span>거래 방식</span>
-              <span>월세</span>
+              <span>{sharedPost.data.roomInfo.rentalType}</span>
             </div>
             <div>
               <span>희망 월 분담금</span>
-              <span>65만원</span>
+              <span>{sharedPost.data.roomInfo.expectedPayment}</span>
             </div>
           </styles.dealInfoContainer>
           <styles.roomInfoContainer>
             <h2>방 정보</h2>
             <div>
               <span>방 종류</span>
-              <span>원룸</span>
+              <span>{sharedPost.data.roomInfo.roomType}</span>
             </div>
             <div>
               <span>거실 보유</span>
-              <span>있음</span>
+              <span>
+                {sharedPost.data.roomInfo.hasLivingRoom ? '유' : '무'}
+              </span>
             </div>
             <div>
               <span>방 개수</span>
-              <span>2개</span>
+              <span>{sharedPost.data.roomInfo.numberOfRoom}개</span>
             </div>
             <div>
               <span>화장실 개수</span>
-              <span>1개</span>
+              <span>{sharedPost.data.roomInfo.numberOfBathRoom}개</span>
             </div>
             <div>
               <span>평수</span>
-              <span>14평</span>
+              <span>{sharedPost.data.roomInfo.size}평</span>
             </div>
           </styles.roomInfoContainer>
           <styles.locationInfoContainer>
             <h2>위치 정보</h2>
-            <p>{sharedPost?.data.address.roadAddress}</p>
+            <p>{sharedPost.data.address.roadAddress}</p>
             <div id="map" />
           </styles.locationInfoContainer>
         </styles.postContainer>
         <styles.mateContainer>
           <styles.mates>
-            <styles.mate
-              $selected
-              $zIndex={3}
-              src="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__"
-            />
-            <styles.mate
-              $zIndex={2}
-              src="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__"
-            />
-            <styles.mate
-              $zIndex={1}
-              src="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__"
-            />
+            {sharedPost.data.participants.map(
+              ({ memberId, profileImage }, index) => (
+                <styles.mate
+                  key={memberId}
+                  $selected={memberId === selected?.memberId}
+                  $zIndex={index}
+                  src={profileImage}
+                  onClick={() => {
+                    setSelected({ memberId, profileImage });
+                  }}
+                />
+              ),
+            )}
           </styles.mates>
           <styles.selectedMateContainer>
             <styles.profile>
@@ -518,15 +527,15 @@ export function SharedPostPage({ postId }: { postId: number }) {
               />
               <styles.profileInfo>
                 <p className="name">
-                  {sharedPost?.data.publisherAccount.nickname}
+                  {sharedPost.data.publisherAccount.nickname}
                 </p>
                 <div>
                   <p>
-                    {sharedPost?.data.publisherAccount.birthYear != null
+                    {sharedPost.data.publisherAccount.birthYear != null
                       ? getAge(+sharedPost.data.publisherAccount.birthYear)
                       : new Date().getFullYear()}
                   </p>
-                  <p>서웉특별시 성북구</p>
+                  <p>{sharedPost.data.address.roadAddress}</p>
                 </div>
               </styles.profileInfo>
             </styles.profile>

src/components/card/VitalSection.tsx

@@ -271,15 +271,15 @@ export function VitalSection({
       });
       onFeatureChange(key, value);
     },
-    [],
+    [onFeatureChange],
   );
 
   const [initialLocation, setInitialLocation] = useState('');
   useEffect(() => {
     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<HTMLInputElement>) => {
     setLocation(event.target.value);
   };
+
   useEffect(() => {
     onLocationChange(locationInput);
-  }, [locationInput]);
+  }, [onLocationChange, locationInput]);
 
   const [initialAge, setInitialAge] = useState<number>(0);
   const [ageValue, setAgeValue] = useState<number>(0);
@@ -305,8 +306,11 @@ export function VitalSection({
   }, [initialAge]);
 
   const handleAgeChange = (e: React.ChangeEvent<HTMLInputElement>) => {
-    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;

src/components/shared-posts/PostCard.tsx

@@ -124,26 +124,23 @@ export function PostCard({ post }: { post: SharedPostListItem }) {
   return (
     <div>
       <styles.container>
-        <styles.thumbnail
-          alt=""
-          src="https://s3-alpha-sig.figma.com/img/2d52/bfda/0a900d41e2a6d77dd731fac06577540c?Expires=1712534400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=Q9zefEFzqJ-RNfzsNdrJTBDLNSZWOpY-3j8DE04rk-t2MmcZieVHD4MJG5EAEVd1PLLCpN~BKGfMyCHGgjGTr6XcjSifghDXqpxM2fUQSWznNWBdmn4ZrylLoeV17NzynTtmPSND8eo5r86Gv5DAHWNWwmnP6kDtApBlJjoeVSzqTiC7JS4COohy1Wb6Z7Du-ra9apbhzsvoYFytJR68WVqYI0eNAltK3iy23Pn-dysqHoLvty67TI60IYQkcRuU93K6bx4W8tZkxtTg7EW-dZ9uOSLSdwFQ2s14WXXKgQQySfbJH2~g1-usTVjv5u4nVBmV-afBaQbyDbPkkksW8Q__"
-        />
+        <styles.thumbnail alt="" src={post.thumbnail.fileName} />
         <styles.content>
           <div>
             <h1>{post.title}</h1>
             <h2>{post.address.roadAddress}</h2>
           </div>
           <div>
-            <p>모집 1명 / 총원 2명</p>
-            <p>원룸 · 방1</p>
-            <p>500 / 50 / 5</p>
+            <p>모집 {post.roomInfo.recruitmentCapacity}명</p>
+            <p>
+              {post.roomInfo.roomType} · 방 {post.roomInfo.numberOfRoom} ·
+              화장실 {post.roomInfo.numberOfBathRoom}
+            </p>
+            <p>희망 월 분담금 {post.roomInfo.expectedPayment}</p>
           </div>
         </styles.content>
         <styles.writer>
-          <img
-            alt=""
-            src="https://s3-alpha-sig.figma.com/img/59a5/3c6f/ae49249b51c7d5d81ab89eeb0bf610f1?Expires=1712534400&Key-Pair-Id=APKAQ4GOSFWCVNEHN3O4&Signature=otR4I8Y0NumUlQW6NsUkXOvTzPqQhjjq1BLNd~EcweuN0Q0vRcVUvMuhlAx2vlsr2lOiqAgoyuXkYlVrK2qknRxQffQDRjGbRsK6CyebC76kXWw5Zu0SxlwtUdiYVV8VI0lWwoRsKqnoI4DXOqChcEMKPQamtpUmTx~NHx8t5cKSdvAMu0tqlPPdF7Sa51Vcuzrryfj~mcZXXEdEltEACAxPsFxhCelyDPB2Se7ZihPK1RGrtvovJZkc-64whNnji8Z0AOm-~irZhl0WQh0jhsaUpp2T5h9drq8-UwVdco3GBNXLSk3ygioYruN0j4U7SkqKVt7~ng1G7IH7395B4A__"
-          />
+          <img alt="" src={post.publisherAccount.profileImageFileName} />
           <styles.percentage>
             <p>50%</p>
           </styles.percentage>

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;

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}`;
     }

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(() => {

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;
     };
   };