From 5cf44f7f9c1e9a41f4fc7164fc5a3fc47971e91f Mon Sep 17 00:00:00 2001
From: Harang <dbd02169@naver.com>
Date: Mon, 19 Aug 2024 16:14:54 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20promise=20settled=EC=9D=98=20status?=
 =?UTF-8?q?=20=EA=B2=80=EC=A6=9D=ED=95=98=EC=97=AC=20=EB=B0=98=ED=99=98?=
 =?UTF-8?q?=ED=95=98=EB=8A=94=20util=20=ED=95=A8=EC=88=98=20=EA=B5=AC?=
 =?UTF-8?q?=ED=98=84=20(#336)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/common/PlaceItem/index.tsx |  8 ++--
 src/utils/index.test.ts                   | 45 ++++++++++++++++++++++-
 src/utils/index.ts                        |  7 ++++
 3 files changed, 56 insertions(+), 4 deletions(-)

diff --git a/src/components/common/PlaceItem/index.tsx b/src/components/common/PlaceItem/index.tsx
index 6ff256fa..d53313c8 100644
--- a/src/components/common/PlaceItem/index.tsx
+++ b/src/components/common/PlaceItem/index.tsx
@@ -10,7 +10,7 @@ import clsx from 'clsx';
 
 import { ArchiveSolidIcon } from '@/lib/assets/icons';
 import { NaverSearchBlog } from '@/lib/types/blog';
-import { numberWithComma } from '@/utils';
+import { getSettledValue, numberWithComma } from '@/utils';
 
 import Button from '../Button';
 import StarRating from '../StarRating';
@@ -48,6 +48,8 @@ function PlaceItem<T = boolean>({
     onRemove?.(placeId);
   };
 
+  const settledSearchBlogPost = getSettledValue(searchBlogPost);
+
   return (
     <li
       ref={wrapperRef}
@@ -85,8 +87,8 @@ function PlaceItem<T = boolean>({
           <StarRating rating={checkNumber(rating)} type="list" />
           <div className={styles.placeUserRatingsTotal}>{`(${checkNumber(userRatingsTotal)})`}</div>
         </div>
-        {searchBlogPost?.status === 'fulfilled' && (
-          <div className={styles.searchTotal}>{`네이버 검색결과 ${numberWithComma(checkNumber(searchBlogPost?.value?.total_count))}개`}</div>
+        {!!settledSearchBlogPost && (
+          <div className={styles.searchTotal}>{`네이버 검색결과 ${numberWithComma(checkNumber(settledSearchBlogPost?.total_count))}개`}</div>
         )}
         {isSavedPlace && (
           <div className={styles.addressInfo}>
diff --git a/src/utils/index.test.ts b/src/utils/index.test.ts
index 26461dc6..53e85b4f 100644
--- a/src/utils/index.test.ts
+++ b/src/utils/index.test.ts
@@ -1,4 +1,6 @@
-import { codeToFlag, numberWithComma, targetFalseThenValue } from '@/utils';
+import {
+  codeToFlag, getSettledValue, numberWithComma, targetFalseThenValue,
+} from '@/utils';
 
 describe('codeToFlag', () => {
   it('flag 이모지 유니코드로 변경되어야만 한다.', () => {
@@ -63,3 +65,44 @@ describe('targetFalseThenValue', () => {
     });
   });
 });
+
+describe('getSettledValue', () => {
+  const defaultValue = 'default';
+
+  context('fulfilled 상태인 경우', () => {
+    it('성공한 결과값이 반환되어야만 한다', async () => {
+      const result = await Promise.allSettled([Promise.resolve('success')]);
+      const settledValue = getSettledValue(result[0], defaultValue);
+
+      expect(settledValue).toBe('success');
+    });
+  });
+
+  context('rejected 상태인 경우', () => {
+    it('default value가 반환되어야만 한다', async () => {
+      // eslint-disable-next-line prefer-promise-reject-errors
+      const result = await Promise.allSettled([Promise.reject('error')]);
+      const settledValue = getSettledValue(result[0], defaultValue);
+
+      expect(settledValue).toBe(defaultValue);
+    });
+  });
+
+  context('결과 값이 null인 경우', () => {
+    it('default value가 반환되어야만 한다', () => {
+      const result = null;
+      const settledValue = getSettledValue(result, defaultValue);
+
+      expect(settledValue).toBe(defaultValue);
+    });
+  });
+
+  context('결과 값이 undefined인 경우', () => {
+    it('default value가 반환되어야만 한다', () => {
+      const result = undefined;
+      const settledValue = getSettledValue(result, defaultValue);
+
+      expect(settledValue).toBe(defaultValue);
+    });
+  });
+});
diff --git a/src/utils/index.ts b/src/utils/index.ts
index c216dfed..033a0f0c 100644
--- a/src/utils/index.ts
+++ b/src/utils/index.ts
@@ -30,3 +30,10 @@ export function numberWithComma(
 export const targetFalseThenValue = (
   target?: boolean,
 ) => <T>(value: T): undefined | T => (target ? undefined : value);
+
+export function getSettledValue<T>(
+  result?: PromiseSettledResult<T> | null,
+  defaultValue?: T,
+): T | undefined {
+  return result?.status === 'fulfilled' ? result.value : defaultValue;
+}