집플래닛 | 프로젝트를 마치며

1. 프로젝트 소개

집플래닛(Home Planet)은 사용자가 원하는 지역의 주거 환경을 쉽게 확인하고, 다른 사용자의 리뷰를 통해 생활 편의성을 평가할 수 있는 웹 애플리케이션입니다. 이 프로젝트의 목표는 이사나 주거지 선택을 앞둔 사용자들이 주거지에 대한 다양한 정보를 확인하고, 실제 거주자의 솔직한 리뷰를 바탕으로 더 나은 결정을 내릴 수 있도록 돕는 것입니다.

 

2. 프로젝트 수행 절차 및 방법

구분	기간	활동	비고
사전 기획	10/10 (목)	프로젝트 기획, 와이어 프레임 제작, 역할 배분, 컨벤션 설정	부동산 매물 API 미 제공으로 인핸 프로젝트 주제 변경 (부동산 매물 정보 > 거주 후기 공유)
기능 개발	10/11 (금)	프로젝트 셋업, 기능 중심 구현 시작	기능 개발
	10/12 (토) ~ 10/14(월)	기능 중심 구현(80%), 1차 기능 병합(월)
기능 마무리 & 디자인 개발	10/15 (화)	기능 구현(100%), 디자인 적용 완료(100%), 2차 병합
테스트 및 버그 수정	10/16 (수)	3차 병합, 테스트 및 버그 수정, 배포, 성능 측정	기능 테스트
총 개발 기간	10/10(목) ~ 10/16(수) 총 7일

 

3. 주요 기능/페이지별 기능

• 로그인 페이지사용자 인증
• 회원가입 페이지새 사용자 계정 생성
• 메인 페이지거주 후기 카드 표시, 최신순, 별점 높은 순 정렬, 후기 검색 기능
• 지도 페이지지도에 마커 표시, 후기 검색 기능, 건물 유형 별 필터링
• 디테일 페이지개별 후기의 상세 정보 표시
• 마이 페이지사용자가 작성한 거주 후기 목록 관리
• 피드 작성 폼 페이지새로운 후기 생성 및 수정, 이미지 핸들링

4. 기술 스택

5. 개발 환경

6. 프로젝트 수행 절차 및 방법

저희 팀은 5분 기록 보드를 활용하여 진행상황을 활발히 공유하였으며, 매일 정규 스크럼 시간 외에도 적극적인 소통으로 프로젝트를 수행하였습니다.

 

7. 자랑스러운 코드

1. 평점 평균 계산 (scoreAverage 함수): 각 리뷰에서 score_outside, score_inside, score_traffic, score_crime 네 가지 항목의 점수를 합산하고, 그 점수를 평균 내는 방식으로 계산
2. 리뷰 정렬 (sortedReviews 함수): sortOrder 값에 따라 리뷰를 최신순 또는 별점 높은 순으로 정렬하고 최신순일 경우, created_at 속성을 기준으로 정렬 (날짜를 비교), 별점 높은 순일 경우, 각 리뷰의 평균 평점을 계산해 비교하여 정렬함
   • 가독성 높은 평점 계산: scoreAverage 함수는 리뷰의 네 가지 평가 항목을 배열로 묶어 reduce를 활용해 점수를 간단하고 명확하게 계산. 이를 통해 다양한 항목의 점수를 쉽게 합산하고 평균화하는 과정을 깔끔하게 구현
   • 유연한 정렬 로직:sortedReviews 함수는 최신순과 별점순 정렬을 모두 지원, 리뷰 목록을 동적으로 정렬할 수 있게 설계. 특히 배열을 복사한 후 정렬하여 원본 리뷰 배열을 안전하게 보호함
   • 재사용성 높은 함수 구조:scoreAverage 함수는 각 리뷰의 평균 점수를 구하는 핵심 로직을 다른 곳에서도 재사용 가능하도록 설계, 코드의 유지보수성을 높임

// 평점 평균 점수 계산 함수
  const scoreAverage = (review: Review) => {
    const scores = [review.score_outside, review.score_inside, review.score_traffic, review.score_crime];
    const totalScore = scores.reduce((sum, score) => sum + score, 0);
    const averageScore = totalScore / scores.length / 2; // 5점 만점으로 변환
    return averageScore;
  };

 // 리뷰 정렬 함수
  const sortedReviews = () => {
    return [...reviews].sort((a, b) => {
      if (sortOrder === "latest") {
        return new Date(b.created_at).getTime() - new Date(a.created_at).getTime(); // 최신순
      } else {
        return scoreAverage(b) - scoreAverage(a); // 별점 높은순
      }
    });
  };

 

8. 팀 프로젝트를 진행하며 각자 느낀 점

9. 개인 KPT 회고

Keep - 현재 만족하고 있는 부분

• Supabase에서 로그인한 사용자가 작성한 리뷰만 불러오는 기능을 잘 구현했다.
• 리뷰 카드 컴포넌트를 분리하여 메인페이지와 마이페이지 등 여러 페이지에서 재사용이 가능하도록 했다.
• 메인페이지에서 보여지는 리뷰 카드에서는 수정/삭제가 불필요함으로 조건부처리하여 숨기도록 하였다.

Problem - 불편하게 느끼는 부분

• GitHub 충돌 문제: GitHub을 사용하면서 병합 충돌(Merge Conflict) 문제가 몇 번 발생했습니다. 팀원들이 동시에 여러 파일을 수정하다 보니 충돌을 해결하는 데 추가적인 시간이 소요되었고, 그 과정에서 코드가 꼬이는 문제가 있었습니다.
• ReviewCard 컴포넌트 조건부 삭제 버튼 처리 문제: ReviewCard 컴포넌트를 여러 페이지에서 공유하여 사용했는데, 일부 페이지에서는 삭제 버튼이 필요 없어서 조건부로 버튼을 숨겼습니다. 그러나 삭제 로직 자체를 제거하지 않아 오류가 발생했고, 그 부분을 해결하는 데 어려움을 겪었습니다. 삭제 버튼이 보이지 않도록 처리했지만, 여전히 삭제 함수가 정의되어 있어서 이 부분이 불필요한 코드로 남아 오류를 유발했습니다.

Try - Problem에 대한 해결책, 당장 실행 가능한 것

• Git 규칙 개선: 충돌을 줄이기 위해 Git 브랜치 전략을 좀 더 체계적으로 세워야 할 것 같습니다. 예를 들어, 기능별로 브랜치를 나누고, 병합할 때는 항상 코드 리뷰와 병합 순서를 명확히 하는 방법을 사용할 수 있을 것 같습니다.
• ReviewCard 문제 해결: 조건부로 삭제 버튼을 숨기는 방식뿐만 아니라, 해당 페이지에서 불필요한 삭제 로직 자체도 제거할 수 있도록 컴포넌트 구조를 개선해야 할 것 같습니다. showActions 여부에 따라 삭제 함수를 호출하지 않도록 리팩토링하는 방법을 고려할 수 있습니다.