[4주차] 정희수 미션 제출합니다.

src/pages/Friends/FriendItem.tsx

@@ -28,7 +28,7 @@ function FriendItem({id,name,src,number}:FriendItemProps){
                     </StyledItem>
                     <hr/>
                     <StyledFont>
-                        친구 {number} 
+                        친구 {number-1} 
                     </StyledFont>
                     <br/>
                 </>

src/pages/Friends/Friends.tsx

@@ -3,17 +3,31 @@ import {useRecoilState,useRecoilValue,} from 'recoil';
 import { userState } from '../../recoil/atom';
 import Header from '../../components/Header';
 import FriendItem from './FriendItem';
+import Search from './Search';
 import styled from "styled-components"
 
 const Friends = () => {
     const [user, setUser] = useRecoilState<Object[]>(userState);
+    const [search, setSearch] = useState(0);
+
+    const onClick = () => {
+        if(search === 0){
+            setSearch(1);
+        }else{
+            setSearch(0);
+        }
+    }
 
     return (
         <StyledBlock>
             <Header/>
             <StyledContent>
                 친구
+                <StyledButton onClick={onClick}>🔍</StyledButton>
                 {
+                    search === 0 ?
+                    <Search/>
+                    :
                     user.map((u)=>(
                         <FriendItem
                             key={Object.values(u)[0]}
@@ -29,6 +43,14 @@ const Friends = () => {
     );
 };
 
+const StyledButton = styled.button`
+    float: right;
+    border: none;
+    outline:none;
+    background: white;
+    font-size: medium;
+`
+
 const StyledBlock = styled.div`
     display: flex;
     flex-direction: row;

src/pages/Friends/Search.tsx

@@ -0,0 +1,45 @@
+import React, {useState, useEffect} from 'react';
+import {useRecoilState,useRecoilValue,} from 'recoil';
+import { userState } from '../../recoil/atom';
+import FriendItem from './FriendItem';
+import styled from "styled-components"
+
+const Search = () => {
+    const [user, setUser] = useRecoilState<Object[]>(userState);
+
+    const [search, setSearch] = useState("");
+    const onChange = (e:React.ChangeEvent<HTMLInputElement>) => {
+        setSearch(e.target.value);
+    }
+
+    const filterUser= user.filter((p) => {
+        let result = Object.values(p)[1].replace(" ","").toLocaleLowerCase().includes(search.toLocaleLowerCase());
+        console.log(Object.values(p)[1],result);
+        return result;
+    })
+
+    return (
+        <div>
+            <br/>
+            <StyledInput type="text" value={search} onChange={onChange}/>
+            {
+                filterUser.map((u)=>(
+                    <FriendItem
+                        key={Object.values(u)[0]}
+                        id={Object.values(u)[0]}
+                        name={Object.values(u)[1]}
+                        src={Object.values(u)[2]}
+                        number={Object.values(user).length}
+                    />
+                ))
+            }
+        </div>
+    );
+};
+
+const StyledInput = styled.input`
+    width: 250px;
+    height: 20px;
+`
+
+export default Search;