FEAT 상태 변경 관련 간단히, wip (#develop)

Author: createhb21

services/ahhachul.com/public/images/lost112.png

@@ -11,6 +11,7 @@ import type {
   CommentList,
   WithPostId,
   LostFoundEditForm,
+  LostStatus,
 } from '@/types';
 
 export const fetchLostFoundList = async (req: LostFoundListParams) => {
@@ -100,3 +101,21 @@ export const deleteLostFound = async (articleId: number) => {
   // TODO: sentry에 로그 남김
   throw new Error('Unexpected state in Promise.allSettled');
 };
+
+export const updateLostFoundStatus = async (articleId: number, status: LostStatus) => {
+  const [response] = await Promise.allSettled([
+    axiosInstance.patch<ApiResponse<WithPostId>>(`/lost-posts/${articleId}/status`, { status }),
+    sleep(750),
+  ]);
+
+  if (response.status === 'rejected') {
+    throw response.reason;
+  }
+
+  if (response.status === 'fulfilled') {
+    return response.value.data;
+  }
+
+  // TODO: sentry에 로그 남김
+  throw new Error('Unexpected state in Promise.allSettled');
+};

services/ahhachul.com/public/lost112.png

@@ -203,6 +203,15 @@ function PhraseIcon() {
   );
 }
 
+function LostIcon() {
+  return (
+    <svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+      <rect x="3" y="3" width="18" height="18" rx="2" fill="#2ACF6C" />
+      <path d="M10 16.4L6 12.4L7.4 11L10 13.6L16.6 7L18 8.4L10 16.4Z" fill="#FBFBFB" />
+    </svg>
+  );
+}
+
 function CrossIcon() {
   return (
     <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -237,4 +246,5 @@ export {
   WarningIcon,
   PhraseIcon,
   CrossIcon,
+  LostIcon,
 };

services/ahhachul.com/src/apis/request/lostFound.ts

@@ -3,6 +3,7 @@ import useMeasure from 'react-use-measure';
 
 import styled from '@emotion/styled';
 import { useQueryClient } from '@tanstack/react-query';
+import { Check } from 'lucide-react';
 // import { useQueryClient } from '@tanstack/react-query';
 import { AnimatePresence, motion } from 'motion/react';
 import { Drawer } from 'vaul';
@@ -12,20 +13,26 @@ import { sleep } from '@ahhachul/utils';
 import { CloseIcon, DangerIcon, PhraseIcon, WarningIcon } from '@/assets/icons/jsx/icons';
 import { MoreVerticalIcon } from '@/assets/icons/system';
 import { useUser } from '@/hooks/domain';
+import useUpdateLostFound from '@/hooks/domain/lostFound/useUpdateLostFound';
 import { communityKeys, useDeleteCommunity } from '@/services/community';
 import { complaintKeys, useDeleteComplaint } from '@/services/complaint';
 import { lostFoundKeys, useDeleteLostFound } from '@/services/lostFound';
 import { useFlow } from '@/stackflow';
+import { LostStatus } from '@/types';
 
 import * as S from './PostDropEllipsis.styled';
 
 export interface PostDropEllipsisProps {
+  isLost?: boolean;
+  status?: LostStatus;
   articleId: string;
   createdBy: number;
   queryKey: readonly unknown[];
 }
 
 const PostDropEllipsis = ({
+  isLost,
+  status,
   articleId,
   createdBy,
   queryKey,
@@ -66,7 +73,14 @@ const PostDropEllipsis = ({
     switch (view) {
       case 'default':
         return isAuthor ? (
-          <DefaultView setView={setView} handleEdit={handleEdit} />
+          <DefaultView
+            isLost={isLost}
+            status={status}
+            articleId={articleId}
+            setView={setView}
+            handleEdit={handleEdit}
+            handleClose={handleClose}
+          />
         ) : (
           <ReportView handleClose={handleClose} />
         );
@@ -165,18 +179,53 @@ function Header({
 }
 
 function DefaultView({
+  isLost,
+  status,
+  articleId,
   setView,
   handleEdit,
+  handleClose,
 }: {
+  isLost?: boolean;
+  status?: LostStatus;
+  articleId: string;
   setView: (view: string) => void;
   handleEdit: () => void;
+  handleClose: () => void;
 }) {
+  const queryClient = useQueryClient();
+  const { mutate } = useUpdateLostFound();
+  const handleLost = () => {
+    mutate(
+      {
+        articleId: +articleId,
+        status: status === 'COMPLETE' ? 'PROGRESS' : 'COMPLETE',
+      },
+      {
+        onSuccess: () => {
+          handleClose();
+          setTimeout(() => {
+            queryClient.invalidateQueries({
+              queryKey: lostFoundKeys.detail(+articleId),
+            });
+          }, 1000);
+        },
+      },
+    );
+  };
+
   return (
     <>
       <S.DefaultViewHeader>
         <S.DefaultViewTitle>설정</S.DefaultViewTitle>
       </S.DefaultViewHeader>
       <S.ButtonContainer>
+        {isLost && (
+          <S.GreenButton onClick={handleLost}>
+            <Check size={21} color="white" />
+            {status === 'PROGRESS' ? '습득 완료' : '상태 변경'}
+          </S.GreenButton>
+        )}
         <S.Button onClick={handleEdit}>
           <PhraseIcon />
           수정하기

services/ahhachul.com/src/assets/icons/jsx/icons.tsx

@@ -172,7 +172,6 @@ export const DefaultViewHeader = styled.header`
   display: flex;
   height: 72px;
   align-items: center;
-  border-bottom: 1px solid #f7f7f7;
   padding-left: 8px;
   margin-bottom: 16px;
 `;
@@ -194,3 +193,10 @@ export const DangerButton = styled.button`
   background-color: #fff0f0;
   color: #ff3f40;
 `;
+
+export const GreenButton = styled.button`
+  ${buttonBase}
+
+  background-color: #4ade80; /* 초록색 배경 */
+  color: white;
+`;

services/ahhachul.com/src/components/common/postDropEllipsis/PostDropEllipsis.component.tsx

@@ -4,16 +4,18 @@ import { ShareIcon } from '@/assets/icons/system';
 import { UiComponent } from '@/components';
 import { useNativeBridge } from '@/contexts';
 import { lostFoundKeys } from '@/services/lostFound';
+import type { LostStatus } from '@/types';
 import { getSharePageURL } from '@/utils/share';
 
 import * as S from './LostFoundHeaderActions.styled';
 
 interface LostFoundHeaderActionsProps {
   id: number;
+  status: LostStatus;
   createdBy: number;
 }
 
-const LostFoundHeaderActions = ({ id, createdBy }: LostFoundHeaderActionsProps) => {
+const LostFoundHeaderActions = ({ id, status, createdBy }: LostFoundHeaderActionsProps) => {
   const { params, isActive } = useActivity();
   const { bridge, isBridgeInitialized } = useNativeBridge();
 
@@ -34,6 +36,8 @@ const LostFoundHeaderActions = ({ id, createdBy }: LostFoundHeaderActionsProps)
             <ShareIcon />
           </S.ActionButton>
           <UiComponent.PostDropEllipsis
+            isLost
+            status={status}
             articleId={params.id!}
             createdBy={createdBy}
             queryKey={lostFoundKeys.detail(id)}

services/ahhachul.com/src/components/common/postDropEllipsis/PostDropEllipsis.styled.tsx

@@ -1,3 +1,5 @@
+import { LazyLoadImage } from 'react-lazy-load-image-component';
+
 import { formatDateTime, getRandomNumber } from '@ahhachul/utils';
 
 import { LostFoundComponent, UiComponent } from '@/components';
@@ -33,7 +35,11 @@ const LostFoundDetail = ({ id }: LostFoundDetailProps) => {
 
   return (
     <>
-      <LostFoundComponent.LostFoundDetailHeaderActions id={id} createdBy={+post.createdBy} />
+      <LostFoundComponent.LostFoundDetailHeaderActions
+        id={id}
+        status={post.status}
+        createdBy={+post.createdBy}
+      />
 
       <S.ArticleWrapper>
         <UiComponent.ImageCarousel label={post.title} images={images} />
@@ -52,13 +58,42 @@ const LostFoundDetail = ({ id }: LostFoundDetailProps) => {
         {post.isFromLost112 && (
           <>
             <S.Lost112Wrapper>
-              {/* <Image src="/images/lost112.png" alt="lost112-image" width={24} height={24} priority /> */}
+              <LazyLoadImage src="/lost112.png" alt="lost112-image" width={24} height={24} />
               <S.Lost112Text>로스트 112에 등록된 분실물입니다.</S.Lost112Text>
             </S.Lost112Wrapper>
             <Lost112InfoTable post={post} />
           </>
         )}
 
+        {post.status === 'COMPLETE' && (
+          <S.CompleteWrapper>
+            <svg
+              width="24"
+              height="24"
+              viewBox="0 0 24 24"
+              fill="none"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M12 21C16.9706 21 21 16.9706 21 12C21 7.02944 16.9706 3 12 3C7.02944 3 3 7.02944 3 12C3 16.9706 7.02944 21 12 21Z"
+                stroke="white"
+                strokeWidth="2"
+                strokeMiterlimit="10"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+              <path
+                d="M15 10L11 14L9 12"
+                stroke="white"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+            <S.CompleteText>유실물 찾기 완료</S.CompleteText>
+          </S.CompleteWrapper>
+        )}
+
         <S.ContentContainer>
           {post.isFromLost112 || !isLexicalContent(post.content) ? (
             <S.TextContent>{formatLost112Content(post.content)}</S.TextContent>
@@ -70,12 +105,12 @@ const LostFoundDetail = ({ id }: LostFoundDetailProps) => {
         </S.ContentContainer>
       </S.ArticleWrapper>
 
-      <LostFoundComponent.RecommendPostList posts={post.recommendPosts} />
       <LostFoundComponent.LostFoundCommentList
         id={id}
         commentCnt={post.commentCnt}
         isArticleAuthor={isArticleAuthor}
       />
+      <LostFoundComponent.RecommendPostList posts={post.recommendPosts} />
       <LostFoundComponent.CommentInput id={id} />
       <S.Padding />
     </>

services/ahhachul.com/src/components/domain/lostFound/postDetail/headerActions/LostFoundHeaderActions.component.tsx

@@ -4,7 +4,7 @@ import styled from '@emotion/styled';
 export const ArticleWrapper = styled.article``;
 
 export const ContentWrapper = styled.div`
-  padding: 20px 20px 24px;
+  padding: 20px 20px 0 20px;
 `;
 
 export const TitleWrapper = styled.div`
@@ -73,8 +73,27 @@ export const Lost112Text = styled.span`
   `}
 `;
 
+export const CompleteWrapper = styled.div`
+  ${({ theme }) => css`
+    padding: 0 20px;
+    display: flex;
+    align-items: center;
+    height: 48px;
+    width: 100%;
+    gap: 8px;
+    background-color: ${theme.colors['key-color']};
+  `}
+`;
+
+export const CompleteText = styled.span`
+  ${({ theme }) => css`
+    ${theme.fonts.titleSmall};
+    color: ${theme.colors.white};
+  `}
+`;
+
 export const ContentContainer = styled.div`
-  padding: 0 20px;
+  padding: 24px 20px 0;
 `;
 
 export const TextContent = styled.div`

services/ahhachul.com/src/components/domain/lostFound/postDetail/template/LostFoundDetail.component.tsx

@@ -0,0 +1,13 @@
+import { useMutation } from '@tanstack/react-query';
+
+import { updateLostFoundStatus } from '@/apis/request';
+import { LostStatus } from '@/types';
+
+const useUpdateLostFound = () => {
+  return useMutation({
+    mutationFn: ({ articleId, status }: { articleId: number; status: LostStatus }) =>
+      updateLostFoundStatus(articleId, status),
+  });
+};
+
+export default useUpdateLostFound;