⚡ 공용 컴포넌트 리팩토링 (#64)

* feat: Toast 폴더 분리
* feat: 토스트 핸들러 함수 위치 이동
* feat: 토스트 메시지 매개변수 추가
* feat: 토스트 아이콘 매개변수 추가
* feat: Carousel widgets 폴더로 이동
* feat: 피드 목록 조회 delay 제거
* feat: 아이폰 최소 및 초기 사이즈 75%로 수정
* feat: 아이폰 레이아웃 미디어쿼리 최소 너비 수정

Closes #60

src/app/App.tsx

@@ -3,7 +3,7 @@ import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 import { RouterProvider } from 'react-router-dom';
 
 import { queryClient } from '@/shared/react-query';
-import { NetworkErrorToast } from '@/shared/ui';
+import { Toast } from '@/shared/toast';
 
 import { router } from './routers/index';
 import './styles/global.scss';
@@ -13,7 +13,7 @@ function App() {
     <QueryClientProvider client={queryClient}>
       <RouterProvider router={router} />
 
-      <NetworkErrorToast />
+      <Toast />
       <ReactQueryDevtools />
     </QueryClientProvider>
   );

src/app/layout/iPhone/hooks/useUtilityIPhone.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useRef } from 'react';
 
-const IPHONE_MIN_SIZE = 60;
-const IPHONE_INIT_SIZE = 80;
+const IPHONE_MIN_SIZE = 75;
+const IPHONE_INIT_SIZE = 75;
 const IPHONE_MAX_SIZE = 100;
 
 const IPHONE_PROTRAIT_MODE = 0; // 세로 모드

src/app/layout/iPhone/ui/IPhoneLayout.scss

@@ -3,7 +3,7 @@
   display: none;
 }
 
-@media (min-width: 1440px) {
+@media (min-width: 1080px) {
   .root-layout {
     width: 100vw;
     height: 100vh;

src/shared/react-query/dir/handleQuery.ts

@@ -1,12 +1,12 @@
 import { Query, QueryKey } from '@tanstack/react-query';
 
-import { removeErrorHandler, showErrorHandler } from './toastHandlers';
+import { removeToastHandler, showToastHandler } from '@/shared/toast';
 
 /**
  * 쿼리 성공 핸들러
  */
 export function handleQuerySuccess() {
-  removeErrorHandler();
+  removeToastHandler();
 }
 
 /**
@@ -20,7 +20,8 @@ export function handleQueryError(
   const { queryKey, state } = query;
 
   // feeds 쿼리에서 2 페이지부터 에러가 발생하면 네트워크 에러 토스트를 띄웁니다.
-  if (queryKey[0] === 'feeds' && state.data) showErrorHandler();
+  if (queryKey[0] === 'feeds' && state.data)
+    showToastHandler('caution', '인터넷 연결이 불안정해요');
 }
 
 /**

src/shared/react-query/dir/index.ts

@@ -1,2 +1 @@
 export * from './handleQuery';
-export * from './toastHandlers';

src/shared/toast/dir/index.ts

@@ -0,0 +1 @@
+export * from './toastHandlers';

src/shared/toast/dir/toastHandlers.tsx

@@ -0,0 +1,33 @@
+import { Bounce, toast } from 'react-toastify';
+
+import { Icon } from '@/shared/ui';
+import { IconName } from '@/shared/ui/icon';
+
+const id = 'react-query-toast';
+
+/**
+ * reference: https://fkhadra.github.io/react-toastify/api/toast
+ * 메시지를 토스트 메시지로 변환합니다.
+ * @param iconName 아이콘 이름
+ * @param message 메시지
+ */
+export function showToastHandler(iconName: IconName, message: string) {
+  if (!toast.isActive(id)) {
+    toast(message, {
+      toastId: id,
+      autoClose: 3000,
+      position: 'bottom-center',
+      transition: Bounce,
+      icon: <Icon name={iconName} width='20' height='20' />,
+    });
+  }
+}
+
+/**
+ * 화면에 표시되어 있는 토스트를 제거합니다.
+ */
+export function removeToastHandler() {
+  if (toast.isActive(id)) {
+    toast.dismiss(id);
+  }
+}

src/shared/toast/index.ts

@@ -0,0 +1,2 @@
+export { Toast } from './ui';
+export * from './dir';

src/shared/ui/network-error-toast/NetworkErrorToast.tsx → src/shared/toast/ui/Toast.tsx

@@ -1,14 +1,12 @@
 import { ToastContainer } from 'react-toastify';
 import 'react-toastify/dist/ReactToastify.css';
 
-import './NetworkErrorToast.scss';
-import { Icon } from '..';
+import './Toast.scss';
 
-export const NetworkErrorToast = () => {
+export const Toast = () => {
   return (
     <ToastContainer
       className='network-error-toast b1semi'
-      icon={<Icon name='caution' width='20' height='20' />}
       limit={1}
       pauseOnHover={false}
       pauseOnFocusLoss={false}

src/shared/toast/ui/index.ts

@@ -0,0 +1 @@
+export { Toast } from './Toast';

src/shared/ui/icon/index.ts

@@ -1 +1,2 @@
 export { Icon } from './ui';
+export type { IconName } from './consts';

src/shared/ui/index.ts

@@ -4,6 +4,4 @@ export { ConfirmModal, BottomSheetModal } from './modal';
 export { Profile, SkeletonProfile } from './profile';
 export { Icon } from './icon';
 export { NetworkError } from './network-error';
-export { NetworkErrorToast } from './network-error-toast';
 export { Observer } from './observer';
-export { Carousel } from './carousel';

src/widgets/feed-carousel/index.ts

@@ -0,0 +1 @@
+export { Carousel } from './ui';

src/widgets/feed-main-list/ui/Feed.tsx

@@ -1,8 +1,9 @@
 import { BookmarkButton } from '@/features/feed-bookmark';
 import { LikeButton } from '@/features/feed-main-like';
 import { Feed as FeedProps } from '@/shared/consts';
-import { Carousel, Icon, Profile } from '@/shared/ui';
+import { Icon, Profile } from '@/shared/ui';
 import { calculateElapsedTime } from '@/shared/utils';
+import { Carousel } from '@/widgets/feed-carousel';
 import { FeedKebabButton } from '@/widgets/feed-kebab';
 
 import './Feed.scss';