feat: connect api to hangout detail

src/apis/hangout.ts

@@ -35,7 +35,7 @@ export const api_getHangouts = getApi('GET', '/api/hangout', {
         members: {
           id: number;
           email: string;
-          nickname: string;
+          name: string;
           profileImg: string;
           status: string;
         }[];

src/apis/hangoutDetail.ts

@@ -0,0 +1,18 @@
+import { z } from 'zod';
+import { getApi } from '@/utils/api';
+
+const BASE_QUERY_KEY = ['hangout'];
+
+// TODO type
+/** 약속 상세 정보를 조회하는 API */
+export const api_getHangoutDetail = getApi('GET', '/api/hangout', {
+  needToLogin: true,
+  requestSchema: z.object({
+    pathParams: z.tuple([z.number().describe('hangout id')]),
+  }),
+  getQueryKey: (requestInput?) =>
+    requestInput
+      ? [...BASE_QUERY_KEY, 'single', requestInput.pathParams[0]]
+      : [...BASE_QUERY_KEY, 'single'],
+  _resultType: {} as any,
+});

src/components/common/HangoutBox/HangoutBox.stories.tsx

@@ -15,10 +15,12 @@ export const Default: Story = {
     location: '숭실대 정보관 204호',
     members: [
       {
+        id: 1,
         name: '공소나',
         profileImg: 'https://img.freepik.com/free-icon/user_318-159711.jpg',
       },
       {
+        id: 2,
         name: '공소나2',
         profileImg: 'https://img.freepik.com/free-icon/user_318-159711.jpg',
       },
@@ -33,10 +35,12 @@ export const HangoutBoxWithShadow: Story = {
     location: '숭실대 정보관 204호',
     members: [
       {
+        id: 1,
         name: '공소나',
         profileImg: 'https://img.freepik.com/free-icon/user_318-159711.jpg',
       },
       {
+        id: 2,
         name: '공소나2',
         profileImg: 'https://img.freepik.com/free-icon/user_318-159711.jpg',
       },
@@ -52,10 +56,12 @@ export const NotAcceptedHangoutBox: Story = {
     location: '숭실대 정보관 204호',
     members: [
       {
+        id: 1,
         name: '공소나',
         profileImg: 'https://img.freepik.com/free-icon/user_318-159711.jpg',
       },
       {
+        id: 2,
         name: '공소나2',
         profileImg: 'https://img.freepik.com/free-icon/user_318-159711.jpg',
       },

src/components/common/HangoutBox/HangoutBox.tsx

@@ -60,8 +60,8 @@ const HangoutBox = ({
         <div className={styles.memberInfoWrap}>
           {members.map((member) => (
             <UserImage
-              key={member.nickname}
-              src={member.profileImg}
+              key={member.id}
+              src={member.name}
               size={22}
               className={styles.memberImage}
             />

src/components/common/SelectUserList/SelectUserList.stories.tsx

@@ -9,12 +9,12 @@ export default {
 
 type Story = StoryObj<typeof SelectUserList>;
 
-export const WithFriend: Story = {
-  args: {
-    type: 'friend',
-    list: userDummydata,
-  },
-};
+// export const WithFriend: Story = {
+//   args: {
+//     type: 'friend',
+//     list: userDummydata,
+//   },
+// };
 
 export const WithGroup: Story = {
   args: {

src/components/common/SelectUserList/SelectUserList.tsx

@@ -36,13 +36,14 @@ const SelectUserList = ({
           key={id}
           onClick={() => onSelect?.(id)}
         >
-          {type === 'friend' ? (
+          {type === 'friend' && (
             <Profile
               type="user"
               name={name}
               profileImg={profileImg as string}
             />
-          ) : (
+          )}
+          {type === 'group' && (
             <Profile
               type="group"
               name={name}

src/components/hangout/detail/HangoutDetailContent/HangoutInfoList/HangoutInfoList.tsx

@@ -2,7 +2,6 @@ import { getHourAndMinute, getMonthAndDay } from '@/utils/date';
 import { HangoutInfoType } from '@/types/hangout';
 import useKakaoMap from '@/hooks/useKakaoMap';
 import UserImage from '@/components/common/UserImage';
-import { userDummydata } from '@/dummyData';
 
 import * as styles from '../HangoutDetailContent.css';
 
@@ -18,24 +17,28 @@ interface HangoutInfoListProps {
 }
 
 const HangoutInfoList = ({ infos }: HangoutInfoListProps) => {
-  const { location, name } = infos;
-  const mapContainerRef = useKakaoMap(37.4963, 126.9569);
+  const { location, members, groupName, latitude, longitude } = infos;
+
+  const mapContainerRef = useKakaoMap(Number(latitude), Number(longitude));
+
   return (
     <div className={styles.infoListWrapper}>
       <InfoSection
         label="일시"
         data={`${getMonthAndDay(new Date())} ${getHourAndMinute(new Date())}`}
       />
+      {latitude && longitude && (
+        <div>
+          <InfoSection label="위치" data={location} />
+          <div className={styles.mapContainer} ref={mapContainerRef} />
+        </div>
+      )}
       <div>
-        <InfoSection label="위치" data={location} />
-        <div className={styles.mapContainer} ref={mapContainerRef} />
-      </div>
-      <div>
-        <InfoSection label="그룹" data={name} />
+        <InfoSection label="그룹" data={groupName || ''} />
         <div className={styles.groupMembersWrap}>
-          {userDummydata.map((user) => (
+          {members?.map((user) => (
             <div key={user.name} className={styles.member}>
-              <UserImage src={user.profileImg} />
+              <UserImage src={user.profileImg || ''} />
               <div className={styles.userName}>{user.name}</div>
             </div>
           ))}

src/components/home/HomeContent/ScheduleList/ScheduleList.tsx

@@ -36,8 +36,8 @@ const ScheduleList = () => {
           lat: item.latitude,
           friendList: item.clubMemberInfo.members.map((member) => ({
             id: member.id,
-            name: member.nickname,
-            img: member.profileImg,
+            name: member.name,
+            profileImg: member.profileImg,
           })),
         })),
     },

src/dummyData.ts

@@ -194,25 +194,27 @@ export const ScheduleDummyData: ScheduleInfoType[] = [
       {
         id: 2,
         statusMessage: null,
-        img: '1',
+        profileImg: '1',
         name: '일인자',
       },
       {
         id: 3,
         statusMessage: null,
-        img: '2',
+        profileImg: '2',
         name: '이인자',
       },
       {
         id: 1,
         statusMessage: null,
-        img: 'http://k.kakaocdn.net/dn/bFe99u/btsmd0qfsWk/vLkfmNU6qbO06IDDLxFKkk/img_640x640.jpg',
+        profileImg:
+          'http://k.kakaocdn.net/dn/bFe99u/btsmd0qfsWk/vLkfmNU6qbO06IDDLxFKkk/img_640x640.jpg',
         name: '박가현',
       },
       {
         id: 5,
         statusMessage: null,
-        img: 'http://k.kakaocdn.net/dn/cyE47l/btsoEpQApLy/SH9WMN9GuJUYHwX1FlRLsK/img_640x640.jpg',
+        profileImg:
+          'http://k.kakaocdn.net/dn/cyE47l/btsoEpQApLy/SH9WMN9GuJUYHwX1FlRLsK/img_640x640.jpg',
         name: '이정민',
       },
     ],

src/pages/hangout/hangoutDetail.tsx

@@ -1,17 +1,64 @@
+import { useParams, useNavigate } from 'react-router-dom';
+import { api_getHangoutDetail } from '@/apis/hangoutDetail';
+import useApiQuery from '@/hooks/useApiQuery';
 import HangoutDetailContent from '@/components/hangout/detail/HangoutDetailContent';
-import { hangoutsDummydata } from '@/dummyData';
+import { HangoutInfoType } from '@/types/hangout';
+import PageSubHeader from '@/components/common/PageSubHeader';
 
 const HangoutDetailTab = () => {
+  const navigate = useNavigate();
+  const { hid } = useParams();
+
+  const hangoutId = Number(hid);
+
+  const { data: apiData } = useApiQuery(api_getHangoutDetail, {
+    pathParams: [hangoutId],
+  });
+
+  const data = apiData?.data;
+
+  const membersData = data?.clubMemberInfo.members?.map((member: any) => ({
+    id: member.id,
+    name: member.name,
+    profileImg: member.profileImg,
+    email: member.email,
+    status: member.status,
+  }));
+
+  const hangoutInfo: HangoutInfoType = {
+    id: data?.id,
+    name: data?.name,
+    date: new Date(data?.startDate),
+    location: data?.placeName,
+    members: membersData,
+    groupName: data?.clubMemberInfo.clubName,
+    groupId: data?.clubMemberInfo.clubId,
+    isAccepted: data?.approved,
+    latitude: data?.latitude,
+    longitude: data?.longitude,
+  };
+
   const buttonInfo = [
     { label: '약속 수정', onClick: () => {} },
     { label: '취소 요청', onClick: () => {} },
   ];
 
+  const mainTitle = hangoutInfo.members ? '약속' : '일정';
+
+  const onMovePrevPage = () => {
+    navigate('/');
+  };
+
   return (
-    <HangoutDetailContent
-      hangoutInfo={hangoutsDummydata[0]}
-      footerButtonInfo={buttonInfo}
-    />
+    <>
+      <div style={{ margin: '0 -20px' }}>
+        <PageSubHeader title={mainTitle} goBefore={onMovePrevPage} />
+      </div>
+      <HangoutDetailContent
+        hangoutInfo={hangoutInfo}
+        footerButtonInfo={buttonInfo}
+      />
+    </>
   );
 };
 

src/pages/hangout/newHangout.tsx

@@ -91,8 +91,8 @@ const NewHangoutTab = () => {
     // 장소 선택 데이터
     const placeName = data.selectLocation?.placeInfo.place_name;
     const address = data.selectLocation?.placeInfo.address_name;
-    const latitude = Number(data.selectLocation?.placeInfo.y);
-    const longitude = Number(data.selectLocation?.placeInfo.x);
+    const latitude = data.selectLocation?.placeInfo.y;
+    const longitude = data.selectLocation?.placeInfo.x;
 
     // 약속 이름
     const name = data.selectLocation?.hangoutName;

src/types/hangout.ts

@@ -1,11 +1,21 @@
-// TODO 멤버 타입 정의
+export interface MemberType {
+  id: number;
+  name: string;
+  profileImg?: string;
+  email?: string;
+  status?: string;
+}
 export interface HangoutInfoType {
   id: number;
   name: string;
   date: Date;
   location: string;
+  latitude?: string;
+  longitude?: string;
   /** 멤버 정보가 없을 경우 `약속`이 아닌 `일정` 정보를 담고 있다고 간주  */
-  members?: any[];
+  members?: MemberType[];
+  groupName?: string;
+  groupId?: number;
   /** 약속 정보를 담은 컴포넌트인 경우, 사용자가 현재 약속을 수락했는지에 대한 여부  */
   isAccepted?: boolean;
 }

src/types/schedule.ts

@@ -6,7 +6,7 @@ export interface ScheduleType {
 export interface FriendType {
   id: number;
   name: string;
-  img: string;
+  profileImg?: string;
   statusMessage?: string | null;
 }