[Frontend] Enter the homepage immediately after signing up

packages/frontend/src/constants/errorMessage.ts

@@ -0,0 +1,3 @@
+export const AUTH_ERROR_MESSAGE = {
+    DEFAULT: '很抱歉通知您，您尚未登陸帳號，請返回註冊頁再次嘗試註冊，謝謝您！',
+}

packages/frontend/src/constants/paths.ts

@@ -9,6 +9,6 @@ export const PATHS = {
     VIEW_POST: '/posts/:id',
     WRITE_POST: '/write-post',
     PROFILE: '/profile',
-    HISTORTY: '/profile/history',
+    HISTORY: '/profile/history',
     REPUTATION: '/profile/reputation',
 }

packages/frontend/src/features/auth/components/AuthErrorDialog/AuthErrorDialog.tsx

@@ -6,12 +6,14 @@ interface ErrorModalProps {
     isOpen: boolean
     message?: string
     buttonText?: string
+    onClose: () => void
 }
 
 export default function AuthErrorDialog({
     isOpen,
     message = '',
     buttonText = '返回註冊頁重新嘗試',
+    onClose,
 }: ErrorModalProps) {
     const navigate = useNavigate()
 
@@ -26,14 +28,14 @@ export default function AuthErrorDialog({
                     <GrFormClose
                         className="absolute cursor-pointer top-4 right-4"
                         size={24}
-                        onClick={handleClick}
+                        onClick={onClose}
                     />
-                    <div className="flex flex-col justify-center gap-6">
+                    <div className="flex flex-col w-full py-2 gap-5">
                         <p>親愛的用戶：</p>
                         <p>{message}</p>
                     </div>
                     <button
-                        className="w-full py-4 bg-[#FF892A] rounded-lg text-white font-bold tracking-wider text-lg"
+                        className="w-full max-w-[280px] px-4 py-3 bg-[#FF892A] rounded-lg text-white font-bold tracking-wider text-lg"
                         onClick={handleClick}
                     >
                         {buttonText}

packages/frontend/src/features/auth/components/ErrorDialog/ErrorDialog.tsx

@@ -1,11 +1,21 @@
 import AuthErrorDialog from '@/features/auth/components/AuthErrorDialog/AuthErrorDialog'
 import { useAuthStatus } from '@/features/auth/hooks/useAuthStatus/useAuthStatus'
+import { useNavigate } from 'react-router-dom'
 
 export default function ErrorDialog() {
     const { signupErrors } = useAuthStatus()
     const isError = signupErrors.some((error) => !!error)
+    const navigate = useNavigate()
+
+    const handleClose = () => {
+        navigate('/welcome')
+    }
 
     return (
-        <AuthErrorDialog isOpen={isError} message={signupErrors[0]?.message} />
+        <AuthErrorDialog
+            isOpen={isError}
+            message={signupErrors[0]?.message}
+            onClose={handleClose}
+        />
     )
 }

packages/frontend/src/features/auth/components/SignupPendingTransition/SignupPendingTransition.tsx

@@ -50,7 +50,7 @@ export default function SignUpLoadingModal() {
     const [pendingText, setPendingText] =
         useState('努力註冊中，先來看看文章吧！')
 
-    const opacityVarients = {
+    const opacityVariants = {
         visible: { opacity: 1 },
         hidden: {
             opacity: 0,
@@ -98,13 +98,13 @@ export default function SignUpLoadingModal() {
                 <>
                     <motion.div
                         className="w-8/12 h-[12px] rounded-2xl bg-gradient-to-r from-[#52ACBC] to-[#FF892A]"
-                        variants={opacityVarients}
+                        variants={opacityVariants}
                         initial="visible"
                         animate="hidden"
                     />
                     <motion.p
                         className="w-11/12 text-lg font-semibold tracking-wider text-center text-white h-14"
-                        variants={opacityVarients}
+                        variants={opacityVariants}
                         initial="visible"
                         animate="hidden"
                     >

packages/frontend/src/features/auth/hooks/useAuthCheck/useAuthCheck.ts

@@ -0,0 +1,19 @@
+import { useAuthStatus } from '@/features/auth'
+import { useAuthStore } from '../../stores/authStore'
+
+type CallbackFunction = () => void
+
+export function useAuthCheck(errorMessage: string) {
+    const { isLoggedIn } = useAuthStatus()
+    const setErrorMessage = useAuthStore((state) => state.setErrorMessage)
+
+    const checkAuth = (callback: CallbackFunction) => {
+        if (!isLoggedIn) {
+            setErrorMessage(errorMessage)
+        } else {
+            callback()
+        }
+    }
+
+    return checkAuth
+}

packages/frontend/src/features/auth/hooks/useAuthStatus/useAuthStatus.ts

@@ -27,6 +27,7 @@ export function useAuthStatus() {
     const signingUpCount = useIsMutating({
         mutationKey: [MutationKeys.Signup],
     })
+
     const isSigningUp = signingUpCount > 0
 
     const signupErrors = useMutationState({

packages/frontend/src/features/auth/index.ts

@@ -6,7 +6,6 @@ export { default as ErrorDialog } from './components/ErrorDialog/ErrorDialog'
 export { default as Greeting } from './components/Greeting/Greeting'
 export { default as LoginButton } from './components/LoginButton/LoginButton'
 export { default as LogoutModal } from './components/LogoutModal/LogoutModal'
-export { default as ProtectedRoute } from './components/ProtectedRoute/ProtectedRoute'
 export { default as SignupPendingTransition } from './components/SignupPendingTransition/SignupPendingTransition'
 export { default as StepInfo } from './components/StepInfo/StepInfo'
 export * from './components/TwitterButton/TwitterButton'

packages/frontend/src/features/auth/provider/AuthProvider.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import { useAuthStore } from '../stores/authStore'
+import AuthErrorDialog from '../components/AuthErrorDialog/AuthErrorDialog'
+
+const AuthProvider: React.FC<{ children: React.ReactNode }> = ({
+    children,
+}) => {
+    const { errorMessage, setErrorMessage } = useAuthStore()
+
+    return (
+        <>
+            {children}
+            {errorMessage && (
+                <AuthErrorDialog
+                    isOpen={!!errorMessage}
+                    message={errorMessage}
+                    onClose={() => setErrorMessage(null)}
+                />
+            )}
+        </>
+    )
+}
+
+export default AuthProvider

packages/frontend/src/features/auth/stores/authStore.ts

@@ -0,0 +1,11 @@
+import create from 'zustand'
+
+type AuthStore = {
+    errorMessage: string | null
+    setErrorMessage: (message: string | null) => void
+}
+
+export const useAuthStore = create<AuthStore>((set) => ({
+    errorMessage: null,
+    setErrorMessage: (message) => set({ errorMessage: message }),
+}))

packages/frontend/src/features/post/components/Comment/Comment.tsx

@@ -6,6 +6,8 @@ import { nanoid } from 'nanoid'
 import { CommentActionMenu } from './CommentActionMenu'
 import { CommentBlockedMask } from './CommentBlockedMask'
 import { CommentReportedMask } from './CommentReportedMask'
+import { useAuthCheck } from '@/features/auth/hooks/useAuthCheck/useAuthCheck'
+import { AUTH_ERROR_MESSAGE } from '@/constants/errorMessage'
 
 interface CommentProps {
     postId: string
@@ -36,6 +38,14 @@ export default function Comment({
     onRepublish = () => {},
     onDelete = () => {},
 }: CommentProps) {
+    const checkAuth = useAuthCheck(AUTH_ERROR_MESSAGE.DEFAULT)
+
+    const handleDelete = () => {
+        checkAuth(() => {
+            onDelete()
+        })
+    }
+
     return (
         <>
             <article

packages/frontend/src/features/post/components/Comment/CommentActionMenu.tsx

@@ -13,6 +13,8 @@ import {
 } from '../ActionMenu'
 import CommentDeleteDialog from '../CommentDeleteDialog/CommentDeleteDialog'
 import { CommentReportDialog } from './CommentReportDialog'
+import { useAuthCheck } from '@/features/auth/hooks/useAuthCheck/useAuthCheck'
+import { AUTH_ERROR_MESSAGE } from '@/constants/errorMessage'
 
 interface CommentActionMenuProps {
     postId: string
@@ -29,6 +31,8 @@ export function CommentActionMenu({
     canDelete,
     canReport,
 }: CommentActionMenuProps) {
+    const checkAuth = useAuthCheck(AUTH_ERROR_MESSAGE.DEFAULT)
+
     const {
         isOpen: isActionMenuOpen,
         onOpen: onActionMenuOpen,
@@ -46,10 +50,17 @@ export function CommentActionMenu({
     } = useDialog()
 
     const { isValidReputationScore } = useReputationScore()
+
     const handleReportComment = isValidReputationScore
         ? onReportDialogOpen
         : openForbidActionDialog
 
+    const onReport = () => {
+        checkAuth(() => {
+            handleReportComment()
+        })
+    }
+
     return (
         <ActionMenuContainer
             onOpen={onActionMenuOpen}
@@ -68,7 +79,7 @@ export function CommentActionMenu({
                 <ActionMenuDropdownItem
                     icon={<BanIcon />}
                     name="檢舉留言"
-                    onClick={handleReportComment}
+                    onClick={onReport}
                     disabled={!canReport}
                 />
             </ActionMenuDropdown>
@@ -85,7 +96,7 @@ export function CommentActionMenu({
                 <ActionMenuBottomSlideItem
                     icon={<BanIcon />}
                     name="檢舉留言"
-                    onClick={handleReportComment}
+                    onClick={onReport}
                     disabled={!canReport}
                 />
             </ActionMenuBottomSlide>

packages/frontend/src/features/post/components/CreatePost/CreatePost.tsx

@@ -7,7 +7,6 @@ import {
 } from '@/features/post'
 import { useQueryClient } from '@tanstack/react-query'
 import { useEffect, useState } from 'react'
-import toast from 'react-hot-toast'
 
 export default function CreatePost({
     disabled = false,
@@ -25,7 +24,6 @@ export default function CreatePost({
 
         try {
             await createPost(values)
-            toast('貼文成功送出')
         } catch {
             setIsSubmitting(false)
             queryClient.setQueryData(['posts'], previousPostsData)

packages/frontend/src/features/post/components/Post/Post.tsx

@@ -1,5 +1,7 @@
 import { useAuthStatus } from '@/features/auth'
 import { LikeAnimation, VoteFailureDialog, useVoteStore } from '@/features/post'
+import { AUTH_ERROR_MESSAGE } from '@/constants/errorMessage'
+import { useAuthCheck } from '@/features/auth/hooks/useAuthCheck/useAuthCheck'
 import { useReputationScore } from '@/features/reporting'
 import { Avatar } from '@/features/shared'
 import { openForbidActionDialog } from '@/features/shared/stores/dialog'
@@ -62,7 +64,7 @@ export default function Post({
         status === PostStatus.Pending ? '存取進行中' : publishedLabel
 
     const { isLoggedIn } = useAuthStatus()
-
+    const checkAuth = useAuthCheck(AUTH_ERROR_MESSAGE.DEFAULT)
     const { votes } = useVoteStore()
 
     const voteState = useMemo(() => {
@@ -105,7 +107,15 @@ export default function Post({
     }, [isMine, finalAction])
 
     const { isValidReputationScore } = useReputationScore()
+
+    const handleComment = () => {
+        checkAuth(() => {
+            onComment()
+        })
+    }
+
     const handleVote = async (voteType: VoteAction) => {
+        if (!isLoggedIn) return
         if (!isValidReputationScore) {
             openForbidActionDialog()
             return
@@ -189,7 +199,7 @@ export default function Post({
                     countComment={commentCount}
                     voteAction={isAction}
                     handleVote={handleVote}
-                    handleComment={onComment}
+                    handleComment={handleComment}
                 />
             </div>
             {compact && imageUrl && (