Skip to content

Commit 058b872

Browse files
uiop5809uiop5809
authored
Merge pull request #47 from Kusitms-28th-Kobaco-B/feat/#44
[feat] 최종 수정
2 parents 8749ad1 + f66490d commit 058b872

16 files changed

+330
-224
lines changed

‎public/trend/commonWord.svg

Lines changed: 3 additions & 0 deletions
Loading

‎public/trend/relatedWordCompare.svg

Lines changed: 91 additions & 63 deletions
Loading

‎public/user/user.svg

Lines changed: 5 additions & 0 deletions
Loading

‎src/components/mypage/MyIndex.tsx

Lines changed: 17 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,25 +2,36 @@
22

33
import { useState } from "react";
44
import { styled } from "styled-components";
5+
import Image from "next/image";
56

67
const MyIndex = () => {
78
const [selected, setSelected] = useState(1);
89

910
return (
1011
<Layout>
11-
<Index selected={selected === 1} onClick={() => setSelected(1)}>
12-
마이 카피
13-
</Index>
14-
<Index selected={selected === 2} onClick={() => setSelected(2)}>
15-
마이 스토리보드
16-
</Index>
12+
<IndexBox>
13+
<Index selected={selected === 1} onClick={() => setSelected(1)}>
14+
마이 카피
15+
</Index>
16+
<Index selected={selected === 2} onClick={() => setSelected(2)}>
17+
마이 스토리보드
18+
</Index>
19+
</IndexBox>
20+
<Image src="/user/user.svg" alt="user" width={30} height={30} />
1721
</Layout>
1822
);
1923
};
2024

2125
export default MyIndex;
2226

2327
const Layout = styled.div`
28+
display: flex;
29+
justify-content: space-between;
30+
align-items: center;
31+
padding-right: 2rem;
32+
`;
33+
34+
const IndexBox = styled.div`
2435
display: flex;
2536
text-align: center;
2637
cursor: pointer;

‎src/components/mypage/ServiceResult.tsx

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -48,13 +48,13 @@ const BoxContents = styled.div`
4848
&::-webkit-scrollbar-track {
4949
margin: 1rem;
5050
border-radius: 10px;
51-
background-color: ${colors.secondaryLight3};
51+
background-color: ${colors.grey0};
5252
}
5353
&::-webkit-scrollbar {
5454
width: 0.375rem;
5555
}
5656
&::-webkit-scrollbar-thumb {
5757
border-radius: 10px;
58-
background-color: ${colors.secondary};
58+
background-color: ${colors.main};
5959
}
6060
`;

‎src/components/trend/CompareBarChart.tsx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -55,6 +55,7 @@ const Layout = styled.div`
5555
display: flex;
5656
flex-direction: column;
5757
align-items: center;
58+
margin: 0 2rem;
5859
`;
5960

6061
const ChartWrapper = styled.div`

‎src/components/trend/ComparePage.tsx

Lines changed: 9 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,7 @@ const ComparePage = () => {
9292
<ChartBox>
9393
<CompareRadialChart label="홈 인테리어" woman={56} man={44} />
9494
<CompareRadialChart label="샴푸" woman={30} man={70} />
95+
<CompareRadialChart label="바디워시" woman={56} man={44} />
9596
</ChartBox>
9697
</ContentWrapper>
9798

@@ -108,6 +109,11 @@ const ComparePage = () => {
108109
color="#8796E9"
109110
infoData={infoData}
110111
/>
112+
<CompareBarChart
113+
label="바디워시"
114+
color="#CECECE"
115+
infoData={infoData}
116+
/>
111117
</ChartBox>
112118
</ContentWrapper>
113119

@@ -125,8 +131,8 @@ const ComparePage = () => {
125131
<Image
126132
src="/trend/relatedWordCompare.svg"
127133
alt="연관어 비교"
128-
width={1000}
129-
height={400}
134+
width={1200}
135+
height={500}
130136
/>
131137
</ImageBox>
132138

@@ -209,7 +215,7 @@ const Title = styled.div<{ marginBottom?: string }>`
209215
const ChartBox = styled.div`
210216
display: flex;
211217
justify-content: center;
212-
gap: 8rem;
218+
gap: 5rem;
213219
`;
214220

215221
const ImageBox = styled.div`

‎src/components/trend/ItemPage.tsx

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,14 @@ import TrendTop from "./TrendTop";
1111
import ToggleButton from "../common/ToggleButton";
1212
import RelatedRankChange from "./RelatedRankChange";
1313
import RecentSearchBox from "./RecentSearchBox";
14-
import { recentSearchData } from "@/lib/trend/trendData";
1514
import ShoppingList from "./ShoppingList";
1615
import Image from "next/image";
16+
import { useRecoilState } from "recoil";
17+
import { itemTrendState } from "@/context/recentSearch";
1718

1819
const ItemPage = () => {
1920
const [searchName, setSearchName] = useState("");
21+
const [itemTrend, setItemTrend] = useRecoilState(itemTrendState);
2022

2123
return (
2224
<Layout>
@@ -28,7 +30,7 @@ const ItemPage = () => {
2830
src="/trend/itemAnalysis.png"
2931
setSearchName={setSearchName}
3032
/>
31-
<RecentSearchBox data={recentSearchData} />
33+
<RecentSearchBox data={itemTrend} />
3234
</TrendSearchBox>
3335

3436
{searchName !== "" && (

‎src/components/trend/PeoplePage.tsx

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,9 +14,12 @@ import TrendTop from "./TrendTop";
1414
import ToggleButton from "../common/ToggleButton";
1515
import { recentSearchData, relatedContentData } from "@/lib/trend/trendData";
1616
import RecentSearchBox from "./RecentSearchBox";
17+
import { useRecoilState } from "recoil";
18+
import { peopleTrendState } from "@/context/recentSearch";
1719

1820
const TrendPage = () => {
1921
const [searchName, setSearchName] = useState("");
22+
const [peopleTrend, setPeopleTrend] = useRecoilState(peopleTrendState);
2023

2124
return (
2225
<Layout>
@@ -29,7 +32,7 @@ const TrendPage = () => {
2932
src="/trend/peopleAnalysis.png"
3033
setSearchName={setSearchName}
3134
/>
32-
<RecentSearchBox data={recentSearchData} />
35+
<RecentSearchBox data={peopleTrend} />
3336
</TrendSearchBox>
3437

3538
{searchName !== "" && (

‎src/components/trend/PeopleSearch.tsx

Lines changed: 33 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,9 @@
22

33
import styled from "styled-components";
44
import Image from "next/image";
5-
import { useState } from "react";
5+
import { useEffect, useState } from "react";
6+
import { useRecoilState } from "recoil";
7+
import { itemTrendState, peopleTrendState } from "@/context/recentSearch";
68

79
interface TrendPeopleSearchProps {
810
title: string;
@@ -16,9 +18,38 @@ const TrendSearch = (props: TrendPeopleSearchProps) => {
1618
const [name, setName] = useState("");
1719
const { title, description, placeholder, src, setSearchName } = props;
1820

21+
const [peopleTrend, setPeopleTrend] = useRecoilState(peopleTrendState);
22+
const [itemTrend, setItemTrend] = useRecoilState(itemTrendState);
23+
24+
useEffect(() => {
25+
if (peopleTrend.length > 4) {
26+
setPeopleTrend((prev: string[]) => prev.slice(1));
27+
}
28+
if (itemTrend.length > 4) {
29+
setItemTrend((prev: string[]) => prev.slice(1));
30+
}
31+
}, [peopleTrend, itemTrend]);
32+
1933
const handleKeyDown = (event: React.KeyboardEvent<HTMLInputElement>) => {
20-
if (event.key === "Enter" && event.nativeEvent.isComposing === false) {
34+
if (event.key === "Enter" && event.nativeEvent.isComposing === false && name !== "") {
2135
setSearchName(name);
36+
if (title === "인물") {
37+
setPeopleTrend((prev: string[]) => {
38+
const updatedTrend = [name, ...prev];
39+
if (updatedTrend.length > 4) {
40+
return updatedTrend.slice(0, 4);
41+
}
42+
return updatedTrend;
43+
});
44+
} else if (title === "아이템") {
45+
setItemTrend((prev: string[]) => {
46+
const updatedTrend = [name, ...prev];
47+
if (updatedTrend.length > 4) {
48+
return updatedTrend.slice(0, 4);
49+
}
50+
return updatedTrend;
51+
});
52+
}
2253
setName("");
2354
}
2455
};

0 commit comments

Comments
 (0)