Merge pull request #40 from Help-M-Ssaem/feat/#39

[Feat] useToast hook
Help-M-Ssaem · Aug 20, 2024 · 1966e96 · 1966e96
2 parents 291da95 + 9e08875
commit 1966e96
Show file tree

Hide file tree

Showing 17 changed files with 275 additions and 63 deletions.
diff --git a/src/app/board/[id]/page.tsx b/src/app/board/[id]/page.tsx
@@ -16,6 +16,7 @@ import CommentList from '@/components/board/CommentList'
 import { useUserInfo } from '@/service/user/useUserService'
 import { useQueryClient } from '@tanstack/react-query'
 import { queryKeys } from '@/service/board/BoardQueries'
+import { useToast } from '@/hooks/useToast'
 
 const BoardDetail = () => {
   const { id } = useParams()
@@ -24,6 +25,8 @@ const BoardDetail = () => {
 
   const queryClient = useQueryClient()
 
+  const { showToast } = useToast()
+
   const { data: userInfo } = useUserInfo()
   const { data: boardDetail } = useBoardDetail(boardId)
   const { mutate: postBoardLike } = usePostBoardLike()
@@ -44,7 +47,12 @@ const BoardDetail = () => {
   }, [boardDetail])
 
   const handleLikeToggle = () => {
+    if (!userInfo) {
+      showToast('로그인이 필요한 서비스입니다')
+      return
+    }
     if (userInfo && userInfo.id === boardDetail?.memberSimpleInfo.id) {
+      showToast('본인 게시글에는 좋아요를 누를 수 없습니다')
       return
     }
     postBoardLike(boardId, {

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -1,9 +1,10 @@
+import dynamic from 'next/dynamic'
 import type { Metadata } from 'next'
 import '../styles/globals.css'
 import Recoil from '@/recoil/Recoil'
 import localFont from 'next/font/local'
-import dynamic from 'next/dynamic'
 import ReactQueryProviders from '@/hooks/useReactQuery'
+import Toaster from '@/components/common/Toaster'
 
 const pretendard = localFont({
   src: '../../public/fonts/PretendardVariable.woff2',
@@ -42,6 +43,7 @@ export default function RootLayout({
               <Header />
               {children}
               <Footer />
+              <Toaster />
             </main>
           </ReactQueryProviders>
         </Recoil>

diff --git a/src/app/signin/info/page.tsx b/src/app/signin/info/page.tsx
@@ -59,12 +59,6 @@ const Info = () => {
         />
       </div>
 
-      <div className="flex flex-col gap-5 w-full">
-        <div className="text-gray2 text-headline font-semibold">
-          당신의 이메일은 {email}입니다.
-        </div>
-      </div>
-
       <div className="flex flex-col gap-5 w-full">
         <div className="text-gray2 text-headline font-semibold">
           당신의 MBTI는 무엇인가요?

diff --git a/src/components/auth/Login.stories.tsx b/src/components/auth/Login.stories.tsx
@@ -1,18 +1,19 @@
-import Login from '@/components/auth/Login'
-import { User } from '@/model/User'
+import Login, { LoginProps } from '@/components/auth/Login'
 import { Meta, StoryFn } from '@storybook/react'
 
 export default {
   title: 'Auth/Login',
   component: Login,
-} as Meta<User>
+} as Meta<LoginProps>
 
-const Template: StoryFn<User> = (args: User) => <Login {...args} />
+const Template: StoryFn<LoginProps> = (args: LoginProps) => <Login {...args} />
 
 export const Primary = Template.bind({})
 Primary.args = {
-  profileImgUrl: '/images/common/default.svg',
-  nickName: '유보라',
-  mbti: 'ENFP',
-  badge: '엠비티어른',
+  user: {
+    profileImgUrl: '/images/common/default.svg',
+    nickName: '유보라',
+    mbti: 'ENFP',
+    badge: '엠비티어른',
+  },
 }
diff --git a/src/components/auth/Login.tsx b/src/components/auth/Login.tsx
@@ -4,26 +4,31 @@ import { User } from '@/model/User'
 import { useRouter } from 'next/navigation'
 import Profile from '../common/Profile'
 
-const menuItems = [
-  { id: 'chat', label: 'M쌤 채팅', path: '/chat' },
-  { id: 'notification', label: '알림', path: '/notifications' },
-  { id: 'activity', label: '활동', path: '/activity' },
-  { id: 'profile', label: '프로필 설정', path: '/profile-settings' },
-]
+export interface LoginProps {
+  user: User
+}
 
-const Login = ({ profileImgUrl, nickName, mbti, badge }: User) => {
+const Login = ({ user }: LoginProps) => {
   const router = useRouter()
+  const { id, profileImgUrl, nickName, mbti, badge } = user
+
+  const menuItems = [
+    { id: 'chat', label: 'M쌤 채팅', path: '/chatting' },
+    { id: 'notification', label: '알림', path: '/#' },
+    { id: 'activity', label: '활동', path: '/#' },
+    { id: 'profile', label: '프로필 설정', path: `/user/${id}` },
+  ]
 
   return (
-    <div className="flex flex-col items-center w-68 h-full px-7 py-8 bg-white rounded-7.5">
+    <div className="flex flex-col justify-between items-center w-full min-h-full min-w-67.5 p-7 bg-white rounded-7.5">
       <div className="w-full flex justify-end">
         <p className="text-gray2 text-caption cursor-pointer">로그아웃</p>
       </div>
-      <div className="flex flex-col gap-4">
+      <div className="flex flex-col gap-4 items-center">
         <Profile user={{ profileImgUrl, nickName, mbti, badge }} />
-        <ul className="flex justify-between w-full text-gray2 text-caption">
+        <ul className="flex justify-center w-full text-gray2 text-caption">
           {menuItems.map((item, index) => (
-            <div key={item.id} className="flex items-center">
+            <li key={item.id} className="flex items-center">
               <button
                 type="button"
                 className="whitespace-nowrap overflow-hidden text-ellipsis cursor-pointer bg-transparent border-none p-0 m-0"
@@ -32,16 +37,12 @@ const Login = ({ profileImgUrl, nickName, mbti, badge }: User) => {
                 {item.label}
               </button>
               {index < menuItems.length - 1 && <span className="mx-2">|</span>}
-            </div>
+            </li>
           ))}
         </ul>
       </div>
     </div>
   )
 }
 
-Login.defaultProps = {
-  badge: undefined,
-}
-
 export default Login
diff --git a/src/components/board/BoardCreatePage.tsx b/src/components/board/BoardCreatePage.tsx
@@ -16,12 +16,13 @@ import { useQueryClient } from '@tanstack/react-query'
 import { queryKeys } from '@/service/board/BoardQueries'
 import { useUserInfo } from '@/service/user/useUserService'
 import { MBTI } from '@/types/mbtiTypes'
+import { useToast } from '@/hooks/useToast'
 
 const BoardCreatePage = () => {
   const router = useRouter()
   const queryClient = useQueryClient()
-
   const editorRef = useRef<any>(null)
+  const { showToast } = useToast()
 
   const [title, setTitle] = useState('')
   const [content, setContent] = useState('')
@@ -101,10 +102,10 @@ const BoardCreatePage = () => {
 
   const handleSubmit = () => {
     if (!title) {
-      alert('제목을 입력해주세요.')
+      showToast('제목을 입력해주세요.')
       return
     } else if (!content) {
-      alert('내용을 입력해주세요.')
+      showToast('내용을 입력해주세요.')
       return
     }
     postBoard(formData, {
@@ -116,7 +117,7 @@ const BoardCreatePage = () => {
   }
 
   return (
-    <div className="w-full-vw ml-half-vw px-4% py-8 sm:px-8% md:px-13% bg-main3">
+    <div className="w-full-vw ml-half-vw p-5% sm:px-8% sm:py-8 md:px-13% bg-main3">
       <Container color="white" className="bg-white p-10">
         <MbtiSelect mbti={mbti && mbti.toUpperCase()} setMbti={setMbti} />
         <div className="text-headline font-normal text-gray2 mb-5">

diff --git a/src/components/board/BoardPage.tsx b/src/components/board/BoardPage.tsx
@@ -10,6 +10,8 @@ import SearchBar from '@/components/common/SearchBar'
 import { useBoardList } from '@/service/board/useBoardService'
 import { useEffect, useState } from 'react'
 import { BoardI } from '@/model/Board'
+import { useToast } from '@/hooks/useToast'
+import { useUserInfo } from '@/service/user/useUserService'
 
 const BoardPage = () => {
   const router = useRouter()
@@ -22,6 +24,9 @@ const BoardPage = () => {
   const pageSize = 6
 
   const { data: boardList } = useBoardList(mbti, page - 1, pageSize)
+  const { data: userInfo } = useUserInfo()
+
+  const { showToast } = useToast()
 
   const handlePageChange = (newPage: number) => {
     setPage(newPage)
@@ -36,6 +41,14 @@ const BoardPage = () => {
     }
   }, [mbtiQuery])
 
+  const handleWriteClick = () => {
+    if (!userInfo) {
+      showToast('로그인이 필요한 서비스입니다')
+      return
+    }
+    router.push('/board/create')
+  }
+
   return (
     <>
       <MbtiCategories selectedMbti={mbti} />
@@ -48,9 +61,7 @@ const BoardPage = () => {
             text="글 쓰기"
             color="PURPLE"
             size="small"
-            onClick={() => {
-              router.push('/board/create')
-            }}
+            onClick={handleWriteClick}
           />
         </div>
         <div className="h-[1px] bg-main mb-7.5" />

diff --git a/src/components/board/BoardUpdatePage.tsx b/src/components/board/BoardUpdatePage.tsx
@@ -16,6 +16,7 @@ import MbtiSelect from '@/components/board/MbtiSelect'
 import { useQueryClient } from '@tanstack/react-query'
 import { queryKeys } from '@/service/board/BoardQueries'
 import { MBTI } from '@/types/mbtiTypes'
+import { useToast } from '@/hooks/useToast'
 
 const BoardUpdatePage = () => {
   const router = useRouter()
@@ -24,6 +25,7 @@ const BoardUpdatePage = () => {
   const boardId = Number(id)
 
   const editorRef = useRef<any>(null)
+  const { showToast } = useToast()
 
   const [mbti, setMbti] = useState<MBTI | null>(null)
   const [title, setTitle] = useState('')
@@ -114,10 +116,10 @@ const BoardUpdatePage = () => {
 
   const handleSubmit = () => {
     if (!title) {
-      alert('제목을 입력해주세요.')
+      showToast('제목을 입력해주세요.')
       return
     } else if (!content) {
-      alert('내용을 입력해주세요.')
+      showToast('내용을 입력해주세요.')
       return
     }
     updateBoard(

diff --git a/src/components/board/Comment.tsx b/src/components/board/Comment.tsx
@@ -8,6 +8,8 @@ import {
 } from '@/service/comment/useCommentService'
 import Image from 'next/image'
 import { useParams } from 'next/navigation'
+import { useToast } from '@/hooks/useToast'
+import { useUserInfo } from '@/service/user/useUserService'
 import Profile from '../common/Profile'
 
 export interface CommentProps {
@@ -32,10 +34,20 @@ const Comment = ({ comment, onClick, refetchComments }: CommentProps) => {
 
   const [liked, setLiked] = useState(comment.isLiked)
   const [likeCount, setLikeCount] = useState(comment.likeCount)
+  const { data: userInfo } = useUserInfo()
+  const { showToast } = useToast()
 
   const isDeleted = content === '삭제된 댓글입니다.'
 
   const handleToggleLike = () => {
+    if (!userInfo) {
+      showToast('로그인이 필요한 서비스입니다')
+      return
+    }
+    if (userInfo && userInfo.id === memberSimpleInfo.id) {
+      showToast('본인 댓글에는 좋아요를 누를 수 없습니다')
+      return
+    }
     if (!isEditAllowed) {
       setLiked(!liked)
       setLikeCount((prevCount) => (liked ? prevCount - 1 : prevCount + 1))
@@ -82,8 +94,7 @@ const Comment = ({ comment, onClick, refetchComments }: CommentProps) => {
             <button
               onClick={handleToggleLike}
               type="button"
-              className={`flex items-center gap-1.5 ${isEditAllowed ? 'cursor-default' : 'cursor-pointer'}`}
-              disabled={isEditAllowed}
+              className="flex items-center gap-1.5 cursor-pointer"
             >
               <Image
                 src={`/images/board/${liked ? 'heart_fill' : 'heart_empty'}.svg`}

diff --git a/src/components/board/CommentList.tsx b/src/components/board/CommentList.tsx
@@ -6,6 +6,7 @@ import {
   useCommentList,
   useDiscussionCommentList,
 } from '@/service/comment/useCommentService'
+import { useToast } from '@/hooks/useToast'
 import Comment from './Comment'
 import CommentInput from './CommentInput'
 
@@ -55,9 +56,15 @@ const CommentList = ({
   const [replyId, setReplyId] = useState<number | undefined>(undefined)
   const [isReply, setIsReply] = useState(false)
 
+  const { showToast } = useToast()
+
   // TODO: 공유, 신고 기능 추가
-  const handleShareBtnClick = () => {}
-  const handleReportBtnClick = () => {}
+  const handleShareBtnClick = () => {
+    showToast('공유 기능은 준비 중입니다')
+  }
+  const handleReportBtnClick = () => {
+    showToast('신고 기능은 준비 중입니다')
+  }
 
   const handleCommentClick = (commentId: number) => {
     setReplyId(commentId)

diff --git a/src/components/common/Category.tsx b/src/components/common/Category.tsx
@@ -3,6 +3,8 @@
 import { usePathname, useRouter, useSearchParams } from 'next/navigation'
 import React, { Suspense, useEffect, useState } from 'react'
 import Image from 'next/image'
+import { useUserInfo } from '@/service/user/useUserService'
+import { useToast } from '@/hooks/useToast'
 
 const categories = [
   { path: '/', label: 'HOME' },
@@ -21,8 +23,11 @@ const Category = () => {
   const pathname = usePathname()
   const searchParams = useSearchParams()
   const router = useRouter()
+  const { data: userInfo } = useUserInfo()
   const [selected, setSelected] = useState<string | null>(null)
 
+  const { showToast } = useToast()
+
   useEffect(() => {
     if (pathname) {
       const fullPath = pathname + searchParams.toString()
@@ -35,6 +40,14 @@ const Category = () => {
     router.push(path)
   }
 
+  const handleProtectedClick = (path: string) => {
+    if (!userInfo) {
+      showToast('로그인이 필요한 서비스입니다')
+      return
+    }
+    handleClick(path)
+  }
+
   const getButtonClass = (categoryPath: string) => {
     if (categoryPath === '/') {
       return selected === '/'
@@ -69,7 +82,7 @@ const Category = () => {
             <li key={category.path} className="list-none">
               <button
                 type="button"
-                onClick={() => handleClick(category.path)}
+                onClick={() => handleProtectedClick(category.path)}
                 className={`ml-7 cursor-pointer relative hover:text-main1 transition-all ${getButtonClass(category.path)}`}
               >
                 {category.label}