From e1ccfef4b0670b5d274569f45b44d51928c09cc8 Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Wed, 8 May 2024 14:25:20 +0900
Subject: [PATCH 01/10] fix: Apply changes GET /shared/posts/studio (#75)

---
 src/entities/shared-post/shared-post.type.ts | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/src/entities/shared-post/shared-post.type.ts b/src/entities/shared-post/shared-post.type.ts
index deaafbf..70d2def 100644
--- a/src/entities/shared-post/shared-post.type.ts
+++ b/src/entities/shared-post/shared-post.type.ts
@@ -22,12 +22,12 @@ export interface SharedPostListItem {
     modifiedAt: Date;
     modifiedBy: string;
   };
+  address: {
+    oldAddress: string;
+    roadAddress: string;
+  };
   roomInfo: {
     id: number;
-    address: {
-      oldAddress: string;
-      roadAddress: string;
-    };
     roomType: string;
     floorType: string;
     size: number;

From 3ddae05ff6cccb9d106797653110f3fc2619049e Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Wed, 8 May 2024 14:27:24 +0900
Subject: [PATCH 02/10] fix: fix build error

---
 src/components/shared-posts/PostCard.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/shared-posts/PostCard.tsx b/src/components/shared-posts/PostCard.tsx
index 33c5e8f..cea8bab 100644
--- a/src/components/shared-posts/PostCard.tsx
+++ b/src/components/shared-posts/PostCard.tsx
@@ -131,7 +131,7 @@ export function PostCard({ post }: { post: SharedPostListItem }) {
         <styles.content>
           <div>
             <h1>{post.title}</h1>
-            <h2>{post.roomInfo.address.roadAddress}</h2>
+            <h2>{post.address.roadAddress}</h2>
           </div>
           <div>
             <p>모집 1명 / 총원 2명</p>

From f1e2e15b3ffd0d70174d6d23f0d980856cabe5f9 Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Wed, 8 May 2024 14:33:21 +0900
Subject: [PATCH 03/10] fix: Apply changes to GET /shared/posts/studio/{postId}
 (#75)

---
 src/entities/shared-post/shared-post.type.ts | 29 +++++++++++---------
 1 file changed, 16 insertions(+), 13 deletions(-)

diff --git a/src/entities/shared-post/shared-post.type.ts b/src/entities/shared-post/shared-post.type.ts
index 70d2def..9fe01ed 100644
--- a/src/entities/shared-post/shared-post.type.ts
+++ b/src/entities/shared-post/shared-post.type.ts
@@ -1,5 +1,3 @@
-import { type RentalType, type RoomType } from '@/shared/types';
-
 export interface SharedPostListItem {
   id: number;
   title: string;
@@ -47,7 +45,15 @@ export interface SharedPost {
   id: number;
   title: string;
   content: string;
-  roomMateFeatures: string[];
+  roomMateFeatures: {
+    location: string;
+    features: {
+      smoking: string;
+      roomSharingOption: string;
+      mateAge: string;
+      options: string; // 프런트에서 파싱 필요.
+    };
+  };
   participants: Array<{ memberId: string; profileImage: string }>;
   roomImages: Set<{
     fileName: string;
@@ -61,29 +67,26 @@ export interface SharedPost {
     birthYear: string;
     gender: string;
     phoneNumber: string;
-    myCardFeatures: string[];
-    mateCardFeatures: string[];
+    profileImageFileName: string;
     createdAt: Date;
     createdBy: string;
     modifiedAt: Date;
     modifiedBy: string;
   };
+  address: {
+    oldAddress: string;
+    roadAddress: string;
+  };
   roomInfo: {
     id: number;
-    address: {
-      city: string;
-      oldAddress: string;
-      roadAddress: string;
-      detailAddress?: string;
-    };
-    roomType: RoomType;
+    roomType: string;
     floorType: string;
     size: number;
     numberOfRoom: number;
     numberOfBathRoom: number;
     hasLivingRoom: boolean;
     recruitmentCapacity: number;
-    rentalType: RentalType;
+    rentalType: string;
     expectedPayment: number;
     extraOption: {
       canPark: boolean;

From 7ac4bd6c8cfbc022e88f1d76b6e75431f5f80986 Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Wed, 8 May 2024 15:05:29 +0900
Subject: [PATCH 04/10] fix: fix build error

---
 src/app/pages/shared-post-page.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/app/pages/shared-post-page.tsx b/src/app/pages/shared-post-page.tsx
index 5cf03fd..d0ea20b 100644
--- a/src/app/pages/shared-post-page.tsx
+++ b/src/app/pages/shared-post-page.tsx
@@ -470,7 +470,7 @@ export function SharedPostPage({ postId }: { postId: number }) {
           </styles.roomInfoContainer>
           <styles.locationInfoContainer>
             <h2>위치 정보</h2>
-            <p>{sharedPost?.data.roomInfo.address.roadAddress}</p>
+            <p>{sharedPost?.data.address.roadAddress}</p>
             <div id="map" />
           </styles.locationInfoContainer>
         </styles.postContainer>

From 5a5805d4d9e52da74f95242e28f9e059d25b4469 Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Wed, 8 May 2024 15:19:05 +0900
Subject: [PATCH 05/10] feat: GET /shared/posts/dormitory API (#75)

---
 src/entities/shared-post/shared-post.type.ts | 33 ++++++++++++++++++++
 src/features/shared/shared.api.ts            | 25 +++++++++++++++
 src/features/shared/shared.dto.ts            | 32 +++++++++++++++++++
 src/features/shared/shared.hook.ts           | 17 ++++++++++
 4 files changed, 107 insertions(+)

diff --git a/src/entities/shared-post/shared-post.type.ts b/src/entities/shared-post/shared-post.type.ts
index 9fe01ed..dc57eed 100644
--- a/src/entities/shared-post/shared-post.type.ts
+++ b/src/entities/shared-post/shared-post.type.ts
@@ -104,3 +104,36 @@ export interface SharedPost {
   modifiedAt: Date;
   modifiedBy: string;
 }
+
+export interface DormitorySharedPostListItem {
+  id: number;
+  title: string;
+  content: string;
+  thumbnail: {
+    fileName: string;
+    isThumbNail: boolean;
+    order: number;
+  };
+  publisherAccount: {
+    memberId: string;
+    email: string;
+    nickname: string;
+    birthYear: string;
+    gender: string;
+    phoneNumber: string;
+    profileImageFileName: string;
+    createdAt: Date;
+    createdBy: string;
+    modifiedAt: Date;
+    modifiedBy: string;
+  };
+  address: {
+    oldAddress: string;
+    roadAddress: string;
+  };
+  isScrapped: boolean;
+  createdAt: Date;
+  createdBy: string;
+  modifiedAt: Date;
+  modifiedBy: string;
+}
diff --git a/src/features/shared/shared.api.ts b/src/features/shared/shared.api.ts
index 40c42ee..93c2cdc 100644
--- a/src/features/shared/shared.api.ts
+++ b/src/features/shared/shared.api.ts
@@ -112,3 +112,28 @@ export const scrapPost = async (postId: number) =>
   await axios.get<SuccessBaseDTO>(
     `/maru-api/shared/posts/studio/${postId}/scrap`,
   );
+
+export const getDormitorySharedPosts = async ({
+  filter,
+  search,
+  page,
+}: GetSharedPostsProps) => {
+  const getURI = () => {
+    const baseURL = '/maru-api/shared/posts/studio';
+    let query = '';
+
+    if (filter != null) {
+      query += `filter=${JSON.stringify(filterConvertToValues(filter))}`;
+    }
+
+    if (search != null) {
+      query += `&search=${search}`;
+    }
+
+    query += `&page=${page}`;
+
+    return `${baseURL}?${encodeURI(query)}`;
+  };
+
+  return await axios.get<GetSharedPostsDTO>(getURI());
+};
diff --git a/src/features/shared/shared.dto.ts b/src/features/shared/shared.dto.ts
index 65997e9..17a0c34 100644
--- a/src/features/shared/shared.dto.ts
+++ b/src/features/shared/shared.dto.ts
@@ -1,4 +1,5 @@
 import {
+  type DormitorySharedPostListItem,
   type SharedPost,
   type SharedPostListItem,
 } from '@/entities/shared-post';
@@ -38,3 +39,34 @@ export interface GetSharedPostsDTO extends SuccessBaseDTO {
 export interface GetSharedPostDTO extends SuccessBaseDTO {
   data: SharedPost;
 }
+
+export interface GetDormitorySharedPostsDTO extends SuccessBaseDTO {
+  data: {
+    content: DormitorySharedPostListItem[];
+    pageable: {
+      pageNumber: number;
+      pageSize: number;
+      sort: {
+        empty: boolean;
+        unsorted: boolean;
+        sorted: boolean;
+      };
+      offset: number;
+      paged: boolean;
+      unpaged: boolean;
+    };
+    last: boolean;
+    totalPages: number;
+    totalElements: number;
+    first: boolean;
+    size: number;
+    number: number;
+    sort: {
+      empty: boolean;
+      unsorted: boolean;
+      sorted: boolean;
+    };
+    numberOfElements: number;
+    empty: boolean;
+  };
+}
diff --git a/src/features/shared/shared.hook.ts b/src/features/shared/shared.hook.ts
index 36ffe31..574f084 100644
--- a/src/features/shared/shared.hook.ts
+++ b/src/features/shared/shared.hook.ts
@@ -5,6 +5,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   createSharedPost,
   deleteSharedPost,
+  getDormitorySharedPosts,
   getSharedPost,
   getSharedPosts,
   scrapPost,
@@ -386,3 +387,19 @@ export const useScrapSharedPost = () =>
   useMutation<AxiosResponse<SuccessBaseDTO>, FailureDTO, number>({
     mutationFn: scrapPost,
   });
+
+export const useDormitorySharedPosts = ({
+  filter,
+  search,
+  page,
+  enabled,
+}: GetSharedPostsProps & { enabled: boolean }) =>
+  useQuery({
+    queryKey: ['/api/shared/posts/studio', { filter, search, page }],
+    queryFn: async () =>
+      await getDormitorySharedPosts({ filter, search, page }).then(
+        response => response.data,
+      ),
+    staleTime: 60000,
+    enabled,
+  });

From 9dd143169c9728391cc59d3f5f5601b219cda22e Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Wed, 8 May 2024 15:31:22 +0900
Subject: [PATCH 06/10] feat: GET /shared/posts/dormitory/{postId} API (#75)

---
 src/entities/shared-post/shared-post.type.ts | 50 +++++++++++++++++++-
 src/features/shared/shared.api.ts            | 16 +++++--
 src/features/shared/shared.dto.ts            |  5 ++
 src/features/shared/shared.hook.ts           | 17 ++++++-
 4 files changed, 83 insertions(+), 5 deletions(-)

diff --git a/src/entities/shared-post/shared-post.type.ts b/src/entities/shared-post/shared-post.type.ts
index dc57eed..7c8f73c 100644
--- a/src/entities/shared-post/shared-post.type.ts
+++ b/src/entities/shared-post/shared-post.type.ts
@@ -55,7 +55,7 @@ export interface SharedPost {
     };
   };
   participants: Array<{ memberId: string; profileImage: string }>;
-  roomImages: Set<{
+  roomImages: Array<{
     fileName: string;
     isThumbnail: boolean;
     order: number;
@@ -137,3 +137,51 @@ export interface DormitorySharedPostListItem {
   modifiedAt: Date;
   modifiedBy: string;
 }
+
+export interface DormitorySharedPost {
+  id: number;
+  title: string;
+  content: string;
+  roomMateFeatures: {
+    location: string;
+    features: {
+      smoking: string;
+      roomSharingOption: string;
+      mateAge: string;
+      options: string;
+    };
+  };
+  participants: Array<{
+    memberId: string;
+    profileImageFileName: string;
+  }>;
+  roomImages: Array<{
+    fileName: string;
+    isThumbNail: boolean;
+    order: number;
+  }>;
+  publisherAccount: {
+    memberId: string;
+    email: string;
+    nickname: string;
+    birthYear: string;
+    gender: string;
+    phoneNumber: string;
+    profileImageFileName: string;
+    createdAt: Date;
+    createdBy: string;
+    modifiedAt: Date;
+    modifiedBy: string;
+  };
+  address: {
+    oldAddress: string;
+    roadAddress: string;
+  };
+  isScrapped: boolean;
+  scrapCount: number;
+  viewCount: number;
+  createdAt: Date;
+  createdBy: string;
+  modifiedAt: Date;
+  modifiedBy: string;
+}
diff --git a/src/features/shared/shared.api.ts b/src/features/shared/shared.api.ts
index 93c2cdc..4b4b4e6 100644
--- a/src/features/shared/shared.api.ts
+++ b/src/features/shared/shared.api.ts
@@ -1,6 +1,11 @@
 import axios from 'axios';
 
-import { type GetSharedPostDTO, type GetSharedPostsDTO } from './shared.dto';
+import {
+  type GetDormitorySharedPostDTO,
+  type GetDormitorySharedPostsDTO,
+  type GetSharedPostDTO,
+  type GetSharedPostsDTO,
+} from './shared.dto';
 import {
   type CreateSharedPostProps,
   type GetSharedPostsFilter,
@@ -119,7 +124,7 @@ export const getDormitorySharedPosts = async ({
   page,
 }: GetSharedPostsProps) => {
   const getURI = () => {
-    const baseURL = '/maru-api/shared/posts/studio';
+    const baseURL = '/maru-api/shared/posts/dormitory';
     let query = '';
 
     if (filter != null) {
@@ -135,5 +140,10 @@ export const getDormitorySharedPosts = async ({
     return `${baseURL}?${encodeURI(query)}`;
   };
 
-  return await axios.get<GetSharedPostsDTO>(getURI());
+  return await axios.get<GetDormitorySharedPostsDTO>(getURI());
 };
+
+export const getDormitorySharedPost = async (postId: number) =>
+  await axios.get<GetDormitorySharedPostDTO>(
+    `/maru-api/shared/posts/dormitory/${postId}`,
+  );
diff --git a/src/features/shared/shared.dto.ts b/src/features/shared/shared.dto.ts
index 17a0c34..ff0a5f0 100644
--- a/src/features/shared/shared.dto.ts
+++ b/src/features/shared/shared.dto.ts
@@ -1,4 +1,5 @@
 import {
+  type DormitorySharedPost,
   type DormitorySharedPostListItem,
   type SharedPost,
   type SharedPostListItem,
@@ -70,3 +71,7 @@ export interface GetDormitorySharedPostsDTO extends SuccessBaseDTO {
     empty: boolean;
   };
 }
+
+export interface GetDormitorySharedPostDTO extends SuccessBaseDTO {
+  data: DormitorySharedPost;
+}
diff --git a/src/features/shared/shared.hook.ts b/src/features/shared/shared.hook.ts
index 574f084..24bd1e7 100644
--- a/src/features/shared/shared.hook.ts
+++ b/src/features/shared/shared.hook.ts
@@ -5,6 +5,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 import {
   createSharedPost,
   deleteSharedPost,
+  getDormitorySharedPost,
   getDormitorySharedPosts,
   getSharedPost,
   getSharedPosts,
@@ -395,7 +396,7 @@ export const useDormitorySharedPosts = ({
   enabled,
 }: GetSharedPostsProps & { enabled: boolean }) =>
   useQuery({
-    queryKey: ['/api/shared/posts/studio', { filter, search, page }],
+    queryKey: ['/api/shared/posts/dormitory', { filter, search, page }],
     queryFn: async () =>
       await getDormitorySharedPosts({ filter, search, page }).then(
         response => response.data,
@@ -403,3 +404,17 @@ export const useDormitorySharedPosts = ({
     staleTime: 60000,
     enabled,
   });
+
+export const useDormitorySharedPost = ({
+  postId,
+  enabled,
+}: {
+  postId: number;
+  enabled: boolean;
+}) =>
+  useQuery({
+    queryKey: [`/api/shared/posts/dormitory/${postId}`],
+    queryFn: async () =>
+      await getDormitorySharedPost(postId).then(response => response.data),
+    enabled,
+  });

From 3e161622cff1a5f104ecedf33ae663c6f8faec0c Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Wed, 8 May 2024 15:36:41 +0900
Subject: [PATCH 07/10] feat: DELETE /shared/posts/dormitory/{postId} API (#75)

---
 src/features/shared/shared.api.ts  |  5 +++++
 src/features/shared/shared.hook.ts | 17 +++++++++++++++++
 2 files changed, 22 insertions(+)

diff --git a/src/features/shared/shared.api.ts b/src/features/shared/shared.api.ts
index 4b4b4e6..7629dfe 100644
--- a/src/features/shared/shared.api.ts
+++ b/src/features/shared/shared.api.ts
@@ -147,3 +147,8 @@ export const getDormitorySharedPost = async (postId: number) =>
   await axios.get<GetDormitorySharedPostDTO>(
     `/maru-api/shared/posts/dormitory/${postId}`,
   );
+
+export const deleteDormitorySharedPost = async (postId: number) =>
+  await axios.delete<SuccessBaseDTO>(
+    `/maru-api/shared/posts/dormitory/${postId}`,
+  );
diff --git a/src/features/shared/shared.hook.ts b/src/features/shared/shared.hook.ts
index 24bd1e7..5e9dffc 100644
--- a/src/features/shared/shared.hook.ts
+++ b/src/features/shared/shared.hook.ts
@@ -4,6 +4,7 @@ import { useCallback, useEffect, useMemo, useState } from 'react';
 
 import {
   createSharedPost,
+  deleteDormitorySharedPost,
   deleteSharedPost,
   getDormitorySharedPost,
   getDormitorySharedPosts,
@@ -418,3 +419,19 @@ export const useDormitorySharedPost = ({
       await getDormitorySharedPost(postId).then(response => response.data),
     enabled,
   });
+
+export const useDeleteDormitorySharedPost = ({
+  postId,
+  onSuccess,
+  onError,
+}: {
+  postId: number;
+  onSuccess: (data: SuccessBaseDTO) => void;
+  onError: (error: Error) => void;
+}) =>
+  useMutation({
+    mutationFn: async () =>
+      await deleteDormitorySharedPost(postId).then(response => response.data),
+    onSuccess,
+    onError,
+  });

From b098436905716b2688a3f2ccbdb9bafb4d3e012c Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Wed, 8 May 2024 15:39:30 +0900
Subject: [PATCH 08/10] feat: POST /shared/posts/dormitory/{postId}/scrap API
 (#75)

---
 src/features/shared/shared.api.ts  | 7 ++++++-
 src/features/shared/shared.hook.ts | 6 ++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/src/features/shared/shared.api.ts b/src/features/shared/shared.api.ts
index 7629dfe..daa149e 100644
--- a/src/features/shared/shared.api.ts
+++ b/src/features/shared/shared.api.ts
@@ -114,7 +114,7 @@ export const deleteSharedPost = async (postId: number) =>
   await axios.delete<SuccessBaseDTO>(`/maru-api/shared/posts/studio/${postId}`);
 
 export const scrapPost = async (postId: number) =>
-  await axios.get<SuccessBaseDTO>(
+  await axios.post<SuccessBaseDTO>(
     `/maru-api/shared/posts/studio/${postId}/scrap`,
   );
 
@@ -152,3 +152,8 @@ export const deleteDormitorySharedPost = async (postId: number) =>
   await axios.delete<SuccessBaseDTO>(
     `/maru-api/shared/posts/dormitory/${postId}`,
   );
+
+export const scrapDormitoryPost = async (postId: number) =>
+  await axios.post<SuccessBaseDTO>(
+    `/maru-api/shared/posts/dormitory/${postId}/scrap`,
+  );
diff --git a/src/features/shared/shared.hook.ts b/src/features/shared/shared.hook.ts
index 5e9dffc..aa8a26a 100644
--- a/src/features/shared/shared.hook.ts
+++ b/src/features/shared/shared.hook.ts
@@ -10,6 +10,7 @@ import {
   getDormitorySharedPosts,
   getSharedPost,
   getSharedPosts,
+  scrapDormitoryPost,
   scrapPost,
 } from './shared.api';
 import {
@@ -435,3 +436,8 @@ export const useDeleteDormitorySharedPost = ({
     onSuccess,
     onError,
   });
+
+export const useScrapDormitorySharedPost = () =>
+  useMutation<AxiosResponse<SuccessBaseDTO>, FailureDTO, number>({
+    mutationFn: scrapDormitoryPost,
+  });

From db56fabe4ec6b1d4900bd831cc5dc56b533a5bb7 Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Thu, 9 May 2024 00:12:16 +0900
Subject: [PATCH 09/10] 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 598e005..024519d 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<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,17 +416,21 @@ 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);
                 }}
@@ -435,79 +438,85 @@ export function SharedPostPage({ postId }: { postId: number }) {
               />
             </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>
diff --git a/src/components/card/VitalSection.tsx b/src/components/card/VitalSection.tsx
index e33d93a..364da6a 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<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;
diff --git a/src/components/shared-posts/PostCard.tsx b/src/components/shared-posts/PostCard.tsx
index cea8bab..548ae82 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 (
     <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>
diff --git a/src/entities/shared-post/shared-post.type.ts b/src/entities/shared-post/shared-post.type.ts
index 7c8f73c..523864c 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 5317cdd..e232014 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 108c9a3..c2382f5 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 e0ba8eb..e809f5b 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;
     };
   };

From 2a5d97d456b88be19c1859116c720513388f7fc4 Mon Sep 17 00:00:00 2001
From: cjeongmin <cjeongmin27@gmail.com>
Date: Fri, 10 May 2024 15:10:54 +0900
Subject: [PATCH 10/10] feat: dummy data

---
 src/app/pages/main-page.tsx         | 30 +++++++++++----
 src/app/pages/shared-post-page.tsx  | 16 ++++----
 src/app/pages/shared-posts-page.tsx | 33 ++++++++++++-----
 src/features/profile/profile.api.ts |  8 ++--
 src/features/shared/shared.hook.ts  | 57 ++++++++++++++++++++++++++++-
 5 files changed, 113 insertions(+), 31 deletions(-)

diff --git a/src/app/pages/main-page.tsx b/src/app/pages/main-page.tsx
index 6fa40ae..c9df3f3 100644
--- a/src/app/pages/main-page.tsx
+++ b/src/app/pages/main-page.tsx
@@ -9,7 +9,7 @@ import { CircularButton } from '@/components';
 import { UserCard } from '@/components/main-page';
 import { useAuthActions, useAuthValue, useUserData } from '@/features/auth';
 import { getGeolocation } from '@/features/geocoding';
-import { useRecommendationMate } from '@/features/recommendation';
+import { useDummyUsers } from '@/features/shared';
 
 const styles = {
   container: styled.div`
@@ -94,11 +94,11 @@ export function MainPage() {
 
   const { data: userData } = useUserData(auth?.accessToken !== undefined);
 
-  const { data: recommendationMates } = useRecommendationMate({
-    memberId: auth?.user?.memberId ?? 'undefined',
-    cardType: 'mate',
-    enabled: auth?.accessToken != null,
-  });
+  // const { data: recommendationMates } = useRecommendationMate({
+  //   memberId: auth?.user?.memberId ?? 'undefined',
+  //   cardType: 'mate',
+  //   enabled: auth?.accessToken != null,
+  // });
 
   const [map, setMap] = useState<naver.maps.Map | null>(null);
 
@@ -147,6 +147,8 @@ export function MainPage() {
     }
   }, [userData, router, setAuthUserData]);
 
+  const users = useDummyUsers();
+
   return (
     <styles.container>
       <styles.map id="map">
@@ -168,14 +170,26 @@ export function MainPage() {
             onClick={handleScrollLeft}
           />
           <styles.mateRecommendation ref={scrollRef}>
-            {recommendationMates?.map(({ name, similarity, userId }) => (
+            {/* {recommendationMates?.map(({ name, similarity, userId }) => (
               <Link key={userId} href={`/profile/${userId}`}>
                 <UserCard
                   name={name}
                   percentage={Math.floor(similarity * 100)}
                 />
               </Link>
-            ))}
+            ))} */}
+            {users?.map(
+              ({
+                userId,
+                data: {
+                  authResponse: { name },
+                },
+              }) => (
+                <Link key={userId} href={`/profile/${userId}`}>
+                  <UserCard name={name} percentage={50} />
+                </Link>
+              ),
+            )}
           </styles.mateRecommendation>
           <CircularButton
             direction="right"
diff --git a/src/app/pages/shared-post-page.tsx b/src/app/pages/shared-post-page.tsx
index 024519d..60b4e04 100644
--- a/src/app/pages/shared-post-page.tsx
+++ b/src/app/pages/shared-post-page.tsx
@@ -376,6 +376,14 @@ export function SharedPostPage({ postId }: { postId: number }) {
   const auth = useAuthValue();
   const [, setMap] = useState<naver.maps.Map | null>(null);
 
+  const [selected, setSelected] = useState<
+    | {
+        memberId: string;
+        profileImage: string;
+      }
+    | undefined
+  >(undefined);
+
   const { isLoading, data: sharedPost } = useSharedPost({
     postId,
     enabled: auth?.accessToken !== undefined,
@@ -397,14 +405,6 @@ 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(
diff --git a/src/app/pages/shared-posts-page.tsx b/src/app/pages/shared-posts-page.tsx
index 2c9f3c2..a314707 100644
--- a/src/app/pages/shared-posts-page.tsx
+++ b/src/app/pages/shared-posts-page.tsx
@@ -17,8 +17,7 @@ import {
   type SharedPostsType,
 } from '@/entities/shared-posts-filter';
 import { useAuthActions, useAuthValue, useUserData } from '@/features/auth';
-import { useRecommendationMate } from '@/features/recommendation';
-import { usePaging, useSharedPosts } from '@/features/shared';
+import { useDummyUsers, usePaging, useSharedPosts } from '@/features/shared';
 import { type GetSharedPostsDTO } from '@/features/shared/';
 
 const styles = {
@@ -120,7 +119,7 @@ export function SharedPostsPage() {
     useState<GetSharedPostsDTO | null>(null);
   const { setAuthUserData } = useAuthActions();
 
-  const { filter, derivedFilter, reset: resetFilter } = useSharedPostsFilter();
+  const { derivedFilter, reset: resetFilter } = useSharedPostsFilter();
   const { data: userData } = useUserData(auth?.accessToken != null);
 
   const {
@@ -143,11 +142,11 @@ export function SharedPostsPage() {
     page: page - 1,
   });
 
-  const { data: recommendationMates } = useRecommendationMate({
-    memberId: auth?.user?.memberId ?? 'undefined',
-    cardType: filter.cardType ?? 'mate',
-    enabled: auth?.accessToken != null && selected === 'homeless',
-  });
+  // const { data: recommendationMates } = useRecommendationMate({
+  //   memberId: auth?.user?.memberId ?? 'undefined',
+  //   cardType: filter.cardType ?? 'mate',
+  //   enabled: auth?.accessToken != null && selected === 'homeless',
+  // });
 
   useEffect(() => {
     resetFilter();
@@ -172,6 +171,8 @@ export function SharedPostsPage() {
     }
   }, [userData, router, setAuthUserData]);
 
+  const users = useDummyUsers();
+
   return (
     <styles.container>
       <styles.SharedPostsMenu selected={selected} handleSelect={setSelected} />
@@ -254,11 +255,23 @@ export function SharedPostsPage() {
         </>
       ) : (
         <styles.cards>
-          {recommendationMates?.map(({ userId, name, similarity }) => (
+          {/* {recommendationMates?.map(({ userId, name, similarity }) => (
             <Link href={`/profile/${userId}`} key={userId}>
               <UserCard name={name} percentage={Math.floor(similarity * 100)} />
             </Link>
-          ))}
+          ))} */}
+          {users?.map(
+            ({
+              userId,
+              data: {
+                authResponse: { name },
+              },
+            }) => (
+              <Link key={userId} href={`/profile/${userId}`}>
+                <UserCard name={name} percentage={50} />
+              </Link>
+            ),
+          )}
         </styles.cards>
       )}
     </styles.container>
diff --git a/src/features/profile/profile.api.ts b/src/features/profile/profile.api.ts
index 3c5a523..404ea00 100644
--- a/src/features/profile/profile.api.ts
+++ b/src/features/profile/profile.api.ts
@@ -10,7 +10,7 @@ import {
 
 export const postUserProfile = async (memberId: string) => {
   const res = await axios.post<PostUserProfileDTO>(`/maru-api/profile`, {
-    memberId: memberId,
+    memberId,
   });
 
   return res.data;
@@ -49,7 +49,7 @@ export const getFollowingListData = async () =>
 export const postFollowUser = async (memberId: string) => {
   await axios
     .post(`/maru-api/profile/follow`, {
-      memberId: memberId,
+      memberId,
     })
     .then(res => res.data);
 };
@@ -57,14 +57,14 @@ export const postFollowUser = async (memberId: string) => {
 export const postUnfollowUser = async (memberId: string) => {
   await axios
     .post(`/maru-api/profile/unfollow`, {
-      memberId: memberId,
+      memberId,
     })
     .then(res => res.data);
 };
 
 export const postSearchUser = async (email: string) => {
   const res = await axios.post<PostSearchDTO>(`/maru-api/profile/search`, {
-    email: email,
+    email,
   });
 
   return res.data;
diff --git a/src/features/shared/shared.hook.ts b/src/features/shared/shared.hook.ts
index c2382f5..6a0621b 100644
--- a/src/features/shared/shared.hook.ts
+++ b/src/features/shared/shared.hook.ts
@@ -14,12 +14,14 @@ import {
   scrapPost,
 } from './shared.api';
 import {
-  type ImageFile,
   type CreateSharedPostProps,
   type GetSharedPostsProps,
+  type ImageFile,
   type SelectedExtraOptions,
   type SelectedOptions,
 } from './shared.type';
+import { postUserProfile } from '../profile/profile.api';
+import { type PostUserProfileDTO } from '../profile/profile.dto';
 
 import { useAuthValue } from '@/features/auth';
 import { type NaverAddress } from '@/features/geocoding';
@@ -435,3 +437,56 @@ export const useScrapDormitorySharedPost = () =>
   useMutation<AxiosResponse<SuccessBaseDTO>, FailureDTO, number>({
     mutationFn: scrapDormitoryPost,
   });
+
+const userIds = [
+  'naver_0',
+  'kakao_1',
+  'kakao_2',
+  'naver_3',
+  'kakao_4',
+  'naver_5',
+  'kakao_6',
+  'kakao_7',
+  'kakao_8',
+  'naver_9',
+  'naver_10',
+  'naver_11',
+  'naver_12',
+  'naver_13',
+  'kakao_14',
+  'naver_15',
+  'kakao_16',
+  'naver_17',
+  'naver_18',
+  'kakao_19',
+];
+
+export const useDummyUsers = () => {
+  const [users, setUsers] =
+    useState<Array<PostUserProfileDTO & { userId: string }>>();
+
+  useEffect(() => {
+    (async () => {
+      const userData = await Promise.allSettled(
+        userIds.map(async userId => {
+          const result = await postUserProfile(userId);
+          return { ...result, userId };
+        }),
+      );
+
+      setUsers(
+        userData.reduce<Array<PostUserProfileDTO & { userId: string }>>(
+          (prev, curr) => {
+            if (curr.status === 'fulfilled') {
+              prev.push({ ...curr.value, userId: curr.value.userId });
+            }
+            return prev;
+          },
+          [],
+        ),
+      );
+    })();
+  }, []);
+
+  return users;
+};