Fix: 알림, 검색, 상세페이지 디자인 및 로직 수정

src/app/_api/reaction/Reaction.ts

@@ -0,0 +1,8 @@
+import axiosInstance from '@/lib/axios/axiosInstance';
+import { ReactionType } from '@/lib/types/reactionType';
+
+const reaction = async (listId: number, type: ReactionType) => {
+  return await axiosInstance.post(`/lists/${listId}/reaction`, { reaction: type });
+};
+
+export default reaction;

src/app/_api/search/getSearchListResult.ts

@@ -4,10 +4,10 @@ interface GetSearchListResultType {
   cursorId: number | undefined | null;
   sort: string;
   keyword: string;
-  category: string;
+  categoryCode: string;
 }
 
-async function getSearchListResult({ sort, keyword, category, cursorId }: GetSearchListResultType) {
+async function getSearchListResult({ sort, keyword, categoryCode, cursorId }: GetSearchListResultType) {
   const params = new URLSearchParams({
     size: '6',
   });
@@ -17,7 +17,7 @@ async function getSearchListResult({ sort, keyword, category, cursorId }: GetSea
   }
 
   const response = await axiosInstance.get(
-    `/lists/search?keyword=${keyword}&sort=${sort}&category=${category}&${params.toString()}`
+    `/lists/search?keyword=${keyword}&sort=${sort}&categoryCode=${categoryCode}&${params.toString()}`
   );
 
   return response.data;

src/app/_api/search/getSearchUserResult.ts

@@ -1,14 +1,21 @@
 import axiosInstance from '@/lib/axios/axiosInstance';
 
 interface GetSearchUserResultType {
+  // cursorId: number | undefined | null;
+  page: number | undefined | null;
   keyword: string;
 }
 
-async function getSearchUserResult({ keyword }: GetSearchUserResultType) {
+async function getSearchUserResult({ keyword, page }: GetSearchUserResultType) {
+  console.log('page:::', page);
   const params = new URLSearchParams({
     size: '3',
   });
 
+  if (page) {
+    params.append('page', page.toString());
+  }
+
   const response = await axiosInstance.get(`/users?search=${keyword}&${params.toString()}`);
 
   return response.data;

src/app/list/[listId]/_components/ListDetailInner/CollectButton.css.ts

@@ -5,6 +5,7 @@ export const myCollectWrapper = style({
   flexDirection: 'column',
   justifyContent: 'center',
   alignItems: 'center',
+  gap: '6px',
 });
 
 export const collectWrapper = style([
@@ -13,3 +14,10 @@ export const collectWrapper = style([
     cursor: 'pointer',
   },
 ]);
+
+export const collectTextWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: 'center',
+});

src/app/list/[listId]/_components/ListDetailInner/CollectButton.tsx

@@ -8,8 +8,8 @@ import { useUser } from '@/store/useUser';
 import numberFormatter from '@/lib/utils/numberFormatter';
 import collectList from '@/app/_api/collect/__collectList';
 import toasting from '@/lib/utils/toasting';
-import CollectIcon from '/public/icons/collect.svg';
-import CollectedIcon from '/public/icons/collected.svg';
+import BookmarkIcon from '/public/icons/ver3/bookmark.svg';
+import BookmarkedIcon from '/public/icons/collected.svg';
 import Modal from '@/components/Modal/Modal';
 import LoginModal from '@/components/login/LoginModal';
 import useBooleanOutput from '@/hooks/useBooleanOutput';
@@ -74,7 +74,7 @@ const CollectButton = ({ data }: { data: CollectProps }) => {
     return (
       <>
         <div className={styles.collectWrapper}>
-          <CollectIcon onClick={handleSetOn} />
+          <BookmarkIcon onClick={handleSetOn} />
         </div>
         {isOn && (
           <Modal handleModalClose={handleSetOff} size="large">
@@ -89,15 +89,22 @@ const CollectButton = ({ data }: { data: CollectProps }) => {
   if (loginUser?.id === data.ownerId) {
     return (
       <div className={styles.myCollectWrapper}>
-        <CollectedIcon />
-        <div>{numberFormatter(data.collectCount, 'ko') ?? 0}</div>
+        <BookmarkIcon />
+
+        <div className={styles.collectTextWrapper}>
+          <p>콜렉트</p>
+          {loginUser?.id === data.ownerId && <p>({numberFormatter(data.collectCount, 'ko') ?? 0})</p>}
+        </div>
       </div>
     );
   }
 
   return (
     <div className={styles.collectWrapper} onClick={handleCollect}>
-      {data.isCollected ? <CollectedIcon /> : <CollectIcon />}
+      {data.isCollected ? <BookmarkedIcon width={24} height={24} /> : <BookmarkIcon />}
+      <div className={styles.collectTextWrapper}>
+        <p>콜렉트</p>
+      </div>
     </div>
   );
 };