Merge pull request #22 from Kusitms-28th-Kobaco-B/feat/#11

[feat] 트렌드 분석 페이지 마무리

package.json

@@ -27,6 +27,7 @@
     "react": "^18",
     "react-apexcharts": "^1.4.1",
     "react-chartjs-2": "^5.2.0",
+    "react-datepicker": "^6.2.0",
     "react-dom": "^18",
     "react-youtube": "^10.1.0",
     "recoil": "^0.7.7",
@@ -37,6 +38,7 @@
   "devDependencies": {
     "@types/node": "^20",
     "@types/react": "^18",
+    "@types/react-datepicker": "^6.0.3",
     "@types/react-dom": "^18",
     "babel-plugin-styled-components": "^2.1.4",
     "eslint": "^8",

src/components/common/ToggleButton.tsx

@@ -0,0 +1,52 @@
+import React, { useState } from "react";
+import styled from "styled-components";
+
+interface ToggleButtonProps {
+  items: string[];
+}
+
+const RadioButtons = (props: ToggleButtonProps) => {
+  const [selectedOption, setSelectedOption] = useState(1);
+  const { items } = props;
+
+  return (
+    <RadioButtonsWrapper>
+      {items.map((item, index) => (
+        <RadioButtonLabel
+          key={index}
+          selected={selectedOption === index + 1}
+          onClick={() => setSelectedOption(index + 1)}
+        >
+          {item}
+        </RadioButtonLabel>
+      ))}
+    </RadioButtonsWrapper>
+  );
+};
+
+export default RadioButtons;
+
+const RadioButtonsWrapper = styled.div`
+  display: flex;
+  jusitfy-content: space-between;
+  align-items: center;
+  gap: 0.5rem;
+  background: #383838;
+  color: #b4b4b4;
+  border-radius: 100px;
+  padding: 0.3rem;
+`;
+
+const RadioButtonLabel = styled.label<{ selected: boolean }>`
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+  background: ${({ selected }) => (selected ? "#EFEFEF" : "transparent")};
+  color: ${({ selected }) => (selected ? "#595959" : "#b4b4b4")};
+  width: 100%;
+  height: 100%;
+  text-align: center;
+  padding: 0.4rem 1.2rem;
+  border-radius: 100px;
+  transition: all 0.2s;
+`;

src/components/trend/BrandReputationIndex.tsx

@@ -1,44 +1,83 @@
 import { styled } from "styled-components";
-import Ranking from "./Ranking";
-import Container from "../common/Container";
-import { brandRequtation } from "@/lib/trend/trendData";
+import Image from "next/image";
+
+const rankData = ["이병헌", "조승우", "김수현"];
 
 const BrandReputationIndex = () => {
   return (
-    <RankingBox>
-      {brandRequtation.map((brand) => (
-        <Ranking
-          key={brand.id}
-          title={brand.title}
-          ranking={brand.ranking}
-          trend={brand.trend}
-          updown={brand.updown}
-        />
-      ))}
-    </RankingBox>
+    <>
+      <Label>
+        영화배우 부문 <span>4위</span>
+      </Label>
+      <Layout>
+        <Genre>영화배우 부문</Genre>
+        <LineBox>
+          <Image src="/trend/line1.svg" alt="line" width={50} height={30} />
+          <Image src="/trend/line2.svg" alt="line" width={50} height={30} />
+          <Image src="/trend/line3.svg" alt="line" width={50} height={30} />
+        </LineBox>
+        <RankBox>
+          {rankData.map((name, index) => (
+            <Rank>
+              <span>{index + 1}위</span> {name}
+            </Rank>
+          ))}
+        </RankBox>
+      </Layout>
+    </>
   );
 };
 
 export default BrandReputationIndex;
 
-const BrandText = styled.div`
+const Layout = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 3rem;
+`;
+
+const Label = styled.div`
+  color: ${({ theme }) => theme.colors.grey5};
+  font-size: 2rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  padding-left: 0.78rem;
+  span {
+    color: ${({ theme }) => theme.colors.main};
+  }
+`;
+
+const Genre = styled.div`
+  color: ${({ theme }) => theme.colors.grey5};
   font-size: 1.2rem;
   font-weight: 700;
-  margin-bottom: 2rem;
+  background: ${({ theme }) => theme.colors.main};
+  border-radius: 100px;
+  width: 40%;
+  text-align: center;
+  padding: 0.6rem 0;
+  margin-left: 0.78rem;
 `;
 
-const RankingBox = styled.div`
+const LineBox = styled.div`
   display: flex;
-  flex-wrap: wrap;
-  justify-content: center;
+  flex-direction: column;
   gap: 1rem;
+`;
 
-  & > * {
-    flex-basis: calc(50% - 0.5rem); // 요소의 초기 크기를 50%로 설정
-    margin-bottom: 1rem; // 각 요소의 아래 여백 설정
-  }
+const RankBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 3rem;
+  margin-right: 2rem;
+`;
 
-  & > *:first-child {
-    flex-basis: 100%; // 첫 번째 요소의 크기를 100%로 설정
+const Rank = styled.div`
+  font-size: 1.2rem;
+  color: ${({ theme }) => theme.colors.white};
+  span {
+    color: ${({ theme }) => theme.colors.mainLight1};
   }
 `;

src/components/trend/RelatedContent.tsx

@@ -66,6 +66,7 @@ const SrcButton = styled.button`
   font-size: 0.8rem;
   border: none;
   background: ${({ theme }) => theme.colors.main};
+  color: ${({ theme }) => theme.colors.white};
 `;
 
 const DateText = styled.div`

src/components/trend/RelatedContents.tsx

@@ -1,57 +1,12 @@
 import { styled } from "styled-components";
 import RelatedContent from "./RelatedContent";
-
-const relatedContentData = [
-  {
-    id: 1,
-    title:
-      "[#떡상ing] 대배우 이병헌? 놉! 아랑곳하지 않는 이민정ㅋㅋㅋ😁 20분 내내 끊임없이 소환되는 남편 이병헌과의 티키타카.....",
-    src: "유튜브",
-    date: "2022.03.01",
-  },
-  {
-    id: 2,
-    title:
-      "[#떡상ing] 대배우 이병헌? 놉! 아랑곳하지 않는 이민정ㅋㅋㅋ😁 20분 내내 끊임없이 소환되는 남편 이병헌과의 티키타카.....",
-    src: "블로그",
-    date: "2022.03.01",
-  },
-  {
-    id: 3,
-    title:
-      "[#떡상ing] 대배우 이병헌? 놉! 아랑곳하지 않는 이민정ㅋㅋㅋ😁 20분 내내 끊임없이 소환되는 남편 이병헌과의 티키타카.....",
-    src: "네이버 기사",
-    date: "2022.03.01",
-  },
-  {
-    id: 4,
-    title:
-      "[#떡상ing] 대배우 이병헌? 놉! 아랑곳하지 않는 이민정ㅋㅋㅋ😁 20분 내내 끊임없이 소환되는 남편 이병헌과의 티키타카.....",
-    src: "유튜브",
-    date: "2022.03.01",
-  },
-  {
-    id: 5,
-    title:
-      "[#떡상ing] 대배우 이병헌? 놉! 아랑곳하지 않는 이민정ㅋㅋㅋ😁 20분 내내 끊임없이 소환되는 남편 이병헌과의 티키타카.....",
-    src: "유튜브",
-    date: "2022.03.01",
-  },
-  {
-    id: 6,
-    title:
-      "[#떡상ing] 대배우 이병헌? 놉! 아랑곳하지 않는 이민정ㅋㅋㅋ😁 20분 내내 끊임없이 소환되는 남편 이병헌과의 티키타카.....",
-    src: "유튜브",
-    date: "2022.03.01",
-  },
-];
+import { relatedContentData } from "@/lib/trend/trendData";
 
 const RelatedContents = () => {
   return (
     <RelatedContentBox>
       {relatedContentData.map((relatedContent) => (
         <RelatedContent
-          id={relatedContent.id}
           title={relatedContent.title}
           src={relatedContent.src}
           date={relatedContent.date}