Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[#98] feat: Toast 구현 #107

Merged
merged 18 commits into from
Jan 25, 2024
Merged

[#98] feat: Toast 구현 #107

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
18 commits
Select commit Hold shift + click to select a range
03c710c
chore: react-toastify 라이브러리 설치
jinjoo-jung Jan 24, 2024
1fbe147
feat: toast 설정
jinjoo-jung Jan 24, 2024
1f078af
chore: 토스트 라이브러리 삭제
jinjoo-jung Jan 24, 2024
4b58aac
feat: ToastContext 구현
jinjoo-jung Jan 24, 2024
cb6efb9
feat: toast 메세지 타입 ReactNode로 변경
jinjoo-jung Jan 24, 2024
0787425
feat: 토글 on/off시 토스트 노출 구현
jinjoo-jung Jan 24, 2024
b424133
feat: 각 toast마다 setTimeout 다르게
jinjoo-jung Jan 24, 2024
78af5ab
fix: style props interface 제거
jinjoo-jung Jan 24, 2024
5da6818
fix: 토글 수정
jinjoo-jung Jan 25, 2024
ace0be9
fix: 토글 비동기 처리 수정
jinjoo-jung Jan 25, 2024
2fd065a
fix: coupon_room_types 데이터 처리 조건문 추가
jinjoo-jung Jan 25, 2024
22284d7
fix: 데이터 조건문 수정
jinjoo-jung Jan 25, 2024
da00d29
fix: 토스트 수정
jinjoo-jung Jan 25, 2024
c427b2e
fix: 토스트 폰트사이즈 수정
jinjoo-jung Jan 25, 2024
d3a0296
design: 텍스트 마진 수정
jinjoo-jung Jan 25, 2024
74d8082
modify: toggle debounce 제거
jinjoo-jung Jan 25, 2024
9507dd3
Merge branch 'dev' of https://github.com/CoolPeace-yanolza/frontend i…
jinjoo-jung Jan 25, 2024
20df23c
fix: import 제거
jinjoo-jung Jan 25, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 5 additions & 5 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

5 changes: 4 additions & 1 deletion src/App.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand All @@ -32,7 +33,9 @@ const App = () => {
>
<Suspense fallback={<Loading />}>
<BrowserRouter>
<MainRouter />
<ToastProvider>
<MainRouter />
</ToastProvider>
</BrowserRouter>
</Suspense>
</ErrorBoundary>
Expand Down
1 change: 1 addition & 0 deletions src/api/lib/getCouponList.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
25 changes: 19 additions & 6 deletions src/components/CouponList/CouponItem/CouponExpired/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,16 @@ 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 { useToast } from '@components/common/ToastContext';
import couponRoomType from '@utils/lib/couponRoomType';

const CouponExpired = ({ couponInfo }: CouponListProps) => {
const [isShowRoomList, setIsShowRoomList] = useState(false);
const roomListRef = useRef<HTMLDivElement>(null);
const [isShowModal, setIsShowModal] = useState(false);
const { mutateAsync } = useCouponDelete();
const { showToast } = useToast();

useOutsideClick(roomListRef, () => setIsShowRoomList(false));

Expand All @@ -27,7 +30,13 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => {

// 모달 확인 버튼에 대한 동작
const handleModalConfirm = () => {
mutateAsync({ coupon_number: couponInfo.coupon_number });
try {
mutateAsync({ coupon_number: couponInfo.coupon_number });
setIsShowModal(false);
showToast('쿠폰이 삭제되었습니다');
} catch (error) {
console.log('쿠폰 삭제 실패', error);
}
setIsShowModal(false);
};

Expand Down Expand Up @@ -64,9 +73,9 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => {
<ContentWrap>
<ContentTitle>일정</ContentTitle>
<ContentValue>
{couponInfo.coupon_room_type},
{couponRoomType(couponInfo.coupon_room_types).join(', ')},
<span>
{CouponCondition(couponInfo.coupon_use_condition_days)}
{couponCondition(couponInfo.coupon_use_condition_days)}
</span>
</ContentValue>
</ContentWrap>
Expand Down Expand Up @@ -96,7 +105,11 @@ const CouponExpired = ({ couponInfo }: CouponListProps) => {
<RoomListItem>
<ul>
{couponInfo.register_room_numbers.map((room, index) => (
<li key={index}>{room}</li>
<li key={index}>
{room.length > 10
? `${room.substring(0, 10)}...`
: room}
</li>
))}
</ul>
</RoomListItem>
Expand Down Expand Up @@ -229,7 +242,7 @@ const CountNumber = styled.div`
`;

const ContentWrap = styled.div`
margin: 8px;
margin: 8px 4px;

display: flex;
align-items: center;
Expand Down
67 changes: 55 additions & 12 deletions src/components/CouponList/CouponItem/CouponExpose/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,31 +8,70 @@ 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);
const [isShowRoomList, setIsShowRoomList] = useState(false);
const roomListRef = useRef<HTMLDivElement>(null);
const { mutateAsync } = useToggleChange();
const { showToast } = useToast();

const handleRoomList = () => {
setIsShowRoomList(!isShowRoomList);
};

useOutsideClick(roomListRef, () => setIsShowRoomList(false));

const handleToggle = () => {
setIsToggle(!isToggle);
toggleUpdate();
};

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(
<div>
{couponInfo.title} 쿠폰의 노출이 중단되었습니다.
<span onClick={retryToggleUpdate}>실행 취소</span>
</div>,
2000
);
} catch (error) {
console.log(error);
}
};

const handleRoomList = () => {
setIsShowRoomList(!isShowRoomList);
const retryToggleUpdate = () => {
setIsToggle(!isToggle);
mutateAsync({
coupon_number: couponInfo.coupon_number,
coupon_status: '노출 ON'
});
showToast(<div>{couponInfo.title} 쿠폰이 노출되었습니다.</div>, 2000);
};

useOutsideClick(roomListRef, () => setIsShowRoomList(false));
// const retryToggleUpdate = async () => {
// try {
// setIsToggle(!isToggle);
// mutateAsync({
// coupon_number: couponInfo.coupon_number,
// coupon_status: '노출 ON'
// });
// console.log(isToggle);
// showToast(<div>{couponInfo.title} 쿠폰의 노출되었습니다.</div>, 3000);
// } catch (error) {
// console.log(error);
// }
// };

return (
<CouponContainer $isToggle={isToggle}>
Expand Down Expand Up @@ -83,9 +122,9 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => {
<ContentWrap>
<ContentTitle>일정</ContentTitle>
<ContentValue>
{couponInfo.coupon_room_type},
{couponRoomType(couponInfo.coupon_room_types).join(', ')},
<span>
{CouponCondition(couponInfo.coupon_use_condition_days)}
{couponCondition(couponInfo.coupon_use_condition_days)}
</span>
</ContentValue>
</ContentWrap>
Expand Down Expand Up @@ -115,7 +154,11 @@ const CouponExpose = ({ couponInfo }: CouponListProps) => {
<RoomListItem>
<ul>
{couponInfo.register_room_numbers.map((room, index) => (
<li key={index}>{room}</li>
<li key={index}>
{room.length > 10
? `${room.substring(0, 10)}...`
: room}
</li>
))}
</ul>
</RoomListItem>
Expand Down Expand Up @@ -264,7 +307,7 @@ const CountNumber = styled.div`
`;

const ContentWrap = styled.div`
margin: 8px;
margin: 8px 4px;

display: flex;
align-items: center;
Expand Down
49 changes: 43 additions & 6 deletions src/components/CouponList/CouponItem/CouponStop/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,25 +8,58 @@ 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);
const [isShowRoomList, setIsShowRoomList] = useState(false);
const roomListRef = useRef<HTMLDivElement>(null);
const { mutateAsync } = useToggleChange();
const { showToast } = useToast();

useOutsideClick(roomListRef, () => setIsShowRoomList(false));

const handleRoomList = () => {
setIsShowRoomList(!isShowRoomList);
};

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(
<div>
{couponInfo.title} 쿠폰이 노출되었습니다.
<span onClick={retryToggleUpdate}>실행 취소</span>
</div>,
2000
);
} catch (error) {
console.log(error);
}
};

const retryToggleUpdate = () => {
setIsToggle(!isToggle);
mutateAsync({
coupon_number: couponInfo.coupon_number,
coupon_status: '노출 ON'
coupon_status: '노출 OFF'
});
showToast(
<div>{couponInfo.title} 쿠폰의 노출이 중단되었습니다.</div>,
2000
);
};

return (
Expand Down Expand Up @@ -78,9 +111,9 @@ const CouponStop = ({ couponInfo }: CouponListProps) => {
<ContentWrap>
<ContentTitle>일정</ContentTitle>
<ContentValue>
{couponInfo.coupon_room_type},
{couponRoomType(couponInfo.coupon_room_types).join(', ')},
<span>
{CouponCondition(couponInfo.coupon_use_condition_days)}
{couponCondition(couponInfo.coupon_use_condition_days)}
</span>
</ContentValue>
</ContentWrap>
Expand Down Expand Up @@ -110,7 +143,11 @@ const CouponStop = ({ couponInfo }: CouponListProps) => {
<RoomListItem>
<ul>
{couponInfo.register_room_numbers.map((room, index) => (
<li key={index}>{room}</li>
<li key={index}>
{room.length > 10
? `${room.substring(0, 10)}...`
: room}
</li>
))}
</ul>
</RoomListItem>
Expand Down Expand Up @@ -259,7 +296,7 @@ const CountNumber = styled.div`
`;

const ContentWrap = styled.div`
margin: 8px;
margin: 8px 4px;

display: flex;
align-items: center;
Expand Down
15 changes: 10 additions & 5 deletions src/components/CouponList/CouponItem/CouponWait/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand Down Expand Up @@ -90,9 +91,9 @@ const CouponWait = ({ couponInfo }: CouponListProps) => {
<ContentWrap>
<ContentTitle>일정</ContentTitle>
<ContentValue>
{couponInfo.coupon_room_type},
{couponRoomType(couponInfo.coupon_room_types).join(', ')},
<span>
{CouponCondition(couponInfo.coupon_use_condition_days)}
{couponCondition(couponInfo.coupon_use_condition_days)}
</span>
</ContentValue>
</ContentWrap>
Expand Down Expand Up @@ -122,7 +123,11 @@ const CouponWait = ({ couponInfo }: CouponListProps) => {
<RoomListItem>
<ul>
{couponInfo.register_room_numbers.map((room, index) => (
<li key={index}>{room}</li>
<li key={index}>
{room.length > 10
? `${room.substring(0, 10)}...`
: room}
</li>
))}
</ul>
</RoomListItem>
Expand Down Expand Up @@ -260,7 +265,7 @@ const CountNumber = styled.div`
`;

const ContentWrap = styled.div`
margin: 8px;
margin: 8px 4px;

display: flex;
align-items: center;
Expand Down
Loading