feat: graph page outline (#29)

src/pages/chart/Graphs.tsx

@@ -0,0 +1,116 @@
+import styled from 'styled-components';
+import { Card } from '../../components/common-components/Card/Card';
+import AgeChart from '../../components/chart/AgeChart';
+import WeekChart from '../../components/chart/WeekChart';
+import MonthChart from '../../components/chart/MonthChart';
+import SexChart from './../../components/chart/SexChart';
+import MonthData from '../../components/chart/MonthData';
+import SexData from '../../components/chart/SexData';
+import AgeData from '../../components/chart/AgeData';
+import WeekData from '../../components/chart/WeekData';
+import { CardGraph } from './GraphCard';
+import KeywordChart from '../../components/chart/KeywordChart';
+
+interface ChartContainerProps {
+  rightAlign?: boolean;
+  SexChart?: boolean;
+}
+
+interface MyComponentProps {}
+
+export const GraphCard: React.FC<MyComponentProps> = () => {
+  return (
+    <StyledContainer>
+      <InnerContainer>
+        <Card title="검색통계">
+          <CardContainer>
+            <GraphContainer>
+              <CardGraph
+                title="연령별 검색 비율"
+                subTitle="가 가장 많이 검색했네요!"
+                additionalText={<AgeData />}
+              >
+                <ChartContainer rightAlign>
+                  <AgeChart />
+                </ChartContainer>
+              </CardGraph>
+              <CardGraph
+                title="성별 검색 비율"
+                subTitle="이 더 많이 검색했네요!"
+                additionalText={<SexData />}
+              >
+                <ChartContainer rightAlign>
+                  <SexChart />
+                </ChartContainer>
+              </CardGraph>
+            </GraphContainer>
+            <GraphContainer>
+              <CardGraph
+                title="월별 검색 비율"
+                subTitle="에 가장 많이 검색했네요!"
+                additionalText={<MonthData />}
+              >
+                <ChartContainer>
+                  <MonthChart />
+                </ChartContainer>
+              </CardGraph>
+              <CardGraph
+                title="요일별 검색 비율"
+                subTitle="요일에 가장 많이 검색했네요!"
+                additionalText={<WeekData />}
+              >
+                <ChartContainer>
+                  <WeekChart />
+                </ChartContainer>
+              </CardGraph>
+            </GraphContainer>
+          </CardContainer>
+        </Card>
+        <Card
+          title="검색 통계"
+          subTitle="그래프를 클릭하면 해당 월의 일간 상세 검색량을 볼 수 있습니다."
+        >
+          <CardGraph title="키워드 검색량 추이">
+            <ChartContainer>
+              <KeywordChart />
+            </ChartContainer>
+          </CardGraph>
+        </Card>
+      </InnerContainer>
+    </StyledContainer>
+  );
+};
+
+const StyledContainer = styled.div`
+  background: rgba(248, 248, 248, 0.97);
+  width: 100vw;
+  padding: 100px 0px;
+  box-sizing: border-box;
+`;
+
+const InnerContainer = styled.div`
+  width: 100%;
+  max-width: 1300px;
+  margin: 0 auto;
+  display: grid;
+  gap: 50px;
+  grid-template-rows: auto auto;
+`;
+
+const CardContainer = styled.div`
+  overflow: hidden;
+`;
+
+const GraphContainer = styled.div`
+  display: grid;
+  gap: 30px;
+  grid-template-columns: 1fr 1fr;
+  margin: 25px 0;
+`;
+
+const ChartContainer = styled.div<ChartContainerProps>`
+  display: flex;
+  justify-content: ${(props) => (props.rightAlign ? 'flex-end' : 'flex-start')};
+  margin-left: ${(props) =>
+    props.rightAlign && !props.SexChart ? '0' : '20px'};
+`;

src/pages/chart/TrendTab.tsx

@@ -0,0 +1,69 @@
+import React, { ChangeEvent } from 'react';
+import styled from 'styled-components';
+import { Tabs, Tab } from '@mui/material';
+
+interface TrendTabProps {
+  activeTab: number;
+  onTabChange: (newValue: number) => void;
+}
+
+export const TrendTab: React.FC<TrendTabProps> = ({
+  activeTab,
+  onTabChange,
+}) => {
+  const handleTabChange = (event: ChangeEvent<object>, newValue: number) => {
+    if (newValue !== activeTab) {
+      onTabChange(newValue);
+    }
+  };
+
+  return (
+    <PopularItemContainer>
+      <Container>
+        <StyledTabs value={activeTab} onChange={handleTabChange}>
+          <StyledTab label="검색 성향 분석" />
+          <StyledTab label="SNS 트렌드" />
+          {/* Add more tabs as needed */}
+        </StyledTabs>
+      </Container>
+    </PopularItemContainer>
+  );
+};
+
+const PopularItemContainer = styled.div`
+  background: rgba(255, 255, 255, 0.97);
+  width: 100vw;
+  padding: 50px 0px;
+  box-sizing: border-box;
+`;
+
+const Container = styled.div`
+  width: 100%;
+  max-width: 1300px;
+  margin: 0 auto;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+`;
+
+const StyledTabs = styled(Tabs)`
+  margin-top: auto;
+  margin-bottom: -50px;
+  .MuiTabs-indicator {
+    background-color: #d33b4d;
+  }
+`;
+
+const StyledTab = styled(Tab)`
+  font-size: 20px;
+  &.Mui-selected {
+    font-weight: 700 !important;
+    color: #000000 !important;
+  }
+  &.Mui-selected:not(.Mui-focusVisible) {
+    background-color: transparent;
+  }
+  &:not(.Mui-selected) {
+    font-weight: 500;
+  }
+`;

src/router/router.tsx

@@ -7,6 +7,7 @@ import { TrendPage } from '../pages/trend/TrendPage';
 import ScrollToTop from '../components/ScrollToTop';
 import { SearchPage } from '../pages/searchAnalysis/SearchPage';
 import { AdvArchivePage } from '../pages/adv-archive/AdvArchivePage';
+import { SearchChartPage } from '../pages/chart/SearchChart';
 
 export const Router = () => {
   return (
@@ -18,6 +19,7 @@ export const Router = () => {
           <Route path="/trend" element={<TrendPage />} />
           <Route path="/search" element={<SearchPage />} />
           <Route path="/adv-archive" element={<AdvArchivePage />} />
+          <Route path="/search-chart" element={<SearchChartPage />} />
 
           {/* test */}
           <Route path="/test" element={<TestChaemin />} />

src/test/jungmin.tsx

@@ -43,6 +43,7 @@ const TestJungmin = () => {
       <MonthChart />
       <WeekChart />
       <SexChart />
+
       <KeywordChart />
       <InstaChart />
     </div>