fix: 모달 일러스트 제거 (#127)

depromeet · Aug 23, 2024 · b322842 · b322842
1 parent 922d731
commit b322842
Show file tree

Hide file tree

Showing 5 changed files with 28 additions and 27 deletions.
diff --git a/...web-domains/src/home/features/floating-button/components/AlreadyAnsweredQuestionModal.tsx b/...web-domains/src/home/features/floating-button/components/AlreadyAnsweredQuestionModal.tsx
@@ -1,18 +1,13 @@
 import { Txt, Button } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
 
-import { RectQuestion } from '@/common/asset/rectquestion';
 import { Modal, ModalProps } from '@/common/components/Modal/Modal';
-import { Avatar } from '@/home/common/components/Avatar/Avatar';
 
 export const AlreadyAnsweredQuestionModal = ({ ...rest }: ModalProps) => {
   return (
     <Modal {...rest}>
-      <div>
+      <div css={{ padding: '12px 0 0' }}>
         <div css={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-          <span css={{ marginBottom: '20px' }}>
-            <Avatar Icon={RectQuestion} size={80} />
-          </span>
           <Txt as="p" typography="heading2" css={{ marginBottom: '8px' }} color={colors.black}>
             이미 답변한 릴레이 질문이에요!
           </Txt>

diff --git a/...ges/web-domains/src/home/features/notification/components/ArrivedQuestionNotification.tsx b/...ges/web-domains/src/home/features/notification/components/ArrivedQuestionNotification.tsx
@@ -2,10 +2,8 @@ import { Button, Txt } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
 import Link from 'next/link';
 
-import { RectQuestion } from '../../../../common/asset/rectquestion';
 import { Modal, ModalProps } from '../../../../common/components/Modal/Modal';
 import { useDialogContext } from '../../../../common/contexts/DialogProvider';
-import { Avatar } from '../../../common/components/Avatar/Avatar';
 
 interface ArrivedQuestionNotificationProps extends ModalProps {
   onClickAnswerLater?: () => void;
@@ -16,11 +14,8 @@ export const ArrivedQuestionNotification = ({ onClickAnswerLater, ...rest }: Arr
 
   return (
     <Modal {...rest} isOpen={isOpen} onClose={close}>
-      <div>
+      <div css={{ padding: '12px 0 0' }}>
         <div css={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-          <span css={{ marginBottom: '20px' }}>
-            <Avatar Icon={RectQuestion} size={80} />
-          </span>
           <Txt as="p" typography="heading2" css={{ marginBottom: '8px' }} color={colors.black}>
             릴레이 질문이 도착했어요!
           </Txt>

diff --git a/...ges/web-domains/src/home/features/notification/components/ExpiredQuestionNotification.tsx b/...ges/web-domains/src/home/features/notification/components/ExpiredQuestionNotification.tsx
@@ -2,18 +2,13 @@ import { Txt, Button } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
 import Link from 'next/link';
 
-import { RectQuestion } from '@/common/asset/rectquestion';
 import { Modal, ModalProps } from '@/common/components/Modal/Modal';
-import { Avatar } from '@/home/common/components/Avatar/Avatar';
 
 export const ExpiredQuestionNotification = ({ ...rest }: ModalProps) => {
   return (
     <Modal {...rest}>
-      <div>
+      <div css={{ padding: '12px 0 0' }}>
         <div css={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-          <span css={{ marginBottom: '20px' }}>
-            <Avatar Icon={RectQuestion} size={80} />
-          </span>
           <Txt as="p" typography="heading2" css={{ marginBottom: '8px' }} color={colors.black}>
             마감기한이 지난 릴레이 질문이에요!
           </Txt>

diff --git a/...eb-domains/src/home/features/notification/components/SelectedTargetMemberNotification.tsx b/...eb-domains/src/home/features/notification/components/SelectedTargetMemberNotification.tsx
@@ -2,23 +2,23 @@ import { Button, Txt } from '@sambad/sds/components';
 import { colors } from '@sambad/sds/theme';
 import Link from 'next/link';
 
-import { RectQuestion } from '../../../../common/asset/rectquestion';
 import { Modal, ModalProps } from '../../../../common/components/Modal/Modal';
 import { useDialogContext } from '../../../../common/contexts/DialogProvider';
-import { Avatar } from '../../../common/components/Avatar/Avatar';
 
-interface SelectedTargetMemberNotificationProps extends ModalProps {}
+interface SelectedTargetMemberNotificationProps extends ModalProps {
+  onClickAnswerLater?: () => void;
+}
 
-export const SelectedTargetMemberNotification = ({ ...rest }: SelectedTargetMemberNotificationProps) => {
+export const SelectedTargetMemberNotification = ({
+  onClickAnswerLater,
+  ...rest
+}: SelectedTargetMemberNotificationProps) => {
   const { isOpen, close } = useDialogContext();
 
   return (
     <Modal {...rest} isOpen={isOpen} onClose={close}>
-      <div>
+      <div css={{ padding: '12px 0 0' }}>
         <div css={{ display: 'flex', flexDirection: 'column', alignItems: 'center' }}>
-          <span css={{ marginBottom: '20px' }}>
-            <Avatar Icon={RectQuestion} size={80} />
-          </span>
           <Txt as="p" typography="heading2" css={{ marginBottom: '8px' }}>
             릴레이 질문인으로 선택되었어요!
           </Txt>
@@ -32,6 +32,18 @@ export const SelectedTargetMemberNotification = ({ ...rest }: SelectedTargetMemb
               </Txt>
             </Button>
           </Link>
+          <Button
+            variant="sub"
+            css={{ border: 'none' }}
+            onClick={() => {
+              onClickAnswerLater?.();
+              close();
+            }}
+          >
+            <Txt typography="title3" color={colors.black}>
+              나중에 할게요
+            </Txt>
+          </Button>
         </div>
       </div>
     </Modal>

diff --git a/packages/web-domains/src/home/features/notification/containers/NotificationContainer.tsx b/packages/web-domains/src/home/features/notification/containers/NotificationContainer.tsx
@@ -17,7 +17,11 @@ export const NotificationContainer = () => {
         />
       )}
       {notfication?.eventType === 'TARGET_MEMBER' && isNotRegistered && (
-        <SelectedTargetMemberNotification isOpen={isOpen} onClose={handleClose} />
+        <SelectedTargetMemberNotification
+          isOpen={isOpen}
+          onClose={handleClose}
+          onClickAnswerLater={handleClickActionLater}
+        />
       )}
     </>
   );