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.

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

[FE] refactor/#450 모아보기 기능 비회원도 가능하도록 수정 #516

Merged
merged 14 commits into from
Oct 6, 2023

Conversation

GC-Park
Copy link
Collaborator

@GC-Park GC-Park commented Sep 27, 2023

작업 대상

모아보기 기능 비회원도 가능하도록 수정

📄 작업 내용

  • 모아보기 기능 비회원도 가능하도록 수정

🙋🏻 주의 사항

스크린샷

📎 관련 이슈

close #450

레퍼런스

@GC-Park GC-Park added FE 프론트엔드 관련 이슈 우선순위 : 상 refactor 리팩토링 관련 이슈 labels Sep 27, 2023
@GC-Park GC-Park self-assigned this Sep 27, 2023
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.

패트릭~ 고생 정말 많으셨습니다. 👍👍👍 로그인 상태에 따라서 UI를 낙관적 업데이트할지 말지, 기능 플로우도 달리 해야하고.. 여러므로 관리해야할 포인트가 많으셨을텐데 전반적으로 의도하신 기능이 잘 동작하는 것 같습니다.

다만 Navbar 로직이 예전 로직으로 덮어씌워졌습니다.. 아마도 충돌 해결하시면서 발생한 일 같네요. 이 부분 때문에 리퀘스트 체인지로 드립니다.

몇 가지 코멘트 남겼습니다. 사실 기능상 문제는 없어서 머지해도 괜찮을 것 같습니다만, Navbar 문제를 해결하면서 좀 더 개선해보면 좋을 부분이 있어서 나름 제 생각을 적어보았습니다.

몸 관리가 최우선이시니 절대 무리하시지 마시고욥!! 이 부분은 추석 끝난 이후에 머지해도 괜찮습니다. 만약 이 내용을 이번 배포에 적용시키고 싶은데 몸이 안따라준다면 제게 디엠 주세요. 제가 이어서 작업해도 괜찮을 것 같습니다!

아무튼 약 잘 드시고! 연휴인데 아쉬운대로 배달 음식도 야무지게 시켜드셔서 얼렁 회복하시길 바랍니다. 고생많으셨습니다. 👍👍


interface NavBarProps {
$layoutWidth: '100vw' | '372px';
}

interface NavbarItemProps {
Copy link
Collaborator

Choose a reason for hiding this comment

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

이 부분 로직 왜 다시 옛날 로직으로 돌아갔나요??

머지 충돌이 잘못 해결된건가용?

Copy link
Collaborator

Choose a reason for hiding this comment

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

이미 세인이 커멘트 남겼네요

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

충돌 해결하다가 되돌아간 것 같아요!! 바로 수정하도록 하겠습니다~!!

};

const goToSeeTogether = () => {
routePage(`/topics/${seeTogetherTopics?.length===0 ? -1 : seeTogetherTopics?.join(',')}`);
Copy link
Collaborator

Choose a reason for hiding this comment

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

프리티어 한 번 확인부탁드려용

자동저장 또 요놈인가?! 🤔

Copy link
Collaborator Author

@GC-Park GC-Park Oct 4, 2023

Choose a reason for hiding this comment

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

허헣.. 😉 NavBar 되돌리면서 useNavigator 파일에 옮긴 후 저장 꾹 눌렀습니다~!

@@ -139,10 +143,11 @@ const TopicCard = ({
<ButtonWrapper>
<AddSeeTogether
isInAtlas={isInAtlas}
onClickAtlas={onChangeIsInAtlas}
Copy link
Collaborator

Choose a reason for hiding this comment

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

onChange 기능을 하는 함수가 onClick 으로 네이밍이 변경이 되면서 처음 읽을 때 기능이 헷갈리는 것 같아요.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

아 그럴 수도 있겠군요!!! onClick으로 통일하도록 하겠습니다 굿굿!

@@ -47,6 +47,7 @@ const TopicCard = ({
const { routePage } = useNavigator();
const { closeModal } = useContext(ModalContext);
const { elementRef, onElementKeyDown } = useKeyDown<HTMLLIElement>();
const [atlas, setAtlas] = useState<boolean>(isInAtlas);
Copy link
Collaborator

Choose a reason for hiding this comment

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

비회원을 위한 atlas임을 알려주는 네이밍이면 좋겠어요. 현재 isInAtlas도 있다보니 혼동이 조금 예상되서요.

isInNonMemberAtlas 이런 느낌은 어떤가요? boolean 값이다보니 is 프리픽스도 필요할것 같군요.

Copy link
Collaborator

Choose a reason for hiding this comment

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

AddSeeTogether에서부터 뭔가 하고 찾아 내려왔는데 세인 커멘트처럼 비회원용인지 바로 알 수 있으면 좋을것 같아요

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

너무 좋은 제안 바로 받아 반영하도록 하겠습니다! 👍

id={id}
getTopicsFromServer={getTopicsFromServer}
>
{isInAtlas ? <SeeTogetherSVG /> : <SeeTogetherNotFilledSVG />}
{atlas ? <SeeTogetherSVG /> : <SeeTogetherNotFilledSVG />}
Copy link
Collaborator

Choose a reason for hiding this comment

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

이 곳도 accessToken 여부에 따라서 UI 렌더링을 달리 해야하지 않을까 했는데 post 요청하는 로직 부분이 try catch 문으로 감싸져 있어서 괜찮을 것 같군요.

post 에러가 발생하면 UI 업데이트가 발생하지 않겠네용. 우선은 이렇게 진행해도 괜찮을 것 같습니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

와우 이 부분까지 생각하지 못하고 코드 작성했던 것 같은데 굿!

누군가가 추상화를 잘 해주었기에 예방할 수 있었던거죠 😉


const getAndSetDataFromServer = async () => {
if (topicId === '-1') return;
Copy link
Collaborator

Choose a reason for hiding this comment

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

-1 도 좋지만 'empty' 나 좀 더 명확한 네이밍이 어떨가용? 저번에 전화로 이야기를 들었는데도 잠깐 이게뭐지? 했었네요. Navbar에서 'empty'로 파라미터 넘겨주면 될 것 같아요.

가만 생각해보면.. 모아보기 기능은 페이지 분리가 필요한가 싶기도 하네요.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

아 이 부분 저도 직관적인 단어로 적용해보았는데 에러가 뜨더라구요! 아마 원인은 명세 'topics/:topicId'에서 topicId부분이 Number로 고정인 것 같아요!

에러 발생 예시입니다!
-> get 요청 실패
스크린샷 2023-10-04 오후 8 31 52

-> 아무것도 뜨지 않음
스크린샷 2023-10-04 오후 8 32 07

Comment on lines +121 to +123
if (!seeTogetherTopics) return <></>;

if (seeTogetherTopics.length === 0 && topicId === '-1') {
Copy link
Collaborator

Choose a reason for hiding this comment

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

굳 👍

path: 'see-together',
element: (
<SuspenseComp>
<SeeTogetherTopics />
Copy link
Collaborator

Choose a reason for hiding this comment

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

seeTogether 페이지 컴포넌트 자체도 삭제해주세용~

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

아이고 아깝다 아까버 ! 그러나 이제는 없애야 할 때 .! 삭제 갑니다~

Comment on lines +11 to +12
seeTogetherTopics: number[] | null;
setSeeTogetherTopics: Dispatch<SetStateAction<number[] | []>>;
Copy link
Collaborator

Choose a reason for hiding this comment

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

이전에 전화로 전달해주셨을 때 그대로 써도 문제없을 것 같았는데 AddSeeTogether onChangeIsInAtlas 함수안에

    else setSeeTogetherTopics((prev) => [...prev, id]);

요 부분 때문에 바꿔야만 하는군요 ㅋㅋㅋㅋ 좋습니다. 👍👍

Comment on lines +30 to +35
useEffect(() => {
if (accessToken === null && seeTogetherTopics?.length !== 0) {
setSeeTogetherTopics([]);
}
}, []);

Copy link
Collaborator

Choose a reason for hiding this comment

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

요 로직이 모아보기 페이지에도 있어야할 것 같네요. 제가 원래 생각했던 것은 비회원에게는 모아보기가 일회성 장바구니처럼 기능을 제공하는 쪽이었습니다. 그래서 모아보기 리스트를 초기화하면서 로그인을 하면 모아보기 리스트가 유지돼요! 이런식의 토스트를 남겨둘 생각이었어요. (로그인 유도도 좀 할겸?)

그래도 홈에도 여전히 이 로직이 필요합니다. 왜그러냐면 비회원이 접속할 수 있는 페이지가 홈이랑 모아보기 둘 뿐이면 홈에는 필요가 없지만, 안타깝게도 저희에겐 askLogin 페이지도 있기 때문입니다 ㅋㅋㅋㅋ 그래서 홈 -> 모아보기 담고 -> 즐겨찾기(애스크 로그인으로 전환) -> 홈 이렇게 이동하면 모아보기 리스트는 그대로지만 UI는 초기화 되어있겠죠.

모아보기 페이지에서 초기화를 안해주면 결정적으로 topicInfo 의 모아보기 버튼과 UI가 차이가 나는 결정적인 문제가 있기도합니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

세인! 이 부분은 저희 금요일에 만나서 한번 더 얘기보는게 어떨까요?! 제가 잘 이해를 못하기도 했고 실제로 만나 화면을 보면서 말하면 금방 이해할 수 있을 것 같아서요!! 일단 이 전까지 코멘트는 모두 반영하였습니다! 이 부분 만나서 화면으로 보고 바로 반영해봐요!!!

Copy link
Collaborator

@jiwonh423 jiwonh423 left a comment

Choose a reason for hiding this comment

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

비회원용 모아보기 기능 지나가면서 듣기엔 localStorage 이용한다고 들었는데 제가 잘못 들었던것 같네요... 내부 상태로 관리하는 방법인거 같은데 좋습니다~

@@ -4,6 +4,7 @@ import useNavigator from '../../hooks/useNavigator';
import Flex from '../common/Flex';
Copy link
Collaborator

Choose a reason for hiding this comment

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

여기 Navbar.tsx전체 반복되는 부분 map으로 묶어서 리팩토링 해둔거 머지된거같은데 지금 패트릭 로컬에 반영 안되서 다시 원상복귀 되는거 같아요. 혹시 일부러 되돌리시는건가요??

Copy link
Collaborator Author

Choose a reason for hiding this comment

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

아이고 충돌 해결하면서 되돌아간 것 같아요! 수정하도록 하겠습니다!!


interface NavBarProps {
$layoutWidth: '100vw' | '372px';
}

interface NavbarItemProps {
Copy link
Collaborator

Choose a reason for hiding this comment

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

이미 세인이 커멘트 남겼네요

@@ -47,6 +47,7 @@ const TopicCard = ({
const { routePage } = useNavigator();
const { closeModal } = useContext(ModalContext);
const { elementRef, onElementKeyDown } = useKeyDown<HTMLLIElement>();
const [atlas, setAtlas] = useState<boolean>(isInAtlas);
Copy link
Collaborator

Choose a reason for hiding this comment

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

AddSeeTogether에서부터 뭔가 하고 찾아 내려왔는데 세인 커멘트처럼 비회원용인지 바로 알 수 있으면 좋을것 같아요

@GC-Park GC-Park changed the base branch from develop-FE-2 to develop-FE October 6, 2023 02:09
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.

확인했습니다.

@GC-Park GC-Park merged commit 5a96390 into develop-FE Oct 6, 2023
@semnil5202 semnil5202 deleted the refactor/#450-seetogether-everyone branch October 6, 2023 10:43
kpeel5839 added a commit that referenced this pull request Nov 18, 2023
* 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 <semnil5202@gmail.com>

* [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 <kuyt3122@naver.com>
Co-authored-by: ParkGeunCheol <72205402+GC-Park@users.noreply.github.com>
Co-authored-by: afds4567 <33995840+afds4567@users.noreply.github.com>
Co-authored-by: 이세민 <89172499+semnil5202@users.noreply.github.com>
Co-authored-by: Doy <doyoungwork@gmail.com>
Co-authored-by: semnil5202 <semnil5202@gmail.com>
Co-authored-by: 준팍(junpak) <112045553+junpakPark@users.noreply.github.com>
kpeel5839 added a commit that referenced this pull request Nov 18, 2023
* 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 <semnil5202@gmail.com>

* [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 <kuyt3122@naver.com>
Co-authored-by: ParkGeunCheol <72205402+GC-Park@users.noreply.github.com>
Co-authored-by: afds4567 <33995840+afds4567@users.noreply.github.com>
Co-authored-by: 이세민 <89172499+semnil5202@users.noreply.github.com>
Co-authored-by: Doy <doyoungwork@gmail.com>
Co-authored-by: semnil5202 <semnil5202@gmail.com>
Co-authored-by: 준팍(junpak) <112045553+junpakPark@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
FE 프론트엔드 관련 이슈 refactor 리팩토링 관련 이슈 우선순위 : 상
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

3 participants