집플래닛 프로젝트 소개 | 거주 후기 공유 플랫폼

1. 프로젝트 개요

• 한 줄 정리: 집플래닛은 실제 거주자들이 작성한 생생한 리뷰를 통해 새로운 세입자들에게 유용한 정보를 제공하는 플랫폼입니다.
• 내용: 집플래닛은 사용자들이 자신이 거주했던 집에 대한 리뷰를 작성하고 공유할 수 있는 플랫폼으로, 미래의 세입자들에게 신뢰할 수 있는 정보를 제공합니다. 주거지 선택은 많은 사람들에게 중요한 결정 중 하나인데, 단순히 사진과 설명만으로는 알기 어려운 점들이 많습니다. 집플래닛은 이러한 문제를 해결하고자, 거주자들의 경험을 바탕으로 더욱 정확한 정보를 제공합니다.

2. 사용할 API 문서

• 카카오 지도 API: 지도 기반의 집 검색 및 필터링 기능을 구현하기 위해 카카오 지도 API를 활용합니다. 자세한 문서는 여기에서 확인할 수 있습니다.
• Supabase Docs: 인증 시스템과 데이터 저장소 관리에 Supabase를 사용합니다.
  • Auth Signup 문서
  • Storage Create Bucket 문서

3. 기술 스택

• 클라이언트 상태관리: Zustand를 사용하여 클라이언트 측의 상태 관리를 효율적으로 처리합니다.
• 서버 상태관리: TanStack Query로 서버와 클라이언트 간 데이터 통신을 관리하고, 서버 상태를 최적화합니다.
• 주요 프레임워크: Next.js로 SEO 최적화된 웹 애플리케이션을 개발합니다.
• 타입스크립트: 더욱 안전한 개발을 위해 TypeScript를 도입하여 코드의 가독성과 유지보수성을 높입니다.
• 백엔드 시스템: Supabase를 사용하여 인증, 데이터 저장소, 서버 로직 등을 효율적으로 처리합니다.
• 스타일링: Tailwind CSS로 빠르고 유연한 UI 스타일링을 구현합니다.

4. 필수 기능 구현 목록

• 로그인/로그아웃: 김진형 - 인증 및 인가 시스템 구현. 사용자는 로그인 후에만 후기를 작성하거나 찜한 집 목록을 확인할 수 있습니다.
• 마이페이지: 장세희 (나) - 내가 쓴 후기와 찜한 집 목록을 관리할 수 있는 마이페이지를 구현합니다.
• 지도 및 검색 기능: 김민규 - 카카오맵 API를 활용한 지도 기능과 필터링, 검색 기능을 구현하여 사용자가 원하는 조건의 집을 쉽게 찾을 수 있도록 돕습니다.
• 후기 작성 폼 및 상세페이지: 설하영 - 사용자가 후기를 작성, 수정, 삭제할 수 있는 CRUD 기능과 후기 상세 페이지를 구현합니다.
• Supabase 세팅 및 서버 로직: 최지민 - Supabase를 활용한 백엔드 세팅 및 서버 로직을 담당하여 데이터 관리와 인증 시스템을 구축합니다.

5. 프로젝트의 기대 효과

• 집을 찾는 사람들이 거주지에 대한 실제 경험을 바탕으로 집을 선택할 수 있어, 더 나은 결정을 내릴 수 있습니다.
• 다양한 검색 필터와 후기를 통해 원하는 집을 쉽게 찾고, 신뢰성 있는 정보를 얻을 수 있습니다.

 

---

 

마이페이지와 찜하기 기능 세부 설명

마이페이지: 내가 쓴 후기와 찜 목록 관리

1. 기능 개요

마이페이지는 사용자가 자신의 계정으로 작성한 후기를 관리하고, 찜한 집 목록을 볼 수 있는 개인 맞춤형 공간입니다. 사용자는 작성한 후기 목록을 확인하고, 수정 및 삭제를 할 수 있으며, 집을 찜한 목록을 통해 관심 있는 집들을 빠르게 다시 찾아볼 수 있습니다.

2. 구현 목표

• 사용자가 로그인 후에만 접근할 수 있도록 하여, 인증된 사용자만 자신의 데이터를 볼 수 있게 한다
• 내가 쓴 후기를 리스트 형식으로 보여주고, 각 후기에서 수정 또는 삭제 버튼을 통해 CRUD 기능을 구현
• 찜한 집 목록을 즐겨찾기처럼 볼 수 있게 하여, 사용자가 관심 있는 집을 손쉽게 다시 확인할 수 있도록 함  - 예정
• UI는 반응형 디자인으로, 모바일 및 PC에서 모두 최적화된 화면을 제공

3. 구현 세부 사항

• 데이터 모델링
  • 후기는 사용자 계정에 연결되며, 각 후기는 제목, 내용, 작성일, 그리고 작성한 집의 정보를 포함
  • 찜한 집 목록은 사용자의 계정 정보에 저장되어 있으며, 해당 집의 ID와 이름, 위치 등이 저장됨
  • Supabase를 통해 사용자 계정에 저장된 후기를 불러오고, 사용자가 찜한 집 목록을 가져옴
• 기능 구현
  1. 후기 리스트: 사용자가 작성한 후기를 불러와서 리스트 형식으로 표시. 각 후기에는 "수정" 및 "삭제" 버튼을 추가하여, 수정 시에는 기존 데이터를 기반으로 새로운 입력 폼을 띄워줌
  2. (예정)찜한 목록: 찜한 집들을 카드 형식으로 보여주고, 각 집에 대한 간단한 정보(주소, 사진, 가격 등)를 표시
  3. 로그인 상태 확인: Zustand를 통해 사용자 로그인 상태를 전역적으로 관리하고, 로그아웃 시 마이페이지 접근을 차단
  4. 삭제 기능: 사용자가 후기를 삭제할 때 Supabase에 연동된 데이터를 삭제하는 API 호출
  5. 수정 기능: 사용자가 후기를 수정할 때 기존 데이터를 기반으로 Supabase에 있는 후기를 업데이트

4. 기술적 도전 과제 및 해결 방안

• 데이터 비동기 처리: TanStack Query를 사용하여 Supabase와의 비동기 데이터 통신을 효율적으로 관리
• 인증 처리: 로그인 상태를 전역적으로 관리하고, 인증이 필요한 경우 적절한 리디렉션 처리
• 반응형 디자인: Tailwind CSS를 활용하여 모바일 및 PC 모두에서 최적화된 UI를 제공. 특히, 마이페이지는 모바일 환경에서 더 자주 사용될 가능성이 높으므로, 이를 고려한 디자인이 필요

5. 구현하려는 페이지 와이어프레임

 

---

팀 프로젝트에서 각자의 역할에 따라 기능을 구현할 때, 다른 팀원들이 만든 기능과의 연계를 고려하는 것이 매우 중요합니다. 특히, 마이페이지 기능을 담당하고 있으니, 사용자 후기를 불러오고 찜한 목록을 보여주기 위해 다른 팀원들이 만든 기능과 어떻게 연결할지 계획을 세워야 합니다. 아래는 제가 마이페이지 기능을 구현하기 위해 따라야 할 단계입니다.

 

1. 프로젝트 구조 이해하기

• 프로젝트의 기본 구조와 데이터 흐름을 파악하여 각 팀원이 구현할 기능에 대한 이해도를 높입니다.
• Supabase 데이터베이스 구조를 확인하고, 사용자의 후기가 어떻게 관리되는지 살펴봅니다.

2. API 및 데이터 모델 정의

• 후기를 저장하고 조회하는 API 및 데이터 모델을 설계합니다. Supabase에서 후기를 다루는 테이블과 그 스키마를 확인합니다.
• 데이터 테이블의 구조:

3. 마이페이지 기능 설계

• 마이페이지는 두 가지 주요 기능을 포함해야 합니다:
  1. 내가 쓴 후기: 사용자가 작성한 후기를 조회하는 기능
  2. 관심 리스트 (Wishlist): 사용자가 찜한 집 목록을 조회하는 기능 - 예정

4. 후기 조회 기능 구현

• 후기를 담당한 팀원이 작성하는 CRUD 기능을 구현하는 동안, 후기 데이터를 조회하는 로직을 작성합니다.
• getMyReviews 함수를 만들어 사용자 후기를 불러오는 로직을 구현합니다.

import { supabase } from '../lib/supabaseClient';

export const getMyReviews = async (userId: string) => {
  const { data, error } = await supabase
    .from('reviews')
    .select('*')
    .eq('userId', userId);

  if (error) throw new Error(error.message);
  return data;
};

5. 찜하기 기능 구현

• 관심 리스트를 불러오기 위해 찜한 집 정보를 저장하는 테이블을 확인하고, 해당 데이터를 조회하는 함수를 작성합니다.
• getMyWishlist 함수를 통해 찜한 집 목록을 불러옵니다.

export const getMyWishlist = async (userId: string) => {
  const { data, error } = await supabase
    .from('wishlist')
    .select('*')
    .eq('userId', userId);

  if (error) throw new Error(error.message);
  return data;
};

6. UI 구성 및 데이터 연결

• 마이페이지의 UI를 Tailwind CSS로 디자인하고, 후기를 불러오는 로직과 UI를 연결합니다. 예를 들어, 후기를 나열하는 부분과 관심 리스트를 나열하는 부분을 구현합니다.

import { useEffect, useState } from 'react';
import { getMyReviews, getMyWishlist } from '../api/reviewApi'; // 함수 불러오기

const MyPage = ({ userId }) => {
  const [reviews, setReviews] = useState([]);
  const [wishlist, setWishlist] = useState([]);

  useEffect(() => {
    const fetchData = async () => {
      const myReviews = await getMyReviews(userId);
      const myWishlist = await getMyWishlist(userId);
      setReviews(myReviews);
      setWishlist(myWishlist);
    };
    fetchData();
  }, [userId]);

  return (
    <div>
      <h1>내 후기</h1>
      {reviews.map(review => (
        <div key={review.id}>{review.content}</div>
      ))}
      <h1>내 관심 리스트</h1>
      {wishlist.map(item => (
        <div key={item.id}>{item.title}</div> // item.title은 찜한 집의 제목이라고 가정
      ))}
    </div>
  );
};

7. 팀원들과의 커뮤니케이션

• 팀원들과 정기적으로 회의를 가지며 각자의 진행 상황을 공유하고, 필요한 데이터나 기능이 어떻게 연결되는지 논의합니다.
• 팀원이 후기를 작성하고 수정하는 부분이 완성되면 API를 통해 연동할 수 있도록 요청합니다.

8. 테스트 및 배포

• 각 기능이 제대로 작동하는지 테스트하고, 문제가 발생할 경우 즉시 조치를 취합니다.
• 프로젝트의 최종 점검 후, 배포를 진행하여 사용자가 실제로 접근할 수 있도록 합니다.