From 03c710ca7b3dbf2596ab777efe2461ccba3379d7 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Wed, 24 Jan 2024 18:17:08 +0900 Subject: [PATCH 01/17] =?UTF-8?q?chore:=20react-toastify=20=EB=9D=BC?= =?UTF-8?q?=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=84=A4=EC=B9=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 31 ++++++++++++++++++++++++++----- package.json | 1 + 2 files changed, 27 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7720c097..2eacf589 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,6 +24,7 @@ "react-loading-skeleton": "^3.3.1", "react-paginate": "^8.2.0", "react-router-dom": "^6.21.1", + "react-toastify": "^10.0.4", "recoil": "^0.7.7", "recoil-persist": "^5.1.0", "semantic-ui-css": "^2.5.0", @@ -6589,6 +6590,11 @@ "react": ">=16.13.1" } }, + "node_modules/react-fast-compare": { + "version": "3.2.2", + "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", + "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" + }, "node_modules/react-hook-form": { "version": "7.49.3", "resolved": "https://registry.npmjs.org/react-hook-form/-/react-hook-form-7.49.3.tgz", @@ -6605,11 +6611,6 @@ "react": "^16.8.0 || ^17 || ^18" } }, - "node_modules/react-fast-compare": { - "version": "3.2.2", - "resolved": "https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz", - "integrity": "sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==" - }, "node_modules/react-is": { "version": "16.13.1", "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz", @@ -6691,6 +6692,26 @@ "react-dom": ">=16.8" } }, + "node_modules/react-toastify": { + "version": "10.0.4", + "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.4.tgz", + "integrity": "sha512-etR3RgueY8pe88SA67wLm8rJmL1h+CLqUGHuAoNsseW35oTGJEri6eBTyaXnFKNQ80v/eO10hBYLgz036XRGgA==", + "dependencies": { + "clsx": "^2.1.0" + }, + "peerDependencies": { + "react": ">=16", + "react-dom": ">=16" + } + }, + "node_modules/react-toastify/node_modules/clsx": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", + "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", + "engines": { + "node": ">=6" + } + }, "node_modules/recoil": { "version": "0.7.7", "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz", diff --git a/package.json b/package.json index 18b8e9e4..35015904 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "react-loading-skeleton": "^3.3.1", "react-paginate": "^8.2.0", "react-router-dom": "^6.21.1", + "react-toastify": "^10.0.4", "recoil": "^0.7.7", "recoil-persist": "^5.1.0", "semantic-ui-css": "^2.5.0", From 1fbe1474322f28c04b74be928803f97aa64d8cfb Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Wed, 24 Jan 2024 18:35:50 +0900 Subject: [PATCH 02/17] =?UTF-8?q?feat:=20toast=20=EC=84=A4=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/Toast/index.tsx | 33 +++++++++++++++++++++++++++ 1 file changed, 33 insertions(+) create mode 100644 src/components/common/Toast/index.tsx diff --git a/src/components/common/Toast/index.tsx b/src/components/common/Toast/index.tsx new file mode 100644 index 00000000..f15240b4 --- /dev/null +++ b/src/components/common/Toast/index.tsx @@ -0,0 +1,33 @@ +import { ToastOptions, toast } from 'react-toastify'; + +export interface Toast { + message: string; + options?: ToastOptions; +} + +const showToast = ({ message, options = {} }: Toast) => { + toast(message, { + position: 'top-center', + autoClose: 2000, // 기본 지속 시간을 5초로 설정 + hideProgressBar: false, + closeOnClick: true, + pauseOnHover: true, + draggable: true, + progress: undefined, + ...options // 사용자 정의 옵션으로 기본 옵션을 덮어씁니다. + }); +}; + +export const Toast = { + success(toast: Toast) { + showToast({ ...toast, options: { type: 'success', ...toast.options } }); + }, + error(toast: Toast) { + showToast({ ...toast, options: { type: 'error', ...toast.options } }); + }, + info(toast: Toast) { + showToast({ ...toast, options: { type: 'info', ...toast.options } }); + } +}; + +export default Toast; From 1f078af138a613e37cc8d2425694e947d878e0f1 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Wed, 24 Jan 2024 20:52:33 +0900 Subject: [PATCH 03/17] =?UTF-8?q?chore:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=9D=BC=EC=9D=B4=EB=B8=8C=EB=9F=AC=EB=A6=AC=20=EC=82=AD?= =?UTF-8?q?=EC=A0=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package-lock.json | 21 ------------ package.json | 1 - .../CouponItem/CouponExpired/index.tsx | 6 +++- src/components/common/Toast/index.tsx | 33 ------------------- 4 files changed, 5 insertions(+), 56 deletions(-) delete mode 100644 src/components/common/Toast/index.tsx diff --git a/package-lock.json b/package-lock.json index 2eacf589..3d3a5748 100644 --- a/package-lock.json +++ b/package-lock.json @@ -24,7 +24,6 @@ "react-loading-skeleton": "^3.3.1", "react-paginate": "^8.2.0", "react-router-dom": "^6.21.1", - "react-toastify": "^10.0.4", "recoil": "^0.7.7", "recoil-persist": "^5.1.0", "semantic-ui-css": "^2.5.0", @@ -6692,26 +6691,6 @@ "react-dom": ">=16.8" } }, - "node_modules/react-toastify": { - "version": "10.0.4", - "resolved": "https://registry.npmjs.org/react-toastify/-/react-toastify-10.0.4.tgz", - "integrity": "sha512-etR3RgueY8pe88SA67wLm8rJmL1h+CLqUGHuAoNsseW35oTGJEri6eBTyaXnFKNQ80v/eO10hBYLgz036XRGgA==", - "dependencies": { - "clsx": "^2.1.0" - }, - "peerDependencies": { - "react": ">=16", - "react-dom": ">=16" - } - }, - "node_modules/react-toastify/node_modules/clsx": { - "version": "2.1.0", - "resolved": "https://registry.npmjs.org/clsx/-/clsx-2.1.0.tgz", - "integrity": "sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==", - "engines": { - "node": ">=6" - } - }, "node_modules/recoil": { "version": "0.7.7", "resolved": "https://registry.npmjs.org/recoil/-/recoil-0.7.7.tgz", diff --git a/package.json b/package.json index 35015904..18b8e9e4 100644 --- a/package.json +++ b/package.json @@ -27,7 +27,6 @@ "react-loading-skeleton": "^3.3.1", "react-paginate": "^8.2.0", "react-router-dom": "^6.21.1", - "react-toastify": "^10.0.4", "recoil": "^0.7.7", "recoil-persist": "^5.1.0", "semantic-ui-css": "^2.5.0", diff --git a/src/components/CouponList/CouponItem/CouponExpired/index.tsx b/src/components/CouponList/CouponItem/CouponExpired/index.tsx index 4a7e9ee1..c1e66342 100644 --- a/src/components/CouponList/CouponItem/CouponExpired/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpired/index.tsx @@ -27,7 +27,11 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => { // 모달 확인 버튼에 대한 동작 const handleModalConfirm = () => { - mutateAsync({ coupon_number: couponInfo.coupon_number }); + try { + mutateAsync({ coupon_number: couponInfo.coupon_number }); + } catch (error) { + console.log('쿠폰 삭제 실패', error); + } setIsShowModal(false); }; diff --git a/src/components/common/Toast/index.tsx b/src/components/common/Toast/index.tsx deleted file mode 100644 index f15240b4..00000000 --- a/src/components/common/Toast/index.tsx +++ /dev/null @@ -1,33 +0,0 @@ -import { ToastOptions, toast } from 'react-toastify'; - -export interface Toast { - message: string; - options?: ToastOptions; -} - -const showToast = ({ message, options = {} }: Toast) => { - toast(message, { - position: 'top-center', - autoClose: 2000, // 기본 지속 시간을 5초로 설정 - hideProgressBar: false, - closeOnClick: true, - pauseOnHover: true, - draggable: true, - progress: undefined, - ...options // 사용자 정의 옵션으로 기본 옵션을 덮어씁니다. - }); -}; - -export const Toast = { - success(toast: Toast) { - showToast({ ...toast, options: { type: 'success', ...toast.options } }); - }, - error(toast: Toast) { - showToast({ ...toast, options: { type: 'error', ...toast.options } }); - }, - info(toast: Toast) { - showToast({ ...toast, options: { type: 'info', ...toast.options } }); - } -}; - -export default Toast; From 4b58aace6ebd5b2167521a492a790c15b955858e Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Wed, 24 Jan 2024 22:04:39 +0900 Subject: [PATCH 04/17] =?UTF-8?q?feat:=20ToastContext=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/App.tsx | 5 +- .../CouponItem/CouponExpired/index.tsx | 4 ++ src/components/common/ToastContext/index.tsx | 71 +++++++++++++++++++ 3 files changed, 79 insertions(+), 1 deletion(-) create mode 100644 src/components/common/ToastContext/index.tsx diff --git a/src/App.tsx b/src/App.tsx index c6cf25a7..6176af7d 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -15,6 +15,7 @@ import GlobalStyles from '@styles/GlobalStyles'; import theme from '@styles/theme'; import ErrorFallback from './App.error'; import Loading from './App.loading'; +import { ToastProvider } from '@components/common/ToastContext'; const queryClient = new QueryClient(); @@ -32,7 +33,9 @@ const App = () => { > }> - + + + diff --git a/src/components/CouponList/CouponItem/CouponExpired/index.tsx b/src/components/CouponList/CouponItem/CouponExpired/index.tsx index c1e66342..ca006bec 100644 --- a/src/components/CouponList/CouponItem/CouponExpired/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpired/index.tsx @@ -8,12 +8,14 @@ import { useCouponDelete, useOutsideClick } from '@hooks/index'; import { CouponListProps } from '@/types/couponList'; import Modal from '@components/modal'; import CouponCondition from '@utils/lib/couponCondition'; +import { useToast } from '@components/common/ToastContext'; const CouponExpired = ({ couponInfo }: CouponListProps) => { const [isShowRoomList, setIsShowRoomList] = useState(false); const roomListRef = useRef(null); const [isShowModal, setIsShowModal] = useState(false); const { mutateAsync } = useCouponDelete(); + const { showToast } = useToast(); useOutsideClick(roomListRef, () => setIsShowRoomList(false)); @@ -29,6 +31,8 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => { const handleModalConfirm = () => { try { mutateAsync({ coupon_number: couponInfo.coupon_number }); + setIsShowModal(false); + showToast('쿠폰이 삭제되었습니다'); } catch (error) { console.log('쿠폰 삭제 실패', error); } diff --git a/src/components/common/ToastContext/index.tsx b/src/components/common/ToastContext/index.tsx new file mode 100644 index 00000000..f3fc4f5b --- /dev/null +++ b/src/components/common/ToastContext/index.tsx @@ -0,0 +1,71 @@ +// src/context/ToastContext.tsx +import styled from '@emotion/styled'; +import theme from '@styles/theme'; +import { + createContext, + useContext, + useState, + ReactNode, + FunctionComponent +} from 'react'; + +interface ToastContextType { + showToast: (msg: string) => void; +} + +const ToastContext = createContext(undefined); + +interface ToastProviderProps { + children: ReactNode; +} + +export const useToast = () => { + const context = useContext(ToastContext); + if (context === undefined) { + throw new Error('useToast must be used within a ToastProvider'); + } + return context; +}; + +export const ToastProvider: FunctionComponent = ({ + children +}) => { + const [message, setMessage] = useState(''); + const [isVisible, setIsVisible] = useState(false); + + const showToast = (msg: string) => { + setMessage(msg); + setIsVisible(true); + setTimeout(() => setIsVisible(false), 2000); + }; + + return ( + + {children} + {isVisible && ( + +

{message}

+ + )} + + ); +}; + +const ToastContainer = styled.div` + position: fixed; + bottom: 50px; + left: 50%; + transform: translateX(-50%); + z-index: 70; + + border-radius: 5px; + + background: #404446; + + p { + padding: 15px 31px; + + font-size: 15px; + color: ${theme.colors.white}; + } +`; From cb6efb91fef9a38c06c42c2a349abdaf224683a0 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Wed, 24 Jan 2024 22:16:20 +0900 Subject: [PATCH 05/17] =?UTF-8?q?feat:=20toast=20=EB=A9=94=EC=84=B8?= =?UTF-8?q?=EC=A7=80=20=ED=83=80=EC=9E=85=20ReactNode=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/ToastContext/index.tsx | 20 +++++++------------- 1 file changed, 7 insertions(+), 13 deletions(-) diff --git a/src/components/common/ToastContext/index.tsx b/src/components/common/ToastContext/index.tsx index f3fc4f5b..587c5e22 100644 --- a/src/components/common/ToastContext/index.tsx +++ b/src/components/common/ToastContext/index.tsx @@ -10,7 +10,7 @@ import { } from 'react'; interface ToastContextType { - showToast: (msg: string) => void; + showToast: (msg: ReactNode) => void; } const ToastContext = createContext(undefined); @@ -30,10 +30,10 @@ export const useToast = () => { export const ToastProvider: FunctionComponent = ({ children }) => { - const [message, setMessage] = useState(''); + const [message, setMessage] = useState(''); const [isVisible, setIsVisible] = useState(false); - const showToast = (msg: string) => { + const showToast = (msg: ReactNode) => { setMessage(msg); setIsVisible(true); setTimeout(() => setIsVisible(false), 2000); @@ -42,11 +42,7 @@ export const ToastProvider: FunctionComponent = ({ return ( {children} - {isVisible && ( - -

{message}

- - )} + {isVisible && {message}} ); }; @@ -62,10 +58,8 @@ const ToastContainer = styled.div` background: #404446; - p { - padding: 15px 31px; + padding: 15px 31px; - font-size: 15px; - color: ${theme.colors.white}; - } + font-size: 15px; + color: ${theme.colors.white}; `; From 0787425f2aa943734bcd47ea8878d3ef6cf88704 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Wed, 24 Jan 2024 23:04:46 +0900 Subject: [PATCH 06/17] =?UTF-8?q?feat:=20=ED=86=A0=EA=B8=80=20on/off?= =?UTF-8?q?=EC=8B=9C=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20=EB=85=B8=EC=B6=9C=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponItem/CouponExpose/index.tsx | 34 +++++++++++++++---- .../CouponItem/CouponStop/index.tsx | 29 +++++++++++++++- src/components/common/ToastContext/index.tsx | 13 +++++-- 3 files changed, 66 insertions(+), 10 deletions(-) diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index 30c73a95..59fc9f09 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -9,12 +9,18 @@ import deleteIcon from '@assets/icons/ic-couponlist-delete.svg'; import { CouponListProps, ToggleStyleProps } from '@/types/couponList'; import { useOutsideClick, useToggleChange } from '@hooks/index'; import { CouponCondition } from '@utils/lib/couponCondition'; +import { useToast } from '@components/common/ToastContext'; const CouponExpose = ({ couponInfo }: CouponListProps) => { const [isToggle, setIsToggle] = useState(true); const [isShowRoomList, setIsShowRoomList] = useState(false); const roomListRef = useRef(null); const { mutateAsync } = useToggleChange(); + const { showToast } = useToast(); + + const handleRoomList = () => { + setIsShowRoomList(!isShowRoomList); + }; const handleToggle = () => { setIsToggle(!isToggle); @@ -22,14 +28,30 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { }; const toggleUpdate = async () => { - await mutateAsync({ - coupon_number: couponInfo.coupon_number, - coupon_status: '노출 OFF' - }); + try { + await mutateAsync({ + coupon_number: couponInfo.coupon_number, + coupon_status: '노출 OFF' + }); + console.log(couponInfo.coupon_number); + + showToast( +
+ {couponInfo.title} 노출이 중단되었습니다. + 실행 취소 +
+ ); + } catch (error) { + console.log(error); + } }; - const handleRoomList = () => { - setIsShowRoomList(!isShowRoomList); + const retryToggleUpdate = () => { + setIsToggle(!isToggle); + mutateAsync({ + coupon_number: couponInfo.coupon_number, + coupon_status: '노출 ON' + }); }; useOutsideClick(roomListRef, () => setIsShowRoomList(false)); diff --git a/src/components/CouponList/CouponItem/CouponStop/index.tsx b/src/components/CouponList/CouponItem/CouponStop/index.tsx index de09f238..0d277e98 100644 --- a/src/components/CouponList/CouponItem/CouponStop/index.tsx +++ b/src/components/CouponList/CouponItem/CouponStop/index.tsx @@ -9,12 +9,15 @@ import deleteIcon from '@assets/icons/ic-couponlist-delete.svg'; import { CouponListProps, ToggleStyleProps } from '@/types/couponList'; import { useOutsideClick, useToggleChange } from '@hooks/index'; import CouponCondition from '@utils/lib/couponCondition'; +import { useToast } from '@components/common/ToastContext'; const CouponStop = ({ couponInfo }: CouponListProps) => { const [isToggle, setIsToggle] = useState(false); const [isShowRoomList, setIsShowRoomList] = useState(false); const roomListRef = useRef(null); const { mutateAsync } = useToggleChange(); + const { showToast } = useToast(); + useOutsideClick(roomListRef, () => setIsShowRoomList(false)); const handleRoomList = () => { @@ -22,10 +25,34 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { }; const handleToggle = () => { + setIsToggle(!isToggle); + toggleUpdate(); + }; + + const toggleUpdate = async () => { + try { + await mutateAsync({ + coupon_number: couponInfo.coupon_number, + coupon_status: '노출 ON' + }); + console.log(couponInfo.coupon_number); + + showToast( +
+ {couponInfo.title} 쿠폰이 노출되었습니다 + 실행 취소 +
+ ); + } catch (error) { + console.log(error); + } + }; + + const retryToggleUpdate = () => { setIsToggle(!isToggle); mutateAsync({ coupon_number: couponInfo.coupon_number, - coupon_status: '노출 ON' + coupon_status: '노출 OFF' }); }; diff --git a/src/components/common/ToastContext/index.tsx b/src/components/common/ToastContext/index.tsx index 587c5e22..02e0f060 100644 --- a/src/components/common/ToastContext/index.tsx +++ b/src/components/common/ToastContext/index.tsx @@ -54,12 +54,19 @@ const ToastContainer = styled.div` transform: translateX(-50%); z-index: 70; + padding: 15px 31px; border-radius: 5px; background: #404446; - - padding: 15px 31px; - font-size: 15px; color: ${theme.colors.white}; + + span { + margin-left: 59px; + + color: #3182f6; + font-size: 15px; + text-decoration-line: underline; + cursor: pointer; + } `; From b424133d1d5795b62a943e91a872acb56ed7b1a2 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Wed, 24 Jan 2024 23:15:05 +0900 Subject: [PATCH 07/17] =?UTF-8?q?feat:=20=EA=B0=81=20toast=EB=A7=88?= =?UTF-8?q?=EB=8B=A4=20setTimeout=20=EB=8B=A4=EB=A5=B4=EA=B2=8C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CouponList/CouponItem/CouponExpose/index.tsx | 3 ++- src/components/CouponList/CouponItem/CouponStop/index.tsx | 5 +++-- src/components/common/ToastContext/index.tsx | 6 +++--- 3 files changed, 8 insertions(+), 6 deletions(-) diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index 59fc9f09..402dcb77 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -39,7 +39,8 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => {
{couponInfo.title} 노출이 중단되었습니다. 실행 취소 -
+ , + 5000 ); } catch (error) { console.log(error); diff --git a/src/components/CouponList/CouponItem/CouponStop/index.tsx b/src/components/CouponList/CouponItem/CouponStop/index.tsx index 0d277e98..91483970 100644 --- a/src/components/CouponList/CouponItem/CouponStop/index.tsx +++ b/src/components/CouponList/CouponItem/CouponStop/index.tsx @@ -39,9 +39,10 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { showToast(
- {couponInfo.title} 쿠폰이 노출되었습니다 + {couponInfo.title} 쿠폰이 노출되었습니다. 실행 취소 -
+ , + 5000 ); } catch (error) { console.log(error); diff --git a/src/components/common/ToastContext/index.tsx b/src/components/common/ToastContext/index.tsx index 02e0f060..a15a77de 100644 --- a/src/components/common/ToastContext/index.tsx +++ b/src/components/common/ToastContext/index.tsx @@ -10,7 +10,7 @@ import { } from 'react'; interface ToastContextType { - showToast: (msg: ReactNode) => void; + showToast: (msg: ReactNode, duration?: number) => void; } const ToastContext = createContext(undefined); @@ -33,10 +33,10 @@ export const ToastProvider: FunctionComponent = ({ const [message, setMessage] = useState(''); const [isVisible, setIsVisible] = useState(false); - const showToast = (msg: ReactNode) => { + const showToast = (msg: ReactNode, duration: number = 2000) => { setMessage(msg); setIsVisible(true); - setTimeout(() => setIsVisible(false), 2000); + setTimeout(() => setIsVisible(false), duration); }; return ( From 78af5ab62d9b94918c25ca1069d22c9c10f6a71b Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Thu, 25 Jan 2024 02:59:32 +0900 Subject: [PATCH 08/17] =?UTF-8?q?fix:=20style=20props=20interface=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponList/CouponItem/CouponExpose/index.tsx | 11 +++++------ src/components/common/ToastContext/index.tsx | 3 +-- 2 files changed, 6 insertions(+), 8 deletions(-) diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index 402dcb77..07c7e2a4 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -18,10 +18,6 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { const { mutateAsync } = useToggleChange(); const { showToast } = useToast(); - const handleRoomList = () => { - setIsShowRoomList(!isShowRoomList); - }; - const handleToggle = () => { setIsToggle(!isToggle); toggleUpdate(); @@ -34,10 +30,9 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { coupon_status: '노출 OFF' }); console.log(couponInfo.coupon_number); - showToast(
- {couponInfo.title} 노출이 중단되었습니다. + {couponInfo.title} 쿠폰의 노출이 중단되었습니다. 실행 취소
, 5000 @@ -55,6 +50,10 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { }); }; + const handleRoomList = () => { + setIsShowRoomList(!isShowRoomList); + }; + useOutsideClick(roomListRef, () => setIsShowRoomList(false)); return ( diff --git a/src/components/common/ToastContext/index.tsx b/src/components/common/ToastContext/index.tsx index a15a77de..d0d6ae6b 100644 --- a/src/components/common/ToastContext/index.tsx +++ b/src/components/common/ToastContext/index.tsx @@ -1,5 +1,5 @@ -// src/context/ToastContext.tsx import styled from '@emotion/styled'; + import theme from '@styles/theme'; import { createContext, @@ -52,7 +52,6 @@ const ToastContainer = styled.div` bottom: 50px; left: 50%; transform: translateX(-50%); - z-index: 70; padding: 15px 31px; border-radius: 5px; From 5da6818b4dc7fec739a2c96aecd16225377117db Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Thu, 25 Jan 2024 14:40:52 +0900 Subject: [PATCH 09/17] =?UTF-8?q?fix:=20=ED=86=A0=EA=B8=80=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponItem/CouponExpose/index.tsx | 25 +++++++++++-------- 1 file changed, 15 insertions(+), 10 deletions(-) diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index 07c7e2a4..635c6d92 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -27,13 +27,18 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { try { await mutateAsync({ coupon_number: couponInfo.coupon_number, - coupon_status: '노출 OFF' + coupon_status: isToggle ? '노출 OFF' : '노출 ON' }); console.log(couponInfo.coupon_number); + console.log(isToggle); + + const message = isToggle + ? `${couponInfo.title} 쿠폰의 노출이 중단되었습니다.` + : `${couponInfo.title} 쿠폰이 노출되었습니다.`; showToast(
- {couponInfo.title} 쿠폰의 노출이 중단되었습니다. - 실행 취소 + {message} + 실행 취소
, 5000 ); @@ -42,13 +47,13 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { } }; - const retryToggleUpdate = () => { - setIsToggle(!isToggle); - mutateAsync({ - coupon_number: couponInfo.coupon_number, - coupon_status: '노출 ON' - }); - }; + // const retryToggleUpdate = () => { + // setIsToggle(!isToggle); + // mutateAsync({ + // coupon_number: couponInfo.coupon_number, + // coupon_status: '노출 ON' + // }); + // }; const handleRoomList = () => { setIsShowRoomList(!isShowRoomList); From ace0be9335a5afb565c25daee520e82d8dd24244 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Thu, 25 Jan 2024 16:43:11 +0900 Subject: [PATCH 10/17] =?UTF-8?q?fix:=20=ED=86=A0=EA=B8=80=20=EB=B9=84?= =?UTF-8?q?=EB=8F=99=EA=B8=B0=20=EC=B2=98=EB=A6=AC=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponItem/CouponExpose/index.tsx | 40 ++++++++++++------- .../CouponItem/CouponStop/index.tsx | 4 ++ 2 files changed, 29 insertions(+), 15 deletions(-) diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index 635c6d92..493be938 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -17,28 +17,32 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { const roomListRef = useRef(null); const { mutateAsync } = useToggleChange(); const { showToast } = useToast(); + const [isNewToggle, setIsNewToggle] = useState(true); const handleToggle = () => { setIsToggle(!isToggle); - toggleUpdate(); + toggleUpdate(isNewToggle); }; - const toggleUpdate = async () => { + const toggleUpdate = async (isNewToggle: boolean) => { + const newStatus = isNewToggle ? '노출 OFF' : '노출 ON'; + const message = isNewToggle + ? `${couponInfo.title} 쿠폰의 노출이 중단되었습니다.` + : `${couponInfo.title} 쿠폰이 노출되었습니다.`; + try { await mutateAsync({ coupon_number: couponInfo.coupon_number, - coupon_status: isToggle ? '노출 OFF' : '노출 ON' + coupon_status: newStatus }); - console.log(couponInfo.coupon_number); - console.log(isToggle); - const message = isToggle - ? `${couponInfo.title} 쿠폰의 노출이 중단되었습니다.` - : `${couponInfo.title} 쿠폰이 노출되었습니다.`; + setIsNewToggle(!isNewToggle); showToast(
{message} - 실행 취소 + {isNewToggle && ( + toggleUpdate(!isNewToggle)}>실행 취소 + )}
, 5000 ); @@ -47,12 +51,18 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { } }; - // const retryToggleUpdate = () => { - // setIsToggle(!isToggle); - // mutateAsync({ - // coupon_number: couponInfo.coupon_number, - // coupon_status: '노출 ON' - // }); + // const retryToggleUpdate = async () => { + // try { + // setIsToggle(!isToggle); + // mutateAsync({ + // coupon_number: couponInfo.coupon_number, + // coupon_status: '노출 ON' + // }); + // console.log(isToggle); + // showToast(
{couponInfo.title} 쿠폰의 노출되었습니다.
, 3000); + // } catch (error) { + // console.log(error); + // } // }; const handleRoomList = () => { diff --git a/src/components/CouponList/CouponItem/CouponStop/index.tsx b/src/components/CouponList/CouponItem/CouponStop/index.tsx index 91483970..eee0ae8b 100644 --- a/src/components/CouponList/CouponItem/CouponStop/index.tsx +++ b/src/components/CouponList/CouponItem/CouponStop/index.tsx @@ -55,6 +55,10 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { coupon_number: couponInfo.coupon_number, coupon_status: '노출 OFF' }); + showToast( +
{couponInfo.title} 쿠폰의 노출이 중단되었습니다.
, + 5000 + ); }; return ( From 2fd065a03b21cf564632e1c7a0f7979ec1956b32 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Thu, 25 Jan 2024 18:29:37 +0900 Subject: [PATCH 11/17] =?UTF-8?q?fix:=20coupon=5Froom=5Ftypes=20=EB=8D=B0?= =?UTF-8?q?=EC=9D=B4=ED=84=B0=20=EC=B2=98=EB=A6=AC=20=EC=A1=B0=EA=B1=B4?= =?UTF-8?q?=EB=AC=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponList/CouponItem/CouponExpired/index.tsx | 7 ++++--- .../CouponList/CouponItem/CouponExpose/index.tsx | 7 ++++--- .../CouponList/CouponItem/CouponStop/index.tsx | 7 ++++--- .../CouponList/CouponItem/CouponWait/index.tsx | 7 ++++--- src/types/couponList.ts | 2 +- src/utils/lib/couponCondition.ts | 4 ++-- src/utils/lib/couponRoomType.ts | 12 ++++++++++++ 7 files changed, 31 insertions(+), 15 deletions(-) create mode 100644 src/utils/lib/couponRoomType.ts diff --git a/src/components/CouponList/CouponItem/CouponExpired/index.tsx b/src/components/CouponList/CouponItem/CouponExpired/index.tsx index ca006bec..9b33dba2 100644 --- a/src/components/CouponList/CouponItem/CouponExpired/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpired/index.tsx @@ -7,8 +7,9 @@ import deleteIcon from '@assets/icons/ic-couponlist-delete.svg'; import { useCouponDelete, useOutsideClick } from '@hooks/index'; import { CouponListProps } from '@/types/couponList'; import Modal from '@components/modal'; -import CouponCondition from '@utils/lib/couponCondition'; +import CouponCondition, { couponCondition } from '@utils/lib/couponCondition'; import { useToast } from '@components/common/ToastContext'; +import couponRoomType from '@utils/lib/couponRoomType'; const CouponExpired = ({ couponInfo }: CouponListProps) => { const [isShowRoomList, setIsShowRoomList] = useState(false); @@ -72,9 +73,9 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => { 일정 - {couponInfo.coupon_room_type}, + {couponRoomType(couponInfo.coupon_room_types).join(', ')}, - {CouponCondition(couponInfo.coupon_use_condition_days)} + {couponCondition(couponInfo.coupon_use_condition_days)} diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index 493be938..5e820f1c 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -8,8 +8,9 @@ import rightIcon from '@assets/icons/ic-couponlist-right.svg'; import deleteIcon from '@assets/icons/ic-couponlist-delete.svg'; import { CouponListProps, ToggleStyleProps } from '@/types/couponList'; import { useOutsideClick, useToggleChange } from '@hooks/index'; -import { CouponCondition } from '@utils/lib/couponCondition'; +import couponCondition from '@utils/lib/couponCondition'; import { useToast } from '@components/common/ToastContext'; +import couponRoomType from '@utils/lib/couponRoomType'; const CouponExpose = ({ couponInfo }: CouponListProps) => { const [isToggle, setIsToggle] = useState(true); @@ -120,9 +121,9 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { 일정 - {couponInfo.coupon_room_type}, + {couponRoomType(couponInfo.coupon_room_types).join(', ')}, - {CouponCondition(couponInfo.coupon_use_condition_days)} + {couponCondition(couponInfo.coupon_use_condition_days)} diff --git a/src/components/CouponList/CouponItem/CouponStop/index.tsx b/src/components/CouponList/CouponItem/CouponStop/index.tsx index eee0ae8b..7c6c29e8 100644 --- a/src/components/CouponList/CouponItem/CouponStop/index.tsx +++ b/src/components/CouponList/CouponItem/CouponStop/index.tsx @@ -8,8 +8,9 @@ import rightIcon from '@assets/icons/ic-couponlist-right.svg'; import deleteIcon from '@assets/icons/ic-couponlist-delete.svg'; import { CouponListProps, ToggleStyleProps } from '@/types/couponList'; import { useOutsideClick, useToggleChange } from '@hooks/index'; -import CouponCondition from '@utils/lib/couponCondition'; +import { couponCondition } from '@utils/lib/couponCondition'; import { useToast } from '@components/common/ToastContext'; +import couponRoomType from '@utils/lib/couponRoomType'; const CouponStop = ({ couponInfo }: CouponListProps) => { const [isToggle, setIsToggle] = useState(false); @@ -110,9 +111,9 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { 일정 - {couponInfo.coupon_room_type}, + {couponRoomType(couponInfo.coupon_room_types).join(', ')}, - {CouponCondition(couponInfo.coupon_use_condition_days)} + {couponCondition(couponInfo.coupon_use_condition_days)} diff --git a/src/components/CouponList/CouponItem/CouponWait/index.tsx b/src/components/CouponList/CouponItem/CouponWait/index.tsx index 95dcecea..787797e6 100644 --- a/src/components/CouponList/CouponItem/CouponWait/index.tsx +++ b/src/components/CouponList/CouponItem/CouponWait/index.tsx @@ -9,7 +9,8 @@ import deleteIcon from '@assets/icons/ic-couponlist-delete.svg'; import { useCouponDelete, useOutsideClick } from '@hooks/index'; import { CouponListProps } from '@/types/couponList'; import Modal from '@components/modal'; -import CouponCondition from '@utils/lib/couponCondition'; +import { couponCondition } from '@utils/lib/couponCondition'; +import couponRoomType from '@utils/lib/couponRoomType'; const CouponWait = ({ couponInfo }: CouponListProps) => { const [isShowRoomList, setIsShowRoomList] = useState(false); @@ -90,9 +91,9 @@ const CouponWait = ({ couponInfo }: CouponListProps) => { 일정 - {couponInfo.coupon_room_type}, + {couponRoomType(couponInfo.coupon_room_types).join(', ')}, - {CouponCondition(couponInfo.coupon_use_condition_days)} + {couponCondition(couponInfo.coupon_use_condition_days)} diff --git a/src/types/couponList.ts b/src/types/couponList.ts index 72d2a864..6681befa 100644 --- a/src/types/couponList.ts +++ b/src/types/couponList.ts @@ -38,7 +38,7 @@ export interface CouponInformationResponse { discount_type: string; discount_value: number; customer_type: string; - coupon_room_type: string; + coupon_room_types: string[]; minimum_reservation_price: number; coupon_use_condition_days: string; exposure_start_date: string; diff --git a/src/utils/lib/couponCondition.ts b/src/utils/lib/couponCondition.ts index f625776b..bc39eec2 100644 --- a/src/utils/lib/couponCondition.ts +++ b/src/utils/lib/couponCondition.ts @@ -1,4 +1,4 @@ -export const CouponCondition = (conditionDays: string): string => { +export const couponCondition = (conditionDays: string): string => { if (conditionDays.length === 1) { return `${conditionDays}요일`; } else if (conditionDays === '평일') { @@ -9,4 +9,4 @@ export const CouponCondition = (conditionDays: string): string => { return conditionDays; }; -export default CouponCondition; +export default couponCondition; diff --git a/src/utils/lib/couponRoomType.ts b/src/utils/lib/couponRoomType.ts new file mode 100644 index 00000000..acc58fe4 --- /dev/null +++ b/src/utils/lib/couponRoomType.ts @@ -0,0 +1,12 @@ +export const couponRoomType = (couponRoomTypes: string[]) => { + if (couponRoomTypes.includes('2박이상')) { + if (couponRoomTypes.length === 3) { + return ['대실', '2박이상']; + } else if (couponRoomTypes.length === 2) { + return ['2박이상']; + } + } + return couponRoomTypes; +}; + +export default couponRoomType; From 22284d7856655fa5e25db51efe8ccca2bb222eee Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Thu, 25 Jan 2024 22:13:15 +0900 Subject: [PATCH 12/17] =?UTF-8?q?fix:=20=EB=8D=B0=EC=9D=B4=ED=84=B0=20?= =?UTF-8?q?=EC=A1=B0=EA=B1=B4=EB=AC=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponList/CouponItem/CouponExpired/index.tsx | 2 +- src/components/CouponList/CouponItem/CouponExpose/index.tsx | 2 +- src/components/common/ToastContext/index.tsx | 2 +- src/utils/lib/couponRoomType.ts | 6 +++--- 4 files changed, 6 insertions(+), 6 deletions(-) diff --git a/src/components/CouponList/CouponItem/CouponExpired/index.tsx b/src/components/CouponList/CouponItem/CouponExpired/index.tsx index 9b33dba2..50b38190 100644 --- a/src/components/CouponList/CouponItem/CouponExpired/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpired/index.tsx @@ -7,7 +7,7 @@ import deleteIcon from '@assets/icons/ic-couponlist-delete.svg'; import { useCouponDelete, useOutsideClick } from '@hooks/index'; import { CouponListProps } from '@/types/couponList'; import Modal from '@components/modal'; -import CouponCondition, { couponCondition } from '@utils/lib/couponCondition'; +import { couponCondition } from '@utils/lib/couponCondition'; import { useToast } from '@components/common/ToastContext'; import couponRoomType from '@utils/lib/couponRoomType'; diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index 5e820f1c..67dfbd60 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -45,7 +45,7 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { toggleUpdate(!isNewToggle)}>실행 취소 )} , - 5000 + 2000 ); } catch (error) { console.log(error); diff --git a/src/components/common/ToastContext/index.tsx b/src/components/common/ToastContext/index.tsx index d0d6ae6b..577ac6ee 100644 --- a/src/components/common/ToastContext/index.tsx +++ b/src/components/common/ToastContext/index.tsx @@ -57,7 +57,7 @@ const ToastContainer = styled.div` border-radius: 5px; background: #404446; - font-size: 15px; + font-size: 13px; color: ${theme.colors.white}; span { diff --git a/src/utils/lib/couponRoomType.ts b/src/utils/lib/couponRoomType.ts index acc58fe4..97d3d93e 100644 --- a/src/utils/lib/couponRoomType.ts +++ b/src/utils/lib/couponRoomType.ts @@ -1,9 +1,9 @@ export const couponRoomType = (couponRoomTypes: string[]) => { - if (couponRoomTypes.includes('2박이상')) { + if (couponRoomTypes.includes('2박 이상')) { if (couponRoomTypes.length === 3) { - return ['대실', '2박이상']; + return ['대실', '2박 이상']; } else if (couponRoomTypes.length === 2) { - return ['2박이상']; + return ['2박 이상']; } } return couponRoomTypes; From da00d29733702fab34eccf74fea1a6fa5e254072 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Fri, 26 Jan 2024 01:40:50 +0900 Subject: [PATCH 13/17] =?UTF-8?q?fix:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../CouponItem/CouponExpired/index.tsx | 6 ++- .../CouponItem/CouponExpose/index.tsx | 47 ++++++++++--------- .../CouponItem/CouponStop/index.tsx | 10 ++-- .../CouponItem/CouponWait/index.tsx | 6 ++- src/components/common/ToastContext/index.tsx | 9 ++++ 5 files changed, 52 insertions(+), 26 deletions(-) diff --git a/src/components/CouponList/CouponItem/CouponExpired/index.tsx b/src/components/CouponList/CouponItem/CouponExpired/index.tsx index 50b38190..a2eef3a8 100644 --- a/src/components/CouponList/CouponItem/CouponExpired/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpired/index.tsx @@ -105,7 +105,11 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => {
    {couponInfo.register_room_numbers.map((room, index) => ( -
  • {room}
    • +
  • + {room.length > 10 + ? `${room.substring(0, 10)}...` + : room} +
    • ))}
diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index 67dfbd60..9ad9f453 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -18,32 +18,30 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { const roomListRef = useRef(null); const { mutateAsync } = useToggleChange(); const { showToast } = useToast(); - const [isNewToggle, setIsNewToggle] = useState(true); + + const handleRoomList = () => { + setIsShowRoomList(!isShowRoomList); + }; + + useOutsideClick(roomListRef, () => setIsShowRoomList(false)); const handleToggle = () => { setIsToggle(!isToggle); - toggleUpdate(isNewToggle); + toggleUpdate(); }; - const toggleUpdate = async (isNewToggle: boolean) => { - const newStatus = isNewToggle ? '노출 OFF' : '노출 ON'; - const message = isNewToggle - ? `${couponInfo.title} 쿠폰의 노출이 중단되었습니다.` - : `${couponInfo.title} 쿠폰이 노출되었습니다.`; - + const toggleUpdate = async () => { try { await mutateAsync({ coupon_number: couponInfo.coupon_number, - coupon_status: newStatus + coupon_status: '노출 OFF' }); + console.log(couponInfo.coupon_number); - setIsNewToggle(!isNewToggle); showToast(
- {message} - {isNewToggle && ( - toggleUpdate(!isNewToggle)}>실행 취소 - )} + {couponInfo.title} 쿠폰의 노출이 중단되었습니다. + 실행 취소
, 2000 ); @@ -52,6 +50,15 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { } }; + const retryToggleUpdate = () => { + setIsToggle(!isToggle); + mutateAsync({ + coupon_number: couponInfo.coupon_number, + coupon_status: '노출 ON' + }); + showToast(
{couponInfo.title} 쿠폰이 노출되었습니다.
, 2000); + }; + // const retryToggleUpdate = async () => { // try { // setIsToggle(!isToggle); @@ -66,12 +73,6 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { // } // }; - const handleRoomList = () => { - setIsShowRoomList(!isShowRoomList); - }; - - useOutsideClick(roomListRef, () => setIsShowRoomList(false)); - return ( @@ -153,7 +154,11 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => {
    {couponInfo.register_room_numbers.map((room, index) => ( -
  • {room}
    • +
  • + {room.length > 10 + ? `${room.substring(0, 10)}...` + : room} +
    • ))}
diff --git a/src/components/CouponList/CouponItem/CouponStop/index.tsx b/src/components/CouponList/CouponItem/CouponStop/index.tsx index 7c6c29e8..1c20d3d1 100644 --- a/src/components/CouponList/CouponItem/CouponStop/index.tsx +++ b/src/components/CouponList/CouponItem/CouponStop/index.tsx @@ -43,7 +43,7 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { {couponInfo.title} 쿠폰이 노출되었습니다. 실행 취소 , - 5000 + 2000 ); } catch (error) { console.log(error); @@ -58,7 +58,7 @@ const CouponStop = ({ couponInfo }: CouponListProps) => { }); showToast(
{couponInfo.title} 쿠폰의 노출이 중단되었습니다.
, - 5000 + 2000 ); }; @@ -143,7 +143,11 @@ const CouponStop = ({ couponInfo }: CouponListProps) => {
    {couponInfo.register_room_numbers.map((room, index) => ( -
  • {room}
    • +
  • + {room.length > 10 + ? `${room.substring(0, 10)}...` + : room} +
    • ))}
diff --git a/src/components/CouponList/CouponItem/CouponWait/index.tsx b/src/components/CouponList/CouponItem/CouponWait/index.tsx index 787797e6..ee2473f4 100644 --- a/src/components/CouponList/CouponItem/CouponWait/index.tsx +++ b/src/components/CouponList/CouponItem/CouponWait/index.tsx @@ -123,7 +123,11 @@ const CouponWait = ({ couponInfo }: CouponListProps) => {
    {couponInfo.register_room_numbers.map((room, index) => ( -
  • {room}
    • +
  • + {room.length > 10 + ? `${room.substring(0, 10)}...` + : room} +
    • ))}
diff --git a/src/components/common/ToastContext/index.tsx b/src/components/common/ToastContext/index.tsx index 577ac6ee..716fc116 100644 --- a/src/components/common/ToastContext/index.tsx +++ b/src/components/common/ToastContext/index.tsx @@ -52,6 +52,7 @@ const ToastContainer = styled.div` bottom: 50px; left: 50%; transform: translateX(-50%); + white-space: nowrap; padding: 15px 31px; border-radius: 5px; @@ -68,4 +69,12 @@ const ToastContainer = styled.div` text-decoration-line: underline; cursor: pointer; } + + @media (max-width: 900px) { + font-size: 10px; + span { + margin-left: 20px; + font-size: 10px; + } + } `; From c427b2eecd430a7c15d5f501ef8a034d56006b96 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Fri, 26 Jan 2024 01:49:10 +0900 Subject: [PATCH 14/17] =?UTF-8?q?fix:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=8F=B0=ED=8A=B8=EC=82=AC=EC=9D=B4=EC=A6=88=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/lib/getCouponList.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/api/lib/getCouponList.ts b/src/api/lib/getCouponList.ts index 1629e85a..4f18e474 100644 --- a/src/api/lib/getCouponList.ts +++ b/src/api/lib/getCouponList.ts @@ -49,6 +49,7 @@ export const couponDeleteApi = async ( // 토클 on/off api export const couponToggleApi = async (credential: CouponToggleCredential) => { const couponNumber = credential.coupon_number; + await new Promise(resolve => setTimeout(resolve, 500)); const response = await instance.put( `/v1/coupons/${couponNumber}/expose`, credential From d3a029669d8ac091eb03bcc6764c9d52e20ff3da Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Fri, 26 Jan 2024 02:44:18 +0900 Subject: [PATCH 15/17] =?UTF-8?q?design:=20=ED=85=8D=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=A7=88=EC=A7=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CouponList/CouponItem/CouponExpired/index.tsx | 2 +- src/components/CouponList/CouponItem/CouponExpose/index.tsx | 5 +++-- src/components/CouponList/CouponItem/CouponStop/index.tsx | 2 +- src/components/CouponList/CouponItem/CouponWait/index.tsx | 2 +- 4 files changed, 6 insertions(+), 5 deletions(-) diff --git a/src/components/CouponList/CouponItem/CouponExpired/index.tsx b/src/components/CouponList/CouponItem/CouponExpired/index.tsx index a2eef3a8..59d9261b 100644 --- a/src/components/CouponList/CouponItem/CouponExpired/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpired/index.tsx @@ -242,7 +242,7 @@ const CountNumber = styled.div` `; const ContentWrap = styled.div` - margin: 8px; + margin: 8px 4px; display: flex; align-items: center; diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index 9ad9f453..a0cd139a 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -11,6 +11,7 @@ import { useOutsideClick, useToggleChange } from '@hooks/index'; import couponCondition from '@utils/lib/couponCondition'; import { useToast } from '@components/common/ToastContext'; import couponRoomType from '@utils/lib/couponRoomType'; +import { debounce } from 'lodash'; const CouponExpose = ({ couponInfo }: CouponListProps) => { const [isToggle, setIsToggle] = useState(true); @@ -80,7 +81,7 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { {couponInfo.title} debounce(() => handleToggle, 2000)} > {isToggle ? ( <> @@ -307,7 +308,7 @@ const CountNumber = styled.div` `; const ContentWrap = styled.div` - margin: 8px; + margin: 8px 4px; display: flex; align-items: center; diff --git a/src/components/CouponList/CouponItem/CouponStop/index.tsx b/src/components/CouponList/CouponItem/CouponStop/index.tsx index 1c20d3d1..427b805a 100644 --- a/src/components/CouponList/CouponItem/CouponStop/index.tsx +++ b/src/components/CouponList/CouponItem/CouponStop/index.tsx @@ -296,7 +296,7 @@ const CountNumber = styled.div` `; const ContentWrap = styled.div` - margin: 8px; + margin: 8px 4px; display: flex; align-items: center; diff --git a/src/components/CouponList/CouponItem/CouponWait/index.tsx b/src/components/CouponList/CouponItem/CouponWait/index.tsx index ee2473f4..d921469b 100644 --- a/src/components/CouponList/CouponItem/CouponWait/index.tsx +++ b/src/components/CouponList/CouponItem/CouponWait/index.tsx @@ -265,7 +265,7 @@ const CountNumber = styled.div` `; const ContentWrap = styled.div` - margin: 8px; + margin: 8px 4px; display: flex; align-items: center; From 74d8082559f1d840d737015bf4acdccb769334d9 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Fri, 26 Jan 2024 02:51:31 +0900 Subject: [PATCH 16/17] =?UTF-8?q?modify:=20=20toggle=20debounce=20?= =?UTF-8?q?=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CouponList/CouponItem/CouponExpose/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index a0cd139a..3d3e96d5 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -81,7 +81,7 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => { {couponInfo.title} debounce(() => handleToggle, 2000)} + onClick={handleToggle} > {isToggle ? ( <> From 20df23c733bccc82ae93e78ecf42fba28913da69 Mon Sep 17 00:00:00 2001 From: jinjoo-jung Date: Fri, 26 Jan 2024 02:57:38 +0900 Subject: [PATCH 17/17] =?UTF-8?q?fix:=20import=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/CouponList/CouponItem/CouponExpose/index.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/CouponList/CouponItem/CouponExpose/index.tsx b/src/components/CouponList/CouponItem/CouponExpose/index.tsx index 3d3e96d5..dd3163a0 100644 --- a/src/components/CouponList/CouponItem/CouponExpose/index.tsx +++ b/src/components/CouponList/CouponItem/CouponExpose/index.tsx @@ -11,7 +11,6 @@ import { useOutsideClick, useToggleChange } from '@hooks/index'; import couponCondition from '@utils/lib/couponCondition'; import { useToast } from '@components/common/ToastContext'; import couponRoomType from '@utils/lib/couponRoomType'; -import { debounce } from 'lodash'; const CouponExpose = ({ couponInfo }: CouponListProps) => { const [isToggle, setIsToggle] = useState(true);