refactor: promise settled의 status 검증하여 반환하는 util 함수 구현 (#336)

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}>

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);
+    });
+  });
+});

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;
+}