From c45d1345e9aa72f026e426585020d19c1ad2afde Mon Sep 17 00:00:00 2001
From: ktmihs <yellowgreen423@gmail.com>
Date: Sun, 4 Dec 2022 17:05:57 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20#66=20=EC=B9=9C=EA=B5=AC=20=EC=B6=94?=
 =?UTF-8?q?=EA=B0=80=20=EB=B0=8F=20=EC=82=AD=EC=A0=9C=20=EC=8B=9C,=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81=EC=9D=B4=20=EB=B0=94=EB=A1=9C=20=EB=90=98?=
 =?UTF-8?q?=EB=8F=84=EB=A1=9D=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 전역 값도 변경해줌
---
 .../component/Sidebar/Friends/friendItem.tsx  | 28 +++++++++++++------
 .../src/component/Sidebar/Friends/search.tsx  | 15 +++++++++-
 2 files changed, 33 insertions(+), 10 deletions(-)

diff --git a/frontend/src/component/Sidebar/Friends/friendItem.tsx b/frontend/src/component/Sidebar/Friends/friendItem.tsx
index 1d6c951..f58fd35 100644
--- a/frontend/src/component/Sidebar/Friends/friendItem.tsx
+++ b/frontend/src/component/Sidebar/Friends/friendItem.tsx
@@ -4,22 +4,32 @@ import { friendItemWrapper, userName } from './friends.styled';
 import message from '../../../assets/icon/messageIcon.svg';
 import unfollow from '../../../assets/icon/unfollowIcon.svg';
 import axios from 'axios';
+import { useRecoilState } from 'recoil';
+import { friendsState } from '../../../store/atom/friends';
+import { useEffect } from 'react';
 
-const FriendItem = (data: friendType) => {
-  const { isOnline, name } = data;
+const FriendItem = ({ friend }: { friend: friendType }) => {
+  const [friends, setFriends] = useRecoilState(friendsState);
+
+  const { id, isOnline, nickname } = friend;
 
   const sendChatting = () => {
-    alert(`${name}님과 채팅하기`);
+    alert(`${nickname}님과 채팅하기`);
   };
 
   const unfollowing = async () => {
-    const isConfirm = confirm(`${name}님을 언팔로우 하시겠습니까?`);
+    const isConfirm = confirm(`${nickname}님을 언팔로우 하시겠습니까?`);
 
     if (isConfirm) {
       try {
-        await axios.delete(`/api/friendship/${name}`);
+        await axios.delete(`/api/friendship/${nickname}`);
+
+        const newFriend = { ...friends };
+
+        delete newFriend[nickname];
+        setFriends(newFriend);
 
-        alert(`${name}님을 언팔로우 하였습니다.`);
+        alert(`${nickname}님을 언팔로우 하였습니다.`);
       } catch {
         alert('언팔로우 실패');
       }
@@ -27,9 +37,9 @@ const FriendItem = (data: friendType) => {
   };
 
   return (
-    <Content draggable={isOnline} key={name}>
-      <section id={name} css={friendItemWrapper(isOnline)}>
-        <div css={userName(isOnline)}>{name}</div>
+    <Content draggable={isOnline}>
+      <section id={id} css={friendItemWrapper(isOnline)}>
+        <div css={userName(isOnline)}>{nickname}</div>
         <div>
           <img src={message} alt="채팅하기" onClick={sendChatting}></img>
           <img src={unfollow} alt="친구 끊기" onClick={unfollowing}></img>
diff --git a/frontend/src/component/Sidebar/Friends/search.tsx b/frontend/src/component/Sidebar/Friends/search.tsx
index 8bc651b..3dc6c39 100644
--- a/frontend/src/component/Sidebar/Friends/search.tsx
+++ b/frontend/src/component/Sidebar/Friends/search.tsx
@@ -1,5 +1,7 @@
 import axios from 'axios';
 import { FormEvent, MouseEvent, useState } from 'react';
+import { useRecoilState } from 'recoil';
+import { friendsState } from '../../../store/atom/friends';
 import { findFriend } from './friends.styled';
 
 const testSearchWord = (word: string) =>
@@ -8,6 +10,7 @@ const testSearchWord = (word: string) =>
   );
 
 const Search = () => {
+  const [friends, setFriends] = useRecoilState(friendsState);
   const [searchWord, setSearchWord] = useState<string>('');
   const [nicknameList, setNicknameList] = useState<string[]>([]);
 
@@ -22,7 +25,17 @@ const Search = () => {
     const response = confirm(`${selectedWord}를 친구추가 하시겠습니까?`);
     if (response) {
       try {
-        await axios.put(`/api/friendship/${selectedWord}`);
+        const { data } = await axios.put(`/api/friendship/${selectedWord}`);
+
+        setFriends({
+          ...friends,
+          id: {
+            id: data.userId,
+            isOnline: false,
+            nickname: data.nickname,
+            isCalling: false,
+          },
+        });
 
         alert('팔로우 되었습니다.');
       } catch {