diff --git a/src/app/App.tsx b/src/app/App.tsx index cad867e..fc60bd4 100644 --- a/src/app/App.tsx +++ b/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() { - + ); diff --git a/src/app/layout/iPhone/hooks/useUtilityIPhone.tsx b/src/app/layout/iPhone/hooks/useUtilityIPhone.tsx index 8e56c0c..67b00d3 100644 --- a/src/app/layout/iPhone/hooks/useUtilityIPhone.tsx +++ b/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; // 세로 모드 diff --git a/src/app/layout/iPhone/ui/IPhoneLayout.scss b/src/app/layout/iPhone/ui/IPhoneLayout.scss index 5ab09c4..0fa8431 100644 --- a/src/app/layout/iPhone/ui/IPhoneLayout.scss +++ b/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; diff --git a/src/shared/react-query/dir/handleQuery.ts b/src/shared/react-query/dir/handleQuery.ts index 505b0f4..8ec0036 100644 --- a/src/shared/react-query/dir/handleQuery.ts +++ b/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', '인터넷 연결이 불안정해요'); } /** diff --git a/src/shared/react-query/dir/index.ts b/src/shared/react-query/dir/index.ts index e591523..2bc5436 100644 --- a/src/shared/react-query/dir/index.ts +++ b/src/shared/react-query/dir/index.ts @@ -1,2 +1 @@ export * from './handleQuery'; -export * from './toastHandlers'; diff --git a/src/shared/react-query/dir/toastHandlers.ts b/src/shared/react-query/dir/toastHandlers.ts deleted file mode 100644 index a682bf7..0000000 --- a/src/shared/react-query/dir/toastHandlers.ts +++ /dev/null @@ -1,27 +0,0 @@ -import { Bounce, toast } from 'react-toastify'; - -const id = 'react-query-toast'; - -/** - * 에러 메시지를 토스트 메시지로 변환합니다. - */ -export function showErrorHandler() { - // reference: https://fkhadra.github.io/react-toastify/api/toast - if (!toast.isActive(id)) { - toast('인터넷 연결이 불안정해요', { - toastId: id, - autoClose: 3000, - position: 'bottom-center', - transition: Bounce, - }); - } -} - -/** - * 에러 메시지 토스트를 제거합니다. - */ -export function removeErrorHandler() { - if (toast.isActive(id)) { - toast.dismiss(id); - } -} diff --git a/src/shared/toast/dir/index.ts b/src/shared/toast/dir/index.ts new file mode 100644 index 0000000..bfbd92e --- /dev/null +++ b/src/shared/toast/dir/index.ts @@ -0,0 +1 @@ +export * from './toastHandlers'; diff --git a/src/shared/toast/dir/toastHandlers.tsx b/src/shared/toast/dir/toastHandlers.tsx new file mode 100644 index 0000000..035106f --- /dev/null +++ b/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: , + }); + } +} + +/** + * 화면에 표시되어 있는 토스트를 제거합니다. + */ +export function removeToastHandler() { + if (toast.isActive(id)) { + toast.dismiss(id); + } +} diff --git a/src/shared/toast/index.ts b/src/shared/toast/index.ts new file mode 100644 index 0000000..693ea46 --- /dev/null +++ b/src/shared/toast/index.ts @@ -0,0 +1,2 @@ +export { Toast } from './ui'; +export * from './dir'; diff --git a/src/shared/ui/network-error-toast/NetworkErrorToast.scss b/src/shared/toast/ui/Toast.scss similarity index 100% rename from src/shared/ui/network-error-toast/NetworkErrorToast.scss rename to src/shared/toast/ui/Toast.scss diff --git a/src/shared/ui/network-error-toast/NetworkErrorToast.tsx b/src/shared/toast/ui/Toast.tsx similarity index 63% rename from src/shared/ui/network-error-toast/NetworkErrorToast.tsx rename to src/shared/toast/ui/Toast.tsx index d902788..88d64f8 100644 --- a/src/shared/ui/network-error-toast/NetworkErrorToast.tsx +++ b/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 ( } limit={1} pauseOnHover={false} pauseOnFocusLoss={false} diff --git a/src/shared/toast/ui/index.ts b/src/shared/toast/ui/index.ts new file mode 100644 index 0000000..03e94bf --- /dev/null +++ b/src/shared/toast/ui/index.ts @@ -0,0 +1 @@ +export { Toast } from './Toast'; diff --git a/src/shared/ui/icon/index.ts b/src/shared/ui/icon/index.ts index bb0d107..773d0b5 100644 --- a/src/shared/ui/icon/index.ts +++ b/src/shared/ui/icon/index.ts @@ -1 +1,2 @@ export { Icon } from './ui'; +export type { IconName } from './consts'; diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts index 860fcf2..03beb18 100644 --- a/src/shared/ui/index.ts +++ b/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'; diff --git a/src/shared/ui/network-error-toast/index.ts b/src/shared/ui/network-error-toast/index.ts deleted file mode 100644 index c581b1b..0000000 --- a/src/shared/ui/network-error-toast/index.ts +++ /dev/null @@ -1 +0,0 @@ -export { NetworkErrorToast } from './NetworkErrorToast'; diff --git a/src/widgets/feed-carousel/index.ts b/src/widgets/feed-carousel/index.ts new file mode 100644 index 0000000..e403d84 --- /dev/null +++ b/src/widgets/feed-carousel/index.ts @@ -0,0 +1 @@ +export { Carousel } from './ui'; diff --git a/src/shared/ui/carousel/Carousel.scss b/src/widgets/feed-carousel/ui/Carousel.scss similarity index 100% rename from src/shared/ui/carousel/Carousel.scss rename to src/widgets/feed-carousel/ui/Carousel.scss diff --git a/src/shared/ui/carousel/Carousel.tsx b/src/widgets/feed-carousel/ui/Carousel.tsx similarity index 100% rename from src/shared/ui/carousel/Carousel.tsx rename to src/widgets/feed-carousel/ui/Carousel.tsx diff --git a/src/shared/ui/carousel/index.ts b/src/widgets/feed-carousel/ui/index.ts similarity index 100% rename from src/shared/ui/carousel/index.ts rename to src/widgets/feed-carousel/ui/index.ts diff --git a/src/widgets/feed-main-list/ui/Feed.tsx b/src/widgets/feed-main-list/ui/Feed.tsx index 06ee298..93faa00 100644 --- a/src/widgets/feed-main-list/ui/Feed.tsx +++ b/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';