Merge pull request #47 from Kusitms-28th-Kobaco-B/feat/#44

[feat] 최종 수정

src/components/mypage/MyIndex.tsx

@@ -2,25 +2,36 @@
 
 import { useState } from "react";
 import { styled } from "styled-components";
+import Image from "next/image";
 
 const MyIndex = () => {
   const [selected, setSelected] = useState(1);
 
   return (
     <Layout>
-      <Index selected={selected === 1} onClick={() => setSelected(1)}>
-        마이 카피
-      </Index>
-      <Index selected={selected === 2} onClick={() => setSelected(2)}>
-        마이 스토리보드
-      </Index>
+      <IndexBox>
+        <Index selected={selected === 1} onClick={() => setSelected(1)}>
+          마이 카피
+        </Index>
+        <Index selected={selected === 2} onClick={() => setSelected(2)}>
+          마이 스토리보드
+        </Index>
+      </IndexBox>
+      <Image src="/user/user.svg" alt="user" width={30} height={30} />
     </Layout>
   );
 };
 
 export default MyIndex;
 
 const Layout = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding-right: 2rem;
+`;
+
+const IndexBox = styled.div`
   display: flex;
   text-align: center;
   cursor: pointer;

src/components/mypage/ServiceResult.tsx

@@ -48,13 +48,13 @@ const BoxContents = styled.div`
   &::-webkit-scrollbar-track {
     margin: 1rem;
     border-radius: 10px;
-    background-color: ${colors.secondaryLight3};
+    background-color: ${colors.grey0};
   }
   &::-webkit-scrollbar {
     width: 0.375rem;
   }
   &::-webkit-scrollbar-thumb {
     border-radius: 10px;
-    background-color: ${colors.secondary};
+    background-color: ${colors.main};
   }
 `;

src/components/trend/CompareBarChart.tsx

@@ -55,6 +55,7 @@ const Layout = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
+  margin: 0 2rem;
 `;
 
 const ChartWrapper = styled.div`

src/components/trend/ComparePage.tsx

@@ -92,6 +92,7 @@ const ComparePage = () => {
             <ChartBox>
               <CompareRadialChart label="홈 인테리어" woman={56} man={44} />
               <CompareRadialChart label="샴푸" woman={30} man={70} />
+              <CompareRadialChart label="바디워시" woman={56} man={44} />
             </ChartBox>
           </ContentWrapper>
 
@@ -108,6 +109,11 @@ const ComparePage = () => {
                 color="#8796E9"
                 infoData={infoData}
               />
+              <CompareBarChart
+                label="바디워시"
+                color="#CECECE"
+                infoData={infoData}
+              />
             </ChartBox>
           </ContentWrapper>
 
@@ -125,8 +131,8 @@ const ComparePage = () => {
               <Image
                 src="/trend/relatedWordCompare.svg"
                 alt="연관어 비교"
-                width={1000}
-                height={400}
+                width={1200}
+                height={500}
               />
             </ImageBox>
 
@@ -209,7 +215,7 @@ const Title = styled.div<{ marginBottom?: string }>`
 const ChartBox = styled.div`
   display: flex;
   justify-content: center;
-  gap: 8rem;
+  gap: 5rem;
 `;
 
 const ImageBox = styled.div`

src/components/trend/ItemPage.tsx

@@ -11,12 +11,14 @@ import TrendTop from "./TrendTop";
 import ToggleButton from "../common/ToggleButton";
 import RelatedRankChange from "./RelatedRankChange";
 import RecentSearchBox from "./RecentSearchBox";
-import { recentSearchData } from "@/lib/trend/trendData";
 import ShoppingList from "./ShoppingList";
 import Image from "next/image";
+import { useRecoilState } from "recoil";
+import { itemTrendState } from "@/context/recentSearch";
 
 const ItemPage = () => {
   const [searchName, setSearchName] = useState("");
+  const [itemTrend, setItemTrend] = useRecoilState(itemTrendState);
 
   return (
     <Layout>
@@ -28,7 +30,7 @@ const ItemPage = () => {
           src="/trend/itemAnalysis.png"
           setSearchName={setSearchName}
         />
-        <RecentSearchBox data={recentSearchData} />
+        <RecentSearchBox data={itemTrend} />
       </TrendSearchBox>
 
       {searchName !== "" && (

src/components/trend/PeoplePage.tsx

@@ -14,9 +14,12 @@ import TrendTop from "./TrendTop";
 import ToggleButton from "../common/ToggleButton";
 import { recentSearchData, relatedContentData } from "@/lib/trend/trendData";
 import RecentSearchBox from "./RecentSearchBox";
+import { useRecoilState } from "recoil";
+import { peopleTrendState } from "@/context/recentSearch";
 
 const TrendPage = () => {
   const [searchName, setSearchName] = useState("");
+  const [peopleTrend, setPeopleTrend] = useRecoilState(peopleTrendState);
 
   return (
     <Layout>
@@ -29,7 +32,7 @@ const TrendPage = () => {
           src="/trend/peopleAnalysis.png"
           setSearchName={setSearchName}
         />
-        <RecentSearchBox data={recentSearchData} />
+        <RecentSearchBox data={peopleTrend} />
       </TrendSearchBox>
 
       {searchName !== "" && (

src/components/trend/PeopleSearch.tsx

@@ -2,7 +2,9 @@
 
 import styled from "styled-components";
 import Image from "next/image";
-import { useState } from "react";
+import { useEffect, useState } from "react";
+import { useRecoilState } from "recoil";
+import { itemTrendState, peopleTrendState } from "@/context/recentSearch";
 
 interface TrendPeopleSearchProps {
   title: string;
@@ -16,9 +18,38 @@ const TrendSearch = (props: TrendPeopleSearchProps) => {
   const [name, setName] = useState("");
   const { title, description, placeholder, src, setSearchName } = props;
 
+  const [peopleTrend, setPeopleTrend] = useRecoilState(peopleTrendState);
+  const [itemTrend, setItemTrend] = useRecoilState(itemTrendState);
+
+  useEffect(() => {
+    if (peopleTrend.length > 4) {
+      setPeopleTrend((prev: string[]) => prev.slice(1));
+    }
+    if (itemTrend.length > 4) {
+      setItemTrend((prev: string[]) => prev.slice(1));
+    }
+  }, [peopleTrend, itemTrend]);
+
   const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
-    if (event.key === "Enter" && event.nativeEvent.isComposing === false) {
+    if (event.key === "Enter" && event.nativeEvent.isComposing === false && name !== "") {
       setSearchName(name);
+      if (title === "인물") {
+        setPeopleTrend((prev: string[]) => {
+          const updatedTrend = [name, ...prev];
+          if (updatedTrend.length > 4) {
+            return updatedTrend.slice(0, 4);
+          }
+          return updatedTrend;
+        });
+      } else if (title === "아이템") {
+        setItemTrend((prev: string[]) => {
+          const updatedTrend = [name, ...prev];
+          if (updatedTrend.length > 4) {
+            return updatedTrend.slice(0, 4);
+          }
+          return updatedTrend;
+        });
+      }
       setName("");
     }
   };

src/components/trend/RecentSearchBox.tsx

@@ -2,19 +2,16 @@ import { styled } from "styled-components";
 import RecentSearchContent from "./RecentSearchContent";
 
 interface RecentSearchBoxProps {
-  data: {
-    id: number;
-    name: string;
-  }[];
+  data: string[];
 }
 
 const RecentSearchBox = (props: RecentSearchBoxProps) => {
   const { data } = props;
 
   return (
     <RecentSearchBoxStyle>
-      {data.map((recentSearch) => (
-        <RecentSearchContent key={recentSearch.id} name={recentSearch.name} />
+      {data.map((recentSearch: string) => (
+        <RecentSearchContent name={recentSearch} />
       ))}
     </RecentSearchBoxStyle>
   );

src/components/trend/RelatedHashTag.tsx

@@ -45,7 +45,6 @@ const RelatedHashTag = () => {
         children: [],
       },
     ];
-
     networkSeries.dataFields.linkWith = "linkWith";
     networkSeries.dataFields.name = "name";
     networkSeries.dataFields.id = "name";
@@ -64,7 +63,10 @@ const RelatedHashTag = () => {
     networkSeries.manyBodyStrength = -5;
     networkSeries.links.template.strokeOpacity = 0;
 
-    // 컴포넌트가 언마운트될 때 차트를 정리
+    networkSeries.nodes.template.events.on("hit", () => {
+      window.location.href = "/trend/compare";
+    });
+
     return () => {
       chart.dispose();
     };
@@ -79,9 +81,3 @@ const ChartWrapper = styled.div`
   display: flex;
   height: 22rem;
 `;
-
-const HashTagText = styled.div`
-  font-size: 1.2rem;
-  font-weight: 700;
-  margin-bottom: 2rem;
-`;