From c82ebb848642139c34348a3c8df79e29c7f761b4 Mon Sep 17 00:00:00 2001 From: dbwhdtjr0457 Date: Mon, 4 Dec 2023 17:23:29 +0900 Subject: [PATCH 1/7] =?UTF-8?q?feat:=20=EB=82=A0=EC=A7=9C,=20=EA=B0=90?= =?UTF-8?q?=EC=A0=95,=20=EB=AA=A8=EC=96=91=20=ED=95=84=ED=84=B0=EB=A7=81?= =?UTF-8?q?=20UI=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/DiaryModal/DiaryListModal.js | 92 +++++++++++++++++-- 1 file changed, 85 insertions(+), 7 deletions(-) diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js index 397d90e..659422b 100644 --- a/FE/src/components/DiaryModal/DiaryListModal.js +++ b/FE/src/components/DiaryModal/DiaryListModal.js @@ -2,13 +2,15 @@ import React, { useEffect, useLayoutEffect } from "react"; import styled from "styled-components"; -import { useRecoilState } from "recoil"; +import { useRecoilState, useRecoilValue } from "recoil"; import diaryAtom from "../../atoms/diaryAtom"; +import shapeAtom from "../../atoms/shapeAtom"; import zoomIn from "../../assets/zoomIn.svg"; function DiaryListModal() { const [selectedDiary, setSelectedDiary] = React.useState(null); const [diaryState, setDiaryState] = useRecoilState(diaryAtom); + const shapeState = useRecoilValue(shapeAtom); useLayoutEffect(() => { if (diaryState.diaryList) { @@ -28,18 +30,38 @@ function DiaryListModal() { return ( - + 날짜 - 필터 + + + + 감정 - 필터 + + 긍정 + 중립 + 부정 + 모양 - 필터 + + + {shapeState?.map((shape) => ( + { + console.log(shape); + }} + > +
+ + ))} + + 태그 @@ -121,6 +143,7 @@ const DiaryListModalItem = styled.div` display: flex; flex-direction: column; align-items: center; + justify-content: ${(props) => props.justifyContent || "flex-start"}; font-size: 1.3rem; color: #ffffff; @@ -148,13 +171,68 @@ const DiaryListModalFilterWrapper = styled.div` const DiaryListModalFilterContent = styled.div` width: 100%; - height: 4.5rem; + height: 10rem; + padding: 0 1rem; display: flex; - justify-content: center; + justify-content: space-evenly; align-items: center; `; +const FilterDateInput = styled.input` + width: 40%; + height: 3rem; + + border: none; + border-radius: 0.5rem; + + font-size: 1.1rem; + text-align: center; +`; + +const FilterEmotionButton = styled.button` + width: 25%; + height: 3rem; + + border: none; + border-radius: 0.5rem; + + font-size: 1.1rem; + text-align: center; + + cursor: pointer; + + &:hover { + background-color: rgba(255, 255, 255, 0.3); + } +`; + +const ShapeWrapper = styled.div` + width: 90%; + height: 10rem; + + display: flex; + justify-content: space-evenly; + flex-wrap: wrap; + + background-color: #3b455e; + border-radius: 0.5rem; + + overflow: auto; +`; + +const ShapeSelectBoxItem = styled.div` + width: 4.5rem; + height: 5rem; + + cursor: pointer; + + &:hover { + transform: scale(1.2); + transition: transform 0.25s; + } +`; + const DiaryTitleListHeader = styled.div` width: 100%; height: 3.5rem; From f002085afe683e7e2b3b2f839a03b0ff4e7985ec Mon Sep 17 00:00:00 2001 From: dbwhdtjr0457 Date: Mon, 4 Dec 2023 23:37:33 +0900 Subject: [PATCH 2/7] =?UTF-8?q?feat:=20tag=20filter=20UI=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 --- FE/src/assets/search.svg | 4 + .../components/DiaryModal/DiaryCreateModal.js | 4 +- .../components/DiaryModal/DiaryListModal.js | 162 +++++++++++++++++- 3 files changed, 159 insertions(+), 11 deletions(-) create mode 100644 FE/src/assets/search.svg diff --git a/FE/src/assets/search.svg b/FE/src/assets/search.svg new file mode 100644 index 0000000..70ad761 --- /dev/null +++ b/FE/src/assets/search.svg @@ -0,0 +1,4 @@ + + + + diff --git a/FE/src/components/DiaryModal/DiaryCreateModal.js b/FE/src/components/DiaryModal/DiaryCreateModal.js index 7656e0e..15724e4 100644 --- a/FE/src/components/DiaryModal/DiaryCreateModal.js +++ b/FE/src/components/DiaryModal/DiaryCreateModal.js @@ -131,12 +131,10 @@ function DiaryCreateModal(props) { fontSize='1rem' placeholder='태그를 입력해주세요.' onBlur={(e) => addTag(e)} - onKeyPress={(e) => { + onKeyDown={(e) => { if (e.key === "Enter") { addTag(e); } - }} - onKeyDown={(e) => { if (e.key === "Backspace" && e.target.value.length === 0) { deleteLastTag(); } diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js index 659422b..76ed484 100644 --- a/FE/src/components/DiaryModal/DiaryListModal.js +++ b/FE/src/components/DiaryModal/DiaryListModal.js @@ -6,11 +6,25 @@ import { useRecoilState, useRecoilValue } from "recoil"; import diaryAtom from "../../atoms/diaryAtom"; import shapeAtom from "../../atoms/shapeAtom"; import zoomIn from "../../assets/zoomIn.svg"; +import search from "../../assets/search.svg"; function DiaryListModal() { const [selectedDiary, setSelectedDiary] = React.useState(null); const [diaryState, setDiaryState] = useRecoilState(diaryAtom); const shapeState = useRecoilValue(shapeAtom); + const [filterState, setFilterState] = React.useState({ + date: { + start: "", + end: "", + }, + emotion: { + positive: false, + neutral: false, + negative: false, + }, + shape: [], + tag: [], + }); useLayoutEffect(() => { if (diaryState.diaryList) { @@ -30,7 +44,7 @@ function DiaryListModal() { return ( - + 날짜 @@ -48,13 +62,16 @@ function DiaryListModal() { 모양 - + {shapeState?.map((shape) => ( { - console.log(shape); + setFilterState((prev) => ({ + ...prev, + shape: [...prev.shape, shape.uuid], + })); }} >
@@ -65,7 +82,42 @@ function DiaryListModal() { 태그 - 필터 + + + + search + + { + if (e.key === "Enter") { + if (!filterState.tag.includes(e.target.value)) { + setFilterState((prev) => ({ + ...prev, + tag: [...prev.tag, e.target.value], + })); + } + } + }} + /> + + + {filterState.tag.map((tag) => ( + { + setFilterState((prev) => ({ + ...prev, + tag: prev.tag.filter((item) => item !== tag), + })); + }} + > + {tag} + + ))} + + @@ -157,6 +209,9 @@ const DiaryListModalItem = styled.div` opacity: 1; } } + + overflow: hidden; + overflow-y: auto; `; const DiaryListModalFilterWrapper = styled.div` @@ -166,15 +221,19 @@ const DiaryListModalFilterWrapper = styled.div` flex-direction: column; align-items: center; + margin: 1rem 0; + gap: 0.5rem; + font-size: 1.1rem; `; const DiaryListModalFilterContent = styled.div` width: 100%; - height: 10rem; + height: ${(props) => props.height || "7rem"}; padding: 0 1rem; display: flex; + flex-direction: ${(props) => props.flexDirection || "row"}; justify-content: space-evenly; align-items: center; `; @@ -186,6 +245,7 @@ const FilterDateInput = styled.input` border: none; border-radius: 0.5rem; + font-family: "Pretendard-Medium"; font-size: 1.1rem; text-align: center; `; @@ -197,6 +257,7 @@ const FilterEmotionButton = styled.button` border: none; border-radius: 0.5rem; + font-family: "Pretendard-Medium"; font-size: 1.1rem; text-align: center; @@ -219,11 +280,11 @@ const ShapeWrapper = styled.div` border-radius: 0.5rem; overflow: auto; + overflow-x: hidden; `; const ShapeSelectBoxItem = styled.div` - width: 4.5rem; - height: 5rem; + width: 5rem; cursor: pointer; @@ -233,6 +294,91 @@ const ShapeSelectBoxItem = styled.div` } `; +const FilterTagInputWrapper = styled.div` + width: 88%; + height: 3rem; + + border: none; + border-radius: 1.5rem; + + background-color: rgba(255, 255, 255, 0.6); + + font-family: "Pretendard-Medium"; + font-size: 1.1rem; + + padding: 0.5rem 1rem; + box-sizing: border-box; + + display: flex; + justify-content: flex-start; + align-items: center; + + margin-bottom: 1rem; +`; + +const FilterTagInputIcon = styled.div` + width: 2rem; + height: 2rem; + + display: flex; + justify-content: center; + align-items: center; +`; + +const FilterTagInput = styled.input` + width: 100%; + height: 3rem; + + border: none; + border-radius: 1.5rem; + + background-color: transparent; + + font-family: "Pretendard-Medium"; + font-size: 1.1rem; + + padding: 0.5rem 1rem; + box-sizing: border-box; + + &:focus { + outline: none; + } +`; + +const FilterTagWrapper = styled.div` + width: 90%; + height: 10rem; + + display: flex; + flex-wrap: wrap; + + background-color: transparent; + border-radius: 0.5rem; + + overflow: auto; + overflow-x: hidden; +`; + +const FilterTagItem = styled.div` + height: 2rem; + + display: flex; + justify-content: center; + align-items: center; + + background-color: rgba(255, 255, 255, 0.3); + border-radius: 1rem; + + padding: 0 1rem; + margin: 0.5rem; + + cursor: pointer; + + &:hover { + background-color: rgba(255, 255, 255, 0.3); + } +`; + const DiaryTitleListHeader = styled.div` width: 100%; height: 3.5rem; @@ -243,7 +389,7 @@ const DiaryTitleListHeader = styled.div` flex-shrink: 0; - font-size: 1.1rem; + font-size: 1.3rem; `; const DiaryTitleListItemWrapper = styled.div` From 891017e280d9391f623a29ff39f208e1460efb4e Mon Sep 17 00:00:00 2001 From: dbwhdtjr0457 Date: Tue, 5 Dec 2023 00:08:02 +0900 Subject: [PATCH 3/7] =?UTF-8?q?feat:=20=EA=B0=90=EC=A0=95=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EB=B0=8F=20=EB=AA=A8=EC=96=91=20=EC=95=84=EC=9D=B4?= =?UTF-8?q?=EC=BD=98=20=ED=81=B4=EB=A6=AD=20=EC=8B=9C=20=ED=99=9C=EC=84=B1?= =?UTF-8?q?=ED=99=94=20=ED=91=9C=EC=8B=9C=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/DiaryModal/DiaryListModal.js | 78 +++++++++++++++++-- 1 file changed, 70 insertions(+), 8 deletions(-) diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js index 76ed484..c6d123e 100644 --- a/FE/src/components/DiaryModal/DiaryListModal.js +++ b/FE/src/components/DiaryModal/DiaryListModal.js @@ -55,9 +55,48 @@ function DiaryListModal() { 감정 - 긍정 - 중립 - 부정 + { + setFilterState((prev) => ({ + ...prev, + emotion: { + ...prev.emotion, + positive: !prev.emotion.positive, + }, + })); + }} + > + 긍정 + + { + setFilterState((prev) => ({ + ...prev, + emotion: { + ...prev.emotion, + neutral: !prev.emotion.neutral, + }, + })); + }} + > + 중립 + + { + setFilterState((prev) => ({ + ...prev, + emotion: { + ...prev.emotion, + negative: !prev.emotion.negative, + }, + })); + }} + > + 부정 + @@ -68,11 +107,24 @@ function DiaryListModal() { { - setFilterState((prev) => ({ - ...prev, - shape: [...prev.shape, shape.uuid], - })); + setFilterState((prev) => { + const shapeIndex = prev.shape.indexOf(shape.uuid); + if (shapeIndex !== -1) { + const updatedShape = [...prev.shape]; + updatedShape.splice(shapeIndex, 1); + return { + ...prev, + shape: updatedShape, + }; + } else { + return { + ...prev, + shape: [...prev.shape, shape.uuid], + }; + } + }); }} + selected={filterState.shape.includes(shape.uuid)} >
@@ -266,6 +318,10 @@ const FilterEmotionButton = styled.button` &:hover { background-color: rgba(255, 255, 255, 0.3); } + + border: ${(props) => + props.selected ? "2px solid blue" : "1px solid transparent"}; + border-radius: 0.5rem; `; const ShapeWrapper = styled.div` @@ -284,7 +340,9 @@ const ShapeWrapper = styled.div` `; const ShapeSelectBoxItem = styled.div` - width: 5rem; + width: 4rem; + + margin: 0.5rem; cursor: pointer; @@ -292,6 +350,10 @@ const ShapeSelectBoxItem = styled.div` transform: scale(1.2); transition: transform 0.25s; } + + border: ${(props) => + props.selected ? "1px solid #ffffff" : "1px solid transparent"}; + border-radius: 0.5rem; `; const FilterTagInputWrapper = styled.div` From 882c41c71661d5dd44849c1294a674f523ecbf13 Mon Sep 17 00:00:00 2001 From: dbwhdtjr0457 Date: Tue, 5 Dec 2023 00:12:50 +0900 Subject: [PATCH 4/7] =?UTF-8?q?feat:=20=EA=B0=90=EC=A0=95=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=20=EC=A2=85=EB=A5=98=EC=97=90=20=EB=94=B0=EB=9D=BC=20?= =?UTF-8?q?=EC=83=89=EC=83=81=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/src/components/DiaryModal/DiaryListModal.js | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js index c6d123e..c820898 100644 --- a/FE/src/components/DiaryModal/DiaryListModal.js +++ b/FE/src/components/DiaryModal/DiaryListModal.js @@ -57,6 +57,7 @@ function DiaryListModal() { { setFilterState((prev) => ({ ...prev, @@ -71,6 +72,7 @@ function DiaryListModal() { { setFilterState((prev) => ({ ...prev, @@ -85,6 +87,7 @@ function DiaryListModal() { { setFilterState((prev) => ({ ...prev, @@ -320,7 +323,7 @@ const FilterEmotionButton = styled.button` } border: ${(props) => - props.selected ? "2px solid blue" : "1px solid transparent"}; + props.selected ? `3px solid ${props.borderColor}` : "none"}; border-radius: 0.5rem; `; From 936f92dac199c07f0895bc98bbb2ef1424a86903 Mon Sep 17 00:00:00 2001 From: dbwhdtjr0457 Date: Tue, 5 Dec 2023 00:35:16 +0900 Subject: [PATCH 5/7] =?UTF-8?q?feat:=20=EB=82=A0=EC=A7=9C=20=EB=B2=94?= =?UTF-8?q?=EC=9C=84=20=EC=84=A4=EC=A0=95=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- FE/package-lock.json | 88 +++++++++++++++++++ FE/package.json | 2 + .../components/DiaryModal/DiaryListModal.js | 49 ++++++++++- 3 files changed, 135 insertions(+), 4 deletions(-) diff --git a/FE/package-lock.json b/FE/package-lock.json index a19a33c..d4a950d 100644 --- a/FE/package-lock.json +++ b/FE/package-lock.json @@ -13,7 +13,9 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "date-fns": "^2.30.0", "react": "^18.2.0", + "react-datepicker": "^4.24.0", "react-dom": "^18.2.0", "react-query": "^3.39.3", "react-scripts": "5.0.1", @@ -3354,6 +3356,15 @@ } } }, + "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/@react-spring/animated": { "version": "9.6.1", "resolved": "https://registry.npmjs.org/@react-spring/animated/-/animated-9.6.1.tgz", @@ -6440,6 +6451,11 @@ "resolved": "https://registry.npmjs.org/cjs-module-lexer/-/cjs-module-lexer-1.2.3.tgz", "integrity": "sha512-0TNiGstbQmCFwt4akjjBg5pLRTSyj/PkWQ1ZoO2zntmg9yLqSRxwEa4iCfQLGjqhiqBfOJa7W/E8wfGrTDmlZQ==" }, + "node_modules/classnames": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/classnames/-/classnames-2.3.2.tgz", + "integrity": "sha512-CSbhY4cFEJRe6/GQzIk5qXZ4Jeg5pcsP7b5peFSDpffpe1cqjASH/n9UTjBwOp6XpMSTwQ8Za2K5V02ueA7Tmw==" + }, "node_modules/clean-css": { "version": "5.3.2", "resolved": "https://registry.npmjs.org/clean-css/-/clean-css-5.3.2.tgz", @@ -7178,6 +7194,21 @@ "node": ">=10" } }, + "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/debounce": { "version": "1.2.1", "resolved": "https://registry.npmjs.org/debounce/-/debounce-1.2.1.tgz", @@ -15602,6 +15633,23 @@ "react": "^15.0.0 || ^16.0.0 || ^17.0.0 || ^18.0.0" } }, + "node_modules/react-datepicker": { + "version": "4.24.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-4.24.0.tgz", + "integrity": "sha512-2QUC2pP+x4v3Jp06gnFllxKsJR0yoT/K6y86ItxEsveTXUpsx+NBkChWXjU0JsGx/PL8EQnsxN0wHl4zdA1m/g==", + "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-dev-utils": { "version": "12.0.1", "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-12.0.1.tgz", @@ -15736,6 +15784,11 @@ "resolved": "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.11.tgz", "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==" }, + "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": "17.0.2", "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz", @@ -15750,6 +15803,33 @@ "url": "https://github.com/sponsors/gregberge" } }, + "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-query": { "version": "3.39.3", "resolved": "https://registry.npmjs.org/react-query/-/react-query-3.39.3.tgz", @@ -18289,6 +18369,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/watchpack": { "version": "2.4.0", "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-2.4.0.tgz", diff --git a/FE/package.json b/FE/package.json index 9c2f622..22e94f7 100644 --- a/FE/package.json +++ b/FE/package.json @@ -8,7 +8,9 @@ "@testing-library/jest-dom": "^5.17.0", "@testing-library/react": "^13.4.0", "@testing-library/user-event": "^13.5.0", + "date-fns": "^2.30.0", "react": "^18.2.0", + "react-datepicker": "^4.24.0", "react-dom": "^18.2.0", "react-query": "^3.39.3", "react-scripts": "5.0.1", diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js index c820898..9b94a36 100644 --- a/FE/src/components/DiaryModal/DiaryListModal.js +++ b/FE/src/components/DiaryModal/DiaryListModal.js @@ -3,6 +3,9 @@ import React, { useEffect, useLayoutEffect } from "react"; import styled from "styled-components"; import { useRecoilState, useRecoilValue } from "recoil"; +import DatePicker from "react-datepicker"; +import "react-datepicker/dist/react-datepicker.css"; +import { ko } from "date-fns/esm/locale"; import diaryAtom from "../../atoms/diaryAtom"; import shapeAtom from "../../atoms/shapeAtom"; import zoomIn from "../../assets/zoomIn.svg"; @@ -14,8 +17,8 @@ function DiaryListModal() { const shapeState = useRecoilValue(shapeAtom); const [filterState, setFilterState] = React.useState({ date: { - start: "", - end: "", + start: null, + end: null, }, emotion: { positive: false, @@ -48,8 +51,46 @@ function DiaryListModal() { 날짜 - - + { + setFilterState((prev) => ({ + ...prev, + date: { + ...prev.date, + start: date, + }, + })); + }} + dateFormat='yyyy-MM-dd' + selectsStart + startDate={filterState.date.start} + endDate={filterState.date.end} + locale={ko} + isClearable={true} + placeholderText='시작 날짜' + /> + ~ + { + setFilterState((prev) => ({ + ...prev, + date: { + ...prev.date, + end: date, + }, + })); + }} + dateFormat='yyyy-MM-dd' + selectsEnd + startDate={filterState.date.start} + endDate={filterState.date.end} + minDate={filterState.date.start} + locale={ko} + isClearable={true} + placeholderText='종료 날짜' + /> From 4476a9b6efae2cb245663465ab968bd849d287a0 Mon Sep 17 00:00:00 2001 From: dbwhdtjr0457 Date: Tue, 5 Dec 2023 10:56:35 +0900 Subject: [PATCH 6/7] temp --- FE/src/components/DiaryModal/DiaryListModal.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js index 9b94a36..d4f01f0 100644 --- a/FE/src/components/DiaryModal/DiaryListModal.js +++ b/FE/src/components/DiaryModal/DiaryListModal.js @@ -495,7 +495,7 @@ const DiaryTitleListHeader = styled.div` flex-shrink: 0; - font-size: 1.3rem; + font-size: 1.6rem; `; const DiaryTitleListItemWrapper = styled.div` From 5a53f6d118c34db1e6e5d893a9e7b1104202ab07 Mon Sep 17 00:00:00 2001 From: dbwhdtjr0457 Date: Tue, 5 Dec 2023 11:42:00 +0900 Subject: [PATCH 7/7] =?UTF-8?q?feat:=20=ED=95=84=ED=84=B0=EB=A7=81=20?= =?UTF-8?q?=EA=B8=B0=EB=8A=A5=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/DiaryModal/DiaryListModal.js | 80 ++++++++++++++++++- 1 file changed, 79 insertions(+), 1 deletion(-) diff --git a/FE/src/components/DiaryModal/DiaryListModal.js b/FE/src/components/DiaryModal/DiaryListModal.js index d4f01f0..78127b1 100644 --- a/FE/src/components/DiaryModal/DiaryListModal.js +++ b/FE/src/components/DiaryModal/DiaryListModal.js @@ -28,10 +28,12 @@ function DiaryListModal() { shape: [], tag: [], }); + const [filteredDiaryList, setFilteredDiaryList] = React.useState([]); useLayoutEffect(() => { if (diaryState.diaryList) { setSelectedDiary(diaryState.diaryList[0]); + setFilteredDiaryList(diaryState.diaryList); } }, [diaryState.diaryList]); @@ -45,6 +47,82 @@ function DiaryListModal() { } }, [selectedDiary]); + useEffect(() => { + if (diaryState.diaryList) { + const filteredList = diaryState.diaryList + .filter((diary) => { + if (filterState.date.start && filterState.date.end) { + if ( + new Date(diary.date) >= filterState.date.start && + new Date(diary.date) <= filterState.date.end + ) { + return true; + } + } else if (filterState.date.start) { + if (new Date(diary.date) >= filterState.date.start) { + return true; + } + } else if (filterState.date.end) { + if (new Date(diary.date) <= filterState.date.end) { + return true; + } + } else { + return true; + } + return false; + }) + .filter((diary) => { + if ( + !filterState.emotion.positive && + !filterState.emotion.neutral && + !filterState.emotion.negative + ) { + return true; + } + if (filterState.emotion.positive) { + if (diary.emotion.sentiment === "positive") { + return true; + } + } + if (filterState.emotion.neutral) { + if (diary.emotion.sentiment === "neutral") { + return true; + } + } + if (filterState.emotion.negative) { + if (diary.emotion.sentiment === "negative") { + return true; + } + } + return false; + }) + .filter((diary) => { + if (filterState.shape.length > 0) { + if (filterState.shape.includes(diary.shapeUuid)) { + return true; + } + return false; + } + return true; + }) + .filter((diary) => { + if (filterState.tag.length > 0) { + if (filterState.tag.every((tag) => diary.tags.includes(tag))) { + return true; + } + return false; + } + return true; + }); + setFilteredDiaryList([...filteredList]); + } + }, [ + filterState.date, + filterState.emotion, + filterState.shape, + filterState.tag, + ]); + return ( @@ -223,7 +301,7 @@ function DiaryListModal() { e.target.focus(); }} > - {diaryState.diaryList?.map((diary) => ( + {filteredDiaryList.map((diary) => ( {