[feat] Liked 등록 및 조회 1차 수정

bsideproject · Oct 23, 2023 · 886fabc · 886fabc
1 parent d7c688e
commit 886fabc
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 16 deletions.
diff --git a/api/userInfo.ts b/api/userInfo.ts
@@ -14,7 +14,7 @@ export const getProfile = async () => {
 export const getLikedRooms = async (page: number) => {
   let result;
   try {
-    result = await fetchData<ReturnData<RoomSearch[]>>(`/api/v1/my/rooms/like/${page}`, {
+    result = await fetchData<ReturnData<RoomSearch[]>>(`/api/v1/my/rooms/like/`, {
       method: 'GET',
       headers: {
         'Content-Type': 'application/json',
@@ -26,3 +26,12 @@ export const getLikedRooms = async (page: number) => {
   }
   return result;
 };
+
+export const makeLikedRooms = async (id: number) => {
+    return await fetchData(`/api/v1/rooms/${id}/liked`, {
+      method: 'PUT',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+    });
+}
diff --git a/components/RoomCard/RoomCard.tsx b/components/RoomCard/RoomCard.tsx
@@ -10,6 +10,7 @@ import Camera from '@/public/icons/camera.svg';
 import styles from '@/pages/room/room.module.scss';
 import { useRouter } from 'next/router';
 import Card from '../Card/Card';
+import { makeLikedRooms } from '@/api/userInfo';
 
 interface CardProps {
   room: RoomSearch;
@@ -83,9 +84,13 @@ const Photo = ({ photos, onClick }: PhotoProps) => {
 const Footer = ({ room }: CardProps) => {
   const roomType = room.roomInfo.roomType === ROOM_TYPE.ONE_ROOM ? '1bed flats' : '';
   const [isLiked, setIsLiked] = useState(false);
-
-  const handleLikeClick = () => {
-    setIsLiked(!isLiked);
+  const handleLikeClick = async () => {
+    try {
+      await makeLikedRooms(room?.id);
+      setIsLiked(!isLiked);
+    } catch (error) {
+      console.error('[ERROR] in Liked Clicked', error);
+    }
   };
 
   return (

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -7,9 +7,7 @@ import RoomListLayout from '@/components/layouts/RoomListLayout.tsx';
 import FilterImg from '@/public/icons/filter.svg';
 import { useRouter } from 'next/router';
 import { Chip, Typography, Nav } from '@/components/index.tsx';
-import { FilterType } from '@/public/types/filter';
 import useModal from '@/hooks/useModal.ts';
-import { FieldValues } from 'react-hook-form';
 import Filter from '@/components/Filter/Filter.tsx';
 import { getRooms } from '@/api/room';
 import isEmpty from 'lodash-es/isEmpty';

diff --git a/pages/liked/index.tsx b/pages/liked/index.tsx
@@ -10,6 +10,7 @@ import { getLikedRooms } from '@/api/userInfo';
 import FilterImg from '@/public/icons/filter.svg';
 import Filter from '@/components/Filter/Filter.tsx';
 import isEmpty from 'lodash-es/isEmpty';
+import RoomCard from '@/components/RoomCard/RoomCard';
 // TODO 데이터가 구체화되면 바꿔줘야함
 interface MyPostingProps {
   roomInfo: any | null;
@@ -63,13 +64,15 @@ export default function Liked({ roomInfo }: MyPostingProps) {
       try {
         const result = await getLikedRooms(page);
         if (result?.error) {
-          // 비동기 함수 내부에서 에러를 처리하고 적절한 값을 반환하도록 구현되었을 때
           setRooms([]);
+        } else {
+           setRooms((prevRooms) => [...prevRooms, ...(result?.content || [])]);
+           setTotalElements(result?.totalElements || 0);
         }
-        if (target?.current) {
-          const observer = new IntersectionObserver(callback, options);
-          observer.observe(target.current);
-        }
+        // if (target?.current) {
+        //   const observer = new IntersectionObserver(callback, options);
+        //   observer.observe(target.current);
+        // }
       } catch (error) {
         setRooms([]);
       }
@@ -126,8 +129,7 @@ export default function Liked({ roomInfo }: MyPostingProps) {
     const getChildData = async (childData: Record<string, string>) => {
       makeFilters(childData);
       setPage(0);
-      setSearchParams(childData);
-      setRooms([]);
+      //setRooms([]);
     };
     const openFilterPopup = () => {
       openModal({
@@ -143,6 +145,9 @@ export default function Liked({ roomInfo }: MyPostingProps) {
     const handleChipClick = (label: React.SetStateAction<string>) => {
       setClickedChip(label);
     };
+    const handleCardClick = (id: number) => {
+      router.push(`/room/${id}`);
+    };
     const handleOptionRemove = (option: string, index: number) => {
       const resultFilters = filters.filter((item) => item !== option);
       setFilters(() => [...resultFilters]);
@@ -198,12 +203,12 @@ export default function Liked({ roomInfo }: MyPostingProps) {
         <Typography variant="body" customClassName="text-left font-bold text-[16px] text-g7">
           There are <span className="text-r1">{`${totalElements} rooms`}</span> in total!
         </Typography>
-        {/* {rooms.map((room, idx) => (
+        {rooms.map((room, idx) => (
           <div className={`mt-[20px] ${rooms.length - 1 === idx ? 'mb-[83px]' : ''}`} key={`room-${idx}`}>
             <RoomCard room={room} onClick={() => handleCardClick(room.id)} />
           </div>
-        ))} */}
-        {/* <div ref={target} /> */}
+        ))} 
+         <div ref={target} /> 
         <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max">
           <div className="w-full">
             <div className="mb-[13px] space-x-[8px] max-w-max">