💪프로젝트에서 진행한 혹은 진행 예정인 일은 무엇인가요?

한 일

• 레이아웃의 좌측 쏠림 현상 해결
  • 기존에는 #root에 width만 설정되어 있어 가운데 정렬이 되지 않았음
  • #root { width: 1600px; margin: 0 auto; }로 수정하여 가운데 정렬 적용
• 검색 기능 추가
  • SearchResults.tsx 컴포넌트 작성
  • useSearchParams()를 활용한 쿼리 파싱
  • Firestore에서 100개 불러온 후 클라이언트 사이드 필터링
• 비로그인 사용자 접근 제한 및 권한 분리
  • 홈, 투표 상세 페이지는 누구나 접근 가능
  • 비로그인 사용자는 투표 및 댓글 기능 불가
  • 로그인 시에만 투표하기, 댓글 작성, 투표 생성/삭제 가능
• 정렬 기능 개선 (최신순 / 인기순)
  • 서버 fetch 최소화
  • useEffect 최적화 → 정렬 기준 변경 시 클라이언트 정렬만 수행
  • sortBy, sortOrder 상태 관리 추가
• 페이지네이션 기능 구현
  • Firestore getCountFromServer()로 전체 투표 수 계산
  • 페이지별 문서 포인터(pageDocs) 관리
• 투표 생성 기능 개선
  • console.log(docRef.id) 삭제 → 유저 ID 유출 방지
  • 마감일 유효성 검사 추가 → 1년 이내 날짜만 허용
• firebase로 배포하기

개선할 점

• 마이페이지에 “내가 쓴 댓글” 기능 추가
• 댓글 삭제 기능 추가
• 투표 리스트 정렬 기능 UI 개선

💪이번 주 트러블 슈팅

<aside> 💡 슬랙을 통해 멘토님께 한 주간 물어봤던 문제 혹은 해결 중이거나, 아직 해결되지 않은 문제들을 정리해주세요!

</aside>

문제에 대한 한줄 요약

• Problem - 비로그인 사용자가 접근할 수 없는 페이지들이 있었고, 로그인 여부와 상관없이 접근 가능해야 할 페이지에서도 기능 제한만 걸면 되는 상황인데 전체 차단되는 문제가 있었다.
• Reason - ProtectedRoute로 모든 페이지 접근을 막고 있어서, 단순히 읽기만 가능한 페이지조차 로그인 상태에서만 접근 가능하도록 잘못 설정돼 있었다.
• Try to solve
  • 페이지별로 권한을 세분화하여 리팩토링
    • /vote/:id 페이지는 비로그인도 조회 가능하지만 투표/댓글 기능은 비활성화
    • /mypage, /create-vote는 로그인한 사용자만 접근 가능하도록 ProtectedRoute 유지
  • 컴포넌트 내에서 currentUser 여부에 따라 버튼, 입력창, 기능 표시 조건부 처리

이번 한 주는 이랬어요!

이번 주는 실제 서비스에서 사용자의 다양한 상황을 고려한 접근 권한 분리와 검색기능 및 댓글기능 추가, 마지막으로 전체 앱의 UI/UX 개선 후 배포에 집중한 한 주였습니다.

• 비로그인 사용자의 접근 권한 처리를 통해, 누구나 고민 투표를 읽을 수 있도록 하되,

  투표하거나 댓글을 작성하려면 로그인하도록 기능적으로 분리했습니다.

• 정렬 기능 클라이언트 최적화, 페이지네이션 도입,

  투표 생성 시 민감한 데이터 노출 제거 등 서비스의 완성도와 안정성을 높이는 데 집중했습니다.

• 또한, 마감일 유효성 검사 강화 및 레이아웃 정렬 수정까지 적용하며

  서비스 전반의 디테일을 다듬는 작업에 집중한 주간이었습니다.