history 기능 구현

week4/src/App.js

@@ -5,7 +5,12 @@ import MainPage from "./pages/MainPage";
 import UserInfo from "./components/UserInfo";
 
 function App() {
-  const [userId, setUserId] = useState("");
+  //const [history, setHistory] = useState(["hi", "me"]);
+  //const arrString = JSON.stringify(history);
+
+  //window.localStorage.setItem("history", arrString);
+
+  //console.log(arrString);
 
   return (
     <BrowserRouter>

week4/src/components/History.jsx

@@ -0,0 +1,52 @@
+import React from "react";
+import { useNavigate } from "react-router-dom";
+import styled from "styled-components";
+
+export default function History({ setShow, item, history, setHistory }) {
+  const navigate = useNavigate();
+  const handleClick = (e) => {
+    const userId = e.target.innerText;
+    navigate(`/search/${userId}`);
+    setShow(false);
+  };
+  const handleDelete = (e) => {
+    setHistory(history.filter((item) => item !== e.target.id));
+  };
+  return (
+    <Container>
+      <HistoryList onClick={handleClick}>{item}</HistoryList>
+      <DelHistory id={item} onClick={handleDelete}>
+        X
+      </DelHistory>
+    </Container>
+  );
+}
+
+const Container = styled.div`
+  display: flex;
+  z-index: 1;
+`;
+
+const HistoryList = styled.button`
+  display: flex;
+  align-items: center;
+
+  background-color: black;
+  opacity: 40%;
+
+  text-align: center;
+
+  color: white;
+  font-size: 16px;
+
+  width: 88%;
+  height: 40px;
+
+  border: none;
+`;
+
+const DelHistory = styled.button`
+  color: white;
+  background-color: black;
+  width: 12%;
+`;

week4/src/components/SearchBox.jsx

@@ -1,39 +1,63 @@
-import React from "react";
-import { useNavigate } from "react-router-dom";
+import React, { useState } from "react";
+import { useNavigate, useParams } from "react-router-dom";
 import styled from "styled-components";
+import History from "./History";
 
 export default function SearchBox() {
   const navigate = useNavigate();
 
+  const [history, setHistory] = useState([]);
+  const [show, setShow] = useState(false);
+
   const handleOnKeyPress = (e) => {
     if (e.key == "Enter") {
       const userId = e.target.value;
+      if (!history.includes(userId)) {
+        setHistory([userId, ...history]);
+      }
       navigate(`/search/${userId}`);
+      setShow(false);
     }
   };
 
+  // 렌더링
+  const historyList = history.map((item) => (
+    <History
+      setShow={setShow}
+      item={item}
+      history={history}
+      setHistory={setHistory}
+      key={item}
+    />
+  ));
+
   return (
     <Container>
       <Title>Github Profile Finder</Title>
-      <SearchBar
-        placeholder="Github username..."
-        onKeyPress={handleOnKeyPress}
-      ></SearchBar>
+      <SearchContainer>
+        <SearchBar
+          placeholder="Github username..."
+          onKeyPress={handleOnKeyPress}
+          onFocus={() => {
+            setShow(true);
+          }}
+        />
+        {show ? historyList : null}
+      </SearchContainer>
     </Container>
   );
 }
 
 const Container = styled.div`
   display: flex;
+  flex-direction: column;
 
-  justify-content: center;
-  flex-wrap: wrap;
+  align-items: center;
 
   position: relative;
   top: 50px;
 
-  background-color: #000000;
-  opacity: 30%;
+  background-color: #f0b2ad;
   font-size: 32px;
   font-weight: bold;
 
@@ -46,16 +70,26 @@ const Container = styled.div`
 const Title = styled.h1`
   color: #ffffff;
   margin: 0;
-  margin-top: 17px;
+  margin: 25px 0;
+`;
+
+const SearchContainer = styled.div`
+  display: flex;
+  flex-direction: column;
 `;
 
 const SearchBar = styled.input`
   box-sizing: border-box;
 
-  background-color: white;
+  background-color: black;
+  opacity: 70%;
   font-size: 18px;
 
+  color: white;
   width: 290px;
   height: 40px;
   padding: 10px;
+
+  border: none;
+  border-radius: 5px;
 `;

week4/src/components/UserInfo.jsx

@@ -2,7 +2,7 @@ import React, { useEffect, useState } from "react";
 import styled from "styled-components";
 import AccountInfo from "./AccountInfo";
 import axios from "axios";
-import { Navigate, useNavigate, useParams } from "react-router-dom";
+import { useNavigate, useParams } from "react-router-dom";
 
 export default function UserInfo() {
   const navigate = useNavigate();
@@ -61,9 +61,9 @@ const Container = styled.div`
   position: relative;
   top: 70px;
 
-  background-color: #000000;
-  opacity: 30%;
+  background-color: #f0b2ad;
   font-size: 32px;
+
   font-weight: bold;
 
   width: 600px;
@@ -81,6 +81,7 @@ const CloseButton = styled.button`
   font-size: 20px;
 
   background: none;
+  border: none;
 `;
 
 const Image = styled.img`
@@ -113,6 +114,7 @@ const VisitBt = styled.button`
 
   &:hover {
     background-color: #686868;
+    font-weight: bold;
   }
 `;
 
@@ -121,7 +123,6 @@ const Container2 = styled.div`
   flex-direction: row;
   justify-content: space-between;
 
-  background-color: black;
   width: 500px;
   height: 120px;
   margin: 10px 0;

week4/src/pages/MainPage.jsx

@@ -1,4 +1,4 @@
-import React, { useNavigate } from "react";
+import React, { useState } from "react";
 import { Outlet } from "react-router-dom";
 import styled from "styled-components";
 import SearchBox from "../components/SearchBox";