From 31c0df72ad1e108193879c78e5962da96d8b6977 Mon Sep 17 00:00:00 2001 From: YouSooA Date: Wed, 28 Jun 2023 02:33:27 +0900 Subject: [PATCH 01/10] =?UTF-8?q?refactor:=20=EC=83=81=ED=92=88=20?= =?UTF-8?q?=EC=83=81=EC=84=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80=20Header=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1=20(#1?= =?UTF-8?q?71)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - ProductDetailMain에 있던 Header를 분리 --- .../ProductDetailHeader/index.tsx | 20 +++++++++++++++++++ .../ProductDetailHeader/style.ts | 14 +++++++++++++ .../ProductDetail/ProductDetailMain/index.tsx | 10 ---------- .../ProductDetail/ProductDetailMain/style.ts | 11 ---------- fe/src/pages/ProductDetail/index.tsx | 2 ++ 5 files changed, 36 insertions(+), 21 deletions(-) create mode 100644 fe/src/components/ProductDetail/ProductDetailHeader/index.tsx create mode 100644 fe/src/components/ProductDetail/ProductDetailHeader/style.ts diff --git a/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx b/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx new file mode 100644 index 000000000..41a54e23f --- /dev/null +++ b/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx @@ -0,0 +1,20 @@ +import { useNavigate } from 'react-router-dom'; + +import { ICON_NAME } from '@constants/iconName'; + +import Icon from '@components/common/Icon'; +import * as S from './style'; + +const ProductDetailHeader = () => { + const navigate = useNavigate(); + return ( + + + + + ); +}; + +export default ProductDetailHeader; diff --git a/fe/src/components/ProductDetail/ProductDetailHeader/style.ts b/fe/src/components/ProductDetail/ProductDetailHeader/style.ts new file mode 100644 index 000000000..6f094d1c1 --- /dev/null +++ b/fe/src/components/ProductDetail/ProductDetailHeader/style.ts @@ -0,0 +1,14 @@ +import styled from 'styled-components'; + +const Header = styled.header` + display: flex; + justify-content: space-between; + align-items: center; + position: fixed; + + width: 100%; + height: 44px; + padding: 16px; +`; + +export { Header }; diff --git a/fe/src/components/ProductDetail/ProductDetailMain/index.tsx b/fe/src/components/ProductDetail/ProductDetailMain/index.tsx index d1677c667..f2862f7ab 100644 --- a/fe/src/components/ProductDetail/ProductDetailMain/index.tsx +++ b/fe/src/components/ProductDetail/ProductDetailMain/index.tsx @@ -1,5 +1,4 @@ import { useState } from 'react'; -import { useNavigate } from 'react-router-dom'; import { ICON_NAME } from '@constants/index'; import { getTextWithTimeStamp } from '@utils/index'; @@ -35,17 +34,8 @@ const ProductDetailMain = ({ }: ProductDetailMainProps) => { const [isModalOpen, setIsModalOpen] = useState(false); - const navigate = useNavigate(); - return ( <> - - - - - diff --git a/fe/src/components/ProductDetail/ProductDetailMain/style.ts b/fe/src/components/ProductDetail/ProductDetailMain/style.ts index 5b465c6c4..4f4ee165f 100644 --- a/fe/src/components/ProductDetail/ProductDetailMain/style.ts +++ b/fe/src/components/ProductDetail/ProductDetailMain/style.ts @@ -2,16 +2,6 @@ import styled, { css } from 'styled-components'; import Button from '@components/common/Button'; -const Header = styled.header` - display: flex; - justify-content: space-between; - align-items: center; - position: fixed; - - width: 100%; - height: 44px; - padding: 16px; -`; const Product = styled.section` overflow-y: scroll; @@ -186,7 +176,6 @@ const ChattingDetailButton = styled(Button)` `; export { - Header, Product, ProductInfo, ProductImgListLayout, diff --git a/fe/src/pages/ProductDetail/index.tsx b/fe/src/pages/ProductDetail/index.tsx index 8c49309d8..5cb361e84 100644 --- a/fe/src/pages/ProductDetail/index.tsx +++ b/fe/src/pages/ProductDetail/index.tsx @@ -5,6 +5,7 @@ import { REQUEST_URL } from '@constants/index'; import useFetch, { REQUEST_METHOD } from '@hooks/useFetch'; +import ProductDetailHeader from '@components/ProductDetail/ProductDetailHeader'; import ProductDetailMain from '@components/ProductDetail/ProductDetailMain'; import ProductDetailToolBar from '@components/ProductDetail/ProductDetailToolBar'; @@ -107,6 +108,7 @@ const ProductDetail = () => { {responseState === 'LOADING' &&
loading
} {responseState === 'SUCCESS' && postData && ( <> + Date: Wed, 28 Jun 2023 02:39:42 +0900 Subject: [PATCH 02/10] =?UTF-8?q?feat:=20=EA=B5=AC=EB=A7=A4=EC=9E=90?= =?UTF-8?q?=EC=9D=BC=20=EA=B2=BD=EC=9A=B0,=20Header=EC=9D=98=20[=EB=8D=94?= =?UTF-8?q?=EB=B3=B4=EA=B8=B0]=20=EB=B2=84=ED=8A=BC=EC=9D=B4=20=EC=97=86?= =?UTF-8?q?=EB=8B=A4=20(#171)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProductDetail/ProductDetailHeader/index.tsx | 8 ++++++-- fe/src/pages/ProductDetail/index.tsx | 2 +- 2 files changed, 7 insertions(+), 3 deletions(-) diff --git a/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx b/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx index 41a54e23f..fee076c5e 100644 --- a/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx +++ b/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx @@ -5,14 +5,18 @@ import { ICON_NAME } from '@constants/iconName'; import Icon from '@components/common/Icon'; import * as S from './style'; -const ProductDetailHeader = () => { +interface ProductDetailHeaderProps { + isSeller: boolean; +} + +const ProductDetailHeader = ({ isSeller }: ProductDetailHeaderProps) => { const navigate = useNavigate(); return ( - + {isSeller && } ); }; diff --git a/fe/src/pages/ProductDetail/index.tsx b/fe/src/pages/ProductDetail/index.tsx index 5cb361e84..8a99a57d9 100644 --- a/fe/src/pages/ProductDetail/index.tsx +++ b/fe/src/pages/ProductDetail/index.tsx @@ -108,7 +108,7 @@ const ProductDetail = () => { {responseState === 'LOADING' &&
loading
} {responseState === 'SUCCESS' && postData && ( <> - + Date: Wed, 28 Jun 2023 03:08:03 +0900 Subject: [PATCH 03/10] =?UTF-8?q?feat:=20Header=EC=9D=98=20[=EB=8D=94?= =?UTF-8?q?=EB=B3=B4=EA=B8=B0]=20=EB=B2=84=ED=8A=BC=EC=9D=84=20=ED=81=B4?= =?UTF-8?q?=EB=A6=AD=ED=95=98=EB=A9=B4,=20modal=20=EC=B0=BD=EC=9D=B4=20?= =?UTF-8?q?=EB=82=98=ED=83=80=EB=82=9C=EB=8B=A4=20(#171)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProductDetailHeader/index.tsx | 23 ++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx b/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx index fee076c5e..fa1a6a5c0 100644 --- a/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx +++ b/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx @@ -1,8 +1,11 @@ +import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { ICON_NAME } from '@constants/iconName'; import Icon from '@components/common/Icon'; +import Modal from '@components/common/Modal'; +import ModalPortal from '@components/ModalPortal'; import * as S from './style'; interface ProductDetailHeaderProps { @@ -10,13 +13,31 @@ interface ProductDetailHeaderProps { } const ProductDetailHeader = ({ isSeller }: ProductDetailHeaderProps) => { + const [isModalOpen, setIsModalOpen] = useState(false); + const navigate = useNavigate(); + return ( - {isSeller && } + {isSeller && ( + + )} + {isModalOpen && ( + + console.log('게시글 수정') }, + { text: '삭제', colorType: 'warning', handler: () => console.log('삭제') }, + ]} + closeModalHandler={() => setIsModalOpen(false)} + /> + + )} ); }; From f27582468411ef2808d12bf0db38b7a456464a56 Mon Sep 17 00:00:00 2001 From: YouSooA Date: Wed, 28 Jun 2023 14:02:51 +0900 Subject: [PATCH 04/10] =?UTF-8?q?feat:=20Popup=20=EA=B3=B5=ED=86=B5=20?= =?UTF-8?q?=EC=BB=B4=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EC=83=9D=EC=84=B1=20(#1?= =?UTF-8?q?71)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fe/src/components/common/Popup/index.tsx | 20 +++++++++++ fe/src/components/common/Popup/style.ts | 44 ++++++++++++++++++++++++ 2 files changed, 64 insertions(+) create mode 100644 fe/src/components/common/Popup/index.tsx create mode 100644 fe/src/components/common/Popup/style.ts diff --git a/fe/src/components/common/Popup/index.tsx b/fe/src/components/common/Popup/index.tsx new file mode 100644 index 000000000..97755a225 --- /dev/null +++ b/fe/src/components/common/Popup/index.tsx @@ -0,0 +1,20 @@ +import * as S from './style'; + +interface PopupProps { + text: string; + children: React.ReactNode; +} + +const Popup = ({ text, children }: PopupProps) => { + return ( + <> + + {text} + {children} + + + + ); +}; + +export default Popup; diff --git a/fe/src/components/common/Popup/style.ts b/fe/src/components/common/Popup/style.ts new file mode 100644 index 000000000..f6d0d4718 --- /dev/null +++ b/fe/src/components/common/Popup/style.ts @@ -0,0 +1,44 @@ +import styled from 'styled-components'; + +const Popup = styled.div` + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + gap: 15px; + position: fixed; + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + + width: 80%; + padding: 30px 20px; + + background-color: ${({ theme }) => theme.colors.neutral.background.default}; + border-radius: 15px; + + font-size: ${({ theme }) => theme.fonts.callout.fontSize}; + font-weight: ${({ theme }) => theme.fonts.callout.fontWeight}; + line-height: ${({ theme }) => theme.fonts.callout.lineHeight}; + color: ${({ theme }) => theme.colors.neutral.text.strong}; + + z-index: 20; +`; + +const Overlay = styled.div` + position: fixed; + top: 0; + left: 0; + right: 0; + bottom: 0; + overflow: auto; + + width: 100%; + height: 100%; + + background-color: ${({ theme }) => theme.colors.neutral.overLay}; + + z-index: 15; +`; + +export { Popup, Overlay }; From af3d091a25c7ef5ec698132d2e3f8d13b0395379 Mon Sep 17 00:00:00 2001 From: YouSooA Date: Wed, 28 Jun 2023 14:20:04 +0900 Subject: [PATCH 05/10] =?UTF-8?q?feat:=20Popup=EC=9D=98=20button=20?= =?UTF-8?q?=EB=B0=B0=EC=B9=98=20=EC=A0=95=EB=A0=AC=ED=95=98=EB=8A=94=20?= =?UTF-8?q?=EC=9A=94=EC=86=8C=20=EC=83=9D=EC=84=B1=20(#171)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - styled-components로 생성 - children에 있는 버튼들 위치 지정 --- fe/src/components/common/Popup/index.tsx | 2 +- fe/src/components/common/Popup/style.ts | 10 ++++++++-- 2 files changed, 9 insertions(+), 3 deletions(-) diff --git a/fe/src/components/common/Popup/index.tsx b/fe/src/components/common/Popup/index.tsx index 97755a225..836c03a69 100644 --- a/fe/src/components/common/Popup/index.tsx +++ b/fe/src/components/common/Popup/index.tsx @@ -10,7 +10,7 @@ const Popup = ({ text, children }: PopupProps) => { <> {text} - {children} + {children} diff --git a/fe/src/components/common/Popup/style.ts b/fe/src/components/common/Popup/style.ts index f6d0d4718..16e94147b 100644 --- a/fe/src/components/common/Popup/style.ts +++ b/fe/src/components/common/Popup/style.ts @@ -14,7 +14,7 @@ const Popup = styled.div` width: 80%; padding: 30px 20px; - background-color: ${({ theme }) => theme.colors.neutral.background.default}; + background-color: ${({ theme }) => theme.colors.neutral.background.weak}; border-radius: 15px; font-size: ${({ theme }) => theme.fonts.callout.fontSize}; @@ -25,6 +25,12 @@ const Popup = styled.div` z-index: 20; `; +const ButtonsLayout = styled.div` + display: flex; + justify-content: center; + gap: 15px; +`; + const Overlay = styled.div` position: fixed; top: 0; @@ -41,4 +47,4 @@ const Overlay = styled.div` z-index: 15; `; -export { Popup, Overlay }; +export { Popup, ButtonsLayout, Overlay }; From 01a5d47cc0d8e8288b1da3f3530dcb9155efeb30 Mon Sep 17 00:00:00 2001 From: YouSooA Date: Wed, 28 Jun 2023 14:20:27 +0900 Subject: [PATCH 06/10] =?UTF-8?q?feat:=20Popup=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20storybook=20=EC=83=9D=EC=84=B1=20(#171)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/common/Popup/Popup.stories.tsx | 24 +++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 fe/src/components/common/Popup/Popup.stories.tsx diff --git a/fe/src/components/common/Popup/Popup.stories.tsx b/fe/src/components/common/Popup/Popup.stories.tsx new file mode 100644 index 000000000..93e3cbfef --- /dev/null +++ b/fe/src/components/common/Popup/Popup.stories.tsx @@ -0,0 +1,24 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import Popup from '.'; + +const popupMeta: Meta = { + title: 'common/Popup', + component: Popup, +}; + +export default popupMeta; + +type PopupStory = StoryObj; + +export const PrimaryPopup: PopupStory = { + args: { + text: '정말로 삭제하시겠습니까?', + children: ( + <> + + + + ), + }, +}; From 57d25728ef9dfef9d3fb641ccff08c4c57bb43e2 Mon Sep 17 00:00:00 2001 From: YouSooA Date: Wed, 28 Jun 2023 14:39:33 +0900 Subject: [PATCH 07/10] =?UTF-8?q?feat:=20Popup=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=EC=9D=98=20button=EB=93=A4=20=EC=A0=95?= =?UTF-8?q?=EB=A0=AC=ED=95=98=EB=8A=94=20=EC=9A=94=EC=86=8C=20width=20?= =?UTF-8?q?=EC=A7=80=EC=A0=95=20(#171)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- fe/src/components/common/Popup/style.ts | 2 ++ 1 file changed, 2 insertions(+) diff --git a/fe/src/components/common/Popup/style.ts b/fe/src/components/common/Popup/style.ts index 16e94147b..a30496b20 100644 --- a/fe/src/components/common/Popup/style.ts +++ b/fe/src/components/common/Popup/style.ts @@ -29,6 +29,8 @@ const ButtonsLayout = styled.div` display: flex; justify-content: center; gap: 15px; + + width: 100%; `; const Overlay = styled.div` From 0b539b4a76eae1d48fcf07e0d860ec64de15c44f Mon Sep 17 00:00:00 2001 From: YouSooA Date: Wed, 28 Jun 2023 14:40:01 +0900 Subject: [PATCH 08/10] =?UTF-8?q?feat:=20Popup=20=EC=B0=BD=EC=9D=98=20?= =?UTF-8?q?=EB=B2=84=ED=8A=BC=20=EC=83=9D=EC=84=B1=20(#171)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProductDetailHeader/style.ts | 24 ++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/fe/src/components/ProductDetail/ProductDetailHeader/style.ts b/fe/src/components/ProductDetail/ProductDetailHeader/style.ts index 6f094d1c1..5a0858ef4 100644 --- a/fe/src/components/ProductDetail/ProductDetailHeader/style.ts +++ b/fe/src/components/ProductDetail/ProductDetailHeader/style.ts @@ -1,5 +1,27 @@ import styled from 'styled-components'; +const ClosePopupButton = styled.button` + width: 100%; + max-width: 200px; + padding: 8px 0; + + border: 1px solid ${({ theme }) => theme.colors.neutral.border.default}; + border-radius: 10px; + + color: ${({ theme }) => theme.colors.neutral.text.default}; +`; + +const DeletePostButton = styled.button` + width: 100%; + max-width: 200px; + padding: 8px 0; + + border: 1px solid ${({ theme }) => theme.colors.neutral.border.default}; + border-radius: 10px; + + color: ${({ theme }) => theme.colors.system.warning}; +`; + const Header = styled.header` display: flex; justify-content: space-between; @@ -11,4 +33,4 @@ const Header = styled.header` padding: 16px; `; -export { Header }; +export { ClosePopupButton, DeletePostButton, Header }; From 6aee09af5c4021c366a2766c4685f45d56844e1b Mon Sep 17 00:00:00 2001 From: YouSooA Date: Wed, 28 Jun 2023 14:42:59 +0900 Subject: [PATCH 09/10] =?UTF-8?q?feat:=20[=EC=82=AD=EC=A0=9C]=20=EB=B2=84?= =?UTF-8?q?=ED=8A=BC=EC=9D=84=20=EB=88=84=EB=A5=B4=EB=A9=B4=20=EA=B2=8C?= =?UTF-8?q?=EC=8B=9C=EB=AC=BC=20=EC=82=AD=EC=A0=9C=20=ED=99=95=EC=9D=B8?= =?UTF-8?q?=ED=95=98=EB=8A=94=20alert=20=EC=B0=BD=EC=9D=B4=20=EB=9C=AC?= =?UTF-8?q?=EB=8B=A4.=20(#171)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProductDetail/ProductDetailHeader/index.tsx | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx b/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx index fa1a6a5c0..7d56aad73 100644 --- a/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx +++ b/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx @@ -1,10 +1,11 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import { ICON_NAME } from '@constants/iconName'; +import { ICON_NAME } from '@constants/index'; import Icon from '@components/common/Icon'; import Modal from '@components/common/Modal'; +import Popup from '@components/common/Popup'; import ModalPortal from '@components/ModalPortal'; import * as S from './style'; @@ -14,6 +15,9 @@ interface ProductDetailHeaderProps { const ProductDetailHeader = ({ isSeller }: ProductDetailHeaderProps) => { const [isModalOpen, setIsModalOpen] = useState(false); + const [isPopupOpen, setIsPopupOpen] = useState(false); + + const openPopup = () => setIsPopupOpen(true); const navigate = useNavigate(); @@ -27,12 +31,20 @@ const ProductDetailHeader = ({ isSeller }: ProductDetailHeaderProps) => { )} + {isPopupOpen && ( + + + setIsPopupOpen(false)}>아니오 + + + + )} {isModalOpen && ( console.log('게시글 수정') }, - { text: '삭제', colorType: 'warning', handler: () => console.log('삭제') }, + { text: '삭제', colorType: 'warning', handler: openPopup }, ]} closeModalHandler={() => setIsModalOpen(false)} /> From 381c788808a8e9585331aef99abecb332db28f45 Mon Sep 17 00:00:00 2001 From: YouSooA Date: Wed, 28 Jun 2023 14:46:22 +0900 Subject: [PATCH 10/10] =?UTF-8?q?feat:=20=20=EA=B2=8C=EC=8B=9C=EB=AC=BC=20?= =?UTF-8?q?=EC=82=AD=EC=A0=9C=20=ED=99=95=EC=9D=B8=ED=95=98=EB=8A=94=20ale?= =?UTF-8?q?rt=20=EC=B0=BD=EC=97=90=EC=84=9C=20[=EC=98=88]=EB=A5=BC=20?= =?UTF-8?q?=EB=88=84=EB=A5=B4=EB=A9=B4=20=EC=82=AD=EC=A0=9C=EB=90=9C?= =?UTF-8?q?=EB=8B=A4.=20(#171)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProductDetailHeader/index.tsx | 32 ++++++++++++++++--- fe/src/pages/ProductDetail/index.tsx | 2 +- 2 files changed, 28 insertions(+), 6 deletions(-) diff --git a/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx b/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx index 7d56aad73..f4c567b19 100644 --- a/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx +++ b/fe/src/components/ProductDetail/ProductDetailHeader/index.tsx @@ -1,7 +1,9 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; -import { ICON_NAME } from '@constants/index'; +import { ICON_NAME, REQUEST_URL } from '@constants/index'; + +import useFetch, { REQUEST_METHOD } from '@hooks/useFetch'; import Icon from '@components/common/Icon'; import Modal from '@components/common/Modal'; @@ -10,16 +12,36 @@ import ModalPortal from '@components/ModalPortal'; import * as S from './style'; interface ProductDetailHeaderProps { + postId: number; isSeller: boolean; } -const ProductDetailHeader = ({ isSeller }: ProductDetailHeaderProps) => { +const ProductDetailHeader = ({ postId, isSeller }: ProductDetailHeaderProps) => { const [isModalOpen, setIsModalOpen] = useState(false); const [isPopupOpen, setIsPopupOpen] = useState(false); + const navigate = useNavigate(); - const openPopup = () => setIsPopupOpen(true); + const { responseState: deletePostState, fetchData: deletePost } = useFetch({ + url: `${REQUEST_URL.POSTS}/${postId}`, + options: { + method: REQUEST_METHOD.DELETE, + headers: { Authorization: `Bearer ${localStorage.getItem('Token')}` }, + }, + skip: true, + }); - const navigate = useNavigate(); + const deleteProduct = () => { + deletePost(); + + if (deletePostState === 'ERROR') { + alert('게시글 삭제에 싪패했습니다.'); + return; + } + + navigate('/'); + }; + + const openPopup = () => setIsPopupOpen(true); return ( @@ -35,7 +57,7 @@ const ProductDetailHeader = ({ isSeller }: ProductDetailHeaderProps) => { setIsPopupOpen(false)}>아니오 - + )} diff --git a/fe/src/pages/ProductDetail/index.tsx b/fe/src/pages/ProductDetail/index.tsx index 8a99a57d9..747f7fc64 100644 --- a/fe/src/pages/ProductDetail/index.tsx +++ b/fe/src/pages/ProductDetail/index.tsx @@ -108,7 +108,7 @@ const ProductDetail = () => { {responseState === 'LOADING' &&
loading
} {responseState === 'SUCCESS' && postData && ( <> - +