From 757ccec05fb70129bf5bbac6acf633735f0e381b Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Thu, 8 Aug 2024 16:36:00 +0900 Subject: [PATCH 01/25] =?UTF-8?q?fix:=20apple=20web=20app=20status=20bar?= =?UTF-8?q?=20style=20=ED=83=9C=EA=B7=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index de4da8ac..e0ea53c4 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -35,6 +35,7 @@ export const metadata: Metadata = { ], appleWebApp: { title: '다독다독', + statusBarStyle: 'black-translucent', startupImage: appleSplashScreens, }, }; From c0ac8d2db609c627de2fe526e24cf814448df38d Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Thu, 8 Aug 2024 16:59:19 +0900 Subject: [PATCH 02/25] =?UTF-8?q?fix:=20statusBarStyle=EC=9D=84=20default?= =?UTF-8?q?=EB=A1=9C=20=EC=88=98=EC=A0=95=20=EB=B0=8F=20capable=EB=A5=BC?= =?UTF-8?q?=20true=EB=A1=9C=20=EB=AA=85=EC=8B=9C?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index e0ea53c4..754b54c7 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -34,8 +34,9 @@ export const metadata: Metadata = { { rel: 'icon', url: '/favicon.ico' }, ], appleWebApp: { + capable: true, title: '다독다독', - statusBarStyle: 'black-translucent', + statusBarStyle: 'default', startupImage: appleSplashScreens, }, }; From 1eaecdf185b7e023ca3469a4cd2cb28090066461 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Fri, 9 Aug 2024 17:17:13 +0900 Subject: [PATCH 03/25] =?UTF-8?q?fix:=20manifest=EC=99=80=20metadata?= =?UTF-8?q?=EC=97=90=EC=84=9C=20theme,=20background=20color=20=EC=A0=9C?= =?UTF-8?q?=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 3 --- src/app/manifest.webmanifest | 2 -- 2 files changed, 5 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 754b54c7..edfa6bfd 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -20,7 +20,6 @@ export const metadata: Metadata = { default: '다독다독', }, description: '책에 대한 인사이트를 공유하고 소통하는 독서 소셜 플랫폼', - themeColor: '#FFFFFF', viewport: 'minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover', verification: { @@ -34,9 +33,7 @@ export const metadata: Metadata = { { rel: 'icon', url: '/favicon.ico' }, ], appleWebApp: { - capable: true, title: '다독다독', - statusBarStyle: 'default', startupImage: appleSplashScreens, }, }; diff --git a/src/app/manifest.webmanifest b/src/app/manifest.webmanifest index 178fedd1..ba5a3a07 100644 --- a/src/app/manifest.webmanifest +++ b/src/app/manifest.webmanifest @@ -2,8 +2,6 @@ "name": "다독다독", "short_name": "다독다독", "description": "책에 대한 인사이트를 공유하고 소통하는 독서 소셜 플랫폼", - "theme_color": "#FFA436", - "background_color": "#FFFFFF", "display": "standalone", "scope": "./", "start_url": "./", From 513809e7b569cdb5f8998038f65a562801fc75dc Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Fri, 9 Aug 2024 18:04:19 +0900 Subject: [PATCH 04/25] =?UTF-8?q?fix:=20capable,=20statusBarStyle=20?= =?UTF-8?q?=EC=86=8D=EC=84=B1=20=EC=B6=94=EA=B0=80=20=EB=B0=8F=20layout=20?= =?UTF-8?q?=EC=83=81=EB=8B=A8=20=ED=8C=A8=EB=94=A9=EC=97=90=20safeArea=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 2 ++ src/components/layout/Layout.tsx | 4 ++-- 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index edfa6bfd..834436aa 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -33,7 +33,9 @@ export const metadata: Metadata = { { rel: 'icon', url: '/favicon.ico' }, ], appleWebApp: { + capable: true, title: '다독다독', + statusBarStyle: 'default', startupImage: appleSplashScreens, }, }; diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index fc279e3b..661867e1 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -15,8 +15,8 @@ const Layout = ({ children }: LayoutProps) => { const isRootPath = pathname && rootPaths.includes(pathname); const dynamicClass = isRootPath - ? 'pb-[calc(env(safe-area-inset-bottom)+7rem)] pt-[2rem]' - : 'pb-[calc(env(safe-area-inset-bottom)+2rem)] pt-[5.4rem]'; + ? 'pb-[calc(env(safe-area-inset-bottom)+7rem)] pt-[calc(env(safe-area-inset-top)+2rem)]' + : 'pb-[calc(env(safe-area-inset-bottom)+2rem)] pt-[calc(env(safe-area-inset-top)+5.4rem)]'; return ( <> From 458eefe4b3baf3d57db22c742674f56cf19bfb9a Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Fri, 9 Aug 2024 18:20:01 +0900 Subject: [PATCH 05/25] =?UTF-8?q?fix:=20statusBarStyle=EC=9D=84=20black-tr?= =?UTF-8?q?anslucent=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.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 834436aa..8372cfce 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -35,7 +35,7 @@ export const metadata: Metadata = { appleWebApp: { capable: true, title: '다독다독', - statusBarStyle: 'default', + statusBarStyle: 'black-translucent', startupImage: appleSplashScreens, }, }; From ff84ff3aee6d5cd3b51110f06dc747d3525d7df7 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Sat, 10 Aug 2024 21:52:14 +0900 Subject: [PATCH 06/25] =?UTF-8?q?fix:=20RootLayout=20=ED=8C=A8=EB=94=A9=20?= =?UTF-8?q?=EA=B0=92=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/layout/Layout.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/layout/Layout.tsx b/src/components/layout/Layout.tsx index 661867e1..211096d2 100644 --- a/src/components/layout/Layout.tsx +++ b/src/components/layout/Layout.tsx @@ -15,7 +15,7 @@ const Layout = ({ children }: LayoutProps) => { const isRootPath = pathname && rootPaths.includes(pathname); const dynamicClass = isRootPath - ? 'pb-[calc(env(safe-area-inset-bottom)+7rem)] pt-[calc(env(safe-area-inset-top)+2rem)]' + ? 'pb-[calc(env(safe-area-inset-bottom)+7rem)] pt-[calc(env(safe-area-inset-top)+7.15rem)]' : 'pb-[calc(env(safe-area-inset-bottom)+2rem)] pt-[calc(env(safe-area-inset-top)+5.4rem)]'; return ( From d52682e2252d0eb6db2f131e2bf051ee3ccaa55d Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Sat, 10 Aug 2024 21:54:06 +0900 Subject: [PATCH 07/25] =?UTF-8?q?feat:=20TopHeader=20safeArea=EA=B0=92=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80=20=EB=B0=8F=20className=20props=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/TopHeader.tsx | 7 +++++-- 1 file changed, 5 insertions(+), 2 deletions(-) diff --git a/src/components/common/TopHeader.tsx b/src/components/common/TopHeader.tsx index 7c2fc553..c471c38f 100644 --- a/src/components/common/TopHeader.tsx +++ b/src/components/common/TopHeader.tsx @@ -2,11 +2,14 @@ import { PropsWithChildren } from 'react'; type TopHeaderProps = PropsWithChildren<{ text: string; + className?: string; }>; -const TopHeader = ({ text, children }: TopHeaderProps) => { +const TopHeader = ({ text, className, children }: TopHeaderProps) => { return ( -
+

{text}

{children}
From 5ecb565018d10d4bed26db1d8eee78f8600786a9 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Sat, 10 Aug 2024 21:54:22 +0900 Subject: [PATCH 08/25] =?UTF-8?q?feat:=20TopNavigation=20safeArea=EA=B0=92?= =?UTF-8?q?=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/TopNavigation.tsx | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/common/TopNavigation.tsx b/src/components/common/TopNavigation.tsx index d5fc3cd7..6d750f71 100644 --- a/src/components/common/TopNavigation.tsx +++ b/src/components/common/TopNavigation.tsx @@ -8,17 +8,17 @@ type ItemProps = TopNavigationProps; const TopNavigation = ({ children }: TopNavigationProps) => { return ( -
+
{children} -
+
); }; const LeftItem = ({ children }: ItemProps) => { return ( -
+
+ ); }; From cbaf14513a8e1868ce7589fe8a2bbdeb3957ea60 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Sat, 10 Aug 2024 21:55:08 +0900 Subject: [PATCH 09/25] =?UTF-8?q?fix:=20TopHeader=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EC=9D=B4=ED=9B=84=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4?= =?UTF-8?q?=EC=85=98=EC=9D=B4=20=EC=A0=95=EC=83=81=EC=9E=91=EB=8F=99=20?= =?UTF-8?q?=ED=95=98=EB=8F=84=EB=A1=9D=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/book/search/page.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/src/app/book/search/page.tsx b/src/app/book/search/page.tsx index e5983ec7..067df738 100644 --- a/src/app/book/search/page.tsx +++ b/src/app/book/search/page.tsx @@ -62,15 +62,14 @@ const BookSearchPage = () => { return ( <> -
- -
+ />
Date: Sat, 10 Aug 2024 21:55:32 +0900 Subject: [PATCH 10/25] =?UTF-8?q?feat:=20manifest=EC=97=90=20themeColor,?= =?UTF-8?q?=20backgroundColor=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/manifest.webmanifest | 2 ++ 1 file changed, 2 insertions(+) diff --git a/src/app/manifest.webmanifest b/src/app/manifest.webmanifest index ba5a3a07..178fedd1 100644 --- a/src/app/manifest.webmanifest +++ b/src/app/manifest.webmanifest @@ -2,6 +2,8 @@ "name": "다독다독", "short_name": "다독다독", "description": "책에 대한 인사이트를 공유하고 소통하는 독서 소셜 플랫폼", + "theme_color": "#FFA436", + "background_color": "#FFFFFF", "display": "standalone", "scope": "./", "start_url": "./", From ed5e06932a48313959cb819df751e47e75f11a40 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Sat, 10 Aug 2024 22:10:30 +0900 Subject: [PATCH 11/25] =?UTF-8?q?fix:=20TopHeader=EC=97=90=20=EB=88=84?= =?UTF-8?q?=EB=9D=BD=EB=90=9C=20safeArea=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/TopHeader.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/common/TopHeader.tsx b/src/components/common/TopHeader.tsx index c471c38f..45e6e598 100644 --- a/src/components/common/TopHeader.tsx +++ b/src/components/common/TopHeader.tsx @@ -8,7 +8,7 @@ type TopHeaderProps = PropsWithChildren<{ const TopHeader = ({ text, className, children }: TopHeaderProps) => { return (

{text}

{children} From f2e48a6f8c9697b5f45b44809b7143ae0e48b89d Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Thu, 15 Aug 2024 18:13:41 +0900 Subject: [PATCH 12/25] =?UTF-8?q?feat:=20useIsScrollAtTop=20=EC=BB=A4?= =?UTF-8?q?=EC=8A=A4=ED=85=80=20=ED=9B=85=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/hooks/useIsScrollAtTop.ts | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) create mode 100644 src/hooks/useIsScrollAtTop.ts diff --git a/src/hooks/useIsScrollAtTop.ts b/src/hooks/useIsScrollAtTop.ts new file mode 100644 index 00000000..bbfc1249 --- /dev/null +++ b/src/hooks/useIsScrollAtTop.ts @@ -0,0 +1,20 @@ +import { useEffect, useState } from 'react'; + +const useIsScrollAtTop = () => { + const [isScrollAtTop, setIsScrollAtTop] = useState(true); + + const listener = () => { + setIsScrollAtTop(window.scrollY === 0); + }; + + useEffect(() => { + window.addEventListener('scroll', listener); + return () => { + window.removeEventListener('scroll', listener); + }; + }, []); + + return { isScrollAtTop }; +}; + +export default useIsScrollAtTop; From 7c4429b16dcb644ba038915cc8ecd83f8c3914e7 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Thu, 15 Aug 2024 18:14:20 +0900 Subject: [PATCH 13/25] =?UTF-8?q?feat:=20TopHeader=EC=97=90=20blur=20?= =?UTF-8?q?=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B0=8F=20props=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/TopHeader.tsx | 20 ++++++++++++++++---- 1 file changed, 16 insertions(+), 4 deletions(-) diff --git a/src/components/common/TopHeader.tsx b/src/components/common/TopHeader.tsx index 45e6e598..0914568c 100644 --- a/src/components/common/TopHeader.tsx +++ b/src/components/common/TopHeader.tsx @@ -2,14 +2,26 @@ import { PropsWithChildren } from 'react'; type TopHeaderProps = PropsWithChildren<{ text: string; + blur?: boolean; className?: string; }>; -const TopHeader = ({ text, className, children }: TopHeaderProps) => { +const DEFAULT_HEADER_CLASSES = + 'fixed left-0 right-0 top-0 z-30 mx-auto flex w-full max-w-[43rem] items-center justify-between border-0 px-[2rem] pb-[1rem] pt-[calc(env(safe-area-inset-top)+2rem)] transition duration-1000'; + +const BLUR_HEADER_CLASSES = + 'border-b-black-100 border-b-[0.01rem] bg-[#FFFFFFBF] backdrop-blur-[1.6rem]'; + +const TopHeader = ({ + text, + blur = false, + className = '', + children, +}: TopHeaderProps) => { + const blurClasses = blur ? BLUR_HEADER_CLASSES : 'bg-white'; + return ( -
+

{text}

{children}
From 797469d7fc43b981e9508868af6a4283e8c2b831 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Thu, 15 Aug 2024 18:14:52 +0900 Subject: [PATCH 14/25] =?UTF-8?q?refactor:=20=EA=B0=81=20=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=A7=80=EC=97=90=20=EB=B3=80=EA=B2=BD=EB=90=9C=20Top?= =?UTF-8?q?Header=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/book/search/page.tsx | 8 ++++---- src/app/bookarchive/page.tsx | 6 +++++- src/app/group/page.tsx | 4 +++- src/app/profile/me/page.tsx | 10 ++++++++-- 4 files changed, 20 insertions(+), 8 deletions(-) diff --git a/src/app/book/search/page.tsx b/src/app/book/search/page.tsx index 067df738..37c5db82 100644 --- a/src/app/book/search/page.tsx +++ b/src/app/book/search/page.tsx @@ -57,8 +57,8 @@ const BookSearchPage = () => { } }, [debouncedKeyword, getQueryParam, setQueryParams, removeQueryParam]); - /* TopHeader가 사라졌을 때 input의 위치 top: 5.8rem */ - const inputPositionClasses = watchedKeyword && 'sticky top-[5.8rem]'; + /* TopHeader가 사라졌을 때 input의 위치 top: 6.15rem */ + const inputPositionClasses = watchedKeyword && 'sticky top-[6.15rem]'; return ( <> @@ -66,13 +66,13 @@ const BookSearchPage = () => { text={'Discover'} className={`transition duration-500 ${ watchedKeyword - ? '-translate-y-[5.8rem] opacity-0' + ? '-translate-y-[6.15rem] opacity-0' : 'translate-y-0 opacity-100' }`} />
- + {/* TODO: 스켈레톤 컴포넌트로 교체 */} diff --git a/src/app/group/page.tsx b/src/app/group/page.tsx index 2df89972..5e314731 100644 --- a/src/app/group/page.tsx +++ b/src/app/group/page.tsx @@ -12,6 +12,7 @@ import { useMyProfileId } from '@/queries/user/useMyProfileQuery'; import useMounted from '@/hooks/useMounted'; import { checkAuthentication } from '@/utils/helpers'; import useToast from '@/components/common/Toast/useToast'; +import useIsScrollAtTop from '@/hooks/useIsScrollAtTop'; import FloatingButton from '@/components/common/FloatingButton'; import Loading from '@/components/common/Loading'; @@ -28,6 +29,7 @@ import CreateGroupBanner from '@/components/bookGroup/banner/CreateGroupBanner'; const GroupPage = () => { const router = useRouter(); const { show: showToast } = useToast(); + const { isScrollAtTop } = useIsScrollAtTop(); const isAuthenticated = checkAuthentication(); @@ -50,7 +52,7 @@ const GroupPage = () => { return ( <> - +
}> diff --git a/src/app/profile/me/page.tsx b/src/app/profile/me/page.tsx index c957a0de..1b58c6cc 100644 --- a/src/app/profile/me/page.tsx +++ b/src/app/profile/me/page.tsx @@ -10,6 +10,8 @@ import userKeys from '@/queries/user/key'; import { deleteAuthSession } from '@/server/session'; import { deleteCookie } from '@/utils/cookie'; import { checkAuthentication } from '@/utils/helpers'; +import useIsScrollAtTop from '@/hooks/useIsScrollAtTop'; + import { SESSION_COOKIES_KEYS } from '@/constants'; import { IconArrowRight } from '@public/icons'; @@ -30,6 +32,7 @@ const USER_ID = 'me'; const MyProfilePage = () => { const isAuthenticated = checkAuthentication(); + return ( }> {isAuthenticated ? : } @@ -38,9 +41,11 @@ const MyProfilePage = () => { }; const MyProfileForUnAuth = () => { + const { isScrollAtTop } = useIsScrollAtTop(); + return ( <> - +
@@ -81,6 +86,7 @@ const MyProfileForUnAuth = () => { const MyProfileForAuth = () => { const queryClient = useQueryClient(); const router = useRouter(); + const { isScrollAtTop } = useIsScrollAtTop(); const handleLogoutButtonClick = async () => { try { @@ -95,7 +101,7 @@ const MyProfileForAuth = () => { return ( <> - + From b1eaf7abf72ae562498c3b3fa15da08f0bd6c60a Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Thu, 15 Aug 2024 18:15:14 +0900 Subject: [PATCH 15/25] =?UTF-8?q?chore:=20metadata=EC=97=90=20themeColor?= =?UTF-8?q?=20=EB=8B=A4=EC=8B=9C=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/layout.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/app/layout.tsx b/src/app/layout.tsx index 8372cfce..c7a2d4a4 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -20,6 +20,7 @@ export const metadata: Metadata = { default: '다독다독', }, description: '책에 대한 인사이트를 공유하고 소통하는 독서 소셜 플랫폼', + themeColor: '#FFFFFF', viewport: 'minimum-scale=1, initial-scale=1, width=device-width, shrink-to-fit=no, viewport-fit=cover', verification: { From 019285b1a9327bd0c0067b351fa0f8ef126dce1c Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Thu, 15 Aug 2024 18:53:19 +0900 Subject: [PATCH 16/25] =?UTF-8?q?fix:=20PWA=ED=99=98=EA=B2=BD=EC=97=90?= =?UTF-8?q?=EC=84=9C=EC=9D=98=20=EB=8F=84=EC=84=9C=EA=B2=80=EC=83=89=20?= =?UTF-8?q?=ED=8E=98=EC=9D=B4=EC=A7=80=20input=20position=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/book/search/page.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/src/app/book/search/page.tsx b/src/app/book/search/page.tsx index 37c5db82..cb5a7f2d 100644 --- a/src/app/book/search/page.tsx +++ b/src/app/book/search/page.tsx @@ -58,7 +58,8 @@ const BookSearchPage = () => { }, [debouncedKeyword, getQueryParam, setQueryParams, removeQueryParam]); /* TopHeader가 사라졌을 때 input의 위치 top: 6.15rem */ - const inputPositionClasses = watchedKeyword && 'sticky top-[6.15rem]'; + const inputPositionClasses = + watchedKeyword && 'sticky top-[calc(env(safe-area-inset-bottom)+6.15rem)]'; return ( <> @@ -66,13 +67,15 @@ const BookSearchPage = () => { text={'Discover'} className={`transition duration-500 ${ watchedKeyword - ? '-translate-y-[6.15rem] opacity-0' + ? '-translate-y-[calc(env(safe-area-inset-bottom)+6.15rem)] opacity-0' : 'translate-y-0 opacity-100' }`} />
Date: Thu, 15 Aug 2024 19:06:47 +0900 Subject: [PATCH 17/25] =?UTF-8?q?fix:=20=EB=8F=84=EC=84=9C=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=ED=8E=98=EC=9D=B4=EC=A7=80=20safeArea=20=EC=88=98?= =?UTF-8?q?=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/book/search/page.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/app/book/search/page.tsx b/src/app/book/search/page.tsx index cb5a7f2d..95a907ad 100644 --- a/src/app/book/search/page.tsx +++ b/src/app/book/search/page.tsx @@ -59,7 +59,7 @@ const BookSearchPage = () => { /* TopHeader가 사라졌을 때 input의 위치 top: 6.15rem */ const inputPositionClasses = - watchedKeyword && 'sticky top-[calc(env(safe-area-inset-bottom)+6.15rem)]'; + watchedKeyword && 'sticky top-[calc(env(safe-area-inset-top)+6.15rem)]'; return ( <> @@ -67,14 +67,14 @@ const BookSearchPage = () => { text={'Discover'} className={`transition duration-500 ${ watchedKeyword - ? '-translate-y-[calc(env(safe-area-inset-bottom)+6.15rem)] opacity-0' + ? '-translate-y-[calc(env(safe-area-inset-top)+6.15rem)] opacity-0' : 'translate-y-0 opacity-100' }`} />
From ace6a8ff2a4b155afd14d7dade09919a129e1ab0 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Thu, 15 Aug 2024 19:14:26 +0900 Subject: [PATCH 18/25] =?UTF-8?q?fix:=20=EB=8F=84=EC=84=9C=20=EA=B2=80?= =?UTF-8?q?=EC=83=89=20=ED=8E=98=EC=9D=B4=EC=A7=80=20translate=EA=B0=92=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/book/search/page.tsx | 6 ++---- 1 file changed, 2 insertions(+), 4 deletions(-) diff --git a/src/app/book/search/page.tsx b/src/app/book/search/page.tsx index 95a907ad..b60f4a90 100644 --- a/src/app/book/search/page.tsx +++ b/src/app/book/search/page.tsx @@ -67,15 +67,13 @@ const BookSearchPage = () => { text={'Discover'} className={`transition duration-500 ${ watchedKeyword - ? '-translate-y-[calc(env(safe-area-inset-top)+6.15rem)] opacity-0' + ? '-translate-y-[6.15rem] opacity-0' : 'translate-y-0 opacity-100' }`} />
Date: Thu, 15 Aug 2024 23:11:32 +0900 Subject: [PATCH 19/25] =?UTF-8?q?refactor:=20TopHeader=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=EC=9D=98=20text=20props=EC=9D=98?= =?UTF-8?q?=EC=A1=B4=EC=84=B1=EC=9D=84=20=EC=A0=9C=EA=B1=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/common/TopHeader.tsx | 5 +--- src/stories/common/TopHeader.stories.tsx | 34 +++++++++++++++--------- 2 files changed, 22 insertions(+), 17 deletions(-) diff --git a/src/components/common/TopHeader.tsx b/src/components/common/TopHeader.tsx index 0914568c..d29936be 100644 --- a/src/components/common/TopHeader.tsx +++ b/src/components/common/TopHeader.tsx @@ -1,19 +1,17 @@ import { PropsWithChildren } from 'react'; type TopHeaderProps = PropsWithChildren<{ - text: string; blur?: boolean; className?: string; }>; const DEFAULT_HEADER_CLASSES = - 'fixed left-0 right-0 top-0 z-30 mx-auto flex w-full max-w-[43rem] items-center justify-between border-0 px-[2rem] pb-[1rem] pt-[calc(env(safe-area-inset-top)+2rem)] transition duration-1000'; + 'fixed left-0 right-0 top-0 z-30 mx-auto w-full max-w-[43rem] border-0 px-[2rem] pb-[1rem] pt-[calc(env(safe-area-inset-top)+2rem)] transition duration-1000'; const BLUR_HEADER_CLASSES = 'border-b-black-100 border-b-[0.01rem] bg-[#FFFFFFBF] backdrop-blur-[1.6rem]'; const TopHeader = ({ - text, blur = false, className = '', children, @@ -22,7 +20,6 @@ const TopHeader = ({ return (
-

{text}

{children}
); diff --git a/src/stories/common/TopHeader.stories.tsx b/src/stories/common/TopHeader.stories.tsx index fdc2d0f3..a16c14ae 100644 --- a/src/stories/common/TopHeader.stories.tsx +++ b/src/stories/common/TopHeader.stories.tsx @@ -13,21 +13,29 @@ export default meta; type Story = StoryObj; export const Default: Story = { - args: { text: 'BookArchive' }, - render: args => , + render: () => ( + +

BookArchive

+ + ), }; -export const WithMenu: Story = { - args: { text: 'Profile' }, +export const WithChildren: Story = { + args: { + className: 'flex items-center justify-between', + }, render: args => ( - - - +
+ +

Profile

+ + +
), }; From 20c766c32cf79b89d8a2f41f462bbc27e85ca31f Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Thu, 15 Aug 2024 23:11:52 +0900 Subject: [PATCH 20/25] =?UTF-8?q?fix:=20=EA=B0=81=20=ED=8E=98=EC=9D=B4?= =?UTF-8?q?=EC=A7=80=EC=9D=98=20=EB=A6=AC=ED=8C=A9=ED=86=A0=EB=A7=81=20?= =?UTF-8?q?=EB=90=9C=20TopHeader=20=EC=A0=81=EC=9A=A9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/book/search/page.tsx | 29 +++++++++++++++++------------ src/app/bookarchive/page.tsx | 4 +++- src/app/profile/me/page.tsx | 10 ++++++++-- 3 files changed, 28 insertions(+), 15 deletions(-) diff --git a/src/app/book/search/page.tsx b/src/app/book/search/page.tsx index b60f4a90..8702cccd 100644 --- a/src/app/book/search/page.tsx +++ b/src/app/book/search/page.tsx @@ -57,24 +57,29 @@ const BookSearchPage = () => { } }, [debouncedKeyword, getQueryParam, setQueryParams, removeQueryParam]); - /* TopHeader가 사라졌을 때 input의 위치 top: 6.15rem */ + /* TopHeader가 사라졌을 때 input의 위치 top: topSafeArea + 6.15rem */ const inputPositionClasses = watchedKeyword && 'sticky top-[calc(env(safe-area-inset-top)+6.15rem)]'; + /* 검색어가 입력되었을 때 각 컨테이너의 애니메이션 class */ + const discoverPageAnimationClasses = `transition duration-500 ${ + watchedKeyword ? '-translate-y-[6.15rem]' : 'translate-y-0' + }`; + const headingOpacityClasses = `${ + watchedKeyword ? 'opacity-0' : 'opacity-100' + }`; + return ( <> - + +

+ Discover +

+
- + +

BookArchive

+ {/* TODO: 스켈레톤 컴포넌트로 교체 */} diff --git a/src/app/profile/me/page.tsx b/src/app/profile/me/page.tsx index 1b58c6cc..df142c93 100644 --- a/src/app/profile/me/page.tsx +++ b/src/app/profile/me/page.tsx @@ -45,7 +45,9 @@ const MyProfileForUnAuth = () => { return ( <> - + +

Profile

+
@@ -101,7 +103,11 @@ const MyProfileForAuth = () => { return ( <> - + +

Profile

From a6d6bbb2dd2bc124bd9af743d024207944b2bdcf Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Thu, 15 Aug 2024 23:12:28 +0900 Subject: [PATCH 21/25] =?UTF-8?q?fix:=20PWA=ED=99=98=EA=B2=BD=EC=97=90?= =?UTF-8?q?=EC=84=9C=20=EC=83=81=EB=8B=A8=20=EB=85=B8=EC=B9=98=EB=B6=80?= =?UTF-8?q?=EB=B6=84=EC=97=90=20=EC=BB=A8=ED=83=A0=EC=B8=A0=EA=B0=80=20?= =?UTF-8?q?=EB=85=B8=EC=B6=9C=EB=90=98=EB=8D=98=20=ED=98=84=EC=83=81=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/group/page.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/group/page.tsx b/src/app/group/page.tsx index 5e314731..ad90a3ef 100644 --- a/src/app/group/page.tsx +++ b/src/app/group/page.tsx @@ -52,7 +52,9 @@ const GroupPage = () => { return ( <> - + +

Group

+
}> From a4a97cb4081ed791ee62b65aa0933b3b44cd46e5 Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Thu, 15 Aug 2024 23:30:47 +0900 Subject: [PATCH 22/25] =?UTF-8?q?fix:=20body=20=EC=8A=A4=ED=81=AC=EB=A1=A4?= =?UTF-8?q?=20=EC=8B=9C=20=EC=BB=A8=ED=83=A0=EC=B8=A0=EA=B0=80=20=EC=A2=81?= =?UTF-8?q?=EC=9D=80=20=ED=8B=88=EC=83=88=EB=A1=9C=20=EB=B3=B4=EC=9D=B4?= =?UTF-8?q?=EB=8A=94=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/book/search/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/book/search/page.tsx b/src/app/book/search/page.tsx index 8702cccd..a581f955 100644 --- a/src/app/book/search/page.tsx +++ b/src/app/book/search/page.tsx @@ -63,7 +63,7 @@ const BookSearchPage = () => { /* 검색어가 입력되었을 때 각 컨테이너의 애니메이션 class */ const discoverPageAnimationClasses = `transition duration-500 ${ - watchedKeyword ? '-translate-y-[6.15rem]' : 'translate-y-0' + watchedKeyword ? '-translate-y-[6.05rem]' : 'translate-y-0' }`; const headingOpacityClasses = `${ watchedKeyword ? 'opacity-0' : 'opacity-100' From 27e113b2c9ece50029eec661c7f7253bc86e3a4c Mon Sep 17 00:00:00 2001 From: hanyugeon Date: Thu, 15 Aug 2024 23:31:49 +0900 Subject: [PATCH 23/25] =?UTF-8?q?fix:=20PWA=ED=99=98=EA=B2=BD=EC=97=90?= =?UTF-8?q?=EC=84=9C=20Login=20=ED=8E=98=EC=9D=B4=EC=A7=80=EC=9D=98=20?= =?UTF-8?q?=EB=A1=9C=EA=B7=B8=EC=9D=B8=20=EC=84=B9=EC=85=98=EC=9D=B4=20?= =?UTF-8?q?=EB=B9=84=EC=A0=95=EC=83=81=EC=A0=81=EC=9D=B8=20=EC=9C=84?= =?UTF-8?q?=EC=B9=98=EC=97=90=20=EC=9E=88=EB=8D=98=20=EB=B2=84=EA=B7=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/app/login/page.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/app/login/page.tsx b/src/app/login/page.tsx index 8505f00a..fa91eb47 100644 --- a/src/app/login/page.tsx +++ b/src/app/login/page.tsx @@ -27,7 +27,7 @@ const LoginPage = () => {

-
+