[#22] 카테고리 리스트 클릭 시, 해당 카테고리에 해당하는 친구 리스트 출력

- 카테고리 리스트 버튼으로 변경
- 클릭시, 카테고리에 해당하는 친구 리스트 출력

Resolves #22

src/components/list/FriendListBox.jsx

@@ -1,13 +1,25 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import FriendList from './FriendList';
 import FriendListBoxStyles from './FriendListBox.module.css';
 
-function FriendListBox ({friendList}) {
+function FriendListBox ({friendList, selectState}) {
+  const [displayList, setDisplayList] = useState([]);
+  const categoryFilter = useCallback((selectState) => {
+    if(!selectState.isSelect){
+      return friendList;
+    }
+    return friendList.filter(friend=> friend.category === selectState.categoryId);
+  }, [friendList]);
+
+  useEffect(()=>{
+    setDisplayList(categoryFilter(selectState));
+  }, [categoryFilter, selectState, setDisplayList, friendList]);
+
   return (
     <section className={FriendListBoxStyles.friendListBox}>
         <h1 className="hidden">친구 리스트</h1>
-            <FriendList title="이번달이 생일인 친구" number={5} />
-            <FriendList title="전체 친구" number={friendList.length} friendList={friendList} />
+            {/* <FriendList title="이번달이 생일인 친구" number={5} /> */}
+            <FriendList title={selectState.categoryName || "전체 친구"} number={displayList.length} friendList={displayList} />
     </section>
   );
 }

src/components/list/Lnb.jsx

@@ -1,7 +1,7 @@
 import React, { useRef, useState } from 'react';
 import lnbStyles from './Lnb.module.css';
 
-function Lnb ({friendList, categoryList, name, addCategory}) {
+function Lnb ({friendList, categoryList, name, addCategory, setSelectState, selectState}) {
   const [activateInput, setActivateInput] = useState(false);
   const btn = useRef();
   const caterogyInput = useRef();
@@ -24,19 +24,31 @@ function Lnb ({friendList, categoryList, name, addCategory}) {
     }
   }
 
+  const selectCategory = (category) => {
+    const { id : categoryId, name : categoryName,  isSelect} = category;
+    const categoryState = {
+      categoryId,
+      categoryName,
+      isSelect: isSelect === undefined ? true : false
+    }
+    setSelectState({...selectState, ...categoryState});
+  }
+
   return (
     <nav className={lnbStyles.lnb}>
     <p className={lnbStyles.welcomeMessage}>{name}님, 환영합니다.</p>
     <button className={lnbStyles.btn}>
         <i className="fas fa-plus"></i> 새 친구 등록
     </button>
     <p>
-      전체 친구 ({friendList.length}명)
+      <button onClick={()=>selectCategory({isSelect: false})}>전체 친구 ({friendList.length}명)</button>
     </p>
     <ul>
-      <li>미분류</li>
+      <li>
+        <button onClick={()=>selectCategory({id: '', name: '미분류'})}>미분류</button>
+      </li>
       {
-        categoryList.map(category=><li key={category.id}>{category.name}</li>)
+        categoryList.map(category=><li key={category.id}><button onClick={()=>selectCategory(category)}>{category.name}</button></li>)
       }
     </ul>
     <form className={lnbStyles.categoryForm} >

src/containsers/FriendListContainer.jsx

@@ -6,6 +6,7 @@ import DataService from '../service/data_service';
 function FriendListContainer ({user}) {
     const [categoryList, setCategory] = useState([]);
     const [friendList, setFriendList] = useState([]);
+    const [selectState, setSelectState] = useState({categoryId: '', categoryName: '', isSelect: false});
     const name = user.displayName;
     const dataService = useMemo(()=>new DataService(), []);
     const addCategory = (category) => {
@@ -36,8 +37,8 @@ function FriendListContainer ({user}) {
 
   return (
       <>
-          <Lnb friendList={friendList} categoryList={categoryList} addCategory={addCategory} name={name} />
-          <FriendListBox user={user}  friendList={friendList} /> 
+          <Lnb friendList={friendList} categoryList={categoryList} addCategory={addCategory} name={name} setSelectState={setSelectState} selectState={selectState} />
+          <FriendListBox user={user}  friendList={friendList} selectState={selectState} /> 
       </>
   );
 }