[FE] Feature/#435 이미지 압축 기능 구현 #436
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
|
테스트 터져부령! |
|
테스트 터진다고 알림오잖아요 ;;; |
semnil5202
reviewed
Sep 19, 2023
There was a problem hiding this comment.
오우 빠뚜릭~ 야무진 방법 찾아서 바로 적용해주셨군요!! 덕분에 성능 최적화의 무거운 짐을 많이 덜어낼 수 있을 것 같아요. 정말 고생 많으셨습니다. 👍👍
커스텀 훅으로 분리하여 단일 이미지 일때, 다중 이미지일 때 (이미지 리스트) 를 고려하셔서 작성하신 부분과 함수 재사용까지.. 크으~ 완벽합니다!!
파일 체인지로만 확인을 해봤는데 동작하는데 전혀 무리가 없을 것 같아요. 아까 패트릭이 보여주신 파일 압축 전 후 비교 자료를 PR 본문에도 올려보면 어떨까요? 아이크가 어느정도의 이미지 압축 효과를 볼 수 있는지 이해하기 더 직관적일 것 같아요.
모바일 사이즈에서 이미지 가로 사이즈가 704px 인 경우가 있는데요.(max-width : 744px) 리뷰 코멘트에도 남겼지만 패트릭이 지정해주신 옵션값이면 해당 사이즈에서 이미지가 깨져보일 수도 있을 것 같아요. 갤럭시 폴드를 펼친 화면이 684px 정도로 알고 있고, 구형 태블릿은 744px 환경에서 볼 수도 있을 것 같아서요. 이 부분만 수정해주시면 좋겠습니다!
좋은 레퍼런스까지 남겨주셨군요. 등굣길에 읽어보겠습니다. 감사합니다. 👍👍
참고 이미지 크기가 704px 일 때
| const compressImage = async (file: File) => { | ||
| const resizingBlob = await imageCompression(file, { | ||
| maxSizeMB: 1, | ||
| maxWidthOrHeight: 500, |
There was a problem hiding this comment.
패트릭 이미지 가로 넓이가 704px 일 때도 있어용~ 모바일 최대 사이즈 (744px) 경우입니다. 따라서 500으로 설정하시면 이미지가 깨져보일 수도 있을 것 같아요.
이미지는 전체 코멘트에 첨부하겠습니다. 이미지가 너무 커서 코드 리뷰할 때 방해될 것 같네요.
There was a problem hiding this comment.
와우 놓칠 수도 있는 부분이었는데 반응형을 담당해주신 세인이라 캐치할 수 있었던 것 같습니다!! 👍
최대 사이즈 변경하도록 하겠습니다! 감사합니다!
Comment on lines
+20
to
+21
| const compressedImage = await compressImage(file); | ||
| compressedImageList.push(compressedImage); |
| @@ -241,7 +252,6 @@ const NewTopic = () => { | |||
|
|
|||
| const ImageInputLabel = styled.label` | |||
| height: 40px; | |||
| margin-left: 10px; | |||
There was a problem hiding this comment.
요 속성은 어떤 이유로 삭제되었을까용??
There was a problem hiding this comment.
사진이 없으면 파일 추가 버튼이 다른 텍스트들과 왼쪽으로 정렬되지 않아 지웠었습니다!
그런데 사진이 있는 경우 버튼과 간격이 필요하니 그 부분은 space로 대체할 수 있을 것 같습니다!
수정하도록 하겠습니다~!!
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.
작업 대상
이미지 압축 기능 구현
📄 작업 내용
🙋🏻 주의 사항
스크린샷
📎 관련 이슈
close #435
레퍼런스
이미지 압축 라이브러리 browser-image-compression의 참고자료입니다!!
https://www.abstractapi.com/guides/how-to-compress-an-image-in-react
이미지 압축 시도 했던거 결과 공유합니다 !!
10671912 : 10.7MB-> 97891 : 90KB
225370: 225KB -> 113697: 110KB
1822: 2KB -> 1061: 1KB