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

[feat] 트렌드분석 페이지
Kusitms-28th-Kobaco-B · Mar 6, 2024 · ee171b4 · ee171b4
2 parents b9a33f0 + 9d112b4
commit ee171b4
Show file tree

Hide file tree

Showing 23 changed files with 1,406 additions and 17 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+  "editor.formatOnSave": true
+}
diff --git a/package.json b/package.json
@@ -11,6 +11,7 @@
     "format:fix": "prettier --write --ignore-path .gitignore ."
   },
   "dependencies": {
+    "@amcharts/amcharts4": "^4.10.38",
     "@next/font": "^14.1.0",
     "@types/styled-components": "^5.1.34",
     "@typescript-eslint/eslint-plugin": "^7.1.0",

diff --git a/public/common/cross.svg b/public/common/cross.svg
diff --git a/public/common/search.svg b/public/common/search.svg
diff --git a/public/trend/peopleAnalysis.svg b/public/trend/peopleAnalysis.svg
diff --git a/public/trend/polygon1.svg b/public/trend/polygon1.svg
diff --git a/public/trend/polygon2.svg b/public/trend/polygon2.svg
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,19 +1,23 @@
+"use client";
+
 import type { Metadata } from "next";
 import "./globals.css";
 import { Noto_Sans_KR } from "@next/font/google";
 import Footer from "@/components/footer/Footer";
 import Navbar from "@/components/navbar/Navbar";
 import RecoilContextProvider from "@/context/recoilContext";
+import { ThemeProvider } from "styled-components";
+import { theme } from "@/styles/theme";
 
 const notoSansKR = Noto_Sans_KR({
   weight: ["400", "500", "700"],
   subsets: [],
 });
 
-export const metadata: Metadata = {
-  title: "Kobaco AISAC",
-  description: "Kobaco Ai analysis System for Ad Creation",
-};
+// export const metadata: Metadata = {
+//   title: "Kobaco AISAC",
+//   description: "Kobaco Ai analysis System for Ad Creation",
+// };
 
 export default function RootLayout({
   children,
@@ -25,9 +29,11 @@ export default function RootLayout({
       <meta property="og:image" content={"public/kobacoIcon.png"} />
       <body className={notoSansKR.className}>
         <RecoilContextProvider>
-          <Navbar />
-          {children}
-          <Footer />
+          <ThemeProvider theme={theme}>
+            <Navbar />
+            {children}
+            <Footer />
+          </ThemeProvider>
         </RecoilContextProvider>
       </body>
     </html>

diff --git a/src/app/trend/page.tsx b/src/app/trend/page.tsx
@@ -0,0 +1,12 @@
+import NOSSR from "@/components/common/NOSSR";
+import TrendPage from "@/components/trend/TrendPage";
+
+const Trend = async () => {
+  return (
+    <NOSSR>
+      <TrendPage />
+    </NOSSR>
+  );
+};
+
+export default Trend;
diff --git a/src/components/common/Container.tsx b/src/components/common/Container.tsx
@@ -0,0 +1,29 @@
+"use client";
+
+import { ContainerAnimation } from "@/styles/animation";
+import { motion } from "framer-motion";
+import styled from "styled-components";
+
+interface ContainerProps {
+  children: React.ReactNode;
+}
+
+const Container = ({ children }: ContainerProps) => {
+  return (
+    <ContainerStyle variants={ContainerAnimation}>{children}</ContainerStyle>
+  );
+};
+
+export default Container;
+
+const ContainerStyle = styled(motion.div)`
+  display: flex;
+  flex-direction: column;
+
+  margin: 0.5rem;
+  width: 100%;
+  padding: 2rem;
+  background: #212121;
+  border-radius: 30px;
+  color: ${({ theme }) => theme.colors.white};
+`;
diff --git a/src/components/footer/Footer.tsx b/src/components/footer/Footer.tsx
@@ -1,6 +1,6 @@
 "use client";
 
-import { footerFirstData, footerSecondData } from "@/lib/footer/FooterData";
+import { footerFirstData, footerSecondData } from "@/lib/footer/footerData";
 import { styled } from "styled-components";
 import NOSSR from "../common/NOSSR";
 

diff --git a/src/components/trend/AgeSearch.tsx b/src/components/trend/AgeSearch.tsx
@@ -0,0 +1,36 @@
+"use client";
+
+import { styled } from "styled-components";
+import Container from "../common/Container";
+
+const AgeSearch = () => {
+  return (
+    <StyledContainer>
+      <TopBox>
+        <div>연령별 검색량 TOP 3</div>
+        <span>모든 순위 확인하기</span>
+      </TopBox>
+      <ChartBox></ChartBox>
+    </StyledContainer>
+  );
+};
+
+export default AgeSearch;
+
+const StyledContainer = styled(Container)``;
+
+const TopBox = styled.div`
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 1rem;
+  font-size: 1.2rem;
+  font-weight: 700;
+  span {
+    font-size: 0.8rem;
+    color: ${({ theme }) => theme.colors.grey2};
+    cursor: pointer;
+  }
+`;
+
+const ChartBox = styled.div``;
diff --git a/src/components/trend/BrandReputationIndex.tsx b/src/components/trend/BrandReputationIndex.tsx
@@ -0,0 +1,47 @@
+import { styled } from "styled-components";
+import Ranking from "./Ranking";
+import Container from "../common/Container";
+import { brandRequtation } from "@/lib/trend/trendData";
+
+const BrandReputationIndex = () => {
+  return (
+    <Container>
+      <BrandText>브랜드 평판 지수</BrandText>
+      <RankingBox>
+        {brandRequtation.map((brand) => (
+          <Ranking
+            key={brand.id}
+            title={brand.title}
+            ranking={brand.ranking}
+            trend={brand.trend}
+            updown={brand.updown}
+          />
+        ))}
+      </RankingBox>
+    </Container>
+  );
+};
+
+export default BrandReputationIndex;
+
+const BrandText = styled.div`
+  font-size: 1.2rem;
+  font-weight: 700;
+  margin-bottom: 2rem;
+`;
+
+const RankingBox = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  gap: 1rem;
+
+  & > * {
+    flex-basis: calc(50% - 0.5rem); // 요소의 초기 크기를 50%로 설정
+    margin-bottom: 1rem; // 각 요소의 아래 여백 설정
+  }
+
+  & > *:first-child {
+    flex-basis: 100%; // 첫 번째 요소의 크기를 100%로 설정
+  }
+`;
diff --git a/src/components/trend/Ranking.tsx b/src/components/trend/Ranking.tsx
@@ -0,0 +1,77 @@
+import { styled } from "styled-components";
+
+interface RankingProps {
+  title: string;
+  ranking?: number;
+  trend?: number;
+  updown?: boolean;
+}
+
+const Ranking = (props: RankingProps) => {
+  const { title, ranking, trend, updown } = props;
+
+  return (
+    <Layout>
+      <Button ranking={ranking}>{title}</Button>
+      {ranking ? (
+        <>
+          <Rank ranking={ranking}>{ranking}위</Rank>
+          <Trend updown={updown}>
+            {trend}% {updown ? <span>▲</span> : <span>▼</span>}
+          </Trend>
+        </>
+      ) : (
+        <Blank>-</Blank>
+      )}
+    </Layout>
+  );
+};
+
+export default Ranking;
+
+const Layout = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+  gap: 0.5rem;
+  height: 100%;
+  width: 100%;
+`;
+
+const Button = styled.button<{ ranking?: number }>`
+  background: transparent;
+  border-radius: 100px;
+  border: 1px solid ${({ ranking, theme }) =>
+  ranking ? theme.colors.grey3 : theme.colors.grey1};
+  color: ${({ ranking, theme }) =>
+    ranking ? theme.colors.grey3 : theme.colors.grey1};
+  padding: 0.5rem 1rem;
+  font-size: 0.9rem;
+  font-weight: 400;
+`;
+
+const Rank = styled.div<{ ranking?: number }>`
+  font-size: 2rem;
+  font-weight: 700;
+  color: ${({ ranking, theme }) =>
+    ranking === 1 ? theme.colors.main : theme.colors.white};
+`;
+
+const Trend = styled.div<{ updown?: boolean }>`
+  font-size: 0.9rem;
+  font-weight: 400;
+  color: ${({ theme }) => theme.colors.grey1};
+  span {
+    color: ${({ updown, theme }) =>
+      updown ? theme.colors.main : theme.colors.secondary};
+    margin-left: 0.2rem;
+  }
+`;
+
+const Blank = styled.div`
+  font-size: 0.8rem;
+  color: ${({ theme }) => theme.colors.grey3};
+  font-weight: 800;
+  margin-top: 2rem;
+`;
diff --git a/src/components/trend/RecentSearchContent.tsx b/src/components/trend/RecentSearchContent.tsx
@@ -0,0 +1,33 @@
+import { styled } from "styled-components";
+import Image from "next/image";
+
+interface RecentSearchContentProps {
+  name: string;
+}
+
+const RecentSearchContent = ({ name }: RecentSearchContentProps) => {
+  return (
+    <Box>{name} 
+      <Image
+        src="/common/cross.svg"
+        alt="cross"
+        width={25}
+        height={25}
+      />
+    </Box>
+  )
+};
+
+export default RecentSearchContent;
+
+const Box = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0.3rem;
+
+  border-radius: 100px;
+  padding: 0.5rem 1.2rem;
+  cursor: pointer;
+  background: #232323;
+`;