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

GC-Park · 2023-09-14T07:50:39Z

작업 대상

지도, 핀 이미지에 s3 적용

📄 작업 내용

지도 생성 시 이미지 추가 s3로 구현
핀 생성 시 이미지 추가 s3로 구현
핀에 이미지 추가 s3로 구현

🙋🏻 주의 사항

스크린샷

📎 관련 이슈

레퍼런스

…3-map-befine into feat/#386-apply-s3

semnil5202

빠뚜릭~~ S3 구현하시느라 정말 고생 많았어요~~👍👍👍

덕분에 사용성이 정말 많이 개선 되겠군요 호호. 저 역시 file을 다루는 것은 한 번도 경험해보지 않았기 때문에 좀 꼼꼼하게 봤습니다. (그래서 좀 리뷰가 많아졌네요.. 🙃)

기능 구현 자체는 잘 되어있는 것 같아요. 하지만 네이밍이나 컨벤션 등 다소 아쉬운 부분이 있어 리퀘스트 요청 드립니다.

한 번 확인해주시고 이해가 잘 안 되거나 의견을 나눠보고 싶은 부분은 조금 이따 만나서 얘기나누면 좋을 것 같습니다. 고생하셨습니다!!

semnil5202 · 2023-09-14T08:44:21Z

frontend/src/pages/NewTopic.tsx

+      const formData = new FormData();
+      if (!formImage) return;
+
+      console.log('1');


콘솔 지워주세용~

아이고.. 콘솔 모두 지우도록 하겠습니다~!!

console.log("console log 지워주세요")

semnil5202 · 2023-09-14T15:27:28Z

frontend/src/components/PinImageBox/index.tsx

+  overflow: hidden;
+`;
+
+const ImageLi = styled.li`


ImageLi 라고 네이밍하신 이유가 li 태그를 사용했기 때문일까요? 시맨틱 태그를 위해 ul과 li를 사용하신 것은 좋지만 네이밍 자체에 태그 이름이 들어갈 필요는 없다고 생각합니다.

보통 스타일드 컴포넌트는 wrapper 라는 키워드를 많이 쓰는 것 같은데 ImageWrapper 와 같은 네이밍은 어떨까요?

저도 동의합니다~!! 수정하도록 하겠습니다!

semnil5202 · 2023-09-14T15:29:08Z

frontend/src/pages/NewPin.tsx

-        latitude: '',
-        longitude: '',
+        latitude: 0,
+        longitude: 0,


👍👍 자잘한 타입 체킹 좋습니다~~!

semnil5202 · 2023-09-14T15:30:27Z

frontend/src/pages/NewPin.tsx

+    const file = event.target.files && event.target.files[0];
+
+    if (!file) {
+      showToast('error', 'No file selected');


showToast는 사용자에게 노출되므로 한국어로 작성하는 것이 좋을 것 같아요~~

세인 말에 공감합니다! 한국어로 변경하도록 하겠습니다!

한국어로 쓰셨어야죠! 차아암...

semnil5202 · 2023-09-14T15:31:11Z

frontend/src/pages/NewPin.tsx

@@ -162,6 +179,37 @@ const NewPin = () => {
    });
  };

+  const handlePinImageChange = (event: React.ChangeEvent<HTMLInputElement>) => {


저희 컨벤션에 의하면 이벤트 핸들러 메서드는 handle 프리픽스 대신 on 프리픽스를 쓰기로 하였는데 한 번 확인부탁드려용~

아 맞네요! 알려주셔서 감사해요 세인! 바로 반영할게요 !! 👍

on 프리픽스 써줘요오오 차아아암

semnil5202 · 2023-09-14T16:03:25Z

frontend/src/pages/NewPin.tsx

@@ -49,6 +50,9 @@ const NewPin = () => {
  const { width } = useSetLayoutWidth(SIDEBAR);
  const { openModal, closeModal } = useContext(ModalContext);

+  const [formImages, setFormImages] = useState<File[]>([]);
+  const formData = new FormData();


이 친구는 안쓰이는 것 같네용

오우 꼼꼼히 봐주셨네요! 굿 👍

세인 visual studio code 이용해서 리뷰하시나요?

처음에는 파일체인지로 쭉보다가 잘 이해가 안가는 부분 있으면 VSCode PR an Issue? 그 확장프로그램 써서 체크아웃해서 동시에 둘다 봐여~ 실제 화면 구동하면서

그래도 이해가 안 되면 마지막으로 커밋로그 보고 직접 물어보기~

당신 사랑스러워.

semnil5202 · 2023-09-14T16:07:28Z

frontend/src/pages/NewPin.tsx

@@ -66,16 +72,27 @@ const NewPin = () => {
      postTopicId = selectedTopic.topicId;
    }

-    await postApi('/pins', {
+    if (!formImages) return;


이 부분도 이미지는 필수값이 아니기 때문에 return 을 해주면 안 될 것 같아요. 그리고 formImages는 기본값이 빈 배열이라 위 로직은 영원히 false 일텐데요.

이미지를 추가하면 setFormImages([...formImages, file]); 이라는 코드를 통해 빈 배열이 아닌 경우도 있습니다!

그리고 핀 추가할 때도 이미지가 필수값이 아니기 때문에 수정이 필요하다는 생각이 듭니다!!

다양한 방법을 시도해 봤으나 blob 객체는 빈 값으로 보내지 못하는 것 같아 백엔드와 상의해서 방법을 찾아보도록 하겠습니다!

빈 배열이 아닌 경우도 있군요.

이미지는 필수로 넘어오게 되면 매번 동일한 사진이 S3 에 올라가기 때문에 굉장히 비효율적인 것 같습니다.

그래서 제가 그냥 이미지 파일을 넘기지 않으면 기본 이미지로 대체할 수 있도록 저장 로직을 변경하였습니다.

이거도 따봉 눌러달라고요 세민씨

아하 빈 배열이 아닌 경우도 있군요! 굳 좝 베이비들 ❤️

semnil5202 · 2023-09-14T16:13:06Z

frontend/src/pages/NewPin.tsx

+    const imageLists = event.target.files;
+    let imageUrlLists = [...showImages];
+
+    const file = event.target.files && event.target.files[0];


imageLists 라는 변수를 선언해두었는데 왜 사용하지 않으시고 event.target 을 통해 타입 가드를 진행하셨을까요?

핀 이미지를 추가할 때는 여러개를 추가할 수 있도록 해두었고 파일을 올리는 즉시 볼 수 있도록 구현하였습니다. 이러는 과정에서 imageLists랑 file이 별개의 역할을 가진다고 생각했는데 세인의 리뷰를 보고 file이 없어도 된다는 것을 알았고 이미지를 여러개를 등록할 때 하나밖에 올라가지 않는 버그를 발견할 수 있었습니다!! 완전 👍👍

semnil5202 · 2023-09-14T16:13:25Z

frontend/src/pages/NewPin.tsx

+      return;
+    }
+
+    if (!imageLists) return;


위에서 타입 가드를 진행하였는데 이곳에서 한 번더 진행하는 이유가 있나요?

수정하였습니다!

타입 가드는 한번만 해버렷

semnil5202 · 2023-09-14T16:16:35Z

frontend/src/pages/NewPin.tsx

@@ -35,6 +35,7 @@ const NewPin = () => {
  const { navbarHighlights: _ } = useSetNavbarHighlight('addMapOrPin');
  const [topic, setTopic] = useState<any>(null);
  const [selectedTopic, setSelectedTopic] = useState<any>(null);
+  const [showImages, setShowImages] = useState<string[]>([]);


show 라고 동사를 쓰니 함수 네이밍 같은 느낌이 살짝 들어요~~ '화면에 있는', '보여진' 등의 명사의 느낌으로 네이밍 해보면 어떨까요?

좋습니다! 반영했습니다~!

패트릭은 파주 영어마을의 명물이기 때문에 네이밍을 잘 할 수 있어요.

jiwonh423

파일 추가 버튼이 생기면서 이미지 추가하는 기능이 메인 구현인거 같은데 세인이 남긴 컨벤션관련 제외하고 postApi부분만 하나로 합치면 좋을것 같아요 😄

jiwonh423 · 2023-09-15T01:31:09Z

frontend/src/apis/postApi.ts

@@ -44,3 +51,33 @@ export const postApi = async (

  return response;
 };
+
+export const postFormApi = async (


위에 세인이 말한대로 합치는 방향이 좋을꺼같습니다

kpeel5839 · 2023-09-15T13:29:09Z

패트릭 이 PR 보니까 Conflict 나네요 진짜 나 너무 화나!

semnil5202

오우 빠뜨릭 짧은 시간안에 다 수정하셨군요 고생많으셨습니다 👍👍

베리 나이스 하네용~ 추후 머지 충돌이 좀 걱정되긴 하지만.. ㅋㅋㅋㅋㅋ 저랑 같이 페어프밍해서 잘 해결해보시죠~~

월욜날 봬영 😀

semnil5202 · 2023-09-15T13:36:20Z

frontend/src/apis/postApi.ts

  contentType?: ContentTypeType,
 ) => {
  const apiUrl = `${DEFAULT_PROD_URL + url}`;
  const userToken = localStorage.getItem('userToken');
+
+  if (payload instanceof FormData) {


좋습니다 👍 중복 로직이 조금 있기는 한데 추후에 개선하면 충분할 것 같아요~~ 👍

semnil5202 · 2023-09-15T13:37:49Z

frontend/src/types/FormValues.ts

@@ -0,0 +1,30 @@
+export interface NewTopicFormProps {


아하 DefaultFormProps? 그 타입만 삭제하신 거군요 굳굳👍👍

…3-map-befine into feat/#386-apply-s3

* 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>

* 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>

GC-Park added 6 commits September 12, 2023 22:32

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

d3b8f5b

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

295acbe

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

22a8702

refator: prettier 적용

d60badb

Merge branch 'develop-FE' of https://github.com/woowacourse-teams/202…

fb1d2e0

…3-map-befine into feat/#386-apply-s3

refactor: 잘못된 경로 수정

82442b7

GC-Park added FE 프론트엔드 관련 이슈 우선순위 : 상 feat 새로운 기능 개발 labels Sep 14, 2023

GC-Park added this to the 5차 데모데이 milestone Sep 14, 2023

GC-Park requested review from jiwonh423 and semnil5202 September 14, 2023 07:50

GC-Park self-assigned this Sep 14, 2023

semnil5202 requested changes Sep 14, 2023

View reviewed changes

GC-Park added 5 commits September 15, 2023 10:17

refactor: 필요없는 console.log 삭제

d48394d

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

0051d21

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

c27eff5

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

6f6f9e4

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

95542bd

jiwonh423 approved these changes Sep 15, 2023

View reviewed changes

GC-Park added 7 commits September 15, 2023 11:25

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

c3a91ba

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

31b4523

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

2211c29

refactor: 필요없는 type 삭제

2e73f3b

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

d055ee0

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

c1aadb7

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

c16768b

semnil5202 approved these changes Sep 15, 2023

View reviewed changes

Merge branch 'develop-FE' of https://github.com/woowacourse-teams/202…

48fb11c

…3-map-befine into feat/#386-apply-s3

GC-Park merged commit c82e138 into develop-FE Sep 19, 2023

GC-Park deleted the feat/#386-apply-s3 branch September 19, 2023 06:51

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

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

Conversation

GC-Park commented Sep 14, 2023

작업 대상

📄 작업 내용

🙋🏻 주의 사항

스크린샷

📎 관련 이슈

레퍼런스

semnil5202 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kpeel5839 Sep 15, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kpeel5839 Sep 15, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

jiwonh423 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kpeel5839 commented Sep 15, 2023

semnil5202 left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

kpeel5839 Sep 15, 2023 •

edited

Loading

kpeel5839 Sep 15, 2023 •

edited

Loading