Merge branch 'main' of https://github.com/bsideproject/KoLiving_FE

bsideproject · Nov 1, 2023 · e649c60 · e649c60
2 parents bb595ab + 98ad250
commit e649c60
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 22 deletions.
diff --git a/components/RoomCard/RoomCard.tsx b/components/RoomCard/RoomCard.tsx
@@ -33,13 +33,15 @@ const UserInfo = ({ userInfo }: UserInfoProps) => {
   const age = formatAge(userInfo.birthDate);
 
   const handleUserClick = () => {
+    /*
     router.push(
       {
         pathname: '/userInfo',
         query: { data: JSON.stringify(userInfo) },
       },
       '/userInfo'
     );
+    */
   };
 
   return (
@@ -88,7 +90,8 @@ const Footer = ({ room, isLikedRooms }: CardProps) => {
   const [isLiked, setIsLiked] = useState(false || isLikedRooms);
   const handleLikeClick = async () => {
     try {
-      !isLiked ? await makeLikedRooms(room?.id) : await makeDisLikedRooms(room?.id);
+      // !isLiked ? await makeLikedRooms(room?.id) : await makeDisLikedRooms(room?.id);
+      await makeLikedRooms(room?.id);
       setIsLiked(!isLiked);
     } catch (error) {
       console.error('[ERROR] in Liked Clicked', error);

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -1,3 +1,4 @@
+/* eslint-disable no-restricted-syntax */
 import React, { useEffect, useRef, useState } from 'react';
 import 'tailwindcss/tailwind.css';
 import RoomCard from '@/components/RoomCard/RoomCard';
@@ -11,8 +12,7 @@ import useModal from '@/hooks/useModal.ts';
 import Filter from '@/components/Filter/Filter.tsx';
 import { getRooms } from '@/api/room';
 import isEmpty from 'lodash-es/isEmpty';
-import { getProfile } from '@/api/userInfo';
-import { UserInfoProps } from '@/context/UserInfoProvider.tsx';
+import { getLikedRooms } from '@/api/userInfo';
 
 type HomeProps = NextPage & {
   getLayout: (page: React.ReactElement, ctx: NextPageContext) => React.ReactNode;
@@ -38,16 +38,17 @@ const defaultFilters = Object.values(FILTER_LABEL).map((value) => {
 
 function Home() {
   const [rooms, setRooms] = useState<RoomSearch[]>([]);
-  const [profile, setProfile] = useState<UserInfoProps>();
   const [filters, setFilters] = useState<{ selected: boolean; value: string }[]>(defaultFilters);
   const [clickedChip, setClickedChip] = useState(-1);
   const router = useRouter();
   const { openModal, closeModal } = useModal();
   const [page, setPage] = useState(0);
   const [totalElements, setTotalElements] = useState(0);
   const [searchParams, setSearchParams] = useState<Record<string, string>>({});
+  const [likedRoom, setLikedRoom] = useState([]);
   // TODO: 전체 페이지보다 크면 페이징 처리 안되도록 수정
   // TODO : ModalLayer 로 로그인한 사용자의 Context 생성 필요
+  // eslint-disable-next-line consistent-return
   const selectRooms = async () => {
     try {
       const data = await getRooms({
@@ -56,6 +57,8 @@ function Home() {
       });
       setRooms(data?.content || []);
       setTotalElements(data?.totalElements || 0);
+
+      return data?.content;
     } catch (error) {
       console.error(error);
     }
@@ -89,16 +92,6 @@ function Home() {
     setSearchParams(childData);
     setRooms([]);
   };
-  const selectProfile = async () => {
-    try {
-      const data = await getProfile();
-      if (data != null) {
-        setProfile(data);
-      }
-    } catch (error) {
-      console.error(error);
-    }
-  };
   const openFilterPopup = () => {
     openModal({
       props: {
@@ -137,8 +130,18 @@ function Home() {
   // 최초 접근 시 Room 정보 조회
   useEffect(() => {
     (async () => {
-      await selectRooms();
-      await selectProfile();
+      const resultRooms = await selectRooms();
+      const resultLikedRooms = (await getLikedRooms(page))?.content;
+      const roomIds = [];
+      if (resultRooms) {
+        for (const room of resultRooms) {
+          const roomId = room?.id;
+          if (resultLikedRooms && resultLikedRooms.some((likedRoom) => likedRoom?.id === roomId)) {
+            roomIds.push(roomId);
+          }
+        }
+      }
+      // await selectProfile();
       if (target?.current) {
         const observer = new IntersectionObserver(callback, options);
         observer.observe(target.current);
@@ -237,7 +240,7 @@ function Home() {
       <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max z-20 border-t-[1px] border-g2">
         <div className="w-full">
           <div className="mb-[13px] space-x-[8px] max-w-max">
-            <Nav profile={profile} />
+            <Nav />
           </div>
         </div>
       </div>

diff --git a/pages/userInfo/index.tsx b/pages/userInfo/index.tsx
@@ -1,18 +1,36 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
 import { Nav, ProfileCard } from '@/components/index.tsx';
 import { useRouter } from 'next/router';
+import { getProfile } from '@/api/userInfo';
+import { UserInfoProps } from '@/context/UserInfoProvider.tsx';
 
 interface UserProfileProps {
   imgSrc: string;
 }
 
 export default function UserProfile({ imgSrc }: UserProfileProps) {
-  const router = useRouter();
-  const { query } = router;
-  const userInfo = query.data ? JSON.parse(query.data as string) : {};
+  const [profile, setProfile] = useState<UserInfoProps>();
+  const selectProfile = async () => {
+    try {
+      const data = await getProfile();
+      if (data != null) {
+        setProfile(data);
+      }
+    } catch (error) {
+      console.error(error);
+    }
+  };
+
+  useEffect(() => {
+    (async () => {
+      await selectProfile();
+    })();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, []);
+
   return (
     <>
-      <ProfileCard imageSrc={userInfo.imageFile?.path || imgSrc} userInfo={userInfo} />
+      {profile && <ProfileCard imageSrc={profile?.imageFile?.path || imgSrc} userInfo={profile} />}
       <div className="mt-[83px] fixed bottom-[-15px] w-full overflow-x-hidden left-[50%] translate-x-[-50%] px-[20px] max-w-max border-t-[1px] border-g2">
         <div className="w-full">
           <div className="mb-[13px] space-x-[8px] max-w-max">