Merge pull request kookmin-sw#93 from capstone-maru/dev

feat: 테스트
kookmin-sw · May 21, 2024 · 019acaf · 019acaf
2 parents a97c8f3 + 85b873b
commit 019acaf
Show file tree

Hide file tree

Showing 19 changed files with 240 additions and 115 deletions.
diff --git a/public/House with garden.svg b/public/House with garden.svg
diff --git a/src/app/pages/mobile/mobile-profile-page.tsx b/src/app/pages/mobile/mobile-profile-page.tsx
@@ -1,15 +1,16 @@
 'use client';
 
+import axios from 'axios';
 import Link from 'next/link';
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 
 import { Bookmark } from '@/components';
 import { useAuthValue, useUserData } from '@/features/auth';
 import {
+  type GetFollowingListDTO,
   useCertification,
   useFollowUser,
-  useFollowingListData,
   useGetCode,
   useUnfollowUser,
   useUserProfile,
@@ -312,10 +313,30 @@ function UserInfo({
 }: UserProfileInfoProps) {
   const [isChecked, setIsChecked] = useState(false);
 
-  const followList = useFollowingListData();
-  const [isMarked, setIsMarked] = useState(
-    followList.data?.data.followingList[memberId] != null,
-  );
+  const [followList, setFollowList] = useState<Record<string, string[]>>();
+  const [isMarked, setIsMarked] = useState(false);
+
+  useEffect(() => {
+    if (followList?.[memberId] != null) {
+      setIsMarked(true);
+    } else setIsMarked(false);
+  }, [followList]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await axios.get<GetFollowingListDTO>(
+          '/maru-api/profile/follow',
+        );
+        const followListData = res.data.data.followingList;
+        setFollowList(followListData);
+        return true;
+      } catch (error) {
+        console.error(error);
+        return false;
+      }
+    })();
+  }, [setIsMarked]);
 
   const toggleSwitch = () => {
     setIsChecked(!isChecked);

diff --git a/src/app/pages/mobile/mobile-shared-post-page.tsx b/src/app/pages/mobile/mobile-shared-post-page.tsx
@@ -6,7 +6,7 @@ import styled from 'styled-components';
 
 import { Bookmark, CircularProfileImage } from '@/components';
 import { ImageGrid } from '@/components/shared-post-page';
-import { useAuthValue, useUserData } from '@/features/auth';
+import { useAuthValue } from '@/features/auth';
 import { useCreateChatRoom } from '@/features/chat';
 import { fromAddrToCoord } from '@/features/geocoding';
 import { useFollowUser, useUnfollowUser } from '@/features/profile';
@@ -445,15 +445,6 @@ export function MobileSharedPostPage({
       enabled: type === 'dormitory' && auth?.accessToken != null,
     });
 
-  const { data: userData } = useUserData(auth?.accessToken != null);
-  const [userId, setUserId] = useState<string>('');
-
-  useEffect(() => {
-    if (userData != null) {
-      setUserId(userData.memberId);
-    }
-  }, [userData]);
-
   useEffect(() => {
     if (sharedPost?.data.address.roadAddress != null) {
       fromAddrToCoord({ query: sharedPost?.data.address.roadAddress }).then(
@@ -474,16 +465,7 @@ export function MobileSharedPostPage({
     }
   }, [sharedPost]);
 
-  const [roomName, setRoomName] = useState<string>('');
-
-  useEffect(() => {
-    if (sharedPost !== undefined) {
-      setRoomName(sharedPost.data.publisherAccount.nickname);
-    }
-  }, [sharedPost]);
-
-  const members = [userId];
-  const { mutate: chattingMutate } = useCreateChatRoom(roomName, members);
+  const { mutate: chattingMutate } = useCreateChatRoom();
 
   const isLoading = useMemo(
     () =>
@@ -574,7 +556,12 @@ export function MobileSharedPostPage({
                   </div>
                   <styles.chattingButton
                     onClick={() => {
-                      chattingMutate();
+                      if (selected == null) return;
+
+                      chattingMutate({
+                        roomName: selected.nickname,
+                        members: [selected.memberId],
+                      });
                     }}
                   >
                     채팅

diff --git a/src/app/pages/profile-page.tsx b/src/app/pages/profile-page.tsx
@@ -1,15 +1,16 @@
 'use client';
 
+import axios from 'axios';
 import Link from 'next/link';
 import React, { useState, useEffect } from 'react';
 import styled from 'styled-components';
 
 import { Bookmark } from '@/components';
 import { useAuthValue, useUserData } from '@/features/auth';
 import {
+  type GetFollowingListDTO,
   useCertification,
   useFollowUser,
-  useFollowingListData,
   useGetCode,
   useUnfollowUser,
   useUserProfile,
@@ -443,10 +444,30 @@ function UserInfo({
 }: UserProfileInfoProps) {
   const [isChecked, setIsChecked] = useState(false);
 
-  const followList = useFollowingListData();
-  const [isMarked, setIsMarked] = useState(
-    followList.data?.data.followingList[memberId] != null,
-  );
+  const [followList, setFollowList] = useState<Record<string, string[]>>();
+  const [isMarked, setIsMarked] = useState(false);
+
+  useEffect(() => {
+    if (followList?.[memberId] != null) {
+      setIsMarked(true);
+    } else setIsMarked(false);
+  }, [followList]);
+
+  useEffect(() => {
+    (async () => {
+      try {
+        const res = await axios.get<GetFollowingListDTO>(
+          '/maru-api/profile/follow',
+        );
+        const followListData = res.data.data.followingList;
+        setFollowList(followListData);
+        return true;
+      } catch (error) {
+        console.error(error);
+        return false;
+      }
+    })();
+  }, [setIsMarked]);
 
   const toggleSwitch = () => {
     setIsChecked(!isChecked);

diff --git a/src/app/pages/shared-post-page.tsx b/src/app/pages/shared-post-page.tsx
@@ -2,12 +2,13 @@
 
 import { useRouter } from 'next/navigation';
 import { useEffect, useMemo, useRef, useState } from 'react';
+import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
 
 import { Bookmark, CircularProfileImage } from '@/components';
 import { CardToggleButton, ImageGrid } from '@/components/shared-post-page';
-import { useAuthValue, useUserData } from '@/features/auth';
-import { useCreateChatRoom } from '@/features/chat';
+import { useAuthValue } from '@/features/auth';
+import { chatOpenState, useCreateChatRoom } from '@/features/chat';
 import { fromAddrToCoord } from '@/features/geocoding';
 import { useFollowUser, useUnfollowUser } from '@/features/profile';
 import {
@@ -496,15 +497,6 @@ export function SharedPostPage({
       enabled: type === 'dormitory' && auth?.accessToken != null,
     });
 
-  const { data: userData } = useUserData(auth?.accessToken != null);
-  const [userId, setUserId] = useState<string>('');
-
-  useEffect(() => {
-    if (userData != null) {
-      setUserId(userData.memberId);
-    }
-  }, [userData]);
-
   useEffect(() => {
     if (sharedPost?.data.address.roadAddress != null) {
       fromAddrToCoord({ query: sharedPost?.data.address.roadAddress }).then(
@@ -525,15 +517,9 @@ export function SharedPostPage({
     }
   }, [sharedPost]);
 
-  const [roomName, setRoomName] = useState<string>('');
+  const [, setIsChatOpen] = useRecoilState(chatOpenState);
 
-  useEffect(() => {
-    if (sharedPost !== undefined) {
-      setRoomName(sharedPost.data.publisherAccount.nickname);
-    }
-  }, [sharedPost]);
-
-  const { mutate: chattingMutate } = useCreateChatRoom(roomName, [userId]);
+  const { mutate: chattingMutate } = useCreateChatRoom();
 
   const isLoading = useMemo(
     () =>
@@ -754,7 +740,16 @@ export function SharedPostPage({
             <styles.buttons>
               <styles.chattingButton
                 onClick={() => {
-                  chattingMutate();
+                  if (selected == null) return;
+
+                  chattingMutate({
+                    roomName: selected.nickname,
+                    members: [selected.memberId],
+                  });
+
+                  setTimeout(() => {
+                    setIsChatOpen(true);
+                  }, 200);
                 }}
               >
                 채팅하기

diff --git a/src/components/FloatingChatting.tsx b/src/components/FloatingChatting.tsx
@@ -4,13 +4,14 @@ import { Client } from '@stomp/stompjs';
 import axios from 'axios';
 import { useRouter } from 'next/navigation';
 import React, { useEffect, useState } from 'react';
+import { useRecoilState } from 'recoil';
 import styled from 'styled-components';
 
 import { ChattingList } from './chat/ChattingList';
 import { ChattingRoom } from './chat/ChattingRoom';
 
 import { useAuthValue, useUserData } from '@/features/auth';
-import { type GetChatRoomDTO } from '@/features/chat';
+import { chatOpenState, type GetChatRoomDTO } from '@/features/chat';
 import { useIsMobile } from '@/shared/mobile';
 
 const styles = {
@@ -246,7 +247,7 @@ function FloatingChattingBox() {
   }, [message, isChatRoomOpen]);
 
   // const roomName = 'test2';
-  // const members = ['naver_htT4VdDRPKqGqKpnncpa71HCA4CVg5LdRC1cWZhCnF8'];
+  // const members = ['naver_hW_CDCYdU3NNTQWq_TV_MkpldnMZI6fOD1mnPo-V1NE'];
   // const { mutate: chattingCreate } = useCreateChatRoom(roomName, members);
 
   return (
@@ -269,12 +270,12 @@ function FloatingChattingBox() {
 
         <styles.chattingSection>
           {/* <button
-          onClick={() => {
-            chattingCreate();
-          }}
-        >
-          생성
-        </button> */}
+            onClick={() => {
+              chattingCreate();
+            }}
+          >
+            생성
+          </button> */}
           {chatRooms.map((room, index) => (
             <ChattingList
               key={index}
@@ -306,7 +307,7 @@ function FloatingChattingBox() {
 }
 
 export function FloatingChatting() {
-  const [isChatOpen, setIsChatOpen] = useState<boolean>(false);
+  const [isChatOpen, setIsChatOpen] = useRecoilState(chatOpenState);
   const router = useRouter();
 
   const toggleChat = () => {
@@ -315,7 +316,6 @@ export function FloatingChatting() {
 
   const isMobile = useIsMobile();
   useEffect(() => {
-    if (!isMobile) router.replace('/');
     if (isChatOpen && isMobile) {
       router.replace('/chat');
     }
@@ -324,9 +324,14 @@ export function FloatingChatting() {
     }
   }, [isChatOpen, isMobile]);
 
+  useEffect(() => {
+    if (!isMobile && window.location.pathname === '/chat') {
+      router.replace('/');
+    }
+  }, [isMobile]);
+
   const auth = useAuthValue();
   if (auth == null) return <></>;
-
   return (
     <>
       <styles.chattingButton onClick={toggleChat}>

diff --git a/src/components/card/VitalSection.tsx b/src/components/card/VitalSection.tsx
@@ -348,7 +348,7 @@ export function VitalSection({
 
       setFeatures(data);
     }
-  }, []);
+  }, [vitalFeatures]);
 
   const handleEssentialFeatureChange = useCallback(
     (key: 'smoking' | 'roomSharingOption' | 'mateAge', value: string) => {