diff --git a/public/trend/compareAnalysis.png b/public/trend/compareAnalysis.png
new file mode 100644
index 0000000..774cf4a
Binary files /dev/null and b/public/trend/compareAnalysis.png differ
diff --git a/public/trend/relatedWordCompare.svg b/public/trend/relatedWordCompare.svg
new file mode 100644
index 0000000..c4a1ae6
--- /dev/null
+++ b/public/trend/relatedWordCompare.svg
@@ -0,0 +1,64 @@
+
diff --git a/src/app/trend/compare/page.tsx b/src/app/trend/compare/page.tsx
new file mode 100644
index 0000000..25b07d7
--- /dev/null
+++ b/src/app/trend/compare/page.tsx
@@ -0,0 +1,12 @@
+import NOSSR from "@/components/common/NOSSR";
+import ComparePage from "@/components/trend/ComparePage";
+
+const Compare = async () => {
+ return (
+
+
+
+ );
+};
+
+export default Compare;
diff --git a/src/app/trend/people/page.tsx b/src/app/trend/people/page.tsx
index 10b3136..232435c 100644
--- a/src/app/trend/people/page.tsx
+++ b/src/app/trend/people/page.tsx
@@ -1,11 +1,11 @@
import NOSSR from "@/components/common/NOSSR";
import Footer from "@/components/footer/Footer";
-import TrendPage from "@/components/trend/TrendPage";
+import PeoplePage from "@/components/trend/PeoplePage";
const Trend = async () => {
return (
-
+
);
diff --git a/src/components/trend/CompareBarChart.tsx b/src/components/trend/CompareBarChart.tsx
new file mode 100644
index 0000000..d95f447
--- /dev/null
+++ b/src/components/trend/CompareBarChart.tsx
@@ -0,0 +1,102 @@
+import { colors } from "@/styles/theme";
+import styled from "styled-components";
+
+interface BarChartProps {
+ label: string;
+ color?: string;
+ infoData: {
+ category: string;
+ ratio: number;
+ }[];
+}
+
+const CompareBarChart = (props: BarChartProps) => {
+ const { label, color, infoData } = props;
+ const ratioSum = infoData[0].ratio + infoData[1].ratio + infoData[2].ratio;
+
+ return (
+ <>
+
+
+
+
+ {`${infoData[0].ratio}%`}
+
+
+
+
+ {`${infoData[1].ratio}%`}
+
+
+
+
+ {`${infoData[2].ratio}%`}
+
+
+
+
+
+
+ );
+};
+
+export default CompareBarChart;
+
+const Layout = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+`;
+
+const ChartWrapper = styled.div`
+ width: 100%;
+ display: inline-flex;
+ justify-content: center;
+ gap: 2.25rem;
+ margin-top: 1.5rem;
+`;
+
+const Label = styled.div`
+ padding: 0.5rem 1rem;
+ color: ${({ theme }) => theme.colors.white};
+ border: 1px solid ${({ theme }) => theme.colors.white};
+ border-radius: 100px;
+ width: fit-content;
+`;
+
+const BarWrapper = styled.div`
+ display: flex;
+ flex-direction: column;
+ gap: 0.88rem;
+ justify-content: end;
+ align-items: center;
+`;
+const Bar = styled.div<{ height: string; color: string }>`
+ width: 3.75rem;
+ height: ${(props) => props.height};
+ border-radius: 2.5rem 2.5rem 0.625rem 0.625rem;
+ background: ${(props) => props.color};
+`;
+const Ratio = styled.div`
+ color: ${colors.grey4};
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 500;
+ line-height: normal;
+`;
+const Legend = styled.div<{ weight: number }>`
+ color: ${colors.grey4};
+ font-size: 1.125rem;
+ font-style: normal;
+ font-weight: ${(props) => props.weight};
+ line-height: normal;
+`;
diff --git a/src/components/trend/ComparePage.tsx b/src/components/trend/ComparePage.tsx
new file mode 100644
index 0000000..21bcac1
--- /dev/null
+++ b/src/components/trend/ComparePage.tsx
@@ -0,0 +1,226 @@
+"use client";
+
+import styled from "styled-components";
+import { LineChart } from "./LineChart";
+import TrendSearch from "./PeopleSearch";
+import { useEffect, useState } from "react";
+import TrendTop from "./TrendTop";
+import ToggleButton from "../common/ToggleButton";
+import CompareRadialChart from "./CompareRadialChart";
+import CompareBarChart from "./CompareBarChart";
+import Image from "next/image";
+import { infoData, relatedContentCompareData } from "@/lib/trend/trendData";
+import RelatedContents from "./RelatedContents";
+import CompareTop from "./CompareTop";
+
+const ComparePage = () => {
+ const [searchWord, setSearchWord] = useState("");
+ const [item1, setItem1] = useState("");
+ const [item2, setItem2] = useState("");
+ const [item3, setItem3] = useState("");
+
+ const handleSearch = (word: string) => {
+ if (!item1) {
+ setItem1(word);
+ } else if (!item2) {
+ setItem2(word);
+ } else if (!item3) {
+ setItem3(word);
+ } else {
+ setItem1("선택");
+ setItem2("선택");
+ setItem3("선택");
+ }
+ };
+
+ useEffect(() => {
+ if (item1 && item2) {
+ setSearchWord(`${item1} vs ${item2}`);
+ }
+ if (item1 && item2 && item3) {
+ setSearchWord(`${item1} vs ${item2} vs ${item3}`);
+ }
+ }, [item1, item2, item3]);
+
+ return (
+
+
+ {
+ setSearchWord(word);
+ handleSearch(word);
+ }}
+ />
+
+
+
+ {searchWord !== "" && searchWord !== item1 && (
+ <>
+
+
+ "{searchWord}"에 대한 비교 분석 결과입니다.
+
+
+
+
+ 검색량 추이
+
+
+
+
+
+
+ 성별 검색 비중
+
+
+
+
+
+
+
+ 연령별 검색 비중 TOP 3
+
+
+
+
+
+
+
+
+ 연관어 비교
+
+
+ 공통 키워드
+
+
+
+
+
+
+ 관련 콘텐츠
+
+
+
+ )}
+
+ );
+};
+
+export default ComparePage;
+
+const Layout = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 100%;
+ justify-content: center;
+ align-items: center;
+ padding-top: 100px;
+ padding-bottom: 200px;
+ gap: 1.38rem;
+`;
+const SearchText = styled.div`
+ font-size: 1.4rem;
+ font-weight: 500;
+ color: ${({ theme }) => theme.colors.white};
+ margin: 2rem 0;
+ span {
+ color: ${({ theme }) => theme.colors.mainLight1};
+ }
+`;
+const ContentWrapper = styled.div<{ width: string }>`
+ width: ${(props) => props.width};
+ padding: 2.25rem 2.5rem;
+ border-radius: 1.875rem;
+ background: #212121;
+`;
+const ContentContainer = styled.div<{ width: string }>`
+ width: ${(props) => props.width};
+ padding: 2.25rem 2.5rem;
+ border-radius: 1.875rem;
+ background: #212121;
+ display: flex;
+ flex-direction: column;
+`;
+
+const TitleBox = styled.div`
+ display: flex;
+ justify-content: space-between;
+ align-items: center;
+ margin-bottom: 2.5rem;
+`;
+
+const TitleBottomBox = styled.div`
+ display: flex;
+ align-items: center;
+ gap: 2rem;
+ margin-bottom: 2.5rem;
+`;
+
+const ImageBottomBox = styled.div`
+ display: flex;
+ align-items: center;
+ gap: 0.5rem;
+`;
+
+const Title = styled.div<{ marginBottom?: string }>`
+ display: inline-flex;
+ padding: 0.6875rem 1.5rem;
+ justify-content: center;
+ align-items: center;
+ gap: 0.0625rem;
+ border-radius: 1.875rem;
+ background: #383838;
+ color: ${({ theme }) => theme.colors.white};
+ font-size: 1rem;
+ font-style: normal;
+ font-weight: 400;
+ line-height: normal;
+ margin-bottom: ${(props) => props.marginBottom};
+ width: fit-content;
+`;
+
+const ChartBox = styled.div`
+ display: flex;
+ justify-content: center;
+ gap: 8rem;
+`;
+
+const ImageBox = styled.div`
+ display: flex;
+ justify-content: center;
+`;
+
+const Text = styled.div`
+ font-size: 1rem;
+ font-weight: 500;
+ color: ${({ theme }) => theme.colors.white};
+ margin: 4rem 0 2rem 0;
+`;
+
+const TrendSearchBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 60%;
+`;
diff --git a/src/components/trend/CompareRadialChart.tsx b/src/components/trend/CompareRadialChart.tsx
new file mode 100644
index 0000000..cbf24fb
--- /dev/null
+++ b/src/components/trend/CompareRadialChart.tsx
@@ -0,0 +1,101 @@
+"use client";
+import { colors } from "@/styles/theme";
+import React, { useState } from "react";
+import Chart from "react-apexcharts";
+import styled from "styled-components";
+
+interface CompareRadialChartProps {
+ label: string;
+ woman: number;
+ man: number;
+}
+
+const CompareRadialChart = (props: CompareRadialChartProps) => {
+ const { label, woman, man } = props;
+ const [series, setSeries] = useState([woman, man]);
+
+ const options = {
+ colors: [colors.main, colors.secondary],
+ labels: [` 여성 ${series[0]}%`, ` 남성 ${series[1]}%`],
+ legend: {
+ show: true,
+ position: "bottom" as "bottom",
+ floating: true,
+ fontSize: "14px",
+ fontFamily: "Noto Sans KR",
+ fontWeight: 400,
+ labels: {
+ colors: colors.white,
+ },
+ },
+ plotOptions: {
+ radialBar: {
+ inverseOrder: false,
+ startAngle: -30,
+ endAngle: 330,
+ offsetX: 0,
+ offsetY: 0,
+ track: {
+ show: true,
+ background: "#323232",
+ strokeWidth: "97%",
+ opacity: 1,
+ margin: 10,
+ dropShadow: {
+ enabled: false,
+ top: 0,
+ left: 0,
+ blur: 3,
+ opacity: 0.5,
+ },
+ },
+ hollow: {
+ size: "35%", // 내부 원 크기
+ },
+ dataLabels: {
+ show: false, // 가운데 값 안보이게
+ name: {
+ show: true,
+ fontSize: "22px",
+ fontFamily: "Noto Sans KR",
+ offsetY: 0,
+ },
+ },
+ },
+ },
+ stroke: {
+ lineCap: "round" as "round",
+ },
+ };
+
+ return (
+ <>
+
+
+
+
+
+ );
+};
+
+export default CompareRadialChart;
+
+const Layout = styled.div`
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+`;
+
+const Label = styled.div`
+ padding: 0.5rem 1rem;
+ color: ${({ theme }) => theme.colors.white};
+ border: 1px solid ${({ theme }) => theme.colors.white};
+ border-radius: 100px;
+ width: fit-content;
+`;
diff --git a/src/components/trend/CompareTop.tsx b/src/components/trend/CompareTop.tsx
new file mode 100644
index 0000000..e823f20
--- /dev/null
+++ b/src/components/trend/CompareTop.tsx
@@ -0,0 +1,63 @@
+import { useEffect, useState } from "react";
+import { styled } from "styled-components";
+
+interface CompareTopProps {
+ item1?: string;
+ item2?: string;
+ item3?: string;
+}
+
+const CompareTop = (props: CompareTopProps) => {
+ const { item1, item2, item3 } = props;
+
+ const [one, setOne] = useState(false);
+ const [two, setTwo] = useState(false);
+ const [three, setThree] = useState(false);
+
+ useEffect(() => {
+ if (item1) {
+ setOne(true);
+ }
+ if (item2) {
+ setTwo(true);
+ }
+ if (item3) {
+ setThree(true);
+ }
+ }, [item1, item2, item3]);
+
+ return (
+
+
+ VS
+
+ VS
+
+
+ );
+};
+
+export default CompareTop;
+
+const Layout = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 1.5rem;
+ margin: 2rem 0 8rem 0;
+ div {
+ font-size: 1rem;
+ color: ${({ theme }) => theme.colors.white};
+ }
+`;
+
+const Button = styled.button<{ color: boolean }>`
+ border-radius: 100px;
+ padding: 0.7rem 3.5rem;
+ white-space: nowrap;
+ background: ${({ color, theme }) => (color ? theme.colors.main : "#393939")};
+ cursor: pointer;
+ color: ${({ color, theme }) =>
+ color ? theme.colors.white : theme.colors.grey1};
+ border: none;
+`;
diff --git a/src/components/trend/ItemPage.tsx b/src/components/trend/ItemPage.tsx
index 710accc..22954ce 100644
--- a/src/components/trend/ItemPage.tsx
+++ b/src/components/trend/ItemPage.tsx
@@ -4,13 +4,14 @@ import styled from "styled-components";
import { LineChart } from "./LineChart";
import RadialChart from "./RadialChart";
import BarChart from "./BarChart";
-import BrandReputationIndex from "./BrandReputationIndex";
import RelatedHashTag from "./RelatedHashTag";
-import TrendPeopleSearch from "./TrendSearch";
+import TrendSearch from "./PeopleSearch";
import { useState } from "react";
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";
@@ -19,13 +20,16 @@ const ItemPage = () => {
return (
-
+
+
+
+
{searchName !== "" && (
<>
@@ -137,3 +141,9 @@ const InlineContent = styled.div`
justify-content: center;
gap: 1.56rem;
`;
+
+const TrendSearchBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 60%;
+`;
diff --git a/src/components/trend/TrendPage.tsx b/src/components/trend/PeoplePage.tsx
similarity index 83%
rename from src/components/trend/TrendPage.tsx
rename to src/components/trend/PeoplePage.tsx
index e09612d..40a2da7 100644
--- a/src/components/trend/TrendPage.tsx
+++ b/src/components/trend/PeoplePage.tsx
@@ -7,25 +7,30 @@ import RadialChart from "./RadialChart";
import BarChart from "./BarChart";
import BrandReputationIndex from "./BrandReputationIndex";
import RelatedHashTag from "./RelatedHashTag";
-import TrendSearch from "./TrendSearch";
+import TrendSearch from "./PeopleSearch";
import RelatedContents from "./RelatedContents";
import { useState } from "react";
import TrendTop from "./TrendTop";
import ToggleButton from "../common/ToggleButton";
+import { recentSearchData, relatedContentData } from "@/lib/trend/trendData";
+import RecentSearchBox from "./RecentSearchBox";
const TrendPage = () => {
const [searchName, setSearchName] = useState("");
return (
-
+ placeholder="예) 유재석, 라이즈, 최민식"
+ src="/trend/peopleAnalysis.png"
+ setSearchName={setSearchName}
+ />
+
+
{searchName !== "" && (
<>
@@ -67,7 +72,7 @@ const TrendPage = () => {
관련 콘텐츠
-
+
더보기
@@ -150,3 +155,9 @@ const PlusButtonBox = styled.div`
color: #b4b4b4;
}
`;
+
+const TrendSearchBox = styled.div`
+ display: flex;
+ flex-direction: column;
+ width: 60%;
+`;
diff --git a/src/components/trend/TrendSearch.tsx b/src/components/trend/PeopleSearch.tsx
similarity index 81%
rename from src/components/trend/TrendSearch.tsx
rename to src/components/trend/PeopleSearch.tsx
index 04fd31d..4862fe7 100644
--- a/src/components/trend/TrendSearch.tsx
+++ b/src/components/trend/PeopleSearch.tsx
@@ -1,9 +1,7 @@
"use client";
import styled from "styled-components";
-import RecentSearchContent from "./RecentSearchContent";
import Image from "next/image";
-import { recentSearchData } from "@/lib/trend/trendData";
import { useState } from "react";
interface TrendPeopleSearchProps {
@@ -46,12 +44,6 @@ const TrendSearch = (props: TrendPeopleSearchProps) => {
onKeyDown={handleKeyDown}
/>
-
-
- {recentSearchData.map((recentSearch) => (
-
- ))}
-
);
};
@@ -61,10 +53,9 @@ export default TrendSearch;
const Layout = styled.div`
display: flex;
flex-direction: column;
- width: 50%;
justify-content: center;
align-items: center;
- padding-bottom: 200px;
+ width: 100%;
`;
const SubTitle = styled.div`
@@ -102,7 +93,7 @@ const SearchImage = styled.div`
justify-content: center;
position: absolute;
left: 2.5rem;
- top: 1.4rem;
+ top: 1.1rem;
`;
const SearchBar = styled.input`
@@ -110,17 +101,9 @@ const SearchBar = styled.input`
width: 100%;
height: 100%;
background: #313131;
- padding: 1.5rem 5rem;
+ padding: 1.2rem 5rem;
outline: none;
border-radius: 100px;
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/trend/RecentSearchBox.tsx b/src/components/trend/RecentSearchBox.tsx
new file mode 100644
index 0000000..d6e140b
--- /dev/null
+++ b/src/components/trend/RecentSearchBox.tsx
@@ -0,0 +1,31 @@
+import { styled } from "styled-components";
+import RecentSearchContent from "./RecentSearchContent";
+
+interface RecentSearchBoxProps {
+ data: {
+ id: number;
+ name: string;
+ }[];
+}
+
+const RecentSearchBox = (props: RecentSearchBoxProps) => {
+ const { data } = props;
+
+ return (
+
+ {data.map((recentSearch) => (
+
+ ))}
+
+ );
+};
+
+export default RecentSearchBox;
+
+const RecentSearchBoxStyle = styled.div`
+ width: 100%;
+ display: flex;
+ justify-content: start;
+ gap: 0.5rem;
+ margin: 1rem 0 8rem 0;
+`;
diff --git a/src/components/trend/RelatedContents.tsx b/src/components/trend/RelatedContents.tsx
index 5bf6a6f..4eede47 100644
--- a/src/components/trend/RelatedContents.tsx
+++ b/src/components/trend/RelatedContents.tsx
@@ -1,11 +1,20 @@
import { styled } from "styled-components";
import RelatedContent from "./RelatedContent";
-import { relatedContentData } from "@/lib/trend/trendData";
-const RelatedContents = () => {
+interface RelatedContentProps {
+ data: {
+ title: string;
+ src: string;
+ date: string;
+ }[];
+}
+
+const RelatedContents = (props: RelatedContentProps) => {
+ const { data } = props;
+
return (
- {relatedContentData.map((relatedContent) => (
+ {data.map((relatedContent) => (