Merge pull request #174 from codeit-sprint-part3-6team/#173_모달-오버레이-및-인풋-수정

♻️ 모달 오버레이 및 인풋 수정

Author: dlwnsl

src/components/common/modal/general/GeneralModal.tsx

@@ -34,8 +34,11 @@ export default function GeneralModal({
   if (!isOpen) return null;
 
   return (
-    <OverlayContainer>
-      <div className={styles['modal-section']}>
+    <OverlayContainer onClose={onClose}>
+      <div
+        className={styles['modal-section']}
+        onClick={(e) => e.stopPropagation()}
+      >
         <div className={styles.top}>
           <div>
             <h1 className={styles.title}>{title}</h1>

src/components/common/sidebar/Sidebar.module.css

@@ -213,6 +213,10 @@
     display: none;
   }
 
+  .menu-dashboard {
+    justify-content: center;
+  }
+
   .color-circle {
     /* margin: 0 0 20px 0; */
     margin: 0;

src/components/common/sidebar/Sidebar.tsx

@@ -170,8 +170,8 @@ export default function Sidebar() {
 
       {/* 모달창 */}
       {showModal && (
-        <OverlayContainer>
-          <div className={styles.modal}>
+        <OverlayContainer onClose={closeModal}>
+          <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
             <h2>새로운 대시보드</h2>
             <h3>대시보드 이름</h3>
             <input

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

@@ -74,10 +74,6 @@
   color: var(--black-medium);
 }
 
-.modal-input:focus {
-  border: 1px solid var(--gray-medium);
-}
-
 .color-picker {
   margin-top: 16px;
   margin-bottom: 40px;

src/components/product/mydashboard/DashboardList.tsx

@@ -146,8 +146,8 @@ export default function DashboardList() {
 
       {/* 모달창 */}
       {showModal && (
-        <OverlayContainer>
-          <div className={styles.modal}>
+        <OverlayContainer onClose={closeModal}>
+          <div className={styles.modal} onClick={(e) => e.stopPropagation()}>
             <h2>새로운 대시보드</h2>
             <h3>대시보드 이름</h3>
             <input

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

@@ -10,19 +10,11 @@
   margin-bottom: 32px;
 }
 
-.input-container {
-  width: 100%;
-  border: 1px solid var(--gray-medium);
-  border-radius: 6px;
-  gap: 8px;
-  display: flex;
-  align-items: center;
-  gap: 8px;
-}
-
 .icon {
+  position: fixed;
   margin-left: 16px;
   cursor: pointer;
+  margin-top: 8px;
 }
 
 .input::placeholder {
@@ -32,7 +24,13 @@
 }
 
 .input {
-  border-style: none;
+  padding-left: 48px;
+  width: 100%;
+  border: 1px solid var(--gray-medium);
+  border-radius: 6px;
+  gap: 8px;
+  display: flex;
+  align-items: center;
   height: 40px;
 }
 
@@ -242,15 +240,14 @@
   }
 
   .skeleton-title {
-    padding: 0;
+    display: none;
   }
 
   .skeleton-row {
-    display: flex;
+    flex-direction: column;
     gap: 20px;
-    align-items: center;
-    height: 52px;
-    margin-bottom: 20px;
+    align-items: normal;
+    height: 130px;
   }
 }