로그인 필요한 페이지에서 로그인 안내 문구

packages/velog-web/src/app/notifications/page.tsx

@@ -1,14 +1,14 @@
+import RequireLogin from '@/components/RequireLogin'
 import NotificationList from '@/features/notification/components/NotificationList'
 import NotificationSelector from '@/features/notification/components/NotificationSelector'
 import NotificationTitle from '@/features/notification/components/NotificationTitle'
 import getCurrentUser from '@/prefetch/getCurrentUser'
-import { notFound } from 'next/navigation'
 
 export default async function NotificationPage() {
   const user = await getCurrentUser()
 
   if (!user) {
-    notFound()
+    return <RequireLogin />
   }
 
   return (

packages/velog-web/src/app/setting/page.tsx

@@ -1,3 +1,4 @@
+import RequireLogin from '@/components/RequireLogin'
 import SettingEmailRow from '@/features/setting/components/SettingEmailRow'
 import SettingEmailRulesRow from '@/features/setting/components/SettingEmailRulesRow'
 import SettingSocialInfoRow from '@/features/setting/components/SettingSocialInfoRow'
@@ -13,7 +14,7 @@ export default async function SettingPage() {
   const user = await getCurrentUser()
 
   if (!user) {
-    notFound()
+    return <RequireLogin />
   }
 
   const velogConfig = await getVelogConfig({ username: user.username })

packages/velog-web/src/components/Error/ErrorScreenTemplate/ErrorScreenTemplate.module.css

@@ -2,7 +2,6 @@
   display: flex;
   width: 100%;
   height: 100%;
-  min-height: 100svh;
   align-items: center;
   justify-content: center;
   flex-direction: column;

packages/velog-web/src/components/RequireLogin/RequireLogin.module.css

@@ -0,0 +1,3 @@
+.block {
+  height: 70svh;
+}

packages/velog-web/src/components/RequireLogin/RequireLogin.test.tsx

@@ -0,0 +1,8 @@
+import RequireLogin from './RequireLogin'
+import { render } from '@testing-library/react'
+
+describe('RequireLogin', () => {
+  it('renders successfully', () => {
+    render(<RequireLogin />)
+  })
+})

packages/velog-web/src/components/RequireLogin/RequireLogin.tsx

@@ -0,0 +1,50 @@
+'use client'
+
+import styles from './RequireLogin.module.css'
+import { bindClassNames } from '@/lib/styles/bindClassNames'
+import ErrorScreenTemplate from '@/components/Error/ErrorScreenTemplate'
+import { UndrawLogin } from '@/assets/vectors/components'
+import { useModal } from '@/state/modal'
+import { useEffect } from 'react'
+import { useAuth } from '@/state/auth'
+import { usePathname, useRouter } from 'next/navigation'
+
+const cx = bindClassNames(styles)
+
+type Props = {
+  redirectTo?: string
+}
+
+function RequireLogin({ redirectTo }: Props) {
+  const pathname = usePathname()
+  const router = useRouter()
+  const { actions } = useModal()
+
+  const redirectToPath = redirectTo || pathname
+
+  const {
+    value: { currentUser },
+  } = useAuth()
+
+  const onButtonClick = () => {
+    actions.showModal('login', redirectToPath)
+  }
+
+  useEffect(() => {
+    if (!currentUser) return
+    router.push(redirectToPath)
+  }, [router, currentUser, redirectToPath])
+
+  return (
+    <div className={cx('block')}>
+      <ErrorScreenTemplate
+        Illustration={UndrawLogin}
+        message="로그인 후 이용해주세요."
+        onButtonClick={onButtonClick}
+        buttonText="로그인"
+      />
+    </div>
+  )
+}
+
+export default RequireLogin

packages/velog-web/src/components/RequireLogin/index.tsx

@@ -0,0 +1 @@
+export { default } from './RequireLogin'