diff --git a/package-lock.json b/package-lock.json
index a77525e5..b05f6420 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -28,6 +28,7 @@
         "react-cookie": "^7.0.1",
         "react-device-detect": "^2.2.3",
         "react-dom": "^18.2.0",
+        "react-microsoft-clarity": "^1.2.0",
         "react-router-dom": "^6.21.1",
         "react-scripts": "5.0.1",
         "react-textarea-autosize": "^8.5.3",
@@ -15481,6 +15482,11 @@
       "resolved": "https://registry.npmjs.org/react-is/-/react-is-17.0.2.tgz",
       "integrity": "sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w=="
     },
+    "node_modules/react-microsoft-clarity": {
+      "version": "1.2.0",
+      "resolved": "https://registry.npmjs.org/react-microsoft-clarity/-/react-microsoft-clarity-1.2.0.tgz",
+      "integrity": "sha512-a1bsJR1uN1daWq3cBc7NheEGPXrotMRE0oFeRio7kXvHawzQfqu5iX9BoYFF9zRUL0dn+Mz57h1fNlcv3pqXEg=="
+    },
     "node_modules/react-refresh": {
       "version": "0.11.0",
       "resolved": "https://registry.npmjs.org/react-refresh/-/react-refresh-0.11.0.tgz",
diff --git a/package.json b/package.json
index d896a24b..d2e8e68a 100644
--- a/package.json
+++ b/package.json
@@ -23,6 +23,7 @@
     "react-cookie": "^7.0.1",
     "react-device-detect": "^2.2.3",
     "react-dom": "^18.2.0",
+    "react-microsoft-clarity": "^1.2.0",
     "react-router-dom": "^6.21.1",
     "react-scripts": "5.0.1",
     "react-textarea-autosize": "^8.5.3",
diff --git a/public/index.html b/public/index.html
index 5848e98f..d94dc3b5 100644
--- a/public/index.html
+++ b/public/index.html
@@ -1,22 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <!-- Clarity tag -->
-    <script type="text/javascript">
-      (function (c, l, a, r, i, t, y) {
-        c[a] =
-          c[a] ||
-          function () {
-            (c[a].q = c[a].q || []).push(arguments);
-          };
-        t = l.createElement(r);
-        t.async = 1;
-        t.src = 'https://www.clarity.ms/tag/' + i;
-        y = l.getElementsByTagName(r)[0];
-        y.parentNode.insertBefore(t, y);
-      })(window, document, 'clarity', 'script', 'n11jaqdy8d');
-    </script>
-
     <!-- Google tag (gtag.js) -->
     <script
       async
diff --git a/src/Router.tsx b/src/Router.tsx
index eb3fbbda..f784938d 100644
--- a/src/Router.tsx
+++ b/src/Router.tsx
@@ -8,7 +8,6 @@ import { BuyerMypage } from 'pages/Buyer/BuyerMypage';
 import { BuyerSearch } from 'pages/Buyer/BuyerSearch';
 import { BuyerSearchResult } from 'pages/Buyer/BuyerSearchResult';
 import { BuyerSignup } from 'pages/Buyer/BuyerSignup';
-import { SellerCaculateManagement } from 'pages/Seller/SellerCalculateManagement';
 import { SellerConsult } from 'pages/Seller/SellerConsult';
 import { SellerHome } from 'pages/Seller/SellerHome';
 import { SellerLetter } from 'pages/Seller/SellerLetter';
@@ -56,6 +55,7 @@ import SellerProfitBankAccount from 'pages/Seller/SellerProfitBankAccount';
 import ServerDown from 'pages/Common/ServerDown';
 import SellerUpdateFail from 'pages/Seller/SellerUpdateFail';
 import { BuyerManyLovedCounselor } from 'pages/Buyer/BuyerManyLovedCounselor';
+import SellerCalculateManagement from 'pages/Seller/SellerCalculateManagement';
 
 const Router = () => {
   return (
@@ -164,7 +164,7 @@ const Router = () => {
       {/* 판매자 : 수익 관리 */}
       <Route
         path="/minder/calculatemanagement"
-        element={<SellerCaculateManagement />}
+        element={<SellerCalculateManagement />}
       />
       {/* 판매자 : 마인더 인증 */}
       <Route path="/minder/education/*" element={<SellerVerifyMaterial />} />
diff --git a/src/components/Seller/SellerCalculateManagement/CompleteApplyPopup.tsx b/src/components/Seller/SellerCalculateManagement/CompleteApplyPopup.tsx
index 934df9ea..ddeeb0a1 100644
--- a/src/components/Seller/SellerCalculateManagement/CompleteApplyPopup.tsx
+++ b/src/components/Seller/SellerCalculateManagement/CompleteApplyPopup.tsx
@@ -1,5 +1,6 @@
 import { Button } from 'components/Common/Button';
 import { Space } from 'components/Common/Space';
+import { ManageList } from 'pages/Seller/SellerCalculateManagement';
 import React from 'react';
 import styled from 'styled-components';
 import { Grey4 } from 'styles/color';
@@ -14,6 +15,9 @@ interface CompleteApplyPopupProps {
   date: string;
   consultType: string;
   setIsCompleteApplyManage: React.Dispatch<React.SetStateAction<boolean>>;
+  setManagementList: React.Dispatch<React.SetStateAction<ManageList>>;
+
+  id: number;
 }
 
 //
@@ -21,10 +25,12 @@ interface CompleteApplyPopupProps {
 //
 
 function CompleteApplyPopup({
-  name = '김고민',
-  date = '2001.12.15',
-  consultType = '무슨',
+  name,
+  date,
+  consultType,
   setIsCompleteApplyManage,
+  setManagementList,
+  id,
 }: CompleteApplyPopupProps) {
   return (
     <CompleteApplyPopupBox>
@@ -39,6 +45,9 @@ function CompleteApplyPopup({
         width="calc(100% - 3.2rem)"
         onClick={() => {
           setIsCompleteApplyManage(false);
+          setManagementList((prev: ManageList) =>
+            prev.filter((item) => item.paymentId !== id),
+          );
         }}
       />
     </CompleteApplyPopupBox>
diff --git a/src/components/Seller/SellerCalculateManagement/SellerCalculateCard.tsx b/src/components/Seller/SellerCalculateManagement/SellerCalculateCard.tsx
index 17d228fd..db9281c4 100644
--- a/src/components/Seller/SellerCalculateManagement/SellerCalculateCard.tsx
+++ b/src/components/Seller/SellerCalculateManagement/SellerCalculateCard.tsx
@@ -5,6 +5,7 @@ import { Grey3, Grey6, Green, White } from 'styles/color';
 import { Body1, Body3 } from 'styles/font';
 import CompleteApplyPopup from './CompleteApplyPopup';
 import { BackDrop } from 'components/Common/BackDrop';
+import { ManageList } from 'pages/Seller/SellerCalculateManagement';
 
 interface SellerCalulateCardProps {
   customerName: string;
@@ -13,11 +14,14 @@ interface SellerCalulateCardProps {
   salePrice: number;
   commission: number;
   paymentDate: string;
+  consultDate: string;
   paymentAccount: string;
   id: number;
   calculateActivate: boolean;
   isShowPopup: boolean;
   setIsShowPopup: any;
+  manageStatus: string;
+  setManagementList: React.Dispatch<React.SetStateAction<ManageList>>;
 }
 
 export const SellerCalulateCard = ({
@@ -28,10 +32,13 @@ export const SellerCalulateCard = ({
   commission,
   paymentAccount,
   paymentDate,
+  consultDate,
   calculateActivate,
   id,
   isShowPopup,
   setIsShowPopup,
+  manageStatus,
+  setManagementList,
 }: SellerCalulateCardProps) => {
   const applyManagement = async (id: number) => {
     const res: any = await patchApplyPayments(id);
@@ -59,6 +66,8 @@ export const SellerCalulateCard = ({
           consultType={consultType}
           date={paymentDate}
           setIsCompleteApplyManage={setIsShowPopup}
+          setManagementList={setManagementList}
+          id={id}
         />
       )}
       <SellerCalulateCardWrapper>
@@ -81,7 +90,13 @@ export const SellerCalulateCard = ({
           <Body3>{commission.toLocaleString()} 원</Body3>
         </ConsultEarnInfoItem>
         <ConsultEarnInfoItem>
-          <Body3 color={Grey3}>지급일자</Body3>
+          <Body3 color={Grey3}>상담일자</Body3>
+          <Body3>{consultDate}</Body3>
+        </ConsultEarnInfoItem>
+        <ConsultEarnInfoItem>
+          <Body3 color={Grey3}>
+            {manageStatus === '완료' ? '지급일자' : '지급예정'}
+          </Body3>
           <Body3>{paymentDate}</Body3>
         </ConsultEarnInfoItem>
         <ConsultEarnInfoItem>
diff --git a/src/index.tsx b/src/index.tsx
index 0dafb125..5a578ab9 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -10,6 +10,8 @@ import { StompProvider } from 'contexts/StompContext';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import AppLayout from 'App.Layout';
 
+import { clarity } from 'react-microsoft-clarity';
+
 axios.defaults.withCredentials = true;
 
 const root = ReactDOM.createRoot(
@@ -18,6 +20,10 @@ const root = ReactDOM.createRoot(
 
 const queryClient = new QueryClient();
 
+if (process.env.NODE_ENV === 'production') {
+  clarity.init(process.env.REACT_APP_CLARITY_ID as string);
+}
+
 root.render(
   <BrowserRouter>
     <RecoilRoot>
diff --git a/src/pages/Seller/SellerCalculateManagement.tsx b/src/pages/Seller/SellerCalculateManagement.tsx
index dc9e9aeb..112d12ed 100644
--- a/src/pages/Seller/SellerCalculateManagement.tsx
+++ b/src/pages/Seller/SellerCalculateManagement.tsx
@@ -15,21 +15,13 @@ import { LoadingSpinner } from 'utils/LoadingSpinner';
 import useIntersectionObserver from 'hooks/useIntersectionObserver';
 import { BackDrop } from 'components/Common/BackDrop';
 
-//
-//
-//
-
-const manageStatusMap = {
+const STATUS_MAP = {
   '정산 중': 'SETTLEMENT_ONGOING',
   '정산 예정': 'SETTLEMENT_WAITING',
   완료: 'SETTLEMENT_COMPLETE',
 };
 
-const sortTypeMap = ['WEEK', 'MONTH', 'ALL'];
-
-//
-//
-//
+const SORT_OPTIONS = ['WEEK', 'MONTH', 'ALL'];
 
 interface ManageItem {
   paymentId: number;
@@ -38,45 +30,34 @@ interface ManageItem {
   profit: number;
   cost: number;
   fee: number;
-  approvedAt: null;
-  account: null;
-  total: number;
+  consultedAt: string;
+  settledAt: string;
+  account: string;
 }
 
-type ManageList = ManageItem[];
-
-//
-//
-//
+export type ManageList = ManageItem[];
 
-export const SellerCaculateManagement = () => {
+export default function SellerCalculateManagement() {
   const navigate = useNavigate();
 
-  // 상단 탭의 상태
   const [manageStatus, setManageStatus] = useState<string>('완료');
-
-  // 드롭다운 메뉴, 최근 일주일 : 0 , 최근 1개월 : 1, 전체 : 2
   const [sortType, setSortType] = useState<number>(0);
-  const [isModalOpen, setIsModalOpen] = useRecoilState<boolean>(
-    isConsultModalOpenState,
-  );
-  const [isLastElem, setIsLastElem] = useState<boolean>(false);
+  const [isModalOpen, setIsModalOpen] = useRecoilState(isConsultModalOpenState);
+  const [isLastElem, setIsLastElem] = useState(false);
   const [managementList, setManagementList] = useState<ManageList>([]);
-  const [toatlMoney, setTotalMoney] = useState<number>(0);
+  const [totalMoney, setTotalMoney] = useState(0);
   const [isCompleteApplyManage, setIsCompleteApplyManage] = useState(false);
   const [isLoading, setIsLoading] = useState(true);
+  const [lastId, setLastId] = useState(0);
 
-  //scorll 막기
   const setScrollLock = useSetRecoilState(scrollLockState);
-
   const preventRef = useRef(true);
 
+  // 스크롤 인터섹션 콜백
   const onIntersect: IntersectionObserverCallback = async (entry) => {
     if (entry[0].isIntersecting && !isLastElem && preventRef.current) {
       preventRef.current = false;
-      await fetchManagements(
-        managementList[managementList.length - 1].paymentId,
-      );
+      await fetchManagements(lastId);
       preventRef.current = true;
     }
   };
@@ -88,43 +69,32 @@ export const SellerCaculateManagement = () => {
     onIntersect,
   });
 
-  /**
-   *
-   */
   const fetchManagements = async (lastId: number) => {
     const params = {
-      status: manageStatusMap[manageStatus as keyof typeof manageStatusMap],
-      sort: sortTypeMap[sortType],
+      status: STATUS_MAP[manageStatus as keyof typeof STATUS_MAP],
+      sort: SORT_OPTIONS[sortType],
       paymentId: lastId,
     };
-    const res: any = await getPaymentsMinder({ params });
+
     try {
-      if (res?.status === 200) {
-        if (res.data.length !== 0) {
-          if (lastId === 0) {
-            setManagementList(res.data);
-            let totalEarnMoney = 0;
-            res?.data?.forEach((item: ManageItem) => {
-              totalEarnMoney += Number(item?.profit);
-            });
-            setTotalMoney(totalEarnMoney);
-          } else {
-            const updatedManages = [...managementList, ...res.data];
-            setManagementList(updatedManages);
-            let totalEarnMoney = 0;
-            res?.data?.forEach((item: ManageItem) => {
-              totalEarnMoney += Number(item?.profit);
-            });
-            setTotalMoney(totalEarnMoney);
-          }
+      const res: any = await getPaymentsMinder({ params });
+
+      if (res.status === 200) {
+        const responses = res.data.paymentGetCounselorResponses;
+        const isInitialLoad = lastId === 0;
+        setTotalMoney(res.data.total);
+        if (responses.length) {
+          setManagementList(
+            isInitialLoad ? responses : [...managementList, ...responses],
+          );
+          setLastId(responses[responses.length - 1].paymentId);
+          setIsLastElem(false);
         } else {
-          setManagementList(res.data);
+          setManagementList(
+            isInitialLoad ? [] : [...managementList, ...responses],
+          );
+          setLastId(0);
           setIsLastElem(true);
-          let totalEarnMoney = 0;
-          res?.data?.forEach((item: ManageItem) => {
-            totalEarnMoney += Number(item?.profit);
-          });
-          setTotalMoney(totalEarnMoney);
         }
       } else {
         alert('판매 정보가 아직 등록되지 않았어요!');
@@ -133,22 +103,13 @@ export const SellerCaculateManagement = () => {
     } catch (err) {
       alert(err);
     } finally {
-      if (lastId === 0) {
-        setIsLoading(false);
-      }
+      if (lastId === 0) setIsLoading(false);
     }
   };
 
-  //
-  //
-  //
   useEffect(() => {
     fetchManagements(0);
-  }, [manageStatus, sortType, isCompleteApplyManage, navigate]);
-
-  //
-  //
-  //
+  }, [sortType, manageStatus]);
 
   return (
     <>
@@ -158,10 +119,11 @@ export const SellerCaculateManagement = () => {
         setManageStatus={setManageStatus}
         sortType={sortType}
       />
+
       {isLoading ? (
-        <div style={{ display: 'flex', alignItems: 'center', height: '70vh' }}>
+        <CenteredContainer>
           <LoadingSpinner />
-        </div>
+        </CenteredContainer>
       ) : (
         <>
           <TotalEarnMoney>
@@ -172,45 +134,39 @@ export const SellerCaculateManagement = () => {
                 ? '정산 중 금액 합계'
                 : '정산예정 금액 합계'}
             </Heading>
-            <Subtitle color={Red}>{toatlMoney?.toLocaleString()} 원</Subtitle>
+            <Subtitle color={Red}>{totalMoney?.toLocaleString()} 원</Subtitle>
           </TotalEarnMoney>
-          {/* 내역이 없을시 */}
-          {managementList?.length === 0 ? (
+
+          {managementList.length === 0 ? (
             <NoCalculationGraphic status={manageStatus} />
           ) : (
-            <>
-              <SellerCalculateCardList>
-                {/* //정산 예정일일 경우 calculateActivate false true로~*/}
-                {managementList?.map((item) => (
-                  <SellerCalulateCard
-                    key={item?.paymentId}
-                    id={item?.paymentId}
-                    customerName={item?.nickname}
-                    calculateActivate={
-                      manageStatus === '정산 예정' ? true : false
-                    }
-                    consultType={item?.isChat ? '채팅' : '편지'}
-                    netProfit={item?.profit}
-                    commission={item?.fee}
-                    paymentAccount={item?.account ?? '계좌 명시안됨'}
-                    paymentDate={item?.approvedAt ?? '지급 일자 명시안됨'}
-                    salePrice={item?.cost}
-                    isShowPopup={isCompleteApplyManage}
-                    setIsShowPopup={setIsCompleteApplyManage}
-                  />
-                ))}
-              </SellerCalculateCardList>
-              {!isLastElem ? (
-                <div ref={setTarget} style={{ height: '3.5rem' }} />
-              ) : (
-                <div style={{ height: '3.5rem' }} />
-              )}
-            </>
+            <SellerCalculateCardList>
+              {managementList.map((item) => (
+                <SellerCalulateCard
+                  key={item.paymentId}
+                  manageStatus={manageStatus}
+                  id={item.paymentId}
+                  customerName={item.nickname}
+                  calculateActivate={manageStatus === '정산 예정'}
+                  consultType={item.isChat ? '채팅' : '편지'}
+                  netProfit={item.profit}
+                  commission={item.fee}
+                  paymentAccount={item.account ?? '계좌 명시안됨'}
+                  consultDate={item.consultedAt ?? '상담 일자 명시안됨'}
+                  paymentDate={item.settledAt ?? '지급 일자 명시안됨'}
+                  salePrice={item.cost}
+                  isShowPopup={isCompleteApplyManage}
+                  setIsShowPopup={setIsCompleteApplyManage}
+                  setManagementList={setManagementList}
+                />
+              ))}
+              {!isLastElem && <IntersectionTarget ref={setTarget} />}
+            </SellerCalculateCardList>
           )}
         </>
       )}
 
-      {isModalOpen ? (
+      {isModalOpen && (
         <>
           <BackDrop
             onClick={() => {
@@ -224,22 +180,33 @@ export const SellerCaculateManagement = () => {
             setSortType={setSortType}
           />
         </>
-      ) : null}
+      )}
     </>
   );
-};
+}
+
+// 스타일 컴포넌트 정의
+const CenteredContainer = styled.div`
+  display: flex;
+  align-items: center;
+  height: 70vh;
+`;
 
 const TotalEarnMoney = styled.div`
   display: flex;
   align-items: center;
   gap: 0.8rem;
-  margin: 1.2rem 2rem 1.2rem;
+  margin: 1.2rem 2rem;
 `;
 
 const SellerCalculateCardList = styled.div`
   display: flex;
-  gap: 1rem;
-  margin: 1.4rem 0rem;
-  align-items: center;
   flex-direction: column;
+  align-items: center;
+  gap: 1rem;
+  margin: 1.4rem 0;
+`;
+
+const IntersectionTarget = styled.div`
+  height: 3.5rem;
 `;
