멤버 별 템플릿 페이지 구현 #815

vi-wolhwa · 2024-10-18T08:42:18Z

⚡️ 관련 이슈

close #749

📍주요 변경 사항

멤버별 템플릿 페이지 구현

MyTemplatePage 라우팅 주소 변경

getMemberName API 구현

API 함수 파라미터 수정 (tagList, categoryList)

memberId를 Optional에서 필수 값으로 변경

변수명 변경 (Header.tsx)

menuOpen -> isMenuOpen

🍗 PR 첫 리뷰 마감 기한

10/20 00:00

…de-zap into feat/749-member-page

Jaymyong66

고생하셨습니다!
코멘트 몇가지 남겼으니 확인해주시고 예비군 조심히 다녀오시길,,

Jaymyong66 · 2024-10-20T07:26:17Z

frontend/src/api/members.ts

+const API_URL = process.env.REACT_APP_API_URL;
+
+export const MEMBER_API_URL = `${API_URL}${END_POINTS.MEMBERS}`;
+
+export const getMemberName = async (memberId: number) => {
+  const url = `${MEMBER_API_URL}?memberId=${memberId}`;
+
+  const response = await customFetch<GetMemberNameResponse>({
+    url,
+  });
+
+  if ('name' in response) {
+    return response;
+  }
+
+  throw new Error(response.detail);
+};


요거는 ApiClient로 리팩토링하면 좋을거 같아요~!

Jaymyong66 · 2024-10-20T07:31:35Z

frontend/src/components/TemplateCard/TemplateCard.tsx

@@ -38,7 +46,7 @@ const TemplateCard = ({ template }: Props) => {
        <Flex width='100%' justify='space-between' gap='1rem'>
          <Flex gap='0.75rem' flex='1' style={{ minWidth: '0' }}>
            {isPrivate && <PrivateIcon width={ICON_SIZE.X_SMALL} color={theme.color.light.secondary_800} />}
-            <Flex align='center' gap='0.25rem' style={{ minWidth: '0' }}>
+            <S.AuthorInfoContainer onClick={handleAuthorClick} style={{ cursor: 'pointer' }}>


여기서 cursor만 인라인 스타일로 준 이유가 혹시 있을까용?
추가로 useNavigate도 좋지만 만약 라우팅만 변경한다면 Link를 쓰는 것도 괜찮아보이네요

Jaymyong66 · 2024-10-20T07:33:58Z

frontend/src/pages/MyTemplatesPage/components/TemplateGrid/TemplateGrid.tsx

-          <Link to={`/templates/${template.id}`} key={template.id}>
+          <Link to={END_POINTS.template(template.id)} key={template.id}>


매직넘버가 있었네요~!! 굿굿

Jaymyong66 · 2024-10-20T08:16:09Z

frontend/src/components/Header/Header.tsx

+            {!isChecking && isLogin && memberId && (
+              <NavOption route={END_POINTS.memberTemplates(memberId)} name='내 템플릿' />
+            )}


PR 메시지에 MyTemplatePage 라우팅 주소 변경 관련해서 변경된 이유를 함께 설명해주면 리뷰하기 편할 것 같아요~!

Jaymyong66 · 2024-10-20T08:18:55Z

frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx

 const TemplateEditPage = ({ template, toggleEditButton }: Props) => {
-  const categoryProps = useCategory(template.category);
+  const {
+    memberInfo: { memberId },
+  } = useAuth();

+  const categoryProps = useCategory({ memberId: memberId!, initCategory: template.category });
  const [title, handleTitleChange] = useInput(template.title);
  const [description, handleDescriptionChange] = useInput(template.description);


이게 memberId의 타입은 number | undefined인데, !로 단언해서 쓰는게 조금 걸리네요.
로그인한 유저의 memberId와 query로 쓰는 memberId를 분리하거나 undefined를 그냥 제거하는 방향도 생각해봐야겠네요.

혹은 해당 쿼리를 보낼 때, 로그인하지 않았다면 에러를 발생시키는 방법도 있겠네요.

!로 단언해서 쓰기보다는 타입 가드를 통해 안전하게 사용하는게 추후 디버깅에 용이할 것 같다는 생각이 듭니다..!

Jaymyong66 · 2024-10-20T08:24:42Z

frontend/src/pages/TemplatePage/TemplatePage.tsx

+  const handleAuthorClick = () => {
+    if (template?.member?.id) {
+      navigate(END_POINTS.memberTemplates(template.member.id));
+    }
+  };


template 부분을 SuspenseQuery로 하면 해당 옵셔널 체이닝을 제거할 수 있을까요?

Jaymyong66 · 2024-10-20T08:29:03Z

frontend/src/routes/endPoints.ts

+  MEMBERS: '/members',
+  MEMBERS_TEMPLATES: '/members/:memberId/templates',
+  memberTemplates: (memberId: number) => `/members/${memberId}/templates`,


혹시 :memberId가 맨뒤로 가지 못하는 이유가 무엇이었나요?!

API endpoint와 route를 분리하긴 해야겠네요,,

Jaymyong66 · 2024-10-20T08:30:16Z

frontend/src/types/api.ts

+export interface GetMemberNameResponse {
+  name: string;
+}


Get을 빼도 될거 같긴 하지만 굳이 반영 안해도 될 것 같습니다~

제 생각도 Get 빼도 될 것 같아요~

Hain-tain

전반적으로 memberId를 단언해서 사용하거나 상위에서 받은 것이 없는 경우 자신의 아이디를 넣어준 경우가 있는데, 조금 더 안전하게 사용하는 방향으로 리펙토링 해봐도 좋을 것 같아요..!

Hain-tain · 2024-10-21T09:45:08Z

frontend/src/pages/MyTemplatesPage/hooks/useFilteredTemplateList.ts

+  const { memberInfo } = useAuth();
+  const memberId = passedMemberId ?? memberInfo.memberId;


이미 상위(MyTemplatePage)에서 memberId를 주고있는데 이렇게 처리해 준 이유가 있을까요?
안전성을 확보하기 위해 Props 의 옵셔널 체이닝을 제거해보면 어떨까요?

interface Props { memberId: number; }

Hain-tain · 2024-10-21T09:46:03Z

frontend/src/types/api.ts

+export interface GetMemberNameResponse {
+  name: string;
+}


제 생각도 Get 빼도 될 것 같아요~

Hain-tain · 2024-10-21T09:51:41Z

frontend/src/routes/endPoints.ts

+  MEMBERS_TEMPLATES: '/members/:memberId/templates',
+  memberTemplates: (memberId: number) => `/members/${memberId}/templates`,


작은 제안사항입니다! (이전에도 구두로 한 번 얘기했던 내용이었는데 월하도 긍정적이었던 걸로 기억해서 한 번더 글로 남겨봅니다.)

/members 라고 다 써주면 무척 명시적이긴 하지만 클라이언트 라우트 주소가 다소 길어지는 느낌이 들어서 /m 이렇게만 쓰면 어떨까요??

실제로 저희 LMS 또한 이렇게 1글자로 라우팅 처리 해주기도 하더라고요! (u 는 user의 약자로 추정됩니다)

Hain-tain · 2024-10-21T09:53:18Z

frontend/src/queries/templates/useTemplateListQuery.ts

+  const { memberInfo } = useAuth();
+  const memberId = passedMemberId ?? memberInfo.memberId;


이쪽도 위 코멘트와 마찬가지입니다. 위에서 확실하게 내려주는 방식으로 해두어야 헷갈리거나 오류가 날 여지가 적을 것 같습니다..!

Hain-tain · 2024-10-21T10:02:28Z

frontend/src/pages/TemplateEditPage/TemplateEditPage.tsx

 const TemplateEditPage = ({ template, toggleEditButton }: Props) => {
-  const categoryProps = useCategory(template.category);
+  const {
+    memberInfo: { memberId },
+  } = useAuth();

+  const categoryProps = useCategory({ memberId: memberId!, initCategory: template.category });
  const [title, handleTitleChange] = useInput(template.title);
  const [description, handleDescriptionChange] = useInput(template.description);


!로 단언해서 쓰기보다는 타입 가드를 통해 안전하게 사용하는게 추후 디버깅에 용이할 것 같다는 생각이 듭니다..!

…de-zap into feat/749-member-page

Hain-tain · 2024-10-22T07:49:30Z

일단 배포일이므로 추후 리펙토링합시다~!!

Jaymyong66 · 2024-10-22T07:49:51Z

frontend/src/pages/MyTemplatesPage/MyTemplatePage.tsx

+  const { memberId: routeMemberId } = useParams<{ memberId: string }>();
+  const memberId = Number(routeMemberId);
+
  const {
-    memberInfo: { name },
+    memberInfo: { memberId: currentMemberId },
  } = useAuth();
+  const {
+    data: { name },
+  } = useMemberNameQuery({ memberId });


다음 부분에서 memberId 변수명이 겹칩니다. 배포가 급해 임시 방편으로 기존의 memberID를 currentMemberId로 바꾸어 최대한 변경 사항을 줄였으니 추후 리팩토링 부탁드립니다.

Jaymyong66

배포 기한때문에 추후 변경 부탁드립니당

vi-wolhwa added 4 commits October 18, 2024 15:47

feat(src): 엔드포인트 MY_TEMPLATES를 MEMBER_TEMPLATES로 변경

5e169df

feat(src): 템플릿페이지, 템플릿카드에서 작성자 클릭 시 리다이렉트 기능 구현

d67b748

refactor(api): 태그/카테고리 API에서 memberId를 optional에서 필수로 변경

65429d0

feat(src): getMemberName API 구현 및 MyTemplatePage에서 사용

cddbc8a

vi-wolhwa added feature 기능 추가 FE 프론트엔드 labels Oct 18, 2024

vi-wolhwa added this to the 6차 스프린트 🦴 milestone Oct 18, 2024

vi-wolhwa requested review from Jaymyong66 and Hain-tain October 18, 2024 08:42

vi-wolhwa self-assigned this Oct 18, 2024

Merge branch 'dev/fe' of https://github.com/woowacourse-teams/2024-co…

f8a37e2

…de-zap into feat/749-member-page

Jaymyong66 requested changes Oct 20, 2024

View reviewed changes

Hain-tain reviewed Oct 21, 2024

View reviewed changes

Jaymyong66 added 4 commits October 22, 2024 16:27

refactor(api): members - API 엔드포인트 변경

773295e

feat(MyTemplatesPage): 본인 페이지가 아닐 때, 템플릿 선택 삭제 버튼 제거

3441a1b

feat(CategoryFilterMenu): 본인 페이지가 아닐 때, 카테고리 편집 버튼 제거

8e4f69a

Merge branch 'dev/fe' of https://github.com/woowacourse-teams/2024-co…

75c7415

…de-zap into feat/749-member-page

Jaymyong66 reviewed Oct 22, 2024

View reviewed changes

Jaymyong66 added 2 commits October 22, 2024 16:52

feat(routes): 전체 페이지 Suspense를 LoadingBall로 변경

6b65bdb

chore: version을 1.1.5 업데이트

d90c0f4

Hain-tain approved these changes Oct 22, 2024

View reviewed changes

Jaymyong66 approved these changes Oct 22, 2024

View reviewed changes

Hain-tain merged commit 421ecbc into dev/fe Oct 22, 2024
3 checks passed

Hain-tain deleted the feat/749-member-page branch October 22, 2024 07:54

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

멤버 별 템플릿 페이지 구현 #815

멤버 별 템플릿 페이지 구현 #815

vi-wolhwa commented Oct 18, 2024

Jaymyong66 left a comment

Jaymyong66 Oct 20, 2024

Jaymyong66 Oct 20, 2024

Jaymyong66 Oct 20, 2024

Jaymyong66 Oct 20, 2024

Jaymyong66 Oct 20, 2024

Hain-tain Oct 21, 2024

Jaymyong66 Oct 20, 2024

Jaymyong66 Oct 20, 2024

Jaymyong66 Oct 20, 2024

Hain-tain Oct 21, 2024

Hain-tain left a comment

Hain-tain Oct 21, 2024

Hain-tain Oct 21, 2024

Hain-tain Oct 21, 2024

Hain-tain Oct 21, 2024

Hain-tain Oct 21, 2024

Hain-tain commented Oct 22, 2024

Jaymyong66 Oct 22, 2024

Jaymyong66 left a comment

		<Link to={`/templates/${template.id}`} key={template.id}>
		<Link to={END_POINTS.template(template.id)} key={template.id}>

		const { memberInfo } = useAuth();
		const memberId = passedMemberId ?? memberInfo.memberId;

		MEMBERS_TEMPLATES: '/members/:memberId/templates',
		memberTemplates: (memberId: number) => `/members/${memberId}/templates`,

멤버 별 템플릿 페이지 구현 #815

멤버 별 템플릿 페이지 구현 #815

Conversation

vi-wolhwa commented Oct 18, 2024

⚡️ 관련 이슈

📍주요 변경 사항

🍗 PR 첫 리뷰 마감 기한

Jaymyong66 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

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

Hain-tain 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

Hain-tain commented Oct 22, 2024

Choose a reason for hiding this comment

Jaymyong66 left a comment

Choose a reason for hiding this comment