[콜밴] 생성/참여 제한 사용자 모달 노출

src/api/callvan/APIDetail.ts

@@ -5,6 +5,7 @@ import {
   CallvanListResponse,
   CallvanNotificationsResponse,
   CallvanPostDetail,
+  CallvanRestrictionResponse,
   CallvanReportRequest,
   CreateCallvanRequest,
   CreateCallvanResponse,
@@ -42,6 +43,18 @@ export class GetCallvanNotifications<R extends CallvanNotificationsResponse> imp
   constructor(public authorization: string) {}
 }
 
+export class GetCallvanRestriction<R extends CallvanRestrictionResponse> implements APIRequest<R> {
+  method = HTTP_METHOD.GET;
+
+  path = '/callvan/restriction';
+
+  response!: R;
+
+  auth = true;
+
+  constructor(public authorization: string) {}
+}
+
 export class PostMarkAllNotificationsRead<R extends object> implements APIRequest<R> {
   method = HTTP_METHOD.POST;
 

src/api/callvan/entity.ts

@@ -74,6 +74,22 @@ export interface CallvanListResponse extends APIResponse {
   total_page: number;
 }
 
+export type CallvanRestrictionType = 'TEMPORARY_RESTRICTION_14_DAYS' | 'PERMANENT_RESTRICTION';
+
+export interface UnrestrictedCallvanResponse {
+  is_restricted: false;
+  restriction_type: null;
+  restricted_until: null;
+}
+
+export interface RestrictedCallvanResponse {
+  is_restricted: true;
+  restriction_type: CallvanRestrictionType;
+  restricted_until: string;
+}
+
+export type CallvanRestrictionResponse = UnrestrictedCallvanResponse | RestrictedCallvanResponse;
+
 export type CallvanNotificationType =
   | 'RECRUITMENT_COMPLETE'
   | 'NEW_MESSAGE'

src/api/callvan/index.ts

@@ -6,6 +6,7 @@ import {
   GetCallvanList,
   GetCallvanNotifications,
   GetCallvanPostDetail,
+  GetCallvanRestriction,
   PostCallvan,
   PostCallvanReport,
   PostCallvanChat,
@@ -20,6 +21,7 @@ import {
 export const getCallvanList = APIClient.of(GetCallvanList);
 export const getCallvanPostDetail = APIClient.of(GetCallvanPostDetail);
 export const getCallvanNotifications = APIClient.of(GetCallvanNotifications);
+export const getCallvanRestriction = APIClient.of(GetCallvanRestriction);
 export const markAllNotificationsRead = APIClient.of(PostMarkAllNotificationsRead);
 export const markNotificationRead = APIClient.of(PostMarkNotificationRead);
 export const deleteAllNotifications = APIClient.of(DeleteAllNotifications);

src/api/callvan/mutations.ts

@@ -19,7 +19,7 @@ const invalidateCallvanInfiniteList = (queryClient: QueryClient) =>
   queryClient.invalidateQueries({ queryKey: callvanQueryKeys.infiniteListRoot });
 
 const invalidateCallvanNotifications = (queryClient: QueryClient) =>
-  queryClient.invalidateQueries({ queryKey: callvanQueryKeys.notifications });
+  queryClient.invalidateQueries({ queryKey: ['callvan', 'notifications'] });
 
 export const callvanMutations = {
   create: (queryClient: QueryClient, token: string) =>

src/api/callvan/queries.ts

@@ -1,6 +1,6 @@
 import { infiniteQueryOptions, queryOptions } from '@tanstack/react-query';
 import { CallvanListRequest } from './entity';
-import { getCallvanChat, getCallvanList, getCallvanNotifications, getCallvanPostDetail } from './index';
+import { getCallvanChat, getCallvanList, getCallvanNotifications, getCallvanPostDetail, getCallvanRestriction } from './index';
 
 const CALLVAN_LIST_LIMIT = 10;
 
@@ -12,7 +12,8 @@ export const callvanQueryKeys = {
   list: (params: CallvanListRequest) => [...callvanQueryKeys.listRoot, params] as const,
   infiniteListRoot: ['callvan', 'infinite-list'] as const,
   infiniteList: (params: CallvanInfiniteListParams) => [...callvanQueryKeys.infiniteListRoot, params] as const,
-  notifications: ['callvan', 'notifications'] as const,
+  notifications: (token: string) => ['callvan', 'notifications', token] as const,
+  restriction: (token: string) => ['callvan', 'restriction', token] as const,
   postDetail: (postId: number) => ['callvan', 'post-detail', postId] as const,
   chat: (postId: number) => ['callvan', 'chat', postId] as const,
 };
@@ -45,8 +46,16 @@ export const callvanQueries = {
 
   notifications: (token: string) =>
     queryOptions({
-      queryKey: callvanQueryKeys.notifications,
+      queryKey: callvanQueryKeys.notifications(token),
       queryFn: () => getCallvanNotifications(token),
+      staleTime: 60000,
+    }),
+
+  restriction: (token: string) =>
+    queryOptions({
+      queryKey: callvanQueryKeys.restriction(token),
+      queryFn: () => getCallvanRestriction(token),
+      staleTime: 0,
     }),
 
   postDetail: (token: string, postId: number) =>

src/components/Callvan/components/CallvanRestrictionModal/CallvanRestrictionModal.module.scss

@@ -0,0 +1,97 @@
+$callvan-restriction-accent-color: #b611f5;
+$callvan-restriction-font-family: var(--font-pretendard), sans-serif;
+
+.modal {
+  &__overlay {
+    position: fixed;
+    inset: 0;
+    z-index: 300;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 24px;
+    box-sizing: border-box;
+  }
+
+  &__dim {
+    position: absolute;
+    inset: 0;
+    border: none;
+    background: rgb(0 0 0 / 70%);
+    padding: 0;
+    cursor: pointer;
+  }
+
+  &__sheet {
+    position: relative;
+    z-index: 301;
+    width: min(301px, 100%);
+    border-radius: 8px;
+    background: #fff;
+    box-shadow:
+      0 1px 2px rgb(0 0 0 / 4%),
+      0 4px 5px rgb(0 0 0 / 8%);
+  }
+
+  &__content {
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
+    align-items: center;
+    padding: 24px 32px;
+  }
+
+  &__text {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+    align-items: center;
+    width: 100%;
+    text-align: center;
+  }
+
+  &__title {
+    margin: 0;
+    color: #4b4b4b;
+    font-family: $callvan-restriction-font-family;
+    font-size: 18px;
+    font-weight: 500;
+    line-height: 1.6;
+  }
+
+  &__accent {
+    color: $callvan-restriction-accent-color;
+  }
+
+  &__description {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    color: #727272;
+    font-family: $callvan-restriction-font-family;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 1.6;
+
+    p {
+      margin: 0;
+    }
+  }
+
+  &__button {
+    display: flex;
+    width: 100%;
+    align-items: center;
+    justify-content: center;
+    border: none;
+    border-radius: 8px;
+    background: $callvan-restriction-accent-color;
+    padding: 12px;
+    color: #fff;
+    font-family: $callvan-restriction-font-family;
+    font-size: 15px;
+    font-weight: 500;
+    line-height: 1.6;
+    cursor: pointer;
+  }
+}

src/components/Callvan/components/CallvanRestrictionModal/index.tsx

@@ -0,0 +1,54 @@
+import { useEffect } from 'react';
+import { RestrictedCallvanResponse } from 'api/callvan/entity';
+import { getCallvanRestrictionModalCopy } from 'components/Callvan/utils/callvanRestriction';
+import { useBodyScrollLock } from 'utils/hooks/ui/useBodyScrollLock';
+import styles from './CallvanRestrictionModal.module.scss';
+
+interface CallvanRestrictionModalProps {
+  restriction: RestrictedCallvanResponse | null;
+  onClose: () => void;
+}
+
+export default function CallvanRestrictionModal({ restriction, onClose }: CallvanRestrictionModalProps) {
+  useBodyScrollLock();
+
+  const { titleAccent, titleRest, descriptionLines } = getCallvanRestrictionModalCopy(restriction);
+
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape') {
+        onClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [onClose]);
+
+  return (
+    <div className={styles.modal__overlay} role="dialog" aria-modal="true" aria-labelledby="callvan-restriction-title">
+      <button type="button" className={styles.modal__dim} onClick={onClose} aria-label="닫기" />
+      <div className={styles.modal__sheet}>
+        <div className={styles.modal__content}>
+          <div className={styles.modal__text}>
+            <h2 id="callvan-restriction-title" className={styles.modal__title}>
+              <span className={styles.modal__accent}>{titleAccent}</span>
+              {titleRest}
+            </h2>
+            <div className={styles.modal__description}>
+              {descriptionLines.map((line, index) => (
+                <p key={`${line}-${index}`}>{line}</p>
+              ))}
+            </div>
+          </div>
+          <button type="button" className={styles.modal__button} onClick={onClose}>
+            닫기
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}

src/components/Callvan/hooks/useCallvanRestrictionModal.tsx

@@ -0,0 +1,47 @@
+import { useCallback } from 'react';
+import { sendClientError } from '@bcsdlab/koin';
+import { useQueryClient } from '@tanstack/react-query';
+import { RestrictedCallvanResponse } from 'api/callvan/entity';
+import { callvanQueries } from 'api/callvan/queries';
+import CallvanRestrictionModal from 'components/Callvan/components/CallvanRestrictionModal';
+import { isCallvanRestrictedError } from 'components/Callvan/utils/callvanRestriction';
+import { Portal } from 'components/modal/Modal/PortalProvider';
+import useModalPortal from 'utils/hooks/layout/useModalPortal';
+
+export default function useCallvanRestrictionModal(token: string) {
+  const portalManager = useModalPortal();
+  const queryClient = useQueryClient();
+
+  const open = useCallback(
+    (restriction: RestrictedCallvanResponse) => {
+      portalManager.open((portalOption: Portal) => (
+        <CallvanRestrictionModal restriction={restriction} onClose={portalOption.close} />
+      ));
+    },
+    [portalManager],
+  );
+
+  const openFromError = useCallback(
+    async (error: unknown) => {
+      if (!isCallvanRestrictedError(error)) return false;
+
+      if (!token) return false;
+
+      try {
+        const restriction = await queryClient.fetchQuery(callvanQueries.restriction(token));
+        if (restriction.is_restricted) {
+          open(restriction);
+          return true;
+        }
+
+        return false;
+      } catch (restrictionError) {
+        sendClientError(restrictionError);
+        return false;
+      }
+    },
+    [open, queryClient, token],
+  );
+
+  return { openFromError };
+}

src/components/Callvan/hooks/useCreateCallvan.ts

@@ -1,17 +1,25 @@
 import { isKoinError, sendClientError } from '@bcsdlab/koin';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { callvanMutations } from 'api/callvan/mutations';
+import useCallvanRestrictionModal from 'components/Callvan/hooks/useCallvanRestrictionModal';
 import useTokenState from 'utils/hooks/state/useTokenState';
 import showToast from 'utils/ts/showToast';
 
 const useCreateCallvan = () => {
   const token = useTokenState();
   const queryClient = useQueryClient();
   const mutation = callvanMutations.create(queryClient, token);
+  const { openFromError } = useCallvanRestrictionModal(token);
 
   const { mutate, isPending } = useMutation({
     ...mutation,
-    onError: (e) => {
+    onError: async (e) => {
+      try {
+        if (await openFromError(e)) return;
+      } catch (restrictionError) {
+        sendClientError(restrictionError);
+      }
+
       if (isKoinError(e)) {
         showToast('error', e.message || '게시글 작성에 실패했습니다.');
       } else {

src/components/Callvan/hooks/useJoinCallvan.ts

@@ -1,21 +1,29 @@
 import { isKoinError, sendClientError } from '@bcsdlab/koin';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { callvanMutations } from 'api/callvan/mutations';
+import useCallvanRestrictionModal from 'components/Callvan/hooks/useCallvanRestrictionModal';
 import useTokenState from 'utils/hooks/state/useTokenState';
 import showToast from 'utils/ts/showToast';
 
 const useJoinCallvan = () => {
   const token = useTokenState();
   const queryClient = useQueryClient();
   const mutation = callvanMutations.join(queryClient, token);
+  const { openFromError } = useCallvanRestrictionModal(token);
 
   const { mutate, isPending } = useMutation({
     ...mutation,
     onSuccess: async (...args) => {
       await mutation.onSuccess?.(...args);
       showToast('success', '참여가 완료되었습니다.');
     },
-    onError: (e) => {
+    onError: async (e) => {
+      try {
+        if (await openFromError(e)) return;
+      } catch (restrictionError) {
+        sendClientError(restrictionError);
+      }
+
       if (isKoinError(e)) {
         showToast('error', e.message || '참여에 실패했습니다.');
       } else {