[Feat/#152]: 우물 아이템 이동 기능 구현

package.json

@@ -21,6 +21,7 @@
     "@sentry/nextjs": "^8.35.0",
     "@svgr/webpack": "^8.1.0",
     "@tanstack/react-query": "^5.40.1",
+    "@types/react-beautiful-dnd": "^13.1.8",
     "axios": "^1.7.2",
     "cookies-next": "^4.2.1",
     "framer-motion": "^11.11.15",
@@ -30,6 +31,7 @@
     "next-auth": "^4.24.7",
     "next-pwa": "^5.6.0",
     "react": "^18.3.1",
+    "react-beautiful-dnd": "^13.1.1",
     "react-dom": "^18",
     "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.53.2",

public/icons/index.ts

@@ -42,6 +42,7 @@ export { default as PlusIcon } from './well/circle-plus.svg';
 export { default as EditIcon } from './well/well-edit.svg';
 export { default as WellAddIcon } from './well/well-add-icon.svg';
 export { default as StoreIcon } from './well/store-button.svg';
+export { default as WellItemMoverIcon } from './well/well-item-mover.svg';
 export { default as WellListIcon } from './well/well-list-icon.svg';
 
 // test

src/app/(store)/mission/page.tsx

@@ -16,7 +16,7 @@ function MissionPage() {
                 <span className='self-end text-body-lg'>1회 10p</span>
               </div>
               <Image
-                src={IMAGES.frog.reading.before}
+                src={IMAGES.frog.add.reading}
                 alt='reading book frog'
                 width={127}
                 height={62}
@@ -33,7 +33,7 @@ function MissionPage() {
               <span className='self-end text-body-lg'>1회 20p</span>
             </div>
             <Image
-              src={IMAGES.frog.reading.after}
+              src={IMAGES.frog.add.done}
               alt='read book frog'
               width={127}
               height={62}

src/components/NavigationBar/NavigationBar.tsx

@@ -47,7 +47,7 @@ function NavigationBar() {
     },
     {
       label: NAV_ITEM.profile.label,
-      href: getPath.profile(userId ?? ''),
+      href: userId ? getPath.profile(userId) : PAGES.PROFILE,
       icon: ProfileIcon,
       navKey: NAV_ITEM.profile.key,
     },

src/constants/images.ts

@@ -23,10 +23,11 @@ export const IMAGES = {
       notfound_page: `${BASE_PATH}/frog/fallback/not-found-frog.webp`,
     },
     first_congrats: `${BASE_PATH}/frog/first-review-congrats.svg`,
-    reading: {
-      before: `${BASE_PATH}/frog/book/before-reading.svg`,
-      after: `${BASE_PATH}/frog/book/after-reading.svg`,
+    add: {
+      reading: `${BASE_PATH}/frog/frog-reading.svg`,
+      done: `${BASE_PATH}/frog/frog-done.svg`,
     },
+    edit_well_frog: `${BASE_PATH}/frog/edit-well-frog.svg`,
     memo_frog: `${BASE_PATH}/frog/memo-frog.webp`,
     first_memo_frog: `${BASE_PATH}/frog/first-memo-frog.webp`,
     more_feed: `${BASE_PATH}/frog/morefeed-frog.svg`,

src/data/ui/bottomSheet.tsx

@@ -120,7 +120,14 @@ export const sheetData: { [key: string]: AlertSheet } = {
     frog: SHEET_FROG.wink,
     description: () => <>추후에 상점이 오픈될 때, 알려드릴게요.</>,
   },
-  add_book: { getTitle: () => <>지금 이 책은...</>, type: 'normal' },
+  add_book: {
+    getTitle: () => <>지금 이 책은...</>,
+    type: 'normal',
+  },
+  edit_well: {
+    getTitle: () => <>무엇을 수정할까요?</>,
+    type: 'normal',
+  },
   select_books: {
     getTitle: () => <>기존 리뷰를 우물에 담을까요?</>,
     type: 'normal',

src/features/Book/components/BottomSheet/StateSelectSheet.tsx

@@ -30,7 +30,7 @@ function StateSelectSheet({
         <span>읽기 전/중이에요</span>
         <div className='flex h-full items-end'>
           <Image
-            src={IMAGES.frog.reading.before}
+            src={IMAGES.frog.add.reading}
             alt='reading'
             width={127}
             height={61}
@@ -45,7 +45,7 @@ function StateSelectSheet({
         <span>다 읽었어요</span>
         <div className='flex h-full items-end'>
           <Image
-            src={IMAGES.frog.reading.after}
+            src={IMAGES.frog.add.done}
             alt='done'
             width={127}
             height={61}

src/features/Well/api/well.api.ts

@@ -23,6 +23,8 @@ import {
   SearchUserWellReq,
   SearchWell,
   SearchWellItem,
+  ChangeWellItemOrderBulkReq,
+  ChangeWellItemOrderBulk,
   GetUserWellItemCount,
 } from '@frolog/frolog-api';
 
@@ -78,8 +80,8 @@ export const getWellItems = async (page: number, well_id: string) => {
   const response = await searchWellItem.fetch({
     well_id,
     page,
+    sort: 'desc',
     limit: WELLITEM_LIMIT,
-    sort: 'newest',
   });
   return response;
 };
@@ -130,6 +132,10 @@ export const deleteThisBook = async (req: DeleteWellItemsByConditionReq) => {
   return response;
 };
 
+export const updateWellItemOrder = async (req: ChangeWellItemOrderBulkReq) => {
+  await new ChangeWellItemOrderBulk(baseOptions).fetch(req);
+};
+
 export const getUserWellItemsCount = async (userId: string) => {
   const response = await getUserWellItems.fetch({ id: userId });
   return response;

src/features/Well/api/well.server.api.ts

@@ -85,7 +85,7 @@ export const getWellItemList = async (wellId: string) => {
       page: 0,
       well_id: wellId,
       limit: WELLITEM_LIMIT,
-      sort: 'newest',
+      sort: 'desc',
     });
 
     return response;

src/features/Well/components/Well/WellDetail.tsx

@@ -0,0 +1,143 @@
+import React, { useEffect, useMemo, useState } from 'react';
+import { useObserver } from '@/hooks/gesture/useObserver';
+import {
+  ChangeWellItemOrderReq,
+  GetWellItemRes,
+  GetWellRes,
+  SearchWellItemRes,
+} from '@frolog/frolog-api';
+import { usePathname } from 'next/navigation';
+import { getPath } from '@/utils/getPath';
+import { useCustomRouter } from '@/hooks/useCustomRouter';
+import { useWellItems } from '../../hooks/useWellItems';
+import WellTitle from './WellTitle';
+import { updateWellItemOrder } from '../../api/well.api';
+import WellItemList from './WellItem/WellItemList';
+import WellOrderEditHeader from './WellHeader/WellOrderEditHeader';
+import WellHeader from './WellHeader/WellHeader';
+
+interface Props {
+  /** 우물 정보 데이터 객체 */
+  wellData: GetWellRes;
+  /** 로그인한 유저인지 여부 */
+  isRootUser: boolean;
+  /** 첫 우물인지 여부 */
+  isDefaultWell?: boolean;
+  /** 우물 순서 변경 모드 여부 */
+  isMovable: boolean;
+  userId: string;
+  initialWellItemList: SearchWellItemRes;
+}
+function WellDetail({
+  userId,
+  wellData,
+  isRootUser,
+  isDefaultWell,
+  isMovable,
+  initialWellItemList,
+}: Props) {
+  const router = useCustomRouter('well');
+  const pathname = usePathname();
+  const { id, name, item_cnt } = wellData;
+
+  const {
+    wellItems,
+    fetchNextPage,
+    hasNextPage,
+    isFetchingNextPage,
+    isEmpty,
+    isFetched,
+  } = useWellItems(wellData.id, initialWellItemList);
+
+  const { setTarget } = useObserver({ hasNextPage, fetchNextPage });
+  const originalItems = useMemo(() => wellItems, [wellItems]);
+  const [items, setItems] = useState<GetWellItemRes[]>([]);
+  const [orderChanges, setOrderChanges] = useState<ChangeWellItemOrderReq[]>(
+    []
+  );
+
+  useEffect(() => {
+    if (originalItems.length) {
+      setItems(originalItems);
+    }
+  }, [originalItems]);
+
+  const handleMoveItem = (result: any) => {
+    const movedItem = items.find((item) => item.id === result.draggableId);
+    if (!movedItem) return;
+
+    const newOrder = items.length - result.destination.index - 1;
+
+    const prevChanges = [...orderChanges];
+    prevChanges.push({
+      well_id: wellData.id,
+      id: result.draggableId,
+      order: newOrder,
+    });
+
+    console.log(prevChanges);
+    setOrderChanges(prevChanges);
+
+    setItems((prevItems) => {
+      const updated = [...prevItems];
+      const [moved] = updated.splice(result.source.index, 1);
+      updated.splice(result.destination.index, 0, moved);
+      return updated;
+    });
+  };
+
+  const handleOrderChange = async () => {
+    try {
+      await updateWellItemOrder({
+        well_id: wellData.id,
+        changes: orderChanges,
+      });
+      setOrderChanges([]);
+      router.replace(getPath.wellDetail(userId, wellData.id));
+    } catch (error) {
+      console.error('순서 저장 실패:', error);
+    }
+  };
+
+  return (
+    <>
+      {isMovable ? (
+        <WellOrderEditHeader
+          onClickCancel={() => router.replace(pathname)}
+          onClickDone={handleOrderChange}
+        />
+      ) : (
+        <WellHeader
+          userId={userId}
+          wellId={wellData.id}
+          isRootUser={isRootUser}
+        />
+      )}
+      <WellTitle
+        title={name}
+        wellId={id}
+        itemCount={item_cnt}
+        isRootUser={isRootUser}
+        isPointing={isDefaultWell && wellItems.length < 2}
+        isMovable={isMovable}
+      />
+
+      <WellItemList
+        wellData={wellData}
+        items={items}
+        userId={userId}
+        wellItems={wellItems}
+        isRootUser={isRootUser}
+        isDefaultWell={isDefaultWell}
+        isMovable={isMovable}
+        isFetchingNextPage={isFetchingNextPage}
+        isFetched={isFetched}
+        isEmpty={isEmpty}
+        setTarget={setTarget}
+        handleMoveItem={handleMoveItem}
+      />
+    </>
+  );
+}
+
+export default WellDetail;