From f061ba1201f908ca7cfbfba406193f26144daee2 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=98=88=EC=A7=80?= Date: Sun, 10 Nov 2024 00:03:51 +0900 Subject: [PATCH 1/3] =?UTF-8?q?Feat=20:=20=ED=98=84=ED=99=A9=20=EC=97=85?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EC=8B=A4=EC=8B=9C=EA=B0=84=20?= =?UTF-8?q?=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/wardrobe/page.tsx | 2 +- src/components/wardrobe/UserList.tsx | 213 +++++++++--------- src/components/wardrobe/WardrobeContent.tsx | 4 +- .../wardrobe/dropdown/UserDropdown.tsx | 95 ++++---- 4 files changed, 161 insertions(+), 153 deletions(-) diff --git a/src/app/wardrobe/page.tsx b/src/app/wardrobe/page.tsx index aeff3e2..783d223 100644 --- a/src/app/wardrobe/page.tsx +++ b/src/app/wardrobe/page.tsx @@ -32,7 +32,7 @@ function Wardrobe() {
- + {/* 페이지네이션 버튼 */}
diff --git a/src/components/wardrobe/UserList.tsx b/src/components/wardrobe/UserList.tsx index 75c47b2..7341f50 100644 --- a/src/components/wardrobe/UserList.tsx +++ b/src/components/wardrobe/UserList.tsx @@ -1,113 +1,118 @@ -import React, { use, useEffect, useState } from 'react'; -import PushBtn from './stateBtn/PushBtn'; -import FinishBtn from './stateBtn/FinishBtn'; -import UserDropdown from './dropdown/UserDropdown'; +import React, { use, useEffect, useState } from "react"; +import PushBtn from "./stateBtn/PushBtn"; +import FinishBtn from "./stateBtn/FinishBtn"; +import UserDropdown from "./dropdown/UserDropdown"; -export default function UserList({ users }: any) { - const [view, setView] = useState<{ [key: number]: boolean }>({}); - const [items, setItems] = useState(users?.result.content); +export default function UserList({ users, page, size }: any) { + const [view, setView] = useState<{ [key: number]: boolean }>({}); + const [items, setItems] = useState(users?.result.content); - const handleClickOutside = (event: any) => { - if ( - Object.values(view).some(Boolean) && - !event.target.closest('.dropdown-container') - ) { - setView({}); - { - } - } - }; + const handleClickOutside = (event: any) => { + if ( + Object.values(view).some(Boolean) && + !event.target.closest(".dropdown-container") + ) { + setView({}); + { + } + } + }; - const toggleDropdown = (id: number) => { - setView((prev) => ({ - ...prev, - [id]: !prev[id], - })); - }; + const toggleDropdown = (id: number) => { + setView((prev) => ({ + ...prev, + [id]: !prev[id], + })); + }; - useEffect(() => { - document.addEventListener('click', handleClickOutside); - return () => { - document.removeEventListener('click', handleClickOutside); - }; - }, [view]); + useEffect(() => { + document.addEventListener("click", handleClickOutside); + return () => { + document.removeEventListener("click", handleClickOutside); + }; + }, [view]); - useEffect(() => { - if (users) { - setItems(users.result.content); - } - }, [users]); + useEffect(() => { + if (users) { + setItems(users.result.content); + } + }, [users]); - return ( -
- {items?.map((item: any) => ( -
-
-
{item.code}
-
{item.name}
-
- {item.isBoxCollect ? '박스' : '리픽백'} -
+ return ( +
+ {items?.map((item: any) => ( +
+
+
{item.code}
+
{item.name}
+
+ {item.isBoxCollect ? "박스" : "리픽백"} +
-
    toggleDropdown(item.id)} - className="cursor-pointer" - > -
    - {item.status} - {view[item.id] ? ( - - - - ) : ( - - - - )} -
    - {view[item.id] && ( - - )} -
+
    toggleDropdown(item.id)} + className="cursor-pointer" + > +
    + {item.status} + {view[item.id] ? ( + + + + ) : ( + + + + )} +
    + {view[item.id] && ( + + )} +
-
{item.requestDate}
-
- -
-
{item.productStartDate}
-
{item.salesPeriod}
-
{item.settlementRequestDate}
-
{item.settlementCompleteDate}
-
- -
-
- -
-
-
-
- ))} -
- ); +
{item.requestDate}
+
+ +
+
{item.productStartDate}
+
{item.salesPeriod}
+
{item.settlementRequestDate}
+
{item.settlementCompleteDate}
+
+ +
+
+ +
+
+
+
+ ))} +
+ ); } diff --git a/src/components/wardrobe/WardrobeContent.tsx b/src/components/wardrobe/WardrobeContent.tsx index c3e3ae2..66cff7d 100644 --- a/src/components/wardrobe/WardrobeContent.tsx +++ b/src/components/wardrobe/WardrobeContent.tsx @@ -3,7 +3,7 @@ import { useState, useEffect } from "react"; import UserList from "./UserList"; import { getClothingSalesStatus } from "@/api/request"; -export default function WardrobeContent({ users }: any) { +export default function WardrobeContent({ users, page, size }: any) { return (
@@ -22,7 +22,7 @@ export default function WardrobeContent({ users }: any) {
- +
); diff --git a/src/components/wardrobe/dropdown/UserDropdown.tsx b/src/components/wardrobe/dropdown/UserDropdown.tsx index d471802..8dca84e 100644 --- a/src/components/wardrobe/dropdown/UserDropdown.tsx +++ b/src/components/wardrobe/dropdown/UserDropdown.tsx @@ -1,49 +1,52 @@ -import { updateClothingSalesStatus } from '@/api/request'; -import React from 'react'; -import { useState, useEffect } from 'react'; +import { + updateClothingSalesStatus, + getClothingSalesStatus, +} from "@/api/request"; +import React from "react"; +import { useState, useEffect } from "react"; -export default function UserDropdown({ item, setItems }: any) { - const handleSave = async (state: string) => { - try { - await updateClothingSalesStatus(item.id, state); - setItems((prevItems: any) => - prevItems.map((it: any) => - it.id === item.id ? { ...it, status: state } : it - ) - ); - } catch (error) { - console.error('Failed to update tracking number:', error); - } - }; +export default function UserDropdown({ item, setItems, page, size }: any) { + const handleSave = async (state: string) => { + try { + // 상태 업데이트 요청 + await updateClothingSalesStatus(item.id, state); - const stateList = [ - '리픽백 배송', - '수거 중', - '수거 완료(푸시)', - '촬영 중', - '촬영 완료', - '상품화 중', - '상품화 완료', - '상품 등록 완료', - '요청 취소', - '판매 중', - '판매 기간 만료', - ]; - return ( -
-
e.stopPropagation()}> -
- {stateList.map((state) => ( -
  • handleSave(state)} - > - {state} -
    • - ))} -
    -
    -
    - ); + // API를 통해 최신 데이터 가져오기 + const updatedUserList = await getClothingSalesStatus(page, size); // 페이지와 사이즈를 적절히 설정 + setItems(updatedUserList.result.content); // 최신 데이터로 설정 + } catch (error) { + console.error("Failed to update tracking number:", error); + } + }; + + const stateList = [ + "리픽백 배송", + "수거 중", + "수거 완료(푸시)", + "촬영 중", + "촬영 완료", + "상품화 중", + "상품화 완료", + "상품 등록 완료", + "요청 취소", + "판매 중", + "판매 기간 만료", + ]; + return ( +
    +
    e.stopPropagation()}> +
    + {stateList.map((state) => ( +
  • handleSave(state)} + > + {state} +
    • + ))} +
    +
    +
    + ); } From a71bdd12854204e6e0e9033ec74473d375922932 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=98=88=EC=A7=80?= Date: Sun, 10 Nov 2024 10:35:58 +0900 Subject: [PATCH 2/3] =?UTF-8?q?Feat=20:=20=EC=B5=9C=EC=8B=A0=EC=88=9C,=20?= =?UTF-8?q?=EC=98=A4=EB=9E=98=EB=90=9C=20=EC=88=9C=20=EC=A0=95=EB=A0=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/request.tsx | 34 ++++-- src/app/wardrobe/page.tsx | 50 ++++++-- src/components/wardrobe/TopInfo.tsx | 115 +++++++++++------- src/components/wardrobe/WardrobeContent.tsx | 10 +- .../wardrobe/dropdown/UserDropdown.tsx | 20 ++- 5 files changed, 163 insertions(+), 66 deletions(-) diff --git a/src/api/request.tsx b/src/api/request.tsx index 283f871..2a1f8b4 100644 --- a/src/api/request.tsx +++ b/src/api/request.tsx @@ -177,20 +177,30 @@ export const getUserInfo = async (clothingSalesId: number) => { }; export const getClothingSalesStatus = async ( page: string, - size: string - // startDate: string, - // endDate: string + size: string, + type: string = "latest", // 기본값으로 "latest" 설정 + startDate?: string, + endDate?: string ) => { try { - const response = await fetch( - process.env.API_URL + `/clothing-sales/status?page=${page}&size=${size}`, - { - method: "GET", - headers: { - "Content-Type": "application/json", - }, - } - ); + // URL에 동적으로 파라미터 추가 + let url = `${process.env.API_URL}/clothing-sales/status?page=${page}&size=${size}&type=${type}`; + + if (startDate) { + url += `&startDate=${encodeURIComponent(startDate)}`; + } + + if (endDate) { + url += `&endDate=${encodeURIComponent(endDate)}`; + } + + const response = await fetch(url, { + method: "GET", + headers: { + "Content-Type": "application/json", + }, + }); + if (response.ok) { const data = await response.json(); return data; diff --git a/src/app/wardrobe/page.tsx b/src/app/wardrobe/page.tsx index 783d223..6f4e6c0 100644 --- a/src/app/wardrobe/page.tsx +++ b/src/app/wardrobe/page.tsx @@ -9,15 +9,40 @@ function Wardrobe() { const [users, setUsers] = useState(null); const [page, setPage] = useState(0); // 현재 페이지 상태 const size = 10; // 페이지당 아이템 수 + const [startDate, setStartDate] = useState(null); // 시작 날짜 + const [endDate, setEndDate] = useState(null); // 종료 날짜 + const [sortType, setSortType] = useState("latest"); // 정렬 기준 상태 + + const fetchItem = async () => { + const userList = await getClothingSalesStatus( + String(page), + String(size), + sortType, + startDate || undefined, + endDate || undefined + ); + setUsers(userList); + console.log("userlist", userList); + }; // 데이터 가져오기 함수 useEffect(() => { - const fetchItem = async () => { - const userList = await getClothingSalesStatus(String(page), String(size)); - setUsers(userList); - }; fetchItem(); - }, [page]); + }, [page, sortType, startDate, endDate]); + + // 날짜 필터링 변경 함수 + const handleDateFilter = (dates: { + startDate: string | null; + endDate: string | null; + }) => { + setStartDate(dates.startDate); + setEndDate(dates.endDate); + }; + + // 정렬 기준 변경 함수 + const handleSortChange = (sort: string) => { + setSortType(sort); + }; // 페이지 변경 함수 const handlePageChange = (newPage: number) => { @@ -31,8 +56,19 @@ function Wardrobe() {
    - - + + {/* 페이지네이션 버튼 */}
    diff --git a/src/components/wardrobe/TopInfo.tsx b/src/components/wardrobe/TopInfo.tsx index 81368e3..4b0e2a9 100644 --- a/src/components/wardrobe/TopInfo.tsx +++ b/src/components/wardrobe/TopInfo.tsx @@ -1,56 +1,85 @@ -import React from "react"; +import React, { useState } from "react"; + +export default function TopInfo({ total, onDateFilter, onSortChange }: any) { + const [selectedSort, setSelectedSort] = useState("최신순"); + const [isSortDropdownVisible, setIsSortDropdownVisible] = useState(false); + + const handleSortSelection = (sort: string) => { + setSelectedSort(sort); + setIsSortDropdownVisible(false); + onSortChange(sort === "최신순" ? "latest" : "oldest"); + }; -export default function TopInfo({ total }: any) { return ( -
    -
    -
    - 전체
    {total}
    개 +
    +
    +
    +
    + 전체
    {total}
    개 +
    -
    -
    -
    -
    - - - +
    +
    +
    + + + +
    -
    -
    - 검색 -
    +
    + 검색 +
    -
    - 최신순 -
    - - - +
    setIsSortDropdownVisible(!isSortDropdownVisible)} + className="rounded-5pxr border-1pxr border-solid border-dark-gray py-8pxr px-12pxr flex items-center ml-17pxr" + > + {selectedSort} +
    + + + +
    + {isSortDropdownVisible && ( +
    +
    + {["최신순", "오래된 순"].map((sort) => ( +
    handleSortSelection(sort)} + className="h-36pxr hover:bg-circle-gray pt-9pxr pl-17pxr cursor-pointer" + > + {sort} +
    + ))} +
    +
    + )}
    ); } diff --git a/src/components/wardrobe/WardrobeContent.tsx b/src/components/wardrobe/WardrobeContent.tsx index 66cff7d..f705cee 100644 --- a/src/components/wardrobe/WardrobeContent.tsx +++ b/src/components/wardrobe/WardrobeContent.tsx @@ -3,7 +3,13 @@ import { useState, useEffect } from "react"; import UserList from "./UserList"; import { getClothingSalesStatus } from "@/api/request"; -export default function WardrobeContent({ users, page, size }: any) { +export default function WardrobeContent({ + users, + page, + size, + sortType, + onUpdate, +}: any) { return (
    @@ -22,7 +28,7 @@ export default function WardrobeContent({ users, page, size }: any) {
    - +
    ); diff --git a/src/components/wardrobe/dropdown/UserDropdown.tsx b/src/components/wardrobe/dropdown/UserDropdown.tsx index 8dca84e..7f85cef 100644 --- a/src/components/wardrobe/dropdown/UserDropdown.tsx +++ b/src/components/wardrobe/dropdown/UserDropdown.tsx @@ -5,14 +5,30 @@ import { import React from "react"; import { useState, useEffect } from "react"; -export default function UserDropdown({ item, setItems, page, size }: any) { +export default function UserDropdown({ + item, + setItems, + page, + size, + sortType, +}: any) { + const [localSortType, setLocalSortType] = useState(sortType); // 로컬 상태로 유지 + + useEffect(() => { + setLocalSortType(sortType); // 상위 컴포넌트에서 전달된 sortType이 변경될 때 업데이트 + }, [sortType]); + const handleSave = async (state: string) => { try { // 상태 업데이트 요청 await updateClothingSalesStatus(item.id, state); // API를 통해 최신 데이터 가져오기 - const updatedUserList = await getClothingSalesStatus(page, size); // 페이지와 사이즈를 적절히 설정 + const updatedUserList = await getClothingSalesStatus( + page, + size, + localSortType + ); // 페이지와 사이즈를 적절히 설정 setItems(updatedUserList.result.content); // 최신 데이터로 설정 } catch (error) { console.error("Failed to update tracking number:", error); From 903a4c30a5431683ad58f05804f36ca33e594145 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=EC=9D=B4=EC=98=88=EC=A7=80?= Date: Sun, 10 Nov 2024 22:35:01 +0900 Subject: [PATCH 3/3] =?UTF-8?q?Feat=20:=20=EB=82=A0=EC=A7=9C=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=EA=B5=AC=ED=98=84=20=EB=B0=8F=20sorttype=20?= =?UTF-8?q?=ED=95=84=ED=84=B0=EB=A7=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 86 ++++++++++ package.json | 1 + src/components/wardrobe/TopInfo.tsx | 14 +- .../wardrobe/dropdown/DateDropdown.tsx | 150 ++++++++++++++++++ 4 files changed, 249 insertions(+), 2 deletions(-) create mode 100644 src/components/wardrobe/dropdown/DateDropdown.tsx diff --git a/package-lock.json b/package-lock.json index 8203063..5f8e61e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -11,6 +11,7 @@ "classnames": "^2.5.1", "next": "^14.2.5", "react": "^18", + "react-datepicker": "^7.5.0", "react-dom": "^18", "react-dropzone": "^14.3.3", "recharts": "^2.12.7", @@ -108,6 +109,59 @@ "node": "^12.22.0 || ^14.17.0 || >=16.0.0" } }, + "node_modules/@floating-ui/core": { + "version": "1.6.8", + "resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.8.tgz", + "integrity": "sha512-7XJ9cPU+yI2QeLS+FCSlqNFZJq8arvswefkZrYI1yQBbftw6FyrZOxYSh+9S7z7TpeWlRt9zJ5IhM1WIL334jA==", + "license": "MIT", + "dependencies": { + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/dom": { + "version": "1.6.12", + "resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.12.tgz", + "integrity": "sha512-NP83c0HjokcGVEMeoStg317VD9W7eDlGK7457dMBANbKA6GJZdc7rjujdgqzTaz93jkGgc5P/jeWbaCHnMNc+w==", + "license": "MIT", + "dependencies": { + "@floating-ui/core": "^1.6.0", + "@floating-ui/utils": "^0.2.8" + } + }, + "node_modules/@floating-ui/react": { + "version": "0.26.27", + "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.27.tgz", + "integrity": "sha512-jLP72x0Kr2CgY6eTYi/ra3VA9LOkTo4C+DUTrbFgFOExKy3omYVmwMjNKqxAHdsnyLS96BIDLcO2SlnsNf8KUQ==", + "license": "MIT", + "dependencies": { + "@floating-ui/react-dom": "^2.1.2", + "@floating-ui/utils": "^0.2.8", + "tabbable": "^6.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/react-dom": { + "version": "2.1.2", + "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.2.tgz", + "integrity": "sha512-06okr5cgPzMNBy+Ycse2A6udMi4bqwW/zgBF/rwjcNqWkyr82Mcg8b0vjX8OJpZFy/FKjJmw6wV7t44kK6kW7A==", + "license": "MIT", + "dependencies": { + "@floating-ui/dom": "^1.0.0" + }, + "peerDependencies": { + "react": ">=16.8.0", + "react-dom": ">=16.8.0" + } + }, + "node_modules/@floating-ui/utils": { + "version": "0.2.8", + "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.8.tgz", + "integrity": "sha512-kym7SodPp8/wloecOpcmSnWJsK7M0E5Wg8UcFA+uO4B9s5d0ywXOEro/8HM9x0rW+TljRzul/14UYz3TleT3ig==", + "license": "MIT" + }, "node_modules/@humanwhocodes/config-array": { "version": "0.11.14", "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.14.tgz", @@ -1425,6 +1479,16 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/date-fns": { + "version": "3.6.0", + "resolved": "https://registry.npmjs.org/date-fns/-/date-fns-3.6.0.tgz", + "integrity": "sha512-fRHTG8g/Gif+kSh50gaGEdToemgfj74aRX3swtiouboip5JDLAyDE9F11nHMIcvOaXeOC6D7SpNhi7uFyB7Uww==", + "license": "MIT", + "funding": { + "type": "github", + "url": "https://github.com/sponsors/kossnocorp" + } + }, "node_modules/debug": { "version": "4.3.5", "resolved": "https://registry.npmjs.org/debug/-/debug-4.3.5.tgz", @@ -4065,6 +4129,22 @@ "node": ">=0.10.0" } }, + "node_modules/react-datepicker": { + "version": "7.5.0", + "resolved": "https://registry.npmjs.org/react-datepicker/-/react-datepicker-7.5.0.tgz", + "integrity": "sha512-6MzeamV8cWSOcduwePHfGqY40acuGlS1cG//ePHT6bVbLxWyqngaStenfH03n1wbzOibFggF66kWaBTb1SbTtQ==", + "license": "MIT", + "dependencies": { + "@floating-ui/react": "^0.26.23", + "clsx": "^2.1.1", + "date-fns": "^3.6.0", + "prop-types": "^15.8.1" + }, + "peerDependencies": { + "react": "^16.9.0 || ^17 || ^18", + "react-dom": "^16.9.0 || ^17 || ^18" + } + }, "node_modules/react-dom": { "version": "18.3.1", "resolved": "https://registry.npmjs.org/react-dom/-/react-dom-18.3.1.tgz", @@ -4791,6 +4871,12 @@ "url": "https://github.com/sponsors/ljharb" } }, + "node_modules/tabbable": { + "version": "6.2.0", + "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz", + "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew==", + "license": "MIT" + }, "node_modules/tailwindcss": { "version": "3.4.4", "resolved": "https://registry.npmjs.org/tailwindcss/-/tailwindcss-3.4.4.tgz", diff --git a/package.json b/package.json index f2a6648..56b640b 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "classnames": "^2.5.1", "next": "^14.2.5", "react": "^18", + "react-datepicker": "^7.5.0", "react-dom": "^18", "react-dropzone": "^14.3.3", "recharts": "^2.12.7", diff --git a/src/components/wardrobe/TopInfo.tsx b/src/components/wardrobe/TopInfo.tsx index 4b0e2a9..a550e27 100644 --- a/src/components/wardrobe/TopInfo.tsx +++ b/src/components/wardrobe/TopInfo.tsx @@ -1,8 +1,10 @@ import React, { useState } from "react"; +import DateDropdown from "./dropdown/DateDropdown"; export default function TopInfo({ total, onDateFilter, onSortChange }: any) { const [selectedSort, setSelectedSort] = useState("최신순"); const [isSortDropdownVisible, setIsSortDropdownVisible] = useState(false); + const [isDateVisible, setIsDateVisible] = useState(false); const handleSortSelection = (sort: string) => { setSelectedSort(sort); @@ -20,7 +22,10 @@ export default function TopInfo({ total, onDateFilter, onSortChange }: any) {
    -
    +
    setIsDateVisible(!isDateVisible)} + >
    setIsSortDropdownVisible(!isSortDropdownVisible)} - className="rounded-5pxr border-1pxr border-solid border-dark-gray py-8pxr px-12pxr flex items-center ml-17pxr" + className="rounded-5pxr border-1pxr border-solid border-dark-gray py-8pxr px-12pxr flex items-center ml-17pxr cursor-pointer" > {selectedSort}
    @@ -65,6 +70,11 @@ export default function TopInfo({ total, onDateFilter, onSortChange }: any) {
    + {isDateVisible && ( +
    + +
    + )} {isSortDropdownVisible && (
    diff --git a/src/components/wardrobe/dropdown/DateDropdown.tsx b/src/components/wardrobe/dropdown/DateDropdown.tsx new file mode 100644 index 0000000..3a2a841 --- /dev/null +++ b/src/components/wardrobe/dropdown/DateDropdown.tsx @@ -0,0 +1,150 @@ +import React, { useState } from "react"; + +export default function DateDropdown({ onDateFilter }: any) { + const [selectedRange, setSelectedRange] = useState("전체"); + const [isDropdownVisible, setIsDropdownVisible] = useState(false); + const [startDate, setStartDate] = useState( + new Date().toLocaleDateString("en-CA") + ); + const [endDate, setEndDate] = useState( + new Date().toLocaleDateString("en-CA") + ); + + const handleRangeSelection = (range: string) => { + setSelectedRange(range); + setIsDropdownVisible(false); + + const currentDate = new Date(); + let calculatedStartDate: Date | null = null; + + switch (range) { + case "1일": + calculatedStartDate = new Date( + currentDate.setDate(currentDate.getDate() - 1) + ); + break; + case "1주": + calculatedStartDate = new Date( + currentDate.setDate(currentDate.getDate() - 7) + ); + break; + case "1개월": + calculatedStartDate = new Date( + currentDate.setMonth(currentDate.getMonth() - 1) + ); + break; + case "6개월": + calculatedStartDate = new Date( + currentDate.setMonth(currentDate.getMonth() - 6) + ); + break; + case "1년": + calculatedStartDate = new Date( + currentDate.setFullYear(currentDate.getFullYear() - 1) + ); + break; + case "전체": + calculatedStartDate = null; + break; + case "직접입력": + // Reset the start and end dates for manual entry + setStartDate(""); + setEndDate(""); + return; + default: + calculatedStartDate = null; + } + + const formattedStartDate = calculatedStartDate + ? calculatedStartDate.toISOString().split("T")[0] // Format as YYYY-MM-DD + : null; + const formattedEndDate = currentDate.toISOString().split("T")[0]; + + setStartDate(formattedStartDate || new Date().toLocaleDateString("en-CA")); + setEndDate(formattedEndDate); + console.log("Selected Range:", range); + console.log("Start Date:", formattedStartDate); + console.log("End Date:", formattedEndDate); + + onDateFilter({ + startDate: formattedStartDate, + endDate: formattedStartDate ? formattedEndDate : null, + }); + }; + + return ( +
    +
    +
    + 검색 기간 +
    setIsDropdownVisible(!isDropdownVisible)} + > + {selectedRange} + {isDropdownVisible ? ( + + + + ) : ( + + + + )} +
    + {isDropdownVisible && ( +
    + {["전체", "1일", "1주", "1개월", "6개월", "1년", "직접입력"].map( + (range) => ( +
    handleRangeSelection(range)} + > + {range} +
    + ) + )} +
    + )} +
    +
    + setStartDate(e.target.value)} + disabled={selectedRange !== "직접입력"} + className="w-96pxr h-36pxr border-dark-gray bg-white border-1pxr border-solid rounded-8pxr pl-10pxr" + /> +
    -
    + + setEndDate(e.target.value)} + disabled={selectedRange !== "직접입력"} + className="w-96pxr h-36pxr border-dark-gray bg-white border-1pxr border-solid rounded-8pxr pl-10pxr" + /> +
    +
    +
    + ); +}