느려도 한걸음씩

이번 포스트에서는 게시물 작성자가 본인의 게시글을 마감하거나 다시 모집 상태로 되돌릴 수 있는 기능과, 마감되지 않은(모집 중인) 게시글만 골라서 보여주는 필터링 기능을 함께 구현해 보겠습니다. 예를 들어, 스터디나 프로젝트 팀원을 모집하는 게시글을 작성한 사용자가 더 이상 팀원이 필요 없을 경우 '마감' 버튼을 눌러 해당 게시글을 마감 처리하고, 사용자들이 모집 중인 게시글만 볼 수 있도록 필터링할 수 있게 하는 것이 목표입니다. ✅ 1. posts 테이블에 expired 필드 추가먼저 Supabase의 posts 테이블에 expired라는 새로운 컬럼을 추가합니다. 이 필드는 게시글의 마감 여부를 저장하는 Boolean 타입이며, 기본값은 false로 설정합니다. 즉, 게시글이 처음 생성되면 기본적..

게시판 기능이 점점 완성되어 가고 있습니다. 이번 글에서는 Next.js와 Supabase를 이용해 페이지네이션(Pagination) 기능을 어떻게 구현했는지 정리해보려 합니다. 📦 기능 개요Supabase에서 게시글 데이터를 page 단위로 가져오기쿼리 스트링 기반 페이지 이동현재 페이지 강조... 생략 기호로 많은 페이지도 깔끔하게 표현 📁 1. Supabase에서 게시글 페이징 처리Supabase에서 데이터를 가져올 때는 .range() 메서드를 통해 간단히 페이징 처리가 가능합니다. export async function getPosts( categoryParams?: string, modeParams?: string, positionParams?: string, searchQuery?..

이번 포스트에서는 게시물 삭제 기능을 구현해보겠습니다.단순히 데이터를 삭제하는 것을 넘어, 본인 소유의 게시물만 삭제할 수 있도록 보안 정책을 적용하고, UI에서도 조건부로 삭제 버튼을 노출하는 흐름까지 함께 살펴볼게요. ✅ Step 1. Supabase RLS 설정먼저 posts 테이블에서 본인 소유의 게시물만 삭제 가능하도록 Supabase에서 RLS(행 수준 보안, Row-Level Security)를 설정합니다.CREATE POLICY "Users can delete their own posts"ON postsFOR DELETEUSING (auth.uid() = user_id); auth.uid()는 현재 로그인한 사용자의 고유 ID입니다.user_id는 게시물을 작성한 사용자의 ID입니다.즉..

이번 포스트에서는 내가 게시한 포스트들을 볼 수 있는 페이지를 구현해 보겠습니다.내 게시물은 게시물 작성자가 본인이므로, 사용자가 로그인한 상태에서 본인이 작성한 게시물만 조회하는 페이지입니다. 1. 내 게시물 조회 함수 만들기먼저, 현재 사용자가 작성한 게시물만 가져오는 함수를 만들어야 합니다.이를 위해 getMyPosts()라는 함수를 작성합니다.export async function getMyPosts() { const supabase = await createClient(); // 현재 로그인한 유저 정보 가져오기 const { data: { user }, error: userError, } = await supabase.auth.getUser(); if (!user || ..

이번 포스트에서는 사용자가 관심글(찜)으로 등록한 게시물들을 조회할 수 있는 "내 관심글 목록" 페이지를 구현해보겠습니다. 이 기능은 유저가 찜한 게시글만 필터링해서 볼 수 있게 해 주며, 향후 찜 취소 기능까지 포함해 사용자 경험을 높일 수 있습니다. 1. 내가 찜한 게시물 목록 조회먼저, Supabase에서 현재 로그인한 사용자가 좋아요(찜)를 누른 게시글의 정보를 가져오는 getMyLikes 함수를 작성합니다.export async function getMyLikes() { const supabase = await createClient(); // 현재 로그인한 유저 정보 가져오기 const { data: { user }, error: userError, } = await su..

이번 포스트에서는 게시물에 찜하기 기능(북마크)을 추가해보겠습니다. 🧱 테이블 설계지난 포스트에서 댓글 기능을 구현할 때 comments 테이블을 새로 만들었던 것처럼, 이번에는 찜하기 데이터를 저장할 likes 테이블을 만들어줍니다. create table likes ( id uuid primary key default gen_random_uuid(), user_id uuid references auth.users(id) not null, post_id uuid references posts(id) not null, created_at timestamp with time zone default now(), unique (user_id, post_id)); user_id는 로그인한 사용자의..

이번 포스트에서는 게시물에 댓글을 조회, 작성, 삭제하는 기능을 구현해보겠습니다. ✅ 댓글 데이터 구조 설계가장 먼저 댓글 데이터를 어떻게 관리할지 고민해야 합니다.저는 Supabase에 별도의 comments 테이블을 만들어 구현하기로 했습니다. create table comments ( id uuid primary key default gen_random_uuid(), post_id uuid references posts(id) on delete cascade, author_id uuid references users(id), email text, content text not null, created_at timestamp with time zone default now()); 댓글에..

이번 포스트에서는 posts 테이블의 모든 데이터를 불러오고, 각 게시물을 클릭하면 해당 상세 페이지로 이동하는 동적 라우팅 기능을 구현해보겠습니다. ✅ 1. Supabase에서 전체 게시물 가져오기우선 Supabase 클라이언트를 사용해 posts 테이블의 전체 데이터를 조회하는 함수를 만들어야 합니다. 아래는 app/actions.ts에 정의된 함수입니다export async function getPosts() { const supabase = await createClient(); const { data, error } = await supabase .from("posts") .select("*") .order("created_at", { ascending: false });..