From 33195ede52ebe3455ded04b72b95bb6e70e45e2d Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Wed, 10 Jan 2024 18:01:16 +0900 Subject: [PATCH 01/54] =?UTF-8?q?design:=20Settlement=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC=20=EB=B0=8F=20=EB=B0=B1=EA=B7=B8=EB=9D=BC=EC=9A=B4?= =?UTF-8?q?=EB=93=9C=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/receipt-sharp.svg | 27 +++++++++++++++++++ .../SettlementsLeft/Settlemented/index.tsx | 9 +++++++ .../SettlementsCalendar/index.tsx | 9 +++++++ .../SettlementsHeader/index.tsx | 9 +++++++ .../Settlements/SettlementsLeft/index.tsx | 27 +++++++++++++++++++ .../SettlementsBefore/index.tsx | 9 +++++++ .../SettlementsExpected/index.tsx | 9 +++++++ .../Settlements/SettlementsRight/index.tsx | 13 +++++++++ src/components/Settlements/index.tsx | 2 ++ src/pages/Settlements/index.tsx | 11 ++++++++ src/routes/MainRouter/index.tsx | 18 +++++-------- 11 files changed, 131 insertions(+), 12 deletions(-) create mode 100644 src/assets/icons/receipt-sharp.svg create mode 100644 src/components/Settlements/SettlementsLeft/Settlemented/index.tsx create mode 100644 src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx create mode 100644 src/components/Settlements/SettlementsLeft/SettlementsHeader/index.tsx create mode 100644 src/components/Settlements/SettlementsLeft/index.tsx create mode 100644 src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx create mode 100644 src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx create mode 100644 src/components/Settlements/SettlementsRight/index.tsx create mode 100644 src/components/Settlements/index.tsx create mode 100644 src/pages/Settlements/index.tsx diff --git a/src/assets/icons/receipt-sharp.svg b/src/assets/icons/receipt-sharp.svg new file mode 100644 index 00000000..5aa90f5e --- /dev/null +++ b/src/assets/icons/receipt-sharp.svg @@ -0,0 +1,27 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx new file mode 100644 index 00000000..ddb55011 --- /dev/null +++ b/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx @@ -0,0 +1,9 @@ +const Settlemented = () => { + return ( +
+ +
+ ) +} + +export default Settlemented diff --git a/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx new file mode 100644 index 00000000..18d7e0fd --- /dev/null +++ b/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx @@ -0,0 +1,9 @@ +const SettlemntsCalender = () => { + return ( +
+ +
+ ) +} + +export default SettlemntsCalender diff --git a/src/components/Settlements/SettlementsLeft/SettlementsHeader/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsHeader/index.tsx new file mode 100644 index 00000000..05325b9b --- /dev/null +++ b/src/components/Settlements/SettlementsLeft/SettlementsHeader/index.tsx @@ -0,0 +1,9 @@ +const SettlementsHeader = () => { + return ( +
+ +
+ ) +} + +export default SettlementsHeader diff --git a/src/components/Settlements/SettlementsLeft/index.tsx b/src/components/Settlements/SettlementsLeft/index.tsx new file mode 100644 index 00000000..c29480b5 --- /dev/null +++ b/src/components/Settlements/SettlementsLeft/index.tsx @@ -0,0 +1,27 @@ +import styled from '@emotion/styled'; + +import Settlemented from './Settlemented'; +import SettlemntsCalender from './SettlementsCalendar'; +import SettlementsHeader from './SettlementsHeader'; + +const SettlementsLeft = () => { + return ( + + + + + + ) +} + +export default SettlementsLeft + +const Container = styled.div` + width: 80%; + height: 100%; + + display: flex; + justify-content: space-between; + align-items: center; + background-color: #111F3F; +`; \ No newline at end of file diff --git a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx new file mode 100644 index 00000000..442ebb90 --- /dev/null +++ b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx @@ -0,0 +1,9 @@ +const SettlementsBefore = () => { + return ( +
+ +
+ ) +} + +export default SettlementsBefore diff --git a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx new file mode 100644 index 00000000..72f3f478 --- /dev/null +++ b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx @@ -0,0 +1,9 @@ +const SettlementsExpected = () => { + return ( +
+ +
+ ) +} + +export default SettlementsExpected diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx new file mode 100644 index 00000000..d0a4486d --- /dev/null +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -0,0 +1,13 @@ +import SettlementsBefore from "./SettlementsBefore" +import SettlementsExpected from "./SettlementsExpected" + +const SettlementsRight = () => { + return ( +
+ + +
+ ) +} + +export default SettlementsRight diff --git a/src/components/Settlements/index.tsx b/src/components/Settlements/index.tsx new file mode 100644 index 00000000..ba1eb407 --- /dev/null +++ b/src/components/Settlements/index.tsx @@ -0,0 +1,2 @@ +export { default as SettlementsLeft } from './SettlementsLeft'; +export { default as SettlementRight } from './SettlementsRight'; \ No newline at end of file diff --git a/src/pages/Settlements/index.tsx b/src/pages/Settlements/index.tsx new file mode 100644 index 00000000..f033cc56 --- /dev/null +++ b/src/pages/Settlements/index.tsx @@ -0,0 +1,11 @@ +import React from 'react' + +const index = () => { + return ( +
+ +
+ ) +} + +export default index diff --git a/src/routes/MainRouter/index.tsx b/src/routes/MainRouter/index.tsx index 2c6ef1c8..8d4d8a79 100644 --- a/src/routes/MainRouter/index.tsx +++ b/src/routes/MainRouter/index.tsx @@ -1,5 +1,6 @@ import { Route, Routes } from 'react-router-dom'; import { Layout } from '@components/common'; +import { SettlementsLeft, SettlementRight } from '@components/Settlements'; const MainRouter = () => { return ( @@ -42,7 +43,7 @@ const MainRouter = () => { display: 'flex', justifyContent: 'center', alignItems: 'center', - fontSize: '1.5rem' + fontSize: '1.5rem', }} > ๐Ÿงƒ ์ฟ ํฐ ์กฐํšŒ ํŽ˜์ด์ง€ ์ž…์ฃผ ์˜ˆ์ • ๐Ÿงƒ @@ -68,17 +69,10 @@ const MainRouter = () => { - ๐Ÿงƒ ์ •์‚ฐ๊ด€๋ฆฌ ํŽ˜์ด์ง€ ์ž…์ฃผ ์˜ˆ์ • ๐Ÿงƒ - + <> + + + } /> From 32153c479fe4a88d183e535773905a985f6465c1 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Wed, 10 Jan 2024 20:29:36 +0900 Subject: [PATCH 02/54] =?UTF-8?q?design:=20=EB=B0=B1=EA=B7=B8=EB=9D=BC?= =?UTF-8?q?=EC=9A=B4=EB=93=9C=20=EC=BB=AC=EB=9F=AC=20=EA=B7=B8=EB=9D=BC?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=EC=85=98=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Settlements/SettlementsLeft/index.tsx | 7 +----- .../Settlements/SettlementsRight/index.tsx | 17 ++++++++++--- src/components/Settlements/index.tsx | 2 +- src/pages/Settlements/index.tsx | 24 ++++++++++++++----- src/routes/MainRouter/index.tsx | 6 ++--- 5 files changed, 37 insertions(+), 19 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/index.tsx b/src/components/Settlements/SettlementsLeft/index.tsx index c29480b5..5778feba 100644 --- a/src/components/Settlements/SettlementsLeft/index.tsx +++ b/src/components/Settlements/SettlementsLeft/index.tsx @@ -14,14 +14,9 @@ const SettlementsLeft = () => { ) } -export default SettlementsLeft +export default SettlementsLeft; const Container = styled.div` width: 80%; height: 100%; - - display: flex; - justify-content: space-between; - align-items: center; - background-color: #111F3F; `; \ No newline at end of file diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index d0a4486d..4ed9dbab 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -1,13 +1,24 @@ +import styled from '@emotion/styled'; + import SettlementsBefore from "./SettlementsBefore" import SettlementsExpected from "./SettlementsExpected" const SettlementsRight = () => { return ( -
+ -
+ ) } -export default SettlementsRight +export default SettlementsRight; + +const Container = styled.div` + width: 20%; + height: 100%; + + background-color: #1A2849; +`; + + diff --git a/src/components/Settlements/index.tsx b/src/components/Settlements/index.tsx index ba1eb407..5fb96e1e 100644 --- a/src/components/Settlements/index.tsx +++ b/src/components/Settlements/index.tsx @@ -1,2 +1,2 @@ export { default as SettlementsLeft } from './SettlementsLeft'; -export { default as SettlementRight } from './SettlementsRight'; \ No newline at end of file +export { default as SettlementsRight } from './SettlementsRight'; diff --git a/src/pages/Settlements/index.tsx b/src/pages/Settlements/index.tsx index f033cc56..11256b03 100644 --- a/src/pages/Settlements/index.tsx +++ b/src/pages/Settlements/index.tsx @@ -1,11 +1,23 @@ -import React from 'react' +import styled from '@emotion/styled'; -const index = () => { +import { SettlementsRight, SettlementsLeft } from '@components/Settlements'; + +const Settlements = () => { return ( -
- -
+ + + + ) } -export default index +export default Settlements; + +const Container = styled.div` + width: 100%; + height: 100%; + + display: flex; + + background: linear-gradient(45deg, rgba(17, 31, 63, 1), rgba(26, 40, 73, 0.75)); +`; diff --git a/src/routes/MainRouter/index.tsx b/src/routes/MainRouter/index.tsx index 8d4d8a79..3826b2a5 100644 --- a/src/routes/MainRouter/index.tsx +++ b/src/routes/MainRouter/index.tsx @@ -1,6 +1,7 @@ import { Route, Routes } from 'react-router-dom'; import { Layout } from '@components/common'; -import { SettlementsLeft, SettlementRight } from '@components/Settlements'; + +import Settlements from '../../pages/Settlements' const MainRouter = () => { return ( @@ -70,8 +71,7 @@ const MainRouter = () => { path="/settlements" element={ <> - - + } /> From 99612f64439f59798f9696bf086e4054a890bad6 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Wed, 10 Jan 2024 21:34:06 +0900 Subject: [PATCH 03/54] =?UTF-8?q?design:=20=EC=A0=95=EC=82=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=99=BC=EC=AA=BD=20=ED=97=A4=EB=8D=94=20?= =?UTF-8?q?=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../icons/information-circle-outline.svg | 6 ++ src/assets/icons/settlements-admin.svg | 4 ++ .../SettlementsHeader/index.tsx | 72 +++++++++++++++++-- .../Settlements/SettlementsRight/index.tsx | 4 +- src/pages/Settlements/index.tsx | 1 + 5 files changed, 82 insertions(+), 5 deletions(-) create mode 100644 src/assets/icons/information-circle-outline.svg create mode 100644 src/assets/icons/settlements-admin.svg diff --git a/src/assets/icons/information-circle-outline.svg b/src/assets/icons/information-circle-outline.svg new file mode 100644 index 00000000..8592c7eb --- /dev/null +++ b/src/assets/icons/information-circle-outline.svg @@ -0,0 +1,6 @@ + + + + + + diff --git a/src/assets/icons/settlements-admin.svg b/src/assets/icons/settlements-admin.svg new file mode 100644 index 00000000..170495c1 --- /dev/null +++ b/src/assets/icons/settlements-admin.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/components/Settlements/SettlementsLeft/SettlementsHeader/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsHeader/index.tsx index 05325b9b..a9777283 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsHeader/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsHeader/index.tsx @@ -1,9 +1,73 @@ +import styled from '@emotion/styled'; + +import settlementsAdminIcon from '@assets/icons/settlements-admin.svg'; +import informationIcon from '@assets/icons/information-circle-outline.svg' + const SettlementsHeader = () => { return ( -
- -
+ +
+ + + ์ •์‚ฐ๋‚ด์—ญ + +
+ + + ์ฟ ํฐ ํ”„๋กœ๋ชจ์…˜์— ์ ์šฉํ•œ ์ •์‚ฐ ๋‚ด์—ญ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + + + + ) } -export default SettlementsHeader +export default SettlementsHeader; + +const Container = styled.nav` + margin-left: 43px; + margin-top: 96px; +`; + +const Header = styled.nav` + margin-bottom: 30px; + + display: flex; + + align-items: center; +`; + +const SettlementsAdminIcon = styled.img` + width: 44px; + height: 34.57px; + + margin-right: 10px; +`; + +const HeaderText = styled.div` + font-size: 32px; + font-weight: bold; + color: white; +`; + +const Middle = styled.div` + display: flex; + + align-items: center; +`; + +const MiddleText = styled.div` + margin-right: 5px; + + font-size: 18px; + color: white; +`; + +const InformationIcon = styled.img` + margin-bottom: 5px; +`; + diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index 4ed9dbab..1f715f68 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -18,7 +18,9 @@ const Container = styled.div` width: 20%; height: 100%; - background-color: #1A2849; + background-color: rgba(205, 207, 208, 0.75); + border-top-right-radius: 1.25rem; + border-bottom-right-radius: 1.25rem; `; diff --git a/src/pages/Settlements/index.tsx b/src/pages/Settlements/index.tsx index 11256b03..6b894103 100644 --- a/src/pages/Settlements/index.tsx +++ b/src/pages/Settlements/index.tsx @@ -20,4 +20,5 @@ const Container = styled.div` display: flex; background: linear-gradient(45deg, rgba(17, 31, 63, 1), rgba(26, 40, 73, 0.75)); + border-radius: 1.25rem; `; From ebd31321e24e0ac14da5a47176f93c36ddafacab Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Thu, 11 Jan 2024 14:43:17 +0900 Subject: [PATCH 04/54] =?UTF-8?q?feat:=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 118 ++++++++++++++++++ package.json | 2 + src/assets/icons/calendar-number-outline.svg | 32 +++++ .../SettlementsCalendar/index.tsx | 63 +++++++++- .../Settlements/SettlementsLeft/index.tsx | 11 +- 5 files changed, 219 insertions(+), 7 deletions(-) create mode 100644 src/assets/icons/calendar-number-outline.svg diff --git a/package-lock.json b/package-lock.json index 26dc31fa..522bec7f 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "react": "^18.2.0", + "react-datepicker": "^4.25.0", "react-dom": "^18.2.0", "react-router-dom": "^6.21.1" }, @@ -19,6 +20,7 @@ "@swc/jest": "^0.2.29", "@types/jest": "^29.5.11", "@types/react": "^18.2.43", + "@types/react-datepicker": "^4.19.5", "@types/react-dom": "^18.2.17", "@typescript-eslint/eslint-plugin": "^6.14.0", "@typescript-eslint/parser": "^6.14.0", @@ -2045,6 +2047,15 @@ "node": ">= 8" } }, + "node_modules/@popperjs/core": { + "version": "2.11.8", + "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.8.tgz", + "integrity": "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A==", + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/popperjs" + } + }, "node_modules/@remix-run/router": { "version": "1.14.1", "resolved": "https://registry.npmjs.org/@remix-run/router/-/router-1.14.1.tgz", @@ -2593,6 +2604,18 @@ "csstype": "^3.0.2" } }, + "node_modules/@types/react-datepicker": { + "version": "4.19.5", + "resolved": "https://registry.npmjs.org/@types/react-datepicker/-/react-datepicker-4.19.5.tgz", + "integrity": "sha512-tKpuj19p9T4sBQm3Bw13CPuhalo4CFOe/LcSUGJ5z6DmHoiBX3uq33iMKePeSEq7OxyU8O1rh5emAm92nyXZLg==", + "dev": true, + "dependencies": { + "@popperjs/core": "^2.9.2", + "@types/react": "*", + "date-fns": "^2.0.1", + "react-popper": "^2.2.5" + } + }, "node_modules/@types/react-dom": { "version": "18.2.18", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz", @@ -3246,6 +3269,11 @@ "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==", "dev": true }, + "node_modules/classnames": { + "version": "2.5.1", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.5.1.tgz", + "integrity": "sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==" + }, "node_modules/cliui": { "version": "8.0.1", "resolved": "https://registry.npmjs.org/cliui/-/cliui-8.0.1.tgz", @@ -3386,6 +3414,21 @@ "resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz", "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, + "node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/debug": { "version": "4.3.4", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.4.tgz", @@ -5645,6 +5688,14 @@ "node": ">=8" } }, + "node_modules/object-assign": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz", + "integrity": "sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==", + "engines": { + "node": ">=0.10.0" + } + }, "node_modules/once": { "version": "1.4.0", "resolved": "https://registry.npmjs.org/once/-/once-1.4.0.tgz", @@ -5981,6 +6032,16 @@ "node": ">= 6" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -6037,6 +6098,23 @@ "node": ">=0.10.0" } }, + "node_modules/react-datepicker": { + "version": "4.25.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.25.0.tgz", + "integrity": "sha512-zB7CSi44SJ0sqo8hUQ3BF1saE/knn7u25qEMTO1CQGofY1VAKahO8k9drZtp0cfW1DMfoYLR3uSY1/uMvbEzbg==", + "dependencies": { + "@popperjs/core": "^2.11.8", + "classnames": "^2.2.6", + "date-fns": "^2.30.0", + "prop-types": "^15.7.2", + "react-onclickoutside": "^6.13.0", + "react-popper": "^2.3.0" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17 || ^18", + "react-dom": "^16.9.0 || ^17 || ^18" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", @@ -6049,11 +6127,43 @@ "react": "^18.2.0" } }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" + }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==" }, + "node_modules/react-onclickoutside": { + "version": "6.13.0", + "resolved": "https://registry.npmjs.org/react-onclickoutside/-/react-onclickoutside-6.13.0.tgz", + "integrity": "sha512-ty8So6tcUpIb+ZE+1HAhbLROvAIJYyJe/1vRrrcmW+jLsaM+/powDRqxzo6hSh9CuRZGSL1Q8mvcF5WRD93a0A==", + "funding": { + "type": "individual", + "url": "https://github.com/Pomax/react-onclickoutside/blob/master/FUNDING.md" + }, + "peerDependencies": { + "react": "^15.5.x || ^16.x || ^17.x || ^18.x", + "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x" + } + }, + "node_modules/react-popper": { + "version": "2.3.0", + "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", + "integrity": "sha512-e1hj8lL3uM+sgSR4Lxzn5h1GxBlpa4CQz0XLF8kx4MDrDRWY0Ena4c97PUeSX9i5W3UAfDP0z0FXCTQkoXUl3Q==", + "dependencies": { + "react-fast-compare": "^3.0.1", + "warning": "^4.0.2" + }, + "peerDependencies": { + "@popperjs/core": "^2.0.0", + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/react-router": { "version": "6.21.1", "resolved": "https://registry.npmjs.org/react-router/-/react-router-6.21.1.tgz", @@ -6748,6 +6858,14 @@ "makeerror": "1.0.12" } }, + "node_modules/warning": { + "version": "4.0.3", + "resolved": "https://registry.npmjs.org/warning/-/warning-4.0.3.tgz", + "integrity": "sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==", + "dependencies": { + "loose-envify": "^1.0.0" + } + }, "node_modules/which": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", diff --git a/package.json b/package.json index bb78fda5..4c3725af 100644 --- a/package.json +++ b/package.json @@ -14,6 +14,7 @@ "@emotion/react": "^11.11.3", "@emotion/styled": "^11.11.0", "react": "^18.2.0", + "react-datepicker": "^4.25.0", "react-dom": "^18.2.0", "react-router-dom": "^6.21.1" }, @@ -22,6 +23,7 @@ "@swc/jest": "^0.2.29", "@types/jest": "^29.5.11", "@types/react": "^18.2.43", + "@types/react-datepicker": "^4.19.5", "@types/react-dom": "^18.2.17", "@typescript-eslint/eslint-plugin": "^6.14.0", "@typescript-eslint/parser": "^6.14.0", diff --git a/src/assets/icons/calendar-number-outline.svg b/src/assets/icons/calendar-number-outline.svg new file mode 100644 index 00000000..def1851f --- /dev/null +++ b/src/assets/icons/calendar-number-outline.svg @@ -0,0 +1,32 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx index 18d7e0fd..9a10880e 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx @@ -1,9 +1,62 @@ -const SettlemntsCalender = () => { +import { useState } from 'react'; +import styled from '@emotion/styled'; +import DatePicker from 'react-datepicker'; +import 'react-datepicker/dist/react-datepicker.css'; + +import CalendarIcon from '@assets/icons/calendar-number-outline.svg'; + +const SettlementsCalender = () => { + const [startDate, setStartDate] = useState(null); + const [endDate, setEndDate] = useState(null); + + const handleStartDateChange = (date: Date | null) => { + setStartDate(date); + }; + + const handleEndDateChange = (date: Date | null) => { + setEndDate(date); + }; + return ( -
- -
+ + + ๊ธฐ๊ฐ„ ์„ค์ • + + + + ) } -export default SettlemntsCalender +export default SettlementsCalender; + +const Container = styled.nav` + margin-right: 43px; + + display: flex; + justify-content: flex-end; + align-items: center; +`; + +const Calendar = styled.img` +`; + +const CalendarText = styled.div` + font-size: 15px; + font-weight: bold; + color: white; +`; \ No newline at end of file diff --git a/src/components/Settlements/SettlementsLeft/index.tsx b/src/components/Settlements/SettlementsLeft/index.tsx index 5778feba..df239140 100644 --- a/src/components/Settlements/SettlementsLeft/index.tsx +++ b/src/components/Settlements/SettlementsLeft/index.tsx @@ -1,15 +1,18 @@ import styled from '@emotion/styled'; import Settlemented from './Settlemented'; -import SettlemntsCalender from './SettlementsCalendar'; +import SettlementsCalender from './SettlementsCalendar'; import SettlementsHeader from './SettlementsHeader'; const SettlementsLeft = () => { return ( - + + +
+ ) } @@ -19,4 +22,8 @@ export default SettlementsLeft; const Container = styled.div` width: 80%; height: 100%; +`; + +const BreakLine = styled.div` + margin: 0 40px; `; \ No newline at end of file From ef422964bd8818e3c28ccc469287e28ffbd399b7 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Thu, 11 Jan 2024 18:47:43 +0900 Subject: [PATCH 05/54] =?UTF-8?q?design:=20=EC=A0=95=EC=82=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=20=EB=B0=8F=20=EC=97=91=EC=85=80=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=EB=A1=9C=EB=93=9C=20=EB=B6=80=EB=B6=84=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/settlement-data-frame.png | Bin 0 -> 27973 bytes src/assets/settlement-data-frame2.svg | 17 ++++ .../Settlemented/SettlementsTable/index.tsx | 89 ++++++++++++++++++ .../SettlementsLeft/Settlemented/index.tsx | 80 +++++++++++++++- .../Settlements/SettlementsLeft/index.tsx | 2 +- src/types/settlements.d.ts | 10 ++ 6 files changed, 193 insertions(+), 5 deletions(-) create mode 100644 src/assets/settlement-data-frame.png create mode 100644 src/assets/settlement-data-frame2.svg create mode 100644 src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx create mode 100644 src/types/settlements.d.ts diff --git a/src/assets/settlement-data-frame.png b/src/assets/settlement-data-frame.png new file mode 100644 index 0000000000000000000000000000000000000000..efab506638ffc724c42d52725dcace573c1754bd GIT binary patch literal 27973 zcmYg&2|U#K|G)jV9lMfkBSm7j-4()?P_9XBM2kx9W6GI3*Eq+tS+$X)jU*wtVlWNH z%~TpAat&j~IHp1}W5_X>`~RN9{(l}1j~?@x&+-1e->=v6^?W{GZ{53OVKpE^9l|5O-N^+1e0TGLbA*(X^giM5H&RcY9smcwiMV2MR;s4| z&^-9?t)H2-nUoYdLz;ViyOdNA#qtlct1;g&CS$X_E!{T+P0r4fW7(6({ADgeE~I|{ zqV#{G&wh4|Hx4mghp^up^-qb%zVMkIf z**)^%{s6`%C3Wg^%JUm9RDx8zAWcPxEBL0EcNaYfyF}l4e<;ff32=fmy)+FgLbac( z(os~<@hC~!E&R6o4Wp52im9)^T4J;EEGc2N&%ogG+?-PML>T^_=<+i=7F(A(Dl*^; zUTCP>W8WvC)u=q#*zR**RJRFFsJ%I0vhg%XKW`S7s=%CBCf z+O%9C$6^?Hu6$VifSGWirDnW+d`i~_^l&YgLYw*4!b4Kw#|;b|cUz+i^7Cax2WHHr z9XWFJran7%;$G2_?pud-N2j|wZbrG`;{5$9+&nz?h)?ZOs0pE|^fh)Qu)<&3oEZ2? zJRL>MrUgCn=L-Hd2ekOXf7n$qkDDe{dDI@hFls>Fc~E$LrgU)p#Ep}cxg*xhf0d7b zhy*X{7TG%a#$$OkAWv;b-}b(Eg2RiF6fI$C*9lPm9xZBQDye{Ju9C+ zdA{CtLU;pJHQKho?Sa(K6-C!)nwy(9w@YsPG}2I6MiD=7S28A5H5VMkA~TO&4i+MA zhiF8%+-~g0u-{CnjLOk(@AVem?@U?!1;>Sbfe&h~9O=%tDVGG)o37N}u`y?BbUN>2 zQwqjBQ*X&oc)C>Pz1m}U4;zF8JkYN8)~fOpO=|bO24h&*x6Ya{w5)iP2E0UU+(gsI zV*Hz}aWnC0scQk0UEzVTv8+hvM>+o!-4Op&=0G8)L~*pQGA_R4Ip z+Wgk+?5Tx29fkmwuwQ46ZBq0QI66)$Y=sl2$vL{nH6{9EVFo-n?i=y9hX=jPsX zRS8UCzIk)j?RCq`sqo>Bq1u5lNjPk0Bn2hm0_Xbkk?Uroa)AZnsP#V2QPt7WaU53; zRGInRzyQz33vYL8;f8#mz&Ksih*=8^Wbk)K|SgWx(!%wZR?FKVc z=Qywl=7zq9{M@{})XpB7iD-f{lPESeVRB;@nZ4%4muvd~l7e_Vm)vk> zeecYvlJ}B@R-kP|RaLzmng*+srn*yf!xL8u&%39orWTm_ridm>)e)U!41uU%uSq@& zqm}bEOl1a#I}gA1KwEg(nMaj=nLaR>exi=(E}7rZKTnXO*I!Vus}fC%^A}j_d3auVKuVP8I@Kc-8rdSVv?zA8-6NxdC_D((=v!x` z6W%XVZ=i)3knNu*9#L(Pa{fu23*0Lzg&9CW`k;nK13Sc1d+IX)#4#q5smH1JL*;Mo zUYVG9szU(v2E4ESh{EWu+A=53u9fe#WYuy4oWd)YsU&l@~OvnjWOGwiB5 zS60GB$5hprV%&t!bI-SkM&Atb z?V#c>HRhR^D&`k)VK`M2G}46XcqyxBV2%)0cu*?tk&l!_suo2ed2 z9;nnNApKEx>j61FvFf5H+O-V^J|77Fv8YofQ!ECoLurViuA{!Y1);hdh|;3Uf^D(F8k{-Qe2*LNJJD7-ea z`uWkC;MEdw9gqqyavlMzKs=jh=WJsNpDDYIJ znWirxNp6*mRUUPZn#2{;``I|7%k(R2b*^`FcP-CubJq!^lL$P*2{%sm5Q)ST%d4(XS7dVa4WQ~_RBnnB6)?0A;F=3c6o4DE#DvG z5_TY0T?F*E-piTZa4R9z%V-wX7p%_L9@7!!lT>>1aJem{HgI9MfSDZqByPvp-Ry%B zuJDH4c^*)Q!>f<+-%@uryWk9Wn?DpU-*%Fff5=b9ws<{BJsvi_HXg2ME! zaNUy2(_>>}MZ{L&Fr`lQQy8$pBi&Ez;UC{5zfqVEaM{`H(>^!6es2G~Xa*0(yOhvJ zD(ogB=K7gIa=ik%H+PzSF+rNOy;Nc>9KET(82)oJT+=V$;WsF)r1cGV2md`$gM<;i`h)>#gM< z-2PcK%roY9d@mbBbAA(j!sq*5rbm5#pL+^vm@bS8@r;Gw1*cN*daaFaV)fK}sX$Bp&GPdOOSIPQa`W`ITYG^rPJ8mZ=&{F|3S zgbo_KuZJgw`}%&4Y#eXjg7u(pSqp47`w5&hzZ|jBIV0 zWBK`(lmAZ0if8GJZsqW`u#rLCZc?Jd7FgbPK(B)o|0o?vjPDbjcPN@dbAo>q(&DIu z9b+9wPvRta_??Pb4VVlF2<*7N(nJw=JF^F-Y*r%>iH2KGuYzd#ucS2($pxyIg|L5i z&$m&ls;ZIz+6RtmE2yYZ=@-i+xq7^X81~eYv05!NEUpY=Um^{YH|_!c*5BXX@F*u| z!09e)N;JAx#~tNx&YYLNsDgG_LSFgc(uVZbeE@{Qzda4hjBocCx^c2zHe4Lf-G8&+ z`1L=%2meSm^KfxVfo$na=_9jD{mI%LBuLM4^p`Cf03q5xj?s4nBi;z(WD z%Xu9U5s|zj15n&cI;VHv$q{F7vag+vmR2@xKWA6?X(OXvT`}hia#Cq}F;F)8v-_Xb zqT6~~CgGUD1x`=J)h>Sse;*0YjOP3#dM$kRVO3EWx23CHIt+*iR5-eSqRFTBRI zuKDEwosB@?_p5`ali@!n4pN4}X|6`dZYhZ)SAS*&k?5lD;#LIqXf8}V1jp9kb5Ur3-IYFzUyy;Hf_=|_0zH{dRi0%hv zPFpx+4q!vt@#4A8ZvL6tEgW;G-0Lkks~Ig0-4hW220$w$TCofd_Wez`EewO4W5Xa`}LDgkYqTF% zn^K~jA9X5w^HfD4B4phPE+v6L8CMkmWHFW;MZAvz8Yr>Ku$yw|^zRa?_eblbwo;n; zX)yf_u~wSV$0f(RKp`s&3h-){) zpK32-L=im784B8xdVX5zchkTl-GQT)i(@%PeQUf^IEv#}(cnKcstzi`MAJv!Go5q@zV>BLETx22G7r>QFV_j*}39u8VP3Dj5japC)^ zYR0|aOymd?`-HVvXR0dkch_E(Bvbdj{qrk+nWZjbu6*n1ri~4t&Tu<#3Fyy&qPBtp zV%FausLyKoHqjuZa)k-+Yj3cB|Na!AdQV=zB`KL_>RuS-+c2Zf<^2>WFM$E`lQ@cb zX0NVa|69{A@CE(gf4Bby3>%3=E{Ay`b~KNOF-~gck0agu*dyWv`pFtyqe%#)c&IU= zT8{Nz6eow*;@bRhhH(__YIJODvmbQvB(smjVy)D)E@~t|L{TA?Zlt6-8s|nCt7w`p z%S$N}JR7?4@?SBG8I+FB5;RSd7LZPL60NUr{&JQJ&gDoqI}U&g;N%kcuN`E-q^mtA z12CViEf4y_OWJXD1!1-%%L6z+xFiGF5 zn2mb6Ye|kb17uxTSP&_p#;G`ZI?B`i%Rz4?Gl^ew=18~8OBYm5+sv=$i{OPJZOdJs z-J>U?DoJ$A7Vmpyky)K&90Tg;-u(&+B1$85dU@~6>fFFMIqWp~^Sg}%PYH|~02l4p z$(V^tI?fzb1I08^EJuE zjwn>6E6+F}<+13Fj(!O{b^ybl#@|6axRX6b`%bv#nKFH4qq^Ndr#ZxW6u$ zDA?!EpFiCS)4N^OUg#vznt4hgO+_jS^8`q>1BkAzn)lQR+T`T!u2l(WlQ6n@W9VGmuhdo++Az_U|25Dp;lb?i^duI z)ocrP1AebfDD6i-s`r&(Z3qw-fEOM*HJTM*T^B;xwPH#CrLe(cwN&)rSI0>qjROrX z)iqK78Z7iG1MxI<;y)L~dBpVgF;Gd@IB@uzEn5?3U&TDLGBR=%^74XMHXWgSwp5w^ z*`57I=et7Id%vLHo1aN)lzH*cQN0^gW5jbDRo9HIig#?&(2c0ujVT;DEgpZx6QP@x z0&ujdFPRJJ8v~ z!&idCr2+DE5MFn)wz5P6mWi2rxP|KH;h92n64EiZPvSOC+!zE$*5#`JX8q?(0{KXC zKsPuRO@;IF#7lM7$VkQ-Jt~eNDT((w2u8og`&o2G<~Jt3RroacM_N+~lR&sqv8AEY zblfIKAWuT!td-eo`Q8QR#4mr29yS*Evd@mU^FQyg%!%%mu*13C+a$9p^yL;PQP!J= zZd}!^$fNygv;`l)(n)UrG)L68eI8t}Wg4GNdfPDz=x()by=RUCdTUA^CSsx1NRW1b zcW-&6HX}PnzaQ=Bvjf!~aL;9F$&F9XM;a=gOfQtJ7W<)RZ0b`m8L9?MTNFuiOsFq7LMRqCT#p6#Fh4{FG2fRdJ)XM%~8*wKHdDdg1E)jjc4=5&S$J+#0ni3PRK z$9a!Q$i&Fc?k?|KoFp=SUvTUKKv0JTPqEW*CWOsPWHyC$T4W?kJYE}GhLXZOv3~E& zD5%5#M<0voDg2`zU3vq6ZB3U@Q%$VR_U70UBr^G|vNz|YJ_JH_b#t5Wce>j&qA@yp zTKloY_)TWN>bQ`z|0RH(<)6G6Jh>gi)uKYveS80WE#MNZc5cE}KrH@oyO>`(58Bv( zKne3x84xbuL5?mQ z2}oh_SrIcu}|SvjgqG99NUpf>d!ZFWF&zV z*sA_1>t;fh-(WOq+I>AFB%PNb8vWRi#wb7bkQr>t`rKCCX%BtbasgG=?gHxABm*Yl zR5usq4}uv2>PP1A(p&o~pkKGxmVDpy^^TW^At7R&b%MCGfz)e0i7{M@Gm#hr-scBY z$LSP+27Z7ih!Y~uraU4zPmQN*V4!d}n;0*Od)1wo{HLFe)@G>Yq?s3ci+#p3cfJq) zYvD+D*o9olLTiug^l)~*SBwYtlcJ<5dY71{wkVqI2TDRxIchw2#tNz1YsqI}v~Jv+ zHtkMLO=WKt=wtQ+s=W&fL0k{fuvE8=s;3(nvPb|pOp*=}rbOf&*yBFV`+IwPO_6bf zW(_*uGoKLSC039s^DksBz(lu7Qq>gbyn!FpeL#379-@3!FOooB7vQl^E#0*UrRt;p z545)m6JQRhz;^=zLv-C4^LipWL-pdh)vEaR!*)o?8iAlkrw^zG7DOS58p9Hd@jeHP zhZGFEizY`W);soklvk4y{;#nH`bmN7{sSIH%LhRN>GwZKi^U^PaRBpCni^aR-sUI`3*AJR6j-pLyQa{}HeW3aXb+U9kYI&Mvu07vbu-D24C(3dV8RfYA-s4{q+ zPiIegb@6|*A%8xsVR$~$(ZNA~p*P>0cb5Tc6)^xQ@3S1$a%W;EFzcR3utyizhi$T3 z@arlkL++=R3iR%Bb4C0{Y6c98?xlBoVGFyTPln`x z=p%;MfRZVyg_)@#jY#{dUJsOl(L184gfaY)aS(L4K!q!J2EMS^Co%uN&|cI`DPJIJ z_pV$K4erC^z{YXE;Ab&?<`3e5Aq`K_iT#8BRC>*dajpJ$X z4}iz!ECWa?|GL+Et36pVbR!Fh1yGy;z;5*iEkqcxe~U7dbQBBATDrtib-R(-WSZwP zpnBH>h5zIxe8R1&8@;WCk!@SK=~^p7YEiQxD00lPsOALm<}g3Ga;?C}-R~ zCT^;nTCcxAs<10>0ev_6*wGcRq?kK7qK8SHe)-L(0OcA`GM*1sx*JTzcn!z(YAJby z{9oektgu-nBNv!gE)y?fo(Z>`iIW(K(|^{zz#Ps&C^yCiU|g1!wm9$ww<=1bX*$p% z1WH_=7#Z&G?t31xxNa?4sdS^h=c9DcEe~^uIwXt=Y0=@CW3Wu#|5tdvQBivRl{M>T ziyNFj>%{EG2WU2$v?K5-71REecoxk^Q_j{^p#F1aE;&C+hD8$kZBG1u=3(eY*~#Lv zR?)T-^@r;~*_6%QD&V23k-&C%4Mg{$fq{X$HszfX?i#eYt2WiH3RrHbkrLmcXvoVX zsmjdjp0W@*RZM&(`ei$4?d?coZZ3cM+5P^{qPeYow%5B5c&Zujl&C|e*QazvuXy?^ zv#E0L3=o`G+I_d86A&<9VS`DO)X5RhP)Wq9fJMc{-Pr1$T<3j!4kEND^szsOI|JHb z^C6A#Td+R1Yvup9)PR)v5TK@Xeiz2^F z6t8LvEVoyCGC+!VDtxKjcp_T3Q;VSTu-|~fxJ(Bf4ftiyFc#fFbswl~U@{QE>0my& z$P@dmhZYQP|L4+FfN1%zq=gr&kDA_|SUcYWY#JbjB!Kp6!wd#0D*aH-mKp9DiJS(m z#+<9tmf=1$ANl>#KEU6e=H~}%>F5-q_pG*y!^*4XXiDAs^*#@ic*dr_Z4q_p|8&Ja zuy=(or~)VD`Opnu@<_xhXmt%dJ-v_f2A$Lfj3&gZt+p-DbAEQHnwl`U{a?ZCrb`g7O|L#boj~k;;i8YZ?amGQ=WLR21Cz{)IP2f|3E(07ahHjs@S*2`^ zhM|+Heyz5CCy7rtP;7HHl!RMJO4Yac=mk)(g+}@LV*W!|Yu{B7J3O=hWGX0vBu8}m znzhpTEk1?@Rv3KhrA-*uJ0PGE#UhF4G$9Mnj^{@|>D$Kb_^;JCXy^t&`70_<(F`a6 zW~qeazV7Ks@x2oGk@k95t(Uy`VdmW9UcvB$V3irrlingU*Wn+U`i2KJMnQ=PyKq|c znwfi*j-{)BZ7hP{1|&NjK#!29Fsd?<;#VAL&&Yvu}yx1n&$IcR^JMx*oa`h20EV&H7IcC476@2KApzsxN+6 zU;%otVnl5|m@l$qm{0tCeYf_($TJp7GH9wfrnlRGePJbT83lo20tzzc&AF{+;6A!^ zPR9jDJL(0n1EyWP>@r$ct0$kHyy2!r$aX+$k9`*9O{VnHHjWowM&<~J?w_sETR4;k zU_+ti5%6Sre|c}=SQY4j@RJ=DB|h6{0E3_q+Qge?$4Pu(&PK z3kYLp6X5^GN{;d$3w;W%Q&cAAbof^Hno;(14j((Zg5!i+%j1Khn zoT$@@elpJiUI*%fDArzu836gEPz6+=u=)Q9=ozpoTPE}Vpv+Ui0v!l#o_$1cM6d6B zxTTP`E178%9^s#an2D@A`#U3+=Jc~l4Q!DMpC|n3Ex*4a_rbKIgxs2d?PQKPf!dl zM;qqT=y&wbf#egz!2KI3m^9TKQJ?CQ@C)7lZf~h*rtJWlRMTC+#jB8DT=zZmOx~)w zc!ACVKhF^~q}y#M^#8NfX<~l3TqTw^Qn3hjU<`Cj_|x*hUY%KBQQB`NimB?MX#F!) z%%=J}yRczv19@wKS@F;{NxLG%s=Bw-5wrju(Y_L`ubuMzC`PzHi^&Aw0yz0r6G~`u z0V9wYfP4L^=zL36QUWFMFUiIUd_kIOAx1WEJtZ{~2U^60(hMMqBr#C?Vcgic@RV?p zOmA1=T3ojFIRIn@Hlj!gg|stAm7%y6U&1VH&ED!o(_N6_i%~zRw7D6v_0CK zZhUPj@~8!&a8gl(bW*BE01SgS{juDMo|=dq*e~uO1%Z8Svik$SHc>wN!(a^1cGn_2Kwj1BiI(zo zg^rW5Q8#cU6TRT@dkgh0DDOEs}cf0R=Yo%E#>j+()1A@z*b8BD+|+=2Lkqj zAEZ@ZPtQJ)=m;m~B)-c@c(-q$z=TtO^A9V*`go|IJbtlx&dv%-jsLW-aPwE$KiKO9 zjtmn8D?u-o+gqq_WW;$ZJhxMY{}qx5&S~N{55PmJkES@8l8oRwg*uzJbx!d%@euw+ z72X#M$Z}jMYK2w8S}TW4Vor`*QH>d9vT=hscaD&OU04@>c?v>fHMT^54(#|GSa5T3 zqPaZZFp9SK<1S-(uV5!+9i0KU@YZ3GK3NpnhI?=U%tw@Y&)VZFlyqA02t<)_YchmafAY z`6)7#G!Ir|1pPbky7{h^0`O0U$$G5gJmlkdwlQZs^U6_NS6(b_TQ+}NuHdf8!gU7T zbRA97g1HzwOmc74Xtlsh2GOg3U7+?@EPbr)ufA)#R#cAiW2eYG+Q?uxBgw2N=tdMt zuR$F?3#AS(w@=N-FD$PhR6Vf-(#FUl>x~ZgjZS+3+71l`8)GXzBFz~DyV>eD%HsOGKcth+a<@QuleH7%`D!R}II2HSOhTDL>M!3qZF$1UNm zR)T{C1#?ua1AnP~V`?Mo?z1(-hnkcB8)K~c42F9_x)ml8LS7X8)b8BhHN2A2-$!)JpV z+v54mM&{w(bC+`YLn^$XR69ctYM}$9!O$T6-wu2Og&M=Y!M>Yjf?2Z|uIZ;1m!QZj zI+jmou34-iO2`Z7x&pya3yM3A<1l7_I?9t9r{Oo|F=Ulh6jf99_3%cV>5nRvYqCm8 z3(vWGGEA6lq=9PsfxN=YM$tT;@#+f@41PJah&V&Fg4hu<3j^g~1Q9bW_O^mS^q5z< z-sb|naBD54`cz2zSI z0SfLJx{*ezIfCz}a{H(WX6*|ozt-mc;D()p7`oxxe!uiC z8*B}I&f;Fay1sG5+C-eHr=N-Y0G6_!bOffqaf73x2P=bpytHsISmE%mu*w7)FC}i` zwAI4K8Xb)t4MEZdE_=;Aj@USZjsV+P9?+x#JiEZB-*osH7^RfKhiX*{z&6v?bk*^E zOmxD)M#2D+%9+~mKu@)ld2f`Lmrsub^_G~*J=$wM=5V()3@FLGg=c*4$C-Lne4y@Q z?<y4=mcy$cmUm6IFNgiC!6qL8w#=Vu#mf>6p6jQ)Lck_ zX{2fhmg1?LJx@C(`(l&8^`2@@Q(o+fptDW-E|AhSEx~~4A8eHEtX&*GJ5i(jO|J$1 z^E31(9`qo$h5RH z+jj1(jsT0@OvT1n@HRCV6cn!B-W+y3ZU)7ppp=jDR5)mr_>W7xsipY|Z97&LW|fo? ze4ScY+tpP>Xf!O^JBcigB^`f>LUIKQ1N;Rq1b+^}&+hxq;@HU(%eNKUKH#h%$|Pi* zin`$V5_1J4J&&ly>(1bI_wMHk-ojSa)6u#(l?;<*#hcw^7TaYZ!)JP~hJUB$*HS1sEUsoU7qMP4j}`Ei5J|Wy z(p|Imp=D-m1_7PzWEu^MN$Q>xpX@X8TW25zPz?o~uThO3|AQ?5!}gt)Q1q&BDFnam z&cXJhJ%3rZRp&Kgd5oRu`2z_4YA6!79orx`ulOwPAUy+DP?wUw(^BB06F(-cuz&wz z)hu>Gt6@IsF?lt`vF#IX{R-QjRZhM%+UubryDyK9*4o{VE@Imu1$Way8g1}4*-<95 z*b9t;t^wY}fXV2mx!&Kbp=d@qf?W>fb{TXW@8aLo>bO_vO8OO6rtd1x37kXW8@gPn z?9os`Lnx=AP-b84P!EFJzr^i#blMh8S__=jEnSm6XoOJTP3yPMkV$mkSYyN==O3z{ z^e-Ml_!ehjKL`H^X$-(#DOuGV9qO!?u69R~9dLZga@xG>`OX*Lc zhx4Ro1<%mKHJUmJlXMS9j8S0l&J5|p@!zNB`^ksZz{*)a)DZ zg|}pRo2Uk1z1uKm4`n1iAk-Vg5D8b<8t;)6Qb{}+_bR4&`LPVzAl*CR<1cE(dY7oz z^Otfod0FekEJ4SLHim0pB6!4?{>>7yy@FKX_tYkH)4=BGsgJXEC2RKjak9tZMq|*E z@7^uWyCx#r%CSH3u9^pQYcAQbUE^e7nNa3-=-2JGPk!f-D%%)>iu+evBcET*K3#fx z7IBW%$X;o&G|a8|hNX6d<;eQd^oafV_J^#T2gJO)Tpm@xqyKi=nZF(?Sf8aXD^r)( zWBh(r_JZsU#5WcsuKL@?KQa7>D*T1#8qz%5Jo;Drk(7a8uObe_nAwjV z75qem%Xf76p;ya)yO$quCUMp=aaOZab&Avrg=n`Y81ruaL-v<>Nh+f|w83I|hwkx~ zpL}A@2|2`DP-&sKhTp%mv03(;Ect-t>x4CVBP|D>rIsM^z87nxMvK_&!~FbO--X>{ z=~?Gl9_7S0j56l3r#1q;45NvU@6CGo=myKY+i9zqr-yv47}Ho5$g+uj4U}2ndv&BCzuh{z7 z5pCOdYUZKPHYr(pI zN?@%8F_~o6Lv?*T_5m#e+W4ujuJ~=gkQ?i4z^)%~Yiyfz!0CsglI0+3!O>;?8_2fy zLp8*KBA8zf*3?Gjxw|Vyx)U?)>aJwR`jbfcYzG_unDblizotLtd2y>|Au;TqaG1#8 zT*C_se=_l6-a|aSW7miTujppxo-iJ&r z4x#N?FBV;6O~0t{KdN{jZjqav0uAC@^-I`G`Mop>5>}3>_RzCr>wj21q_o-G>2N@?~ZDo7H--kBoIjzH< zu|vdS|5*NNShm@A|6*In_2?T*mMp5nxj$L5{=eY)>HMxNUK;uIO9-hy-Cll55C%H^qY>_;H6ep-qnwXR!J70J}> z+t;!?W(5Hng|t5`=L^5CG=9%MYUDiiyEdEyDXd@N)I{E<|2)IO20&I*$5Jl??uujE*=r_Wt|S zkmy^8A)7akqm`lYg7HToZR3SB-xssg;lhTs&zK?O0k1i^rT1G)p^J@k+ z8t}kf3HZi@-o~~VH?|7*!%nE5*{a_4AB;UG8`q*E6YR$5q?E`Iyn(JA_PSC%!b);Gl&&Ul7v=+~$*nz)Hroo+l$UoKK{D?NU$n&&4;5OqKG<^J$ zv-1KMV@YTvbMO6rV}dxW!)WWM>`yCQl3CcN4$mH_pWIC7Y`Sws3r72FeV;RLd?|>Y zafmwavhcKl%o?-=2-BbVL8xWs+W9f;>z51wtS+e^hC-s%()!e4m8R)sP@+n9M)r7p zjh4od($M^Ri?L+(#-1PY3{1>7o3jb1l_h_=p5?-y2I&H97FC1)x0x5g%P;7a)7Y0y z2U3ltSKcHyrh-tDjl~ye2<9o{^-J-*%RzjK4)+Au2W9T z%@1hZ(fl>Q9e@i2_bLyuA%7Wly;5#JyUzo-0!vxW6}PnTB7ZmIdqJbc}G)oK{#XMhnN4c zFs2TSKj7w6OzyK#kT;^Eum214Gl5ku{%v-jyu3m>9keuLgzAeM_a>~hPo5@(R^a<9 z-4EP}54sp!7!wS1490RT8dN$AjB%;;cifI85{_IE;mF%>OWmQl9!x4D zvqmo&HC(@hprH{OxCSTFDb#_Sj#B0Y&Y=DJ$=k;Dvb9nAOB*Ux57rAtr0mjYzzDXF zKZn$pYY#whP2=6sd!Cy@G5bFCjEsy_w$Io21f1Kxs(@Hlz$$e$aTZ$zl;K7}qwhRw z>|Wg?0`@ufI>Z&Tt)iZ^kVcQr8j{Ix0f^*%qXxtP@p40rj-((`zFF$o)GLgeToY02zcvtVmt3v}dRAxzp(Jbrs(KQbW zqk#amV}0RK{$fAP--R&IhPO(uw^l^dJy>b*oo%b+x*S9%v@JMRPdG#+WFa^Zlh#z; zJszR4wYnv#+^V6d-hQ+|khP(?-kgK@6Ea)u7u~VMpO`b<;D^nRU+5ga(i!N!m^$#0l}0}it>bM2+2a~Y16Vzqsc#fwR-;4;o`JPGr8 zNI+aX5NWD^CFma?VJGBN0hT@C*;$$1?)guD6mgzM zAocxJx`f6L+xkQlx^KQ(}EkT+rspOzW%sO0R-K@Ja@HVej@^r6_W)AwI=qnOqjwE3YH?y~#tv1K*NMaA1Xw zbq}a4DHz$!InAmJOv-V*CP$h}<0@;1j-&9txE(nD?|1ON@POH8hUI}5tLA|8g~zKb zFR8=xmF9UtU*a}^;0z05r{q^|1OC+To}@q&zE3YSuLSnd#n8c3r0R^cdA11l@RCE& zYJ@=vESquzv$~PeXk-sd`IsVO=qoe|O!awj3u|Q5x?Q{b3-Yr8ra?9WcQ_jx(gjAR zC0J^NF(#Q@5NDLD>Wlbkv7x_U!d&Qj-;*Cbby}Y%07hP19zaCi?=Lux0ka6| z7pf(rKMF^&q+kw@UkR!ybae~}=0EPBVAKW6loOV%qf^s?1nX&;PyFr-&JSh7ckny0 z+H4HYE8>7#YsaIq%{u5^DO^Vm}sC(tsJlqbxbyMb(vcXu!4L>{7d#X7^PmZh5DD6dNB{T4U}T5 zfkTL2bmc93_>Z4f^i%E|7(mt;gPq|WM>oJe3ZWZsWIr$et=7JPQ^+5q7*e=v%jcnM z=atr3U1N2Aq~NvYz_i*L#h3HmW1DplPF?BmUBQi$u*>u1{eg~VmdJm`lv4ArDJkDq z%b3@Ab@U7E*8E0x$M$>C=@+SsSryv|byinPQG1$JLSvzgm$Rab4w9-*prQ?x+p(Jw zyp9#0=oLP-X^pyCu+cWK8oJYUzGm!3LUdGA)VX+hR(V#nE|^whV34DLo-I$T-Y24n->stcm%=fj)H8~lkD?B zGZg$|Kjm%N8R>Uzewl^1zaZWi=L(f%<6?G$21{1(RTfJcc5HuXY|pZdrM}!i7p)O5 zyqq4kRx43l&V&8b)a1xEyd3oH&38%9demlHIWH_sG|H;Ip5^r5UxdJhaVPb!LIkXV zC1=xh#Nx|43wZlIR@9XP!wu6&_K(A(@t0WScg?=hZ@u{PyX}f$6wj*hzxT_eLMHz=6%#w&m>w} z4}R+I?FLW3h4+aS84%CI8VJ`Sq2c3o@4Zt*&72 zLSy`;?+ zO~HC&ivzT^VpVxqHYpG9I@&#@yZ&NI8#Ea!4#zAEQGeheGK>lkIGcQx#0ZK<9cipOQVxd#Lm>f(ohIVWD2BUZA`qKYlh?FJGV` zsKM*whDNmSq1D_;r0PYj@m;)Dd1UR+U=gTQXTj_p^5BI!noQkRMlK$zaUqD2!7~!?mf1KGo=lj%ahVng3l%l;dpi zMiD9-1vEqtK6F6?78_*4DA=?jX)E77z_B-w=PZ#)@nbEH*)9 zed80_ma!vhWTa@^07k*gc3!{f<<3+aRaPF3)LITi^+39Gl~uB_T$x(D1Q2lw`J2*v)Hh z3xA?nP{!~9BYPAvWK_=>*Kj}(wWuLj-|$=*jD1WKjQ))t9`9S`Ix0ELYX-OP1X<`8 z8tuZa>|Neb+%IS+I4)dmZJ5$_Y_((lp6_~&VZ%E%J86`gH%-B$#P5eXa=U<$1k3wW z((?!2aUOKbsBX6KE_;j?>y&xX%D-+=Fr1lN$G#}>k-vwp>vNK$EQHAB0V_T zW$JtI|D{|Od=9||DeRrxKD?GmepP$_#g&c28%_A&vF$MW*g)d?s1Q!A;laub>-;Rk zmlbE?g`(TkFLykGepLGJ!k72)dw;ly=-d+%#C7XPh+PHxiNXe5SH;4>`T+xmUmoo- z85h?{0DEbW7X->(FU`C0c1c#OD@DOhor$Z2(u=OPi7OAM*Q95mP}fq%yi|&OmEx?4 zbfk((4nNgn?Rlx(AD*vXZri`=AMNbPrgGY;t<@(8q>O}_Bk_i2OoOWrviU-3gq|PY zHI0{#T;o_#75`_?a?K5LWd+ZdE;-|Qy?Mv>z)64#0i?D{ssbA36n3g+qK`0)9Yk1E<_qq^e?5T(^zr1lsHTQs{gqJ(bnPvq_mD=O_)K|azm zL;H-OMbt5^Nx)D;mFby_`!(UxYs(YF`Vyc3&T~8C3azMy2UFCQ_Im+7+8$C_P?->! zU>|MAUY@{QCS-@9hikc~mDPwo%6oA8XQ^JUm3hlShQU<>=} z(ey*4W@N;bc?jsDjeR8-*OI80gY4oCb4>IFLW}tiw65N>Y3p+EM}&`|v#xl66Xa_$ ze`^uH;S~UYU---*uT?)_EenY;FqUr>XkB5&@P>{%u-BvG*&Hi~-eY^y_%55M!&eqY zI83E;R(`tK7Ef17vBfKdu*-ZcmHV~PD+tbaQq|$^iO*1f4LBAyw){^Nbk-AX zhSuu8c2FTtt6?&)499+U=Kh?OCLn!*#k7o1i5h~mlRq~3+j|Z~kZ9MBA@W^mhmOK1 zOg+H-P?0>!bFwe9aSm@#LJpm+^E+beQ%BTb@UOn$UQW-WiQ`llQIx9{^jfT_xoBvd2NR(>$Y!%0oJ5l+8<`@7s3WPT;AxltON zl3Jq$fb!2Pey?dZwrB^^ZcHj5c)E~PT@@?VQd!=q7FckJ(4c}x{^bs&N~M(eQd)EHPCKityukD=NZfh1fPH2I$J@)rt35^5QTw4tIb)E9dN_4TrJaBNeS8Pe$Yw?S`xBSeN z?MTSElUW_@Wea~lZAhZj3gRg}<-x2x^hw*Y>;qn11YL|GymE2Tb=%2;TaWM^_O(OV zPF}3><=om}7VCBhSaH`!f)Zh^AKZvR*udQq8zz| zSw-%Q7;=vjxmRp*+bW?jPA7|6NbbYdPByi%of7Mi+lI|F!f_d!g^f10{l4el?;m@7 zzu(XI{n_jNe7)Wu8|vH*3471@>%F0YlI6h4E7@%Ur;$j61-hES+Ie(T=hCi=p%*EmT)(355P&s6Eg!VJeX} zu|i2{?<9k@3PShN0}lJk+ht#%(!Gbsx1wVCMPn6y^{X}AJ3zhsvZ$5o?xOBXpCvjtO(wi+`BbV0CGc~BGoP2t!M0Q z#~wG^sEzH63v8Ng{mO;V(*QLd#=DN%uCFj?IDL1pmJIk&epX`6#`YFBTPL`V77Xl* z=Q}k3Q{5zqRGN(LEXG$pYZpcGJz&iBDNlV0;m2rk%0y(}(9h<8nbEiKA077!OwcOm z=RMnw#)6> z)rdLHo6RsJ;#|>uxNs_ReNRchjk2Fy{v}0_o!oF0ddo44ei5~MOUt&P|GyFWt0gMD zkd0jsKlO|YZjuthcvbxVoco4MbEcU>uRmyLb;xs%Ex4}~0o%Vc7e!yF4b3k_>P(pz zs2FC4?-`3q8H_>}^kWrd%cq%W+Gw+3bBqDMeLyt8(ZuqU?2frb{|!db>pQ;OUIjK162ulEB#IpH_njchGV3X`2~mkfmk1Hw zo?Afc(vzbT&>zV5k=Z3INvh>oFfpTW4Ptr zT!ZqXHv=CIAc#$eC9}*Av!CiXxma6&s;wJ%Kj$cvBW;YYL5DJNDF)EwRIp(;$v0#E z{Ah*903Im~+iV@^F0L9y-KN1CA~BuOEnaOVq!&1%ZQ*-O%=@ZMfSZ^prh^jLL~bk{ z&Y6ra0=W58DkssV3`3l4d&0?Gj_vK>RCM0rHMg8r_%?A{;AosloYm*r*=Yd>%Z*z9$%TuL z%#nEr=8tSp$hb_3q%=G@HG%2YWs8{YYS_hM98a_gSO5aMa$v(6H|{|YZB06l5VyB3 zMaHG|#20qYSuehXFPQQUc3Yx}kqr!pcq%GIZNe!s=Ec<-c0KT@Z|dH}OLZ|Y`|Sc<3ZNOjv)ZUmQsVI?5c*X8;r!e~(uFaXFrEkp*1?-jmO;uV-*;U^)9^iO!ka6L`r{g3q zDANXRlMZC9b6VD#A{s_qy-R|R>Txd)g~AWcP*QJVcR$j=|E-TYT#U0WJ<+ zB>3Tu!-d@R-ztir`oC5zA|6kapUk$nFZWRmQt9y{7T!x25ZqYO=>IN2g8rAXLsoCWfs?h6?8GX*@zL4U1D zx0=G$`TUhbM!Q#r&*K;Yx&Cq!+0#)q z<~MD23bUE|6)${=TGo2#LI3ALSjrc(hs!v;MMTGXXRzdB-k%nthEZ4Mu1{xDiTf^p z%hmZ1Ar0yH#QRxQNrf*jXTP)pL)~fQi@(RlJ1MFi=YexZycZr2XL!R{-OpbaI%;7gXetZ|s zZ+q-xQho;uueN`tsY%|=Q_!7?!0VVW@q2=HmIn>^el+J&I(xB}&B;~e! zf@s8kMLo27dAgXs&FXbNN`C8h!wqRW2Ojf8C86T~E~!0!bnSH(k(uj9pv@7c0#wC? zjZO>OJu68npMu6e0@6J9npH0dYS0Q1JHh!U zme(-7U@xwJl!sM4vmYb4MQ265(P`G0NZsjZb@P&7KFLT?uE42pR&(76yZ`LG1I0fb{a40jldXAuvBzqT4+-HGlf=9K3O%(;8xHKaYPw8=;xvx9TC%#?0eanp- z;zK#lM?{URA1}cJO8MpmUKL=ydo19SxthvKjFCxfs4Xt*FpTkBoenXqPv@^9Y^GORvpt1y8E9H*)8#XkAnD{nBZGB)FiLkwee%D zq$iKzDJ>ZLLmePCBhh%&74`>ZX?ZDw;eyr=>>e8Vu@%=|v2vGZ`X^+0Sk#?}O3IDj za#?XjU(TWXdk6b_lb^KM{+toJXX*R?i*a|mo1*>yA+`MUl~>|!I~g$=nt?8}@F1CF zduBi4U6nv%kLE16pX)UBDjDHsqwEDw5H4x!ky3SSQtObV?3tDO)X}%&E|L=8%dJ@? zG*vSKp?v4e-W^hqj4GpHSPBp52-Mfjxy zllCwJ`RDryr;)a#;8>eT4+w9oZ^~Jt=&xi$S?ZS!k8rxb%1zXccngPSp$!#;uL`s0 zty_b<(_cRcNmB-X;TpR^UOS5%)%*h}2d;=$ipXLbdtD~lB`kemEWH@}v16)HmNas4 z#HIXxMZHI?W+BAEpX)PTyK5~gh+1zTSOhif^ERu`Dg`)wqB5(cCw~iJd2U#v^UQ4Tu;-6O1H@xNcf^}Rc99#xN)UG{S-m<9vq^hEXhphBkxXdGCMr)Iucg$r-q6 zCmdNNvDKqeuv<}4Ddh8NQ5eRsM7VlBq)-8s@;EJql?AdWt+N>^O*w~|0SWF4NW03g zw50_C&ctR=Fz;9-+akI%7Nfshg3LW(tkkVHmn~5n@O1Z?-hTiYXA=x9p}Px6Q-Pmi9nIcI6vn58<=5js~wsY|I2NDi)pKdLY3xeB^= zQ=WGVNMerNEiwLinVqY;)%7*nvk2Ujas(O8YS*yc)XdiO3>VXtB5_zRV}Ob4ZaH(3 z%{BscRlC|pbzNY|EkP7-m6AYv-iua_KcbR%T|i;4co5PPM-S!~$Ncs}CyNlth=s}k-4(1#n4M_SkC?`j&J(JtVr&#;R8i4PZNrT69kQO(^ z)K2a!VQQJyu9KQLbk2XyS@1!&R4k{WXT7CiM>_>C*H6npI>Bg~uIJF_om>rpunZ|a zm}&w|IFJK_+Q~GWeXl0o;rjrsJLBwpk9RMUKLyCJeQB;!6CeTt8`iW99sD&mt-$Cm zN27peBLspFb_`;6Tj=B)>C0md0h{q<->ba&?WwR8DcML1kZB9ASu*xYfYxBtAob`` zTbi1(i98{b;vL(-)*cMN18~y@A3SypO6i|~X7)g68%Ae{?2yoa?Ju6ot#>HQfZWZ; zvxH|X;i+sQMvROXWFe1BD+iXF;j%M8J7@Eg5X<|Ye~kmuTg@1HKPfI^d7b@fQg{-Q zZ26R^nFx>ZQu!w=W9207&-$jFv6snjBb@h^2FINfT4l`hG950w4?p@NNcrXPj__TX znXhMJKGW)x7heK!s*rG8=X4!j(XfxWmOQm0HDaUQ7vOHi6+<6*Ht#l55Sx-S8QjCN zN<_HYCpq#ANZ8Wtnw7i!edt}Kv(L_n$r!tT4Bi&{g)aIXE2XBrV$A4<*)LNy@;gPR zyNflGj=Xq)s5XZE^*!|vx7$NpXQL#|%-HZyxoE*oeT?~fvWRE=m7V*^*5}qqvsUkM z@n4X_=)~`rU3d*jLyo*)hY0%pH}|1uKwV9@uX_3hlX(X^DwEl586B-_uHqD$2-c1T zB7CNQ%o%^H&;4~K(u_yg0m?b5#ePzY|JhIaeBgzqo0dIe`g-{O`f%QX-}wm^6lE&Gc7iJB{h1I|oumt-ABt{4cVYo8&5| z_Q-s??TKsm$%;~^Pc1%uXH0Ss%)sd=Znp% z_`0T15bfP>*Z4&X03}q>?ru$$H`~n=U}MqO=Rye=2TiehnHJpb@^S{GqUVoket4a0$VeZd%Ls zF8rri?(&2KwQ;)k+TNqwkqqyK*U$A$Byu_Lf=en^=L?8Y(kH1Gt|WY$LRr1k%z=er zMGir^q4<#>$A{mQ4@hLazrw$%xvTnigkm`NLX(4e!lr@x?Rb^@73a<#+A!9d1ALu1 zfElJ{QHbz~pddkrz^g*b4DQ9i866?o!a7}e0W9MZ+sPHeI@~;T_SZP82dO(fC97Vg zkug9$Ydl_x>4+^=;%;;P5(Ww-GceSJ05+vK zhz?17;b(tqm*U)SK_(~SrzTdng`3J(XmthsMzg7jkFL`|>+M!*t#ys50>x|V!N z*WE=X@lSD%)MgujM<;e4dgU#76J%$Uqv0} zNL)LQjIiLJnZIZisG1CHeTWQhfRq;!2Fbw@xTGmh@lOP96TDT^zc=12@SYv6xmw8U zq4r+Rj+|?ruGza+m5gbk{P6tw%d*PEHz!{0`d?~U+@BN;wYpf9W*u(#<|w8s!uH8q zRDO0V)F4X#v*x#nz1vUDMMlQfQ_{&3O+MK4K! zj8Md`l{Ph(FJ4{i_yw&?&#AS&=B_hg$HWN14|FGZ#sPg(2yRXab$SlRiA>mwdJ2K7 zb4k2VPbtV^M=5oU?_RleTN-qAlv(wAYFj0B4c}9u4jJ-O3IB7d{oxfU)_v^INX|M` zIq~pbYx1F{^=4jK#=x(hYQ+;e7RtfIkFknM`TuH|IYq%-9}qJ)NaaVaiU(6e{MnH> zSG*LjxvR*a$TaN8|2XB;-Ycje3wsBSu4i*g5V<$=H0EsJv(SA(-6!m0m3z;ONWo-6 zb>5!?`gKiFnEE!nN!MG?!TZ*LZ$ zuVvxJim#TJ0`1%tcd*wl&==2i6VPgX&d8XI*P4`iTB2k(?}61#k>2FrguKuGK_Ra& zYqTYpGvVSKp6ByqvSSroO@84tmz_HuS7@6(^6n3HA}5R8rAtCHsv5Utm#}$vX9((L zFecaLxwbWl)#nU!jG#^9aHR+YEZW&w!Yl&9K78N6@*iLv!pR{X|;O4~|n%Pp}Z zFEhbkV#V}7BW>JfsS|Cy6TBsjU3KNSn5|T8U;b53m_a2FM1F4Pe^lcb`@Tm*>k3uq%Y_(kEGa!!->qpYzFC`q z^@+3iU#eiN#^72lqCTF`3!Y?yA`%YR@5M>Wbiu3aWB5W{TVh~UCry4b?R&gL81MKS z5CPMBio&5{_q{8pj(EUmBdn4OQS!&0=l-H zB0}Iv(DUkJWxh#aMXi4%05u7_biMgE?@%9UlVCQu>H7iI2_E6`&d^MYy}C*jfh97V zv?z)}_alw1Y!Qqhk|{l=M-vZ6BK*RU@6MT6P%}kL2Bc)zbo9$-R=kF^C zaiv?sKU#?WfyzvH`)H!VKF6h^?MRM5KC|ICiGwEiX1WW!x(B=`Aa;CTODSj$7zY(# z-}XFEe<30tQJQ$y-F@3a5JI3MXm)?Y%o;16uc@t9arRD{7A@c+8z!qb(1OJ2AN=gy zfM;NqfMlhLx5RQeE)v5ycx19%J-NM!`yvt&GJ8U2LSsvI%PrK_nUlLEQ&9=w&96ec z<)!ir?0O~QG?E(uNV+exFDdikz@VuIcxF|fYi1u8z@oTGALHDzu5>+(b$iG z`BIkL;;cSy$Cv4Fe;7{3#rM?`JSD7D-dT2Xpt&D87Sm!pxe@S;*Ky>i`dQ23d)%pFDf6xuj>}vUtg-^}% z=QWAohlRFR=NMo3$1-z9*G;YmwM1N@E*53mBp$v01b(SqaKANuIp%aqjEH!hR7Y!~ z>1^ydLFtUCOGckEZ6pRrrSAY#Xpp?~AOny7#}NI95dc6@kweDAFU*6==6>_joUU1@ zv{G@lT!H*55-UUsm^RZ46lE}#BhnQSi`_Ns0*0(z)5FX*Q%)e)YO*8=HCqg5)Z0f^}tD17g`p=%K zs%JqmRe*d$vO&iBO9_P5oC_*#547^l2G8=AGxh0d4ADM3*eH0k!q2KRVc@@%HTc`R zWkAHcbuAau?6T3J870c5RjO}h%+FUMTnfRpgAmk6|4zWU&FM9$Wq*Z%_m8PI7AH3f zoX+k+qZkmvFZK8~5P;(eLOMI^Z>jGc`7$q)>w(|up1=8nG#gC9F4QdeyTqH`kxt(w zyn$yyit7JEIqXBYP%Q(>*7E@qpw$#Wf}bwtx_) z{QJGq+C$oOI*NkTwOw8{*k9~g)UVuOsxD?9izD<$<=Afmb{~Xr?Zdx#6F+Q9gD%Fw zgqqIZ<9uUtQIRRVW^GDmdk-S5BP76_iA0;cGRDareN#34LtJ9>5#ILm)s*(9)H9~3 zjcgu|wJuypb|IXvg(q4Ea!+4D0E4WdOmG4vuAQx&hew$^yMRZ4<)a}IK$hC1Q2X0S zqw7LeYxVZ=zruft3U=AY%iwROe4dyKv(NtrDdWuXjO}YTf14FxyDEd5vX=JoDuFO{ z7b*S;7NUtGx^u*-X(pSTM@)}n31eqo=JS5259m6h(R9TVxO4CK2iAXGM%K86$2QQ0 zMfW!@*(Jz3^&8ttNwg(YnM0~PZ!H`$HPz)J%{Q#dIQuSKF59Y9?;NO>e3h~aj4U$=;=2}tGx)0fMeU+_&{G-hHS4R5vOB|qru z$R8$$E3~GAW*1-231PJ9>sPk4`u(C&JK+b6V#(26eGUGm^0WiY^NkJR-IW<~neh89 znl6vkSGTb`ByNCrRZmN_O%yjDutS=YHw#ttD#G;_#;OPKKp}L&6rTv@wd`;(j{J=^ zJMmLwj{Qe+IA!>^&@;`PcbSXqHxoqTkiukVPny~7n(K`#`F_X`)2jMbyu2ACNHKlL zPT*~ebnc_i4qod6R(ly%udVt0i8(Lyv4& zv`lC9&7T4q&}figIDYFV&M&~y10**;h+?kYnzd1+l7Gw_+i)DtOR3ZHVj@EAewP;x zZyWb#aKz;FPYBi!%xr(VvH^B8?B?axLnVhB^BDVi9~;%aUSsOYY-=Q-+hpQ>z-rZ3 z<2NGX+qaKz%#eaPqf@)}uOlB6dTV&5l?9}J+{Yc7V%JS-|Dpg+ZS%tS!0f1$I%MZk zZ0EqpnexlB9k)JRI1E2uwRHW+ho9DH0URDwyLz^>OqwgssHB*o9%FVnn^xUa*sb_0 z@Bu|y8K{r%Zu;rZ&CpLgSk~C;GL?W6^iMpPzPerIoR7{!0cku4$Rn)M&O^p>FC7whqTf zz1^_?;8P;F5js`Zn)R>r_=a@@&Vlkp5G3ppHz~T`vV0hmbuzP{WL#gmZP138onA4k zNRrTSvH8nsA)B6H?O|Qk<1L+>=P4@W@ + + + + + + + + + + + + + + + + diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx new file mode 100644 index 00000000..d1337d7e --- /dev/null +++ b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx @@ -0,0 +1,89 @@ +import styled from '@emotion/styled'; + +import { SettlementItem } from '../../../../../types/settlements'; +// import settlementsFrame from '@assets/settlement-data-frame.svg'; +// import settlementsFrame from '@assets/settlement-data-frame2.svg'; + +const SettlementsTable = ({ data }: { data: SettlementItem[] }) => { + const keys = [ + '์ฟ ํฐ ์ ์šฉ์ผ', + '์ฟ ํฐ๋ฒˆํ˜ธ', + '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…', + '์‚ฌ์šฉ ๊ฑด์ˆ˜', + '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก', + '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก', + '์ •์‚ฐ ๊ธˆ์•ก', + '์ •์‚ฐ ์™„๋ฃŒ์ผ' + ]; + + if (!data || data.length === 0) { + return ( + +
+ {keys.map((key, index) => ( + {key} + ))} +
+ +
๋ฐ์ดํ„ฐ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
+ + + ); + } + + return ( + +
+ {keys.map((key, index) => ( + {key} + ))} +
+ {data.map((row, index) => ( + + {Object.values(row).map((value, index) => ( +
{value}
+ ))} + + ))} + + ); +}; + +export default SettlementsTable; + +const Container = styled.div` + margin-top: 30px; + display: flex; + flex-direction: column; +`; + +const Header = styled.div` + padding: 20px 0; + margin-bottom: 20px; + display: flex; + justify-content: space-between; + border: 1px solid #000; + border-radius: 10px; + background-color: rgba(255, 255, 255, 0.05); +`; + +const KeyElement = styled.div` + flex: 1; + text-align: center; + font-size: 14px; + font-weight: bold; + color: white; +`; + +const Row = styled.div` + margin-bottom: 10px; + display: flex; + justify-content: space-between; +`; + +const Frame = styled.div` + height: 500px; + background: white; +// border-bottom: 6px dashed rgba(17, 31, 63, 1); + border-radius: 10px; +`; \ No newline at end of file diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx index ddb55011..1cc8943f 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx @@ -1,9 +1,81 @@ +import styled from '@emotion/styled'; + +import SettlementsTable from './SettlementsTable'; + const Settlemented = () => { + return ( -
- -
+ + + + ์ „์ฒด ๋‚ด์—ญ 0๊ฐœ + + + + ํ† ๊ธ€๋ฒ„ํŠผ + + + + + + + + + + + + + ) } -export default Settlemented +export default Settlemented; + +const Container = styled.nav` + margin-right: 43px; + margin-left: 43px; +`; + +const SettlementedHeader = styled.div` + width: 100%; + + margin-top: 20px; + + display: flex; + justify-content: space-between; +`; + +const TotalData = styled.div` + font-size: 14px; + font-weight: bold; + + color: white; +`; + +const OptionContainer = styled.div` + display: flex; +`; + +const SortOption = styled.div` + margin-right: 20px; + + font-size: 14px; + font-weight: bold; + + color: white; + + white-space: nowrap; +`; + +const ExcelDownload = styled.div` + width: 100%; + + white-space: nowrap; +`; + +const DataLow = styled.div` + width: 100%; +`; +const Data = styled.div` + width: 100%; +`; \ No newline at end of file diff --git a/src/components/Settlements/SettlementsLeft/index.tsx b/src/components/Settlements/SettlementsLeft/index.tsx index df239140..050cce27 100644 --- a/src/components/Settlements/SettlementsLeft/index.tsx +++ b/src/components/Settlements/SettlementsLeft/index.tsx @@ -9,10 +9,10 @@ const SettlementsLeft = () => { -
+ ) } diff --git a/src/types/settlements.d.ts b/src/types/settlements.d.ts new file mode 100644 index 00000000..c257b7db --- /dev/null +++ b/src/types/settlements.d.ts @@ -0,0 +1,10 @@ +export interface SettlementItem { + '์ฟ ํฐ ์ ์šฉ์ผ': string; + '์ฟ ํฐ๋ฒˆํ˜ธ': number; + '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': string; + '์‚ฌ์šฉ ๊ฑด์ˆ˜': string; + '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': string; + '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก': string; + '์ •์‚ฐ ๊ธˆ์•ก': string; + '์ •์‚ฐ ์™„๋ฃŒ์ผ': string; +}; \ No newline at end of file From 0963a2966634e16c53e8d5851fc437a883a787af Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Fri, 12 Jan 2024 15:47:49 +0900 Subject: [PATCH 06/54] =?UTF-8?q?design:=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EB=B0=B0=EA=B2=BD=20svg=20=ED=8C=8C=EC=9D=BC=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD&=EB=8B=AC=EB=A0=A5=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EC=A7=80?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/settlements-data-frame.svg | 3 ++ src/assets/settlement-data-frame.png | Bin 27973 -> 0 bytes src/assets/settlement-data-frame2.svg | 17 ----------- .../Settlemented/SettlementsTable/index.tsx | 28 +++++++++++++----- .../SettlementsCalendar/index.tsx | 14 +++++++-- 5 files changed, 35 insertions(+), 27 deletions(-) create mode 100644 src/assets/icons/settlements-data-frame.svg delete mode 100644 src/assets/settlement-data-frame.png delete mode 100644 src/assets/settlement-data-frame2.svg diff --git a/src/assets/icons/settlements-data-frame.svg b/src/assets/icons/settlements-data-frame.svg new file mode 100644 index 00000000..aa53f413 --- /dev/null +++ b/src/assets/icons/settlements-data-frame.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/assets/settlement-data-frame.png b/src/assets/settlement-data-frame.png deleted file mode 100644 index efab506638ffc724c42d52725dcace573c1754bd..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 27973 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 - - - - - - - - - - - - - - - - diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx index d1337d7e..e064865f 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx @@ -1,8 +1,6 @@ import styled from '@emotion/styled'; - import { SettlementItem } from '../../../../../types/settlements'; -// import settlementsFrame from '@assets/settlement-data-frame.svg'; -// import settlementsFrame from '@assets/settlement-data-frame2.svg'; +import settlementsFrame from '@assets/icons/settlements-data-frame.svg'; const SettlementsTable = ({ data }: { data: SettlementItem[] }) => { const keys = [ @@ -24,9 +22,11 @@ const SettlementsTable = ({ data }: { data: SettlementItem[] }) => { {key} ))} +
๋ฐ์ดํ„ฐ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
+ ); } @@ -53,15 +53,17 @@ export default SettlementsTable; const Container = styled.div` margin-top: 30px; + display: flex; flex-direction: column; `; const Header = styled.div` padding: 20px 0; - margin-bottom: 20px; + display: flex; justify-content: space-between; + border: 1px solid #000; border-radius: 10px; background-color: rgba(255, 255, 255, 0.05); @@ -70,6 +72,7 @@ const Header = styled.div` const KeyElement = styled.div` flex: 1; text-align: center; + font-size: 14px; font-weight: bold; color: white; @@ -77,13 +80,22 @@ const KeyElement = styled.div` const Row = styled.div` margin-bottom: 10px; + display: flex; justify-content: space-between; `; +const FrameContainer = styled.div` + width: 100%; + + padding-left: 10px; + padding-right: 10px; + + text-align: center; +`; + const Frame = styled.div` height: 500px; - background: white; -// border-bottom: 6px dashed rgba(17, 31, 63, 1); - border-radius: 10px; -`; \ No newline at end of file + + background: url(${settlementsFrame}); +`; diff --git a/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx index 9a10880e..86e53dec 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx @@ -23,14 +23,14 @@ const SettlementsCalender = () => { src={CalendarIcon} alt="์บ˜๋ฆฐ๋”" /> ๊ธฐ๊ฐ„ ์„ค์ • - - Date: Fri, 12 Jan 2024 15:55:43 +0900 Subject: [PATCH 07/54] =?UTF-8?q?modify:=20=EC=A0=95=EC=82=B0=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=ED=83=80=EC=9E=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsLeft/Settlemented/SettlementsTable/index.tsx | 1 + src/types/settlements.d.ts | 1 + 2 files changed, 2 insertions(+) diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx index e064865f..0d435fc6 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx @@ -4,6 +4,7 @@ import settlementsFrame from '@assets/icons/settlements-data-frame.svg'; const SettlementsTable = ({ data }: { data: SettlementItem[] }) => { const keys = [ + 'NO', '์ฟ ํฐ ์ ์šฉ์ผ', '์ฟ ํฐ๋ฒˆํ˜ธ', '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…', diff --git a/src/types/settlements.d.ts b/src/types/settlements.d.ts index c257b7db..7c76de59 100644 --- a/src/types/settlements.d.ts +++ b/src/types/settlements.d.ts @@ -1,4 +1,5 @@ export interface SettlementItem { + 'NO': number; '์ฟ ํฐ ์ ์šฉ์ผ': string; '์ฟ ํฐ๋ฒˆํ˜ธ': number; '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': string; From 71ddf39b4240a3f732f8056712a2392b86a7d022 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Fri, 12 Jan 2024 17:18:03 +0900 Subject: [PATCH 08/54] =?UTF-8?q?design:=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20U?= =?UTF-8?q?I=20=EB=B6=80=EB=B6=84=20=EC=84=A4=EC=A0=95=20=EB=B0=8F=20fakeD?= =?UTF-8?q?ata=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Settlemented/SettlementsTable/index.tsx | 40 ++++++++++---- .../SettlementsLeft/Settlemented/index.tsx | 52 ++++++++++++++++--- src/types/settlements.d.ts | 2 +- 3 files changed, 76 insertions(+), 18 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx index 0d435fc6..f63296f7 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx @@ -3,7 +3,7 @@ import { SettlementItem } from '../../../../../types/settlements'; import settlementsFrame from '@assets/icons/settlements-data-frame.svg'; const SettlementsTable = ({ data }: { data: SettlementItem[] }) => { - const keys = [ + const keys: (keyof SettlementItem)[] = [ 'NO', '์ฟ ํฐ ์ ์šฉ์ผ', '์ฟ ํฐ๋ฒˆํ˜ธ', @@ -24,9 +24,9 @@ const SettlementsTable = ({ data }: { data: SettlementItem[] }) => { ))} - -
๋ฐ์ดํ„ฐ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
- + +
๋ฐ์ดํ„ฐ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
+ ); @@ -39,13 +39,17 @@ const SettlementsTable = ({ data }: { data: SettlementItem[] }) => { {key} ))} - {data.map((row, index) => ( - - {Object.values(row).map((value, index) => ( -
{value}
+ + + {data.map((row, index) => ( + + {keys.map((key) => ( + {row[key]} + ))} + ))} - - ))} + + ); }; @@ -71,7 +75,7 @@ const Header = styled.div` `; const KeyElement = styled.div` - flex: 1; + width: 10%; text-align: center; font-size: 14px; @@ -92,6 +96,8 @@ const FrameContainer = styled.div` padding-left: 10px; padding-right: 10px; + box-sizing: border-box; + text-align: center; `; @@ -100,3 +106,15 @@ const Frame = styled.div` background: url(${settlementsFrame}); `; + +const DataElement = styled.div` + width: 10%; + height: 35px; + + padding-top: 10px; + + text-align: center; + overflow: hidden; + white-space: nowrap; + text-overflow: ellipsis; +`; \ No newline at end of file diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx index 1cc8943f..26269fae 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx @@ -4,11 +4,52 @@ import SettlementsTable from './SettlementsTable'; const Settlemented = () => { + const fakeData = [ + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.21", '์ฟ ํฐ๋ฒˆํ˜ธ': 30, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '100ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '10์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '1000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.20", '์ฟ ํฐ๋ฒˆํ˜ธ': 29, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '99ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '999์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.19", '์ฟ ํฐ๋ฒˆํ˜ธ': 28, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '98ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '998', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.18", '์ฟ ํฐ๋ฒˆํ˜ธ': 27, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '102ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '10000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.17", '์ฟ ํฐ๋ฒˆํ˜ธ': 26, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '103ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '13000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.16", '์ฟ ํฐ๋ฒˆํ˜ธ': 25, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '104ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '14000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.15", '์ฟ ํฐ๋ฒˆํ˜ธ': 24, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '105ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '16000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.22", '์ฟ ํฐ๋ฒˆํ˜ธ': 23, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '106ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '176000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.23", '์ฟ ํฐ๋ฒˆํ˜ธ': 23, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '107ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '12700์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.24", '์ฟ ํฐ๋ฒˆํ˜ธ': 22, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '1ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '9934์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.25", '์ฟ ํฐ๋ฒˆํ˜ธ': 22, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '9ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '9993์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.26", '์ฟ ํฐ๋ฒˆํ˜ธ': 21, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '2ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '9959์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.20", '์ฟ ํฐ๋ฒˆํ˜ธ': 22, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '3ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '912์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.27", '์ฟ ํฐ๋ฒˆํ˜ธ': 20, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '4ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '999123์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.28", '์ฟ ํฐ๋ฒˆํ˜ธ': 19, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '5ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '999312์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.29", '์ฟ ํฐ๋ฒˆํ˜ธ': 18, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '45ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '100์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.12.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.12.01", '์ฟ ํฐ๋ฒˆํ˜ธ': 17, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '44ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '200์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.12.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.12.02", '์ฟ ํฐ๋ฒˆํ˜ธ': 16, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '43ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '300์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.12.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.04", '์ฟ ํฐ๋ฒˆํ˜ธ': 15, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '47ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '500์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.05", '์ฟ ํฐ๋ฒˆํ˜ธ': 14, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '66ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '504์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.10", '์ฟ ํฐ๋ฒˆํ˜ธ': 13, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '55ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '600์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.30", '์ฟ ํฐ๋ฒˆํ˜ธ': 12, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '54ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '700์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.29", '์ฟ ํฐ๋ฒˆํ˜ธ': 11, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '66ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '800์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.28", '์ฟ ํฐ๋ฒˆํ˜ธ': 10, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '97ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '900์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.27", '์ฟ ํฐ๋ฒˆํ˜ธ': 1, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '98ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '2200์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.26", '์ฟ ํฐ๋ฒˆํ˜ธ': 2, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '65ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '3000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.25", '์ฟ ํฐ๋ฒˆํ˜ธ': 3, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '78ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '4000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.24", '์ฟ ํฐ๋ฒˆํ˜ธ': 4, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '88ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '5000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.23", '์ฟ ํฐ๋ฒˆํ˜ธ': 5, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '65ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '6000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.22", '์ฟ ํฐ๋ฒˆํ˜ธ': 6, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '26ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '6500์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.21", '์ฟ ํฐ๋ฒˆํ˜ธ': 7, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '46ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '7000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + ]; + + const sortedData = [...fakeData].sort((a, b) => new Date(a['์ฟ ํฐ ์ ์šฉ์ผ']).getTime() - new Date(b['์ฟ ํฐ ์ ์šฉ์ผ']).getTime()); + + const dataWithNumber = sortedData.map((data, index) => ({ ...data, NO: index + 1 })); + + const reversedData = [...dataWithNumber].reverse(); + + return ( - ์ „์ฒด ๋‚ด์—ญ 0๊ฐœ + ์ „์ฒด ๋‚ด์—ญ {sortedData.length}๊ฐœ @@ -20,13 +61,12 @@ const Settlemented = () => { - + - - ) + ); } export default Settlemented; @@ -53,7 +93,7 @@ const TotalData = styled.div` `; const OptionContainer = styled.div` - display: flex; + display: flex; `; const SortOption = styled.div` @@ -78,4 +118,4 @@ const DataLow = styled.div` `; const Data = styled.div` width: 100%; -`; \ No newline at end of file +`; diff --git a/src/types/settlements.d.ts b/src/types/settlements.d.ts index 7c76de59..87129a9a 100644 --- a/src/types/settlements.d.ts +++ b/src/types/settlements.d.ts @@ -1,5 +1,5 @@ export interface SettlementItem { - 'NO': number; + NO: number; '์ฟ ํฐ ์ ์šฉ์ผ': string; '์ฟ ํฐ๋ฒˆํ˜ธ': number; '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': string; From 383b3d8c68cd18ef10a2d96ec9aa0611fae662cb Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Fri, 12 Jan 2024 17:31:29 +0900 Subject: [PATCH 09/54] =?UTF-8?q?feat:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsPagination/index.tsx | 44 +++++++++++++++++++ .../Settlemented/SettlementsTable/index.tsx | 4 +- .../SettlementsLeft/Settlemented/index.tsx | 23 +++++++++- 3 files changed, 68 insertions(+), 3 deletions(-) create mode 100644 src/components/Settlements/SettlementsLeft/Settlemented/SettlementsPagination/index.tsx diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsPagination/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsPagination/index.tsx new file mode 100644 index 00000000..5279c781 --- /dev/null +++ b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsPagination/index.tsx @@ -0,0 +1,44 @@ +import styled from '@emotion/styled'; + +interface PageNumberProps { + isActive: boolean; + } + +interface SettlementsPaginationProps { + currentPage: number; + totalPages: number; + onPageChange: (page: number) => void; + } + + const SettlementsPagination: React.FC = ({ currentPage, totalPages, onPageChange }) => { + const pages = Array.from({ length: totalPages }, (_, index) => index + 1); + + return ( + + {pages.map((page) => ( + onPageChange(page)} + isActive={page === currentPage} + > + {page} + + ))} + + ); +}; + +const PaginationContainer = styled.div` + margin-top: 20px; + display: flex; + justify-content: center; + gap: 10px; +`; + +const PageNumber = styled.div` + cursor: pointer; + font-weight: ${({ isActive }) => (isActive ? 'bold' : 'normal')}; + color: ${({ isActive }) => (isActive ? 'blue' : 'black')}; +`; + +export default SettlementsPagination; diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx index f63296f7..35a0540d 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx @@ -109,9 +109,9 @@ const Frame = styled.div` const DataElement = styled.div` width: 10%; - height: 35px; + height: 40px; - padding-top: 10px; + padding-top: 15px; text-align: center; overflow: hidden; diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx index 26269fae..cfb32499 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx @@ -1,6 +1,8 @@ import styled from '@emotion/styled'; import SettlementsTable from './SettlementsTable'; +import SettlementsPagination from './SettlementsPagination'; +import { SetStateAction, useState } from 'react'; const Settlemented = () => { @@ -44,6 +46,20 @@ const Settlemented = () => { const reversedData = [...dataWithNumber].reverse(); + const itemsPerPage = 10; + const totalItems = reversedData.length; + const totalPages = Math.ceil(totalItems / itemsPerPage); + + const [currentPage, setCurrentPage] = useState(1); + + const handlePageChange = (page: SetStateAction) => { + setCurrentPage(page); + }; + + const startIndex = (currentPage - 1) * itemsPerPage; + const endIndex = startIndex + itemsPerPage; + const currentData = reversedData.slice(startIndex, endIndex); + return ( @@ -61,7 +77,12 @@ const Settlemented = () => { - + + From 08e8093611a4c601019ab52b1369ff15e1bbb197 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Fri, 12 Jan 2024 18:04:28 +0900 Subject: [PATCH 10/54] =?UTF-8?q?design:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 12 ++ package.json | 1 + .../SettlementsPagination/index.tsx | 110 +++++++++++++----- 3 files changed, 95 insertions(+), 28 deletions(-) diff --git a/package-lock.json b/package-lock.json index 522bec7f..701b4938 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "react": "^18.2.0", "react-datepicker": "^4.25.0", "react-dom": "^18.2.0", + "react-paginate": "^8.2.0", "react-router-dom": "^6.21.1" }, "devDependencies": { @@ -6150,6 +6151,17 @@ "react-dom": "^15.5.x || ^16.x || ^17.x || ^18.x" } }, + "node_modules/react-paginate": { + "version": "8.2.0", + "resolved": "https://registry.npmjs.org/react-paginate/-/react-paginate-8.2.0.tgz", + "integrity": "sha512-sJCz1PW+9PNIjUSn919nlcRVuleN2YPoFBOvL+6TPgrH/3lwphqiSOgdrLafLdyLDxsgK+oSgviqacF4hxsDIw==", + "dependencies": { + "prop-types": "^15" + }, + "peerDependencies": { + "react": "^16 || ^17 || ^18" + } + }, "node_modules/react-popper": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/react-popper/-/react-popper-2.3.0.tgz", diff --git a/package.json b/package.json index 4c3725af..dcd5efb5 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "react": "^18.2.0", "react-datepicker": "^4.25.0", "react-dom": "^18.2.0", + "react-paginate": "^8.2.0", "react-router-dom": "^6.21.1" }, "devDependencies": { diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsPagination/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsPagination/index.tsx index 5279c781..297a8bfc 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsPagination/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsPagination/index.tsx @@ -1,44 +1,98 @@ +import React, { useEffect } from 'react'; +import ReactPaginate from 'react-paginate'; import styled from '@emotion/styled'; -interface PageNumberProps { - isActive: boolean; - } - interface SettlementsPaginationProps { - currentPage: number; - totalPages: number; - onPageChange: (page: number) => void; - } - - const SettlementsPagination: React.FC = ({ currentPage, totalPages, onPageChange }) => { - const pages = Array.from({ length: totalPages }, (_, index) => index + 1); + currentPage: number; + totalPages: number; + onPageChange: (page: number) => void; +} + +const SettlementsPagination: React.FC = ({ + currentPage, + totalPages, + onPageChange +}) => { + useEffect(() => { + onPageChange(currentPage); + }, [currentPage, onPageChange]); return ( - {pages.map((page) => ( - onPageChange(page)} - isActive={page === currentPage} - > - {page} - - ))} + '} + breakLabel={'...'} + breakClassName={'hidden'} + pageCount={totalPages} + marginPagesDisplayed={2} + pageRangeDisplayed={5} + onPageChange={(selectedItem) => onPageChange(selectedItem.selected + 1)} + containerClassName={'pagination'} + activeClassName={'active'} + pageClassName={'pagination-li'} + pageLinkClassName={'pagination-link'} + previousClassName={'pagination-previous'} + nextClassName={'pagination-next'} + /> ); }; +export default SettlementsPagination; + const PaginationContainer = styled.div` margin-top: 20px; + margin-bottom: 20px; + display: flex; justify-content: center; - gap: 10px; -`; + align-items: center; -const PageNumber = styled.div` - cursor: pointer; - font-weight: ${({ isActive }) => (isActive ? 'bold' : 'normal')}; - color: ${({ isActive }) => (isActive ? 'blue' : 'black')}; -`; + .pagination { + display: flex; + align-items: center; + } -export default SettlementsPagination; + .pagination-li { + margin: 5px; + cursor: pointer; + } + + .pagination-link { + padding: 8px 12px; + border: 1px solid #FFFFFF; + border-radius: 4px; + color: #FFFFFF; + text-decoration: none; + + &:hover { + background-color: #f0f0f0; + } + + &.active { + font-weight: bold; + background-color: #e0e0e0; + } + } + + .pagination-previous, + .pagination-next { + padding: 8px 12px; + + border: 1px solid #ccc; + border-radius: 4px; + + color: #FFFFFF; + text-decoration: none; + + &:hover { + background-color: #f0f0f0; + } + + &.active { + font-weight: bold; + background-color: #e0e0e0; + } + } +`; From 08f77b9cda79c2d10dcfd8b17bfd498cefd3ff5e Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Fri, 12 Jan 2024 19:25:46 +0900 Subject: [PATCH 11/54] =?UTF-8?q?design:=20=EC=97=91=EC=85=80=20=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=EB=A1=9C=EB=93=9C=20=EB=B2=84=ED=8A=BC=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsLeft/Settlemented/index.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx index cfb32499..209a0f7e 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx @@ -50,7 +50,7 @@ const Settlemented = () => { const totalItems = reversedData.length; const totalPages = Math.ceil(totalItems / itemsPerPage); - const [currentPage, setCurrentPage] = useState(1); + const [currentPage, setCurrentPage] = useState(1); const handlePageChange = (page: SetStateAction) => { setCurrentPage(page); @@ -115,6 +115,7 @@ const TotalData = styled.div` const OptionContainer = styled.div` display: flex; + align-items: center; `; const SortOption = styled.div` @@ -132,6 +133,16 @@ const ExcelDownload = styled.div` width: 100%; white-space: nowrap; + + button { + font-size: 14px; + font-weight: bold; + color: white; + border: none; + text-decoration: underline; + cursor: pointer; + background: none; + } `; const DataLow = styled.div` From 328c8018d8b697b7cc6f378d86dcde625c3dffd6 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sat, 13 Jan 2024 02:34:48 +0900 Subject: [PATCH 12/54] =?UTF-8?q?design:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20=EB=B3=B4=EB=8D=94=EA=B0=92=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC=20=EB=B0=8F=20OptionContainer=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsPagination/index.tsx | 10 ++++++++ .../Settlemented/SettlementsTable/index.tsx | 24 +++++++++++++------ .../SettlementsLeft/Settlemented/index.tsx | 2 ++ 3 files changed, 29 insertions(+), 7 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsPagination/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsPagination/index.tsx index 297a8bfc..3384e71a 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsPagination/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsPagination/index.tsx @@ -76,6 +76,16 @@ const PaginationContainer = styled.div` } } + .pagination-li.active { + padding: 9.4px 0px; + + font-weight: bold; + + border-width: 2px; + border: 1.5px solid #FFFFFF; + border-radius: 4px; + } + .pagination-previous, .pagination-next { padding: 8px 12px; diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx index 35a0540d..85df5217 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx @@ -42,7 +42,7 @@ const SettlementsTable = ({ data }: { data: SettlementItem[] }) => { {data.map((row, index) => ( - + {keys.map((key) => ( {row[key]} ))} @@ -83,11 +83,17 @@ const KeyElement = styled.div` color: white; `; -const Row = styled.div` - margin-bottom: 10px; +const Row = styled.div<{ isLast: boolean }>` + // margin-bottom: 10px; display: flex; justify-content: space-between; + + border-bottom: ${(props) => (props.isLast ? 'none' : '1px solid #ccc')}; + + &:last-child { + border-bottom: none; + } `; const FrameContainer = styled.div` @@ -109,12 +115,16 @@ const Frame = styled.div` const DataElement = styled.div` width: 10%; - height: 40px; + height: 48px; - padding-top: 15px; + padding-top: 18px; + + // display: flex; + // align-items: center; + justify-content: center; - text-align: center; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -`; \ No newline at end of file +`; + diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx index 209a0f7e..83a64b2a 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx @@ -114,6 +114,8 @@ const TotalData = styled.div` `; const OptionContainer = styled.div` + margin-right: 26px; + display: flex; align-items: center; `; From 50daff00d0c90cb6da0bb6ece6621b631aa09209 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sat, 13 Jan 2024 03:07:03 +0900 Subject: [PATCH 13/54] =?UTF-8?q?design:=20=EC=A0=95=EC=82=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=98=A4=EB=A5=B8=EC=AA=BD=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B0=B0=EA=B2=BD=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=20=EB=B0=8F=20=EB=A1=9C=EA=B3=A0=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/settlements-logo.svg | 9 +++++++++ .../Settlemented/SettlementsTable/index.tsx | 1 + .../Settlements/SettlementsRight/index.tsx | 16 +++++++++++++++- 3 files changed, 25 insertions(+), 1 deletion(-) create mode 100644 src/assets/icons/settlements-logo.svg diff --git a/src/assets/icons/settlements-logo.svg b/src/assets/icons/settlements-logo.svg new file mode 100644 index 00000000..006232fa --- /dev/null +++ b/src/assets/icons/settlements-logo.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx index 85df5217..eff54471 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx @@ -1,4 +1,5 @@ import styled from '@emotion/styled'; + import { SettlementItem } from '../../../../../types/settlements'; import settlementsFrame from '@assets/icons/settlements-data-frame.svg'; diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index 1f715f68..0cede50f 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -2,12 +2,14 @@ import styled from '@emotion/styled'; import SettlementsBefore from "./SettlementsBefore" import SettlementsExpected from "./SettlementsExpected" +import settlementsLogo from '@assets/icons/settlements-logo.svg'; const SettlementsRight = () => { return ( + ) } @@ -15,12 +17,24 @@ const SettlementsRight = () => { export default SettlementsRight; const Container = styled.div` + position: relative; + width: 20%; height: 100%; - background-color: rgba(205, 207, 208, 0.75); + background-color: #1A2849; border-top-right-radius: 1.25rem; border-bottom-right-radius: 1.25rem; `; +const Logo = styled.div` + position: absolute; + + width: 165px; + height: 227px; + top: 65%; + right: 0; + + background: url(${settlementsLogo}); +`; From 69a8876f61f20c6335319499ee8930cd96660fdd Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Mon, 15 Jan 2024 14:24:06 +0900 Subject: [PATCH 14/54] =?UTF-8?q?design:=20=EC=A0=95=EC=82=B0=EC=98=88?= =?UTF-8?q?=EC=A0=95=EA=B8=88=EC=95=A1=20=EC=BB=B4=ED=8F=AC=EB=84=8C?= =?UTF-8?q?=ED=8A=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/sync-outline.svg | 5 + .../SettlementsExpected/index.tsx | 173 +++++++++++++++++- .../Settlements/SettlementsRight/index.tsx | 15 +- 3 files changed, 186 insertions(+), 7 deletions(-) create mode 100644 src/assets/icons/sync-outline.svg diff --git a/src/assets/icons/sync-outline.svg b/src/assets/icons/sync-outline.svg new file mode 100644 index 00000000..4af17bbf --- /dev/null +++ b/src/assets/icons/sync-outline.svg @@ -0,0 +1,5 @@ + + + + + diff --git a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx index 72f3f478..7721debf 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx @@ -1,9 +1,174 @@ +import styled from '@emotion/styled'; + +import SyncIcon from '@assets/icons/sync-outline.svg'; + + const SettlementsExpected = () => { return ( -
- -
+ + + + + ์ •์‚ฐ ์˜ˆ์ • ๊ธˆ์•ก + + + + + ๋งค์›” 1์ผ 00์‹œ 00๋ถ„ ์—…๋ฐ์ดํŠธ + + + + + + + ์ฟ ํฐ ์ ์šฉ ๊ธฐ๊ฐ„ + + + 2024.04.01 ~ 2024.04.30 + + + + + + + ์ •์‚ฐ์˜ˆ์ •์ผ + + + 2024๋…„ 5์›” 10์ผ + + + + + 4์›” 1์ผ๋ถ€ํ„ฐ ํ˜„์žฌ๊นŒ์ง€ ๊ธˆ์•ก + + + + + ๋งค์ผ 00์‹œ 00๋ถ„์— ์—…๋ฐ์ดํŠธ + + + + 50000์› + + + + + + + ) } -export default SettlementsExpected +export default SettlementsExpected; + +const Container = styled.div` + margin: 15px; + + display: flex; +`; + +const InnerContainer = styled.div` + width: 100%; +`; + +const ExpectedContainer = styled.div` + margin-top: 96px; +`; + +const ExpectedText = styled.div` + font-size: 18px; + font-weight: bold; + color: white; +`; + +const CommonContainer = styled.div` + margin-top: 10px; + + display: flex; + flex-direction: row; + + align-items: center; +`; + +const UpdatedText = styled.div` + margin-top: 1px; + font-size: 11px; + font-weight: normal; + color: #CDCFD0; +`; + +const UpdatedContainer = styled.div` + width: 100%; + + margin-top: 40px; + + border: 1.5px solid white; + border-radius: 8px; +`; + +const UpdatedInnerContainer = styled.div` + margin-top: 40px; + + background-color: white; + + border: 1px solid white; + border-radius: 5px; +`; + +const UpdatedWrapper = styled.div` + margin: 15px; +`; + +const WrapperTop = styled.div` + display: flex; + flex-direction: column; +`; + +const DueDateText = styled.div` + font-size: 14px; + font-weight: bold; + color: black; +`; + +const DueDateDay = styled.div` + margin-left: auto; + margin-top: 10px; + + align-items: flex-end + + font-size: 16px; + font-weight: bold; + color: #3182F6; +`; + +const WrapperBottom = styled.div` + margin-top: 20px; + + display: flex; + flex-direction: column; +`; + +const CouponContainer = styled.div` + margin: 15px; +`; + +const CouponText = styled.div` + margin-bottom: 15px; + + font-size: 14px; + font-weight: bold; + color: white; +`; + +const CouponDay = styled.div` + font-size: 12px; + color: white; +`; + +const Icon = styled.img` + margin-right: 3px; +`; diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index 0cede50f..04dddfcd 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -7,9 +7,11 @@ import settlementsLogo from '@assets/icons/settlements-logo.svg'; const SettlementsRight = () => { return ( - - - + + + + + ) } @@ -27,6 +29,13 @@ const Container = styled.div` border-bottom-right-radius: 1.25rem; `; +const InnerContainer = styled.div` + height: 100%; + + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.1); +`; + const Logo = styled.div` position: absolute; From 30e2e7d406ba65add3ee58dcb2e6c8f60e274627 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Mon, 15 Jan 2024 14:43:57 +0900 Subject: [PATCH 15/54] =?UTF-8?q?design:=20=EC=A7=80=EB=82=9C=EB=8B=AC=20?= =?UTF-8?q?=EC=A0=95=EC=82=B0=EA=B8=88=EC=95=A1=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20=EC=9E=91?= =?UTF-8?q?=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsBefore/index.tsx | 149 +++++++++++++++++- .../SettlementsExpected/index.tsx | 3 +- .../Settlements/SettlementsRight/index.tsx | 6 + 3 files changed, 152 insertions(+), 6 deletions(-) diff --git a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx index 442ebb90..58959a77 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx @@ -1,9 +1,150 @@ +import styled from '@emotion/styled'; + +import SyncIcon from '@assets/icons/sync-outline.svg'; + const SettlementsBefore = () => { return ( -
- -
+ + + + + ์ •์‚ฐ ๊ธˆ์•ก + + + + + ๋งค์›” 1์ผ 00์‹œ 00๋ถ„ ์—…๋ฐ์ดํŠธ + + + + + + + ์ •์‚ฐ ์˜ˆ์ • ๊ธˆ์•ก + + + 2024.04.01 ~ 2024.04.30 + + + + + + + ์ •์‚ฐ ์˜ˆ์ •๊ธˆ์•ก + + + 2024๋…„ 5์›” 10์ผ + + + + + + + ) } -export default SettlementsBefore +export default SettlementsBefore; + +const Container = styled.div` + margin: 15px; + + display: flex; +`; + +const InnerContainer = styled.div` + width: 100%; +`; + +const ExpectedContainer = styled.div` + margin-top: 30px; +`; + +const ExpectedText = styled.div` + font-size: 18px; + font-weight: bold; + color: white; +`; + +const CommonContainer = styled.div` + margin-top: 10px; + + display: flex; + flex-direction: row; + + align-items: center; +`; + +const UpdatedText = styled.div` + margin-top: 1px; + font-size: 11px; + font-weight: normal; + color: #CDCFD0; +`; + +const UpdatedContainer = styled.div` + width: 100%; + + margin-top: 40px; + + border: 1.5px solid white; + border-radius: 8px; +`; + +const UpdatedInnerContainer = styled.div` + margin-top: 20px; + + background-color: white; + + border: 1px solid white; + border-radius: 5px; +`; + +const UpdatedWrapper = styled.div` + margin: 15px; +`; + +const WrapperTop = styled.div` + display: flex; + flex-direction: column; +`; + +const DueDateText = styled.div` + font-size: 14px; + font-weight: bold; + color: black; +`; + +const DueDateDay = styled.div` + margin-left: auto; + margin-top: 10px; + + align-items: flex-end + + font-size: 16px; + font-weight: bold; + color: #3182F6; +`; + +const MoneyContainer = styled.div` + margin: 15px; +`; + +const MoneyText = styled.div` + margin-bottom: 15px; + + font-size: 14px; + font-weight: bold; + color: white; +`; + +const MoneyDay = styled.div` + font-size: 12px; + color: white; +`; + +const Icon = styled.img` + margin-right: 3px; +`; diff --git a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx index 7721debf..63f91a9c 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx @@ -2,7 +2,6 @@ import styled from '@emotion/styled'; import SyncIcon from '@assets/icons/sync-outline.svg'; - const SettlementsExpected = () => { return ( @@ -111,7 +110,7 @@ const UpdatedContainer = styled.div` `; const UpdatedInnerContainer = styled.div` - margin-top: 40px; + margin-top: 20px; background-color: white; diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index 04dddfcd..6fcafee9 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -9,6 +9,7 @@ const SettlementsRight = () => { +
@@ -34,6 +35,11 @@ const InnerContainer = styled.div` background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); + + hr { + margin: 0 15px; + border-top: 1px solid rgba(217, 217, 217, 0.2); + } `; const Logo = styled.div` From fdda04e42744ff29cb8f521d01cdfeb1246276c5 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Mon, 15 Jan 2024 16:31:29 +0900 Subject: [PATCH 16/54] =?UTF-8?q?feat:=20=EC=A0=95=EC=82=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=82=A0=EC=A7=9C=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=A5=B8=20=EB=A1=9C=EC=A7=81=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsBefore/index.tsx | 77 +++++++++-- .../SettlementsExpected/index.tsx | 124 ++++++++++-------- .../Settlements/SettlementsRight/index.tsx | 13 +- 3 files changed, 147 insertions(+), 67 deletions(-) diff --git a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx index 58959a77..203fbfad 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx @@ -1,47 +1,81 @@ import styled from '@emotion/styled'; import SyncIcon from '@assets/icons/sync-outline.svg'; +import receiptIcon from '@assets/icons/receipt-sharp.svg'; const SettlementsBefore = () => { + + const currentDate = new Date(); + const lastMonth = new Date(currentDate); + lastMonth.setMonth(currentDate.getMonth() - 1); + lastMonth.setDate(1); + + const formatDate = (date: Date) => { + const year = date.getFullYear(); + const month = date.getMonth() + 1; + const day = date.getDate(); + return `${year}.${month < 10 ? '0' : ''}${month}.${day < 10 ? '0' : ''}${day}`; + }; + + const isBeforeDueDate = currentDate.getDate() < 10; + + return ( - ์ •์‚ฐ ๊ธˆ์•ก + {`${currentDate.getMonth() + 1}์›” ์ •์‚ฐ ๊ธˆ์•ก`} - ๋งค์›” 1์ผ 00์‹œ 00๋ถ„ ์—…๋ฐ์ดํŠธ + {isBeforeDueDate + ? `๋งค์›” 1์ผ 00์‹œ 00๋ถ„ ์—…๋ฐ์ดํŠธ` + : `๋งค์›” 11์ผ 00์‹œ 00๋ถ„ ์—…๋ฐ์ดํŠธ` + } - ์ •์‚ฐ ์˜ˆ์ • ๊ธˆ์•ก + ์ฟ ํฐ ์ ์šฉ ๊ธˆ์•ก - 2024.04.01 ~ 2024.04.30 + {`${lastMonth.getFullYear()}.${lastMonth.getMonth() < 9 ? '0' : ''}${lastMonth.getMonth() + 1}.01 ~ ${formatDate(new Date(currentDate.getFullYear(), currentDate.getMonth(), 0))}`} - ์ •์‚ฐ ์˜ˆ์ •๊ธˆ์•ก + {isBeforeDueDate + ? `์ •์‚ฐ ์˜ˆ์ • ๊ธˆ์•ก` + : `์ •์‚ฐ ์™„๋ฃŒ ๊ธˆ์•ก` + } - - 2024๋…„ 5์›” 10์ผ - + + + {isBeforeDueDate + ? `${currentDate.getMonth() + 1}์›” 10์ผ์— ์ •์‚ฐํ•  ๊ธˆ์•ก` + : `${currentDate.getMonth() + 1}์›” 10์ผ ์ •์‚ฐ ์™„๋ฃŒ ๊ธˆ์•ก` + } + + + 50,000์› + + + ) } @@ -52,6 +86,7 @@ const Container = styled.div` margin: 15px; display: flex; + flex-direction: column; `; const InnerContainer = styled.div` @@ -79,6 +114,7 @@ const CommonContainer = styled.div` const UpdatedText = styled.div` margin-top: 1px; + font-size: 11px; font-weight: normal; color: #CDCFD0; @@ -117,19 +153,33 @@ const DueDateText = styled.div` color: black; `; +const DueDateInnerContainer = styled.div` + margin-top: 10px; + + display: flex; + flex-direction: row; + + justify-content: space-between; + align-items: center; +`; + const DueDateDay = styled.div` + font-size: 12px; + font-weight: regular; + color: black; +`; + +const DueDateMoney = styled.div` margin-left: auto; - margin-top: 10px; align-items: flex-end font-size: 16px; font-weight: bold; - color: #3182F6; `; const MoneyContainer = styled.div` - margin: 15px; + margin: 30px 15px; `; const MoneyText = styled.div` @@ -148,3 +198,8 @@ const MoneyDay = styled.div` const Icon = styled.img` margin-right: 3px; `; + +const ReceiptIcon = styled.img` + margin-top: 40px; + margin-left: auto; +`; \ No newline at end of file diff --git a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx index 63f91a9c..a7d23f8c 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx @@ -3,67 +3,80 @@ import styled from '@emotion/styled'; import SyncIcon from '@assets/icons/sync-outline.svg'; const SettlementsExpected = () => { + const currentDate = new Date(); + + const nextMonth = new Date(currentDate); + nextMonth.setMonth(currentDate.getMonth() + 1); + + const formatDate = (date: Date) => { + const year = date.getFullYear(); + const month = date.getMonth() + 1; + const day = date.getDate(); + return `${year}.${month < 10 ? '0' : ''}${month}.${day < 10 ? '0' : ''}${day}`; + }; + + const firstDayOfMonth = new Date(currentDate.getFullYear(), currentDate.getMonth(), 1); + return ( - - - - ์ •์‚ฐ ์˜ˆ์ • ๊ธˆ์•ก - - - - - ๋งค์›” 1์ผ 00์‹œ 00๋ถ„ ์—…๋ฐ์ดํŠธ - - - - - - - ์ฟ ํฐ ์ ์šฉ ๊ธฐ๊ฐ„ - - - 2024.04.01 ~ 2024.04.30 - - - - - - - ์ •์‚ฐ์˜ˆ์ •์ผ - - - 2024๋…„ 5์›” 10์ผ - - - - - 4์›” 1์ผ๋ถ€ํ„ฐ ํ˜„์žฌ๊นŒ์ง€ ๊ธˆ์•ก - - - - - ๋งค์ผ 00์‹œ 00๋ถ„์— ์—…๋ฐ์ดํŠธ + + + + {`${nextMonth.getMonth() + 1}์›” ์ •์‚ฐ ์˜ˆ์ • ๊ธˆ์•ก`} + + + + + ๋งค์›” 1์ผ 00์‹œ 00๋ถ„ ์—…๋ฐ์ดํŠธ - - - 50000์› - - - - - - - - ) -} + + + + + + ์ฟ ํฐ ์ ์šฉ ๊ธฐ๊ฐ„ + + + {`${formatDate(firstDayOfMonth)} ~ ${formatDate(new Date(currentDate.getFullYear(), currentDate.getMonth() + 1, 0))}`} + + + + + + + ์ •์‚ฐ์˜ˆ์ •์ผ + + + {`${currentDate.getFullYear()}๋…„ ${currentDate.getMonth() + 2}์›” 10์ผ`} + + + + + {`${currentDate.getMonth() + 1}์›” 1์ผ๋ถ€ํ„ฐ ํ˜„์žฌ๊นŒ์ง€ ๊ธˆ์•ก`} + + + + + ๋งค์ผ 00์‹œ 00๋ถ„์— ์—…๋ฐ์ดํŠธ + + + + 50000์› + + + + + + + + ); +}; export default SettlementsExpected; +// ๋‚˜๋จธ์ง€ ์Šคํƒ€์ผ ์ปดํฌ๋„ŒํŠธ๋Š” ๊ทธ๋Œ€๋กœ ์œ ์ง€ + + const Container = styled.div` margin: 15px; @@ -95,6 +108,7 @@ const CommonContainer = styled.div` const UpdatedText = styled.div` margin-top: 1px; + font-size: 11px; font-weight: normal; color: #CDCFD0; diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index 6fcafee9..95030ca5 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -10,7 +10,9 @@ const SettlementsRight = () => {
- + + + @@ -32,16 +34,25 @@ const Container = styled.div` const InnerContainer = styled.div` height: 100%; + + position: relative; + z-index: 999; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); hr { margin: 0 15px; + border-top: 1px solid rgba(217, 217, 217, 0.2); } `; +const StyledSettlementsBefore = styled.div` + position: relative; + z-index: 1; +`; + const Logo = styled.div` position: absolute; From c4bfd97193fe0b3094b832cd5ef774618b9d9221 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Mon, 15 Jan 2024 17:10:11 +0900 Subject: [PATCH 17/54] =?UTF-8?q?design:=20=EC=A1=B0=ED=9A=8C=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EB=B0=8F=20=EC=9B=94=20=ED=91=9C=EC=8B=9C=20?= =?UTF-8?q?=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EB=94=94=EC=9E=90=EC=9D=B8=20?= =?UTF-8?q?=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/icons/calendar-number-outline.svg | 30 +++++++++--------- .../SettlementsCalendar/index.tsx | 26 +++++++++++++++- .../SettlementsBefore/index.tsx | 1 - .../SettlementsExpected/index.tsx | 31 ++++++++++++++----- 4 files changed, 64 insertions(+), 24 deletions(-) diff --git a/src/assets/icons/calendar-number-outline.svg b/src/assets/icons/calendar-number-outline.svg index def1851f..334f04ba 100644 --- a/src/assets/icons/calendar-number-outline.svg +++ b/src/assets/icons/calendar-number-outline.svg @@ -1,32 +1,32 @@ - - - - - - - - - + + + + + + + + + - + - + - - + + - + - + diff --git a/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx index 86e53dec..b8392a74 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx @@ -17,6 +17,10 @@ const SettlementsCalender = () => { setEndDate(date); }; + const handleButtonClick = () => { + console.log('์กฐํšŒํ•˜๊ธฐ ๋ฒ„ํŠผ์ด ํด๋ฆญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.'); + }; + return ( { showMonthYearPicker placeholderText="" /> - + ์กฐํšŒํ•˜๊ธฐ ) } @@ -53,6 +57,10 @@ const Container = styled.nav` `; const Calendar = styled.img` + width: 24px; + height: 24px; + + margin-right: 10px; `; const StyledDatePicker = styled(DatePicker)` @@ -69,4 +77,20 @@ const CalendarText = styled.div` color: white; margin-right: 10px; +`; + +const StyledButton = styled.button` + padding: 5px 10px; + + background-color: #3182F6; + color: white; + font-weight: 700; + + border: 1px solid rgba(255, 255, 255, 0.2); + border-radius: 8px; + cursor: pointer; + + &:hover { + opacity: 1; + } `; \ No newline at end of file diff --git a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx index 203fbfad..048575b7 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx @@ -201,5 +201,4 @@ const Icon = styled.img` const ReceiptIcon = styled.img` margin-top: 40px; - margin-left: auto; `; \ No newline at end of file diff --git a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx index a7d23f8c..b6a62ece 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx @@ -21,9 +21,14 @@ const SettlementsExpected = () => { - - {`${nextMonth.getMonth() + 1}์›” ์ •์‚ฐ ์˜ˆ์ • ๊ธˆ์•ก`} - + + + {`${nextMonth.getMonth() + 1}์›”`} + + + ์ •์‚ฐ ์˜ˆ์ • ๊ธˆ์•ก + + @@ -74,9 +79,6 @@ const SettlementsExpected = () => { export default SettlementsExpected; -// ๋‚˜๋จธ์ง€ ์Šคํƒ€์ผ ์ปดํฌ๋„ŒํŠธ๋Š” ๊ทธ๋Œ€๋กœ ์œ ์ง€ - - const Container = styled.div` margin: 15px; @@ -91,7 +93,22 @@ const ExpectedContainer = styled.div` margin-top: 96px; `; +const TextContainer = styled.div` + display:flex; + flex-direction: row; +`; + +const ExpectedMonth = styled.div` + font-size: 22px; + font-weight: bold; + color: white; +`; + const ExpectedText = styled.div` + margin-top: auto; + margin-bottom: auto; + margin-left: 5px; + font-size: 18px; font-weight: bold; color: white; @@ -108,7 +125,7 @@ const CommonContainer = styled.div` const UpdatedText = styled.div` margin-top: 1px; - + font-size: 11px; font-weight: normal; color: #CDCFD0; From 330a5a8e3d1a47953b96e06d845ac292310ee6ff Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Mon, 15 Jan 2024 18:11:30 +0900 Subject: [PATCH 18/54] =?UTF-8?q?design:=20=EC=A0=95=EC=82=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=B6=94=EA=B0=80=20=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8=20=EC=9E=91=EC=97=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsBefore/index.tsx | 4 +-- .../SettlementsExpected/index.tsx | 26 +++++++++---------- .../Settlements/SettlementsRight/index.tsx | 4 +-- 3 files changed, 16 insertions(+), 18 deletions(-) diff --git a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx index 048575b7..e3369b1f 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx @@ -123,7 +123,7 @@ const UpdatedText = styled.div` const UpdatedContainer = styled.div` width: 100%; - margin-top: 40px; + margin-top: 25px; border: 1.5px solid white; border-radius: 8px; @@ -179,7 +179,7 @@ const DueDateMoney = styled.div` `; const MoneyContainer = styled.div` - margin: 30px 15px; + margin: 20px 15px; `; const MoneyText = styled.div` diff --git a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx index b6a62ece..bc765cd2 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx @@ -24,10 +24,10 @@ const SettlementsExpected = () => { {`${nextMonth.getMonth() + 1}์›”`} + + ์ •์‚ฐ ์˜ˆ์ • ๊ธˆ์•ก + - - ์ •์‚ฐ ์˜ˆ์ • ๊ธˆ์•ก - @@ -94,24 +94,22 @@ const ExpectedContainer = styled.div` `; const TextContainer = styled.div` - display:flex; - flex-direction: row; + display: flex; + // white-space: nowrap; `; -const ExpectedMonth = styled.div` +const ExpectedMonth = styled.p` font-size: 22px; font-weight: bold; color: white; + + & > span { + font-size: 18px; + } `; -const ExpectedText = styled.div` - margin-top: auto; - margin-bottom: auto; +const ExpectedText = styled.span` margin-left: 5px; - - font-size: 18px; - font-weight: bold; - color: white; `; const CommonContainer = styled.div` @@ -134,7 +132,7 @@ const UpdatedText = styled.div` const UpdatedContainer = styled.div` width: 100%; - margin-top: 40px; + margin-top: 25px; border: 1.5px solid white; border-radius: 8px; diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index 95030ca5..62354e60 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -34,7 +34,7 @@ const Container = styled.div` const InnerContainer = styled.div` height: 100%; - + position: relative; z-index: 999; @@ -42,7 +42,7 @@ const InnerContainer = styled.div` border: 1px solid rgba(255, 255, 255, 0.1); hr { - margin: 0 15px; + margin: 30px 15px; border-top: 1px solid rgba(217, 217, 217, 0.2); } From cb55afa48177e85c456448b6ff490c5fe11276af Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Mon, 15 Jan 2024 18:15:16 +0900 Subject: [PATCH 19/54] =?UTF-8?q?modify:=20=EC=A0=95=EC=82=B0=20=ED=85=8C?= =?UTF-8?q?=EC=9D=B4=EB=B8=94=20=EC=88=9C=EC=84=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsLeft/Settlemented/SettlementsTable/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx index eff54471..3d1bcca2 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx @@ -6,13 +6,13 @@ import settlementsFrame from '@assets/icons/settlements-data-frame.svg'; const SettlementsTable = ({ data }: { data: SettlementItem[] }) => { const keys: (keyof SettlementItem)[] = [ 'NO', - '์ฟ ํฐ ์ ์šฉ์ผ', '์ฟ ํฐ๋ฒˆํ˜ธ', '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…', '์‚ฌ์šฉ ๊ฑด์ˆ˜', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก', '์ •์‚ฐ ๊ธˆ์•ก', + '์ฟ ํฐ ์ ์šฉ์ผ', '์ •์‚ฐ ์™„๋ฃŒ์ผ' ]; From 25dab4ba2f9be30ff15ddb769977a5b8b0553b94 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Mon, 15 Jan 2024 18:16:19 +0900 Subject: [PATCH 20/54] =?UTF-8?q?modify:=20=ED=83=80=EC=9E=85=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EC=BB=A8=EB=B2=A4=EC=85=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/types/{settlements.d.ts => settlements.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename src/types/{settlements.d.ts => settlements.ts} (100%) diff --git a/src/types/settlements.d.ts b/src/types/settlements.ts similarity index 100% rename from src/types/settlements.d.ts rename to src/types/settlements.ts From 27466f6729e865789220624984d8fa3b2a2aaa7e Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Tue, 16 Jan 2024 02:38:40 +0900 Subject: [PATCH 21/54] =?UTF-8?q?feat:=20recoil=20=EC=82=AC=EC=9A=A9=20?= =?UTF-8?q?=EB=B0=8F=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20=EC=A0=95=EB=A0=AC(?= =?UTF-8?q?=EB=93=9C=EB=A1=AD=EB=8B=A4=EC=9A=B4)=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 112 +++++++++++++++- package.json | 4 +- .../Settlemented/SettlementsTable/index.tsx | 7 +- .../SettlementsLeft/Settlemented/index.tsx | 122 ++++++++++++++---- src/recoil/atoms/settlemented.ts | 7 + src/types/settlements.ts | 2 +- 6 files changed, 223 insertions(+), 31 deletions(-) create mode 100644 src/recoil/atoms/settlemented.ts diff --git a/package-lock.json b/package-lock.json index 6f5760ba..2473224c 100644 --- a/package-lock.json +++ b/package-lock.json @@ -20,7 +20,9 @@ "react-paginate": "^8.2.0", "react-router-dom": "^6.21.1", "recoil": "^0.7.7", - "recoil-persist": "^5.1.0" + "recoil-persist": "^5.1.0", + "semantic-ui-css": "^2.5.0", + "semantic-ui-react": "^2.1.5" }, "devDependencies": { "@swc/core": "^1.3.102", @@ -1306,6 +1308,31 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@fluentui/react-component-event-listener": { + "version": "0.63.1", + "resolved": "https://registry.npmjs.org/@fluentui/react-component-event-listener/-/react-component-event-listener-0.63.1.tgz", + "integrity": "sha512-gSMdOh6tI3IJKZFqxfQwbTpskpME0CvxdxGM2tdglmf6ZPVDi0L4+KKIm+2dN8nzb8Ya1A8ZT+Ddq0KmZtwVQg==", + "dependencies": { + "@babel/runtime": "^7.10.4" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, + "node_modules/@fluentui/react-component-ref": { + "version": "0.63.1", + "resolved": "https://registry.npmjs.org/@fluentui/react-component-ref/-/react-component-ref-0.63.1.tgz", + "integrity": "sha512-8MkXX4+R3i80msdbD4rFpEB4WWq2UDvGwG386g3ckIWbekdvN9z2kWAd9OXhRGqB7QeOsoAGWocp6gAMCivRlw==", + "dependencies": { + "@babel/runtime": "^7.10.4", + "react-is": "^16.6.3" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17 || ^18", + "react-dom": "^16.8.0 || ^17 || ^18" + } + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.13", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.13.tgz", @@ -2247,6 +2274,19 @@ "win32" ] }, + "node_modules/@semantic-ui-react/event-stack": { + "version": "3.1.3", + "resolved": "https://registry.npmjs.org/@semantic-ui-react/event-stack/-/event-stack-3.1.3.tgz", + "integrity": "sha512-FdTmJyWvJaYinHrKRsMLDrz4tTMGdFfds299Qory53hBugiDvGC0tEJf+cHsi5igDwWb/CLOgOiChInHwq8URQ==", + "dependencies": { + "exenv": "^1.2.2", + "prop-types": "^15.6.2" + }, + "peerDependencies": { + "react": "^16.0.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.0.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/@sinclair/typebox": { "version": "0.27.8", "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.27.8.tgz", @@ -3501,6 +3541,14 @@ "node": ">=12" } }, + "node_modules/clsx": { + "version": "1.2.1", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-1.2.1.tgz", + "integrity": "sha512-EcR6r5a8bj6pu3ycsa/E/cKVGuTgZJZdsyUYHOksG/UHIiKfjxzRxYJpyVBwYaQeOvghal9fcc4PidlgzugAQg==", + "engines": { + "node": ">=6" + } + }, "node_modules/co": { "version": "4.6.0", "resolved": "https://registry.npmjs.org/co/-/co-4.6.0.tgz", @@ -4053,6 +4101,11 @@ "url": "https://github.com/sindresorhus/execa?sponsor=1" } }, + "node_modules/exenv": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/exenv/-/exenv-1.2.2.tgz", + "integrity": "sha512-Z+ktTxTwv9ILfgKCk32OX3n/doe+OcLTRtqK9pcL+JsP3J1/VW8Uvl4ZjLlKqeW4rzK4oesDOGMEMRIZqtP4Iw==" + }, "node_modules/exit": { "version": "0.1.2", "resolved": "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz", @@ -5608,6 +5661,11 @@ "@types/yargs-parser": "*" } }, + "node_modules/jquery": { + "version": "3.7.1", + "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.7.1.tgz", + "integrity": "sha512-m4avr8yL8kmFN8psrbFFFmB/If14iN5o9nw/NgnnM+kybDJpRsAynV2BsfpTYrTRysYUdADVD7CkUUizgkpLfg==" + }, "node_modules/js-tokens": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz", @@ -5678,6 +5736,11 @@ "integrity": "sha512-gfFQZrcTc8CnKXp6Y4/CBT3fTc0OVuDofpre4aEeEpSBPV5X5v4+Vmx+8snU7RLPrNHPKSgLxGo9YuQzz20o+w==", "dev": true }, + "node_modules/keyboard-key": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/keyboard-key/-/keyboard-key-1.1.0.tgz", + "integrity": "sha512-qkBzPTi3rlAKvX7k0/ub44sqOfXeLc/jcnGGmj5c7BJpU8eDrEVPyhCvNYAaoubbsLm9uGWwQJO1ytQK1a9/dQ==" + }, "node_modules/keyv": { "version": "4.5.4", "resolved": "https://registry.npmjs.org/keyv/-/keyv-4.5.4.tgz", @@ -5738,6 +5801,16 @@ "url": "https://github.com/sponsors/sindresorhus" } }, + "node_modules/lodash": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash/-/lodash-4.17.21.tgz", + "integrity": "sha512-v2kDEe57lecTulaDIuNTPy3Ry4gLGJ6Z1O3vE1krgXZNrsQ+LFTGHVxVjcXPs17LhbZVGedAJv8XZ1tvj5FvSg==" + }, + "node_modules/lodash-es": { + "version": "4.17.21", + "resolved": "https://registry.npmjs.org/lodash-es/-/lodash-es-4.17.21.tgz", + "integrity": "sha512-mKnC+QJ9pWVzv+C4/U3rRsHapFfHvQFoFB92e52xeyGMcX6/OlIl78je1u8vePzYZSkkogMPJ2yjxxsb89cxyw==" + }, "node_modules/lodash.merge": { "version": "4.6.2", "resolved": "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz", @@ -6623,6 +6696,38 @@ "loose-envify": "^1.1.0" } }, + "node_modules/semantic-ui-css": { + "version": "2.5.0", + "resolved": "https://registry.npmjs.org/semantic-ui-css/-/semantic-ui-css-2.5.0.tgz", + "integrity": "sha512-jIWn3WXXE2uSaWCcB+gVJVRG3masIKtTMNEP2X8Aw909H2rHpXGneYOxzO3hT8TpyvB5/dEEo9mBFCitGwoj1A==", + "dependencies": { + "jquery": "x.*" + } + }, + "node_modules/semantic-ui-react": { + "version": "2.1.5", + "resolved": "https://registry.npmjs.org/semantic-ui-react/-/semantic-ui-react-2.1.5.tgz", + "integrity": "sha512-nIqmmUNpFHfovEb+RI2w3E2/maZQutd8UIWyRjf1SLse+XF51hI559xbz/sLN3O6RpLjr/echLOOXwKCirPy3Q==", + "dependencies": { + "@babel/runtime": "^7.10.5", + "@fluentui/react-component-event-listener": "~0.63.0", + "@fluentui/react-component-ref": "~0.63.0", + "@popperjs/core": "^2.6.0", + "@semantic-ui-react/event-stack": "^3.1.3", + "clsx": "^1.1.1", + "keyboard-key": "^1.1.0", + "lodash": "^4.17.21", + "lodash-es": "^4.17.21", + "prop-types": "^15.7.2", + "react-is": "^16.8.6 || ^17.0.0 || ^18.0.0", + "react-popper": "^2.3.0", + "shallowequal": "^1.1.0" + }, + "peerDependencies": { + "react": "^16.8.0 || ^17.0.0 || ^18.0.0", + "react-dom": "^16.8.0 || ^17.0.0 || ^18.0.0" + } + }, "node_modules/semver": { "version": "7.5.4", "resolved": "https://registry.npmjs.org/semver/-/semver-7.5.4.tgz", @@ -6638,6 +6743,11 @@ "node": ">=10" } }, + "node_modules/shallowequal": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/shallowequal/-/shallowequal-1.1.0.tgz", + "integrity": "sha512-y0m1JoUZSlPAjXVtPPW70aZWfIL/dSP7AFkRnniLCrK/8MDKog3TySTBmckD+RObVxH0v4Tox67+F14PdED2oQ==" + }, "node_modules/shebang-command": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", diff --git a/package.json b/package.json index 71b6fbe2..e3191ba3 100644 --- a/package.json +++ b/package.json @@ -23,7 +23,9 @@ "react-paginate": "^8.2.0", "react-router-dom": "^6.21.1", "recoil": "^0.7.7", - "recoil-persist": "^5.1.0" + "recoil-persist": "^5.1.0", + "semantic-ui-css": "^2.5.0", + "semantic-ui-react": "^2.1.5" }, "devDependencies": { "@swc/core": "^1.3.102", diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx index 3d1bcca2..f5634395 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx @@ -3,7 +3,8 @@ import styled from '@emotion/styled'; import { SettlementItem } from '../../../../../types/settlements'; import settlementsFrame from '@assets/icons/settlements-data-frame.svg'; -const SettlementsTable = ({ data }: { data: SettlementItem[] }) => { +const SettlementsTable = ({ data, pageStartNumber }: { data: SettlementItem[], pageStartNumber: number }) => { + const keys: (keyof SettlementItem)[] = [ 'NO', '์ฟ ํฐ๋ฒˆํ˜ธ', @@ -45,7 +46,9 @@ const SettlementsTable = ({ data }: { data: SettlementItem[] }) => { {data.map((row, index) => ( {keys.map((key) => ( - {row[key]} + + {key === 'NO' ? pageStartNumber - index : row[key]} + ))} ))} diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx index 83a64b2a..9cbdcd71 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx @@ -1,11 +1,18 @@ import styled from '@emotion/styled'; +import 'semantic-ui-css/semantic.min.css'; +import { Dropdown, DropdownProps } from 'semantic-ui-react'; import SettlementsTable from './SettlementsTable'; import SettlementsPagination from './SettlementsPagination'; -import { SetStateAction, useState } from 'react'; +import { useState, useEffect } from 'react'; +import { useRecoilState } from 'recoil'; +import { settlementDataState } from '@recoil/atoms/settlemented'; const Settlemented = () => { + const [sortedData, setSortedData] = useRecoilState(settlementDataState); + const [sortOrder, setSortOrder] = useState('couponDateDesc'); + const fakeData = [ { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.21", '์ฟ ํฐ๋ฒˆํ˜ธ': 30, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '100ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '10์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '1000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.20", '์ฟ ํฐ๋ฒˆํ˜ธ': 29, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '99ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '999์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, @@ -40,26 +47,67 @@ const Settlemented = () => { { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.21", '์ฟ ํฐ๋ฒˆํ˜ธ': 7, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '46ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '7000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, ]; - const sortedData = [...fakeData].sort((a, b) => new Date(a['์ฟ ํฐ ์ ์šฉ์ผ']).getTime() - new Date(b['์ฟ ํฐ ์ ์šฉ์ผ']).getTime()); + const sortOptions = [ + { key: 'amountDesc', text: '์ •์‚ฐ๊ธˆ์•ก ๋งŽ์€ ์ˆœ', value: 'amountDesc' }, + { key: 'dateDesc', text: '์ •์‚ฐ ์™„๋ฃŒ์ผ ์ตœ๊ทผ ์ˆœ', value: 'dateDesc' }, + { key: 'couponDateDesc', text: '์ฟ ํฐ ์‚ฌ์šฉ์ผ ์ตœ๊ทผ ์ˆœ', value: 'couponDateDesc' }, + { key: 'usageCountDesc', text: '์‚ฌ์šฉ๊ฑด ๋งŽ์€ ์ˆœ', value: 'usageCountDesc' }, + ]; + + const handleSortChange = (_e: React.SyntheticEvent, data: DropdownProps) => { + setSortOrder(data.value as string); + }; + + const defaultOption = sortOptions.find(option => option.value === 'couponDateDesc'); - const dataWithNumber = sortedData.map((data, index) => ({ ...data, NO: index + 1 })); + const sortedAndNumberedData = fakeData.map((data, index) => ({ + ...data, + NO: index + 1, + })).sort((a, b) => new Date(a['์ฟ ํฐ ์ ์šฉ์ผ']).getTime() - new Date(b['์ฟ ํฐ ์ ์šฉ์ผ']).getTime()); - const reversedData = [...dataWithNumber].reverse(); + const reversedData = [...sortedAndNumberedData].reverse(); - const itemsPerPage = 10; + const itemsPerPage = 10; const totalItems = reversedData.length; const totalPages = Math.ceil(totalItems / itemsPerPage); const [currentPage, setCurrentPage] = useState(1); - const handlePageChange = (page: SetStateAction) => { + const calculatePageStartNumber = (currentPage: number) => { + return totalItems - (currentPage - 1) * itemsPerPage; + }; + + const handlePageChange = (page: number) => { setCurrentPage(page); }; const startIndex = (currentPage - 1) * itemsPerPage; const endIndex = startIndex + itemsPerPage; - const currentData = reversedData.slice(startIndex, endIndex); - + const currentData = sortedData.slice(startIndex, endIndex); + + useEffect(() => { + const sortData = (sortType: string) => { + return [...sortedAndNumberedData].sort((a, b) => { + switch (sortType) { + case 'amountDesc': + return parseFloat(b['์ •์‚ฐ ๊ธˆ์•ก']) - parseFloat(a['์ •์‚ฐ ๊ธˆ์•ก']); + case 'dateDesc': + return new Date(b['์ •์‚ฐ ์™„๋ฃŒ์ผ']).getTime() - new Date(a['์ •์‚ฐ ์™„๋ฃŒ์ผ']).getTime(); + case 'couponDateDesc': + return new Date(b['์ฟ ํฐ ์ ์šฉ์ผ']).getTime() - new Date(a['์ฟ ํฐ ์ ์šฉ์ผ']).getTime(); + case 'usageCountDesc': + return parseInt(b['์‚ฌ์šฉ ๊ฑด์ˆ˜']) - parseInt(a['์‚ฌ์šฉ ๊ฑด์ˆ˜']); + default: + return 0; + } + }); + }; + + const sorted = sortData(sortOrder); + console.log('Sorted Data:', sorted); + setSortedData(sorted); + console.log(setSortedData); + }, [sortOrder, setSortedData]); return ( @@ -68,24 +116,29 @@ const Settlemented = () => { ์ „์ฒด ๋‚ด์—ญ {sortedData.length}๊ฐœ - - ํ† ๊ธ€๋ฒ„ํŠผ - + - + - - ); } @@ -114,26 +167,46 @@ const TotalData = styled.div` `; const OptionContainer = styled.div` - margin-right: 26px; +// margin-right: 26px; display: flex; align-items: center; `; -const SortOption = styled.div` - margin-right: 20px; - - font-size: 14px; - font-weight: bold; +const StyledDropdown = styled(Dropdown)` + &.ui.dropdown { + min-width: 140px; + font-color: white !important; + background-color: #1A2849; + border: 1.5px solid white; + border-radius: 14px; + + .text { + color: white; + font-size: 11px; + } + + .menu { + font-size: 11px; + background-color: #1A2849; + border: 1px solid rgba(255, 255, 255, 0.1); + border-radius: 5px; + z-index: 1000; + + .item { + white-space: nowrap; + } + } + } +`; - color: white; - white-space: nowrap; -`; const ExcelDownload = styled.div` width: 100%; + margin-left: 10px; + white-space: nowrap; button { @@ -150,6 +223,3 @@ const ExcelDownload = styled.div` const DataLow = styled.div` width: 100%; `; -const Data = styled.div` - width: 100%; -`; diff --git a/src/recoil/atoms/settlemented.ts b/src/recoil/atoms/settlemented.ts new file mode 100644 index 00000000..8b1e5663 --- /dev/null +++ b/src/recoil/atoms/settlemented.ts @@ -0,0 +1,7 @@ +import { atom } from 'recoil'; +import { SettlementItem } from '@/types/settlements'; + +export const settlementDataState = atom({ + key: 'settlementData', + default: [], +}); diff --git a/src/types/settlements.ts b/src/types/settlements.ts index 87129a9a..7c76de59 100644 --- a/src/types/settlements.ts +++ b/src/types/settlements.ts @@ -1,5 +1,5 @@ export interface SettlementItem { - NO: number; + 'NO': number; '์ฟ ํฐ ์ ์šฉ์ผ': string; '์ฟ ํฐ๋ฒˆํ˜ธ': number; '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': string; From 31b2647645502c1a2c41674f84786ea46c50cd3b Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Tue, 16 Jan 2024 14:14:31 +0900 Subject: [PATCH 22/54] =?UTF-8?q?design:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20=EB=B0=8F=20=EC=A1=B0=ED=9A=8C=ED=95=98=EA=B8=B0=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EB=94=94=EC=9E=90=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsLeft/Settlemented/index.tsx | 22 ++++++++++++++----- .../SettlementsCalendar/index.tsx | 6 +++-- 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx index 9cbdcd71..54740ab0 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx @@ -8,6 +8,7 @@ import { useState, useEffect } from 'react'; import { useRecoilState } from 'recoil'; import { settlementDataState } from '@recoil/atoms/settlemented'; + const Settlemented = () => { const [sortedData, setSortedData] = useRecoilState(settlementDataState); @@ -176,22 +177,33 @@ const OptionContainer = styled.div` const StyledDropdown = styled(Dropdown)` &.ui.dropdown { min-width: 140px; - font-color: white !important; - background-color: #1A2849; + border: 1.5px solid white; border-radius: 14px; + font-color: white !important; + background-color: rgba(255, 255, 255, 0.1); + .text { color: white; font-size: 11px; } + + .icon { + color: white; + } + + .menu .item.selected { + background-color: rgba(255, 255, 255, 0.1); + color: #fff; + } .menu { font-size: 11px; - background-color: #1A2849; - border: 1px solid rgba(255, 255, 255, 0.1); + background-color: rgba(255, 255, 255, 0.1); + border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 5px; - z-index: 1000; + margin-bottom: 2px; .item { white-space: nowrap; diff --git a/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx index b8392a74..9d62b2c1 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx @@ -80,11 +80,13 @@ const CalendarText = styled.div` `; const StyledButton = styled.button` - padding: 5px 10px; + padding: 7px 14px; background-color: #3182F6; color: white; - font-weight: 700; + + font-weight: 600; + font-size: 12px; border: 1px solid rgba(255, 255, 255, 0.2); border-radius: 8px; From 93005d21d537c5105956d9f93b1135cba770ee62 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Tue, 16 Jan 2024 15:52:53 +0900 Subject: [PATCH 23/54] =?UTF-8?q?move:=20=EC=A0=95=EC=82=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20?= =?UTF-8?q?=EA=B5=AC=EC=A1=B0=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsPagination/index.tsx | 0 .../Settlemented/SettlementsTable/index.tsx | 2 +- .../Settlemented/index.tsx | 7 +- .../SettlementsHeader/index.tsx | 0 .../index.tsx | 64 ++++++++++++------- .../Settlements/SettlementsLeft/index.tsx | 15 +---- 6 files changed, 46 insertions(+), 42 deletions(-) rename src/components/Settlements/SettlementsLeft/{ => SettlementsSetting}/Settlemented/SettlementsPagination/index.tsx (100%) rename src/components/Settlements/SettlementsLeft/{ => SettlementsSetting}/Settlemented/SettlementsTable/index.tsx (97%) rename src/components/Settlements/SettlementsLeft/{ => SettlementsSetting}/Settlemented/index.tsx (99%) rename src/components/Settlements/SettlementsLeft/{ => SettlementsSetting}/SettlementsHeader/index.tsx (100%) rename src/components/Settlements/SettlementsLeft/{SettlementsCalendar => SettlementsSetting}/index.tsx (54%) diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsPagination/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx similarity index 100% rename from src/components/Settlements/SettlementsLeft/Settlemented/SettlementsPagination/index.tsx rename to src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx similarity index 97% rename from src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx rename to src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx index f5634395..8c41a9d9 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/SettlementsTable/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx @@ -1,6 +1,6 @@ import styled from '@emotion/styled'; -import { SettlementItem } from '../../../../../types/settlements'; +import { SettlementItem } from '../../../../../../types/settlements'; import settlementsFrame from '@assets/icons/settlements-data-frame.svg'; const SettlementsTable = ({ data, pageStartNumber }: { data: SettlementItem[], pageStartNumber: number }) => { diff --git a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx similarity index 99% rename from src/components/Settlements/SettlementsLeft/Settlemented/index.tsx rename to src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx index 54740ab0..ecab193e 100644 --- a/src/components/Settlements/SettlementsLeft/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx @@ -1,14 +1,13 @@ import styled from '@emotion/styled'; import 'semantic-ui-css/semantic.min.css'; import { Dropdown, DropdownProps } from 'semantic-ui-react'; +import { useState, useEffect } from 'react'; +import { useRecoilState } from 'recoil'; import SettlementsTable from './SettlementsTable'; import SettlementsPagination from './SettlementsPagination'; -import { useState, useEffect } from 'react'; -import { useRecoilState } from 'recoil'; import { settlementDataState } from '@recoil/atoms/settlemented'; - const Settlemented = () => { const [sortedData, setSortedData] = useRecoilState(settlementDataState); @@ -212,8 +211,6 @@ const StyledDropdown = styled(Dropdown)` } `; - - const ExcelDownload = styled.div` width: 100%; diff --git a/src/components/Settlements/SettlementsLeft/SettlementsHeader/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx similarity index 100% rename from src/components/Settlements/SettlementsLeft/SettlementsHeader/index.tsx rename to src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx diff --git a/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx similarity index 54% rename from src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx rename to src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx index 9d62b2c1..ff1a4555 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsCalendar/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx @@ -1,11 +1,13 @@ -import { useState } from 'react'; import styled from '@emotion/styled'; +import { useState } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; import CalendarIcon from '@assets/icons/calendar-number-outline.svg'; +import Settlemented from './Settlemented'; +import SettlementsHeader from './SettlementsHeader'; -const SettlementsCalender = () => { +const SettlementsSetting = () => { const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(null); @@ -23,32 +25,48 @@ const SettlementsCalender = () => { return ( - - ๊ธฐ๊ฐ„ ์„ค์ • - - - ์กฐํšŒํ•˜๊ธฐ + + + + ๊ธฐ๊ฐ„ ์„ค์ • + + + ์กฐํšŒํ•˜๊ธฐ + + +
+ + ) } -export default SettlementsCalender; +export default SettlementsSetting; + +const Container = styled.div` + width: 100%; + height: 100%; +`; + +const BreakLine = styled.div` + margin: 0 40px; +`; -const Container = styled.nav` +const CalendarContainer = styled.nav` margin-right: 43px; display: flex; diff --git a/src/components/Settlements/SettlementsLeft/index.tsx b/src/components/Settlements/SettlementsLeft/index.tsx index 050cce27..24fc8d8d 100644 --- a/src/components/Settlements/SettlementsLeft/index.tsx +++ b/src/components/Settlements/SettlementsLeft/index.tsx @@ -1,18 +1,11 @@ import styled from '@emotion/styled'; -import Settlemented from './Settlemented'; -import SettlementsCalender from './SettlementsCalendar'; -import SettlementsHeader from './SettlementsHeader'; +import SettlementsSetting from './SettlementsSetting'; const SettlementsLeft = () => { return ( - - - -
- - + ) } @@ -22,8 +15,4 @@ export default SettlementsLeft; const Container = styled.div` width: 80%; height: 100%; -`; - -const BreakLine = styled.div` - margin: 0 40px; `; \ No newline at end of file From d6d703ea37660187bd3cbf014ccd41806aa081b0 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Tue, 16 Jan 2024 19:54:24 +0900 Subject: [PATCH 24/54] =?UTF-8?q?feat:=20=EA=B8=B0=EA=B0=84=20=EC=84=A4?= =?UTF-8?q?=EC=A0=95=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=8D=B0=EC=9D=B4?= =?UTF-8?q?=ED=84=B0=20=EB=A0=8C=EB=8D=94=EB=A7=81=20=EB=B0=8F=20=EB=93=9C?= =?UTF-8?q?=EB=A1=AD=EB=8B=A4=EC=9A=B4=20=EC=98=B5=EC=85=98=EA=B0=92=20?= =?UTF-8?q?=EC=BF=A0=ED=8F=B0=20=EC=A0=81=EC=9A=A9=EC=9D=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsSetting/Settlemented/index.tsx | 102 ++++++++---------- .../SettlementsSetting/index.tsx | 23 +++- .../SettlementsBefore/index.tsx | 3 +- src/recoil/atoms/settlemented.ts | 50 ++++++++- 4 files changed, 111 insertions(+), 67 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx index ecab193e..bbc175d8 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx @@ -2,51 +2,20 @@ import styled from '@emotion/styled'; import 'semantic-ui-css/semantic.min.css'; import { Dropdown, DropdownProps } from 'semantic-ui-react'; import { useState, useEffect } from 'react'; -import { useRecoilState } from 'recoil'; +import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil'; import SettlementsTable from './SettlementsTable'; import SettlementsPagination from './SettlementsPagination'; -import { settlementDataState } from '@recoil/atoms/settlemented'; +import { settlementsDateState, settlementDataState, fakeData } from '@recoil/atoms/settlemented'; const Settlemented = () => { + const { startDate, endDate } = useRecoilValue(settlementsDateState); + const setSettlementData = useSetRecoilState(settlementDataState); + const [sortedData, setSortedData] = useRecoilState(settlementDataState); const [sortOrder, setSortOrder] = useState('couponDateDesc'); - const fakeData = [ - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.21", '์ฟ ํฐ๋ฒˆํ˜ธ': 30, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '100ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '10์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '1000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.20", '์ฟ ํฐ๋ฒˆํ˜ธ': 29, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '99ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '999์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.19", '์ฟ ํฐ๋ฒˆํ˜ธ': 28, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '98ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '998', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.18", '์ฟ ํฐ๋ฒˆํ˜ธ': 27, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '102ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '10000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.17", '์ฟ ํฐ๋ฒˆํ˜ธ': 26, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '103ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '13000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.16", '์ฟ ํฐ๋ฒˆํ˜ธ': 25, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '104ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '14000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.15", '์ฟ ํฐ๋ฒˆํ˜ธ': 24, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '105ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '16000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.22", '์ฟ ํฐ๋ฒˆํ˜ธ': 23, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '106ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '176000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.23", '์ฟ ํฐ๋ฒˆํ˜ธ': 23, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '107ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '12700์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.24", '์ฟ ํฐ๋ฒˆํ˜ธ': 22, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '1ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '9934์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.25", '์ฟ ํฐ๋ฒˆํ˜ธ': 22, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '9ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '9993์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.26", '์ฟ ํฐ๋ฒˆํ˜ธ': 21, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '2ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '9959์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.20", '์ฟ ํฐ๋ฒˆํ˜ธ': 22, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '3ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '912์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.27", '์ฟ ํฐ๋ฒˆํ˜ธ': 20, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '4ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '999123์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.28", '์ฟ ํฐ๋ฒˆํ˜ธ': 19, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '5ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '999312์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.29", '์ฟ ํฐ๋ฒˆํ˜ธ': 18, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '45ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '100์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.12.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.12.01", '์ฟ ํฐ๋ฒˆํ˜ธ': 17, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '44ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '200์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.12.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.12.02", '์ฟ ํฐ๋ฒˆํ˜ธ': 16, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '43ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '300์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.12.10'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.04", '์ฟ ํฐ๋ฒˆํ˜ธ': 15, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '47ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '500์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.05", '์ฟ ํฐ๋ฒˆํ˜ธ': 14, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '66ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '504์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.10", '์ฟ ํฐ๋ฒˆํ˜ธ': 13, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '55ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '600์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.30", '์ฟ ํฐ๋ฒˆํ˜ธ': 12, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '54ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '700์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.29", '์ฟ ํฐ๋ฒˆํ˜ธ': 11, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '66ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '800์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.28", '์ฟ ํฐ๋ฒˆํ˜ธ': 10, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '97ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '900์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.27", '์ฟ ํฐ๋ฒˆํ˜ธ': 1, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '98ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '2200์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.26", '์ฟ ํฐ๋ฒˆํ˜ธ': 2, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '65ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '3000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.25", '์ฟ ํฐ๋ฒˆํ˜ธ': 3, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '78ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '4000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.24", '์ฟ ํฐ๋ฒˆํ˜ธ': 4, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '88ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '5000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.23", '์ฟ ํฐ๋ฒˆํ˜ธ': 5, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '65ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '6000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.22", '์ฟ ํฐ๋ฒˆํ˜ธ': 6, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '26ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '6500์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, - { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.21", '์ฟ ํฐ๋ฒˆํ˜ธ': 7, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '46ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '7000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, - ]; - const sortOptions = [ { key: 'amountDesc', text: '์ •์‚ฐ๊ธˆ์•ก ๋งŽ์€ ์ˆœ', value: 'amountDesc' }, { key: 'dateDesc', text: '์ •์‚ฐ ์™„๋ฃŒ์ผ ์ตœ๊ทผ ์ˆœ', value: 'dateDesc' }, @@ -65,10 +34,8 @@ const Settlemented = () => { NO: index + 1, })).sort((a, b) => new Date(a['์ฟ ํฐ ์ ์šฉ์ผ']).getTime() - new Date(b['์ฟ ํฐ ์ ์šฉ์ผ']).getTime()); - const reversedData = [...sortedAndNumberedData].reverse(); - const itemsPerPage = 10; - const totalItems = reversedData.length; + const totalItems = sortedData.length; const totalPages = Math.ceil(totalItems / itemsPerPage); const [currentPage, setCurrentPage] = useState(1); @@ -85,29 +52,48 @@ const Settlemented = () => { const endIndex = startIndex + itemsPerPage; const currentData = sortedData.slice(startIndex, endIndex); + const sortData = (sortType: string, data: any[]) => { + return [...data].sort((a, b) => { + switch (sortType) { + case 'amountDesc': + return parseFloat(b['์ •์‚ฐ ๊ธˆ์•ก']) - parseFloat(a['์ •์‚ฐ ๊ธˆ์•ก']); + case 'dateDesc': + return new Date(b['์ •์‚ฐ ์™„๋ฃŒ์ผ']).getTime() - new Date(a['์ •์‚ฐ ์™„๋ฃŒ์ผ']).getTime(); + case 'couponDateDesc': + return new Date(b['์ฟ ํฐ ์ ์šฉ์ผ']).getTime() - new Date(a['์ฟ ํฐ ์ ์šฉ์ผ']).getTime(); + case 'usageCountDesc': + return parseInt(b['์‚ฌ์šฉ ๊ฑด์ˆ˜']) - parseInt(a['์‚ฌ์šฉ ๊ฑด์ˆ˜']); + default: + return 0; + } + }); + }; + + useEffect(() => { + const sorted = sortData(sortOrder, sortedAndNumberedData); + setSettlementData(sorted); + }, []); + useEffect(() => { - const sortData = (sortType: string) => { - return [...sortedAndNumberedData].sort((a, b) => { - switch (sortType) { - case 'amountDesc': - return parseFloat(b['์ •์‚ฐ ๊ธˆ์•ก']) - parseFloat(a['์ •์‚ฐ ๊ธˆ์•ก']); - case 'dateDesc': - return new Date(b['์ •์‚ฐ ์™„๋ฃŒ์ผ']).getTime() - new Date(a['์ •์‚ฐ ์™„๋ฃŒ์ผ']).getTime(); - case 'couponDateDesc': - return new Date(b['์ฟ ํฐ ์ ์šฉ์ผ']).getTime() - new Date(a['์ฟ ํฐ ์ ์šฉ์ผ']).getTime(); - case 'usageCountDesc': - return parseInt(b['์‚ฌ์šฉ ๊ฑด์ˆ˜']) - parseInt(a['์‚ฌ์šฉ ๊ฑด์ˆ˜']); - default: - return 0; - } + if (startDate && endDate) { + const filteredData = sortedAndNumberedData.filter((data) => { + const couponDate = new Date(data['์ฟ ํฐ ์ ์šฉ์ผ']); + return couponDate >= startDate && couponDate <= endDate; }); - }; - const sorted = sortData(sortOrder); - console.log('Sorted Data:', sorted); + const sorted = sortData(sortOrder, filteredData); + setSettlementData(sorted); + setCurrentPage(1); + } else { + const sorted = sortData(sortOrder, sortedAndNumberedData); + setSettlementData(sorted); + } + }, [startDate, endDate, sortOrder]); + + useEffect(() => { + const sorted = sortData(sortOrder, sortedData); setSortedData(sorted); - console.log(setSortedData); - }, [sortOrder, setSortedData]); + }, [sortOrder]); return ( diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx index ff1a4555..702f1552 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx @@ -2,25 +2,42 @@ import styled from '@emotion/styled'; import { useState } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; +import { useSetRecoilState } from 'recoil'; import CalendarIcon from '@assets/icons/calendar-number-outline.svg'; import Settlemented from './Settlemented'; import SettlementsHeader from './SettlementsHeader'; +import { settlementsDateState } from '@recoil/atoms/settlemented'; const SettlementsSetting = () => { const [startDate, setStartDate] = useState(null); const [endDate, setEndDate] = useState(null); + const setSettlementsDate = useSetRecoilState(settlementsDateState); + const handleStartDateChange = (date: Date | null) => { - setStartDate(date); + if (date) { + date.setDate(1); + date.setHours(0, 0, 0, 0); + } + setStartDate(date); }; - + const handleEndDateChange = (date: Date | null) => { - setEndDate(date); + if (date) { + date.setMonth(date.getMonth() + 1); + date.setDate(0); + date.setHours(23, 59, 59, 999); + } + setEndDate(date); }; const handleButtonClick = () => { console.log('์กฐํšŒํ•˜๊ธฐ ๋ฒ„ํŠผ์ด ํด๋ฆญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.'); + if (startDate && endDate) { + setSettlementsDate({ startDate, endDate }); + console.log(settlementsDateState); + } }; return ( diff --git a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx index e3369b1f..6df29e0c 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx @@ -18,8 +18,7 @@ const SettlementsBefore = () => { }; const isBeforeDueDate = currentDate.getDate() < 10; - - + return ( diff --git a/src/recoil/atoms/settlemented.ts b/src/recoil/atoms/settlemented.ts index 8b1e5663..9fc130f4 100644 --- a/src/recoil/atoms/settlemented.ts +++ b/src/recoil/atoms/settlemented.ts @@ -1,7 +1,49 @@ import { atom } from 'recoil'; import { SettlementItem } from '@/types/settlements'; -export const settlementDataState = atom({ - key: 'settlementData', - default: [], -}); +export const fakeData = [ + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.21", '์ฟ ํฐ๋ฒˆํ˜ธ': 30, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '100ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '10์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '1000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.20", '์ฟ ํฐ๋ฒˆํ˜ธ': 29, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '99ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '999์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.19", '์ฟ ํฐ๋ฒˆํ˜ธ': 28, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '98ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '998', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.18", '์ฟ ํฐ๋ฒˆํ˜ธ': 27, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '102ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '10000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.17", '์ฟ ํฐ๋ฒˆํ˜ธ': 26, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '103ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '13000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.16", '์ฟ ํฐ๋ฒˆํ˜ธ': 25, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '104ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '14000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.15", '์ฟ ํฐ๋ฒˆํ˜ธ': 24, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '105ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '16000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.22", '์ฟ ํฐ๋ฒˆํ˜ธ': 23, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '106ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '176000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.23", '์ฟ ํฐ๋ฒˆํ˜ธ': 23, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '107ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '12700์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.24", '์ฟ ํฐ๋ฒˆํ˜ธ': 22, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '1ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '9934์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.25", '์ฟ ํฐ๋ฒˆํ˜ธ': 22, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '9ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '9993์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.26", '์ฟ ํฐ๋ฒˆํ˜ธ': 21, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '2ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '9959์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.20", '์ฟ ํฐ๋ฒˆํ˜ธ': 22, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '3ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '912์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.27", '์ฟ ํฐ๋ฒˆํ˜ธ': 20, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '4ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '999123์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.28", '์ฟ ํฐ๋ฒˆํ˜ธ': 19, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '5ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '999312์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.11.29", '์ฟ ํฐ๋ฒˆํ˜ธ': 18, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '45ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '100์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.12.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.12.01", '์ฟ ํฐ๋ฒˆํ˜ธ': 17, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '44ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '200์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.12.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.12.02", '์ฟ ํฐ๋ฒˆํ˜ธ': 16, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '43ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '300์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.12.10'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.04", '์ฟ ํฐ๋ฒˆํ˜ธ': 15, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '47ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '500์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.05", '์ฟ ํฐ๋ฒˆํ˜ธ': 14, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '66ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '504์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.10", '์ฟ ํฐ๋ฒˆํ˜ธ': 13, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '55ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '600์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.30", '์ฟ ํฐ๋ฒˆํ˜ธ': 12, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '54ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '700์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.29", '์ฟ ํฐ๋ฒˆํ˜ธ': 11, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '66ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '800์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.28", '์ฟ ํฐ๋ฒˆํ˜ธ': 10, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '97ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '900์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.27", '์ฟ ํฐ๋ฒˆํ˜ธ': 1, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '98ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '2200์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.26", '์ฟ ํฐ๋ฒˆํ˜ธ': 2, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '65ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '3000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.25", '์ฟ ํฐ๋ฒˆํ˜ธ': 3, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '78ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '4000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.24", '์ฟ ํฐ๋ฒˆํ˜ธ': 4, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '88ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '5000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.23", '์ฟ ํฐ๋ฒˆํ˜ธ': 5, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '65ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '6000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.22", '์ฟ ํฐ๋ฒˆํ˜ธ': 6, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '26ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '6500์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + { '์ฟ ํฐ ์ ์šฉ์ผ': "2023.10.21", '์ฟ ํฐ๋ฒˆํ˜ธ': 7, '๊ด€๋ฆฌ ์ฟ ํฐ๋ช…': "๊ฐ€์„ ์„ ์ฐฉ์ˆœ ์ฟ ํฐ", '์‚ฌ์šฉ ๊ฑด์ˆ˜': '46ํšŒ', '์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก': '50์›', '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก':'0์›', '์ •์‚ฐ ๊ธˆ์•ก': '7000์›', '์ •์‚ฐ ์™„๋ฃŒ์ผ': '2023.11.02'}, + ]; + + export const settlementDataState = atom({ + key: 'settlementData', + default: fakeData.map((data, index) => ({ + ...data, + NO: index + 1, + })).sort((a, b) => new Date(a['์ฟ ํฐ ์ ์šฉ์ผ']).getTime() - new Date(b['์ฟ ํฐ ์ ์šฉ์ผ']).getTime()) + }); + + export const settlementsDateState = atom({ + key: 'settlementsDateState', + default: { startDate: new Date(), endDate: new Date() }, + }); \ No newline at end of file From 553f2b555705a4ff8dc4fa67415a637ab918ef70 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Wed, 17 Jan 2024 01:25:41 +0900 Subject: [PATCH 25/54] =?UTF-8?q?chore:=20xlsx=20=EB=9D=BC=EC=9D=B4?= =?UTF-8?q?=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 97 ++++++++++++++++++++++++++++++++++++++++++++++- package.json | 3 +- 2 files changed, 98 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2473224c..4bf52d4a 100644 --- a/package-lock.json +++ b/package-lock.json @@ -22,7 +22,8 @@ "recoil": "^0.7.7", "recoil-persist": "^5.1.0", "semantic-ui-css": "^2.5.0", - "semantic-ui-react": "^2.1.5" + "semantic-ui-react": "^2.1.5", + "xlsx": "^0.18.5" }, "devDependencies": { "@swc/core": "^1.3.102", @@ -3128,6 +3129,14 @@ "acorn": "^6.0.0 || ^7.0.0 || ^8.0.0" } }, + "node_modules/adler-32": { + "version": "1.3.1", + "resolved": "https://registry.npmjs.org/adler-32/-/adler-32-1.3.1.tgz", + "integrity": "sha512-ynZ4w/nUUv5rrsR8UUGoe1VC9hZj6V5hU9Qw1HlMDJGEJw5S7TfTErWTjMys6M7vr0YWcPqs3qAr4ss0nDfP+A==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/ajv": { "version": "6.12.6", "resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.6.tgz", @@ -3464,6 +3473,18 @@ } ] }, + "node_modules/cfb": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/cfb/-/cfb-1.2.2.tgz", + "integrity": "sha512-KfdUZsSOw19/ObEWasvBP/Ac4reZvAGauZhs6S/gqNhXhI7cKwvlH7ulj+dOEYnca4bm4SGo8C1bTAQvnTjgQA==", + "dependencies": { + "adler-32": "~1.3.0", + "crc-32": "~1.2.0" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/chalk": { "version": "4.1.2", "resolved": "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz", @@ -3559,6 +3580,14 @@ "node": ">= 0.12.0" } }, + "node_modules/codepage": { + "version": "1.15.0", + "resolved": "https://registry.npmjs.org/codepage/-/codepage-1.15.0.tgz", + "integrity": "sha512-3g6NUTPd/YtuuGrhMnOMRjFc+LJw/bnMp3+0r/Wcz3IXUuCosKRJvMphm5+Q+bvTVGcJJuRvVLuYba+WojaFaA==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/collect-v8-coverage": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/collect-v8-coverage/-/collect-v8-coverage-1.0.2.tgz", @@ -3609,6 +3638,17 @@ "node": ">=10" } }, + "node_modules/crc-32": { + "version": "1.2.2", + "resolved": "https://registry.npmjs.org/crc-32/-/crc-32-1.2.2.tgz", + "integrity": "sha512-ROmzCKrTnOwybPcJApAA6WBWij23HVfGVNKqqrZpuyZOHqK2CwHSvpGuyt/UNNvaIjEd8X5IFGp4Mh+Ie1IHJQ==", + "bin": { + "crc32": "bin/crc32.njs" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/create-jest": { "version": "29.7.0", "resolved": "https://registry.npmjs.org/create-jest/-/create-jest-29.7.0.tgz", @@ -4260,6 +4300,14 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, + "node_modules/frac": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz", + "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -6832,6 +6880,17 @@ "integrity": "sha512-D9cPgkvLlV3t3IzL0D0YLvGA9Ahk4PcvVwUbN0dSGr1aP0Nrt4AEnTUbuGvquEC0mA64Gqt1fzirlRs5ibXx8g==", "dev": true }, + "node_modules/ssf": { + "version": "0.11.2", + "resolved": "https://registry.npmjs.org/ssf/-/ssf-0.11.2.tgz", + "integrity": "sha512-+idbmIXoYET47hH+d7dfm2epdOMUDjqcB4648sTZ+t2JwoyBFL/insLfB/racrDmsKB3diwsDA696pZMieAC5g==", + "dependencies": { + "frac": "~1.1.2" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/stack-utils": { "version": "2.0.6", "resolved": "https://registry.npmjs.org/stack-utils/-/stack-utils-2.0.6.tgz", @@ -7288,6 +7347,22 @@ "node": ">= 8" } }, + "node_modules/wmf": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/wmf/-/wmf-1.0.2.tgz", + "integrity": "sha512-/p9K7bEh0Dj6WbXg4JG0xvLQmIadrner1bi45VMJTfnbVHsc7yIajZyoSoK60/dtVBs12Fm6WkUI5/3WAVsNMw==", + "engines": { + "node": ">=0.8" + } + }, + "node_modules/word": { + "version": "0.3.0", + "resolved": "https://registry.npmjs.org/word/-/word-0.3.0.tgz", + "integrity": "sha512-OELeY0Q61OXpdUfTp+oweA/vtLVg5VDOXh+3he3PNzLGG/y0oylSOC1xRVj0+l4vQ3tj/bB1HVHv1ocXkQceFA==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/wrap-ansi": { "version": "7.0.0", "resolved": "https://registry.npmjs.org/wrap-ansi/-/wrap-ansi-7.0.0.tgz", @@ -7324,6 +7399,26 @@ "node": "^12.13.0 || ^14.15.0 || >=16.0.0" } }, + "node_modules/xlsx": { + "version": "0.18.5", + "resolved": "https://registry.npmjs.org/xlsx/-/xlsx-0.18.5.tgz", + "integrity": "sha512-dmg3LCjBPHZnQp5/F/+nnTa+miPJxUXB6vtk42YjBBKayDNagxGEeIdWApkYPOf3Z3pm3k62Knjzp7lMeTEtFQ==", + "dependencies": { + "adler-32": "~1.3.0", + "cfb": "~1.2.1", + "codepage": "~1.15.0", + "crc-32": "~1.2.1", + "ssf": "~0.11.2", + "wmf": "~1.0.1", + "word": "~0.3.0" + }, + "bin": { + "xlsx": "bin/xlsx.njs" + }, + "engines": { + "node": ">=0.8" + } + }, "node_modules/y18n": { "version": "5.0.8", "resolved": "https://registry.npmjs.org/y18n/-/y18n-5.0.8.tgz", diff --git a/package.json b/package.json index e3191ba3..2cf26cc9 100644 --- a/package.json +++ b/package.json @@ -25,7 +25,8 @@ "recoil": "^0.7.7", "recoil-persist": "^5.1.0", "semantic-ui-css": "^2.5.0", - "semantic-ui-react": "^2.1.5" + "semantic-ui-react": "^2.1.5", + "xlsx": "^0.18.5" }, "devDependencies": { "@swc/core": "^1.3.102", From ed513de3c42f6af8b0bda1f6de2c6226f77a1ed5 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Wed, 17 Jan 2024 01:34:07 +0900 Subject: [PATCH 26/54] =?UTF-8?q?feat:=20=EC=97=91=EC=85=80=20=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=EB=A1=9C=EB=93=9C=20=EA=B8=B0=EB=8A=A5=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsSetting/Settlemented/index.tsx | 33 ++++++++++++------- 1 file changed, 21 insertions(+), 12 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx index bbc175d8..f8221114 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx @@ -3,6 +3,7 @@ import 'semantic-ui-css/semantic.min.css'; import { Dropdown, DropdownProps } from 'semantic-ui-react'; import { useState, useEffect } from 'react'; import { useRecoilValue, useRecoilState, useSetRecoilState } from 'recoil'; +import * as XLSX from 'xlsx'; import SettlementsTable from './SettlementsTable'; import SettlementsPagination from './SettlementsPagination'; @@ -95,6 +96,16 @@ const Settlemented = () => { setSortedData(sorted); }, [sortOrder]); + const handleDownloadExcel = () => { + const workBook = XLSX.utils.book_new(); + const workSheet = XLSX.utils.json_to_sheet(sortedData); + + XLSX.utils.book_append_sheet(workBook, workSheet, "Sheet1"); + + XLSX.writeFile(workBook, "download.xlsx"); + }; + + return ( @@ -103,14 +114,14 @@ const Settlemented = () => { - + @@ -120,10 +131,10 @@ const Settlemented = () => { pageStartNumber={calculatePageStartNumber(currentPage)} /> + currentPage={currentPage} + totalPages={totalPages} + onPageChange={handlePageChange} + /> ); @@ -153,8 +164,6 @@ const TotalData = styled.div` `; const OptionContainer = styled.div` -// margin-right: 26px; - display: flex; align-items: center; `; From 8e76f136ce0bcd4cda39fd466582a3ba07e06d9a Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Wed, 17 Jan 2024 01:54:12 +0900 Subject: [PATCH 27/54] =?UTF-8?q?design:=20=ED=97=A4=EB=8D=94=20=EA=B3=A0?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Layout/index.tsx | 17 ++++++++++++----- src/pages/Settlements/index.tsx | 1 - 2 files changed, 12 insertions(+), 6 deletions(-) diff --git a/src/components/common/Layout/index.tsx b/src/components/common/Layout/index.tsx index 04083147..adb13c64 100644 --- a/src/components/common/Layout/index.tsx +++ b/src/components/common/Layout/index.tsx @@ -4,6 +4,7 @@ import { useLocation } from 'react-router-dom'; import Sidebar from './Sidebar'; import Header from './Header'; +import theme from '@styles/theme'; const Layout = () => { const location = useLocation(); @@ -26,17 +27,20 @@ export default Layout; const Container = styled.div` position: relative; + width: 100vw; min-width: 100vw; - min-height: 100vh; + height: 100vh; + max-height: 100vh; display: flex; - background-color: ${props => props.theme.colors.background}; + background-color: ${theme.colors.background}; + overflow: hidden; `; const Section = styled.section` width: 100%; - min-height: 100%; + height: 100vh; margin-left: 100px; padding: 13px 22px; @@ -48,7 +52,8 @@ const Section = styled.section` //HACK: ํƒ€์ž… ๋ถ„๋ฆฌ ์˜ˆ์ •! const OutletLayout = styled.div<{ $pathname: string }>` width: 100%; - height: 100%; + height: 100vh; + max-height: 100vh; margin-top: 16px; border-radius: 20px; @@ -59,7 +64,9 @@ const OutletLayout = styled.div<{ $pathname: string }>` } else if (props.$pathname === '/coupons/report') { return 'transparent'; } else { - return props.theme.colors.white; + return theme.colors.white; } }}; + + overflow: scroll; `; diff --git a/src/pages/Settlements/index.tsx b/src/pages/Settlements/index.tsx index 6b894103..1af2bbd0 100644 --- a/src/pages/Settlements/index.tsx +++ b/src/pages/Settlements/index.tsx @@ -15,7 +15,6 @@ export default Settlements; const Container = styled.div` width: 100%; - height: 100%; display: flex; From ba3fe9e4e02a5fdf9daa023a38bec6870e1fa2ba Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Wed, 17 Jan 2024 16:00:50 +0900 Subject: [PATCH 28/54] =?UTF-8?q?design:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20=EB=B2=84=ED=8A=BC=20=EB=94=94?= =?UTF-8?q?=EC=9E=90=EC=9D=B8=20=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Settlemented/SettlementsPagination/index.tsx | 15 ++++++--------- .../SettlementsRight/SettlementsBefore/index.tsx | 5 ++++- .../Settlements/SettlementsRight/index.tsx | 1 - 3 files changed, 10 insertions(+), 11 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx index 3384e71a..32abab64 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx @@ -89,20 +89,17 @@ const PaginationContainer = styled.div` .pagination-previous, .pagination-next { padding: 8px 12px; - - border: 1px solid #ccc; - border-radius: 4px; - color: #FFFFFF; + color: #FFFFFF !important; text-decoration: none; &:hover { - background-color: #f0f0f0; + cursor: pointer; } + } - &.active { - font-weight: bold; - background-color: #e0e0e0; - } + .pagination-previous a, + .pagination-next a { + color: white !important; } `; diff --git a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx index 6df29e0c..d3d7f8eb 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx @@ -18,7 +18,7 @@ const SettlementsBefore = () => { }; const isBeforeDueDate = currentDate.getDate() < 10; - + return ( @@ -199,5 +199,8 @@ const Icon = styled.img` `; const ReceiptIcon = styled.img` + max-width: 200px; + margin-top: 40px; + margin-left: auto; `; \ No newline at end of file diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index 62354e60..3f3f7a60 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -25,7 +25,6 @@ const Container = styled.div` position: relative; width: 20%; - height: 100%; background-color: #1A2849; border-top-right-radius: 1.25rem; From 4a89796b2776b35c8905dcbbeeda8a5c077ecf34 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Wed, 17 Jan 2024 18:08:14 +0900 Subject: [PATCH 29/54] =?UTF-8?q?design:=20=EC=A0=95=EC=82=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B0=B0=EA=B2=BD=20=EB=B8=94=EB=9F=AC=20?= =?UTF-8?q?=EC=B2=98=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsSetting/Settlemented/index.tsx | 10 ++++++---- src/components/Settlements/SettlementsRight/index.tsx | 1 + 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx index f8221114..860d40e4 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx @@ -169,10 +169,11 @@ const OptionContainer = styled.div` `; const StyledDropdown = styled(Dropdown)` + &.ui.dropdown { min-width: 140px; + backdrop-filter: blur(50px); - border: 1.5px solid white; border-radius: 14px; font-color: white !important; @@ -194,13 +195,14 @@ const StyledDropdown = styled(Dropdown)` .menu { font-size: 11px; - background-color: rgba(255, 255, 255, 0.1); - border: 1px solid rgba(255, 255, 255, 0.2); - border-radius: 5px; + background-color: rgba(255, 255, 255, 0.1) !important; + border: 1px solid rgba(255, 255, 255, 0.2) !important; + border-radius: 0px 0px 5px 5px; margin-bottom: 2px; .item { white-space: nowrap; + border-bottom: none !important; } } } diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index 3f3f7a60..923fc01f 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -39,6 +39,7 @@ const InnerContainer = styled.div` background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); + backdrop-filter: blur(50px); hr { margin: 30px 15px; From 443281cdf676db0c4768357c40d851a736111cc2 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Wed, 17 Jan 2024 18:52:56 +0900 Subject: [PATCH 30/54] =?UTF-8?q?design:=20=EC=B5=9C=EC=86=8C=EB=84=88?= =?UTF-8?q?=EB=B9=84=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Settlements/SettlementsLeft/SettlementsSetting/index.tsx | 1 + src/components/Settlements/SettlementsLeft/index.tsx | 3 +++ src/components/Settlements/SettlementsRight/index.tsx | 1 + 3 files changed, 5 insertions(+) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx index 702f1552..5a0d6a8e 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx @@ -76,6 +76,7 @@ export default SettlementsSetting; const Container = styled.div` width: 100%; + min-width: 1110px; height: 100%; `; diff --git a/src/components/Settlements/SettlementsLeft/index.tsx b/src/components/Settlements/SettlementsLeft/index.tsx index 24fc8d8d..edb45504 100644 --- a/src/components/Settlements/SettlementsLeft/index.tsx +++ b/src/components/Settlements/SettlementsLeft/index.tsx @@ -14,5 +14,8 @@ export default SettlementsLeft; const Container = styled.div` width: 80%; + min-width: 1110px; height: 100%; + + background: linear-gradient(45deg, rgba(17, 31, 63, 1), rgba(26, 40, 73, 0.75)); `; \ No newline at end of file diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index 923fc01f..431007ea 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -25,6 +25,7 @@ const Container = styled.div` position: relative; width: 20%; + min-width: 290px; background-color: #1A2849; border-top-right-radius: 1.25rem; From ea26a0ee177ddb5f5c10d5a645dc24bd07e450e3 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Thu, 18 Jan 2024 00:30:32 +0900 Subject: [PATCH 31/54] =?UTF-8?q?design:=20=EC=A0=95=EC=82=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=B0=B1=EA=B7=B8=EB=9D=BC=EC=9A=B4?= =?UTF-8?q?=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Settlements/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/pages/Settlements/index.tsx b/src/pages/Settlements/index.tsx index 1af2bbd0..c4811a09 100644 --- a/src/pages/Settlements/index.tsx +++ b/src/pages/Settlements/index.tsx @@ -18,6 +18,5 @@ const Container = styled.div` display: flex; - background: linear-gradient(45deg, rgba(17, 31, 63, 1), rgba(26, 40, 73, 0.75)); border-radius: 1.25rem; `; From c006e3c0bc0c80fbf07dcb343023daeec2bce6df Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Thu, 18 Jan 2024 02:16:06 +0900 Subject: [PATCH 32/54] =?UTF-8?q?design:=20=EB=93=9C=EB=A1=AD=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=20=EC=BB=A4=EC=8A=A4=ED=85=80=EB=94=94=EC=9E=90?= =?UTF-8?q?=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsSetting/Settlemented/index.tsx | 34 +++++++++++-------- 1 file changed, 20 insertions(+), 14 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx index 860d40e4..e4913d80 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx @@ -169,45 +169,51 @@ const OptionContainer = styled.div` `; const StyledDropdown = styled(Dropdown)` - &.ui.dropdown { - min-width: 140px; + min-width: 160px; backdrop-filter: blur(50px); - border-radius: 14px; - font-color: white !important; background-color: rgba(255, 255, 255, 0.1); - .text { color: white; font-size: 11px; + max-height: 30px; } - .icon { - color: white; + color: white; } - .menu .item.selected { - background-color: rgba(255, 255, 255, 0.1); - color: #fff; - } - + background-color: rgba(255, 255, 255, 0.1); + color: #fff; + } .menu { font-size: 11px; background-color: rgba(255, 255, 255, 0.1) !important; border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 0px 0px 5px 5px; margin-bottom: 2px; - .item { white-space: nowrap; - border-bottom: none !important; + border-bottom: none !important; + border-top: none !important; } } } + &.ui.selection.active.dropdown { + color: white; + border: 1px solid rgba(255, 255, 255, 0.2) !important; + box-shadow: 0 2px 3px 0 rgba(34, 36, 38, 0.15) !important; + } + + &.ui.selection.visible.dropdown>.text:not(.default) { + font-weight: 400; + color: white; +} `; + + const ExcelDownload = styled.div` width: 100%; From c4dce6019ce368a3aeb9ee9f58a34181a7a3ccb5 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Thu, 18 Jan 2024 18:30:04 +0900 Subject: [PATCH 33/54] =?UTF-8?q?design:=20=EC=A0=95=EC=82=B0=ED=8C=9D?= =?UTF-8?q?=EC=97=85=20=EB=94=94=EC=9E=90=EC=9D=B8?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Settlemented/SettlementsTable/index.tsx | 11 +- .../SettlementsSetting/Settlemented/index.tsx | 9 +- .../SettlementsHeader/index.tsx | 109 +++++++++++++++++- .../SettlementsSetting/index.tsx | 2 +- 4 files changed, 120 insertions(+), 11 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx index 8c41a9d9..3d5717b3 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx @@ -88,8 +88,6 @@ const KeyElement = styled.div` `; const Row = styled.div<{ isLast: boolean }>` - // margin-bottom: 10px; - display: flex; justify-content: space-between; @@ -103,17 +101,18 @@ const Row = styled.div<{ isLast: boolean }>` const FrameContainer = styled.div` width: 100%; - padding-left: 10px; - padding-right: 10px; - box-sizing: border-box; text-align: center; `; const Frame = styled.div` + width: 99%; height: 500px; + margin-left: auto; + margin-right: auto; + background: url(${settlementsFrame}); `; @@ -123,8 +122,6 @@ const DataElement = styled.div` padding-top: 18px; - // display: flex; - // align-items: center; justify-content: center; overflow: hidden; diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx index e4913d80..76917546 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx @@ -200,6 +200,12 @@ const StyledDropdown = styled(Dropdown)` } } } + + &.ui.selection.dropdown { + min-height: 20px; + // max-height: 30px; + } + &.ui.selection.active.dropdown { color: white; border: 1px solid rgba(255, 255, 255, 0.2) !important; @@ -228,7 +234,8 @@ const ExcelDownload = styled.div` border: none; text-decoration: underline; cursor: pointer; - background: none; + background: none; + text-underline-offset : 8px; } `; diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx index a9777283..e1ccba73 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx @@ -1,9 +1,16 @@ import styled from '@emotion/styled'; +import { useState } from 'react'; import settlementsAdminIcon from '@assets/icons/settlements-admin.svg'; import informationIcon from '@assets/icons/information-circle-outline.svg' const SettlementsHeader = () => { + const [isPopupOpen, setIsPopupOpen] = useState(false) + + const handlePopupToggle = () => { + setIsPopupOpen(!isPopupOpen); + }; + return (
@@ -18,9 +25,35 @@ const SettlementsHeader = () => { ์ฟ ํฐ ํ”„๋กœ๋ชจ์…˜์— ์ ์šฉํ•œ ์ •์‚ฐ ๋‚ด์—ญ์„ ํ™•์ธํ•  ์ˆ˜ ์žˆ์Šต๋‹ˆ๋‹ค. + + alt="์ •๋ณด" + onClick={handlePopupToggle} /> + {isPopupOpen && ( + + + ์ •์‚ฐ๋‚ด์—ญ ์•ˆ๋‚ด + X + + + +

์ฟ ํฐ ๋ฒˆํ˜ธ๋Š” ์ฟ ํฐ์„ ๋“ฑ๋กํ•˜๋ฉด ์ž๋™์œผ๋กœ ๋ฐœํ–‰๋˜๋Š” ๊ด€๋ฆฌ๋ชฉ์ ์˜ ๋ฒˆํ˜ธ์ž…๋‹ˆ๋‹ค.

+

๊ด€๋ฆฌ ์ฟ ํฐ๋ช…์€ ์‚ฌ์žฅ๋‹˜๊ป˜์„œ ์ง์ ‘ ์„ค์ •ํ•œ ์ฟ ํฐ๋ช…์ž…๋‹ˆ๋‹ค.

+

์‚ฌ์šฉ ๊ฑด์ˆ˜๋Š” ์ฟ ํฐ ์ ์šฉ์ผ์— ๊ณ ๊ฐ๋“ค์ด ์ฟ ํฐ์„ ์‚ฌ์šฉํ•œ ๊ฑด ์ˆ˜์ž…๋‹ˆ๋‹ค.

+

๊ตฌํฐ ์ ์šฉ์ผ์€ ์‚ฌ์šฉ์ž๊ฐ€ ์ฟ ํฐ์„ ์ ์šฉํ•˜์—ฌ ๊ฒฐ์ œ(์˜ˆ์•ฝ)๋ฅผ ํ•œ ๋‚ ์ž…๋‹ˆ๋‹ค.

+

์ •์‚ฐ ์™„๋ฃŒ์ผ์€ ์ •์‚ฐ์ด ์™„๋ฃŒ๋œ ๋‚ ๋กœ ๋งค์›” 10์ผ (์˜์—…์ผ ๊ธฐ์ค€)์ž…๋‹ˆ๋‹ค.

+ + +

[์ •์‚ฐ ๊ธˆ์•ก ๊ด€๋ จ]

+

์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก์€ ์ฟ ํฐ ์ ์šฉ์ผ์— ์‚ฌ์šฉ๋œ ๋ชจ๋“  ์ฟ ํฐ ๊ธˆ์•ก์˜ ํ•ฉ๊ณ„์ž…๋‹ˆ๋‹ค.

+

์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก์€ ํ™˜๋ถˆ/์ทจ์†Œ๋ฅผ ํ†ตํ•ด ์ฟ ํฐ ์‚ฌ์šฉ์ด ์ทจ์†Œ๋œ ๊ธˆ์•ก(- ํ‘œ๊ธฐ)์ž…๋‹ˆ๋‹ค.

+

์ •์‚ฐ ๊ธˆ์•ก์€ โ€œ์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก + ์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•กโ€ ์ž…๋‹ˆ๋‹ค.

+ + + + )} + ) @@ -56,7 +89,6 @@ const HeaderText = styled.div` const Middle = styled.div` display: flex; - align-items: center; `; @@ -67,7 +99,80 @@ const MiddleText = styled.div` color: white; `; +const InformationContainer = styled.div` + display: flex; + align-items: center; +`; + const InformationIcon = styled.img` margin-bottom: 5px; `; +const PopupContainer = styled.div` + position: fixed; + top: 53%; + left: 48%; + transform: translate(-50%, -50%); + background-color: white; + padding: 20px; + border-radius: 6px; + box-shadow: 0px 2px 64px rgba(0, 0, 0, 0.1); + z-index: 999; + +`; + +const PopupHeader = styled.div` + display: flex; + flex-direction: row; + + text-align: center; + align-items: center; + justify-content: space-between; +`; + +const PopupTitle = styled.h2` + font-size: 20px; + font-weight: 900; +`; + +const PopupCloseButton = styled.button` + background: none; + border: none; + font-size: 20px; + font-weight: bold; + cursor: pointer; +`; + +const PopupContent = styled.div` + margin-top: 10px; + line-height: 1.5; + + p { + margin-bottom: 10px; + } +`; + +const PopupContentHeader = styled.div` + margin-top: 30px; + p { + margin-bottom: 10px; + + font-size: 14px; + font-weight: normal; + } + strong { + font-weight: 900; + } +`; + +const PopupContentMiddle = styled.div` + margin-top: 20px; + p { + font-size: 14px; + margin-bottom: 10px; + font-weight: normal; + } + strong { + font-weight: 900; + } +`; diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx index 5a0d6a8e..4ec879ba 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx @@ -51,7 +51,7 @@ const SettlementsSetting = () => { From a6071fe68f5d3dc950003271d9e1f30dec511fb3 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Fri, 19 Jan 2024 14:36:06 +0900 Subject: [PATCH 34/54] =?UTF-8?q?design:=20=EB=B0=B0=EA=B2=BD=20=EB=B0=95?= =?UTF-8?q?=EC=8A=A4=EC=89=90=EB=8F=84=EC=9A=B0=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsLeft/SettlementsSetting/index.tsx | 2 +- src/components/Settlements/SettlementsRight/index.tsx | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx index 4ec879ba..5a0d6a8e 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx @@ -51,7 +51,7 @@ const SettlementsSetting = () => { diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index 431007ea..2a1debd7 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -40,12 +40,15 @@ const InnerContainer = styled.div` background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); - backdrop-filter: blur(50px); + backdrop-filter: blur(20px); + box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); hr { margin: 30px 15px; - border-top: 1px solid rgba(217, 217, 217, 0.2); + border: 1px solid rgba(217, 217, 217, 0.2); + + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } `; From d1ea105e051ac5ead315fbf7b7ffec2845b49fe3 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Fri, 19 Jan 2024 15:15:09 +0900 Subject: [PATCH 35/54] =?UTF-8?q?design:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20=ED=99=9C=EC=84=B1=ED=99=94=20?= =?UTF-8?q?=EB=B3=B4=EB=8D=94=EA=B0=92=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsPagination/index.tsx | 26 ++++++------------- 1 file changed, 8 insertions(+), 18 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx index 32abab64..7f90f9fd 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx @@ -56,40 +56,30 @@ const PaginationContainer = styled.div` .pagination-li { margin: 5px; + padding: 9.4px 0px; + border: 1px solid #FFFFFF; + border-radius: 4px; cursor: pointer; } .pagination-link { padding: 8px 12px; - border: 1px solid #FFFFFF; - border-radius: 4px; + color: #FFFFFF; text-decoration: none; - - &:hover { - background-color: #f0f0f0; - } - - &.active { - font-weight: bold; - background-color: #e0e0e0; - } } .pagination-li.active { padding: 9.4px 0px; - - font-weight: bold; - - border-width: 2px; - border: 1.5px solid #FFFFFF; + border: 3px solid #FFFFFF; border-radius: 4px; + + font-weight: bold; } .pagination-previous, .pagination-next { padding: 8px 12px; - color: #FFFFFF !important; text-decoration: none; @@ -102,4 +92,4 @@ const PaginationContainer = styled.div` .pagination-next a { color: white !important; } -`; +`; \ No newline at end of file From f37e5c7737de3f173361428e2432d49e0d4c3a15 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Fri, 19 Jan 2024 20:13:01 +0900 Subject: [PATCH 36/54] =?UTF-8?q?design:=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20?= =?UTF-8?q?=EB=B0=98=EC=9D=91=ED=98=95=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Settlemented/SettlementsTable/index.tsx | 80 ++++++++++++++++--- .../SettlementsSetting/Settlemented/index.tsx | 2 + .../SettlementsHeader/index.tsx | 4 + .../SettlementsSetting/index.tsx | 2 +- .../Settlements/SettlementsLeft/index.tsx | 5 ++ .../SettlementsBefore/index.tsx | 4 + .../Settlements/SettlementsRight/index.tsx | 38 ++++++--- src/pages/Settlements/index.tsx | 10 ++- 8 files changed, 120 insertions(+), 25 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx index 3d5717b3..0cac133f 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx @@ -47,7 +47,9 @@ const SettlementsTable = ({ data, pageStartNumber }: { data: SettlementItem[], p {keys.map((key) => ( - {key === 'NO' ? pageStartNumber - index : row[key]} + {key}: + {key === 'NO' ? pageStartNumber - index : row[key]} + {key === 'NO' ? pageStartNumber - index : row[key]} ))} @@ -65,6 +67,11 @@ const Container = styled.div` display: flex; flex-direction: column; + + + @media (max-width: 900px) { + overflow-x: hidden; + } `; const Header = styled.div` @@ -76,6 +83,11 @@ const Header = styled.div` border: 1px solid #000; border-radius: 10px; background-color: rgba(255, 255, 255, 0.05); + + @media (max-width: 900px) { + display: none; + } + `; const KeyElement = styled.div` @@ -87,16 +99,6 @@ const KeyElement = styled.div` color: white; `; -const Row = styled.div<{ isLast: boolean }>` - display: flex; - justify-content: space-between; - - border-bottom: ${(props) => (props.isLast ? 'none' : '1px solid #ccc')}; - - &:last-child { - border-bottom: none; - } -`; const FrameContainer = styled.div` width: 100%; @@ -114,6 +116,12 @@ const Frame = styled.div` margin-right: auto; background: url(${settlementsFrame}); + + @media (max-width: 900px) { + background: none; + background-color: white; + height: 100%; + } `; const DataElement = styled.div` @@ -127,5 +135,55 @@ const DataElement = styled.div` overflow: hidden; white-space: nowrap; text-overflow: ellipsis; + + @media (max-width: 900px) { + white-space: none; + width: 100%; + height: 100%; + padding: 5px 0px; + display: flex; + } +`; + +const MobileDataElement = styled.span` + display: flex; + margin-left: auto; + @media (min-width: 900px) { + display: none; +} +`; + +const MobileData = styled.span` +width: 55%; +padding-left: 10%; +display: flex; +@media (min-width: 900px) { + display: none; +} +`; + +const WebData = styled.span` +@media (max-width: 900px) { + display: none; +} +`; + +const Row = styled.div<{ isLast: boolean }>` + display: flex; + justify-content: space-between; + + border-bottom: ${(props) => (props.isLast ? 'none' : '1px solid #ccc')}; + + &:last-child { + border-bottom: none; + } + + @media (max-width: 900px) { + display: flex; + flex-direction: column; + flex-wrap: wrap; + text-overflow: ellipsis; + + } `; diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx index 76917546..9c61cbf8 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx @@ -145,6 +145,8 @@ export default Settlemented; const Container = styled.nav` margin-right: 43px; margin-left: 43px; + + `; const SettlementedHeader = styled.div` diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx index e1ccba73..fab868fd 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx @@ -64,6 +64,10 @@ export default SettlementsHeader; const Container = styled.nav` margin-left: 43px; margin-top: 96px; + + @media (max-width: 900px) { + display: none; + } `; const Header = styled.nav` diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx index 5a0d6a8e..0da56ec3 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx @@ -76,7 +76,7 @@ export default SettlementsSetting; const Container = styled.div` width: 100%; - min-width: 1110px; + // min-width: 1110px; height: 100%; `; diff --git a/src/components/Settlements/SettlementsLeft/index.tsx b/src/components/Settlements/SettlementsLeft/index.tsx index edb45504..4b6f9d7c 100644 --- a/src/components/Settlements/SettlementsLeft/index.tsx +++ b/src/components/Settlements/SettlementsLeft/index.tsx @@ -18,4 +18,9 @@ const Container = styled.div` height: 100%; background: linear-gradient(45deg, rgba(17, 31, 63, 1), rgba(26, 40, 73, 0.75)); + + @media (max-width: 900px) { + width: 100%; + min-width: 0; + } `; \ No newline at end of file diff --git a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx index d3d7f8eb..22fc3732 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx @@ -203,4 +203,8 @@ const ReceiptIcon = styled.img` margin-top: 40px; margin-left: auto; + + @media (max-width: 900px) { + display: none; + } `; \ No newline at end of file diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index 2a1debd7..958a0286 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -7,14 +7,14 @@ import settlementsLogo from '@assets/icons/settlements-logo.svg'; const SettlementsRight = () => { return ( - - -
- - - - - + + +
+ + + + + ) } @@ -30,6 +30,12 @@ const Container = styled.div` background-color: #1A2849; border-top-right-radius: 1.25rem; border-bottom-right-radius: 1.25rem; + + @media (max-width: 900px) { + width: 100%; + min-width: 0; + border-radius: 0; + } `; const InnerContainer = styled.div` @@ -50,9 +56,15 @@ const InnerContainer = styled.div` box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } + + @media (max-width: 900px) { + display: flex; + flex-direction: row; + align-items: center; + } `; -const StyledSettlementsBefore = styled.div` +const StyledSettlementsBefore = styled.div` position: relative; z-index: 1; `; @@ -67,4 +79,12 @@ const Logo = styled.div` right: 0; background: url(${settlementsLogo}); + + @media (max-width: 900px) { + position: static; + width: 100%; + max-width: 165px; + height: auto; + margin-top: 20px; /* Adjust the margin as needed */ + } `; diff --git a/src/pages/Settlements/index.tsx b/src/pages/Settlements/index.tsx index c4811a09..355811b1 100644 --- a/src/pages/Settlements/index.tsx +++ b/src/pages/Settlements/index.tsx @@ -8,15 +8,17 @@ const Settlements = () => { - ) -} + ); +}; export default Settlements; const Container = styled.div` width: 100%; - display: flex; - border-radius: 1.25rem; + + @media (max-width: 900px) { + flex-direction: column-reverse; + } `; From 5d4254863d5812684b6a0a0d4385e050afc0a9f0 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sat, 20 Jan 2024 16:26:16 +0900 Subject: [PATCH 37/54] =?UTF-8?q?design:=20=EC=A0=95=EC=82=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=AF=B8=EB=94=94=EC=96=B4=EC=BF=BC?= =?UTF-8?q?=EB=A6=AC=20=EC=82=AC=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsRight/SettlementsExpected/index.tsx | 4 ++++ src/components/Settlements/SettlementsRight/index.tsx | 8 ++++++++ 2 files changed, 12 insertions(+) diff --git a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx index bc765cd2..0f32e6db 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx @@ -83,6 +83,10 @@ const Container = styled.div` margin: 15px; display: flex; + + @media (max-width: 900px) { + width: 50%; + } `; const InnerContainer = styled.div` diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index 958a0286..2919fec4 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -55,6 +55,10 @@ const InnerContainer = styled.div` border: 1px solid rgba(217, 217, 217, 0.2); box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); + + @media (max-width: 900px) { + display: none; + } } @media (max-width: 900px) { @@ -67,6 +71,10 @@ const InnerContainer = styled.div` const StyledSettlementsBefore = styled.div` position: relative; z-index: 1; + + @media (max-width: 900px) { + width: 50%: + } `; const Logo = styled.div` From de67abd74e8fae58e7f2fff7007cdc23d587a9c2 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sat, 20 Jan 2024 17:44:55 +0900 Subject: [PATCH 38/54] =?UTF-8?q?design:=20=EC=A0=95=EC=82=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EB=B0=94=EC=9D=BC=EB=B2=84?= =?UTF-8?q?=EC=A0=84=20=EB=B0=B1=EA=B7=B8=EB=9D=BC=EC=9A=B4=EB=93=9C=20?= =?UTF-8?q?=EC=BB=AC=EB=9F=AC=20=EB=B0=8F=20z-index=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsLeft/SettlementsSetting/index.tsx | 6 ++++++ src/components/Settlements/SettlementsLeft/index.tsx | 1 + .../SettlementsRight/SettlementsExpected/index.tsx | 2 -- src/components/Settlements/SettlementsRight/index.tsx | 11 ++++++++--- 4 files changed, 15 insertions(+), 5 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx index 0da56ec3..ef7aad3f 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx @@ -82,6 +82,12 @@ const Container = styled.div` const BreakLine = styled.div` margin: 0 40px; + + hr { + @media (max-width: 900px) { + display: none; + } + } `; const CalendarContainer = styled.nav` diff --git a/src/components/Settlements/SettlementsLeft/index.tsx b/src/components/Settlements/SettlementsLeft/index.tsx index 4b6f9d7c..3b9d1ea5 100644 --- a/src/components/Settlements/SettlementsLeft/index.tsx +++ b/src/components/Settlements/SettlementsLeft/index.tsx @@ -22,5 +22,6 @@ const Container = styled.div` @media (max-width: 900px) { width: 100%; min-width: 0; + background: #1A2849; } `; \ No newline at end of file diff --git a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx index 0f32e6db..c8d54f04 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx @@ -80,8 +80,6 @@ const SettlementsExpected = () => { export default SettlementsExpected; const Container = styled.div` - margin: 15px; - display: flex; @media (max-width: 900px) { diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index 2919fec4..3f93bbcb 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -42,7 +42,7 @@ const InnerContainer = styled.div` height: 100%; position: relative; - z-index: 999; + z-index: 10; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.1); @@ -62,9 +62,14 @@ const InnerContainer = styled.div` } @media (max-width: 900px) { + margin: 0px 43px; display: flex; flex-direction: row; align-items: center; + background-color: transparent; + border: none; + backdrop-filter: none; + box-shadow: none; } `; @@ -73,7 +78,7 @@ const StyledSettlementsBefore = styled.div` z-index: 1; @media (max-width: 900px) { - width: 50%: + width: 50%; } `; @@ -93,6 +98,6 @@ const Logo = styled.div` width: 100%; max-width: 165px; height: auto; - margin-top: 20px; /* Adjust the margin as needed */ + margin-top: 20px; } `; From 7e937531003a7bb0641fb5c7bb4e11de98a81449 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sat, 20 Jan 2024 20:42:45 +0900 Subject: [PATCH 39/54] =?UTF-8?q?design:=20=EC=A0=95=EC=82=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20RightSection=20=EB=AF=B8=EB=94=94=EC=96=B4?= =?UTF-8?q?=EC=BF=BC=EB=A6=AC=EB=A5=BC=20=EC=82=AC=EC=9A=A9=ED=95=B4=20?= =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B2=84=EC=A0=84=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsSetting/index.tsx | 33 ++++++++- .../SettlementsBefore/index.tsx | 68 +++++++++++++++++-- .../SettlementsExpected/index.tsx | 34 +++++++++- .../Settlements/SettlementsRight/index.tsx | 19 +++++- 4 files changed, 143 insertions(+), 11 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx index ef7aad3f..bfdc702d 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx @@ -44,10 +44,13 @@ const SettlementsSetting = () => { + ๊ธฐ๊ฐ„ ์„ค์ • + + { placeholderText="" /> ์กฐํšŒํ•˜๊ธฐ +
@@ -76,7 +80,6 @@ export default SettlementsSetting; const Container = styled.div` width: 100%; - // min-width: 1110px; height: 100%; `; @@ -96,6 +99,21 @@ const CalendarContainer = styled.nav` display: flex; justify-content: flex-end; align-items: center; + + @media (max-width: 900px) { + display: flex; + flex-direction: column; + justify-content: center; + } +`; + +const CalendarInnerContainer = styled.div` + display: flex; + + @media (max-width: 900px) { + margin-right: auto; + margin-left: 43px; + } `; const Calendar = styled.img` @@ -111,6 +129,9 @@ const StyledDatePicker = styled(DatePicker)` padding: 5px; margin-right: 10px; width: 100px; + + @media (max-width: 900px) { + } `; const CalendarText = styled.div` @@ -119,6 +140,8 @@ const CalendarText = styled.div` color: white; margin-right: 10px; + margin-top: auto; + margin-bottom: auto; `; const StyledButton = styled.button` @@ -137,4 +160,12 @@ const StyledButton = styled.button` &:hover { opacity: 1; } +`; + +const StyledDatePickerContainer = styled.div` + display: flex; + + @media (max-width: 900px) { + margin-left: auto; + } `; \ No newline at end of file diff --git a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx index 22fc3732..0cfe9bbe 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx @@ -23,9 +23,12 @@ const SettlementsBefore = () => { + + {`${currentDate.getMonth() + 1}์›”`} - {`${currentDate.getMonth() + 1}์›” ์ •์‚ฐ ๊ธˆ์•ก`} + ์ •์‚ฐ ๊ธˆ์•ก + { export default SettlementsBefore; const Container = styled.div` - margin: 15px; + margin: 0px 15px; display: flex; flex-direction: column; + + @media (max-width: 900px) { + margin-left: 15px; + margin-right: 0px; + margin-top: 4px; + } + + @media (max-width: 478px) { + margin-top: 18px; + } `; const InnerContainer = styled.div` @@ -94,12 +107,32 @@ const InnerContainer = styled.div` const ExpectedContainer = styled.div` margin-top: 30px; + + @media (max-width: 900px) { + margin: 0px; + } `; -const ExpectedText = styled.div` - font-size: 18px; +const SettlementedMonth = styled.p` + font-size: 22px; font-weight: bold; color: white; + + & > span { + font-size: 18px; + } + + @media (max-width: 478px) { + font-size: 17px; + + & > span { + font-size: 14px; + } + } +`; + +const ExpectedText = styled.span` + margin-left: 5px; `; const CommonContainer = styled.div` @@ -117,6 +150,10 @@ const UpdatedText = styled.div` font-size: 11px; font-weight: normal; color: #CDCFD0; + + @media (max-width: 478px) { + font-size: 7px; + } `; const UpdatedContainer = styled.div` @@ -150,6 +187,10 @@ const DueDateText = styled.div` font-size: 14px; font-weight: bold; color: black; + + @media (max-width: 478px) { + font-size: 8px; + } `; const DueDateInnerContainer = styled.div` @@ -166,6 +207,11 @@ const DueDateDay = styled.div` font-size: 12px; font-weight: regular; color: black; + + @media (max-width: 478px) { + width: 40%; + font-size: 7px; + } `; const DueDateMoney = styled.div` @@ -175,10 +221,14 @@ const DueDateMoney = styled.div` font-size: 16px; font-weight: bold; + + @media (max-width: 478px) { + font-size: 10px; + } `; const MoneyContainer = styled.div` - margin: 20px 15px; + margin: 15px; `; const MoneyText = styled.div` @@ -187,11 +237,19 @@ const MoneyText = styled.div` font-size: 14px; font-weight: bold; color: white; + + @media (max-width: 478px) { + font-size: 10px; + } `; const MoneyDay = styled.div` font-size: 12px; color: white; + + @media (max-width: 478px) { + font-size: 9px; + } `; const Icon = styled.img` diff --git a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx index c8d54f04..695fc099 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx @@ -81,9 +81,11 @@ export default SettlementsExpected; const Container = styled.div` display: flex; + margin: 150px 15px 30px 15px; + align-items: center; @media (max-width: 900px) { - width: 50%; + margin: 0px; } `; @@ -92,12 +94,10 @@ const InnerContainer = styled.div` `; const ExpectedContainer = styled.div` - margin-top: 96px; `; const TextContainer = styled.div` display: flex; - // white-space: nowrap; `; const ExpectedMonth = styled.p` @@ -108,6 +108,14 @@ const ExpectedMonth = styled.p` & > span { font-size: 18px; } + + @media (max-width: 478px) { + font-size: 17px; + + & > span { + font-size: 14px; + } + } `; const ExpectedText = styled.span` @@ -129,6 +137,10 @@ const UpdatedText = styled.div` font-size: 11px; font-weight: normal; color: #CDCFD0; + + @media (max-width: 478px) { + font-size: 7px; + } `; const UpdatedContainer = styled.div` @@ -162,6 +174,10 @@ const DueDateText = styled.div` font-size: 14px; font-weight: bold; color: black; + + @media (max-width: 478px) { + font-size: 8px; + } `; const DueDateDay = styled.div` @@ -173,6 +189,10 @@ const DueDateDay = styled.div` font-size: 16px; font-weight: bold; color: #3182F6; + + @media (max-width: 478px) { + font-size: 10px; + } `; const WrapperBottom = styled.div` @@ -192,11 +212,19 @@ const CouponText = styled.div` font-size: 14px; font-weight: bold; color: white; + + @media (max-width: 478px) { + font-size: 10px; + } `; const CouponDay = styled.div` font-size: 12px; color: white; + + @media (max-width: 478px) { + font-size: 9px; + } `; const Icon = styled.img` diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index 3f93bbcb..829ded51 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -8,7 +8,9 @@ const SettlementsRight = () => { return ( + +
@@ -41,6 +43,10 @@ const Container = styled.div` const InnerContainer = styled.div` height: 100%; + flex-direction: column; + align-items: center; + justify-content: center; + position: relative; z-index: 10; @@ -50,7 +56,7 @@ const InnerContainer = styled.div` box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.2); hr { - margin: 30px 15px; + margin: 0px 15px; border: 1px solid rgba(217, 217, 217, 0.2); @@ -62,7 +68,7 @@ const InnerContainer = styled.div` } @media (max-width: 900px) { - margin: 0px 43px; + margin: 20px 43px; display: flex; flex-direction: row; align-items: center; @@ -73,12 +79,21 @@ const InnerContainer = styled.div` } `; +const StyledSettlementsExpected = styled.div` + height: 50%; + + @media (max-width: 900px) { + width: 50%; + height: 300px; + } +`; const StyledSettlementsBefore = styled.div` position: relative; z-index: 1; @media (max-width: 900px) { width: 50%; + height: 300px; } `; From c7f70777be985e8bb45907c2826b8975a5753f22 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sat, 20 Jan 2024 21:28:14 +0900 Subject: [PATCH 40/54] =?UTF-8?q?design:=20=EC=A0=95=EC=82=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20LeftSection=20=EB=AF=B8=EB=94=94=EC=96=B4?= =?UTF-8?q?=EC=BF=BC=EB=A6=AC=EB=A5=BC=20=EC=82=AC=EC=9A=A9=ED=95=B4=20?= =?UTF-8?q?=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B2=84=EC=A0=84=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsSetting/Settlemented/index.tsx | 19 ++++++++++++++++--- .../SettlementsSetting/index.tsx | 19 +++++++++++++++---- .../SettlementsBefore/index.tsx | 4 ---- .../Settlements/SettlementsRight/index.tsx | 2 +- 4 files changed, 32 insertions(+), 12 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx index 9c61cbf8..cd8cc7f9 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx @@ -146,7 +146,10 @@ const Container = styled.nav` margin-right: 43px; margin-left: 43px; - + @media (max-width: 900px) { + margin-left: 20px; + margin-right: 20px; + } `; const SettlementedHeader = styled.div` @@ -159,9 +162,11 @@ const SettlementedHeader = styled.div` `; const TotalData = styled.div` + margin-top: auto; + margin-bottom: auto; + font-size: 14px; font-weight: bold; - color: white; `; @@ -171,12 +176,20 @@ const OptionContainer = styled.div` `; const StyledDropdown = styled(Dropdown)` + @media (max-width: 900px) { + border: none; + } + &.ui.dropdown { min-width: 160px; backdrop-filter: blur(50px); border-radius: 14px; font-color: white !important; background-color: rgba(255, 255, 255, 0.1); + + @media (max-width: 900px) { + } + .text { color: white; font-size: 11px; @@ -195,6 +208,7 @@ const StyledDropdown = styled(Dropdown)` border: 1px solid rgba(255, 255, 255, 0.2) !important; border-radius: 0px 0px 5px 5px; margin-bottom: 2px; + .item { white-space: nowrap; border-bottom: none !important; @@ -205,7 +219,6 @@ const StyledDropdown = styled(Dropdown)` &.ui.selection.dropdown { min-height: 20px; - // max-height: 30px; } &.ui.selection.active.dropdown { diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx index bfdc702d..395d8251 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx @@ -94,13 +94,13 @@ const BreakLine = styled.div` `; const CalendarContainer = styled.nav` - margin-right: 43px; - display: flex; justify-content: flex-end; align-items: center; @media (max-width: 900px) { + margin: 10px 20px; + display: flex; flex-direction: column; justify-content: center; @@ -111,8 +111,7 @@ const CalendarInnerContainer = styled.div` display: flex; @media (max-width: 900px) { - margin-right: auto; - margin-left: 43px; + width: 100%; } `; @@ -160,12 +159,24 @@ const StyledButton = styled.button` &:hover { opacity: 1; } + + @media (max-width: 900px) { + margin-left: auto; + } `; const StyledDatePickerContainer = styled.div` + margin-top: 15px; + margin-right: 43px; + display: flex; @media (max-width: 900px) { margin-left: auto; + margin-right: 0px; + } + + @media (max-width: 500px) { + width: 100%; } `; \ No newline at end of file diff --git a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx index 0cfe9bbe..50bf0ac9 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx @@ -95,10 +95,6 @@ const Container = styled.div` margin-right: 0px; margin-top: 4px; } - - @media (max-width: 478px) { - margin-top: 18px; - } `; const InnerContainer = styled.div` diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index 829ded51..5d929b14 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -68,7 +68,7 @@ const InnerContainer = styled.div` } @media (max-width: 900px) { - margin: 20px 43px; + margin: 20px; display: flex; flex-direction: row; align-items: center; From 2c55422e34a78cfe88c93ea95971c4eae6c6c88c Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sat, 20 Jan 2024 21:33:05 +0900 Subject: [PATCH 41/54] =?UTF-8?q?design:=20=EC=A0=95=EC=82=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20SettlementsExpected=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20height=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Settlements/SettlementsRight/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Settlements/SettlementsRight/index.tsx b/src/components/Settlements/SettlementsRight/index.tsx index 5d929b14..f2e3fd62 100644 --- a/src/components/Settlements/SettlementsRight/index.tsx +++ b/src/components/Settlements/SettlementsRight/index.tsx @@ -80,8 +80,6 @@ const InnerContainer = styled.div` `; const StyledSettlementsExpected = styled.div` - height: 50%; - @media (max-width: 900px) { width: 50%; height: 300px; From c7dbff18deda5e692b91a0787c897452ee7146eb Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sat, 20 Jan 2024 21:41:44 +0900 Subject: [PATCH 42/54] =?UTF-8?q?modify:=20=EC=BB=A8=EB=B2=A4=EC=85=98=20?= =?UTF-8?q?=EA=B7=9C=EC=B9=99=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=ED=8C=8C?= =?UTF-8?q?=EC=9D=BC=20=EA=B2=BD=EB=A1=9C=20=EC=88=98=EC=A0=95=20=EB=B0=8F?= =?UTF-8?q?=20=ED=83=80=EC=9E=85=20=EC=84=A0=EC=96=B8=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsPagination/index.tsx | 6 +-- .../Settlemented/SettlementsTable/index.tsx | 4 +- .../SettlementsHeader/index.tsx | 52 ++++++++++--------- src/routes/MainRouter/index.tsx | 9 +--- 4 files changed, 33 insertions(+), 38 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx index 7f90f9fd..c2f5ca70 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx @@ -2,11 +2,7 @@ import React, { useEffect } from 'react'; import ReactPaginate from 'react-paginate'; import styled from '@emotion/styled'; -interface SettlementsPaginationProps { - currentPage: number; - totalPages: number; - onPageChange: (page: number) => void; -} +import { SettlementsPaginationProps } from '@/types/settlements'; const SettlementsPagination: React.FC = ({ currentPage, diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx index 0cac133f..c218a4dd 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx @@ -1,9 +1,9 @@ import styled from '@emotion/styled'; -import { SettlementItem } from '../../../../../../types/settlements'; +import { SettlementItem, SettlementsTableProps } from '@/types/settlements'; import settlementsFrame from '@assets/icons/settlements-data-frame.svg'; -const SettlementsTable = ({ data, pageStartNumber }: { data: SettlementItem[], pageStartNumber: number }) => { +const SettlementsTable = ({ data, pageStartNumber }: SettlementsTableProps) => { const keys: (keyof SettlementItem)[] = [ 'NO', diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx index fab868fd..448b8291 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx @@ -62,45 +62,45 @@ const SettlementsHeader = () => { export default SettlementsHeader; const Container = styled.nav` - margin-left: 43px; - margin-top: 96px; + margin-left: 43px; + margin-top: 96px; - @media (max-width: 900px) { - display: none; - } + @media (max-width: 900px) { + display: none; + } `; const Header = styled.nav` - margin-bottom: 30px; + margin-bottom: 30px; - display: flex; + display: flex; - align-items: center; + align-items: center; `; const SettlementsAdminIcon = styled.img` - width: 44px; - height: 34.57px; + width: 44px; + height: 34.57px; - margin-right: 10px; + margin-right: 10px; `; const HeaderText = styled.div` - font-size: 32px; - font-weight: bold; - color: white; + font-size: 32px; + font-weight: bold; + color: white; `; const Middle = styled.div` - display: flex; - align-items: center; + display: flex; + align-items: center; `; const MiddleText = styled.div` - margin-right: 5px; + margin-right: 5px; - font-size: 18px; - color: white; + font-size: 18px; + color: white; `; const InformationContainer = styled.div` @@ -109,20 +109,21 @@ const InformationContainer = styled.div` `; const InformationIcon = styled.img` - margin-bottom: 5px; + margin-bottom: 5px; `; const PopupContainer = styled.div` position: fixed; top: 53%; left: 48%; - transform: translate(-50%, -50%); - background-color: white; + padding: 20px; border-radius: 6px; + + transform: translate(-50%, -50%); + background-color: white; box-shadow: 0px 2px 64px rgba(0, 0, 0, 0.1); z-index: 999; - `; const PopupHeader = styled.div` @@ -171,11 +172,14 @@ const PopupContentHeader = styled.div` const PopupContentMiddle = styled.div` margin-top: 20px; + p { - font-size: 14px; margin-bottom: 10px; + + font-size: 14px; font-weight: normal; } + strong { font-weight: 900; } diff --git a/src/routes/MainRouter/index.tsx b/src/routes/MainRouter/index.tsx index 66c79e8a..e1e06b3e 100644 --- a/src/routes/MainRouter/index.tsx +++ b/src/routes/MainRouter/index.tsx @@ -8,8 +8,7 @@ import Dashboard from '@pages/Dashboard'; import Report from '@pages/Report'; import CouponList from '@pages/CouponList'; import Register from '@pages/Register'; - -import Settlements from '../../pages/Settlements' +import Settlements from '@pages/Settlements'; const MainRouter = () => { return ( @@ -37,11 +36,7 @@ const MainRouter = () => { /> - - - } + element={} /> Date: Sat, 20 Jan 2024 21:56:12 +0900 Subject: [PATCH 43/54] =?UTF-8?q?feat:=20SettlementsPopup=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=B6=84=EB=A6=AC=20=EB=B0=8F=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=20=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsPopup/index.tsx | 111 ++++++++++++++++++ .../SettlementsHeader/index.tsx | 102 +--------------- src/types/settlements.ts | 13 ++ 3 files changed, 128 insertions(+), 98 deletions(-) create mode 100644 src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/SettlementsPopup/index.tsx diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/SettlementsPopup/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/SettlementsPopup/index.tsx new file mode 100644 index 00000000..f0ef669e --- /dev/null +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/SettlementsPopup/index.tsx @@ -0,0 +1,111 @@ +import styled from '@emotion/styled'; + +import { SettlementsPopupProps } from '@/types/settlements'; + +const SettlementsPopup: React.FC = ({ isOpen, onClose }) => { + return ( + + + ์ •์‚ฐ๋‚ด์—ญ ์•ˆ๋‚ด + X + + + +

์ฟ ํฐ ๋ฒˆํ˜ธ๋Š” ์ฟ ํฐ์„ ๋“ฑ๋กํ•˜๋ฉด ์ž๋™์œผ๋กœ ๋ฐœํ–‰๋˜๋Š” ๊ด€๋ฆฌ๋ชฉ์ ์˜ ๋ฒˆํ˜ธ์ž…๋‹ˆ๋‹ค.

+

๊ด€๋ฆฌ ์ฟ ํฐ๋ช…์€ ์‚ฌ์žฅ๋‹˜๊ป˜์„œ ์ง์ ‘ ์„ค์ •ํ•œ ์ฟ ํฐ๋ช…์ž…๋‹ˆ๋‹ค.

+

์‚ฌ์šฉ ๊ฑด์ˆ˜๋Š” ์ฟ ํฐ ์ ์šฉ์ผ์— ๊ณ ๊ฐ๋“ค์ด ์ฟ ํฐ์„ ์‚ฌ์šฉํ•œ ๊ฑด ์ˆ˜์ž…๋‹ˆ๋‹ค.

+

๊ตฌํฐ ์ ์šฉ์ผ์€ ์‚ฌ์šฉ์ž๊ฐ€ ์ฟ ํฐ์„ ์ ์šฉํ•˜์—ฌ ๊ฒฐ์ œ(์˜ˆ์•ฝ)๋ฅผ ํ•œ ๋‚ ์ž…๋‹ˆ๋‹ค.

+

์ •์‚ฐ ์™„๋ฃŒ์ผ์€ ์ •์‚ฐ์ด ์™„๋ฃŒ๋œ ๋‚ ๋กœ ๋งค์›” 10์ผ (์˜์—…์ผ ๊ธฐ์ค€)์ž…๋‹ˆ๋‹ค.

+ + +

[์ •์‚ฐ ๊ธˆ์•ก ๊ด€๋ จ]

+

์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก์€ ์ฟ ํฐ ์ ์šฉ์ผ์— ์‚ฌ์šฉ๋œ ๋ชจ๋“  ์ฟ ํฐ ๊ธˆ์•ก์˜ ํ•ฉ๊ณ„์ž…๋‹ˆ๋‹ค.

+

์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก์€ ํ™˜๋ถˆ/์ทจ์†Œ๋ฅผ ํ†ตํ•ด ์ฟ ํฐ ์‚ฌ์šฉ์ด ์ทจ์†Œ๋œ ๊ธˆ์•ก(- ํ‘œ๊ธฐ)์ž…๋‹ˆ๋‹ค.

+

์ •์‚ฐ ๊ธˆ์•ก์€ โ€œ์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก + ์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•กโ€ ์ž…๋‹ˆ๋‹ค.

+ + + + ); +}; + +const PopupContainer = styled.div<{ isOpen: boolean }>` + display: ${({ isOpen }) => (isOpen ? 'block' : 'none')}; + position: fixed; + top: 50%; + left: 50%; + + padding: 20px; + border-radius: 6px; + + transform: translate(-50%, -50%); + background-color: white; + box-shadow: 0px 2px 64px rgba(0, 0, 0, 0.1); + + z-index: 999; +`; + +const PopupHeader = styled.div` + display: flex; + flex-direction: row; + + text-align: center; + align-items: center; + justify-content: space-between; +`; + +const PopupTitle = styled.h2` + font-size: 20px; + font-weight: 900; +`; + +const PopupCloseButton = styled.button` + background: none; + border: none; + + font-size: 20px; + font-weight: bold; + cursor: pointer; +`; + +const PopupContentHeader = styled.div` + margin-top: 30px; + + p { + margin-bottom: 10px; + + font-size: 14px; + font-weight: normal; + } + + strong { + font-weight: 900; + } +`; + +const PopupContentMiddle = styled.div` + margin-top: 20px; + + p { + margin-bottom: 10px; + + font-size: 14px; + font-weight: normal; + } + + strong { + font-weight: 900; + } +`; + + +const PopupContent = styled.div` + margin-top: 10px; + + line-height: 1.5; + + p { + margin-bottom: 10px; + } +`; + +export default SettlementsPopup; diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx index 448b8291..e609a6af 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx @@ -2,7 +2,8 @@ import styled from '@emotion/styled'; import { useState } from 'react'; import settlementsAdminIcon from '@assets/icons/settlements-admin.svg'; -import informationIcon from '@assets/icons/information-circle-outline.svg' +import informationIcon from '@assets/icons/information-circle-outline.svg'; +import SettlementsPopup from './SettlementsPopup'; const SettlementsHeader = () => { const [isPopupOpen, setIsPopupOpen] = useState(false) @@ -30,29 +31,7 @@ const SettlementsHeader = () => { src={informationIcon} alt="์ •๋ณด" onClick={handlePopupToggle} /> - {isPopupOpen && ( - - - ์ •์‚ฐ๋‚ด์—ญ ์•ˆ๋‚ด - X - - - -

์ฟ ํฐ ๋ฒˆํ˜ธ๋Š” ์ฟ ํฐ์„ ๋“ฑ๋กํ•˜๋ฉด ์ž๋™์œผ๋กœ ๋ฐœํ–‰๋˜๋Š” ๊ด€๋ฆฌ๋ชฉ์ ์˜ ๋ฒˆํ˜ธ์ž…๋‹ˆ๋‹ค.

-

๊ด€๋ฆฌ ์ฟ ํฐ๋ช…์€ ์‚ฌ์žฅ๋‹˜๊ป˜์„œ ์ง์ ‘ ์„ค์ •ํ•œ ์ฟ ํฐ๋ช…์ž…๋‹ˆ๋‹ค.

-

์‚ฌ์šฉ ๊ฑด์ˆ˜๋Š” ์ฟ ํฐ ์ ์šฉ์ผ์— ๊ณ ๊ฐ๋“ค์ด ์ฟ ํฐ์„ ์‚ฌ์šฉํ•œ ๊ฑด ์ˆ˜์ž…๋‹ˆ๋‹ค.

-

๊ตฌํฐ ์ ์šฉ์ผ์€ ์‚ฌ์šฉ์ž๊ฐ€ ์ฟ ํฐ์„ ์ ์šฉํ•˜์—ฌ ๊ฒฐ์ œ(์˜ˆ์•ฝ)๋ฅผ ํ•œ ๋‚ ์ž…๋‹ˆ๋‹ค.

-

์ •์‚ฐ ์™„๋ฃŒ์ผ์€ ์ •์‚ฐ์ด ์™„๋ฃŒ๋œ ๋‚ ๋กœ ๋งค์›” 10์ผ (์˜์—…์ผ ๊ธฐ์ค€)์ž…๋‹ˆ๋‹ค.

- - -

[์ •์‚ฐ ๊ธˆ์•ก ๊ด€๋ จ]

-

์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก์€ ์ฟ ํฐ ์ ์šฉ์ผ์— ์‚ฌ์šฉ๋œ ๋ชจ๋“  ์ฟ ํฐ ๊ธˆ์•ก์˜ ํ•ฉ๊ณ„์ž…๋‹ˆ๋‹ค.

-

์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก์€ ํ™˜๋ถˆ/์ทจ์†Œ๋ฅผ ํ†ตํ•ด ์ฟ ํฐ ์‚ฌ์šฉ์ด ์ทจ์†Œ๋œ ๊ธˆ์•ก(- ํ‘œ๊ธฐ)์ž…๋‹ˆ๋‹ค.

-

์ •์‚ฐ ๊ธˆ์•ก์€ โ€œ์ฟ ํฐ ํ• ์ธ ๊ธˆ์•ก + ์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•กโ€ ์ž…๋‹ˆ๋‹ค.

- - - - )} + @@ -110,77 +89,4 @@ const InformationContainer = styled.div` const InformationIcon = styled.img` margin-bottom: 5px; -`; - -const PopupContainer = styled.div` - position: fixed; - top: 53%; - left: 48%; - - padding: 20px; - border-radius: 6px; - - transform: translate(-50%, -50%); - background-color: white; - box-shadow: 0px 2px 64px rgba(0, 0, 0, 0.1); - z-index: 999; -`; - -const PopupHeader = styled.div` - display: flex; - flex-direction: row; - - text-align: center; - align-items: center; - justify-content: space-between; -`; - -const PopupTitle = styled.h2` - font-size: 20px; - font-weight: 900; -`; - -const PopupCloseButton = styled.button` - background: none; - border: none; - font-size: 20px; - font-weight: bold; - cursor: pointer; -`; - -const PopupContent = styled.div` - margin-top: 10px; - line-height: 1.5; - - p { - margin-bottom: 10px; - } -`; - -const PopupContentHeader = styled.div` - margin-top: 30px; - p { - margin-bottom: 10px; - - font-size: 14px; - font-weight: normal; - } - strong { - font-weight: 900; - } -`; - -const PopupContentMiddle = styled.div` - margin-top: 20px; - - p { - margin-bottom: 10px; - - font-size: 14px; - font-weight: normal; - } - - strong { - font-weight: 900; - } -`; +`; \ No newline at end of file diff --git a/src/types/settlements.ts b/src/types/settlements.ts index 7c76de59..59da4c4e 100644 --- a/src/types/settlements.ts +++ b/src/types/settlements.ts @@ -8,4 +8,17 @@ export interface SettlementItem { '์ฟ ํฐ ์ทจ์†Œ ๊ธˆ์•ก': string; '์ •์‚ฐ ๊ธˆ์•ก': string; '์ •์‚ฐ ์™„๋ฃŒ์ผ': string; +}; + +export type SettlementsTableProps = { data: SettlementItem[], pageStartNumber: number }; + +export interface SettlementsPaginationProps { + currentPage: number; + totalPages: number; + onPageChange: (page: number) => void; +}; + +export interface SettlementsPopupProps { + isOpen: boolean; + onClose: () => void; }; \ No newline at end of file From 1b9ecafa9cce8e44fbb0ae2145c41977d9b11a58 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sat, 20 Jan 2024 21:57:16 +0900 Subject: [PATCH 44/54] =?UTF-8?q?design:=20informainIcon=20pointer=20?= =?UTF-8?q?=EC=A7=80=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsSetting/SettlementsHeader/index.tsx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx index e609a6af..186d8849 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx @@ -89,4 +89,6 @@ const InformationContainer = styled.div` const InformationIcon = styled.img` margin-bottom: 5px; + + cursor: pointer; `; \ No newline at end of file From 31db78dd22926355038e6dd6fab038a562ac2067 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sat, 20 Jan 2024 21:58:42 +0900 Subject: [PATCH 45/54] =?UTF-8?q?remove:=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=BD=98=EC=86=94=20=EC=BD=94=EB=93=9C=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Settlements/SettlementsLeft/SettlementsSetting/index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx index 395d8251..64735314 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx @@ -33,10 +33,8 @@ const SettlementsSetting = () => { }; const handleButtonClick = () => { - console.log('์กฐํšŒํ•˜๊ธฐ ๋ฒ„ํŠผ์ด ํด๋ฆญ๋˜์—ˆ์Šต๋‹ˆ๋‹ค.'); if (startDate && endDate) { setSettlementsDate({ startDate, endDate }); - console.log(settlementsDateState); } }; From 1b6877db0d04b2d7a991628b55ec2a8498542803 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sun, 21 Jan 2024 03:08:59 +0900 Subject: [PATCH 46/54] =?UTF-8?q?design:=20=EC=A0=95=EC=82=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EB=B0=94=EC=9D=BC=20=EB=B2=84?= =?UTF-8?q?=EC=A0=84=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=ED=81=AC=EA=B8=B0=20?= =?UTF-8?q?=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Settlemented/SettlementsTable/index.tsx | 39 +++++++++++++------ .../SettlementsBefore/index.tsx | 24 +++++++++--- .../SettlementsExpected/index.tsx | 8 ++-- 3 files changed, 49 insertions(+), 22 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx index c218a4dd..d3a3b794 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx @@ -47,7 +47,7 @@ const SettlementsTable = ({ data, pageStartNumber }: SettlementsTableProps) => { {keys.map((key) => ( - {key}: + {key} {key === 'NO' ? pageStartNumber - index : row[key]} {key === 'NO' ? pageStartNumber - index : row[key]} @@ -137,29 +137,43 @@ const DataElement = styled.div` text-overflow: ellipsis; @media (max-width: 900px) { - white-space: none; + padding: 5px 0px; + width: 100%; height: 100%; - padding: 5px 0px; + display: flex; + + white-space: none; + } + + @media (max-width: 500px) { + font-size: 12px; } `; const MobileDataElement = styled.span` - display: flex; margin-left: auto; + + display: flex; + + font-weight: 700; + @media (min-width: 900px) { display: none; -} + } `; const MobileData = styled.span` -width: 55%; -padding-left: 10%; -display: flex; -@media (min-width: 900px) { - display: none; -} + padding-left: 10%; + + width: 55%; + + display: flex; + + @media (min-width: 900px) { + display: none; + } `; const WebData = styled.span` @@ -179,11 +193,12 @@ const Row = styled.div<{ isLast: boolean }>` } @media (max-width: 900px) { + padding: 20px 0px; + display: flex; flex-direction: column; flex-wrap: wrap; text-overflow: ellipsis; - } `; diff --git a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx index 50bf0ac9..ee076392 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsBefore/index.tsx @@ -93,7 +93,6 @@ const Container = styled.div` @media (max-width: 900px) { margin-left: 15px; margin-right: 0px; - margin-top: 4px; } `; @@ -148,7 +147,7 @@ const UpdatedText = styled.div` color: #CDCFD0; @media (max-width: 478px) { - font-size: 7px; + font-size: 9px; } `; @@ -185,7 +184,7 @@ const DueDateText = styled.div` color: black; @media (max-width: 478px) { - font-size: 8px; + font-size: 11px; } `; @@ -197,6 +196,10 @@ const DueDateInnerContainer = styled.div` justify-content: space-between; align-items: center; + + @media (max-width: 530px) { + flex-direction: column; + } `; const DueDateDay = styled.div` @@ -204,9 +207,12 @@ const DueDateDay = styled.div` font-weight: regular; color: black; + @media (max-width: 530px) { + width: 100%; + } + @media (max-width: 478px) { - width: 40%; - font-size: 7px; + font-size: 10px; } `; @@ -218,6 +224,12 @@ const DueDateMoney = styled.div` font-size: 16px; font-weight: bold; + @media (max-width: 530px) { + margin-top: 8px; + + width: 100%; + } + @media (max-width: 478px) { font-size: 10px; } @@ -235,7 +247,7 @@ const MoneyText = styled.div` color: white; @media (max-width: 478px) { - font-size: 10px; + font-size: 12px; } `; diff --git a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx index 695fc099..dc616126 100644 --- a/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx +++ b/src/components/Settlements/SettlementsRight/SettlementsExpected/index.tsx @@ -139,7 +139,7 @@ const UpdatedText = styled.div` color: #CDCFD0; @media (max-width: 478px) { - font-size: 7px; + font-size: 9px; } `; @@ -176,7 +176,7 @@ const DueDateText = styled.div` color: black; @media (max-width: 478px) { - font-size: 8px; + font-size: 11px; } `; @@ -214,7 +214,7 @@ const CouponText = styled.div` color: white; @media (max-width: 478px) { - font-size: 10px; + font-size: 12px; } `; @@ -223,7 +223,7 @@ const CouponDay = styled.div` color: white; @media (max-width: 478px) { - font-size: 9px; + font-size: 10px; } `; From 2da71a438757ec5f0970252ed537c7b980eb6eac Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sun, 21 Jan 2024 15:54:37 +0900 Subject: [PATCH 47/54] =?UTF-8?q?design:=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?= =?UTF-8?q?=EC=9D=B8=ED=92=8B=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EC=A6=88=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsLeft/SettlementsSetting/index.tsx | 10 +++++++--- 1 file changed, 7 insertions(+), 3 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx index 64735314..7a496d3d 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx @@ -121,12 +121,16 @@ const Calendar = styled.img` `; const StyledDatePicker = styled(DatePicker)` - border: none; - border-radius: 8px; - padding: 5px; margin-right: 10px; + padding: 5px; + width: 100px; + border: none; + border-radius: 8px; + + font-size: 14px; + @media (max-width: 900px) { } `; From 0b358f6050cd1bb366176d0b4dce844e423da738 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sun, 21 Jan 2024 15:55:48 +0900 Subject: [PATCH 48/54] =?UTF-8?q?design:=20=EC=97=91=EC=85=80=20=EB=8B=A4?= =?UTF-8?q?=EC=9A=B4=EB=A1=9C=EB=93=9C=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=A1=B0=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsLeft/SettlementsSetting/Settlemented/index.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx index cd8cc7f9..d61571ad 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx @@ -240,10 +240,12 @@ const ExcelDownload = styled.div` margin-left: 10px; + + white-space: nowrap; button { - font-size: 14px; + font-size: 12px; font-weight: bold; color: white; border: none; From 4f8056efb834dfa578b826f253139886bcd46b2c Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sun, 21 Jan 2024 16:00:19 +0900 Subject: [PATCH 49/54] =?UTF-8?q?chore:=20=EC=BA=98=EB=A6=B0=EB=8D=94=20?= =?UTF-8?q?=ED=95=9C=EA=B8=80=20=EB=9D=BC=EC=9D=B4=EB=B8=8C=EB=9F=AC?= =?UTF-8?q?=EB=A6=AC=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 103 ++++++++++++++++++++++++++++++++++++++++------ package.json | 1 + 2 files changed, 91 insertions(+), 13 deletions(-) diff --git a/package-lock.json b/package-lock.json index 06ed45b2..88c32e88 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,6 +13,7 @@ "@tanstack/react-query": "^5.17.9", "@tanstack/react-query-devtools": "^5.17.9", "axios": "^1.6.5", + "date-fns": "file:2.0.0-alpha.27/locale/ko", "react": "^18.2.0", "react-chartjs-2": "^5.2.0", "react-datepicker": "^4.25.0", @@ -48,6 +49,7 @@ "vite-tsconfig-paths": "^4.2.3" } }, + "2.0.0-alpha.27/locale/ko": {}, "node_modules/@aashutoshrathi/word-wrap": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz", @@ -2859,6 +2861,22 @@ "react-popper": "^2.2.5" } }, + "node_modules/@types/react-datepicker/node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dev": true, + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/@types/react-dom": { "version": "18.2.18", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz", @@ -3743,19 +3761,8 @@ "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/date-fns": { - "version": "2.30.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", - "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", - "dependencies": { - "@babel/runtime": "^7.21.0" - }, - "engines": { - "node": ">=0.11" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/date-fns" - } + "resolved": "2.0.0-alpha.27/locale/ko", + "link": true }, "node_modules/debug": { "version": "4.3.4", @@ -4335,6 +4342,46 @@ "integrity": "sha512-36yxDn5H7OFZQla0/jFJmbIKTdZAQHngCedGxiMmpNfEZM0sdEeT+WczLQrjK6D7o2aiyLYDnkw0R3JK0Qv1RQ==", "dev": true }, + "node_modules/follow-redirects": { + "version": "1.15.5", + "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.5.tgz", + "integrity": "sha512-vSFWUON1B+yAw1VN4xMfxgn5fTUiaOzAJCKBwIIgT/+7CuGy9+r+5gITvP62j3RmaD5Ph65UaERdOSRGUzZtgw==", + "funding": [ + { + "type": "individual", + "url": "https://github.com/sponsors/RubenVerborgh" + } + ], + "engines": { + "node": ">=4.0" + }, + "peerDependenciesMeta": { + "debug": { + "optional": true + } + } + }, + "node_modules/form-data": { + "version": "4.0.0", + "resolved": "https://registry.npmjs.org/form-data/-/form-data-4.0.0.tgz", + "integrity": "sha512-ETEklSGi5t0QMZuiXoA/Q6vcnxcLQP5vdugSpuAyi6SVGi2clPPp+xgEhuMaHC+zGgn31Kd235W35f7Hykkaww==", + "dependencies": { + "asynckit": "^0.4.0", + "combined-stream": "^1.0.8", + "mime-types": "^2.1.12" + }, + "engines": { + "node": ">= 6" + } + }, + "node_modules/frac": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/frac/-/frac-1.1.2.tgz", + "integrity": "sha512-w/XBfkibaTl3YDqASwfDUqkna4Z2p9cFSr1aHDt0WoMTECnRfBOv2WArlZILlqgWlmdIlALXGpM2AOhEk5W3IA==", + "engines": { + "node": ">=0.8" + } + }, "node_modules/fs.realpath": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/fs.realpath/-/fs.realpath-1.0.0.tgz", @@ -6417,6 +6464,21 @@ "node": ">= 6" } }, + "node_modules/prop-types": { + "version": "15.8.1", + "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.8.1.tgz", + "integrity": "sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==", + "dependencies": { + "loose-envify": "^1.4.0", + "object-assign": "^4.1.1", + "react-is": "^16.13.1" + } + }, + "node_modules/proxy-from-env": { + "version": "1.1.0", + "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz", + "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg==" + }, "node_modules/punycode": { "version": "2.3.1", "resolved": "https://registry.npmjs.org/punycode/-/punycode-2.3.1.tgz", @@ -6499,6 +6561,21 @@ "react-dom": "^16.9.0 || ^17 || ^18" } }, + "node_modules/react-datepicker/node_modules/date-fns": { + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", diff --git a/package.json b/package.json index 62c284c7..4193bddd 100644 --- a/package.json +++ b/package.json @@ -16,6 +16,7 @@ "@tanstack/react-query": "^5.17.9", "@tanstack/react-query-devtools": "^5.17.9", "axios": "^1.6.5", + "date-fns": "file:2.0.0-alpha.27/locale/ko", "react": "^18.2.0", "react-chartjs-2": "^5.2.0", "react-datepicker": "^4.25.0", From 0decf07620df95e319c25bf473ad56824e019a5c Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sun, 21 Jan 2024 16:10:11 +0900 Subject: [PATCH 50/54] =?UTF-8?q?feat:=20=EB=8B=AC=EB=A0=A5=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=ED=95=9C=EA=B8=80=20=EC=B6=9C?= =?UTF-8?q?=EB=A0=A5?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 58 ++++++++----------- package.json | 3 +- .../SettlementsSetting/index.tsx | 3 + 3 files changed, 28 insertions(+), 36 deletions(-) diff --git a/package-lock.json b/package-lock.json index 88c32e88..9de341ea 100644 --- a/package-lock.json +++ b/package-lock.json @@ -13,7 +13,8 @@ "@tanstack/react-query": "^5.17.9", "@tanstack/react-query-devtools": "^5.17.9", "axios": "^1.6.5", - "date-fns": "file:2.0.0-alpha.27/locale/ko", + "date-fns": "^2.0.0-alpha.27", + "date-fns-tz": "^2.0.0", "react": "^18.2.0", "react-chartjs-2": "^5.2.0", "react-datepicker": "^4.25.0", @@ -49,7 +50,6 @@ "vite-tsconfig-paths": "^4.2.3" } }, - "2.0.0-alpha.27/locale/ko": {}, "node_modules/@aashutoshrathi/word-wrap": { "version": "1.2.6", "resolved": "https://registry.npmjs.org/@aashutoshrathi/word-wrap/-/word-wrap-1.2.6.tgz", @@ -2861,22 +2861,6 @@ "react-popper": "^2.2.5" } }, - "node_modules/@types/react-datepicker/node_modules/date-fns": { - "version": "2.30.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", - "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", - "dev": true, - "dependencies": { - "@babel/runtime": "^7.21.0" - }, - "engines": { - "node": ">=0.11" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/date-fns" - } - }, "node_modules/@types/react-dom": { "version": "18.2.18", "resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-18.2.18.tgz", @@ -3761,8 +3745,27 @@ "integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==" }, "node_modules/date-fns": { - "resolved": "2.0.0-alpha.27/locale/ko", - "link": true + "version": "2.30.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", + "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", + "dependencies": { + "@babel/runtime": "^7.21.0" + }, + "engines": { + "node": ">=0.11" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/date-fns" + } + }, + "node_modules/date-fns-tz": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/date-fns-tz/-/date-fns-tz-2.0.0.tgz", + "integrity": "sha512-OAtcLdB9vxSXTWHdT8b398ARImVwQMyjfYGkKD2zaGpHseG2UPHbHjXELReErZFxWdSLph3c2zOaaTyHfOhERQ==", + "peerDependencies": { + "date-fns": ">=2.0.0" + } }, "node_modules/debug": { "version": "4.3.4", @@ -6561,21 +6564,6 @@ "react-dom": "^16.9.0 || ^17 || ^18" } }, - "node_modules/react-datepicker/node_modules/date-fns": { - "version": "2.30.0", - "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-2.30.0.tgz", - "integrity": "sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==", - "dependencies": { - "@babel/runtime": "^7.21.0" - }, - "engines": { - "node": ">=0.11" - }, - "funding": { - "type": "opencollective", - "url": "https://opencollective.com/date-fns" - } - }, "node_modules/react-dom": { "version": "18.2.0", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.2.0.tgz", diff --git a/package.json b/package.json index 4193bddd..2642aabb 100644 --- a/package.json +++ b/package.json @@ -16,7 +16,8 @@ "@tanstack/react-query": "^5.17.9", "@tanstack/react-query-devtools": "^5.17.9", "axios": "^1.6.5", - "date-fns": "file:2.0.0-alpha.27/locale/ko", + "date-fns": "^2.0.0-alpha.27", + "date-fns-tz": "^2.0.0", "react": "^18.2.0", "react-chartjs-2": "^5.2.0", "react-datepicker": "^4.25.0", diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx index 7a496d3d..252a3508 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx @@ -2,6 +2,7 @@ import styled from '@emotion/styled'; import { useState } from 'react'; import DatePicker from 'react-datepicker'; import 'react-datepicker/dist/react-datepicker.css'; +import { ko } from 'date-fns/locale'; import { useSetRecoilState } from 'recoil'; import CalendarIcon from '@assets/icons/calendar-number-outline.svg'; @@ -55,6 +56,7 @@ const SettlementsSetting = () => { dateFormat="yyyy/MM" showMonthYearPicker placeholderText="" + locale={ko} /> { dateFormat="yyyy/MM" showMonthYearPicker placeholderText="" + locale={ko} /> ์กฐํšŒํ•˜๊ธฐ From 0b83fdc218affba159fb94e8281b2aeca7f5695a Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sun, 21 Jan 2024 16:46:35 +0900 Subject: [PATCH 51/54] =?UTF-8?q?design:=20=EC=A0=95=EC=82=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=20=EB=AA=A8=EB=B0=94=EC=9D=BC=EB=B2=84?= =?UTF-8?q?=EC=A0=84=20=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsSetting/Settlemented/index.tsx | 25 ++++++++++++++++--- .../SettlementsSetting/index.tsx | 3 +++ 2 files changed, 25 insertions(+), 3 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx index d61571ad..82d0a786 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx @@ -159,6 +159,11 @@ const SettlementedHeader = styled.div` display: flex; justify-content: space-between; + + @media (max-width: 498px) { + flex-direction: column; + align-items: flex-start; + } `; const TotalData = styled.div` @@ -168,11 +173,22 @@ const TotalData = styled.div` font-size: 14px; font-weight: bold; color: white; + + @media (max-width: 498px) { + order: 2; + margin-top: 10px; + } `; const OptionContainer = styled.div` display: flex; align-items: center; + + @media (max-width: 498px) { + order: 1; + margin-bottom: 10px; + justify-content: space-between; + } `; const StyledDropdown = styled(Dropdown)` @@ -190,6 +206,10 @@ const StyledDropdown = styled(Dropdown)` @media (max-width: 900px) { } + @media (max-width: 498px) { + max-width: 160px; + } + .text { color: white; font-size: 11px; @@ -236,11 +256,9 @@ const StyledDropdown = styled(Dropdown)` const ExcelDownload = styled.div` - width: 100%; - margin-left: 10px; - + width: 100%; white-space: nowrap; @@ -248,6 +266,7 @@ const ExcelDownload = styled.div` font-size: 12px; font-weight: bold; color: white; + border: none; text-decoration: underline; cursor: pointer; diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx index 252a3508..aef8c1df 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/index.tsx @@ -109,6 +109,8 @@ const CalendarContainer = styled.nav` `; const CalendarInnerContainer = styled.div` + margin-top: 10px; + display: flex; @media (max-width: 900px) { @@ -175,6 +177,7 @@ const StyledDatePickerContainer = styled.div` margin-right: 43px; display: flex; + align-items: center; @media (max-width: 900px) { margin-left: auto; From 0f46a2a8becd72a8554294948598252090b370ec Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sun, 21 Jan 2024 17:29:35 +0900 Subject: [PATCH 52/54] =?UTF-8?q?design:=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20=EB=AF=B8=EB=94=94=EC=96=B4?= =?UTF-8?q?=EC=BF=BC=EB=A6=AC=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Settlemented/SettlementsPagination/index.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx index c2f5ca70..cc2138d9 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx @@ -53,9 +53,14 @@ const PaginationContainer = styled.div` .pagination-li { margin: 5px; padding: 9.4px 0px; + border: 1px solid #FFFFFF; border-radius: 4px; cursor: pointer; + + @media (max-width: 900px) { + font-size: 12px; + } } .pagination-link { From d4ac24722aecf139ea5b10f156734fc77ad6eee5 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sun, 21 Jan 2024 17:49:17 +0900 Subject: [PATCH 53/54] =?UTF-8?q?design:=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EC=97=86=EC=9D=84=20=EC=8B=9C=20=EB=A0=8C=EB=8D=94=EB=A7=81?= =?UTF-8?q?=EB=90=98=EB=8A=94=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98,=20=EC=83=89=EC=83=81=20=EC=A0=81=EC=9A=A9(=EC=9B=B9,?= =?UTF-8?q?=20=EB=AA=A8=EB=B0=94=EC=9D=BC)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Settlemented/SettlementsTable/index.tsx | 25 +++++++++++++++++-- 1 file changed, 23 insertions(+), 2 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx index d3a3b794..e644686e 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsTable/index.tsx @@ -27,7 +27,7 @@ const SettlementsTable = ({ data, pageStartNumber }: SettlementsTableProps) => {
-
๋ฐ์ดํ„ฐ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค.
+ ๋ฐ์ดํ„ฐ๊ฐ€ ์—†์Šต๋‹ˆ๋‹ค. @@ -108,13 +108,15 @@ const FrameContainer = styled.div` text-align: center; `; -const Frame = styled.div` +const Frame = styled.div<{ hasData?: boolean }>` width: 99%; height: 500px; margin-left: auto; margin-right: auto; + position: relative; + background: url(${settlementsFrame}); @media (max-width: 900px) { @@ -124,6 +126,25 @@ const Frame = styled.div` } `; +const NoDataText = styled.div` + font-size: 15px; + + position: absolute; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + @media (max-width: 900px) { + margin: 10px 0px; + + position: static; + transform: none; + + background-color: #1A2849; + color: white; + } +`; + const DataElement = styled.div` width: 10%; height: 48px; From 7e68cf12c68c78eedf3a6b6bd087535a24f3b060 Mon Sep 17 00:00:00 2001 From: jiohjung98 Date: Sun, 21 Jan 2024 18:08:17 +0900 Subject: [PATCH 54/54] =?UTF-8?q?fix:=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EC=97=86=EC=9D=84=20=EC=8B=9C=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=EB=84=A4=EC=9D=B4=EC=85=98=20=EB=A0=8C=EB=8D=94=EB=A7=81?= =?UTF-8?q?=EB=90=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20=ED=95=B4=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../SettlementsPagination/index.tsx | 37 ++++++++++--------- .../SettlementsSetting/Settlemented/index.tsx | 19 +++++----- .../Settlements/SettlementsLeft/index.tsx | 1 - src/types/settlements.ts | 1 + 4 files changed, 31 insertions(+), 27 deletions(-) diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx index cc2138d9..fc00fa31 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/SettlementsPagination/index.tsx @@ -7,7 +7,8 @@ import { SettlementsPaginationProps } from '@/types/settlements'; const SettlementsPagination: React.FC = ({ currentPage, totalPages, - onPageChange + onPageChange, + totalItems }) => { useEffect(() => { onPageChange(currentPage); @@ -15,22 +16,24 @@ const SettlementsPagination: React.FC = ({ return ( - '} - breakLabel={'...'} - breakClassName={'hidden'} - pageCount={totalPages} - marginPagesDisplayed={2} - pageRangeDisplayed={5} - onPageChange={(selectedItem) => onPageChange(selectedItem.selected + 1)} - containerClassName={'pagination'} - activeClassName={'active'} - pageClassName={'pagination-li'} - pageLinkClassName={'pagination-link'} - previousClassName={'pagination-previous'} - nextClassName={'pagination-next'} - /> + {totalItems > 0 && ( + '} + breakLabel={'...'} + breakClassName={'hidden'} + pageCount={totalPages} + marginPagesDisplayed={2} + pageRangeDisplayed={5} + onPageChange={(selectedItem) => onPageChange(selectedItem.selected + 1)} + containerClassName={'pagination'} + activeClassName={'active'} + pageClassName={'pagination-li'} + pageLinkClassName={'pagination-link'} + previousClassName={'pagination-previous'} + nextClassName={'pagination-next'} + /> + )} ); }; diff --git a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx index 82d0a786..16bceb7f 100644 --- a/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx +++ b/src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.tsx @@ -126,15 +126,16 @@ const Settlemented = () => { - - + + ); diff --git a/src/components/Settlements/SettlementsLeft/index.tsx b/src/components/Settlements/SettlementsLeft/index.tsx index 3b9d1ea5..e278041b 100644 --- a/src/components/Settlements/SettlementsLeft/index.tsx +++ b/src/components/Settlements/SettlementsLeft/index.tsx @@ -15,7 +15,6 @@ export default SettlementsLeft; const Container = styled.div` width: 80%; min-width: 1110px; - height: 100%; background: linear-gradient(45deg, rgba(17, 31, 63, 1), rgba(26, 40, 73, 0.75)); diff --git a/src/types/settlements.ts b/src/types/settlements.ts index 59da4c4e..42ed647c 100644 --- a/src/types/settlements.ts +++ b/src/types/settlements.ts @@ -16,6 +16,7 @@ export interface SettlementsPaginationProps { currentPage: number; totalPages: number; onPageChange: (page: number) => void; + totalItems: number; }; export interface SettlementsPopupProps {