From 17ccd6f946682b50521a355d187580f9b41ba66b Mon Sep 17 00:00:00 2001
From: parkyejin <uiop5809@naver.com>
Date: Sun, 10 Mar 2024 23:41:25 +0900
Subject: [PATCH 1/2] =?UTF-8?q?feat(#44):=20=EC=B9=B4=ED=94=BC=20=EA=B0=A4?=
 =?UTF-8?q?=EB=9F=AC=EB=A6=AC=20=ED=82=A4=EC=9B=8C=EB=93=9C=20=EC=B5=9C?=
 =?UTF-8?q?=EA=B7=BC=20=EA=B2=80=EC=83=89=EC=96=B4?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/adCopy/AdCopySearch.tsx    | 34 +++++++++++++----------
 src/components/adCopy/CopyGalleryPage.tsx |  1 +
 src/context/recentSearch.tsx              |  6 ++++
 3 files changed, 26 insertions(+), 15 deletions(-)

diff --git a/src/components/adCopy/AdCopySearch.tsx b/src/components/adCopy/AdCopySearch.tsx
index 6a9b4d9..8851a11 100644
--- a/src/components/adCopy/AdCopySearch.tsx
+++ b/src/components/adCopy/AdCopySearch.tsx
@@ -3,9 +3,12 @@
 import styled from "styled-components";
 import Image from "next/image";
 import { recentSearchData } from "@/lib/trend/trendData";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import RecentSearchContent from "../trend/RecentSearchContent";
 import { colors } from "@/styles/theme";
+import { useRecoilState } from "recoil";
+import { adCopyState } from "@/context/recentSearch";
+import RecentSearchBox from "../trend/RecentSearchBox";
 
 interface AdCopySearchProps {
   setSearchName: (name: string) => void;
@@ -14,10 +17,24 @@ interface AdCopySearchProps {
 const AdCopySearch = (props: AdCopySearchProps) => {
   const [name, setName] = useState("");
   const { setSearchName } = props;
+  const [adCopy, setAdCopy] = useRecoilState(adCopyState);
+
+  useEffect(() => {
+    if (adCopy.length > 4) {
+      setAdCopy((prev: string[]) => prev.slice(1));
+    }
+  }, [adCopy]);
 
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
     if (event.key === "Enter") {
       setSearchName(name);
+      setAdCopy((prev: string[]) => {
+        const updatedTrend = [name, ...prev];
+        if (updatedTrend.length > 4) {
+          return updatedTrend.slice(0, 4);
+        }
+        return updatedTrend;
+      });
       setName("");
     }
   };
@@ -37,12 +54,7 @@ const AdCopySearch = (props: AdCopySearchProps) => {
           onKeyDown={handleKeyDown}
         />
       </SearchBarBox>
-
-      <RecentSearchBox>
-        {recentSearchData.map((recentSearch) => (
-          <RecentSearchContent key={recentSearch.id} name={recentSearch.name} />
-        ))}
-      </RecentSearchBox>
+      <RecentSearchBox data={adCopy} />
     </Layout>
   );
 };
@@ -103,11 +115,3 @@ const SearchBar = styled.input`
   border: none;
   color: ${({ theme }) => theme.colors.white};
 `;
-
-const RecentSearchBox = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: start;
-  gap: 0.5rem;
-  margin: 1.5rem 0 0 2rem;
-`;
diff --git a/src/components/adCopy/CopyGalleryPage.tsx b/src/components/adCopy/CopyGalleryPage.tsx
index 933859b..32f8f8c 100644
--- a/src/components/adCopy/CopyGalleryPage.tsx
+++ b/src/components/adCopy/CopyGalleryPage.tsx
@@ -12,6 +12,7 @@ import Image from "next/image";
 
 const CopyGalleryPage = async () => {
   const [searchName, setSearchName] = useState("");
+
   return (
     <Layout>
       <AdCopySearch setSearchName={setSearchName} />
diff --git a/src/context/recentSearch.tsx b/src/context/recentSearch.tsx
index ea0a9c5..a2d7726 100644
--- a/src/context/recentSearch.tsx
+++ b/src/context/recentSearch.tsx
@@ -14,3 +14,9 @@ export const itemTrendState = atom({
   default: [],
   effects: [persistAtom],
 });
+
+export const adCopyState = atom({
+  key: "adCopy",
+  default: [],
+  effects: [persistAtom],
+});

From d2f3832e35a88a3dcdd911a60308da871d2a6d60 Mon Sep 17 00:00:00 2001
From: parkyejin <uiop5809@naver.com>
Date: Sun, 10 Mar 2024 23:44:42 +0900
Subject: [PATCH 2/2] =?UTF-8?q?docs(#44):=20=EC=9D=B8=EB=AC=BC=20->=20?=
 =?UTF-8?q?=EC=95=84=EC=9D=B4=ED=85=9C=20=EB=AC=B8=EA=B5=AC=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/trend/ItemPage.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/trend/ItemPage.tsx b/src/components/trend/ItemPage.tsx
index d6cb5e6..540dbb5 100644
--- a/src/components/trend/ItemPage.tsx
+++ b/src/components/trend/ItemPage.tsx
@@ -37,7 +37,7 @@ const ItemPage = () => {
         <>
           <TrendTop />
           <SearchText>
-            <span>"{searchName}"</span>에 대한 인물 분석 결과입니다.
+            <span>"{searchName}"</span>에 대한 아이템 분석 결과입니다.
           </SearchText>
 
           <ContentWrapper width="77.5rem">