feat: Implement favorites 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/Favorite/route.ts

@@ -0,0 +1,22 @@
+import {NextResponse} from 'next/server'
+
+import {createBrowserClient} from '@/supabase/client'
+
+export async function GET() {
+  const supabase = createBrowserClient()
+
+  try {
+    const {data, error} = await supabase.from('favorites').select('*')
+
+    if (error) {
+      return NextResponse.json({error}, {status: 500})
+    }
+
+    return NextResponse.json({data})
+  } catch (error) {
+    return NextResponse.json(
+      {error: 'Error fetching blog detail and comments'},
+      {status: 500},
+    )
+  }
+}

src/app/api/addFavorite.ts

@@ -0,0 +1,29 @@
+import {createBrowserClient} from '@/supabase/client'
+
+export async function addFavorite({
+  userId,
+  blogId,
+  blogTitle,
+}: {
+  userId: string
+  blogId: string
+  blogTitle: string
+}) {
+  const supabase = createBrowserClient()
+
+  try {
+    const {error} = await supabase.from('favorites').insert({
+      user_id: userId,
+      post_id: blogId,
+      post_title: blogTitle,
+      created_at: new Date().toISOString(),
+    })
+
+    if (error) {
+      return alert('권한이 없습니다.')
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error)
+  }
+}

src/app/api/createComment.ts

@@ -0,0 +1,34 @@
+import {createBrowserClient} from '@/supabase/client'
+
+export async function createComment({
+  username,
+  userId,
+  blogId,
+  content,
+}: {
+  username: string
+  userId: string
+  blogId: string
+  content: 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(),
+    })
+
+    if (error) {
+      return alert('권한이 없습니다.')
+    }
+    return data
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error)
+  }
+}

src/app/api/deleteFavorite.ts

@@ -0,0 +1,26 @@
+import {createBrowserClient} from '@/supabase/client'
+
+export async function deleteFavorite({
+  userId,
+  blogId,
+}: {
+  userId: string
+  blogId: string
+}) {
+  const supabase = createBrowserClient()
+
+  try {
+    const {error} = await supabase
+      .from('favorites')
+      .delete()
+      .eq('user_id', userId)
+      .eq('post_id', blogId)
+
+    if (error) {
+      return alert('권한이 없습니다.')
+    }
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error)
+  }
+}

src/app/api/getFavorite.ts

@@ -0,0 +1,45 @@
+import {createBrowserClient} from '@/supabase/client'
+
+export async function getBlogsFavorites({userId}: {userId: string}) {
+  const supabase = createBrowserClient()
+
+  try {
+    const {data, error} = await supabase
+      .from('favorites')
+      .select('*')
+      .eq('user_id', userId)
+
+    if (error) {
+      alert('error')
+
+      return []
+    }
+
+    return data || []
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error)
+  }
+}
+
+export async function getBlogFavorite({blogId}: {blogId: string}) {
+  const supabase = createBrowserClient()
+
+  try {
+    const {data, error} = await supabase
+      .from('favorites')
+      .select('*')
+      .eq('post_id', blogId)
+
+    if (error) {
+      alert('error')
+
+      return []
+    }
+
+    return data || []
+  } catch (error) {
+    // eslint-disable-next-line no-console
+    console.log(error)
+  }
+}

src/components/BlogList/index.tsx

@@ -5,9 +5,10 @@ import Typography from '@/components/Typography'
 
 interface Props {
   url: string
+  title: string
 }
 
-const BlogList = ({url}: Props) => {
+const BlogList = ({url, title}: Props) => {
   return (
     <Link
       className="group flex items-center mb-5 p-3.5 border border-n-3 rounded-xl h6 transition-all hover:border-transparent hover:shadow-[0_0_1rem_0.25rem_rgba(0,0,0,0.04),0px_2rem_1.5rem_-1rem_rgba(0,0,0,0.12)] last:mb-0 2xl:p-2.5 lg:p-3.5"
@@ -20,7 +21,7 @@ const BlogList = ({url}: Props) => {
           fill="fill-accent-6"
         />
       </div>
-      <Typography text="즐겨찾기 리스트입니다." />
+      <Typography text={title} />
       <Icon
         className="ml-auto fill-n-4 transition-colors"
         iconName="arrowNext"

src/components/Button/index.tsx

@@ -1,17 +1,19 @@
+import {type ReactElement} from 'react'
+
 interface Props {
-  buttonName: string
   type?: 'submit' | 'reset' | 'button'
   className?: string
-  onClick?: () => void
+  onClick?: (event: React.FormEvent) => void | Promise<void>
+  children: ReactElement
 }
 
-const Button = ({buttonName, className, onClick, type = 'button'}: Props) => {
+const Button = ({className, onClick, type = 'button', children}: Props) => {
   return (
     <button
       className={`btn-dark btn-small ${className}`}
       onClick={onClick}
       type={type}>
-      {buttonName}
+      {children}
     </button>
   )
 }

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>
   )
 }