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] Feat/#502 #503

Merged
merged 55 commits into from
Sep 27, 2023
Merged

[FE] Feat/#502 #503

merged 55 commits into from
Sep 27, 2023

Conversation

jiwonh423
Copy link
Collaborator

작업 대상

  • 로그아웃 버튼 사이즈 조절 위해 common 컴포넌트 수정
  • 회원정보 수정 기능이 patch 메소드 -> usePatch 구현
  • 회원정보 수정 성공 시 화면 반영 구현

📄 작업 내용

크게 두가지 작업입니다

  1. 로그아웃 버튼 크기 조절
  2. 회원정보 수정 기능 구현 ( patch 메소드에 대한 구현)

🙋🏻 주의 사항

스크린샷

📎 관련 이슈

#502

closed #502

레퍼런스

semnil5202 and others added 30 commits August 21, 2023 23:24
@semnil5202
chore: develop 브랜치에 비해 누락된 커밋 반영 (#364)
6298f48
@semnil5202
[FE] Refactor/#365 API 요청 로직 분리 및 컴포넌트 분리 (#368)
a8cf622 
* 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 조정
@GC-Park
[FE] refactor/#373 msw 적용 (#374)
5eee314 
* refactor: 변경된 명세에 맞게 get fetch 관련 msw 수정

* refactor: 즐겨찾기, 모아보기, 지도 추가하기, 핀 추가하기 msw 적용
@GC-Park
hotfix: login 에러 해결 (#383)
abc4701
@semnil5202
[FE] Feature/#382 반응형 대응 (#387)
12613e1 
* 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 요청 개발서버로 변경
@jiwonh423
[FE] Refactor/#395 지도 타입 지정 및 Map 컴포넌트 리팩토링 (#398)
6f60cac 
* feat: Tmap api 관련 타입을 선언한다

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

* refactor: Tmap 관련 타입 추가

* refactor: Tmap 관련 타입 적용

* refactor: 불필요한 코드 제거

* refactor: 좌표관련 타입 수정

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

* refactor: null 체크

* refactor: 타입 단언 수정

* refactor: null 타입 체크
@jiwonh423
fix: 충돌 해결 (#403)
9c56123
@semnil5202
[FE] Test/#369 Jest 커스텀 훅 테스트 추가 (#394)
5a1d2e1 
* test: 초기값 타입 수정 및 에러 객체 반환 테스트 추가

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

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

* style: single quote 적용
@semnil5202
[FE] Refactor/#402 지도 및 핀 권한 부여 여부 확인 및 지도 수정 페이지 구현 (#410)
592eba0 
* 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 제거
@GC-Park
[FE] Feat/#386 지도, 핀 이미지에 s3 적용 (#409)
c82e138 
* 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: 지도, 핀 추가 시 이미지 필수 아니도록 설정
@jiwonh423
Hotfix/refresh token 1 (#437)
d2e5331 
* refactor: 필요없어진 이미지 url 인풋 컨테이너

* feat: refreshToken관련 로직 추가
@jiwonh423
feat: refreshToken을 재요청할때 body에 accessToken을 추가 (#438)
9663453
@jiwonh423
feat: getApi header 컨텐트타입 추가 (#439)
c5df478
@jiwonh423
feat: refreshToken api 요청시 헤더에 content-type 추가 (#440)
3684967
@jiwonh423
refactor: withTokenRefresh에 return문 추가 (#442)
e8f2b48
@jiwonh423
refactor: localstorage userToken getItem요청 수정 (#445)
5e583c5
@jiwonh423
refactor: refreshToken함수 예외처리 추가 (#446)
47e2692
@jiwonh423
hotfix: 에러상황 확인용 콘솔로그 추가 (#447)
4c2e331
@jiwonh423
hotfix: 재발급시 getItem 부분 수정 (#448)
d5df4bb
@jiwonh423
hotfix: 재발급시 받은 데이터 저장 로직 수정 (#449)
06445d4
@jiwonh423
hotfix: abortController 적용 (#451)
97c724e
@jiwonh423
hotfix: abortController 여러개 적용 (#452)
631cb43
@semnil5202
fix: 요청 중 재요청 차단 (#453)
7da225e
@semnil5202
fix: abort 컨트롤러 예외 처리 수정 (#454)
7f42e70
@semnil5202
fix: Promise 상태로 분기처리하여 재요청 차단 (#455)
41cd2b4
@semnil5202
fix: response 타입 동일화 (#456)
9434c4a
@semnil5202
console 체크 (#457)
3d1fa9c
@semnil5202
fix: console.log 추가 (#459)
cb89ac1
@semnil5202
fix: console.log response 부분 추가 (#460)
d467f6e
@semnil5202
Hotfix/refresh token 20 (#461)
84bbbdd 
* fix: json 메서드 에러 핸들링

* merge 충돌 해결
semnil5202 and others added 18 commits September 21, 2023 01:59
@semnil5202
fix: 네이밍 변경 누락 오류 수정 및 네이밍 통일성 준수 (#470)
c26bd75
@semnil5202
chore: browser-image-compression 패키지 제이슨 누락 수정 (#471)
94ebcba
@jiwonh423
[ FE ] Refactor/#404 홈페이지 및 Navbar 리팩토링 (#423)
ad3a293 
* refactor: 페이지 직접 이동 로직까지 포함하도록 수정

* refactor: useNavigator 리턴 형식 변경

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

* fix : 아이콘 타입 수정

* refactor: Navbar 중복 로직 제거

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

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

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

* refactor: interface로 수정
@jiwonh423
hotfix: 모아보기 누락 로직 추가 (#475)
836e0c4
@jiwonh423
[FE] 토큰 재발급 로직 모든 메소드에 적용 (#474)
2684205 
* refactor: http메소드 refresh 로직 적용

* feat: delete 메소드에 refreshToken 로직 추가
@GC-Park
[FE] Refactor/#469 동적 임포트와 tree shaking으로 코드 스플리팅 (#476)
94ab841 
* refactor: router 부분에 동적 임포트 적용

* feat: tree shaking 적용
@semnil5202
[FE] Fix/#472 토픽 수정 시 권한 수정 보류 (#477)
cd9eb67 
* refactor: 권한 설정 범위 변수 네이밍 수정

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

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

* design: 추가하기 모달이 반응형 환경에서 위치가 잘못되는 오류 수정
@GC-Park
refactor: 동적 임포트에 suspense 적용 (#478)
bc7ba08
@semnil5202
fix: merge 과정 중 충돌 해결 오류 수정 (#480)
e6aba04
@jiwonh423
feat: default url 변경 (#483)
ec5ae7f
@GC-Park
[FE] Refactor/#481 개발 서버 QA 후 발생한 이슈 해결 (#486)
7d9906d 
* refactor: 추가하기 모달 위치 왼쪽 하단으로 고정되는 이슈 해결

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

* refactor: 핀 내 지도에 저장 기능 에러 해결
@jiwonh423
Merge branch 'develop-FE-2' of https://github.com/woowacourse-teams/2…
ade24b9 
…023-map-befine into develop-FE-2
@jiwonh423
Merge branch 'develop-FE-2' of https://github.com/woowacourse-teams/2…
eeff372 
…023-map-befine into develop-FE-2
@jiwonh423
refactor: 버튼 variant 확장
d3b13ea
@jiwonh423
feat: patch용 함수 구현
9d575f5
@jiwonh423
feat: 회원 정보 수정 ui 구현
f954722
@jiwonh423
feat: 회원 정보 수정 로직 구현
ea85f0f
@jiwonh423
feat: 수정 성공시 localstorage 저장 정보 변경
85cd54e
@jiwonh423 jiwonh423 added FE 프론트엔드 관련 이슈 feat 새로운 기능 개발 labels Sep 27, 2023
@jiwonh423 jiwonh423 self-assigned this Sep 27, 2023
semnil5202
semnil5202 approved these changes Sep 27, 2023
View reviewed changes
Copy link
Collaborator

@semnil5202 semnil5202 left a comment

Choose a reason for hiding this comment

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

리렌더링 이슈 확인했습니다. usePatch 굳~

frontend/src/components/common/Button/index.ts
color: `${theme.color.white}`,
backgroundColor: `${theme.color.primary}`,
border: `1px solid ${theme.color.primary}`,
padding: `${theme.spacing['0']} ${theme.spacing['2']}`,
Copy link
Collaborator

Choose a reason for hiding this comment

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

이쯤되면 버튼도 Text 마냥 처리해야할수도..

Copy link
Collaborator

Choose a reason for hiding this comment

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

저도 밑에 달았는데 비슷한 생각입니다 세인! 새로운 버튼 생길 때마다 바꿔줄 수는 없을 것 같아서! 나중에 같이 수정해보죠 !!

GC-Park
GC-Park approved these changes Sep 27, 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 날리겠습니다! 아이크 수고하셨습니당 굿~!

frontend/src/apis/patchApi.ts Outdated
Copy link
Collaborator

Choose a reason for hiding this comment

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

생각해보니 저희가 patch가 없었군요..! 새로 만드신거 너무 좋습니다! 굿굿 !!!!

frontend/src/components/common/Button/index.ts
@@ -1,7 +1,7 @@
import styled from 'styled-components';
import theme from '../../../themes';

export type ButtonVariant = 'primary' | 'secondary';
export type ButtonVariant = 'primary' | 'secondary' | 'custom';
Copy link
Collaborator

Choose a reason for hiding this comment

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

오 이거 custom은 로그아웃 버튼이 너무 커서 만드신 걸까요?!!!

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

YES

@jiwonh423 jiwonh423 merged commit 60cf4d2 into develop-FE-2 Sep 27, 2023
1 check passed
@semnil5202 semnil5202 deleted the feat/change-nickname branch October 1, 2023 07:53
@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

@semnil5202 semnil5202 semnil5202 approved these changes

Assignees

@jiwonh423 jiwonh423

Labels
FE 프론트엔드 관련 이슈 feat 새로운 기능 개발
Projects
2023-map-befine
Status: Done
Milestone
최종 데모데이
Development

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