From 1a5677d319e266264fb33c5cd46e529e0d43ccaf Mon Sep 17 00:00:00 2001
From: ktmihs <yellowgreen423@gmail.com>
Date: Sun, 4 Dec 2022 18:19:48 +0900
Subject: [PATCH] =?UTF-8?q?[feat]=20#66=20=EC=B9=9C=EA=B5=AC=20=EA=B2=80?=
 =?UTF-8?q?=EC=83=89=20=EC=9E=90=EB=8F=99=20=EC=99=84=EC=84=B1?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 자동 완성 api 연결
---
 .../Sidebar/Friends/friends.styled.ts         |  5 +-
 .../src/component/Sidebar/Friends/search.tsx  | 50 ++++++++++++++-----
 frontend/src/component/Sidebar/index.tsx      |  2 +-
 3 files changed, 40 insertions(+), 17 deletions(-)

diff --git a/frontend/src/component/Sidebar/Friends/friends.styled.ts b/frontend/src/component/Sidebar/Friends/friends.styled.ts
index 586bd5d..81de9fc 100644
--- a/frontend/src/component/Sidebar/Friends/friends.styled.ts
+++ b/frontend/src/component/Sidebar/Friends/friends.styled.ts
@@ -113,9 +113,8 @@ export const findFriend = css`
       font-weight: 700;
       padding: 5px;
 
-      cursor: pointer;
-
-      :hover {
+      &:not(.none):hover {
+        cursor: pointer;
         color: ${theme.green};
         background-color: rgba(255, 255, 255, 0.9);
       }
diff --git a/frontend/src/component/Sidebar/Friends/search.tsx b/frontend/src/component/Sidebar/Friends/search.tsx
index 3dc6c39..1a292e2 100644
--- a/frontend/src/component/Sidebar/Friends/search.tsx
+++ b/frontend/src/component/Sidebar/Friends/search.tsx
@@ -2,21 +2,25 @@ import axios from 'axios';
 import { FormEvent, MouseEvent, useState } from 'react';
 import { useRecoilState } from 'recoil';
 import { friendsState } from '../../../store/atom/friends';
+import { friendType } from './friends';
 import { findFriend } from './friends.styled';
 
-const testSearchWord = (word: string) =>
-  ['hj', 'ktmihs22', 'jongbin', 'kt', 'ktm', 'ktmi', 'ktmih', 'ktmihs'].filter(
-    name => name.indexOf(word) !== -1
-  );
+type nicknameType = {
+  userId: string;
+  isCalling: boolean;
+  isOnline: boolean;
+  nickname: string;
+};
 
 const Search = () => {
   const [friends, setFriends] = useRecoilState(friendsState);
   const [searchWord, setSearchWord] = useState<string>('');
-  const [nicknameList, setNicknameList] = useState<string[]>([]);
+  const [nicknameList, setNicknameList] = useState<nicknameType[]>([]);
 
   const addToFriend = async (e: MouseEvent) => {
     const target = e.target as HTMLUListElement;
 
+    if (target.classList.contains('none')) return;
     const selectedWord = target.innerText;
 
     setSearchWord('');
@@ -52,12 +56,28 @@ const Search = () => {
     const value = target.value;
     setSearchWord(value);
 
+    if (!value) {
+      setNicknameList([]);
+      return;
+    }
     if (timer) clearTimeout(timer);
-    const newTimer = setTimeout(() => {
-      // 서버로 리스트 받아오는 요청 보내기
-      const findList = testSearchWord(value);
-      setNicknameList(findList);
-    }, 500);
+
+    const newTimer = setTimeout(async () => {
+      const { data: findList } = await axios(`/api/friendship/${value}`);
+
+      if (findList.length) {
+        setNicknameList(findList);
+      } else if (value) {
+        setNicknameList([
+          {
+            userId: 'none',
+            nickname: '일치하는 유저가 없습니다.',
+            isCalling: false,
+            isOnline: false,
+          },
+        ]);
+      }
+    }, 100);
 
     setTimer(newTimer);
   };
@@ -66,9 +86,13 @@ const Search = () => {
     <section css={findFriend}>
       {nicknameList.length ? (
         <ul onClick={addToFriend}>
-          {nicknameList.map(name => (
-            <li key={name}>{name}</li>
-          ))}
+          {nicknameList.map(
+            ({ nickname, userId }: { nickname: string; userId: string }) => (
+              <li key={nickname} className={userId === 'none' ? 'none' : ''}>
+                {nickname}
+              </li>
+            )
+          )}
         </ul>
       ) : (
         <></>
diff --git a/frontend/src/component/Sidebar/index.tsx b/frontend/src/component/Sidebar/index.tsx
index 579996c..ef25c7a 100644
--- a/frontend/src/component/Sidebar/index.tsx
+++ b/frontend/src/component/Sidebar/index.tsx
@@ -27,7 +27,7 @@ const component: componentType = {
 };
 
 const Sidebar = () => {
-  const [isOpen, setOpen] = useState(false);
+  const [isOpen, setOpen] = useState(true);
   const [isMicOn, setMic] = useState(false);
   const [isCamOn, setCam] = useState(true);