🧰 작업 사항

본격적인 테스트 런칭을 위해 현재까지 작업한 내용을 기반으로 development와 main(production) 브랜치를 기반으로 한 페이지 배포 작업을 진행합니다.

사이트 배포는 기존 Vercel이 아닌 학습을 위해서라도 AWS와 Github Action을 통해 진행합니다.

🔍 예상 결과

• 이제 개발 브랜치, 메인 브랜치 각각의 사이트를 경험할 수 있습니다.
• Github Action을 통한 배포 작업이 가능해집니다.

✅ 태스크 체크리스트

• AWS EC2 생성
• nginx 적용
• 사이트 배포 시도
• Github Action 적용
• 자동 배포 시도

🔖 노트

🧰 작업 사항

현재까지 진행했던 Vite + React CLI에서 Next.js로 마이그레이션 작업을 진행합니다.
마이그레이션을 진행하게 된 사유는 다음과 같습니다.

1. SEO 최적화
   • 프로젝트 특성 상, 템플릿 공유 기능 등이 필요하기 때문에 metadata 등 SEO나 접근성 처리가 반드시 필요합니다.
   • 이런 부분을 고려해 metadata 등의 내용을 원활하게 반영할 수 있는 Next.js가 현 상황에서 더 적합하다고 판단했습니다.
2. 정적 컴포넌트 활용
   • UI만 그려낼 컴포넌트와 아닌 컴포넌트를 분리하여 구현하는 것으로 페이지 초기 로딩 시간 최소화 등의 성능 최적화를 고려해 적용해보기로 결정했습니다.

아울러, 스타일링 라이브러리를 styled-components에서 Tailwind CSS로 전환합니다.

1. 정적 스타일링과 제로 런타임
   • 빌드 시에 스타일링 코드들을 css로 전환해준다는 점에서, 런타임이 발생하지 않으므로 성능 향상을 기대할 수 있습니다.
2. 디자인 토큰의 유용성
   • 프로젝트의 디자인에 맞춘 커스텀 디자인을 토큰화해서 편하게 관리할 수 있다는 장점이 있습니다.

이 두 사항을 고려해 Tailwind CSS로 전환하고자 합니다.

🔍 예상 결과

• 현재의 프로젝트에서 Vite와 React로 구현되던 방식이 Next.js로 대체됩니다.
• Next.js로 변경함에 따라 전반적인 폴더 구조가 변경됩니다.
• Tailwind CSS로 마이그레이션을 진행하면서 스타일링 방식이 변경됩니다.
• API 로직, 핸들링 로직, 컴포넌트 분리 등 코드 구현 사항들이 리펙토링에 맞춰 새롭게 반영됩니다.

✅ 태스크 체크리스트

• Vite 제거
• React-Router 패키지 제거
• styled-components 패키지 제거
• Next.js 설치
• Next.js에 맞춘 폴더 구조 재정립
• 일부 공용 컴포넌트의 리펙토링 진행 (Input 등)
• API 로직 분리화
• 페이지별 hook 함수와 핸들링 함수 분리
• 페이지별 UI 마이그레이션 진행

🔖 노트

Migrating from Vite

🧰 태스크 설명

로그인 후, 유저가 진입하게 되는 메인 페이지의 화면을 구현합니다.

🔍 예상 결과

• 로그인 후, 유저가 메인 페이지의 기능들을 이용할 수 있게 됩니다.

✅ 태스크 체크리스트

• 사이드바 구현
• 헤더 영역 생성
• 스크롤 시, 헤더 영역 변환
• 여행 리스트 티켓 생성
• 무한 스크롤 처리
• 검색 기능 구현

🔖 참고 사항

• 피그마 링크

🧰 작업 사항

공지사항이나 회원 탈퇴, 유저 정보 수정 등을 관리할 설정 페이지를 제작합니다.

현재 유저 정보 수정은 들어가지 않으며, 공지사항과 회원 탈퇴 위주로만 추가합니다.

🔍 예상 결과

• 사이드바에 설정 메뉴를 누르면 설정 페이지로 진입할 수 있게 됩니다.
• 유저가 원할 경우 회원 탈퇴를 진행할 수 있습니다.

✅ 태스크 체크리스트

🔖 노트

##🧰 작업 사항

메인 페이지까지 구현된 이후, 마이그레이션 진행 전에 반영해야 할 사항들을 해당 태스크를 통해 관리합니다.

##🔍 예상 결과

아래 체크리스트에 나열된 항목들이 수정되어 반영됩니다.

##✅ 태스크 체크리스트

• 공용: 토큰 만료 시에 웰컴 페이지로 돌려보낼 모달 추가
• 공용: 헤더가 특정 스크롤 위치 도달 시, shadow 필터가 들어가도록 수정
• 로그인 : 자동 로그인 기능 추가 및 체크박스 추가
• 회원가입: 닉네임란 추가, 영어 및 숫자로만 2~14글자로 제한
• 회원가입: 비밀번호 입력 시, 비밀번호 확인란에 아직 기입되지 않았는데 유효성 검사 적용되는 이슈 수정
• 회원가입: 회원가입 완료 시, 유저 데이터를 users 컬렉션에 저장
• 여행 정보 등록: 출발 일수를 카운터로 변경, 버튼 홀드 기능 구현 가능한지 시도해보기
  • 당장 홀드 기능이 꼭 필요하진 않으므로 일단 보류, 추후 기능 구현 방식 연구해볼 것
• 여행 정보 등록: 단계별 변화에 따라 내용 컴포넌트가 fade-in-out으로 가려졌다 나타나도록 적용
• 메인: 데이터 받는 동안의 로더 컴포넌트 배치
  • Next.JS로 마이그레이션 이후 Suspense 적용
• 메인: 유저 닉네임이 메인 헤더에 출력될 수 있도록 반영
• 메인: 최근 열었던 항목을 user 정보에서 찾아서 나타낼 수 있도록 적용

##🔖 노트

🧰 작업 사항

생성한 준비물 리스트를 체크할 수 있도록 하는 준비물 체크 페이지 구현 작업을 진행합니다.

🔍 예상 결과

• 작업 완료 후, 메인 페이지나 검색 페이지에서 내가 만든 여행 준비물 리스트를 확인할 수 있습니다.
• 유저가 원할 경우, 각 준비물을 클릭하는 것으로 준비물을 챙겼는지 체크할 수 있습니다.
• 화면 상단의 편집 버튼을 통해서, 여행 준비물을 편집할 수 있는 화면으로 이동할 수 있게 됩니다.

✅ 태스크 체크리스트

• 생성됐던 준비물 리스트를 리스트에 구현
• 각 준비물 체크 동작 처리
• 카테고리 누를 시, 드롭다운 처리 될 수 있도록 구현
• 화면 상단 헤더에 편집 및 공유 버튼 추가

🔖 노트

• 공유 기능은 템플릿 생성 & OG 이미지 작업도 같이 병행해야 하므로 템플릿 일감에서 별도로 관리합니다.

🧰 작업 사항

여행 데이터 생성 후, 여행 준비물을 작성 및 향후 수정하는 페이지를 제작합니다.

🔍 예상 결과

• 여행 데이터 생성 후, 여행 준비물 생성 페이지로 진입하게 됩니다.
• 템플릿 선택 여부에 따라 여행 준비물 생성 페이지에서 여행 준비물이 바로 반영됩니다.
• 작성중인 내용을 저장하면 지금까지 생성한 준비물 데이터가 저장됩니다.
• 작성 중이던 내용이 지워지지 않도록 임시 저장 기능이 추가됩니다. (최근 작성 데이터만 가능)

✅ 태스크 체크리스트

• 공용 체크리스트 컴포넌트 제작
• 공용 카테고리 컴포넌트 제작
• 공용 바텀시트 제작
• 카테고리 내 컴포넌트 색상 변경 기능 추가
• 여행 데이터가 헤더에 반영되도록 적용
• 템플릿 등 생성한 준비물 및 카테고리가 리스트에 반영되도록 적용

🔖 노트

##🧰 작업 사항

잘못된 경로로 진입 시, 관련 사항을 안내하고 메인 페이지로 돌려보내는 404 페이지를 구현합니다.

##🔍 예상 결과

• 잘못된 경로에 진입 시, 404 페이지가 출력됩니다.
• 페이지 내 버튼을 누르면 메인 페이지로 돌아갑니다.
• 메인 페이지 진입 시, 로그인된 상태가 아니라면 웰컴 페이지로 이전합니다.

##✅ 태스크 체크리스트

• 404 페이지 안내 이미지 추가
• 404 페이지 컴포넌트 제작
• 페이지 내 이전 페이지로 돌아가기 버튼 추가

##🔖 노트

🧰 작업 사항

해당 이슈는 마이그레이션 및 리펙토링으로 인해 놓쳤던 코드 컨벤션을 정리하고, 컨벤션이 잘못된 코드들을 정리하기 위한 이슈입니다.

🔍 예상 결과

• 코드 컨벤션의 문서가 업데이트 됩니다.
• 업데이트된 내용에 따라 전반적인 코드 내용들이 수정됩니다.
• ESLint 및 Pritter, tsconfig 등에 컨벤션과 관련한 규칙들이 추가됩니다.

✅ 태스크 체크리스트

🔖 노트

🧰 태스크 설명

첫 index 페이지를 진입 시에 유저가 보게되는 웰컴 페이지를 구현합니다.

🔍 예상 결과

• index 페이지를 진입 시, 웰컴 페이지를 볼 수 있습니다.
• 유저의 선호에 따라 구글 로그인을 연동할지, 이메일 계정으로 로그인하거나 회원가입할 지를 선택할 수 있습니다.

✅ 태스크 체크리스트

• 구글 로그인 연동
• 이메일 계정 버튼 누를 시 로그인 페이지로 이동

🔖 참고 사항

• 피그마 링크

🧰 작업 사항

본 이슈는 마이그레이션 후의 Lighthouse 지표에서 좀 더 성능을 향상시키기 위해 최적화를 진행하는 내용을 관리합니다.
우선적으로 계정 정보랑 데이터를 많이 받아오는 메인 페이지 만을 대상으로 진행합니다.

🔍 예상 결과

Lighthouse 내 FCP, LCP 등의 지표가 상승합니다.

✅ 태스크 체크리스트

• Bundle Analyzer 설치
• Next 빌드 후 번들 크기 확인
• Firestore 번들 크기 최적화
• 로더 화면 배치 최적화
• Tailwind 번들 최적화

🔖 노트

🧰 작업 사항

로그인 화면에 Google과 Apple 계정으로 로그인하는 기능을 추가하는 작업을 진행합니다.

🔍 예상 결과

이제 구글과 애플 로그인을 통해서 본 서비스를 이용할 수 있게 됩니다.

• 구글과 애플 로그인은 계속해서 자동 로그인이 적용되도록 처리될 예정입니다.

✅ 태스크 체크리스트

• Google 로그인 연동
• Apple 로그인 연동
• 자동 로그인 처리
• 이미 로그인되어 있을 시, login 화면에서 main으로 넘어가도록 처리

🔖 노트

🧰 작업 사항

유저가 로그인 후 보는 메인 페이지의 디자인 개편 작업을 진행합니다.

• 메인 헤더의 크기가 줄어들고, 인삿말이 사이드바로 이동됩니다.
• 화면에 뉴스나 이벤트, 프로모션, 공지사항 등을 안내하는 스와이퍼가 추가됩니다.
• 그 외의 항목은 추후 디자인 수정을 통해서 계속해서 변경하고 반영될 예정입니다.

🔍 예상 결과

• 메인 페이지의 디자인이 개편됩니다.

✅ 태스크 체크리스트

🔖 노트

🧰 작업 사항

이용자가 자신의 여행 준비물 리스트를 공유하거나, 타인의 여행 준비물 리스트를 확인하고 가져올 수 있도록 하는 템플릿 페이지 작업을 진행합니다.

아울러, 여행 준비물 페이지에서 공유 기능을 통해 템플릿 생성 기능이 적용되도록 합니다.

또한, 템플릿 페이지의 경우 외부 노출이 중요하므로 해당 페이지에서의 SEO 처리가 최대한 적용될 수 있도록 적용합니다.

🔍 예상 결과

• 여행 준비물 페이지에서 공유 기능을 이용할 수 있습니다. (클립보드 혹은 공유 API)
• 템플릿 페이지를 통해 내가 만든 여행 준비물 리스트를 보거나 타인이 만든 여행 준비물 리스트를 보고, 복사해서 사용할 수 있게 됩니다.
• 다른 사람들에게 여행 준비물 페이지를 공유하고, 공유할 때 OpenGraph 이미지가 적용됩니다.

✅ 태스크 체크리스트

🔖 노트

##🧰 작업 사항

1차 점검 후, 현재까지 적업된 플로우를 전체적으로 진행해보고 마이그레이션 전까지 수정이 필요한 사항들을 관리합니다.

##🔍 예상 결과

아래의 태스크 체크리스트에서 발생하고 있는 사항들이 해결되거나 적용됩니다.

##✅ 태스크 체크리스트

• 공용: 회원가입, 비밀번호 변경에서만 Input 내 마킹 표시가 출력되도록 한다.
• 로그인: 자동 로그인 버튼 너비가 너무 크다.
• 회원가입: 비밀번호 재확인에 검증 완료가 됐음에도 체크 표시가 뜨지 않는다.
• 공용: 버튼이 여러번 눌러지는 버블링이 발생하지 않도록 방지한다.
• 로그인: 본인 인증이 진행되지 않은 계정을 로그인 할 시, 팝업 출력 및 본인 인증 페이지로 이동해 절차를 진행하도록 한다.
• 본인 인증: 이메일 링크 표시에 lang=ko 가능한지 확인해보도록 하자.
• 인증 완료: 컴포넌트 내용이 이미지까지 다 로딩된 후에 뜨면 좋겠다. (Suspense?)
  └ 현재 assets에 있는 이미지는 Promise로 연결하든 해서 처리해야하므로 어려움.
  우선 기존 사항 유지하고, 이미지 높이만큼의 배경 높이를 잡도록 할 것.
• 공용: 사이드바가 열려있을 때는 화면 스크롤이 발생하지 않도록 한다.
• 메인: 검색에서 결과물 없을 때에 검색한 내용이 없다는 걸 알려주는 컴포넌트를 추가한다.
• 여행 등록: 여행 정보 입력의 출발 일자에서 placeholder를 ----.--.--. 표시로 변경할 수 있는지 확인해보자.
  └ 브라우저별로 기본 설정이 어떻게 되냐에 따라 placeholder의 포맷이 결정되고, 자동으로 강제되므로 수정하기 어렵다.
  현재값 우선은 그대로 유지하고, 추후 여유가 된다면 자체 캘린더를 만들어보기로 함.
• 여행 등록: 여행 정보 확인 부분에서 출발 일자 표기에 '일' 이 누락되어있다.
• 여행 등록: 컴포넌트 전환 애니메이션 길이를 줄인다. (0.5s)
• 여행 등록: 여행 정보 데이터 생성 후, 뒤로 가기를 누르면 step 처음으로 돌아가도록 변경한다.
• 메인: 헤더나 여행 정보가 하나도 없을 때 노출되는 처음 생성 버튼을 누르면 수정 전 경로로 진입한다.
• 여행 등록: step 2에서 입력한 데이터를 step 1로 돌아갔다가 다시 진입 시, 입력한 정보가 남아있다.
• 여행 등록: 여행 리스트가 생성되면 유저의 DB 내 최근 여행 정보에 생성된 여행 정보가 반영되도록 한다.
• 메인: 새로고침 시, 유저의 닉네임이 undefined로 출력된다.
  • 단, 새로고침할 시 유저 정보 받아올 때까지 undefined로 받아오는 사항이 있어 수정이 필요함.
• 메인: 유저 정보가 없거나 받아지는 동안 화면에 로더가 노출되어야 한다.
• 메인: 검색 시 UI 배치가 깨진다.
• 비밀번호 찾기: 가입된 이메일이 없을 경우, 안내가 뜨지 않고 이메일이 전송되는 상태로 넘어간다.
  • 확인 결과, SDK 모듈에서 보안 취약성을 고려해 에러 코드를 반환해주지 않도록 한 듯 하다. (아래 노트 이슈 참고)
  • 대신하여, 이메일이 안 왔을 경우 다시 한 번 이메일을 입력해서 재시도해보라고 안내하도록 내용을 변경했다.
• 비밀번호 변경: 비밀번호 변경 버튼과 Input 사이의 gap이 다른 페이지와 다르다.
• 비밀번호 변경: 로그인 화면으로 이동 버튼의 경로가 수정 전 경로로 되어 있다.
• 비밀번호 변경: 간헐적으로 에러 메시지 모달이 출력된다. (내용 확인 필요)
  └ 재현되지 않아 우선은 현재 사항 그대로 유지한다.

##🔖 노트

Firebase 인증 인스턴스의 언어 코드를 업데이트하는 방법
sendPasswordResetEmail is not throwing error if user does not exist #7651