Merge pull request #243 from TripInfoWeb/dev_informations

Feat: 정보 태그 검색
TripInfoWeb · Aug 30, 2024 · 0243733 · 0243733
2 parents d00fce3 + 774d925
commit 0243733
Show file tree

Hide file tree

Showing 11 changed files with 82 additions and 26 deletions.
diff --git a/src/app/informations/list/page.tsx b/src/app/informations/list/page.tsx
@@ -39,6 +39,7 @@ export default function page({ searchParams }: Props) {
           childCategoryId={childCategoryId}
           place={searchParams["place"]}
           order={searchParams["order"]}
+          tagName={searchParams["tagName"]}
         />
       </Suspense>
     </div>

diff --git a/src/components/informations/detail/InformationLikeCount.tsx b/src/components/informations/detail/InformationLikeCount.tsx
@@ -2,20 +2,29 @@ import HashSpinner from "@/components/common/HashSpinner";
 import { FaHeart, FaRegHeart } from "react-icons/fa";
 
 interface Props {
+  clickable: boolean;
   loading: boolean;
   likeCount: number;
   isLiked: boolean;
   onLikesClick: () => void;
 }
 
-// hover:text-[#F85E5E]
-
 const InformationLikeCount = ({
+  clickable,
   loading,
   likeCount,
   isLiked,
   onLikesClick,
 }: Props) => {
+  if (!clickable) {
+    return (
+      <div className="flex flex-row items-center gap-1 text-gray2 dark:text-slate-400">
+        <FaRegHeart size={"0.8rem"} />
+        <p className="text-xs">{likeCount}</p>
+      </div>
+    );
+  }
+
   return (
     <div>
       <HashSpinner loading={loading} />

diff --git a/src/components/informations/list/InformationFilterModal.tsx b/src/components/informations/list/InformationFilterModal.tsx
@@ -3,9 +3,9 @@ import { Dispatch, SetStateAction } from "react";
 import { MdClose } from "react-icons/md";
 
 interface Props {
-  place: string;
+  place: string | null;
   order: string;
-  setPlace: Dispatch<SetStateAction<string>>;
+  setPlace: Dispatch<SetStateAction<string | null>>;
   closeModal: () => void;
   onClick: () => void;
 }
@@ -32,6 +32,13 @@ const InformationFilterModal = ({
             지역별
           </h3>
           <div className="flex flex-wrap items-start gap-2 font-medium text-gray1 dark:text-slate-400">
+            <button
+              className={`${place === null ? "border-main bg-main text-white" : ""} rounded-full border-[0.0625rem] border-[#E9EBED] px-3 py-[0.375rem] text-sm font-medium hover:scale-105 hover:border-main hover:bg-main hover:text-white dark:border-slate-400 dark:bg-slate-600`}
+              type="button"
+              onClick={() => setPlace(null)}
+            >
+              전체
+            </button>
             {LOCATION.map((location, i) => (
               <button
                 key={i}

diff --git a/src/components/informations/list/InformationList.tsx b/src/components/informations/list/InformationList.tsx
@@ -10,10 +10,11 @@ async function getInformationList(
   childCategoryId: number,
   place?: string,
   order?: string,
+  tagName?: string,
 ) {
   const cookie = cookies().get("access_token");
   const response = await fetch(
-    `${process.env.BACKEND_URL}/api/informations?page=${page}&parentCategoryId=${parentCategoryId}${childCategoryId > 0 ? `&childCategoryId=${childCategoryId}` : ""}${order !== undefined && order !== "latest" ? `&sort=${order}` : ""}${place !== undefined ? `&zoneCategory=${LOCATION_ID[place]}` : ""}`,
+    `${process.env.BACKEND_URL}/api/informations${tagName !== undefined ? `/tag/search` : ""}?page=${page}&parentCategoryId=${parentCategoryId}${childCategoryId > 0 ? `&childCategoryId=${childCategoryId}` : ""}${place !== undefined ? `&zoneCategoryId=${LOCATION_ID[place]}` : ""}${order !== undefined && order !== "latest" ? `&sort=${order}` : ""}${tagName !== undefined ? `&tagName=${encodeURIComponent(tagName)}` : ""}`,
     {
       method: "GET",
       headers: {
@@ -37,6 +38,7 @@ interface Props {
   childCategoryId: number;
   place?: string;
   order?: string;
+  tagName?: string;
 }
 
 const InformationList = async ({
@@ -45,13 +47,15 @@ const InformationList = async ({
   childCategoryId,
   place,
   order,
+  tagName,
 }: Props) => {
   const data = await getInformationList(
     page - 1,
     parentCategoryId,
     childCategoryId,
     place,
     order,
+    tagName,
   );
 
   return (

diff --git a/src/components/informations/list/InformationPagination.tsx b/src/components/informations/list/InformationPagination.tsx
@@ -7,16 +7,22 @@ interface Props {
   currentPage: number;
   totalPages: number;
   pathname: string;
+  parentCategoryId: string | null;
+  childCategoryId: string | null;
   place: string | null;
   order: string | null;
+  tagName: string | null;
 }
 
 const InformationPagination = ({
   currentPage,
   totalPages,
   pathname,
+  parentCategoryId,
+  childCategoryId,
   place,
   order,
+  tagName,
 }: Props) => {
   const pageList = Array.from({ length: totalPages }, (_, index) => index + 1);
   const leftPage = Math.max(currentPage - 2, 1);
@@ -26,7 +32,7 @@ const InformationPagination = ({
     <div className="flex flex-row items-center justify-center gap-3 py-12 text-sm text-black dark:text-slate-200">
       {currentPage > 1 ? (
         <Link
-          href={`${pathname}?page=1${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}`}
+          href={`${pathname}?page=1${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}${tagName !== null ? `&tagName=${tagName}` : ""}`}
         >
           <MdFirstPage
             className="cursor-pointer hover:text-main"
@@ -38,7 +44,7 @@ const InformationPagination = ({
       )}
       {currentPage > 1 ? (
         <Link
-          href={`${pathname}?page=${currentPage - 1}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}`}
+          href={`${pathname}?page=${currentPage - 1}${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}${tagName !== null ? `&tagName=${tagName}` : ""}`}
         >
           <IoIosArrowBack className="cursor-pointer hover:text-main" />
         </Link>
@@ -49,7 +55,7 @@ const InformationPagination = ({
         <div className="flex flex-row items-center gap-3">
           <Link
             className="flex h-6 w-6 items-center justify-center hover:text-main"
-            href={`${pathname}?page=1${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}`}
+            href={`${pathname}?page=1${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}${tagName !== null ? `&tagName=${tagName}` : ""}`}
           >
             1
           </Link>
@@ -60,7 +66,7 @@ const InformationPagination = ({
         <Link
           key={pageNumber}
           className={`${pageNumber === currentPage ? "bg-main text-white" : ""} flex h-6 w-6 items-center justify-center rounded-full hover:text-main`}
-          href={`${pathname}?page=${pageNumber}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}`}
+          href={`${pathname}?page=${pageNumber}${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}${tagName !== null ? `&tagName=${tagName}` : ""}`}
         >
           {pageNumber}
         </Link>
@@ -70,15 +76,15 @@ const InformationPagination = ({
           <AiOutlineEllipsis />
           <Link
             className="flex h-6 w-6 items-center justify-center hover:text-main"
-            href={`${pathname}?page=${totalPages}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}`}
+            href={`${pathname}?page=${totalPages}${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}${tagName !== null ? `&tagName=${tagName}` : ""}`}
           >
             {totalPages}
           </Link>
         </div>
       )}
       {currentPage < totalPages ? (
         <Link
-          href={`${pathname}?page=${currentPage + 1}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}`}
+          href={`${pathname}?page=${currentPage + 1}${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}${tagName !== null ? `&tagName=${tagName}` : ""}`}
         >
           <IoIosArrowForward className="cursor-pointer hover:text-main" />
         </Link>
@@ -87,7 +93,7 @@ const InformationPagination = ({
       )}
       {currentPage < totalPages ? (
         <Link
-          href={`${pathname}?page=${totalPages}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}`}
+          href={`${pathname}?page=${totalPages}${parentCategoryId !== null ? `&parentCategoryId=${parentCategoryId}` : ""}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}${order !== null ? `&order=${order}` : ""}${tagName !== null ? `&tagName=${tagName}` : ""}`}
         >
           <MdLastPage
             className="cursor-pointer hover:text-main"

diff --git a/src/components/informations/list/InformationSearch.tsx b/src/components/informations/list/InformationSearch.tsx
@@ -9,11 +9,14 @@ interface Props {
   childCategoryId: string | null;
   place: string;
   order: string;
+  tagName: string;
   modalVisible: boolean;
   dropdownVisible: boolean;
+  onChangeTagName: (value: string) => void;
   closeModal: () => void;
   openModal: () => void;
   onDropdownClick: () => void;
+  searchByTagName: () => void;
 }
 
 const InformationSearch = ({
@@ -22,24 +25,30 @@ const InformationSearch = ({
   childCategoryId,
   place,
   order,
+  tagName,
   modalVisible,
   dropdownVisible,
+  onChangeTagName,
   closeModal,
   openModal,
   onDropdownClick,
+  searchByTagName,
 }: Props) => {
   return (
     <div className="flex flex-row items-center gap-4 max-[1024px]:w-full max-[1024px]:justify-between max-[744px]:flex-col max-[744px]:items-start">
       {modalVisible && (
         <InformationFilterModalContainer closeModal={closeModal} />
       )}
-      <form className="max-[1024px]:flex-1 max-[744px]:w-full">
+      <form
+        className="max-[1024px]:flex-1 max-[744px]:w-full"
+        action={() => searchByTagName()}
+      >
         <input
           className="w-64 border-b-[0.0625rem] border-black bg-transparent bg-search-icon bg-[length:1rem] bg-[left_0rem_top_0.1rem] bg-no-repeat pb-1 pl-8 text-sm outline-none placeholder:font-medium placeholder:text-gray2 max-[1024px]:w-full dark:border-slate-200 dark:bg-search-icon-dark-mode"
           type="text"
-          autoComplete="search"
-          name="search"
-          placeholder="제목 또는 키워드를 검색해보세요."
+          placeholder="태그로 검색해보세요."
+          value={tagName}
+          onChange={(e) => onChangeTagName(e.target.value)}
         />
       </form>
       <div className="flex flex-row items-center gap-4 text-sm font-medium">
@@ -55,7 +64,7 @@ const InformationSearch = ({
             className="flex flex-row items-center text-gray1 hover:text-main dark:text-slate-400"
             onClick={() => onDropdownClick()}
           >
-            <p>{`${order === "latest" ? "최신순" : order === "views" ? "좋아요순" : "조회순"}`}</p>
+            <p>{`${order === "latest" ? "최신순" : order === "likes" ? "좋아요순" : "조회순"}`}</p>
             <IoIosArrowDown />
           </button>
           <div
@@ -64,21 +73,21 @@ const InformationSearch = ({
           >
             <Link
               className={`${order === "latest" && "text-main"} hover:text-main`}
-              href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=latest`}
+              href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=latest${tagName !== "" ? `&tagName=${tagName}` : ""}`}
               scroll={false}
             >
               최신순
             </Link>
             <Link
               className={`${order === "likes" && "text-main"} hover:text-main`}
-              href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=likes`}
+              href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=likes${tagName !== "" ? `&tagName=${tagName}` : ""}`}
               scroll={false}
             >
               좋아요순
             </Link>
             <Link
               className={`${order === "views" && "text-main"} hover:text-main`}
-              href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=views`}
+              href={`${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=views${tagName !== "" ? `&tagName=${tagName}` : ""}`}
               scroll={false}
             >
               조회순

diff --git a/src/components/informations/write/InformationEditor.tsx b/src/components/informations/write/InformationEditor.tsx
@@ -143,7 +143,7 @@ const InformationEditor = ({
             disabled={editorStore.hashtags.length >= 10}
             onKeyUp={onChangeHashTagHandler}
             onKeyDown={(e) => {
-              if (e.key === "#") {
+              if (e.key === "#" || e.key === " ") {
                 e.preventDefault();
                 e.persist();
               } else if (

diff --git a/src/containers/informations/detail/InformationLikeCountContainer.tsx b/src/containers/informations/detail/InformationLikeCountContainer.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import InformationLikeCount from "@/components/informations/detail/InformationLikeCount";
+import useAuthStore from "@/store/authStore";
 import useInformationLikeStore from "@/store/informationLikeStore";
 import { useEffect, useState } from "react";
 
@@ -15,8 +16,7 @@ const InformationLikeCountContainer = ({
   likeCount,
   isLike,
 }: Props) => {
-  // const [likes, setLikes] = useState<number>(likeCount);
-  // const [isLiked, setIsLiked] = useState<boolean>(isLike);
+  const userId = useAuthStore().id;
   const informationLikeStore = useInformationLikeStore();
   const [loading, setLoading] = useState<boolean>(false);
 
@@ -81,6 +81,7 @@ const InformationLikeCountContainer = ({
 
   return (
     <InformationLikeCount
+      clickable={userId > 0}
       loading={loading}
       likeCount={informationLikeStore.likeCount}
       isLiked={informationLikeStore.isLiked}

diff --git a/src/containers/informations/list/InformationFilterModalContainer.tsx b/src/containers/informations/list/InformationFilterModalContainer.tsx
@@ -12,14 +12,15 @@ const InformationFilterModalContainer = ({ closeModal }: Props) => {
   const searchParams = useSearchParams();
   const parentCategoryId = searchParams.get("parentCategoryId");
   const childCategoryId = searchParams.get("childCategoryId");
-  const [place, setPlace] = useState<string>(searchParams.get("place") ?? "");
+  const [place, setPlace] = useState<string | null>(searchParams.get("place"));
   const order = searchParams.get("order") ?? "latest";
+  const tagName = searchParams.get("tagName");
   const router = useRouter();
   const pathname = usePathname();
 
   const onClick = () => {
     router.push(
-      `${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}&place=${place}&order=${order}`,
+      `${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== null ? `&place=${place}` : ""}&order=${order}${tagName !== null ? `&tagName=${tagName}` : ""}`,
       {
         scroll: false,
       },

diff --git a/src/containers/informations/list/InformationPaginationContainer.tsx b/src/containers/informations/list/InformationPaginationContainer.tsx
@@ -17,8 +17,11 @@ const InformationPaginationContainer = ({ currentPage, totalPages }: Props) => {
       currentPage={currentPage}
       totalPages={totalPages}
       pathname={pathname}
+      parentCategoryId={searchParams.get("parentCategoryId")}
+      childCategoryId={searchParams.get("childCategoryId")}
       place={searchParams.get("place")}
       order={searchParams.get("order")}
+      tagName={searchParams.get("tagName")}
     />
   );
 };

diff --git a/src/containers/informations/list/InformationSearchContainer.tsx b/src/containers/informations/list/InformationSearchContainer.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import InformationSearch from "@/components/informations/list/InformationSearch";
-import { usePathname, useSearchParams } from "next/navigation";
+import { usePathname, useRouter, useSearchParams } from "next/navigation";
 import { useState } from "react";
 
 const InformationSearchContainer = () => {
@@ -13,6 +13,18 @@ const InformationSearchContainer = () => {
   const childCategoryId = searchParams.get("childCategoryId");
   const place = searchParams.get("place") ?? "";
   const order = searchParams.get("order") ?? "latest";
+  const [tagName, setTagName] = useState<string>("");
+  const router = useRouter();
+
+  const onChangeTagName = (value: string) => {
+    setTagName(value.slice(0, 15));
+  };
+
+  const searchByTagName = () => {
+    router.push(
+      `${pathname}?page=1&parentCategoryId=${parentCategoryId}${childCategoryId !== null ? `&childCategoryId=${childCategoryId}` : ""}${place !== "" ? `&place=${place}` : ""}&order=${order}${tagName !== "" ? `&tagName=${tagName}` : ""}`,
+    );
+  };
 
   return (
     <InformationSearch
@@ -21,11 +33,14 @@ const InformationSearchContainer = () => {
       childCategoryId={childCategoryId}
       place={place}
       order={order}
+      tagName={tagName}
       modalVisible={modalVisible}
       dropdownVisible={dropdownVisible}
+      onChangeTagName={onChangeTagName}
       closeModal={() => setModalVisible(false)}
       openModal={() => setModalVisible(true)}
       onDropdownClick={() => setDropdownVisible(!dropdownVisible)}
+      searchByTagName={searchByTagName}
     />
   );
 };