From 479fa6055e16d3ad065254f026304ce9a85ec677 Mon Sep 17 00:00:00 2001 From: HyunJinNo Date: Tue, 3 Sep 2024 01:19:04 +0900 Subject: [PATCH] =?UTF-8?q?Feat:=20=EC=A0=9C=EB=AA=A9=20=EA=B2=80=EC=83=89?= =?UTF-8?q?=20/=20=ED=83=9C=EA=B7=B8=20=EA=B2=80=EC=83=89=20dropdown=20?= =?UTF-8?q?=EC=83=9D=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../informations/list/InformationSearch.tsx | 96 ++++++++++++++----- .../edit/InformationEditorContainer.tsx | 22 ++++- .../list/InformationSearchContainer.tsx | 41 +++++--- 3 files changed, 119 insertions(+), 40 deletions(-) diff --git a/src/components/informations/list/InformationSearch.tsx b/src/components/informations/list/InformationSearch.tsx index 3cf485d7..238c7086 100644 --- a/src/components/informations/list/InformationSearch.tsx +++ b/src/components/informations/list/InformationSearch.tsx @@ -2,6 +2,7 @@ import { IoIosArrowDown } from "react-icons/io"; import { VscSettings } from "react-icons/vsc"; import InformationFilterModalContainer from "@/containers/informations/list/InformationFilterModalContainer"; import Link from "next/link"; +import Image from "next/image"; interface Props { pathname: string; @@ -9,14 +10,18 @@ interface Props { childCategoryId: string | null; place: string; order: string; - tagName: string; + searchMethod: string; + searchValue: string; modalVisible: boolean; - dropdownVisible: boolean; - onChangeTagName: (value: string) => void; + orderDropdownVisible: boolean; + searchDropdownVisible: boolean; + onChangeSearchValue: (value: string) => void; closeModal: () => void; openModal: () => void; - onDropdownClick: () => void; - searchByTagName: () => void; + onOrderDropdownClick: () => void; + onSearchDropdownClick: () => void; + onSearchClick: () => void; + setSearchMethod: (value: string) => void; } const InformationSearch = ({ @@ -25,14 +30,18 @@ const InformationSearch = ({ childCategoryId, place, order, - tagName, + searchMethod, + searchValue, modalVisible, - dropdownVisible, - onChangeTagName, + orderDropdownVisible, + searchDropdownVisible, + onChangeSearchValue, closeModal, openModal, - onDropdownClick, - searchByTagName, + onOrderDropdownClick, + onSearchDropdownClick, + setSearchMethod, + onSearchClick, }: Props) => { return (
@@ -40,16 +49,55 @@ const InformationSearch = ({ )}
searchByTagName()} + className="relative z-[1] flex flex-row items-center bg-white max-[1024px]:flex-1 max-[744px]:w-full" + action={() => onSearchClick()} > + +
onSearchDropdownClick()} + > + + +
+

|

onChangeTagName(e.target.value)} + placeholder="검색하기" + value={searchValue} + onChange={(e) => onChangeSearchValue(e.target.value)} /> +
onDropdownClick()} + className={`${!orderDropdownVisible && "hidden"} absolute -left-[4.5rem] top-7 z-10 flex w-[8.625rem] flex-col items-center gap-1 rounded-xl bg-white/95 text-gray1 shadow dark:text-slate-400`} + onClick={() => onOrderDropdownClick()} > 최신순 좋아요순 조회순 diff --git a/src/containers/informations/edit/InformationEditorContainer.tsx b/src/containers/informations/edit/InformationEditorContainer.tsx index 7142616c..a20957bb 100644 --- a/src/containers/informations/edit/InformationEditorContainer.tsx +++ b/src/containers/informations/edit/InformationEditorContainer.tsx @@ -28,6 +28,7 @@ const InformationEditorContainer = ({ informationId, data }: Props) => { const inputTagRef = useRef(null); const router = useRouter(); const [loading, setLoading] = useState(false); + const [originalThumbnailUrl, setOriginalThumbnailUrl] = useState(""); // 장소 선택 모달창이 보이는지 여부 const [locationModal, setLocationModal] = useState(false); @@ -95,6 +96,16 @@ const InformationEditorContainer = ({ informationId, data }: Props) => { return; } + const deletedImages = validatedFields.data.deleteImages + .filter((deletedImage) => !editorStore.images.includes(deletedImage)) + .map((deletedImage) => ({ + address: deletedImage, + })); + + if (originalThumbnailUrl !== validatedFields.data.thumbnailImageUrl) { + deletedImages.push({ address: originalThumbnailUrl }); + } + const data: UpdateInformationRequestDto = { title: validatedFields.data.informationTitle, address: validatedFields.data.informationAddress, @@ -110,11 +121,7 @@ const InformationEditorContainer = ({ informationId, data }: Props) => { categoryId: validatedFields.data.categoryId, zoneCategoryNameParent: validatedFields.data.province, zoneCategoryNameChild: validatedFields.data.city, - deleteImages: validatedFields.data.deleteImages - .filter((deletedImage) => !editorStore.images.includes(deletedImage)) - .map((deletedImage) => ({ - address: deletedImage, - })), + deleteImages: deletedImages, thumbNailUrl: validatedFields.data.thumbnailImageUrl, contentImagesUrl: validatedFields.data.contentImagesUrl, tagRegisterRequests: validatedFields.data.hashtags.map((tag) => ({ @@ -177,6 +184,11 @@ const InformationEditorContainer = ({ informationId, data }: Props) => { tips: data.tip.split(";"), }); + setOriginalThumbnailUrl( + data.imageResponses.find((value) => value.imageStatus === "썸네일") + ?.address ?? "", + ); + return () => { initialize(); }; diff --git a/src/containers/informations/list/InformationSearchContainer.tsx b/src/containers/informations/list/InformationSearchContainer.tsx index 122a300f..60ca8e84 100644 --- a/src/containers/informations/list/InformationSearchContainer.tsx +++ b/src/containers/informations/list/InformationSearchContainer.tsx @@ -6,23 +6,31 @@ import { useState } from "react"; const InformationSearchContainer = () => { const [modalVisible, setModalVisible] = useState(false); - const [dropdownVisible, setDropdownVisible] = useState(false); + const [orderDropdownVisible, setOrderDropdownVisible] = + useState(false); const pathname = usePathname(); const searchParams = useSearchParams(); const parentCategoryId = searchParams.get("parentCategoryId")!; const childCategoryId = searchParams.get("childCategoryId"); const place = searchParams.get("place") ?? ""; const order = searchParams.get("order") ?? "latest"; - const [tagName, setTagName] = useState(""); + const [searchValue, setSearchValue] = useState(""); + const [searchMethod, setSearchMethod] = useState("제목"); + const [searchDropdownVisible, setSearchDropdownVisible] = + useState(false); const router = useRouter(); - const onChangeTagName = (value: string) => { - setTagName(value.trim().slice(0, 15)); + const onChangeSearchValue = (value: string) => { + if (searchMethod === "제목") { + setSearchValue(value.slice(0, 50)); + } else { + setSearchValue(value.trim().slice(0, 15)); + } }; - const searchByTagName = () => { + const onSearchClick = () => { router.push( - `${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=${order}${tagName !== "" ? `&tagName=${tagName}` : ""}`, + `${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=${order}${searchValue !== "" ? `${searchMethod === "제목" ? "&title" : "$tagName"}=${searchValue}` : ""}`, ); }; @@ -33,14 +41,25 @@ const InformationSearchContainer = () => { childCategoryId={childCategoryId} place={place} order={order} - tagName={tagName} + searchMethod={searchMethod} + searchValue={searchValue} modalVisible={modalVisible} - dropdownVisible={dropdownVisible} - onChangeTagName={onChangeTagName} + orderDropdownVisible={orderDropdownVisible} + searchDropdownVisible={searchDropdownVisible} + onChangeSearchValue={onChangeSearchValue} closeModal={() => setModalVisible(false)} openModal={() => setModalVisible(true)} - onDropdownClick={() => setDropdownVisible(!dropdownVisible)} - searchByTagName={searchByTagName} + onOrderDropdownClick={() => + setOrderDropdownVisible(!orderDropdownVisible) + } + onSearchDropdownClick={() => + setSearchDropdownVisible(!searchDropdownVisible) + } + onSearchClick={onSearchClick} + setSearchMethod={(value: string) => { + setSearchValue(""); + setSearchMethod(value); + }} /> ); };