From e49a63ca0baf7b6d94d98282548c2f3c8ceb987c Mon Sep 17 00:00:00 2001
From: HyerimKimm <50258232+HyerimKimm@users.noreply.github.com>
Date: Tue, 19 Sep 2023 19:37:47 +0900
Subject: [PATCH] =?UTF-8?q?=EC=A0=95=EC=82=B0=20=EC=A1=B0=ED=9A=8C=20?=
=?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20=EA=B2=80=EC=83=89?=
=?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20#456?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
client/src/atoms/buttons/Toggle.stories.js | 5 +-
.../components/incomePage/IncomeCategory.js | 132 ++++++++++++++++--
.../components/receiptPage/ReceiptDropdown.js | 1 -
client/src/components/sideBar/SideBar.js | 1 +
client/src/pages/userInfo/IncomePage.js | 5 +-
client/src/services/incomeServices.js | 2 +-
6 files changed, 131 insertions(+), 15 deletions(-)
diff --git a/client/src/atoms/buttons/Toggle.stories.js b/client/src/atoms/buttons/Toggle.stories.js
index a2af63e0..3a6bba17 100644
--- 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 = () =>
+export const ToggleTemplate = () =>
\ No newline at end of file
diff --git a/client/src/components/incomePage/IncomeCategory.js b/client/src/components/incomePage/IncomeCategory.js
index 14cab14a..b77c81ad 100644
--- 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 (
-
- {year}
-
-
+
+ {setIsYearDropdownOpen(!isYearDropdownOpen)}}
+ onBlur={()=>{setIsYearDropdownOpen(false)}}>
+ {year===null?'전체':year}
+
+
+
+ 전체
+ {currentYear}
+ {currentYear-1}
+ {currentYear-2}
+ {currentYear-3}
+ {currentYear-4}
+
+
년
-
- {month}
+
+ { year && setIsMonthDropdownOpen(!isMonthDropdownOpen) }}
+ onBlur={()=>{setIsMonthDropdownOpen(false)}}>
+
+ { month===null ? '전체' : month }
+
+
+ 전체
+ 1
+ 2
+ 3
+ 4
+ 5
+ 6
+ 7
+ 8
+ 9
+ 10
+ 11
+ 12
+
+
월
diff --git a/client/src/components/receiptPage/ReceiptDropdown.js b/client/src/components/receiptPage/ReceiptDropdown.js
index e7545978..becd33d5 100644
--- a/client/src/components/receiptPage/ReceiptDropdown.js
+++ b/client/src/components/receiptPage/ReceiptDropdown.js
@@ -60,7 +60,6 @@ const ReceiptDropdown = ({category, setCategory}) => {
최근 6달
최근 1년
-
diff --git a/client/src/components/sideBar/SideBar.js b/client/src/components/sideBar/SideBar.js
index b10c1446..2471c7b6 100644
--- 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
index 732d3979..c61d5237 100644
--- a/client/src/pages/userInfo/IncomePage.js
+++ b/client/src/pages/userInfo/IncomePage.js
@@ -89,12 +89,11 @@ const IncomePage = () => {
나의 활동
+
{ incomeList.length===0 &&
정산 내역이 없습니다. }
{ incomeList.length>0 &&
- }
- { incomeList.length>0 &&
- }
+ }
{ incomeList.length>0 &&
incomeList.map((e)=>) }
diff --git a/client/src/services/incomeServices.js b/client/src/services/incomeServices.js
index a2019ba6..6851985e 100644
--- 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