Merge pull request #32 from velog-io/development

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

Author: winverse

packages/velog-server/src/graphql/resolvers/userResolvers.ts

@@ -79,7 +79,6 @@ const userResolvers: Resolvers = {
     checkEmailExists: async (_, { input }) => {
       const userService = container.resolve(UserService)
       const user = await userService.findByEmail(input.email)
-      console.log('user', user)
       return !!user
     },
   },

packages/velog-server/src/services/UserService/index.ts

@@ -242,13 +242,13 @@ export class UserService implements Service {
     try {
       if (ENV.dockerEnv === 'development') {
         console.log(`Login URL: ${ENV.clientV3Host}/email-change?code=${code}`)
+      } else {
+        await this.mail.sendMail({
+          to: email,
+          from: '[email protected]',
+          ...template,
+        })
       }
-
-      await this.mail.sendMail({
-        to: email,
-        from: '[email protected]',
-        ...template,
-      })
     } catch (error) {
       console.error('change email error', error)
       throw error

packages/velog-server/src/template/changeEmailTemplate.ts

@@ -9,9 +9,9 @@ export const changeEmailTemplate: ChangeEmailTemplateArgs = (username, email, co
   <a href="https://velog.io">
     <img src="https://images.velog.io/email-logo.png" style="display: block; width: 128px; margin: 0 auto;"/>
   </a>
-  <div style="max-width: 100%; width: 400px; margin: 0 auto; padding: 1rem; text-align: justify; background: #f8f9fa; border: 1px solid #dee2e6; box-sizing: border-box; border-radius: 4px; color: #868e96; margin-top: 0.5rem; box-sizing: border-box;">
-    <b style="black">안녕하세요!</b>
-    ${username}의 이메일을 ${email}로 ${text}하는 것을 승인하겠습니까?
+  <div style="max-width: 100%; margin: 0 auto; padding: 1rem; text-align: justify; background: #f8f9fa; border: 1px solid #dee2e6; box-sizing: border-box; border-radius: 4px; color: #868e96; margin-top: 0.5rem; box-sizing: border-box;">
+    <div><b style="black">안녕하세요!</b></div>
+    <p style="word-wrap: break-word; word-break: break-all;">${username}의 이메일을 ${email}로 ${text}하는 것을 승인하겠습니까?</p>
   </div>
   <a href="${endpoint}/email-change?code=${code}" style="text-decoration: none; width: 400px; text-align:center; display:block; margin: 0 auto; margin-top: 1rem; background: #845ef7; padding-top: 1rem; color: white; font-size: 1.25rem; padding-bottom: 1rem; font-weight: 600; border-radius: 4px;">
     ${text}하기
@@ -25,6 +25,7 @@ export const changeEmailTemplate: ChangeEmailTemplateArgs = (username, email, co
   </div>
 </div>
   `
+
   return {
     subject,
     body,

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'