채팅으로 버튼, 얼럿 띄우기

Author: jw0202058

src/features/pick/components/DetailBottom/index.tsx

@@ -4,6 +4,8 @@ import { usePatchConfirmPick } from '@/features/pick/apis/usePatchConfirmPick';
 import type { PickStatus } from '@/libs/types/pick';
 import { useNavigate } from 'react-router';
 import { useToast } from '@/common/hooks/useToast';
+import { useState } from 'react';
+import CustomAlert from '@/common/components/CustomAlert';
 
 const PICK_EXPIRED_MESSAGE: Record<Exclude<PickStatus, 'PENDING' | 'CONFIRMED'>, string> = {
   CANCELLED: '취소된 PICK이에요',
@@ -24,11 +26,23 @@ const DetailBottom = ({ id, itemId, isCreator, pickState, chatRoomId }: Props) =
   const { mutate: cancel } = usePatchCancelPick();
   const { mutate: confirm } = usePatchConfirmPick();
   const { openToast } = useToast();
+  const [showAlert, setShowAlert] = useState(false);
+
+  const cancelType = pickState === 'PENDING' ? '거절' : '취소';
+
+  const onNo = () => {
+    setShowAlert(false);
+  };
+
+  const handleAlert = () => {
+    setShowAlert(true);
+  };
 
   const cancelPick = () => {
     cancel(id, {
       onSuccess: () => {
         navigate(`/detail/${itemId}`, { replace: true });
+        setShowAlert(false);
         openToast({ message: 'PICK이 취소되었어요' });
       },
     });
@@ -50,12 +64,12 @@ const DetailBottom = ({ id, itemId, isCreator, pickState, chatRoomId }: Props) =
     <div className={s.Container}>
       {canChangeState ? (
         isCreator ? (
-          <button className={s.Button({ color: 'main' })} onClick={cancelPick}>
+          <button className={s.Button({ color: 'gray' })} onClick={handleAlert}>
             PICK 취소하기
           </button>
         ) : (
           <>
-            <button className={s.Button({ color: 'gray' })} onClick={cancelPick}>
+            <button className={s.Button({ color: 'gray' })} onClick={handleAlert}>
               {pickState === 'PENDING' ? '거절하기' : 'PICK 취소하기'}
             </button>
             {pickState === 'PENDING' && (
@@ -68,6 +82,15 @@ const DetailBottom = ({ id, itemId, isCreator, pickState, chatRoomId }: Props) =
       ) : (
         <div className={s.Button({ color: 'gray' })}>{PICK_EXPIRED_MESSAGE[pickState]}</div>
       )}
+      {showAlert && (
+        <CustomAlert
+          onYes={cancelPick}
+          subTitle="정말 취소하실 건가요?"
+          title={`PICK을 ${cancelType}하면\n더 이상 거래를 할 수 없어요.`}
+          yesBtn="네, 취소할래요"
+          onNo={onNo}
+        />
+      )}
     </div>
   );
 };

src/pages/PickDetailPage/index.tsx

@@ -11,6 +11,7 @@ import getItemInterfaceFromItemDetail from '@/common/utils/getItemInterfaceFromI
 import NotFoundPage from '@/pages/NotFoundPage';
 import CustomHeader from '@/common/components/CustomHeader';
 import DetailBottom from '@/features/pick/components/DetailBottom';
+import { cx } from '@styled-system/css';
 
 interface InfoItemProps {
   title: string;
@@ -37,6 +38,10 @@ const PickDetailPage = () => {
     navigate(`/edit-pick/${id}`);
   };
 
+  const onChatBtnClick = () => {
+    navigate(`/chatroom/${data?.chatRoomId}`);
+  };
+
   if (isError) return <NotFoundPage />;
 
   if (data === undefined || itemData === undefined) return null;
@@ -111,6 +116,10 @@ const PickDetailPage = () => {
             )}
           </div>
         </div>
+        <button className={s.ToChat} onClick={onChatBtnClick}>
+          <div className={cx('mgc_chat_1_fill', s.ChatIcon)} />
+          채팅으로
+        </button>
         <DetailBottom
           id={id}
           itemId={data.itemId}

src/pages/PickDetailPage/style.css.ts

@@ -53,6 +53,34 @@ export const EditButton = css({
   },
 });
 
+export const ChatIcon = css({
+  fontSize: '1.25rem',
+  aspectRatio: '1/1',
+});
+
+export const ToChat = css({
+  display: 'inline-flex',
+  padding: '0.5rem 1rem',
+  justifyContent: 'flex-end',
+  alignItems: 'center',
+  alignSelf: 'flex-end',
+  gap: '0.625rem',
+  margin: '0 1rem 1rem 0',
+
+  borderRadius: '6.25rem',
+  background: 'main-26',
+  w: 'fit-content',
+
+  color: 'main',
+  textAlign: 'center',
+  fontFamily: 'Pretendard',
+  fontSize: '1rem',
+  fontStyle: 'normal',
+  fontWeight: 600,
+  lineHeight: 'normal',
+  letterSpacing: '-0.04rem',
+});
+
 export const Block = css({
   display: 'flex',
   flexDir: 'column',