[#127] 정산페이지 QA 추가 문제

src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.error.tsx

@@ -31,9 +31,10 @@ const Container = styled.div`
 
   margin-left: 43px;
   margin-right: 43px;
-  margin-top: 110px;
+  margin-top: 100px;
+  margin-bottom: 85px;
   padding: 30px 15px;
-  border-radius: 20px;
+  border-radius: 10px;
 
   display: flex;
   flex-direction: column;

src/components/Settlements/SettlementsLeft/SettlementsSetting/Settlemented/index.loading.tsx

@@ -1,9 +1,21 @@
+import { useState, useEffect } from 'react';
 import styled from '@emotion/styled';
-import theme from '@styles/theme';
 import Skeleton from 'react-loading-skeleton';
 import 'react-loading-skeleton/dist/skeleton.css';
 
+import theme from '@styles/theme';
+
 const Loading = () => {
+
+  const [show, setShow] = useState(true);  
+
+  useEffect(() => {
+    let timeout = setTimeout(() => setShow(false), 5000); 
+    return () => clearTimeout(timeout);
+  }, []);
+
+  if (!show) return null;
+
   return (
     <Container>
       <Title />
@@ -22,9 +34,10 @@ const Container = styled.div`
 
   margin-left: 43px;
   margin-right: 43px;
-  margin-top: 110px;
+  margin-top: 100px;
+  margin-bottom: 85px;
   padding: 30px 15px;
-  border-radius: 20px;
+  border-radius: 10px;
 
   display: flex;
   flex-direction: column;

src/components/Settlements/SettlementsLeft/SettlementsSetting/SettlementsHeader/index.tsx

@@ -1,18 +1,32 @@
 import styled from '@emotion/styled';
-import { useState } from 'react';
+import { useState, useEffect, useRef } from 'react';
 
-import settlementsAdminIcon from '@assets/icons/settlements-admin.svg';
+import settlementsAdminIcon from '@assets/icons/settlemented-admin.svg';
 import informationIcon from '@assets/icons/information-circle-outline.svg';
 import SettlementsPopup from './SettlementsPopup';
 import theme from '@styles/theme';
 
 const SettlementsHeader = () => {
-  const [isPopupOpen, setIsPopupOpen] = useState(false)
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
+  const ref = useRef<HTMLDivElement>(null);
 
   const handlePopupToggle = () => {
     setIsPopupOpen(!isPopupOpen);
   };
 
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (isPopupOpen && ref.current && !ref.current.contains(event.target as Node)) {
+        setIsPopupOpen(false);
+      }
+    }
+
+    document.addEventListener('click', handleClickOutside);
+    return () => {
+      document.removeEventListener('click', handleClickOutside);
+    };
+  }, [isPopupOpen]);
+
   return (
     <Container>
       <Header>
@@ -27,7 +41,7 @@ const SettlementsHeader = () => {
         <MiddleText>
             쿠폰 프로모션에 적용한 정산 내역을 확인할 수 있습니다.
         </MiddleText>
-        <InformationContainer>
+        <InformationContainer ref={ref}>
         <InformationIcon
          src={informationIcon}
          alt="정보"