[우테코] 25편 : 오픈미션 19일차

| 서론

안녕하세요 팡일입니다!

오늘은 우아한테크코스 8기 프리코스의 오픈미션 19일차 포스팅입니다. 오늘은 진행한 점들에 대해서 기록하고 공유하려고 합니다!

| 오늘 한 일

1) 기타

• 미리보기 (OG) 개선하기

• 도메인 구입하고 배포하기

• 피드백을 받을 수 있는 통로 만들기

2) 리스트 페이지

• 카테고리 별 필터 추가하기

• 회고 글 특정 개수만 불러올 수 있는 기능 추가하기

• 더 불러오기 기능 추가하기

3) 공유 페이지

• 로그인한 상태에 대한 header, Options 개선하기

4) 관리자 페이지

• 피드백 받은 사항 볼 수 있는 창구 만들기

5) 오픈미션

• 제출물 정리하기

| 어려웠던 점 & 배운 점

1) 안정성을 우선한 페이지네이션 구현: 무한 스크롤에서 ‘더 불러오기’ 버튼으로

(1) 어려웠던 점

: Firestore의 커서 기반 페이지네이션에 IntersectionObserver를 결합해 무한 스크롤을 구현하는 과정은 예상보다 훨씬 복잡했습니다. 스크롤 타이밍을 정확히 잡지 못해 Observer가 여러 번 호출되고, 그로 인해 동일한 데이터를 반복해서 불러오는 문제가 발생했습니다. 빠르게 스크롤하면 호출이 겹치면서 데이터 정합성까지 흐트러졌고, 사용자 경험 역시 좋아지지 않았습니다.

(2) 배운 점

이 문제를 해결하기 위해 완벽한 무한 스크롤을 고집하기보다, 안정적인 사용자 경험을 제공하는 방식으로 방향을 전환했습니다. 결국 명시적인 ‘더 불러오기’ 버튼을 도입했는데, Firestore의 lastVisible 커서를 버튼 클릭 이벤트와 연결하니 데이터 로딩 흐름이 확실히 명료해졌습니다. 사용자가 언제 데이터를 더 가져오는지 명확히 알 수 있고, 개발자 입장에서도 상태 관리가 훨씬 안정적으로 정리됐습니다. 이 페이지네이션 로직을 listStore와 retrospectService에 통합하며, 데이터 흐름이 이전보다 탄탄하게 정리됐다는 점이 큰 수확이었습니다.

2) 하나의 컴포넌트로 두 역할을: 피드백 모달의 재사용성 극대화

(1) 어려웠던 점

: 피드백 기능을 구현할 때 처음에는 제출용 모달과 관리자 조회용 모달을 따로 만들까 고민했습니다. 하지만 UI 구조가 지나치게 유사해 두 개를 따로 유지하면 코드 중복이 심해질 것이 분명했습니다. 결국 하나의 FeedbackModal 컴포넌트 안에서 ‘작성 모드(write)’와 ‘조회 모드(view)’를 모두 처리하는 방향으로 설계를 바꿨습니다.

(2) 배운 점

물론 이 과정도 쉽지 않았습니다. 모드에 따라 입력 필드의 활성/비활성 여부, 버튼 렌더링, 제출 로직 등 서로 다른 동작을 유연하게 분기해야 했기 때문입니다. 하지만 mode라는 상태 개념을 도입하고, feedbackModalStore를 통해 모달의 열림/닫힘뿐 아니라 현재 모드를 전역적으로 관리하도록 설계하자 전체 구조가 깔끔하게 정리되었습니다. 하나의 모달 컴포넌트가 상황에 따라 역할을 바꿔 수행하게 되면서, 중복된 UI를 제거하고 유지보수성까지 높이는 결과로 이어졌습니다. 하나의 컴포넌트가 상태를 기반으로 여러 역할을 수행하는 패턴의 중요성을 다시 한 번 체감한 작업이었습니다.

3) 인증 상태에 따라 달라지는 페이지 접근: 유연한 라우팅 설계

(1) 어려웠던 점

: 인증 기반 페이지 접근 제어를 구현하면서 가장 어려웠던 점은 “언제나 예외는 존재한다”는 사실이었습니다. 예를 들어 로그인한 사용자가 login이나 signup 같은 public 페이지에 접근하면 /list로 리다이렉트하는 것이 자연스럽지만, 공유 페이지(/share/[id])만큼은 로그인 여부와 관계없이 누구나 접근할 수 있어야 했습니다. 게다가 같은 공유 페이지라도 사용자 상태에 따라 UI가 달라져야 했습니다. 예를 들어 비로그인 사용자는 ‘로그인하기’ 버튼을, 로그인 사용자는 ‘목록으로 돌아가기’ 버튼을 봐야 합니다. 이런 예외 케이스를 모두 안정적으로 처리하는 구조가 필요했습니다.

(2) 배운 점

이 문제를 해결한 핵심 요소는 SvelteKit의 +layout.ts였습니다. public 그룹의 최상위 +layout.ts에서 인증 상태를 확인하고, share 페이지가 아닌 경우에만 리다이렉트하는 구조를 적용하자 복잡한 정책도 깔끔하게 정리되었습니다. 또한 공유 페이지 내부에서는 $userStore를 구독하여 인증 여부에 따라 버튼이나 헤더 같은 UI를 조건부로 렌더링함으로써, 라우팅 가드와 UI 상태 관리를 자연스럽게 결합할 수 있었습니다. 이 경험을 통해 인증 기반 페이지 구조를 더 탄탄하게 설계하는 법을 배웠습니다.

| 내일 목표

1) 기타

• v2.0.0에 들어갈 기능 정리하기

2) 오픈미션

• 최종 회고 작성하기 (티스토리)

• 기술 블로그 작성 글들 썸네일 정리하기

• 최종 제출용 Notion 제작하기

• 제출용 소감문 작성하기

| 한 줄 회고

: "오픈미션은 끝나가지만, v2는 날 기다리고 있다"