hotfix: buyer consult empty missing

.github/ISSUE_TEMPLATE/bug.md

@@ -6,14 +6,36 @@ labels: 'Bug'
 assignees: ''
 ---
 
-## Describtion
+## 문제 상황 (AS-IS)
 
 <br>
-Bug 내용을 작성해주세요.
+(현재 어떤 문제나 어려움이 발생 했는지 설명합니다.)
 <br>
 
-## Etc
+## 기대상황 (TO-BE)
 
 <br>
-추가적인 사항을 작성해주세요.(선택)
+(기대하는/정상적인 상황에서는 어떻게 동작해야되는지 설명합니다.)
+<br>
+
+## 재현 방법
+
+<br>
+(해당 문제를 재현할 수 있는 방법을 시나리오 기반으로 작성합니다.)
+<br>
+
+## 스크린샷
+
+<br>
+(문제상황을 빠르게 이해할 수 있도록 참고할 수 있는 UI 스크린샷을 첨부합니다.)
+<br>
+
+## 환경
+
+<br>
+(어떠한 환경에서 문제가 발생했는지 정보를 입력합니다.)
+
+- **URL(*필수)**: (예시화면 링크)
+- Email(계정정보):
+- 브라우저:
 <br>

src/components/Buyer/BuyerConsult/BuyerLetterSection.tsx

@@ -5,6 +5,9 @@ import { useLayoutEffect, useState } from 'react';
 import { consultApiObject } from 'pages/Buyer/BuyerConsult';
 import { getLettersCustomers } from 'api/get';
 import { LoadingSpinner } from 'utils/LoadingSpinner';
+import { ReactComponent as Empty } from 'assets/icons/graphic-noting.svg';
+import { Heading } from 'styles/font';
+
 interface BuyerLetterSectionProps {
   sortType: number;
   isChecked: boolean;
@@ -62,25 +65,34 @@ export const BuyerLetterSection = ({
     );
   } else {
     return (
-      <BuyerLetterSectionWrapper>
-        {cardData.map((value) => {
-          return (
-            <ConsultCard
-              consultStyle={value.consultStyle}
-              id={value.id}
-              latestMessageContent={value.latestMessageContent}
-              latestMessageIsCustomer={value.latestMessageIsCustomer}
-              latestMessageUpdatedAt={value.latestMessageUpdatedAt}
-              opponentNickname={value.opponentNickname}
-              status={value.status}
-              unreadMessageCount={value.unreadMessageCount}
-              reviewCompleted={value.reviewCompleted}
-              consultId={value.consultId}
-              isLetter={true}
-            />
-          );
-        })}
-      </BuyerLetterSectionWrapper>
+      <>
+        {cardData.length !== 0 ? (
+          <BuyerLetterSectionWrapper>
+            {cardData.map((value) => {
+              return (
+                <ConsultCard
+                  consultStyle={value.consultStyle}
+                  id={value.id}
+                  latestMessageContent={value.latestMessageContent}
+                  latestMessageIsCustomer={value.latestMessageIsCustomer}
+                  latestMessageUpdatedAt={value.latestMessageUpdatedAt}
+                  opponentNickname={value.opponentNickname}
+                  status={value.status}
+                  unreadMessageCount={value.unreadMessageCount}
+                  reviewCompleted={value.reviewCompleted}
+                  consultId={value.consultId}
+                  isLetter={true}
+                />
+              );
+            })}
+          </BuyerLetterSectionWrapper>
+        ) : (
+          <EmptyWrapper>
+            <EmptyIcon />
+            <Heading>아직 진행한 상담이 없어요</Heading>
+          </EmptyWrapper>
+        )}{' '}
+      </>
     );
   }
 };
@@ -92,3 +104,13 @@ const BuyerLetterSectionWrapper = styled.section`
   align-items: center;
   padding: 1.2rem 0;
 `;
+
+const EmptyIcon = styled(Empty)`
+  padding: 4.7rem 4.41rem 4.603rem 4.5rem;
+`;
+const EmptyWrapper = styled.div`
+  margin-top: 10vh;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;