작업 내용

• [x] 구글 애널리틱스 추가

관련 이슈

1) 테스트 관련

테스트는 배포 이후에 확인해보겠습니다!

2) 카카오 스크립트 관련

next/script를 이용해서 개발자들이 third-party 스크립트들의 로딩 우선순위를 설정할 수 있어 로딩 성능을 향상시킬 수 있다. next/Head를 _document.js에서만 사용할 수 있다면, next/Script는 _app.js에서만 위치시킬 수 있다.

위와 같은 내용이 있어서 _document.tsx에 있는 카카오 script도 _app.tsx에 빼는 것이 좋을 것 같습니다!
다른 분들의 의견이 궁금하여 아직 수정하진 않았으니 공유 부탁드려요~

참고 자료 (option)

1. next.js + JavaScript + google analytics 2. next.js + TypeScript + google analytics 3. next.js에서 작성한 구글 애널리틱스 코드 예제

작업 내용

• [x] layout background 정적 리소스 d463b127bf0bcf688d698cb36622d7af83904770
• [x] 카카오 공유하기, 덕담 생성 로직 분리 - Custom hook으로 이관
• [x] 미사용 코드 제거
• [x] 미사용 이미지 파일 제거

관련 이슈

1. 카카오 공유하기 cdn script 위치 상의 필요

기존 코드 유지! 한 번 로드된 script는 캐싱되어 다른 페이지에서 다시 불러오지 않습니다.

2. MetaHead 컴포넌트 분리

https://nextjs.org/docs/api-reference/next/head

7654ba5061749e558c484e4b9268121c3a66c057 key 값을 다르게 하면 가장 아래에 있는 Head의 내용이 적용되므로 공통 컴포넌트로 사용을 하며 변동이 필요한 페이지에선 key 값을 다르게 주어 사용합니다.

3. firebase url 상수처리

2afbf14d2ca04db0fe3b97d0ef5bd1e25927956a storage URL의 경우 공개되어도 상관없기에 constant 폴더에서 관리하도록 수정하였습니다.

4. 매직넘버 상수화

스토리북 진행하며 스타일 관련 매직넘버 상수화 진행 예정입니다.

5. 이미지 최적화

내일 회의하기전에 같이 짚고 넘어가면 하는 부분들이 있어서 일부 수정했어요. :)

작업 내용

• firebase 환경 세팅
• 덕담 조회 / 추가 API 추가

API 파라미터나 Path 같은 내용은 이슈를 참고해주세요! .env 파일의 경우 팀 노션에 올려놓았습니다.

관련 이슈

#8

참고 자료 (option)

조회 API: https://firebase.google.com/docs/firestore/query-data/get-data 추가 API: https://firebase.google.com/docs/firestore/manage-data/add-data

환경변수 변경 필요한 작업입니다 :0

환경변수는 팀 노션에 작성해두었으니 참고 부탁드려요!

작업 내용

• [x] http 상태 코드, request method 상수화
• [x] 외부 스크립트 컴포넌트 추가
  • google analytics, kakao를 외부 컴포넌트로 분리하였습니다.
  • kakao에서 isInitialized() 메소드를 지원하여 기존 Kakao로 조건 체크하던 부분을 수정했습니다.
• [x] node 환경에서만 렌더링되는 환경변수 네이밍을 사용하여 환경변수명 수정
  • 자세한 내용은 공식문서 정리본에서 확인하실 수 있습니다!
• [x] 절대 경로 형식 변경
  • @components로 폴더마다 하나씩 추가하는 것보다 절대경로를 명시하는 @ 아래의 components 폴더로 표현하는 것이 좋을 것 같아 수정하였습니다.
• [x] 테마 변경
  • 기존 light/dark 테마를 지원하기 위해 불필요한 코드가 존재하여 테마 형식을 변경하였습니다.
  • 테마 색을 명시하는 것이 좋을까, 테마가 사용되는 곳을 명시하는 것이 좋을까 고민하다 후자를 선택했습니다.
• [x] Button 공통 컴포넌트 Props 변경
  • 타입에 children이 있는 것보다 PropsWithChildren로 children에 props가 추가된다는 것을 명시하는 것이 더 보기 편해 변경하였습니다.
  • 공통 컴포넌트라서 확장될 가능성이 다분하다 생각이 들어 ButtonHTMLAttributes라는 타입을 사용하여 기존 button이 갖는 타입들을 가져왔습니다.

관련 이슈

• lint는 문제가 없는 것 같은데 vercel deploy가 실패되는 이유가 뭔지 궁금합니다!

작업 내용

• [x] 루트에 있는 utils shared 내부로 이관 5adc63723a825d463e9d4065f18667f2cf3c01c4
• [x] 미사용 코드 제거 399eb1a4fdc26c9bbda7277ce497bad71c25c689
• [x] data fetch 호출 시점 개선 784ee8e0ab5a15d00edcb16ee166e387f2e3af42
• [x] import lint conflict 수정 f4b1a29277e194d353cd325f07bcc8e311925867

PR 올린 상태로 추가 작업 진행 중

이후 작업 필요한 내용

1. 타입 정의 정리 참고자료: https://react-typescript-cheatsheet.netlify.app/docs/basic/setup
2. keyframe 관련 정의
3. 다크모드 작업 이후 colors 상수 정리

작업 내용

전체적으로 퍼블리싱 관련 작업 진행했습니다.

1. 디자인 svg 아이콘 적용 70a458103116014609c78a625eff72b45c043318
2. custom input 수정 4a8239945c67e9e3e0c8704d65661ca444414596
3. 로고 아이콘 props keyframe 추가 f4049900160e7760b325ce425dcbe535887b3a87
4. 예의 페이지 Message 수정 ccd389fcb1206e1beffa3559078e6e83e15d257d

관련 이슈

1. 그림자 스타일 상수 추가

• https://github.com/FECrash/here-your-duckdam/pull/28#discussion_r966438625

2. 타입 일부 리팩토링 진행 2e4d4b657e943e717cc30ebc94c76af1d18b3d46 , 91a87da90e7518da48ea5c6c1a62c8908f1a0aa4

참고 자료 (option)

작업 내용

• [x] 랜덤 메시지 생성 시점 수정
  • 랜덤 덕담 생성 시점 예의도 결정 페이지로 이관
  • 커스텀 덕담 추가 기능 감안하여 분리
• [x] 로딩 페이지에서 화면 이동 이후에도 라우팅 콜백 실행되는 버그
  • setTimeout 콜백 이벤트 발생 전, 라우팅 이동시 이벤트 제거

관련 이슈

Close #57

작업 내용

• fetch -> axios 로 변경 작업하였습니다.
• 수정 전 fetch 코드에서도 아래와 같은 에러가 나서 정상 작동하는지 확인을 못했습니다. @firebase/firestore: Firestore (9.9.4): Connection GRPC stream error. Code: 3 Message: 3 INVALID_ARGUMENT: Invalid resource field value in the request.
• 기존 코드는 혹시 몰라 주석처리로 남겨두었습니다.
• 변경된 코드와 해당 에러 부분 한 번 확인해 주시면 감사하겠습니다!

관련 이슈

#56

• 참고 자료 (option)

작업 내용

이미지 관련 light house 진단내역 수정

1. image 태그 `layout="fixed" 속성 할당
2. network payload 관련 minify 용으로 수정 db094830eee4429d463892ce3dd6ee018fbf2274, 9e1b40fe0042cf21d012d07332e1cfe72b2d8d88
3. (기타) 로딩 레이아웃 배경 오류 수정 및 리팩토링 b53220ea6084c590e41c66283c3beb961fbc5770

관련 이슈

Close #48

참고 자료 (option)

메인이미지 png 사용한 이유 https://repairit.wondershare.com/photo-repair/png-jpg-jpeg.html

Next.js 이미지 태그 CLS 개선을 위한 위치 잡는 방식 https://nextjs.org/docs/api-reference/next/image

작업 내용

• 로딩창 배경화면 지정으로 생기던 레이아웃 오류 수정

관련 이슈

참고 자료 (option)

https://user-images.githubusercontent.com/48716298/189467021-e802d195-fcf3-4f52-9eb7-4f0d42aed752.mov

작업 내용

• 메타태그 og:image 매핑 오류 수정 262370f03e644dbd136e9127a444e208a2b60e70
  • 빈 스트링 변수에 default parameter 값이 할당되지 않는 오류
• 트위터 관련 메타태그 추가

참고 자료 (option)

• 트위터 og태그 https://developer.twitter.com/en/docs/twitter-for-websites/cards/guides/getting-started

작업 내용

새로 추가된 페이지들 Link 연결

👉 기존 load 페이지에서 secret 페이지로 넘어가는 과정에서 firebase 공부가 필요할 것 같아 진행중입니다! 👉 [기능 구현] -> [UI] 순서로 작업할 예정입니다!

관련 이슈

참고 자료 (option)