[Feat] 다른 유저 프로필 보기 #160

minjeong9919 · 2024-07-15T06:57:20Z

🚀 작업 내용

다른 유저 프로필 hover 시 자세하기 보기 기능 구현
비회원일 경우 회원 기능 접근 시 막도록 설정
data null 처리

📝 참고 사항

🖼️ 스크린샷

🚨 관련 이슈 (이슈 번호)

[Feat] 다른 유저 프로필 보기 #150

✅ 체크리스트

Code Review 요청
Label 설정
PR 제목 규칙에 맞는지 확인

bokeeeey

LGTM !

bokeeeey · 2024-07-16T02:14:41Z

src/app/community/_components/Comment.tsx

+    setIsOpenProfileCard(true);
+  };
+
+  useEffect(() => {}, [commentPositionTop]);


이건 꼭 필요한건가요?

bokeeeey · 2024-07-16T02:15:06Z

src/app/community/_components/Comment.tsx

@@ -84,14 +100,19 @@ export default forwardRef<HTMLDivElement, CommentProps>(function Comment({ cardI

  const handleClickReport = () => {};


아무 동작도 안하는 함수인듯 한데 필요한가요?

bokeeeey · 2024-07-16T03:55:45Z

src/app/community/_components/PostCardDetailModal/PostCardDetailModal.tsx

  const { data, refetch } = useQuery<PostCardListResponseData>({
    queryKey: ['postData', cardId],
    queryFn: () => getPostDetail(cardId),


Suggested change

const { data, refetch } = useQuery<PostCardListResponseData>({

queryKey: ['postData', cardId],

queryFn: () => getPostDetail(cardId),

const { data: 여기 네이밍해서 사용하는게 더 좋을거같기도 해요, refetch } = useQuery<PostCardListResponseData>({

queryKey: ['postData', cardId],

queryFn: () => getPostDetail(cardId),

bokeeeey · 2024-07-16T03:56:19Z

src/app/community/_components/PostCardDetailModal/PostCardDetailModal.tsx

+      if (!userData) {
+        return toast.error('로그인이 필요합니다.');
+      }


로그인이 필요하면 바로 모달로 연결해주는건 어떤가요?

이미 모달 열려있는 상태에서 비회원 유저가 댓글 쓸 때의 상황이라 사용자한테 불편할 것 같아요!

bokeeeey · 2024-07-16T04:06:30Z

src/app/community/_components/UserProfileCard.tsx

+    }
+  }, [isOpenProfileCard, userId, refetch, positionTop, isAboveProfile]);
+
+  return positionTop && positionTop === 0 ? null : (


Suggested change

return positionTop && positionTop === 0 ? null : (

return positionTop && positionTop === 0 ? null : (

여기서 positionTop이 없으면 그냥 null처리 하셔서 아무것도 안보여주시는식으로 설계하셨는데
아무것도 없는 데이터를 보여줘도 괜찮은 컴포넌트인가요?

그게 아니라면 사용처에서 useState로 관리하는게 더 낫지않을까요?

data 가 null 값이어도 컴포넌트 내부 내용의 구조?는 그대로 유지 되기 때문에 아무것도 안보여줘도 괜찮을 것 같다고 생각했습니다! 아니면 데이터가 null 값이었을 때의 추가적인 처리를 선호하시는건가요?

bokeeeey · 2024-07-16T04:08:10Z

src/app/community/_components/UserProfileCard.tsx

+        <div>
+          <SpinLoading />
+        </div>


div 태그가 아무런 기능을 하고있는것 같지 않아서 없어도 될거같아요

armd482

수고하셨습니다~

armd482 · 2024-07-16T06:44:10Z

src/api/usersAPI.ts

+    const result = await res.json();
+    const { data } = result;


구조 분해로 줄일 수 있을 것 같아요

Suggested change

const result = await res.json();

const { data } = result;

const { data }= await res.json();

armd482 · 2024-07-16T07:13:47Z

src/app/community/_components/UserProfileCard.tsx

+  useEffect(() => {
+    const VIEWPORT_HEIGHT = window.innerHeight;
+
+    if (isOpenProfileCard) {
+      refetch();
+      if (positionTop && positionTop > VIEWPORT_HEIGHT / 2) {
+        setIsAboveProfile(true);
+      }
+    }
+  }, [isOpenProfileCard, userId, refetch, positionTop, isAboveProfile]);


구조적으로 봤을 때 의존성 변수가 많은 useEffect 내부에 refetch가 들어가 있습니다.
이는 불필요한 refetch가 발생할 수 있을 것 같아요.
제가 코드를 제대로 이해한 거라면, 저라면 userData를 사용처에서 prop으로 전달하고, 사용자가 마우스를 올렸을 때 데이터를 가져오는 식으로 할 것 같습니다. 아니면 refetch만 따로 다른 useEffect에 분리할 것 같아요

isAboveProfile을 의존성배열에 넣은 이유가 있을까요?
setState로 값이 변경되면서 한번 더 실행될 것 같은데...

isAboveProfile을 의존성배열에 안 넣으면 hover 할 때마다 프로필의 위치에 따라 유저 카드의 위치를 지속적으로 바꿔줘야하는데 그렇게 안되더라구용

구조적으로 봤을 때 의존성 변수가 많은 useEffect 내부에 refetch가 들어가 있습니다. 이는 불필요한 refetch가 발생할 수 있을 것 같아요. 제가 코드를 제대로 이해한 거라면, 저라면 userData를 사용처에서 prop으로 전달하고, 사용자가 마우스를 올렸을 때 데이터를 가져오는 식으로 할 것 같습니다. 아니면 refetch만 따로 다른 useEffect에 분리할 것 같아요

그렇겠군요,,, 이 부분도 다음 구현 시에도 잘 고려해야겠어요,,!!!
userData를 가져와서 보여주는 것까지가 userDetailCard 컴포넌트의 역할이라고 생각하기 때문에 도원님이 제시해주신 방안 중에서 refetch만 따로 다른 useEffect로 분리하는 방법으로 수정 하겠습니다

armd482 · 2024-07-16T07:16:53Z

src/app/community/_components/UserProfileCard.tsx

+          <div className={cn('profile-image')}>
+            <Image src={userInfo?.imgUrl || keydeukProfileImg} alt='프로필 이미지' fill sizes='12rem' />
+          </div>
+          <div className={cn('info-wrapper')}>
+            <p className={cn('nickname')}>{userInfo?.nickname || '사용자를 찾을 수 없습니다.'}</p>
+            <p>
+              <strong>email:</strong> {userInfo?.email}
+            </p>
+            <p>
+              <strong>birthday:</strong> {userInfo?.birth}
+            </p>
+            <p>
+              <strong>phone:</strong> {userInfo?.phone}
+            </p>
+            <p>
+              <strong>gender:</strong> {userInfo?.gender}
+            </p>


userInfo를 못 가져왔을 때는 아예 안 띄우는 식으로 또는 아예 사용자 정보를 찾을 수 없을 때 띄울 컴포넌트를 보여주는 것도 좋을 것 같습니다

인스타가 약간 저런 식으로 보여주길래 따라해봤슴니다 ㅎㅎㅎ 아예 안뜨도록 하는 것으로 바꿀가요오?!

armd482 · 2024-07-16T07:22:49Z

src/app/community/_components/UserProfileCard.module.scss

+  width: 45rem;
+  height: 15rem;
+  padding: 1rem;
+  animation: fade-in 1s cubic-bezier(0.39, 0.575, 0.565, 1) both;


애니메이션 속도 너무 느린 것 같아요.
0.7초에서 0.5초 정도 어떠신가요?

armd482 · 2024-07-16T08:27:55Z

src/app/community/_components/PostCardDetailModal/PostCardDetailModal.tsx

    const removeEvent = addEnterKeyEvent({ element: { current: commentRef }, callback: handleSubmitComment });
    return () => {
      removeEvent();
    };


그냥 form으로 만드는 건 별로일까요? 그럼 따로 이벤트 등록 안 해도 될 것 같아요

form으로 만들면 엔터키로 제출이 가능하나요? 그래도 따로 이벤트 등록 해야하지 않나요?!

Young2un

라뷰~🫶🏻

Young2un · 2024-07-26T04:04:06Z

src/app/community/_components/UserProfileCard.tsx

+          <div className={cn('info-wrapper')}>
+            <p className={cn('nickname')}>{userInfo?.nickname || '사용자를 찾을 수 없습니다.'}</p>
+            <p>
+              <strong>email:</strong> {userInfo?.email}


시멘틱태그 다양하게 쓰는거 좋은데요~

Young2un · 2024-07-31T09:21:33Z

src/app/community/_components/PostCard.tsx

  const ApdatedDate = new Date(updateAt);
  const timeToString = calculateTimeDifference(ApdatedDate);


호옥시 apdate 오타인가용?

Young2un · 2024-07-31T09:32:48Z

src/components/ImageZoom/ImageZoom.tsx

+
+import classNames from 'classnames/bind';
+import { useState, MouseEvent, useRef, SyntheticEvent } from 'react';
+import Image, { StaticImageData } from 'next/image';


오 신기..

Young2un · 2024-07-31T09:36:37Z

src/components/ImageZoom/ImageZoom.tsx

+interface Position {
+  left: number;
+  top: number;
+}
+
+interface ScannerProps {
+  position: Position;
+}


먼가 신기해서 내장 타입은 없나 찾아봤는데

type Position = Pick<DOMRect, 'left' | 'top'>;

이렇게 쓸 수 도 있다고 하네용~!~! 참고하셔용

워낙 간단해서 이방법을 쓰면 복잡도가 올라갈 수 도 있다네용! 수정할 필요는 없습니다!!

Young2un · 2024-07-31T09:41:50Z

src/components/ImageZoom/ImageZoom.tsx

+interface ImageZoomProps {
+  image: string | StaticImageData;
+  alt: string;
+  width: number;
+  height: number;
+}


Suggested change

interface ImageZoomProps {

image: string | StaticImageData;

alt: string;

width: number;

height: number;

}

interface ImageZoomProps extends ComponentPropsWithoutRef<typeof Image> {

width: number;

height: number;

}

이거도 그냥 참고만!! 최근에 ComponentPropsWithoutRef에 대해 배워서 공유 합니당~! 이렇게 하면 이미지의 기본속성타입을 가져올 수 있어용!

오ㅗ오ㅗ옹옹 완젼 꿀팁,,,,

minjeong9919 added 16 commits July 9, 2024 12:31

Feat: 유저 프로필 클릭 시 정보 카드 열리도록 기능 추가

84871ea

Feat: 댓글 유저 프로필 클릭 시에 유저정보카드가 열리도록 구현

cf172b9

Fix: 정렬 드롭다운 클릭 시 실시간 반영되지 않는 이슈 해결

a967dc8

Feat: 유저 정보 연결 및 애니메이션 추가

e45aa4f

Refactor: 모든 댓글 팝오버 하나의 상태로 관리

73f7437

Refactor: 유저 정보 카드에 프로필 이미지 추가

5c215d5

Merge: 무한 스크롤 댓글 구현 브랜치 merge 및 충돌 해결

e877e19

Style: css 수정

baa6210

Feat: 댓글 위치에 따라 프로필 카드 위치 변경

8bfbd62

Style: css 클래스명 수정

82cc5e7

Refactor: 닉네임 Hover 시에도 유저 프로필 카드가 보이도록 구현

9c20f3b

Merge: 'develop'브랜치 Pull

f37dacb

Feat: 내 게시글 페이지 데이터 null 처리

e08e0d9

Feat: 글 작성하기 버튼 클릭 시 로그인이 안되어있으면 모달창 열리도록 구현

34c0a7f

Refactor: 커뮤니티 페이지 레이아웃 구조 변경

0233a81

Refactor: 댓글 작성 비회원의 경우 처리

2aecbd7

minjeong9919 added the ✨ Component 기능 개발 label Jul 15, 2024

minjeong9919 requested review from ggjiny, armd482, Young2un and bokeeeey July 15, 2024 06:57

minjeong9919 self-assigned this Jul 15, 2024

minjeong9919 linked an issue Jul 15, 2024 that may be closed by this pull request

[Feat] 다른 유저 프로필 보기 #150

Closed

bokeeeey approved these changes Jul 16, 2024

View reviewed changes

armd482 approved these changes Jul 16, 2024

View reviewed changes

minjeong9919 added 3 commits July 25, 2024 10:13

Refactor: 피드백 반영

64f2c7e

Feat: 이미지 zoom 스캐너 구현

67ccc7c

Feat: 사진 확대 기능 구현

322217e

minjeong9919 closed this Jul 29, 2024

minjeong9919 deleted the 150-feat-다른-유저-프로필-보기 branch July 29, 2024 01:49

minjeong9919 reopened this Jul 29, 2024

minjeong9919 added 10 commits July 29, 2024 10:52

Refactor: 확대 비율 조절

82ef2ec

Refactor: image 에러 처리

550190c

Merge: develop 브랜치 merge

820cc94

Refactor: 리뷰 작성 버튼 유저 데이터 가져오도록 수정

24fa10a

Refactor: hover 시에 popover 아이콘이 나오도록 수정

085632c

Refactor: 커뮤니티 글 작성 버튼 클릭 시에 주문 내역 가져오도록 수정

99996bd

Refactor: early return 문으로 수정

2aba1d9

Refactor: onLoadingComplete에서 onLoad로 수정

0ccde5c

Fix: 경고문 해결

bf83195

Design: 커뮤니티 글 작성 버튼 hover color 추가

106a7ed

Young2un approved these changes Jul 31, 2024

View reviewed changes

Refactor: 피드백 반영

4504451

minjeong9919 merged commit 8cfff52 into develop Aug 5, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Feat] 다른 유저 프로필 보기 #160

[Feat] 다른 유저 프로필 보기 #160

minjeong9919 commented Jul 15, 2024

bokeeeey left a comment

bokeeeey Jul 16, 2024

bokeeeey Jul 16, 2024

bokeeeey Jul 16, 2024

bokeeeey Jul 16, 2024

minjeong9919 Jul 25, 2024

bokeeeey Jul 16, 2024

bokeeeey Jul 16, 2024

minjeong9919 Jul 25, 2024

bokeeeey Jul 16, 2024

armd482 left a comment

armd482 Jul 16, 2024

armd482 Jul 16, 2024

armd482 Jul 16, 2024

minjeong9919 Jul 25, 2024

minjeong9919 Jul 25, 2024

armd482 Jul 16, 2024

minjeong9919 Jul 25, 2024

armd482 Jul 16, 2024

armd482 Jul 16, 2024

minjeong9919 Jul 25, 2024

Young2un left a comment

Young2un Jul 26, 2024

Young2un Jul 31, 2024

Young2un Jul 31, 2024

Young2un Jul 31, 2024 •

edited

Loading

Young2un Jul 31, 2024

minjeong9919 Aug 5, 2024

		@@ -84,14 +100,19 @@ export default forwardRef<HTMLDivElement, CommentProps>(function Comment({ cardI

		const handleClickReport = () => {};

	return positionTop && positionTop === 0 ? null : (
	return positionTop && positionTop === 0 ? null : (

	const result = await res.json();
	const { data } = result;
	const { data }= await res.json();

		const ApdatedDate = new Date(updateAt);
		const timeToString = calculateTimeDifference(ApdatedDate);

[Feat] 다른 유저 프로필 보기 #160

[Feat] 다른 유저 프로필 보기 #160

Conversation

minjeong9919 commented Jul 15, 2024

🚀 작업 내용

📝 참고 사항

🖼️ 스크린샷

🚨 관련 이슈 (이슈 번호)

✅ 체크리스트

bokeeeey 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

armd482 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

Young2un 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

Young2un Jul 31, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Young2un Jul 31, 2024 •

edited

Loading