From d16eb139aa15eed93016a3b39288a5e31798b462 Mon Sep 17 00:00:00 2001
From: abg3000 <abg3000@naver.com>
Date: Fri, 23 Aug 2024 21:13:07 +0900
Subject: [PATCH] =?UTF-8?q?fix:=20=EB=AA=A8=EB=8B=AC=20=EC=9D=BC=EB=9F=AC?=
 =?UTF-8?q?=EC=8A=A4=ED=8A=B8=20=EC=A0=9C=EA=B1=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AlreadyAnsweredQuestionModal.tsx          |  7 +----
 .../ArrivedQuestionNotification.tsx           |  7 +----
 .../ExpiredQuestionNotification.tsx           |  7 +----
 .../SelectedTargetMemberNotification.tsx      | 28 +++++++++++++------
 .../containers/NotificationContainer.tsx      |  6 +++-
 5 files changed, 28 insertions(+), 27 deletions(-)

diff --git a/packages/web-domains/src/home/features/floating-button/components/AlreadyAnsweredQuestionModal.tsx b/packages/web-domains/src/home/features/floating-button/components/AlreadyAnsweredQuestionModal.tsx
index 5a189d64..b31f6012 100644
--- a/packages/web-domains/src/home/features/floating-button/components/AlreadyAnsweredQuestionModal.tsx
+++ b/packages/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/packages/web-domains/src/home/features/notification/components/ArrivedQuestionNotification.tsx b/packages/web-domains/src/home/features/notification/components/ArrivedQuestionNotification.tsx
index 71088d9a..7e27c289 100644
--- a/packages/web-domains/src/home/features/notification/components/ArrivedQuestionNotification.tsx
+++ b/packages/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/packages/web-domains/src/home/features/notification/components/ExpiredQuestionNotification.tsx b/packages/web-domains/src/home/features/notification/components/ExpiredQuestionNotification.tsx
index 5d535f2c..41354b2f 100644
--- a/packages/web-domains/src/home/features/notification/components/ExpiredQuestionNotification.tsx
+++ b/packages/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/packages/web-domains/src/home/features/notification/components/SelectedTargetMemberNotification.tsx b/packages/web-domains/src/home/features/notification/components/SelectedTargetMemberNotification.tsx
index 58e67a39..a72f3db4 100644
--- a/packages/web-domains/src/home/features/notification/components/SelectedTargetMemberNotification.tsx
+++ b/packages/web-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
index 0f2ef8ce..16f944bc 100644
--- 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}
+        />
       )}
     </>
   );