정산 조회 카테고리 검색기능 추가 #456

codestates-seb · Sep 19, 2023 · e49a63c · e49a63c
1 parent a0b7b0f
commit e49a63c
Show file tree

Hide file tree

Showing 6 changed files with 131 additions and 15 deletions.
diff --git a/client/src/atoms/buttons/Toggle.stories.js b/client/src/atoms/buttons/Toggle.stories.js
@@ -1,8 +1,9 @@
-import Toggle from "./Toggle";
+import { useState } from "react"
+import Toggle, { ToggleCircle, ToggleContainer, ToggleWrapper } from "./Toggle"
 
 export default {
  title: 'Atoms/Button',
  component: Toggle,
 }
 
-export const ToggleTemplate = () => <Toggle/>
+export const ToggleTemplate = () => <Toggle/>
diff --git a/client/src/components/incomePage/IncomeCategory.js b/client/src/components/incomePage/IncomeCategory.js
@@ -1,8 +1,7 @@
 import React, { useState } from 'react';
-import { DropdownButton, DropdownButtonIcon, DropdownTextTypo, DropdownWrapper, ReceiptDropdownContainer } from '../receiptPage/ReceiptDropdown.style';
+import { DropdownButton, DropdownButtonIcon, DropdownContainer, DropdownMenuButton, DropdownMenuWrapper, DropdownTextTypo, DropdownWrapper, ReceiptDropdownContainer } from '../receiptPage/ReceiptDropdown.style';
 import { useSelector } from 'react-redux';
 import { styled } from 'styled-components';
-import { TextButton } from '../../atoms/buttons/Buttons';
 import { BodyTextTypo } from '../../atoms/typographys/Typographys';
 import arrowUp from '../../assets/images/icons/arrow/subscribe_arrow_up.svg';
 import arrowDown from '../../assets/images/icons/arrow/subscribe_arrow_down.svg';
@@ -22,24 +21,141 @@ const IncomeDropdownButton = styled(DropdownButton)`
 const IncomeDropdownUnitTypo = styled(BodyTextTypo)`
  margin: ${globalTokens.Spacing4.value}px ${globalTokens.Spacing8.value}px ${globalTokens.Spacing4.value}px ${globalTokens.Spacing4.value}px;
 `
+const IncomeDropdownMenuWrapper = styled(DropdownMenuWrapper)`
+ width: 100px;
+`
 
 const IncomeCategory = ({year, setYear, month, setMonth}) => {
  const isDark = useSelector(state=>state.uiSetting.isDark);
+
+ const date = new Date();
+ const currentYear = date.getFullYear();
+
  const [isYearDropdownOpen, setIsYearDropdownOpen] = useState(false);
  const [isMonthDropdownOpen, setIsMonthDropdownOpen] = useState(false);
 
+ const handleYearClick = (e) => {
+ switch(e.target.textContent) {
+ case '전체' : 
+ setYear(null);
+ setMonth(null);
+ return;
+ case `${currentYear}` : 
+ setYear(currentYear);
+ setMonth(null);
+ return;
+ case `${currentYear-1}` : 
+ setYear(`${currentYear-1}`);
+ setMonth(null);
+ return;
+ case `${currentYear-2}` : 
+ setYear(`${currentYear-2}`);
+ setMonth(null);
+ return;
+ case `${currentYear-3}` : 
+ setYear(`${currentYear-3}`);
+ setMonth(null);
+ return;
+ case `${currentYear-4}` : 
+ setYear(`${currentYear-4}`);
+ setMonth(null);
+ return;
+ default: return;
+ }
+ }
+
+ const handleMonthClick = (e) => {
+ switch(e.target.textContent) {
+ case '전체':
+ setMonth(null);
+ return;
+ case '1': 
+ setMonth(1);
+ return;
+ case '2': 
+ setMonth(2);
+ return;
+ case '3': 
+ setMonth(3);
+ return;
+ case '4':
+ setMonth(4);
+ return;
+ case '5':
+ setMonth(5);
+ return;
+ case '6':
+ setMonth(6);
+ return;
+ case '7':
+ setMonth(7);
+ return;
+ case '8':
+ setMonth(8);
+ return;
+ case '9':
+ setMonth(9);
+ return;
+ case '10':
+ setMonth(10);
+ return;
+ case '11':
+ setMonth(11);
+ return;
+ case '12':
+ setMonth(12);
+ return;
+ default: return;
+ }
+ }
+
  return (
  <ReceiptDropdownContainer>
  <IncomeDropdownWrapper>
- <IncomeDropdownButton isDark={isDark}>
- <DropdownTextTypo isDark={isDark}>{year}</DropdownTextTypo>
- <DropdownButtonIcon src={isYearDropdownOpen?arrowUp:arrowDown}/>
- </IncomeDropdownButton>
+ <DropdownContainer>
+ <IncomeDropdownButton 
+ isDark={isDark} 
+ onClick={()=>{setIsYearDropdownOpen(!isYearDropdownOpen)}}
+ onBlur={()=>{setIsYearDropdownOpen(false)}}>
+ <DropdownTextTypo isDark={isDark}>{year===null?'전체':year}</DropdownTextTypo>
+ <DropdownButtonIcon src={isYearDropdownOpen?arrowUp:arrowDown}/>
+ </IncomeDropdownButton>
+ <IncomeDropdownMenuWrapper isDark={isDark} isDropdownOpen={isYearDropdownOpen}>
+ <DropdownMenuButton isDropdownOpen={isYearDropdownOpen} onClick={handleYearClick} isDark={isDark}>전체</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isYearDropdownOpen} onClick={handleYearClick} isDark={isDark}>{currentYear}</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isYearDropdownOpen} onClick={handleYearClick} isDark={isDark}>{currentYear-1}</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isYearDropdownOpen} onClick={handleYearClick} isDark={isDark}>{currentYear-2}</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isYearDropdownOpen} onClick={handleYearClick} isDark={isDark}>{currentYear-3}</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isYearDropdownOpen} onClick={handleYearClick} isDark={isDark}>{currentYear-4}</DropdownMenuButton>
+ </IncomeDropdownMenuWrapper>
+ </DropdownContainer>
  <IncomeDropdownUnitTypo isDark={isDark}>년</IncomeDropdownUnitTypo>
- <IncomeDropdownButton isDark={isDark}>
- <DropdownTextTypo isDark={isDark}>{month}</DropdownTextTypo>
+ <DropdownContainer>
+ <IncomeDropdownButton 
+ isDark={isDark}
+ onClick={()=>{ year && setIsMonthDropdownOpen(!isMonthDropdownOpen) }}
+ onBlur={()=>{setIsMonthDropdownOpen(false)}}>
+ <DropdownTextTypo isDark={isDark}>
+ { month===null ? '전체' : month }
+ </DropdownTextTypo>
  <DropdownButtonIcon src={isMonthDropdownOpen?arrowUp:arrowDown}/>
  </IncomeDropdownButton>
+ <IncomeDropdownMenuWrapper isDark={isDark} isDropdownOpen={isMonthDropdownOpen}>
+ <DropdownMenuButton isDropdownOpen={isMonthDropdownOpen} onClick={handleMonthClick} isDark={isDark}>전체</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isMonthDropdownOpen} onClick={handleMonthClick} isDark={isDark}>1</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isMonthDropdownOpen} onClick={handleMonthClick} isDark={isDark}>2</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isMonthDropdownOpen} onClick={handleMonthClick} isDark={isDark}>3</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isMonthDropdownOpen} onClick={handleMonthClick} isDark={isDark}>4</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isMonthDropdownOpen} onClick={handleMonthClick} isDark={isDark}>5</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isMonthDropdownOpen} onClick={handleMonthClick} isDark={isDark}>6</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isMonthDropdownOpen} onClick={handleMonthClick} isDark={isDark}>7</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isMonthDropdownOpen} onClick={handleMonthClick} isDark={isDark}>8</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isMonthDropdownOpen} onClick={handleMonthClick} isDark={isDark}>9</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isMonthDropdownOpen} onClick={handleMonthClick} isDark={isDark}>10</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isMonthDropdownOpen} onClick={handleMonthClick} isDark={isDark}>11</DropdownMenuButton>
+ <DropdownMenuButton isDropdownOpen={isMonthDropdownOpen} onClick={handleMonthClick} isDark={isDark}>12</DropdownMenuButton>
+ </IncomeDropdownMenuWrapper>
+ </DropdownContainer>
  <IncomeDropdownUnitTypo isDark={isDark}>월</IncomeDropdownUnitTypo>
  </IncomeDropdownWrapper>
  </ReceiptDropdownContainer>

diff --git a/client/src/components/receiptPage/ReceiptDropdown.js b/client/src/components/receiptPage/ReceiptDropdown.js
@@ -60,7 +60,6 @@ const ReceiptDropdown = ({category, setCategory}) => {
  <DropdownMenuButton isDropdownOpen={isDropdownOpen} isDark={isDark} onClick={handleDropdownButtonClick}>최근 6달</DropdownMenuButton>
  <DropdownMenuButton isDropdownOpen={isDropdownOpen} isDark={isDark} onClick={handleDropdownButtonClick}>최근 1년</DropdownMenuButton>
  </DropdownMenuWrapper>
-
  </DropdownContainer>
  </DropdownWrapper>
  </ReceiptDropdownContainer>

diff --git a/client/src/components/sideBar/SideBar.js b/client/src/components/sideBar/SideBar.js
@@ -21,6 +21,7 @@ import watch from '../../assets/images/icons/sideBar/watch.svg';
 
 import { useNavigate } from 'react-router-dom';
 import { useLogout } from '../../hooks/useLogout';
+import Toggle from '../../atoms/buttons/Toggle';
 
 const globalTokens = tokens.global;
 

diff --git a/client/src/pages/userInfo/IncomePage.js b/client/src/pages/userInfo/IncomePage.js
@@ -89,12 +89,11 @@ const IncomePage = () => {
  <RewardTitle isDark={isDark}>나의 활동</RewardTitle>
  <RewardCategory category='income'/>
  <RewardContentContainer>
+ <IncomeCategory year={year} setYear={setYear} month={month} setMonth={setMonth}/>
  { incomeList.length===0 &&
  <ContentNothing isDark={isDark}>정산 내역이 없습니다.</ContentNothing> }
  { incomeList.length>0 && 
- <IncomeCategory year={year} setYear={setYear} month={month} setMonth={setMonth}/>}
- { incomeList.length>0 && 
- <IncomeHeader/> } 
+ <IncomeHeader/> }
  { incomeList.length>0 && 
  incomeList.map((e)=><IncomeItem key={e.videoId} item={e}/>) }
  </RewardContentContainer>

diff --git a/client/src/services/incomeServices.js b/client/src/services/incomeServices.js
@@ -7,7 +7,7 @@ export const getIncomeService = async (
 ) => {
  try {
  const response = await axios.get(
- `${ROOT_URL}/orders/adjustment?page=${page}&size=${size}&month=${month}&year=${year}&sort=${sort}`,
+ `${ROOT_URL}/orders/adjustment?page=${page}&size=${size}${month?`&month=${month}`:''}${year?`&year=${year}`:''}&sort=${sort}`,
  {
  headers: {
  Authorization: authorization