Merge pull request #34 from DDD-Community/feat/analysis_v2

Feat/analysis v2

app/(router)/analysis/amount/page.tsx

@@ -1,5 +1,9 @@
+'use client';
+
+import AmountAnalysisWrapper from '@/_components/analysis/amount/AmountAnalysisWrapper';
+
 const AmountAnalysis = () => {
-  return <p>금액별</p>;
+  return <AmountAnalysisWrapper />;
 };
 
 export default AmountAnalysis;

app/(router)/analysis/period/filter/page.tsx

@@ -0,0 +1,9 @@
+'use client';
+
+import PeriodicDateFilterWrapper from '@/_components/analysis/period/filter/PeriodicDateFilterWrapper';
+
+const PeriodAnalysis = () => {
+  return <PeriodicDateFilterWrapper />;
+};
+
+export default PeriodAnalysis;

app/(router)/analysis/rounds/page.tsx

@@ -1,5 +1,9 @@
+'use client';
+
+import RoundsAnalysisWrapper from '@/_components/analysis/rounds/RoundsAnalysisWrapper';
+
 const RoundsAnalysis = () => {
-  return <p>회차별</p>;
+  return <RoundsAnalysisWrapper />;
 };
 
 export default RoundsAnalysis;

app/_components/analysis/AnalysisMainWrapper.tsx

@@ -1,36 +1,79 @@
 'use client';
 
 import palette from '@/_styles/palette';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import styled from 'styled-components';
 import ResultAmountBannerList from './ResultAmountBannerList';
 import AnalyticsDashboardMenu from './AnalyticsDashboardMenu';
 import Image from 'next/image';
 import PolygonIcon from '@assets/svg/polygon.svg';
+import ArrowDropDownIcon from '@assets/svg/arrowDropDown.svg';
+import AuthProvider from '../providers/AuthProvider';
+import useLatestNumber from '@/_hooks/useLatestNumber';
+import { parse } from 'date-fns';
+import BottomSheet from '../common/BottomSheet';
+import RoundSelector from './RoundSelector';
+import { LatestNumberResponseType } from '@/_types/analysis';
 
-type AnalysisMainWrapperProps = {};
+const AnalysisMainWrapper: React.FC = () => {
+  const { latestNumbers, isLoading } = useLatestNumber();
+  const [isOpenScrapBottomSheet, setIsOpenScrapBottomSheet] = useState(false);
+  const [selectNumbers, setSelectNumbers] = useState<LatestNumberResponseType>();
 
-const AnalysisMainWrapper: React.FC<AnalysisMainWrapperProps> = () => {
-  // const test = [3, 5, 7, 9, 1, 13, 4]; //? res값 정제
+  useEffect(() => {
+    if (!latestNumbers) {
+      return console.log('no number');
+    }
+    setSelectNumbers(latestNumbers);
+  }, [latestNumbers]);
 
-  return (
-    <AnalysisMainWrapperBlock>
-      <AnalysisMainTitle>
-        7월 2주차 1078회
-        <br />
-        당첨번호를 확인하세요.
-      </AnalysisMainTitle>
+  const parsedDate = parse(`${selectNumbers?.drwt_date}`, 'yyyy-MM-dd', new Date());
+  const monthNumber = parsedDate.getMonth() + 1;
+  const weekNumber = Math.ceil(parsedDate.getDate() / 7);
+
+  if (isLoading) return <p>loading</p>; //로딩 UI 필요
+  //latestNumbers 없을 때 행동
 
-      <WeekWinningNumberBox>
-        <WeekWinningNumber>3 5 7 9 1 13 4</WeekWinningNumber>{' '}
-        <WeekWinningBonusNumber>34</WeekWinningBonusNumber>
-        <PolygonIconSVG />
-      </WeekWinningNumberBox>
+  return (
+    <AuthProvider>
+      <AnalysisMainWrapperBlock>
+        <AnalysisMainTitle>
+          <Text>
+            {monthNumber}월 {weekNumber}주차{' '}
+            <SelectorButton onClick={() => setIsOpenScrapBottomSheet(true)}>
+              {selectNumbers?.drwt_no}회 <ArrowDropDownIcon />
+            </SelectorButton>
+          </Text>
+          당첨번호를 확인하세요.
+        </AnalysisMainTitle>
+        <WeekWinningNumberBox>
+          {selectNumbers &&
+            new Array(6)
+              .fill('')
+              .map((_, i) => (
+                <WeekWinningNumber key={i}>{selectNumbers[`drwt_no${i + 1}`]}</WeekWinningNumber>
+              ))}
+          <WeekWinningBonusNumber>{selectNumbers?.bnus_no}</WeekWinningBonusNumber>
+          <PolygonIconSVG />
+        </WeekWinningNumberBox>
+        <Image src="/assets/images/analysisMain.png" alt="분석페이지" width="120" height="120" />
+        <ResultAmountBannerList roundNumbers={selectNumbers} />
 
-      <Image src="/assets/images/analysisMain.png" alt="분석페이지" width="120" height="120" />
-      <ResultAmountBannerList />
-      <AnalyticsDashboardMenu />
-    </AnalysisMainWrapperBlock>
+        <AnalyticsDashboardMenu />
+      </AnalysisMainWrapperBlock>
+      <BottomSheet
+        isOpen={isOpenScrapBottomSheet}
+        onOpen={() => setIsOpenScrapBottomSheet(true)}
+        onClose={() => setIsOpenScrapBottomSheet(false)}
+        title="회차 선택"
+      >
+        <RoundSelector
+          lastestRound={latestNumbers?.drwt_no}
+          setIsOpenScrapBottomSheet={setIsOpenScrapBottomSheet}
+          setSelectNumbers={setSelectNumbers}
+        />
+      </BottomSheet>
+    </AuthProvider>
   );
 };
 
@@ -42,14 +85,28 @@ const AnalysisMainWrapperBlock = styled.div`
 `;
 
 const AnalysisMainTitle = styled.p`
+  display: flex;
+  flex-direction: column;
+  align-items: center;
   font-size: 20px;
   font-weight: bold;
   line-height: 26px;
-  text-align: center;
   padding: 15px 0;
   margin-bottom: 16px;
 `;
 
+const Text = styled.p`
+  display: flex;
+  gap: 5px;
+`;
+
+const SelectorButton = styled.button`
+  display: flex;
+  font-size: 20px;
+  font-weight: bold;
+  color: ${palette.orange_20};
+`;
+
 const PolygonIconSVG = styled(PolygonIcon)`
   position: absolute;
   bottom: -10px;
@@ -64,12 +121,13 @@ const WeekWinningNumberBox = styled.div`
   border-radius: 400px;
   margin-bottom: 21px;
   position: relative;
+  display: flex;
+  gap: 10px;
 `;
 
 const WeekWinningNumber = styled.span`
   color: ${palette.grey_20};
   font-size: 20px;
-  letter-spacing: 6px;
   font-weight: bold;
 `;
 const WeekWinningBonusNumber = styled.span`

app/_components/analysis/AnalyticsDashboardMenu.tsx

@@ -21,7 +21,7 @@ const AnalyticsDashboardMenu: React.FC<AnalyticsDashboardMenuProps> = () => {
         </div>
       </HorizontalMenuBox>
       <VerticalMenuWrapper>
-        <VerticalMenuBox href="/analysis/amount">
+        <VerticalMenuBox href="/analysis/amount?type=desc">
           <AmountIcon />
           <VerticalTitle>당첨금액별</VerticalTitle>
           <Description>금액이 높은 순으로 조회하기</Description>

app/_components/analysis/ResultAmountBannerList.tsx

@@ -2,54 +2,31 @@ import React from 'react';
 import styled from 'styled-components';
 import palette from '@/_styles/palette';
 import { Swiper, SwiperSlide } from 'swiper/react';
+import useLatestNumber from '@/_hooks/useLatestNumber';
+import { LatestNumberResponseType } from '@/_types/analysis';
 
-type ResultAmountBannerListProps = {};
-
-const ResultAmountBannerList: React.FC<ResultAmountBannerListProps> = () => {
-  const testList = [
-    {
-      count: 1,
-      amount: 2539849237,
-    },
-    {
-      count: 1,
-      amount: 2539849237,
-    },
-    {
-      count: 1,
-      amount: 2539849237,
-    },
-    {
-      count: 1,
-      amount: 2539849237,
-    },
-    {
-      count: 1,
-      amount: 2539849237,
-    },
-    {
-      count: 1,
-      amount: 2539849237,
-    },
-  ];
+type ResultAmountBannerListProps = {
+  roundNumbers: LatestNumberResponseType;
+};
 
+const ResultAmountBannerList: React.FC<ResultAmountBannerListProps> = ({ roundNumbers }) => {
   return (
     <ResultAmountBannerListBlock
-      direction={'horizontal'}
-      slidesPerView={'auto'}
+      direction="horizontal"
+      slidesPerView="auto"
       className="swiper-banner"
     >
-      {testList.map((test, i) => (
-        <SwiperSlide key={i}>
+      {roundNumbers && (
+        <SwiperSlide>
           <ResultAmountBannerItem>
             <ItemInner>
-              <p>{i + 1}등</p>
-              <p>{test.count}명</p>
+              <p>1등</p>
+              <p>{roundNumbers.first_win_count}명</p>
             </ItemInner>
-            <ItemAmount>{test.amount.toLocaleString()}원</ItemAmount>
+            <ItemAmount>{roundNumbers.first_win_amount.toLocaleString()}원</ItemAmount>
           </ResultAmountBannerItem>
         </SwiperSlide>
-      ))}
+      )}
     </ResultAmountBannerListBlock>
   );
 };
@@ -71,9 +48,10 @@ const ResultAmountBannerListBlock = styled(Swiper)`
 `;
 
 const ResultAmountBannerItem = styled.li`
+  width: 108px;
   display: flex;
   flex-direction: column;
-  padding: 20px 14px;
+  padding: 20px 15px;
   background-color: ${palette.white};
   border-radius: 10px;
 `;

app/_components/analysis/RoundSelector.tsx

@@ -0,0 +1,56 @@
+import instance from '@/_apis/core';
+import { LatestNumberResponseType } from '@/_types/analysis';
+import React from 'react';
+import styled from 'styled-components';
+
+type RoundSelectorProps = {
+  lastestRound: number;
+  setIsOpenScrapBottomSheet: React.Dispatch<React.SetStateAction<boolean>>;
+  setSelectNumbers: React.Dispatch<React.SetStateAction<LatestNumberResponseType | undefined>>;
+};
+
+const RoundSelector: React.FC<RoundSelectorProps> = ({
+  lastestRound,
+  setIsOpenScrapBottomSheet,
+  setSelectNumbers,
+}) => {
+  const selectOptions = Array.from({ length: lastestRound }, (_, index) => lastestRound - index);
+
+  const onSelect = async (drwtNo: number) => {
+    try {
+      const data = await instance.get<undefined, LatestNumberResponseType>(`/api/number`, {
+        params: {
+          drwtNo,
+        },
+      });
+
+      setSelectNumbers(data);
+    } catch (err) {
+      console.log('err', err);
+    }
+    setIsOpenScrapBottomSheet(false);
+  };
+
+  return (
+    <RoundSelectorBlock>
+      {selectOptions.map(round => (
+        <Item key={round} onClick={() => onSelect(round)}>
+          {round}
+        </Item>
+      ))}
+    </RoundSelectorBlock>
+  );
+};
+
+const RoundSelectorBlock = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 26px;
+`;
+
+const Item = styled.button`
+  text-align: center;
+  font-size: 20px;
+`;
+
+export default RoundSelector;

app/_components/analysis/amount/AmountAnalysisWrapper.tsx

@@ -0,0 +1,45 @@
+import NavTabs from '@/_components/common/NavTabs';
+import React from 'react';
+import styled from 'styled-components';
+import PrizeAmountList from './PrizeAmountList';
+import { useSearchParams } from 'next/navigation';
+import PrizeRankAnalysisWrapper from './PrizeRankAnalysisWrapper';
+import { SortOption } from '@/_types/analysis';
+
+type AmountAnalysisWrapperProps = {};
+
+const AmountAnalysisWrapper: React.FC<AmountAnalysisWrapperProps> = () => {
+  const searchParams = useSearchParams();
+
+  const tabOptions = [
+    {
+      label: '당첨금액 높은 순',
+      queryParams: 'type',
+      value: 'desc',
+    },
+    {
+      label: '당첨금액 낮은 순',
+      queryParams: 'type',
+      value: 'asc',
+    },
+  ];
+
+  return (
+    <AmountAnalysisWrapperBlock>
+      <NavTabs tabOptions={tabOptions} />
+      <PrizeAmountList />
+      <Line />
+      <PrizeRankAnalysisWrapper />
+    </AmountAnalysisWrapperBlock>
+  );
+};
+
+const AmountAnalysisWrapperBlock = styled.div``;
+
+const Line = styled.div`
+  width: 100%;
+  background-color: #eff3f8;
+  height: 10px;
+`;
+
+export default AmountAnalysisWrapper;