feat: Implement comments delete feature

package.json

@@ -10,6 +10,7 @@
   },
   "dependencies": {
     "@supabase/supabase-js": "^2.45.4",
+    "axios": "^1.7.7",
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.35.2",

src/app/api/Blog/route.ts

@@ -0,0 +1,30 @@
+import {NextResponse} from 'next/server'
+
+import {createBrowserClient} from '@/supabase/client'
+
+export async function GET() {
+  const supabase = createBrowserClient()
+
+  try {
+    const [
+      {data: postsData, error: postsError},
+      {data: commentsData, error: commentsError},
+    ] = await Promise.all([
+      supabase.from('posts').select('*'),
+      supabase.from('comments').select('*'),
+    ])
+
+    if (postsError || commentsError) {
+      return NextResponse.json(
+        {error: postsError?.message || commentsError?.message},
+        {status: 500},
+      )
+    }
+    return NextResponse.json({posts: postsData, comments: commentsData})
+  } catch (error) {
+    return NextResponse.json(
+      {error: 'Error fetching blog detail and comments'},
+      {status: 500},
+    )
+  }
+}

src/app/api/BlogDetail/route.ts

@@ -4,30 +4,33 @@ import {createBrowserClient} from '@/supabase/client'
 
 export async function GET(req: NextRequest) {
   const supabase = createBrowserClient()
-
   const {searchParams} = new URL(req.url)
-
   const blogId = searchParams.get('id')
 
   if (!blogId) {
     return NextResponse.json({error: 'Blog ID is required'}, {status: 400})
   }
 
   try {
-    const {data, error} = await supabase
-      .from('posts')
-      .select('*')
-      .eq('id', blogId)
-      .single()
-
-    if (error) {
-      return NextResponse.json({error: error.message}, {status: 500})
+    const [
+      {data: postData, error: postError},
+      {data: commentsData, error: commentsError},
+    ] = await Promise.all([
+      supabase.from('posts').select('*').eq('id', blogId).single(),
+      supabase.from('comments').select('*').eq('post_id', blogId), // comments 테이블에서 post_id가 blogId인 것들을 가져옴
+    ])
+
+    if (postError || commentsError) {
+      return NextResponse.json(
+        {error: postError?.message || commentsError?.message},
+        {status: 500},
+      )
     }
 
-    return NextResponse.json(data)
+    return NextResponse.json({post: postData, comments: commentsData})
   } catch (error) {
     return NextResponse.json(
-      {error: 'Error fetching blog detail'},
+      {error: 'Error fetching blog detail and comments'},
       {status: 500},
     )
   }

src/app/api/createComment.ts

@@ -0,0 +1,42 @@
+import {createBrowserClient} from '@/supabase/client'
+
+export async function createComment({
+  username,
+  userId,
+  blogId,
+  content,
+  role,
+}: {
+  username: string
+  userId: string
+  blogId: string
+  content: string
+  role: string
+}) {
+  const supabase = createBrowserClient()
+
+  try {
+    const {data, error} = await supabase
+      .from('comments')
+      .insert([
+        {
+          username: username,
+          user_id: userId,
+          post_id: blogId,
+          content,
+          created_at: new Date().toISOString(),
+          updated_at: new Date().toISOString(),
+          user_role: role,
+        },
+      ])
+      .select('*')
+
+    if (error) {
+      return alert('권한이 없습니다.')
+    }
+    return data[0]
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error)
+  }
+}

src/app/api/deleteComment.ts

@@ -0,0 +1,31 @@
+import { createBrowserClient } from "@/supabase/client"
+
+export async function deleteComment({
+  userId,
+  commentId,
+  role,
+}: {
+  userId: string
+  commentId: string
+  role?: string
+}) {
+  const supabase = createBrowserClient()
+
+  try {
+    const query = role === 'admin'
+      ? supabase.from('comments').delete().eq('id', commentId)
+      : supabase.from('comments').delete().eq('user_id', userId).eq('id', commentId)
+
+    const { data, error } = await query
+
+    if (error) {
+      alert('삭제 권한이 없습니다.')
+      return null
+    }
+
+    return data
+  } catch (error) {
+    console.error(error)
+    return null
+  }
+}

src/components/CommentInput/index.tsx

@@ -1,11 +1,24 @@
-import {useState} from 'react'
+import {useCallback, useState} from 'react'
 
 import Icon from '@/components/Icon'
 import Input from '@/components/Input'
 
-const CommentInput = () => {
+interface Props {
+  onClick: (content: string) => Promise<void>
+}
+
+const CommentInput = ({onClick}: Props) => {
   const [commentValue, setCommentValue] = useState('')
 
+  const handleSubmit = useCallback(
+    async (event: React.FormEvent) => {
+      event.preventDefault()
+
+      await onClick(commentValue)
+    },
+    [commentValue, onClick],
+  )
+
   return (
     <div className="relative md:w-full md:mr-0">
       <div className="group absolute top-3 left-4 text-0 w-5 h-5">
@@ -14,11 +27,13 @@ const CommentInput = () => {
           iconName="search"
         />
       </div>
-      <Input
-        value={commentValue}
-        onChange={e => setCommentValue(e.target.value)}
-        placeholder="댓글을 입력해주세요."
-      />
+      <form onSubmit={handleSubmit}>
+        <Input
+          value={commentValue}
+          onChange={e => setCommentValue(e.target.value)}
+          placeholder="댓글을 입력해주세요."
+        />
+      </form>
     </div>
   )
 }

src/components/Icon/index.tsx

@@ -29,6 +29,8 @@ const ICONS = {
     'M14.707 5.293a1 1 0 0 0-1.414 1.414L17.586 11H4a1 1 0 1 0 0 2h13.586l-4.293 4.293a1 1 0 0 0 1.414 1.414l6-6a1 1 0 0 0 0-1.414l-6-6z',
   create:
     'M 12 2 C 6.4889941 2 2 6.4889982 2 12 C 2 17.511002 6.4889941 22 12 22 C 17.511006 22 22 17.511002 22 12 C 22 6.4889982 17.511006 2 12 2 z M 12 4 C 16.430126 4 20 7.5698765 20 12 C 20 16.430123 16.430126 20 12 20 C 7.5698737 20 4 16.430123 4 12 C 4 7.5698765 7.5698737 4 12 4 z M 11.984375 6.9863281 A 1.0001 1.0001 0 0 0 11 8 L 11 11 L 8 11 A 1.0001 1.0001 0 1 0 8 13 L 11 13 L 11 16 A 1.0001 1.0001 0 1 0 13 16 L 13 13 L 16 13 A 1.0001 1.0001 0 1 0 16 11 L 13 11 L 13 8 A 1.0001 1.0001 0 0 0 11.984375 6.9863281 z',
+  delete:
+    'M15 2.1a.9.9 0 0 1 .122 1.792L15 3.9H9a.9.9 0 0 1-.122-1.792L9 2.1h6zm6 3a.9.9 0 0 1 .122 1.792L21 6.9h-1.159l-.691 10.361-.045.567c-.095 1.043-.221 1.573-.523 2.102a3.9 3.9 0 0 1-1.688 1.579l-.224.101c-.332.137-.661.21-1.184.248l-.38.021-.451.013-1.147.008-3.616-.001-.51-.006-.434-.011-.37-.018-.316-.027c-.341-.038-.595-.097-.84-.189l-.21-.087-.107-.05a3.9 3.9 0 0 1-1.688-1.579l-.166-.325-.088-.223c-.054-.154-.098-.32-.135-.518l-.053-.321-.046-.38-.063-.708-.062-.878L4.158 6.9H3a.9.9 0 0 1-.122-1.792L3 5.1h18zm-2.963 1.8H5.962l.691 10.315.066.741.034.277.036.226.04.185.045.152.051.129.059.115a2.1 2.1 0 0 0 .909.85l.126.054.142.044.168.035.206.027.255.02.314.014.606.012.784.003 3.776-.003.583-.011.307-.013.252-.018.206-.024.089-.014.155-.034.132-.042.118-.051a2.1 2.1 0 0 0 .909-.85c.074-.13.131-.285.179-.511l.045-.252.04-.31.037-.378.082-1.129.637-9.559zM10 9.6a.9.9 0 0 1 .892.778l.008.122v5a.9.9 0 0 1-1.792.122L9.1 15.5v-5a.9.9 0 0 1 .9-.9zm4 0a.9.9 0 0 1 .892.778l.008.122v5a.9.9 0 0 1-1.792.122L13.1 15.5v-5a.9.9 0 0 1 .9-.9z',
 }
 
 export type IconName = keyof typeof ICONS

src/components/IconButton/index.tsx

@@ -0,0 +1,25 @@
+import Icon, {type IconName} from '@/components/Icon'
+
+interface Props {
+  type?: 'submit' | 'reset' | 'button'
+  buttonClassName?: string
+  iconClassName?: string
+  iconName: IconName
+  onClick?: () => void
+}
+
+const IconButton = ({
+  iconName,
+  buttonClassName,
+  iconClassName,
+  onClick,
+  type = 'button',
+}: Props) => {
+  return (
+    <button className={buttonClassName} onClick={onClick} type={type}>
+      <Icon iconName={iconName} className={iconClassName} />
+    </button>
+  )
+}
+
+export default IconButton