Issue166 마이페이지(나의 맛집, 나의 리뷰보기) 추가 #168

hafnium1923 · 2023-06-25T13:49:41Z

#166

사용자 정보를 확인할 수 있다 (아이디, 후기 개수, 평균 별점)
사용자가 저장한 맛집 정보를 볼 수 있다.
- 마이페이지(메인 페이지)에서는 3개만 볼 수 있으나, 전체보기를 클릭해서 전체 목록을 볼 수 있다.
사용자가 작성한 리뷰들을 볼 수 있다.
- 마이페이지(메인 페이지)에서는 3개만 볼 수 있으나, 전체보기를 클릭해서 전체 리뷰 작성 목록을 볼 수 있다.
- 마이페이지에서 작성했던 리뷰를 수정하거나 삭제할 수 있다.
- 식당 이름을 클릭하면 식당 상세 페이지로 이동한다.

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

uk960214 · 2023-06-25T16:20:30Z

src/components/pages/BookmarkListPage/BookmarkListPage.tsx

+  return (
+    <S.Container>
+      <S.HeaderWrapper>
+        <LeftIcon onClick={() => navigate(-1)} />


오 이전 페이지로 가기 위해서 navigate(-1)을 사용하는 코드가 기존에도 여기저기에 있었군요..
개인적으로 사용자 입장에서 -1로 구현된 경우에 불편한 점이 꽤 많더라구요! 링크나 히스토리를 통해서 해당 페이지로 바로 들어왔을 때에는 히스토리 스택에 -1이 같은 서비스 내에 페이지가 아니기 때문에 어색하다고 느꼈어요. 기회가 되면 다음에 navigate(-1) 대신 실제 그 페이지의 상위 페이지로 이동하도록 구성해놓으면 좋겠네요!

무슨 말인지 알 것 같아요! 하지만 전체적으로 바꾸는 것은 리팩터링할때 하겠습니다.

음 이거 나의 맛집 지도 구현하면서 애슐리랑 이야기해봤는데 상황에 따라서 -1 로 구현되는게 더 자연스러운 것이 있더라구요. 명확하게 상위페이지로 이동하는 경우에만 바꾸도록 전체적으로 merge되고 나서 리팩터링 해보겠습니다 (이것저것 짤려서 기능 구현이 되어있어서요!) #173 로 새로 이슈 작성해놨어요

uk960214 · 2023-06-25T16:22:17Z

src/components/pages/BookmarkListPage/BookmarkListPage.tsx

+      {isError && error instanceof Error && (
+        <ErrorImage errorMessage={error.message} />
+      )}


오 렌더부에서 error의 클래스까지 검사해주는 게 뭔가 버거운 느낌이 드는데요.. 이걸 미리 return 문이 아닌 로직 위쪽에서 해줄 수 있는 방법은 없을까요? 그리고 이 로직대로라면 error가 Error 클래스의 인스턴스가 아닌 경우에는 오류조차 보이지 않을 것 같은데 어색하다고 느껴집니다!

현재 서버에서 에러 메시지를 보내주고 있기 때문에 error.message를 사용하기 위해 이렇게 했습니다.또한 만약 바꾸게 된다면 해당 코드가 프로젝트 전반적으로 반복되고 있기 때문에 이거 하나만 바꾸는 것이 아닌 전체적으로 ErrorBoundary로 감싸는 방식으로 해야할 것 같습니다. 따라서 다른 이슈로 해결해보도록 하겠습니다.

오 해당 코드가 전반적으로 반복되고 있다면 더더욱 반환되는 Error가 꼭 특정 타입 형식이도록 강제하는 것도 좋을 것 같아요! throw되는 오류 그 자체가 아니고 useQuery에서 반환하는 값이기 때문에 특정 오류 형식으로 항상 반환되도록 할 수 있을 것 같은데 고민해보면 좋을 것 같아요!

uk960214 · 2023-06-25T16:23:52Z

src/components/pages/MypagePage/MypagePage.tsx

+import StoreList from "components/common/StoreList/StoreList";
+import Text from "components/common/Text/Text";
+
+function MypagePage() {


오호.. MypagePage라는 네이밍은 쉽지 않네요 ㅋㅋ
분명 두 분이 함께 논의를 했다면 이 네이밍에 대해서 이야기 했을 것 같은데 어떻게 이 이름으로 결정이 됐나요?

모든 페이지에는 ~Page라고 네이밍 되어있더라구요. 그래서 저희는 프로젝트의 컨벤션을 유지하는 것이 가장 중요하다고 생각했습니다. 그렇다고 해당 페이지 이름을 마이페이지가 아닌 다른 것으로 바꾸는 것은 너무 억지스럽기도 했구요! 따라서 지금처럼 MypagePage라고 이름을 정하게 되었습니다.

혹시 MyPage로 하면 안되는 이유는 무엇인가요? 👀

약간 저희가 생각한 이유는 (페이지이름)+Page 라서 Page는 컴포넌트를 구분하기 위해 붙이는거고 해당 페이지의 이름은 Page앞에 있는 부분이라고 생각했거든요! 그냥 해당 페이지 이름 자체를 폴더명으로 해도 되는거면 MyPage로 바꾸도록 하겠습니다ㅎㅎ

src/components/pages/MypagePage/MyReviewItem/MyReviewItem.tsx

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

liswktjs

새로운 기능인 마이페이지 구현 수고하셨습니다 👍👍
블링이 남긴 부분들 제외하고 코드리뷰 했을 때 제가 남긴 리뷰는 모두 마이너해서 바로 approve로 코드리뷰 남깁니다

liswktjs · 2023-06-26T15:16:39Z

src/components/pages/MypagePage/BookmarkListPage/BookmarkListPage.tsx

+    }
+  );
+
+  const bookmarkedStoreData = data ?? [];


data를 따로 변수에 할당해서 사용하지 않아도 되지 않을까요? 혹시 이렇게 한 이유가 있을까요?

data가 undefined 형식으로 들어올 수 있어서 한번 정재해줘야 각종 버그가 일어나지 않았습니다.

liswktjs · 2023-06-26T15:19:32Z

src/components/pages/MypagePage/MyReviewItem/MyReviewItem.tsx

+          onSuccess={() => {
+            queryClient.invalidateQueries([
+              "reviewDetailStore",
+              { restaurantId: restaurant.id },
+            ]);
+          }}


해당 함수도 위의 선언된 다른 함수들 처럼 (handle~) 따로 분리해서 선언하는 것이 더 좋을 것 같습니다

넵 적용하겠습니다.

src/components/pages/MypagePage/MyReviewItem/MyReviewItem.tsx

liswktjs · 2023-06-26T15:24:48Z

src/components/pages/MypagePage/MypagePage.tsx

+import StoreList from "components/common/StoreList/StoreList";
+import Text from "components/common/Text/Text";
+
+function MypagePage() {


혹시 MyPage로 하면 안되는 이유는 무엇인가요? 👀

nan-noo

마이페이지 > 맛집 전체보기 눌렀을 때 '나의 맛집' 오른쪽에 '지도' 텍스트는 무엇인가요?

마이페이지에서 로그아웃했을 때 해당 페이지에 그대로 있습니다.

로그인하지 않고 마이페이지로 진입하면 '다시 로그인해 주세요'가 세번 정도 발생합니다!

나의 리뷰(/my-page/reviews) 페이지 또는 마이페이지에서 리뷰 수정/삭제 버튼을 누르면 가게 상세페이지로 이동합니다!

nan-noo · 2023-06-27T13:27:24Z

src/types/common/bookmarkTypes.ts

@@ -0,0 +1,10 @@
+export interface BookmarkStore {


bookmarkstore 타입이랑 store 타입이랑 큰 차이가 없어서 Pick이나 Omit을 사용하는 것도 괜찮아보여요

Omit을 사용해보겠습니다.

nan-noo · 2023-06-27T13:28:38Z

src/types/common/mypageTypes.ts

+
+export interface UserReview extends ReviewInputShape {
+  id: number;
+  restaurant: Pick<Store, "id" | "name" | "imageUrl">;


BookmarkStore가 아니라 Store에서 가져온 이유가 있을까요?

음.. 더 큰 범위로 생각했습니다. 유저가 리뷰한 가게가 꼭 북마크 가게란 법은 없으니까요!

hafnium1923 · 2023-06-30T04:46:12Z

마이페이지 > 맛집 전체보기 눌렀을 때 '나의 맛집' 오른쪽에 '지도' 텍스트는 무엇인가요?

나의 맛집 지도가 들어올 위치입니다. 현재 개발중인 다른 PR에 있는 지도뷰가 들어갈 예정입니다.

마이페이지에서 로그아웃했을 때 해당 페이지에 그대로 있습니다.

지금 로그아웃이 어떤 경로든 하나로 작동되게 되어있습니다. 마이페이지에서 로그아웃 했을 때 메인 화면으로 돌아가게 하려면 전체적용으로 하는 방법밖에 모르겠는데 그렇게 해도 되나요?

로그인하지 않고 마이페이지로 진입하면 '다시 로그인해 주세요'가 세번 정도 발생합니다!

직접 경로를 치고 들어갔을 때를 말씀하시는 것 같습니다. 확인해봤는데 fetchUserProfile -> fetchBookmarkList -> fetchUserReviewList 순서로 accessToken 확인 부분이 작동하는 것같습니다. 근데 어떻게 막아야 할 지 모르겠어요. accessToken 작동 방식도 잘 이해가 안되고 기존에 에러 처리 어떻게 진행된건지도 감만 잡았지 제대로 이해하고 있는게 아니라서 혹시 좀 힌트 주실 수 있을까요?

나의 리뷰(/my-page/reviews) 페이지 또는 마이페이지에서 리뷰 수정/삭제 버튼을 누르면 가게 상세페이지로 이동합니다!

수정했습니다!

nan-noo

지금 로그아웃이 어떤 경로든 하나로 작동되게 되어있습니다. 마이페이지에서 로그아웃 했을 때 메인 화면으로 돌아가게 하려면 전체적용으로 하는 방법밖에 모르겠는데 그렇게 해도 되나요?

네! 그렇게 하고 싶으면 그렇게 하면 됩니다ㅎㅎ 팀원과 상의 후 정하면 될 것 같아요! 컨텍스트로 가지고 있는 로그인 상태를 사용해서 리액트 라우터로 로그인 상태에 따라 이동시켜도 되겠죠!

직접 경로를 치고 들어갔을 때를 말씀하시는 것 같습니다. 확인해봤는데 fetchUserProfile -> fetchBookmarkList -> fetchUserReviewList 순서로 accessToken 확인 부분이 작동하는 것같습니다. 근데 어떻게 막아야 할 지 모르겠어요. accessToken 작동 방식도 잘 이해가 안되고 기존에 에러 처리 어떻게 진행된건지도 감만 잡았지 제대로 이해하고 있는게 아니라서 혹시 좀 힌트 주실 수 있을까요?

음 이건 예상되는 문제가 여러 갠데,

일단 리팩터링을 좀 하면 해결될 거에요! 지금 api 각각 axios에서 에러 처리 + 리액트 쿼리로도 에러 처리하면서 에러를 다루는 부분이 많이 분산되어 있는데 에러바운더리를 구현하든 뭐하든 해서 에러처리로직을 통일하면 어느정도 해결될 것 같아요!
첫번째 질문의 답처럼 리액트라우터로 로그인 여부에 따라 특정 페이지가 렌더링 되도록 정할 수도 있어요! 경로로 접근할 때 로그인 조건에 걸리면 다른 페이지를 렌더링해서 아예 fetch가 작동하지 않도록..!

+ fetch-fetch-fetch 하면서 alert 여러 번 뜨는 거는 아마 세개가 다 react query 키값이 달라서 각각의 onError가 따로 동작하는 거 같습니다

+ 지금 로그인 동작을 간단히 설명하면,
메뉴의 로그인 버튼 클릭 -> 로그인 페이지로 이동(/login) -> 로그인 요청 -> 깃헙과 백엔드에서 처리 -> accessToken 응답 -> accessToken을 세션스토리지에 저장 및 컨텍스트 isLoggedIn 상태를 true로 설정
입니다!

요 문제는 당장 안 고치셔도 됩니다! 지금까지 프로젝트에는 정말 몇몇 페이지, 기능만 제외하면 로그인 여부가 상관 없었어서 해당 기능에서 바로 로그인에 따른 에러 처리를 해서 통일된 규정이 없었습니다. 이제부턴 로그인 여부가 중요한 마이페이지 같은 기능이 많이 생겼으니까 각각 기능에 따로 에러 처리하는 방식 말고 통일된 방식으로 어떻게 구현할 지 생각하면 좋을 것 같습니다 :D

hafnium1923 · 2023-07-01T16:08:04Z

자세한 설명 감사합니다! 에러 바운더리는 이슈도 새로 작성해놔서 전체적으로 다시 리팩터링 해보면 될 것 같습니다.

말씀드린 것처럼 로그아웃을 하면 홈으로 돌아오도록 수정했습니다.

첫번째 질문의 답처럼 리액트라우터로 로그인 여부에 따라 특정 페이지가 렌더링 되도록 정할 수도 있어요! 경로로 접근할 때 로그인 조건에 걸리면 다른 페이지를 렌더링해서 아예 fetch가 작동하지 않도록..!

이거는 적용하고 싶어서 찾아보고 있긴한데 아직은 잘 모르겠어서 조금 더 공부하고 나중에 적용해보고 싶습니다. 정보 찾는것도 어렵네요ㅎㅎ..

리뷰 항상 감사드립니다. 많이 성장하고 있는 것 같아요!!

…tzip/mat.zip-front into issue166

sonarcloud · 2023-07-03T04:02:26Z

SonarCloud Quality Gate failed.

0 Bugs
0 Vulnerabilities
0 Security Hotspots
2 Code Smells

0.0% Coverage
11.6% Duplication

Catch issues before they fail your Quality Gate with our IDE extension SonarLint

ashleysyheo and others added 16 commits June 25, 2023 04:03

feat: > svg 아이콘 추가

71c562e

fix: Star 컴포넌트 사이즈 버그 수정

27674e2

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

feat: < svg 아이콘 추가

ff045ae

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

feat: 북마크 식당 목록 및 사용자 정보 조회 api 추가

59e0a4e

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

feat: 북마크 식장 목록 및 사용자 정보 조회 msw 추가, 관련 목 데이터 추가

c77c169

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

feat: BookmarkStore랑 UserProfileInformation 타입 추가

e8a53e9

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

refactor: StoreList 컴포넌트 props 타입 수정

bd50708

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

feat: BookmarkListPage 생성

6cdc291

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

feat: MenuDrawer에 로그인 했을 때 마이페이지 링크 추가

88883eb

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

feat: MypagePage 생성

d4b8bc7

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

refactor: BookmarkListPage MypagePage 하위로 이동

a84e0ea

feat: 사용자 작성 리뷰 목록 조회 api 추가

f5e6789

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

feat: MypagePage에서 나의 리뷰 보여주는 섹션 추가

236ebc8

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

feat: 사용자 작성 리뷰 조회 msw 및 목 데이터 추가

38a0e89

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

fix: fetchUserReviewList useInfiniteQuery랑 함께 사용할 때 에러 발생하는 부분 수정

cf00261

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

feat: MyReviewListPage 생성

f75e306

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

uk960214 reviewed Jun 25, 2023

View reviewed changes

ashleysyheo and others added 2 commits June 26, 2023 18:18

refactor: 나의 리뷰 아이템에서 제목 클릭 시 상세 페이지로 이동하는 기능 추가

872c6bd

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

refactor: api 변경사항 반영

ccf8a4a

Co-authored-by: Rulu <hafnium1923@users.noreply.github.com>

ashleysyheo force-pushed the issue166 branch from 80c74e9 to ccf8a4a Compare June 26, 2023 13:16

liswktjs approved these changes Jun 26, 2023

View reviewed changes

nan-noo requested changes Jun 27, 2023

View reviewed changes

hafnium1923 added 2 commits June 30, 2023 11:30

refactor: MypagePage -> MyPage로 이름 변경

0e6546a

refactor: 함수 props 분리

95c68d7

hafnium1923 added 2 commits June 30, 2023 13:53

refactor: 북마크 타입에 Omit 적용

30f118e

fix: 마이페이지 리뷰 수정/삭제 버튼 클릭시 상세페이지 이동 버그

67d3893

nan-noo approved these changes Jun 30, 2023

View reviewed changes

refacotor: 로그아웃시 홈화면으로 이동

bcc5d66

Merge branch 'develop' of https://github.com/The-Fellowship-of-the-ma…

d227f31

…tzip/mat.zip-front into issue166

hafnium1923 merged commit 07bb516 into develop Jul 3, 2023

ashleysyheo deleted the issue166 branch July 4, 2023 05:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Issue166 마이페이지(나의 맛집, 나의 리뷰보기) 추가 #168

Issue166 마이페이지(나의 맛집, 나의 리뷰보기) 추가 #168

hafnium1923 commented Jun 25, 2023 •

edited

Loading

uk960214 Jun 25, 2023

hafnium1923 Jun 26, 2023

hafnium1923 Jun 30, 2023 •

edited

Loading

uk960214 Jun 25, 2023

hafnium1923 Jun 26, 2023

uk960214 Jun 26, 2023

uk960214 Jun 25, 2023

hafnium1923 Jun 26, 2023

liswktjs Jun 26, 2023

hafnium1923 Jun 30, 2023

liswktjs left a comment

liswktjs Jun 26, 2023

hafnium1923 Jun 30, 2023

liswktjs Jun 26, 2023

hafnium1923 Jun 30, 2023

liswktjs Jun 26, 2023

nan-noo left a comment

nan-noo Jun 27, 2023

hafnium1923 Jun 30, 2023

nan-noo Jun 27, 2023

hafnium1923 Jun 30, 2023

hafnium1923 commented Jun 30, 2023 •

edited

Loading

nan-noo left a comment

hafnium1923 commented Jul 1, 2023

sonarcloud bot commented Jul 3, 2023

Issue166 마이페이지(나의 맛집, 나의 리뷰보기) 추가 #168

Issue166 마이페이지(나의 맛집, 나의 리뷰보기) 추가 #168

Conversation

hafnium1923 commented Jun 25, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

hafnium1923 Jun 30, 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

liswktjs left a 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

nan-noo left a 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

hafnium1923 commented Jun 30, 2023 • edited Loading

nan-noo left a comment

Choose a reason for hiding this comment

hafnium1923 commented Jul 1, 2023

sonarcloud bot commented Jul 3, 2023

hafnium1923 commented Jun 25, 2023 •

edited

Loading

hafnium1923 Jun 30, 2023 •

edited

Loading

hafnium1923 commented Jun 30, 2023 •

edited

Loading