[FE] Refactor/#593 모아보기와 단일조회페이지 분리 및 리팩토링 #607

semnil5202 · 2023-10-19T04:52:22Z

작업 대상

모아보기 오류를 수정합니다.

📄 작업 내용

모아보기와 단일토픽 조회 페이지를 분리
모아보기 상태에서 핀 조회 시 topicCard URL id 가 undefined가 되는 오류 수정
공유하기가 핀 조회 이후부터 깨지는 오류 수정
비회원 상태에서 모아보기 시 리스트가 초기화 될 때 토스트 알림 구현

🙋🏻 주의 사항

모아보기 체크리스트

단일 조회와 모아보기 구분되는지
단일 조회 페이지에서 모아보기 버튼 눌러 이동 가능한지
모아보기 상태에서 핀프리뷰, 핀 클릭 시 url 유지 되고 공유하기 모두 문제없는지
모아보기 상태에서 토픽 수정 문제 없는지
단일 조회 페이지 네비게이션 하이라이트 초기화
단일 조회 및 모아보기 상태에서 풀핀 문제 없는지
(비회원) 모아보기 페이지에서 리스트 클리어
(회원) 모아보기 서버상태가 우선 시 되는지
(회원) 비회원 상태에서 모아보기 리스트가 회원으로 전환 시 클리어될건지 (정책상 고민) -> 보류

스크린샷

📎 관련 이슈

#593

레퍼런스

jiwonh423

굿굿 에러 분리 잘 되고 해결되서 다행이네여

jiwonh423 · 2023-10-19T06:01:19Z

frontend/src/hooks/useNavigator.ts

분리 확인요 👍

jiwonh423 · 2023-10-19T06:06:42Z

frontend/src/hooks/useResizeMap.ts

+
+  useEffect(() => {
+    if (window.innerWidth > 1180) resizeMap();
+  }, [getAvailableWidth(372)]);


여기 의존성에 getAvailableWidth가 어떤 의민지 잘 모르겠습니다 😓

현재 페이지에서 콘텐츠를 보여줄 수 있는 가로 사이즈를 의미합니다.

jiwonh423 · 2023-10-19T06:07:22Z

frontend/src/hooks/useSetNavbarHighlight.ts

  'home',
  'seeTogether',
  'addMapOrPin',
  'favorite',
  'profile',
+  'none',


메인페이지에서 지도 클릭하면 none으로 처리했네여

jiwonh423 · 2023-10-19T06:14:33Z

frontend/src/hooks/useTags.ts

+import { TagContext } from '../context/TagContext';
+import useNavigator from './useNavigator';
+
+const useTags = () => {


모아보기에 사용하는 hook으로 보이네여

GC-Park

빠르게 훑어보았습니다 ! 모르는 부분 구두로 물어보겠습니다!

…3-map-befine into refactor/#593-swiper

* refactor: 비로그인 시 pin detail에서 image 추가 버튼 숨기기 * [FE] Feat/#554 search 지도 검색 기능 구현 (#555) * feat: SearchBar 컴포넌트 구현 * feat: Search 페이지 구현 * feat: 홈페이지에 searchBar 적용 * refactor: 불필요한 memo 제거 * [FE] refactor/#450 모아보기 기능 비회원도 가능하도록 수정 (#516) * refactor: 모아보기 기능 비회원도 가능하도록 수정 * fix: 화면 터지던 에러 해결 * fix: 모아보기 삭제 하는 기능 에러 해결 * refactor: 비로그인 시 모아보기 페이지에서 홈으로 이동하면 모아보기 삭제되도록 수정 * refactor: 충돌 해결 과정에서 롤백된 Navbar 전체 코드 수정 * refactor: 네이밍 수정이 필요한 부분들 적용 * refactor: TopicInfo에서는 모아보기 담기 기능 제한 및 토스트 알림 적용 * refactor: NavBar 롤백하며 빼먹은 코드 useNavigator에 적용 * refactor: 필요없어진 컴포넌트 삭제 * fix: pinDetail 페이지 split 에러 해결 * refactor: 비로그인 때 모아보기 할 시 toast 알람 뜨도록 변경 * refactor: topicInfo에서는 모아보기 클릭 안되도록 수정 * refactor: 모아보기 highlight 설정 변경 * chore: eslint 설정 적용 (#557) * [FE] Refactor/eslint ESLint 추가 적용 (#559) * style: api, apiHooks, mocks, pages eslint 적용 * chore: github actions 브랜치 수정 * chore: zustand 설치 * feat/#564 poi 적용 (#566) * feat: 자동완성 컴포넌트 구현 * feat: getPoi 구현 * feat: 자동완성 컴포넌트 구현 * feat: 핀 추가 페이지에 자동완성 입력창 추가 * refactor: 줌 레벨 설정 조정 및 타입 추가 * refactor: tmap api key 추가 * feat: Poi 타입 설정 * feat: 자동완성 debounce 적용 * refactor: 리뷰 반영 * refactor: 2차 리뷰 반영 * hotfix: dotenv 추가 (#574) * hotfix: env 이름 형식 통일 (#575) * hotfix: DotenvWebpackPlugin추가 (#576) * fix: require 수정 (#577) * [FE] Feature/#560 메인 페이지에 swiper 및 배너 적용 (#569) * feat: Swiper 구현 * remove: 사용하지 않는 tooltip 컴포넌트 제거 * design: swiper 버튼 디자인 수정 * feat: banner 메인페이지에 도입 * design: swiper tabbox color 제거 및 swiper 가운데 정렬 swiper cursor pointer 옵션 또한 추가한다. * refactor: swiper as 프롭으로 시멘틱 태그 지정 기능 추가 * design: topicCard UI 업데이트 * design: 배너 1140 가로 크기 대응 * design: 스크롤바 영역 제거 목표한 브라우저 환경에서 동작 확인 * feat: topicCard 컨테이너에 swiper 도입 * design: Home 콘텐츠 가로 1140px로 확장 * feat: 뷰포트가 모바일 사이즈 744px 미만일때 Text 크기를 한 단계씩 낮추는 기능 추가 * refactor: scroll bar 보이도록 롤백 * refactor: topicCard 반응형 로직 수정 * feat: media query 분기점에 따라 tab 갯수 조절하는 기능 추가 * design: topicCard 이미지 최대 크기 조정 및 모아보기 버튼 위치 수정 * refactor: swiper 버튼은 모바일 사이즈에서 보이지 않도록 일괄 지정 * design: 반응형 페이지 width 수정 * chore: 배너 이미지 확장자 변경 webp, 그에 따른 설정 * refactor: swiper tab 반응형 상태에선 height 자식에 따라 지정되도록 변경 * refactor: topicCard swiper media query 추가 * design: layout padding 제거 (반응형 오류 해결 위함) * feat: banner 반응형 기능 및 라우팅 기능 추가 * refactor: 반응형 조건에 따라 부모에 가로 세로 크기를 맞추되 한계점 지정 * design: 반응형 상태에서 layout margin이 어색한 문제 해결 * refactor: swipe value 상수화 * fix: 탭 갯수와 element 갯수가 같을 경우 Tabbox 숨김 처리 Tabbox 갯수가 elementsTab 속성을 고려하지 않고 Tab 갯수로만 고정되던 오류를 해결한다. * design: topicCard max width 값 지정 * refactor: 불필요한 import 제거 * refactor: grid 컴포넌트 생성 및 bookmark, profile에 적용 * design: Home, Bookmark, Profile에 미디어텍스트 적용 * design: 전체보기 및 검색결과 페이지에 미디어 텍스트 적용 * refactor: 검색결과 topicCard 리스트를 Grid로 설정 * rename: 컴포넌트 파일명 파스칼 케이스로 변경 * design: media Space 컴포넌트 생성 및 반응형 space 적용 * design: 모바일 환경에서 하단 일부가 네브바에 가리는 오류 수정 * refactor: 토픽카드에서 즐겨찾기 버튼 제거 * refactor: 불필요한 import 제거 * [FE] Refactor/#572 핀 이미지 태그로 교체 및 아이콘 소스 검토 (#573) * refactor: pin 을 image url 방식에서 tag 방식으로 변경 * rename: topicCard 모아보기 및 즐겨찾기 아이콘 변경 * rename: topicInfo 모아보기 및 공유하기 아이콘 수정 * refactor: 수정하기 버튼 및 아이콘 일괄 수정 * refactor: 기본 토픽 이미지 및 프로필 이미지 수정 이미지 url 을 mapbefine s3로 지정한다. * rename: search bar 아이콘 수정 * refactor: favicon 경로 s3 로 변경 * refactor: 이미지 공통 컴포넌트 지정 및 중복 코드 제거 * rename: 대소문자 추적 오류로 임시로 네이밍 변경 * Hotfix/swiper UI (#579) * design: 배너, 토픽카드 이미지 오류 수정 머지 과정에서 일부 충돌 사항을 해결한다. * refactor: swiper 영역은 콘텐츠가 클릭되지 않던 불편함 해소 * rename: git 파일 대소문자 추적 불가 오류로 인해 임시로 바꿨던 파일명 롤백 * [FE] Feature/#550 토픽 이미지 수정 및 핀 이미지 삭제 기능 (#583) * feat: 핀 이미지 삭제 기능 구현 * feat: 토픽 사진 수정 기능 예비 * refactor: 핀 이미지 삭제 시 재렌더링 안되던 문제 해결 * refactor: 핀 수정 기능 명세 연결 및 구현 * refactor: 지도 사진 수정할 때 사진만 수정되도록 변경 * refactor: 함수 이름 변경 및 지도 사진 수정 타이틀 작성 * refactor: 지도 수정 버튼 위치 이동 * [FE] Feat/#588 현재 위치 이동 버튼 (#589) * feat: 지도 위 현재 위치로 버튼 추가 * design: 현재 위치 아이콘 변경 및 위치 변경 * refactor: Toast로 사용자에게 위치 정보 상태를 명시 --------- Co-authored-by: semnil5202 <[email protected]> * [FE] Refactor/#578 지도 핀 Boundary 조정 (#590) * refactor: mobile 사이즈에서는 지도 축소 제한을 한 단계 낮추도록 변경 * refactor: mapInstance zustand 전역상태로 분리 * fix: 지도가 브라우저 넓이에 맞지 않는 오류 수정 * design: 현재 위치 조정 버튼 크기 확장 * refactor: 현재 위치 정보 가져오기 로직 수정 * Hotfix/current position (#594) * feat: 현재 위치 아이콘 추가 * refactor: 사용자 현재 위치 가져오기 기능을 토글형식으로 변경 * refactor: 사용자 위치 조회 로직 수정 (#596) * refactor: 현재 위치 요청 로직 변경 (#599) * refactor: watchPosition 에서 getCurrentPosition으로 변경 (#600) * [FE] Feat/#592 핀 디테일의 핀 이미지 클릭 시 모달을 통해 크게 보이는 기능 구현 (#595) * feat: 이미지 클릭 시 이미지 모달 띄우는 기능 추가 및 반응형 적용 * refactor: context 역할에 맞게 이름 수정 * refactor: fetchDelete 안에 있는 불필요한 isThrow 속성 제거 * refactor: 필요없는 코드 및 수정 필요한 이름 변경 * refactor: 명시적인 함수 이름으로 수정 * [FE] Feat/#597 댓글 기능 구현 (#598) * feat: 댓글 기능 컴포넌트 구현 * feat: 핀 상세보기 페이지 댓글기능 반영 * chore: 자동완성 컴포넌트 lint * refacotr: api 응답 명세 반영 * feat: 대댓글 구현 * feat: 수정 삭제 기능 구현 * refactor: 수정하기 기능 수정 * refactor: 수정 삭제 권한 반영 * refactor: 댓글 재요청 로직 수정 * refactor :수정 삭제시 commentId에서 pinId로 변경 * refactor: fetch로직 수정 * refactor: 에러 수정 * refactor: default prod url 수정 * refactor: 리뷰 반영 * fix: 운영 서버 workflow Dockerfile 이름 수정 * fix: 운영서버 ci/cd 를 위한 Dockerfile-prod 에 개행 추가 * [FE] Feat/#604 image swiper 적용 및 image size limit 적용 (#608) * refactor: PinDetail 빼먹었던 부분 다시 추가 * refactor: image wrapper에 key값 적용 * feat: 핀 디테일 이미지에 스와이퍼 적용 * refactor: 이미지 3개 이하면 스와이프 안 나오도록 수정 * refactor: 비로그인 시 이미지 추가 버튼 안 보이도록 수정 * feat: 토픽 사진 추가할 때 사이즈 제한 주기 * refactor: 필요없는 코드 삭제 * [FE] Refactor/#593 모아보기와 단일조회페이지 분리 및 리팩토링 (#607) * refactor: isNotTabBoxShow에 따라 스와이퍼 버튼 위치 조정 * design: banner TabBox 라인 삭제 * refactor: 모아보기 기능 SelectedTopic 페이지에서 분리 * refactor: resizeMap 로직 훅으로 분리 및 재사용 * refactor: 네비게이션 하이라이트 기능 훅으로 분리 및 재사용 * refactor: tag 관련 로직 훅으로 분리 및 재사용 * refactor: 토스트 ui 변경 * refactor: seetogether 페이지 분리 * fix: 모아보기 페이지에서 모아보기 삭제 시 발생하던 오류 수정 * refactor: 불필요한 import 제거 * refactor: 네비게이션 하이라이트 topics에서 무효화 및 로그인 페이지 오류 수정 * fix: 회원일때는 url 상태로 토픽 조회 하도록 변경하여 새로고침 오류 수정 * fix: 모아보기를 모두 비운 후 핀이 남아있는 오류 수정 * fix: 모아보기 상태에서 토픽 이미지 수정이 선택한 토픽으로 되지 않는 오류 수정 * chore: swiper 제거 후 npm 배포 버전으로 import * refactor: search 페이지 서스펜스 제거 * fix: 핀 디테일 때 맵 클릭 시 움직이지 않던 에러 해결 * fix: 누락된 TMAP_API_KEY 반영 * fix: 모아보기 클릭이벤트 수정 * refactor: pinDetail 페이지 줌인 * fix: banner url 수정 * [FE] Hotfix/map panto 오류 수정 (#611) * fix: 지도 조회 시 핀 바운더리 경계면에 맞게 줌인 되지 않던 오류 수정 * design: 풀핀 여백이 보이는 오류 수정 * test: 버그 해결을 위한 테스트 추가 * fix: 핀 삭제 시 토픽의 핀 개수 반영 안되는 문제 해결 --------- Co-authored-by: GC-Park <[email protected]> Co-authored-by: ParkGeunCheol <[email protected]> Co-authored-by: afds4567 <[email protected]> Co-authored-by: 이세민 <[email protected]> Co-authored-by: Doy <[email protected]> Co-authored-by: semnil5202 <[email protected]> Co-authored-by: 준팍(junpak) <[email protected]>

semnil5202 added 13 commits October 18, 2023 20:44

refactor: isNotTabBoxShow에 따라 스와이퍼 버튼 위치 조정

fa19478

design: banner TabBox 라인 삭제

4dd35e4

refactor: 모아보기 기능 SelectedTopic 페이지에서 분리

16b09a5

refactor: resizeMap 로직 훅으로 분리 및 재사용

036b1b5

refactor: 네비게이션 하이라이트 기능 훅으로 분리 및 재사용

66ef511

refactor: tag 관련 로직 훅으로 분리 및 재사용

8b9f3de

refactor: 토스트 ui 변경

85bd580

refactor: seetogether 페이지 분리

bc5fa28

fix: 모아보기 페이지에서 모아보기 삭제 시 발생하던 오류 수정

295569b

refactor: 불필요한 import 제거

f9c4bb8

refactor: 네비게이션 하이라이트 topics에서 무효화 및 로그인 페이지 오류 수정

5c1553e

fix: 회원일때는 url 상태로 토픽 조회 하도록 변경하여 새로고침 오류 수정

183bb11

fix: 모아보기를 모두 비운 후 핀이 남아있는 오류 수정

9322c58

semnil5202 added FE 프론트엔드 관련 이슈 우선순위 : 상 refactor 리팩토링 관련 이슈 labels Oct 19, 2023

semnil5202 requested review from jiwonh423 and GC-Park October 19, 2023 04:52

semnil5202 self-assigned this Oct 19, 2023

fix: 모아보기 상태에서 토픽 이미지 수정이 선택한 토픽으로 되지 않는 오류 수정

9062508

semnil5202 changed the title ~~[FE] Refactor/#593 스와이퍼 media query 리팩토링 모아보기 스와이퍼 적용~~ [FE] Refactor/#593 모아보기와 단일조회페이지 분리 및 리팩토링 Oct 19, 2023

jiwonh423 approved these changes Oct 19, 2023

View reviewed changes

GC-Park approved these changes Oct 19, 2023

View reviewed changes

semnil5202 added 3 commits October 19, 2023 17:57

chore: swiper 제거 후 npm 배포 버전으로 import

8df9e14

refactor: search 페이지 서스펜스 제거

01c6e88

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

12c0312

…3-map-befine into refactor/#593-swiper

semnil5202 merged commit 4dce3c3 into develop-FE Oct 19, 2023
1 check passed

semnil5202 deleted the refactor/#593-swiper branch February 9, 2024 23:45

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[FE] Refactor/#593 모아보기와 단일조회페이지 분리 및 리팩토링 #607

[FE] Refactor/#593 모아보기와 단일조회페이지 분리 및 리팩토링 #607

semnil5202 commented Oct 19, 2023 •

edited by jiwonh423

Loading

jiwonh423 left a comment

jiwonh423 Oct 19, 2023

jiwonh423 Oct 19, 2023

semnil5202 Oct 19, 2023

jiwonh423 Oct 19, 2023

jiwonh423 Oct 19, 2023

GC-Park left a comment

[FE] Refactor/#593 모아보기와 단일조회페이지 분리 및 리팩토링 #607

[FE] Refactor/#593 모아보기와 단일조회페이지 분리 및 리팩토링 #607

Conversation

semnil5202 commented Oct 19, 2023 • edited by jiwonh423 Loading

작업 대상

📄 작업 내용

🙋🏻 주의 사항

모아보기 체크리스트

스크린샷

📎 관련 이슈

레퍼런스

jiwonh423 left a comment

Choose a reason for hiding this comment

jiwonh423 Oct 19, 2023

Choose a reason for hiding this comment

jiwonh423 Oct 19, 2023

Choose a reason for hiding this comment

semnil5202 Oct 19, 2023

Choose a reason for hiding this comment

jiwonh423 Oct 19, 2023

Choose a reason for hiding this comment

jiwonh423 Oct 19, 2023

Choose a reason for hiding this comment

GC-Park left a comment

Choose a reason for hiding this comment

semnil5202 commented Oct 19, 2023 •

edited by jiwonh423

Loading