Merge pull request #20 from Kusitms-28th-Kobaco-B/feat/#16

[feat] 트렌드 분석 페이지
Kusitms-28th-Kobaco-B · Mar 7, 2024 · 71b972b · 71b972b
2 parents 4ea1418 + 0eba34f
commit 71b972b
Show file tree

Hide file tree

Showing 7 changed files with 516 additions and 96 deletions.
diff --git a/src/components/main/CardSlider.tsx b/src/components/main/CardSlider.tsx
@@ -42,7 +42,7 @@ export const CardSlider = () => {
             </CardContents>
           </CardWrapper>
           <CardInfoBlock>
-            <CardInfo>유해령 | 2024.09.07</CardInfo>
+            <CardInfo>김서윤 | 2024.09.07</CardInfo>
             <CardInfo>조회 1900</CardInfo>
           </CardInfoBlock>
         </CardRegion>
@@ -58,7 +58,7 @@ export const CardSlider = () => {
             </CardContents>
           </CardWrapper>
           <CardInfoBlock>
-            <CardInfo>유해령 | 2024.09.07</CardInfo>
+            <CardInfo>김예찬 | 2024.09.07</CardInfo>
             <CardInfo>조회 1900</CardInfo>
           </CardInfoBlock>
         </CardRegion>
@@ -73,7 +73,7 @@ export const CardSlider = () => {
             </CardContents>
           </CardWrapper>
           <CardInfoBlock>
-            <CardInfo>유해령 | 2024.09.07</CardInfo>
+            <CardInfo>박예진 | 2024.09.07</CardInfo>
             <CardInfo>조회 1900</CardInfo>
           </CardInfoBlock>
         </CardRegion>
@@ -87,7 +87,7 @@ export const CardSlider = () => {
             </CardContents>
           </CardWrapper>
           <CardInfoBlock>
-            <CardInfo>유해령 | 2024.09.07</CardInfo>
+            <CardInfo>백건우 | 2024.09.07</CardInfo>
             <CardInfo>조회 1900</CardInfo>
           </CardInfoBlock>
         </CardRegion>
@@ -97,8 +97,7 @@ export const CardSlider = () => {
           <CardWrapper>
             <CategoryButton>서비스 선택</CategoryButton>
             <CardContents>
-              {`‘내 방에서 만나는 예술 작품, 내 꿈과 미래를 그리는 공간,
-                멋진 가구 하나면 충분하다.’`}
+              {`‘아이들 학습 수준에 맞춰 개별 맞춤 수업이 가능해요.\n체계적인 관리를 통해 성적 향상도 쑥쑥!’`}
             </CardContents>
           </CardWrapper>
           <CardInfoBlock>
@@ -113,8 +112,6 @@ export const CardSlider = () => {
 
 const SwiperBlock = styled(Swiper)`
   margin-top: 3.75rem;
-  align-items: center;
-  right: 0.5rem;
 `;
 const CardRegion = styled.div`
   display: flex;

diff --git a/src/components/trend/BarChart.tsx b/src/components/trend/BarChart.tsx
@@ -16,13 +16,36 @@ const BarChart = () => {
       ratio: 12.5,
     },
   ];
+  const ratioSum = data[0].ratio + data[1].ratio + data[2].ratio;
   return (
     <>
       <Label>{`${data[0].category} ${data[0].ratio}%`}</Label>
-      <BarWrapper>
-        <Bar height={"20px"} />
-        <Label>{`${data[0].category}`}</Label>
-      </BarWrapper>
+      <ChartWrapper>
+        <BarWrapper>
+          <Ratio>{`${data[0].ratio}%`}</Ratio>
+          <Bar
+            height={`${(data[0].ratio / ratioSum) * 500}px`}
+            color={colors.main}
+          />
+          <Legend weight={700}>{`${data[0].category}`}</Legend>
+        </BarWrapper>
+        <BarWrapper>
+          <Ratio>{`${data[1].ratio}%`}</Ratio>
+          <Bar
+            height={`${(data[1].ratio / ratioSum) * 500}px`}
+            color={colors.grey05}
+          />
+          <Legend weight={500}>{`${data[1].category}`}</Legend>
+        </BarWrapper>
+        <BarWrapper>
+          <Ratio>{`${data[2].ratio}%`}</Ratio>
+          <Bar
+            height={`${(data[2].ratio / ratioSum) * 500}px`}
+            color={colors.grey05}
+          />
+          <Legend weight={500}>{`${data[2].category}`}</Legend>
+        </BarWrapper>
+      </ChartWrapper>
     </>
   );
 };
@@ -37,8 +60,37 @@ const Label = styled.div`
   line-height: normal;
   padding-left: 0.78rem;
 `;
-const BarWrapper = styled.div``;
-const Bar = styled.div<{ height: string }>`
+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;
+`;
+const ChartWrapper = styled.div`
+  width: 100%;
+  display: inline-flex;
+  justify-content: center;
+  gap: 2.25rem;
+  margin-top: 1.5rem;
 `;
diff --git a/src/components/trend/LineChart.tsx b/src/components/trend/LineChart.tsx
@@ -14,6 +14,7 @@ import {
   ScriptableContext,
 } from "chart.js";
 import { colors } from "@/styles/theme";
+import styled from "styled-components";
 
 ChartJS.register(
   CategoryScale,
@@ -194,8 +195,14 @@ export function LineChart() {
   };
 
   return (
-    <div>
+    <ChartWrapper>
       <Line width="1200" height="500" data={data()} options={options} />
-    </div>
+    </ChartWrapper>
   );
 }
+
+const ChartWrapper = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
diff --git a/src/components/trend/TrendPage.tsx b/src/components/trend/TrendPage.tsx
@@ -82,6 +82,7 @@ const Title = styled.div<{ marginBottom: string }>`
   line-height: normal;
   margin-bottom: ${(props) => props.marginBottom};
 `;
+
 const InlineContent = styled.div`
   display: inline-flex;
   gap: 1.56rem;

diff --git a/src/lib/data.ts b/src/lib/data.ts
@@ -75,34 +75,34 @@ export const storyBoardData = [
   [
     {
       img: "/main/story1.png",
-      writer: "유해령",
+      writer: "윤시연",
       name: "아라리 치킨",
     },
     {
       img: "/main/story2.png",
-      writer: "유해령",
+      writer: "정예진",
       name: "나르지오 워킹화",
     },
     {
       img: "/main/story3.png",
-      writer: "유해령",
+      writer: "황주희",
       name: "어드래서블 광고",
     },
   ],
   [
     {
       img: "/main/story4.png",
-      writer: "유해령",
+      writer: "김서윤",
       name: "지벤 컴페니웨어 상업광고",
     },
     {
       img: "/main/story5.png",
-      writer: "유해령",
+      writer: "김예찬",
       name: "싱그라미 마스크 상업광고",
     },
     {
       img: "/main/story6.png",
-      writer: "유해령",
+      writer: "박예진",
       name: "디지털 배너 공익광고",
     },
   ],

diff --git a/src/styles/theme.ts b/src/styles/theme.ts
@@ -15,6 +15,7 @@ export const colors = {
   white: "#ffffff",
   greyTypeMain: "#B4B4B4",
   background: "#1A1A1A",
+  grey05: "#5d5d5d",
   grey1: "#7f7f7f",
   grey2: "#B4B4B4",
   grey3: "#cecece",