Merge pull request #178 from codeit-sprint-part3-6team/#177_인풋-수정

🐛 돋보기 위치 수정 및 누락된 모달 딤처리

Author: dlwnsl

src/components/common/modal/comment/CommentModal.tsx

@@ -2,10 +2,18 @@ import CDSButton from '../../button/CDSButton';
 import OverlayContainer from '../overlay-container/OverlayContainer';
 import styles from './CommentModal.module.css';
 
-function CommentModal({ message, handleCancelClick, handleConfirmClick }) {
+function CommentModal({
+  message,
+  handleCancelClick,
+  handleConfirmClick,
+  onclose,
+}) {
   return (
-    <OverlayContainer>
-      <div className={styles['comment-modal']}>
+    <OverlayContainer onClose={onclose}>
+      <div
+        className={styles['comment-modal']}
+        onClick={(e) => e.stopPropagation()}
+      >
         <p className={styles.message}>{message}</p>
 
         <div>

src/components/common/modal/delete-cards/DeleteCardsModal.tsx

@@ -2,10 +2,18 @@ import CDSButton from '../../button/CDSButton';
 import OverlayContainer from '../overlay-container/OverlayContainer';
 import styles from './DeleteCardsModal.module.css';
 
-function DeleteCardsModal({ message, handleCancelClick, handleDeleteClick }) {
+function DeleteCardsModal({
+  message,
+  handleCancelClick,
+  handleDeleteClick,
+  onClose,
+}) {
   return (
-    <OverlayContainer>
-      <div className={styles.deleteCardsModal_section}>
+    <OverlayContainer onClose={onClose}>
+      <div
+        className={styles.deleteCardsModal_section}
+        onClick={(e) => e.stopPropagation()}
+      >
         <p className={styles.message}>{message}</p>
 
         <div>

src/components/dashboard/column/Column.tsx

@@ -184,6 +184,7 @@ function Column({
       {/* 모달창 - 삭제 */}
       {isConfirmModalOpen && (
         <DeleteCardsModal
+          onClose={closeConfirmModal}
           message="컬럼의 모든 카드가 삭제됩니다."
           handleCancelClick={() => closeConfirmModal()}
           handleDeleteClick={handleDeleteClick}

src/components/dashboard/comment/Comment.tsx

@@ -126,6 +126,7 @@ function Comment({
       {/* 모달창 - 수정 */}
       {isEditModalOpen && (
         <CommentModal
+          onclose={closeEditModal}
           message="댓글을 수정하시겠습니까?"
           handleCancelClick={handleCancel}
           handleConfirmClick={handleSave}
@@ -135,6 +136,7 @@ function Comment({
       {/* 모달창 - 삭제 */}
       {isDeleteModalOpen && (
         <CommentModal
+          onclose={closeDeleteModal}
           message="댓글을 삭제하시겠습니까?"
           handleCancelClick={closeDeleteModal}
           handleConfirmClick={handleDelete}

src/components/product/mydashboard/InvitationList.module.css

@@ -11,7 +11,7 @@
 }
 
 .icon {
-  position: fixed;
+  position: absolute;
   margin-left: 16px;
   cursor: pointer;
   margin-top: 8px;