From b6fcceb268a48583c6b3f8449804f5d07c9509ed Mon Sep 17 00:00:00 2001 From: BangDori Date: Thu, 16 May 2024 12:09:26 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20Toast=20=ED=8F=B4=EB=8D=94=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/App.tsx | 4 ++-- src/shared/toast/index.ts | 1 + .../NetworkErrorToast.scss => toast/ui/Toast.scss} | 0 .../NetworkErrorToast.tsx => toast/ui/Toast.tsx} | 7 ++++--- src/shared/toast/ui/index.ts | 1 + src/shared/ui/index.ts | 1 - src/shared/ui/network-error-toast/index.ts | 1 - 7 files changed, 8 insertions(+), 7 deletions(-) create mode 100644 src/shared/toast/index.ts rename src/shared/{ui/network-error-toast/NetworkErrorToast.scss => toast/ui/Toast.scss} (100%) rename src/shared/{ui/network-error-toast/NetworkErrorToast.tsx => toast/ui/Toast.tsx} (77%) create mode 100644 src/shared/toast/ui/index.ts delete mode 100644 src/shared/ui/network-error-toast/index.ts 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/shared/toast/index.ts b/src/shared/toast/index.ts new file mode 100644 index 0000000..9e6a53b --- /dev/null +++ b/src/shared/toast/index.ts @@ -0,0 +1 @@ +export { Toast } from './ui'; 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 77% rename from src/shared/ui/network-error-toast/NetworkErrorToast.tsx rename to src/shared/toast/ui/Toast.tsx index d902788..23cf1b8 100644 --- a/src/shared/ui/network-error-toast/NetworkErrorToast.tsx +++ b/src/shared/toast/ui/Toast.tsx @@ -1,10 +1,11 @@ import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; -import './NetworkErrorToast.scss'; -import { Icon } from '..'; +import { Icon } from '@/shared/ui'; -export const NetworkErrorToast = () => { +import './Toast.scss'; + +export const Toast = () => { return ( Date: Thu, 16 May 2024 12:12:06 +0900 Subject: [PATCH 2/8] =?UTF-8?q?feat:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=ED=95=B8=EB=93=A4=EB=9F=AC=20=ED=95=A8=EC=88=98=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/mocks/handler/feed.ts | 6 ++++-- src/shared/react-query/dir/handleQuery.ts | 6 +++--- src/shared/react-query/dir/index.ts | 1 - src/shared/toast/dir/index.ts | 1 + src/shared/{react-query => toast}/dir/toastHandlers.ts | 4 ++-- src/shared/toast/index.ts | 1 + 6 files changed, 11 insertions(+), 8 deletions(-) create mode 100644 src/shared/toast/dir/index.ts rename src/shared/{react-query => toast}/dir/toastHandlers.ts (87%) diff --git a/src/app/mocks/handler/feed.ts b/src/app/mocks/handler/feed.ts index ae0e24d..9160693 100644 --- a/src/app/mocks/handler/feed.ts +++ b/src/app/mocks/handler/feed.ts @@ -1,4 +1,4 @@ -import { http } from 'msw'; +import { delay, http } from 'msw'; import { feeds } from '../consts/feed'; import { reports } from '../consts/report'; @@ -25,7 +25,7 @@ interface ReportForm { export const feedHandlers = [ // 1️⃣ 피드 목록 조회 - http.get('/feeds', ({ request }) => { + http.get('/feeds', async ({ request }) => { const url = new URL(request.url); const page = url.searchParams.get('page') || 1; const count = url.searchParams.get('count') || 10; @@ -45,6 +45,8 @@ export const feedHandlers = [ const endOfPageRange = formattedPage * pageCount; const hasNextPage = endOfPageRange < totalFeeds; + await delay(Math.random() * 4000); + return createHttpSuccessResponse({ feeds: feedsData, currentPageNumber: pageCount, diff --git a/src/shared/react-query/dir/handleQuery.ts b/src/shared/react-query/dir/handleQuery.ts index 505b0f4..75dfdb6 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,7 @@ export function handleQueryError( const { queryKey, state } = query; // feeds 쿼리에서 2 페이지부터 에러가 발생하면 네트워크 에러 토스트를 띄웁니다. - if (queryKey[0] === 'feeds' && state.data) showErrorHandler(); + if (queryKey[0] === 'feeds' && state.data) showToastHandler(); } /** 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/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/react-query/dir/toastHandlers.ts b/src/shared/toast/dir/toastHandlers.ts similarity index 87% rename from src/shared/react-query/dir/toastHandlers.ts rename to src/shared/toast/dir/toastHandlers.ts index a682bf7..0883642 100644 --- a/src/shared/react-query/dir/toastHandlers.ts +++ b/src/shared/toast/dir/toastHandlers.ts @@ -5,7 +5,7 @@ const id = 'react-query-toast'; /** * 에러 메시지를 토스트 메시지로 변환합니다. */ -export function showErrorHandler() { +export function showToastHandler() { // reference: https://fkhadra.github.io/react-toastify/api/toast if (!toast.isActive(id)) { toast('인터넷 연결이 불안정해요', { @@ -20,7 +20,7 @@ export function showErrorHandler() { /** * 에러 메시지 토스트를 제거합니다. */ -export function removeErrorHandler() { +export function removeToastHandler() { if (toast.isActive(id)) { toast.dismiss(id); } diff --git a/src/shared/toast/index.ts b/src/shared/toast/index.ts index 9e6a53b..693ea46 100644 --- a/src/shared/toast/index.ts +++ b/src/shared/toast/index.ts @@ -1 +1,2 @@ export { Toast } from './ui'; +export * from './dir'; From 3b877722bacae54756d147d5c6478cbb111c5c3f Mon Sep 17 00:00:00 2001 From: BangDori Date: Thu, 16 May 2024 12:13:21 +0900 Subject: [PATCH 3/8] =?UTF-8?q?feat:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EB=A9=94=EC=8B=9C=EC=A7=80=20=EB=A7=A4=EA=B0=9C=EB=B3=80?= =?UTF-8?q?=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/react-query/dir/handleQuery.ts | 3 ++- src/shared/toast/dir/toastHandlers.ts | 9 +++++---- 2 files changed, 7 insertions(+), 5 deletions(-) diff --git a/src/shared/react-query/dir/handleQuery.ts b/src/shared/react-query/dir/handleQuery.ts index 75dfdb6..5785688 100644 --- a/src/shared/react-query/dir/handleQuery.ts +++ b/src/shared/react-query/dir/handleQuery.ts @@ -20,7 +20,8 @@ export function handleQueryError( const { queryKey, state } = query; // feeds 쿼리에서 2 페이지부터 에러가 발생하면 네트워크 에러 토스트를 띄웁니다. - if (queryKey[0] === 'feeds' && state.data) showToastHandler(); + if (queryKey[0] === 'feeds' && state.data) + showToastHandler('인터넷 연결이 불안정해요'); } /** diff --git a/src/shared/toast/dir/toastHandlers.ts b/src/shared/toast/dir/toastHandlers.ts index 0883642..f51b0a3 100644 --- a/src/shared/toast/dir/toastHandlers.ts +++ b/src/shared/toast/dir/toastHandlers.ts @@ -3,12 +3,13 @@ import { Bounce, toast } from 'react-toastify'; const id = 'react-query-toast'; /** - * 에러 메시지를 토스트 메시지로 변환합니다. + * 메시지를 토스트 메시지로 변환합니다. + * @param message 메시지 */ -export function showToastHandler() { +export function showToastHandler(message: string) { // reference: https://fkhadra.github.io/react-toastify/api/toast if (!toast.isActive(id)) { - toast('인터넷 연결이 불안정해요', { + toast(message, { toastId: id, autoClose: 3000, position: 'bottom-center', @@ -18,7 +19,7 @@ export function showToastHandler() { } /** - * 에러 메시지 토스트를 제거합니다. + * 화면에 표시되어 있는 토스트를 제거합니다. */ export function removeToastHandler() { if (toast.isActive(id)) { From a01fe3abe5edbee5f81f8636a873aee37e986b8d Mon Sep 17 00:00:00 2001 From: BangDori Date: Thu, 16 May 2024 12:25:16 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20=ED=86=A0=EC=8A=A4=ED=8A=B8=20?= =?UTF-8?q?=EC=95=84=EC=9D=B4=EC=BD=98=20=EB=A7=A4=EA=B0=9C=EB=B3=80?= =?UTF-8?q?=EC=88=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/react-query/dir/handleQuery.ts | 2 +- .../toast/dir/{toastHandlers.ts => toastHandlers.tsx} | 9 +++++++-- src/shared/toast/ui/Toast.tsx | 3 --- src/shared/ui/icon/index.ts | 1 + 4 files changed, 9 insertions(+), 6 deletions(-) rename src/shared/toast/dir/{toastHandlers.ts => toastHandlers.tsx} (61%) diff --git a/src/shared/react-query/dir/handleQuery.ts b/src/shared/react-query/dir/handleQuery.ts index 5785688..8ec0036 100644 --- a/src/shared/react-query/dir/handleQuery.ts +++ b/src/shared/react-query/dir/handleQuery.ts @@ -21,7 +21,7 @@ export function handleQueryError( // feeds 쿼리에서 2 페이지부터 에러가 발생하면 네트워크 에러 토스트를 띄웁니다. if (queryKey[0] === 'feeds' && state.data) - showToastHandler('인터넷 연결이 불안정해요'); + showToastHandler('caution', '인터넷 연결이 불안정해요'); } /** diff --git a/src/shared/toast/dir/toastHandlers.ts b/src/shared/toast/dir/toastHandlers.tsx similarity index 61% rename from src/shared/toast/dir/toastHandlers.ts rename to src/shared/toast/dir/toastHandlers.tsx index f51b0a3..035106f 100644 --- a/src/shared/toast/dir/toastHandlers.ts +++ b/src/shared/toast/dir/toastHandlers.tsx @@ -1,19 +1,24 @@ 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(message: string) { - // reference: https://fkhadra.github.io/react-toastify/api/toast +export function showToastHandler(iconName: IconName, message: string) { if (!toast.isActive(id)) { toast(message, { toastId: id, autoClose: 3000, position: 'bottom-center', transition: Bounce, + icon: , }); } } diff --git a/src/shared/toast/ui/Toast.tsx b/src/shared/toast/ui/Toast.tsx index 23cf1b8..88d64f8 100644 --- a/src/shared/toast/ui/Toast.tsx +++ b/src/shared/toast/ui/Toast.tsx @@ -1,15 +1,12 @@ import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; -import { Icon } from '@/shared/ui'; - import './Toast.scss'; export const Toast = () => { return ( } limit={1} pauseOnHover={false} pauseOnFocusLoss={false} 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'; From 6c5c87c85de444392e6898263b907c0a664835e2 Mon Sep 17 00:00:00 2001 From: BangDori Date: Thu, 16 May 2024 12:28:13 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20Carousel=20widgets=20=ED=8F=B4?= =?UTF-8?q?=EB=8D=94=EB=A1=9C=20=EC=9D=B4=EB=8F=99?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/shared/ui/index.ts | 1 - src/widgets/feed-carousel/index.ts | 1 + .../ui/carousel => widgets/feed-carousel/ui}/Carousel.scss | 0 .../ui/carousel => widgets/feed-carousel/ui}/Carousel.tsx | 0 src/{shared/ui/carousel => widgets/feed-carousel/ui}/index.ts | 0 src/widgets/feed-main-list/ui/Feed.tsx | 3 ++- 6 files changed, 3 insertions(+), 2 deletions(-) create mode 100644 src/widgets/feed-carousel/index.ts rename src/{shared/ui/carousel => widgets/feed-carousel/ui}/Carousel.scss (100%) rename src/{shared/ui/carousel => widgets/feed-carousel/ui}/Carousel.tsx (100%) rename src/{shared/ui/carousel => widgets/feed-carousel/ui}/index.ts (100%) diff --git a/src/shared/ui/index.ts b/src/shared/ui/index.ts index e16f75e..5dc3af5 100644 --- a/src/shared/ui/index.ts +++ b/src/shared/ui/index.ts @@ -5,4 +5,3 @@ export { Profile, SkeletonProfile } from './profile'; export { Icon } from './icon'; export { NetworkError } from './network-error'; export { Observer } from './observer'; -export { Carousel } from './carousel'; 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'; From f99c23fa1742110eb36863728e5dfa413dfebc7f Mon Sep 17 00:00:00 2001 From: BangDori Date: Thu, 16 May 2024 12:28:47 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20=ED=94=BC=EB=93=9C=20=EB=AA=A9?= =?UTF-8?q?=EB=A1=9D=20=EC=A1=B0=ED=9A=8C=20delay=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/mocks/handler/feed.ts | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/app/mocks/handler/feed.ts b/src/app/mocks/handler/feed.ts index 9160693..ae0e24d 100644 --- a/src/app/mocks/handler/feed.ts +++ b/src/app/mocks/handler/feed.ts @@ -1,4 +1,4 @@ -import { delay, http } from 'msw'; +import { http } from 'msw'; import { feeds } from '../consts/feed'; import { reports } from '../consts/report'; @@ -25,7 +25,7 @@ interface ReportForm { export const feedHandlers = [ // 1️⃣ 피드 목록 조회 - http.get('/feeds', async ({ request }) => { + http.get('/feeds', ({ request }) => { const url = new URL(request.url); const page = url.searchParams.get('page') || 1; const count = url.searchParams.get('count') || 10; @@ -45,8 +45,6 @@ export const feedHandlers = [ const endOfPageRange = formattedPage * pageCount; const hasNextPage = endOfPageRange < totalFeeds; - await delay(Math.random() * 4000); - return createHttpSuccessResponse({ feeds: feedsData, currentPageNumber: pageCount, From c58abb136ea4550bf4332ee369216f5f8b41a0b4 Mon Sep 17 00:00:00 2001 From: BangDori Date: Thu, 16 May 2024 12:35:36 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=EC=95=84=EC=9D=B4=ED=8F=B0=20?= =?UTF-8?q?=EC=B5=9C=EC=86=8C=20=EB=B0=8F=20=EC=B4=88=EA=B8=B0=20=EC=82=AC?= =?UTF-8?q?=EC=9D=B4=EC=A6=88=2075%=EB=A1=9C=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout/iPhone/hooks/useUtilityIPhone.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) 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; // 세로 모드 From 1afb1736fa25fc233097a426d7ecd6ad4d002a40 Mon Sep 17 00:00:00 2001 From: BangDori Date: Thu, 16 May 2024 12:36:12 +0900 Subject: [PATCH 8/8] =?UTF-8?q?feat:=20=EC=95=84=EC=9D=B4=ED=8F=B0=20?= =?UTF-8?q?=EB=A0=88=EC=9D=B4=EC=95=84=EC=9B=83=20=EB=AF=B8=EB=94=94?= =?UTF-8?q?=EC=96=B4=EC=BF=BC=EB=A6=AC=20=EC=B5=9C=EC=86=8C=20=EB=84=88?= =?UTF-8?q?=EB=B9=84=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout/iPhone/ui/IPhoneLayout.scss | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) 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;