[FE] Refactor/#365 API 요청 로직 분리 및 컴포넌트 분리 #368
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
추가로 content-type을 내로잉한다.
GC-Park
reviewed
Sep 1, 2023
Comment on lines
-15
to
+31
| 'Content-Type': `${contentType || 'application/json'}`, | ||
| 'content-type': 'application/json', | ||
| }; | ||
|
|
||
| if (userToken) { | ||
| headers['Authorization'] = `Bearer ${userToken}`; | ||
| } | ||
|
|
||
| const response = await fetch(`${DEFAULT_PROD_URL + url}`, { | ||
| if (contentType) { | ||
| headers['content-type'] = contentType; | ||
| } |
There was a problem hiding this comment.
세인 이 부분에서 'Content-Type': '${contentType || 'application/json'}'이 부분을
'content-type': 'application/json'과 if문으로 나누신 이유가 있을까요?!!
There was a problem hiding this comment.
사실 취향 차이인 것 같습니다만, userToken if 블록과 통일성을 위해서 contentType도 분리해보았습니다. 로직상으로는 차이가 없지만 가독성 측면에서 좀 더 낫지 않나 싶어서 위와 같이 변경하였는데 패트릭은 어떠신가요??
There was a problem hiding this comment.
처음에 봤을 때는 'Content-Type': ${contentType || 'application/json'}, 이 부분이 더 낫다고 생각했는데 세인의 의도를 알고나니 if문을 사용해 통일성을 가져가는 것도 좋은 것 같습니다 ! 굿!
Comment on lines
13
to
14
| const AddFavorite = ({ | ||
| id, |
There was a problem hiding this comment.
세인 이 컴포넌트에서 즐겨찾기 추가뿐 아니라 delete도 하고 있는 것 같아서 이 기능도 포함해서 컴포넌트명을 바꾸는거 어떻게 생각하시나요?!!
There was a problem hiding this comment.
오우 굉장히 좋은 피드백이군여 👍👍 사실 이 컴포넌트가 재사용하는 측면에서 상당히 별로라서 (부모로부터 UI도 내려받고, 기능도 내려받음. 일부 공통된 기능은 해당 컴포넌트 내부에 작성되었지만 Headless 하지도 않아 다소 애매함) 아예 걷어낼 생각이었습니다.
결론은 컴파운드 컴포넌트를 적용해보면서 리팩토링해볼까 합니다. 네이밍은 ToggleFavorite 정도로 떠오르는데 패트릭은 어떠신가요?
Comment on lines
+38
to
44
| const topics = await getApi<TopicCardProps[]>('/members/my/atlas'); | ||
|
|
||
| setSeeTogetherTopics(topics); | ||
|
|
||
| // TODO: 모아보기 페이지에서는 GET /members/my/atlas 두 번 됨 | ||
| setTopicsFromServer(); | ||
| getTopicsFromServer(); | ||
|
|
There was a problem hiding this comment.
세인 혹시 여기서 '모아보기 페이지에서는 GET /members/my/atlas 두 번 됨'의 뜻이 무엇인가요?!!
저는 await getApi<TopicCardProps[]>('/members/my/atlas'); 이 요청을 두 번 보낸다고 이해했는데 혹시 두 번 요청 보내는 이유가 있을까요?!
There was a problem hiding this comment.
네 맞습니다. 위에서 남긴 리뷰와 비슷한 맥락인데, 모아보기 페이지에서는 getTopicsFromServer 함수가 getApi('/members/my/atlas'); 입니다. 따라서 위에서 수행한 get을 아래에서 동일하게 한 번 더 수행해서 비효율적인 로직입니다.
하지만 메인페이지에서는 getApi('/topics'); 가 되는데요. 토픽카드에 있는 모아보기 버튼을 누르면 유저의 모아보기 리스트와 메인페이지의 토픽카드 리스트를 두 개 모두 불러와야하므로 그렇습니다.
사실 간단한 해결방법은 getTopicsFromServer를 옵셔널로 받고 모아보기 페이지에선 넘겨주지 않으면 될 것 같은데, 이 부분 코드가 워낙 가독성이 안 좋아서 휴먼에러 방지하고자 일단 강제해둔 것 같네요. 컴파운드 컴포넌트를 도입하면서 추가로 리팩토링해야할 부분 같습니다.
Comment on lines
9
to
11
| topicId: string; | ||
| topicClick: any; | ||
| } |
There was a problem hiding this comment.
이 부분에서 topicClick type을 변경할 수 있을 것 같은데
음.. 제가 이해한 구조로는 onClickDesignated?: ({ topicId, topicName }: OnClickDesignatedProps) => void; 이 부분에 넣는 것 같은데 맞나요?!!
any 타입을 저걸로 바꿔도 괜찮다고 생각하는지 궁금합니다 !!
There was a problem hiding this comment.
topicClick 메서드는 NewPin Page로 부터 prop으로 내려받습니다. 해당 메서드는 useState의 setter라서 React.Dispatch<React.setStat~~ 로 되는 타입을 갖습니다. 그런데 해당 useState도 any 타입이더군여.. (아마 런칭 2일전 코드인지라 우리중 누군가 바쁘게 작성해둔것 같습니다.)
set 하는 로직을 살펴보니 TopicCardProp 이란 타입을 지정해주면 될 것 같은데 문제는 해당 타입을 변경할 경우 NewPin 페이지 컴포넌트 내부에서 타입 에러가 연쇄적으로 발생합니다. 😇 NewPin 파일체인지가 살벌해질 것 같아서 추후 리팩토링 때 진행하고자 일단 두었습니다.
페이지 컴포넌트 리팩토링 때 진행해보면 좋을 것 같습니다.
Comment on lines
+19
to
+21
| const goToHome = () => { | ||
| routePage('/'); | ||
| }; |
There was a problem hiding this comment.
다른 곳들은 routePage('/new-topic');로 이동시켜 토픽을 추가 시키는 로직인데 이 부분은 메인 페이지로 바로 가는 이유가 궁금합니닷 !
There was a problem hiding this comment.
이 부분도 기능상 routePage가 굳이 필요하지 않습니다만, 모종의 이유로 최근에 핀이 찍힌 토픽 카드 리스트 get을 해오지 못했을 때 다른 api를 통해 get 해오는 토픽 카드 리스트라도 보여주려고 main 페이지로 이동시키는 일종의 방어로직..? 이랄까요.
사실 패트릭의 말씀대로 new-topic으로 이동해서 새로운 토픽을 추가하도록 유도하는 것도 좋아보입니다. 정책적인 문제라 추후 논의해보면 좋겠네요.
jiwonh423
approved these changes
Sep 6, 2023
GC-Park
added a commit
that referenced
this pull request
Sep 21, 2023
* 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: 핀 내 지도에 저장 기능 에러 해결 --------- Co-authored-by: 이세민 <89172499+semnil5202@users.noreply.github.com> Co-authored-by: afds4567 <33995840+afds4567@users.noreply.github.com>
jiwonh423
added a commit
that referenced
this pull request
Sep 27, 2023
* 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: 이세민 <89172499+semnil5202@users.noreply.github.com> Co-authored-by: ParkGeunCheol <72205402+GC-Park@users.noreply.github.com>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
작업 대상
모든 프로덕트 코드를 대상으로 리팩토링을 진행한다. 주요 리팩토링 대상은 다음과 같다.
📄 작업 내용
🙋🏻 주의 사항
cartType으로 분기처리 하여 기능을 구현하였습니다. 조건문으로 인해 다소 복잡해보일 수 있겠습니다. ModalTopicList 또한 기존의 TopicCardList 등으로 대체가 될 수 있어보이지만 진행하지 않았습니다. 슬랙에서 말씀드린 대로 회의 후 방향성을 잡아볼 필요가 있겠습니다.const { width : _ } = useSetLayoutWidth(FULLSCREEN);의 코드는useSetLayoutWidth(FULLSCREEN);으로 변경하였습니다./topics/merge같은 api 요청 훅도 제거해야합니다.스크린샷
📎 관련 이슈
close #365
레퍼런스