Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[FE] 1.0.0 배포 #528

Merged
merged 17 commits into from
Sep 30, 2023
Merged

[FE] 1.0.0 배포 #528

merged 17 commits into from
Sep 30, 2023

Conversation

semnil5202
Copy link
Collaborator

작업 대상

1.0.0 배포합니다.

📄 작업 내용

🙋🏻 주의 사항

  • package json 버저닝 미적용 상태입니다. 배포 이후 수정해야합니다.
  • default api env 적용 실패시 운영서버 DB에 접근하도록 기본값이 설정되어있습니다. 따라서 로컬에서는 운영서버 DB 정보가 보입니다. 추후 개발서버로 기본값을 수정해야합니다.

스크린샷

📎 관련 이슈

레퍼런스

semnil5202 and others added 17 commits September 25, 2023 15:45
@semnil5202
[FE] Feature/#489 사용자 입력 시 개행 적용 (#491)
e7ab2bd 
* chore: 개발 서버로 전환 및 CI/CD 브랜치 변경

* refactor: textarea height 변경

* refactor: 불필요한 Import 제거

* feat: Text 컴포넌트에 개행 옵션 추가

* chore: jest 테스트 환경 재구축
@GC-Park
[FE] Feature/#495 Google Analytics 적용 (#496)
a83dab6 
* feat: Google Analytics 적용

* refactor: 필요없는 코드 삭제
@semnil5202
fix: 개행 처리 적용 시 wrap 속성이 적용되지 않던 오류 수정 (#492)
ae6eed6
@GC-Park
[FE] Refactor/#495 GA 패키지 json (#497)
3c7f3e1 
* feat: Google Analytics 적용

* refactor: react-ga 추가 및 이동이 필요한 라이브러리 위치 변경

* refactor: 필요없는 코드 삭제
@GC-Park
[FE] Refactor/#495 ga 추적 key 상수로 변경 (#498)
b6b168d 
* feat: Google Analytics 적용

* refactor: 기능 확인을 위한 env 변수 상수로 변경
@GC-Park
refactor: GA 위치 변경 (#499)
cc34861
@GC-Park
feat: GA 추가 (#500)
86f6549
@GC-Park
refactor: 필요없는 코드 삭제 (#501)
5ad4c21
@GC-Park
[FE] Refactor/#505 react ga4 적용 (#506)
6476931 
* chore: react-ga를 react-ga4로 변경 및 다른 패키지 업데이트

* refactor: google analytics react-ga4로 변경

* refactor: frontend workflow 변경
@GC-Park
[FE] Hotfix react ga4 에러 해결 (#507)
b1b01fd 
* chore: react-ga를 react-ga4로 변경 및 다른 패키지 업데이트

* refactor: google analytics react-ga4로 변경

* refactor: frontend workflow 변경

* fix: useLocation 위치로 인한 에러 해결

* refactor: App에서 RouteChangeTracker 제거
@jiwonh423 @semnil5202 @GC-Park
[FE] Feat/#502 (#503)
60cf4d2 
* chore: develop 브랜치에 비해 누락된 커밋 반영 (#364)

* [FE] Refactor/#365 API 요청 로직 분리 및 컴포넌트 분리 (#368)

* rename: 2 Depth 컴포넌트 디렉토리 구조 변경

* refactor: 서버와 지도 GET API 요청 로직 분리

* refactor: 서버와 로그인 GET API 분리

* refactor: api 요청 로직 에러 핸들링 추가 및 명시적으로 조건문 지정

추가로 content-type을 내로잉한다.

* fix: 누락된 api 수정 적용

* rename: 사용하지 않는 svg 제거 및 오타 수정

* refactor: 타입명 코드 컨벤션에 맞게 모두 변경

* refactor: api get 요청 로직 커스텀 훅으로 분리

* feat: usePost api 요청 커스텀 훅 생성

* feat: usePut api 요청 커스텀 훅 생성

* feat: useDelete api 요청 커스텀 훅 생성

* remove: 사용하지 않는 페이지 컴포넌트 제거

* fix: delete 요청을 두 번씩 날리는 오류 수정

* refactor: Home 컴포넌트 뎁스 줄임 및 fetchGet 적용

* remove: 불필요한 페이지 컴포넌트 제거

* refactor: bookmark 페이지 및 관련 컴포넌트 관심사 분리

* rename: 불필요한 페이지 제거 및 페이지명 변경

* refactor: 누락된 타입 프로퍼티 추가

* fix: 유효하지 않은 주소를 클릭 시 에러 토스트를 띄우는 기능 수정

* rename: Topic Card 컴포넌트를 담는 상위 컨테이너 컴포넌트 명 변경

* design: myInfo의 사용자 성명 font weight 수정

* style: 불필요한 import 제거 및 공백 수정

* refactor: 중복되는 역할의 컴포넌트 제거 후 재사용

* refactor: 잘못된 에러 메시지 수정

* design: 내가 만든 지도가 없을 경우 사용자에게 알림 문구 더 친화적으로 수정

* refactor: 중복 컴포넌트 제거 및 TopicCardList 재사용 반영

* refactor: 10m 이내로 핀이 찍힐 확률을 줄이면서 사용성을 개선할 수 있는 줌 Limit 수정

* rename: 스켈레톤 컴포넌트 불규칙했던 디렉토리 구조 통일

* rename: NotFound 페이지 컴포넌트 디렉토리 위치 조정

* refactor: usePost를 success message 대신 onSuccess 함수 받도록 변경

* refactor: 모달용 토픽 카드 컴포넌트 제거 후 기존 토픽카드에 타입 프롭 추가

추가로 api 요청 커스텀 훅을 적용한다.

* refactor: put, delete api 요청 hook interface 조정

* [FE] refactor/#373 msw 적용 (#374)

* refactor: 변경된 명세에 맞게 get fetch 관련 msw 수정

* refactor: 즐겨찾기, 모아보기, 지도 추가하기, 핀 추가하기 msw 적용

* hotfix: login 에러 해결 (#383)

* [FE] Feature/#382 반응형 대응 (#387)

* feat: Home 페이지 모바일 및 태블릿 사이즈 반응형 대응

* feat: 네비게이션 바 반응형 대응

* refactor: 반응형 로직 재사용 및 방식 변경

* feat: 전체보기 페이지 반응형 적용

* refactor: 반응형 재사용 함수 네이밍 수정

* feat: 즐겨찾기 페이지 반응형 대응

* feat: 마이페이지 반응형 대응

* fix: 뒤로가기를 통해 핀을 선택하지 않았던 때로 돌아가도 pinDetail이 남아있는 오류 수정

* refactor: 불필요한 console.log 제거 및 as section 지정

* feat: 토픽 조회 및 지도 반응형 대응

* refactor: interface 타입 오류 및 이미지 radius 수정

* refactor: 토픽 단일 조회 및 상세조회 반응형 대응

* refactor: 토픽 단일 조회 및 상세페이지 태블릿 반응형 대응 방식 변경

* refactor: 토스트 알림 반응형 대응

* refactor: 네비게이션 반응형 오류 및 height 고정 문제 수정

추가하기 모달의 경우 단일 토픽 조회 페이지 등에서 미디어 쿼리보다 layoutWidth가 우선순위가 더 높아 어색하게 배치되는 문제를 해결한다.

* refactor: 핀추가하기 페이지 반응형 대응

핀 추가하기 페이지는 지도를 하단에 배치하여 가상키보드가 올라왔을 때를 대응한다.

* refactor: 누락된 커밋 추가하기 모달 중앙정렬 추가

* fix: 스타일드 컴포넌트 trasient DOM 에러 해결

* feat: 모달 컴포넌트 반응형 대응

* fix: PC 사이즈에서 position fixed 되는 오류 수정

* feat: 뽑아오기 컴포넌트 반응형 대응

* refactor: 토픽 단일 조회 및 뽑아오기 반응형 대응 일부 수정

* design: 내 지도에 추가하기 모달 가로 사이즈 조정

* refactor: 네이밍 변경 (mediaWidth -> layoutWidth)

* feat: 핀 수정 페이지 반응형 대응 및 에러메세지 기능 수정

빈 값을 입력해도 에러메세지가 뜨지 않는 오류를 수정한다.

* design: 모바일 사이즈에서 input 태그 간 간격이 좁은 오류 수정

* refactor: 태블릿-모바일 사이즈에서 핀 수정 페이지 반응형 수정

* refactor: merge 브랜치 변경 (develop->develop-FE)

* fix: cypress 테스트 자동화 구문 수정

* refactor: jobs 네이밍 수정

* design: navbar 경계선 그림자 추가

* fix: 카카오 대소문자 수정으로 인한 파일 트래킹이 안되는 오류 수정

* test: 반응형 ui 변경으로 인한 cypress 테스트 로직 변경

* chore: github actions 환경에서만 테스트가 실패하는 오류 수정

* test: github actions 환경에서 wait 관련 테스트만 실패하여 wait 타임을 확장

* test: github actions 환경에서만 통과하지 못하는 wait 함수 값 수정

* refactor: 불필요한 로직 제거

* refactor: 불필요한 어트리뷰트 제거

* chore: api 요청 개발서버로 변경

* [FE] Refactor/#395  지도 타입 지정 및 Map 컴포넌트 리팩토링 (#398)

* feat: Tmap api 관련 타입을 선언한다

* refactor: Layout 컴포넌트에서 지도에 관한 관심사를 분리한다

* refactor: Tmap 관련 타입 추가

* refactor: Tmap 관련 타입 적용

* refactor: 불필요한 코드 제거

* refactor: 좌표관련 타입 수정

* refactor: Navbar 클릭시 색 변경 로직 변경 및 타입 수정

* refactor: null 체크

* refactor: 타입 단언 수정

* refactor: null 타입 체크

* fix: 충돌 해결 (#403)

* [FE] Test/#369 Jest 커스텀 훅 테스트 추가 (#394)

* test: 초기값 타입 수정 및 에러 객체 반환 테스트 추가

* refactor: 일부 단어가 정상적인 단어 입력을 방해하는 오류 수정

* test: 유효성 검사 테스트 추가

* style: single quote 적용

* [FE] Refactor/#402 지도 및 핀 권한 부여 여부 확인 및 지도 수정 페이지 구현 (#410)

* feat: 사용자가 선택한 권한 부여 인원을 확인할 수 있도록 표시하는 기능 추가

* feat: 토픽 권한 타입 추가

* refactor: 가독성 개선 및 불필요한 중복 로직 제거

이중 삼항연산자 등 가독성이 저하되는 부분과 불필요한 조건문, 요청로직 등을 모두 제거한다.

* refactor: 의미없는 함수 리턴 제거

* refactor: 토픽 생성 페이지에서 권한 설정 컴포넌트 UI 및 로직 분리

* feat: 토픽 권한 수정 페이지 구현 및 기존에 권한 설정한 친구들 보여주도록 변경

* feat: 토픽 및 핀에 대해서 수정하기 권한이 있을 경우에만 표시하도록 변경하는 기능 추가

* fix: 에러 페이지 레이아웃 width 미설정 오류 수정

* refactor: 수정하기 버튼 클릭 시 오류 발생 문구 수정

* refactor: 토픽 정보 수정 시 이전의 권한 설정 값으로 조정되도록 변경

* refactor: 사용하지 않는 코드 제거 및 if 블록 설정

* refactor: 사용하지 않는 import 및 prop 제거

* refactor: api 요청 커스텀 훅 매개변수 변경 및 에러 전파 옵션 추가

* refactor: api 요청 커스텀훅 로직 변경에 따른 적용

* refactor: 불필요한 코드 제거

* refactor: 수정 후 topicInfo를 다시 불러오도록 변경

* fix: 잘못된 delete permission id 설정 수정

topicId가 아니라 permission id를 사용하도록 변경한다.
추가로 에러메세지를 수정한다.

* refactor: 불필요한 console.log 제거

* [FE] Feat/#386 지도, 핀 이미지에 s3 적용 (#409)

* feat: 지도 추가 때 필요한 이미지 s3 적용

* feat: pin 생성에서 이미지 s3 적용

* feat: 핀 디테일 페이지에서 핀 사진 추가 구현

* refator: prettier 적용

* refactor: 잘못된 경로 수정

* refactor: 필요없는 console.log 삭제

* refactor: event handler method명 컨벤션에 맞게 수정

* refactor: 변경이 필요한 컴포넌트, 변수 이름 수정

* refactor: alt 및 error 처리 시 알림 메시지 사용자가 이해하기 쉽도록 수정

* refactor: 인라인 스타일 태그 styled component로 수정

* refactor: 지도 만들 때 기본 이미지 설정 해주도록 수정

* fix: 핀 이미지 추가할 때 무한 렌더링 에러 해결

* refactor: type 이름 컨벤션에 맞게 수정

* refactor: 필요없는 type 삭제

* refactor: postApi와 postFormApi 합치기 및 필요없는 코드 삭제

* fix: 핀 추가할 때 이미지 여러개 등록하면 하나만 등록되는 에러 해결

* refactor: 지도, 핀 추가 시 이미지 필수 아니도록 설정

* Hotfix/refresh token 1 (#437)

* refactor: 필요없어진 이미지 url 인풋 컨테이너

* feat: refreshToken관련 로직 추가

* feat: refreshToken을 재요청할때 body에 accessToken을 추가 (#438)

* feat: getApi header 컨텐트타입 추가 (#439)

* feat: refreshToken api 요청시 헤더에 content-type 추가 (#440)

* refactor: withTokenRefresh에 return문 추가 (#442)

* refactor: localstorage userToken getItem요청 수정 (#445)

* refactor: refreshToken함수 예외처리 추가 (#446)

* hotfix: 에러상황 확인용 콘솔로그 추가 (#447)

* hotfix: 재발급시 getItem 부분 수정 (#448)

* hotfix: 재발급시 받은 데이터 저장 로직 수정 (#449)

* hotfix: abortController 적용 (#451)

* hotfix: abortController 여러개 적용 (#452)

* fix: 요청 중 재요청 차단 (#453)

* fix: abort 컨트롤러 예외 처리 수정 (#454)

* fix: Promise 상태로 분기처리하여 재요청 차단 (#455)

* fix: response 타입 동일화 (#456)

* console 체크 (#457)

* fix: console.log 추가 (#459)

* fix: console.log response 부분 추가 (#460)

* Hotfix/refresh token 20 (#461)

* fix: json 메서드 에러 핸들링

* merge 충돌 해결

* fix: response clone 하여 오류 수정 (#463)

* Feat/#465 logout (#467)

* feat: 버튼 ui 구현

* feat: 로그아웃 버튼 클릭 이벤트 구현

* refactor: 컨벤션 수정

* [FE] Fix/permission 토픽 권한 수정 오류 해결 (#419)

* fix: 모아보기 시에도 토픽 수정이 가능토록 변경

* refactor: 에러메세지 수정

* fix: 이전 권한 설정을 불러오지 못하는 에러 수정

추가로 기존에 선택한 친구들을 조건적으로 UI 렌더링을 진행했던 로직을 수정한다.

* refactor: 이전에 권한을 부여한 친구들 목록 로직 수정

* test: cypress 개발 서버에 의존인 관계로 임시로 임계값 확장

* refactor: 변수명, 함수명 변경

* hotfix: 로그아웃 post 데이터 타입 변경 (#468)

* [FE] Feature/#435 이미지 압축 기능 구현 (#436)

* feat: 이미지 압축하는 기능 custom hook으로 구현

* feat: 지도, 핀 등에 이미지 추가할 시 이미지 압축 기능 추가

* refactor: NewTopic, NewPin 텍스트 수정

* refactor: 이미지 리사이징 최대 크기 변경

* refactor: 지도 추가 페이지에서 이미지와 파일 추가 버튼 사이에 space 추가

* fix: 네이밍 변경 누락 오류 수정 및 네이밍 통일성 준수 (#470)

* chore: browser-image-compression 패키지 제이슨 누락 수정 (#471)

* [ FE ] Refactor/#404 홈페이지 및 Navbar 리팩토링 (#423)

* refactor: 페이지 직접 이동 로직까지 포함하도록 수정

* refactor: useNavigator 리턴 형식 변경

* feat: Navbar 각 요소 아이템으로 분리

* fix : 아이콘 타입 수정

* refactor: Navbar 중복 로직 제거

* refactor: routePage 함수 리턴값을 추가

* fix: 지도 선택된 상황에서 핀 추가 로직 수정

* refactor: 페이지 이동 로직 분리

* refactor: interface로 수정

* hotfix: 모아보기 누락 로직 추가 (#475)

* [FE] 토큰 재발급 로직 모든 메소드에 적용  (#474)

* refactor: http메소드 refresh 로직 적용

* feat: delete 메소드에 refreshToken 로직 추가

* [FE] Refactor/#469 동적 임포트와 tree shaking으로 코드 스플리팅 (#476)

* refactor: router 부분에 동적 임포트 적용

* feat: tree shaking 적용

* [FE] Fix/#472 토픽 수정 시 권한 수정 보류 (#477)

* refactor: 권한 설정 범위 변수 네이밍 수정

* fix: 특정 인원 권한 설정 로직 오류 수정

* refactor: 권한 수정 기능 및 UI 임시 보류

* design: 추가하기 모달이 반응형 환경에서 위치가 잘못되는 오류 수정

* refactor: 동적 임포트에 suspense 적용 (#478)

* fix: merge 과정 중 충돌 해결 오류 수정 (#480)

* feat: default url 변경 (#483)

* [FE] Refactor/#481 개발 서버 QA 후 발생한 이슈 해결 (#486)

* refactor: 추가하기 모달 위치 왼쪽 하단으로 고정되는 이슈 해결

* refactor: 1078px 이하에서 이미지 숨겨지던 오류 해결

* refactor: 핀 내 지도에 저장 기능 에러 해결

* refactor: 버튼 variant 확장

* feat: patch용 함수 구현

* feat: 회원 정보 수정 ui 구현

* feat: 회원 정보 수정 로직 구현

* feat: 수정 성공시 localstorage 저장 정보 변경

* refactor: 정보 수정 반영 안되는 문제 수정

* feat: 환경변수 테스트

---------

Co-authored-by: 이세민 <[email protected]>
Co-authored-by: ParkGeunCheol <[email protected]>
@jiwonh423
hotfix: 환경변수 수정 (#512)
551217f
@semnil5202
[FE] Refactor/#513 지도 생성 및 핀 생성 페이지 지도 위치 조정 (#514)
0c5bf0d 
* design: 모든페이지에서 지도 상, 사이드바 하 고정

* refactor: 지도 생성 및 핀 생성 페이지에서 기존 잔류 핀 초기화

* design: 모아보기 페이지 반응형시 중앙 정렬
@semnil5202
[FE] Fix/myinfo 마이페이지 닉네임 변경 시 이미지 사라지던 오류 수정 (#515)
83cc393 
* refactor: 불필요한 console 제거

* fix: 내 정보 닉네임 수정 시 이미지가 사라지는 오류 수정

* refactor: default URL 변경
@semnil5202
[FE] Fix/#522 토픽 조회 중복 요청 오류, 핀 조회 시 토픽 조회 요청 오류 및 지도 줌인 오류 수정 (#523)
20011f0 
* fix: 핀, 핀프리뷰 클릭 시 토픽 조회 오류 수정

* fix: 토픽 조회 시 중복 조회되던 오류 수정

* refactor: API env 실험

* design: 임시핀 변경 (A -> M)

* fix: 핀, 핀프리뷰 클릭 시 줌인 안되던 오류 수정

* design: 핀 infowindow 디자인 변경
@semnil5202
fix: 모아보기 상태에서 핀 조회가 안되는 오류 수정 (#525)
92ffa0e
@semnil5202
[FE] Refactor/#526 반응형 네브바 가림 문제 해결 (#527)
fafe2f4 
* design: URL 주소창 고려 앱 높이 설정

* fix: 최초 앱 실행시 뷰포트 계산토록 변경

* refactor: default api 지정 및 env 설정

* refactor: 불필요한 콘솔 로그 제거
@semnil5202 semnil5202 added the FE 프론트엔드 관련 이슈 label Sep 30, 2023
GC-Park
GC-Park approved these changes Sep 30, 2023
View reviewed changes
Copy link
Collaborator

@GC-Park GC-Park left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

대부분 코드리뷰 할 때 이해한 내용으로 코멘트와 함께 approve 하겠습니다~!

.github/workflows/fe-merge-prod.yml
@@ -33,6 +33,9 @@ jobs:
- name: Build project
run: npm run build
working-directory: frontend
env:
REACT_APP_GOOGLE_ANALYTICS: ${{ secrets.REACT_APP_GOOGLE_ANALYTICS }}
APP_URL: "https://mapbefine.com/api"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

아 이렇게 해서 운영 서버와 개발 서버를 나눴군요 굿 !!

frontend/src/components/common/Text/index.ts
@@ -19,6 +19,7 @@ const Text = styled.span<TextProps>`
font-size: ${({ $fontSize }) => theme.fontSize[$fontSize]};
font-weight: ${({ $fontWeight }) => theme.fontWeight[$fontWeight]};
text-align: ${({ $textAlign }) => $textAlign};
white-space: pre-wrap;
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

개행 처리 좋은거 배웠습니다~!

frontend/src/components/Layout/Navbar.tsx
top="calc(100vh - 100px)"
top="calc(var(--vh, 1vh) * 100 - 100px)"
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

계산식 이렇게 바꾸신 이유 설명해주실 수 있을까요?!! 공부하고 싶습네닷 !

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

요게 develop -> main 머지라 여러 작업이 한 번의 파일체인지로 뜨네요.

#527

위 본문에서 작업된 것이고 이는 --vh 란 CSS 변수를 선언하여 --vh가 있다면 (--vh * 100 - 100px) 을 하여 top 속성에 적용하라는 뜻입니다. 없으면 --vh 대신 1vh 로 적용합니다.

결국 모바일 환경에서 브라우저 마다 네브바 가림 문제가 발생한 원인이 URL 주소창입니다. 100vh 라고 지정할 경우 URL 주소창 높이를 계산한 값이 아니기에 URL 주소창 높이만큼 화면이 가려집니다. 따라서 URL 주소창 높이를 제외한 가용 화면 높이를 --vh 로 계산하였고 이를 활용하여 각 화면에서 필요한 값 만큼 계산한 것입니다~

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

본문 보시면 레퍼런스 주소도 첨부해놨습니다!

@semnil5202 semnil5202 merged commit f3b43d3 into main Sep 30, 2023
1 check passed
@yoondgu yoondgu added this to the 최종 데모데이 milestone Oct 3, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@GC-Park GC-Park GC-Park approved these changes

@jiwonh423 jiwonh423 Awaiting requested review from jiwonh423

Assignees

@jiwonh423 jiwonh423

@GC-Park GC-Park

@semnil5202 semnil5202

Labels
FE 프론트엔드 관련 이슈
Projects
None yet
Milestone
최종 데모데이
Development

Successfully merging this pull request may close these issues.
4 participants
@semnil5202 @GC-Park @jiwonh423 @yoondgu