[Wip] 공통 컴포넌트 제작(4-1) UserContentBlock #23

loevray · 2024-01-02T02:43:32Z

작업 사항

프로필 이미지 + 닉네임 + 내용 + 서브컨텐츠(날짜 수정,삭제 등)을 추상화한 UserContentBlock을 제작하였습니다
Footer컴포넌트의 props를 rest로가져와서 Footer컴포넌트 최상단 컴포넌트인 Flex에 적용하였습니다 =>외부에서 스타일 주기 편하게
storybook과 react-router-dom의 호환을 위하여 addon도 추가하였습니다

PR Point

props가 뭔가 많은거같기도 하고 아닌것 같기도 합니다~ 너무 많다고 생각되시면 말씀해주세요
href를 props로 받아와서 navigate해줄수 있습니다
onSubContentClick을 props로 받아와서 삭제등에 대응할수 있게 하였습니다
onNavigate를 내부에서 구현하는게 맞는지 의문이듭니다. props로 밖에서 onClick으로 전달할수 있어서...고민이 됩니다

참고사항

green, z-index도 테마에 추가하였습니다.

- UserContentBlock은 프로필사진, 닉네임, 내용으로 구성되어있습니다. - 메시지, 알람, 댓글리스트에서 사용 가능할 것으로 예상됨

- 둘 다 props로 받아옵니다

- storybook-addon-react-router-v6패키지입니다

- 7일전 같이 날짜 나타낼때 쓰면 좋아보여서 넣었습니다

- 온라인, 오프라인 나타냅니다

…pen_Hoil into feature/commonComponentUserContentBlock

- 외부에서 차크라ui처럼 주입 가능

- 테마파일 zIndecies추가하였습니다

JaeHyunGround

고생하셨습니다 !! :)

JaeHyunGround · 2024-01-02T03:01:09Z

src/components/Footer/index.tsx

-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEADER_HEIGHT,
-}: FooterProps) => {
+const Footer = ({ ...props }: FlexProps) => {


FlexProps 로 받아주면 ...props 도 대처가 되는군요 !! 유익한 기능을 알아갑니다 :)

JaeHyunGround · 2024-01-02T03:03:09Z

src/theme/index.ts

@@ -64,4 +67,7 @@ export const theme = extendTheme({
  sizes: {
    icon: '2.4rem',
  },
+  zIndices: {


이건 z-index를 의미하는 것이겠죠 ??!?

네 맞습니다 chakra ui 링크에서 theme-key로 되어있는 부분이 테마변수명입니다!

아하 확인했습니다 !!

whdgur5717 · 2024-01-02T03:15:19Z

src/components/common/UserContentBlock/index.tsx

+          userImageSize && typeof userImageSize === 'string'
+            ? userImageSize
+            : `${userImageSize}px`
+        }


이 부분이 하나의 함수로 처리되어도 좋을 것 같습니다

좋습니다 numberToPixel 이런 함수로 만들어서 사용해보겠습니다 ㅎㅎ

whdgur5717 · 2024-01-02T03:20:23Z

src/components/common/UserContentBlock/index.tsx

+        {isOnline ? (
+          <AvatarBadge
+            boxSize="14px"
+            border="2px solid white"
+            bg="green.100"
+            right="5%"
+            bottom="5%"
+          />
+        ) : null}


isOnline && 이런 식으로 처리해도 좋을 것 같습니다

넵 수정사항 반영하겠습니다

whdgur5717 · 2024-01-02T03:23:48Z

src/components/common/UserContentBlock/index.tsx

+            right="0"
+            zIndex="normal"
+            cursor={onSubContentClick && 'pointer'}
+            onClick={() => onSubContentClick && onSubContentClick()}


지금 최상위 컴포넌트에도 click 이벤트가 있고, Text에도 이벤트가 있는데 관련해서 문제는 없는지 궁금합니다.
해당 컴포넌트 클릭 시 url 이동 말고 필요한 다른 이벤트가 뭔가 생각이 잘 안나네요

기획중 둘을 동시에 사용하는 경우가 없었습니다. 아직 정해지지 않은 부분이기도 하구요

알림,메시지는 최상위 컴포넌트 클릭시 페이지 이동

댓글부분에서는 subcontent클릭시 삭제기능. => 이때는 아직 정해지지 않았지만, 아마 사용하진 않을 것 같습니다

whdgur5717 · 2024-01-02T03:27:13Z

src/components/common/UserContentBlock/index.tsx

+interface UserContentBlockProps extends FlexProps {
+  userImage?: string;
+  userImageSize?: string | number;
+  isOnline?: boolean;
+  username: string;
+  content: string;
+  subContent?: string;
+  usernameFontSize?: string | number;
+  contentFontSize?: string | number;
+  href?: string;
+  onSubContentClick?: () => void;
+}


정말 별건 아니지만... username , content 관련 속성들이 정렬되면 좋을 것 같습니다

{username, usernameFontSize, content, contentFontsize }

음 이거는 컨벤션으로 정해도 될만큼 중요해보이네요
항상 꼼꼼하게 봐주셔서 감사합니다 ㅎㅎ

whdgur5717

고생하셨습니다!

props는 다 필요한거라 괜찮은 것 같습니다
저도 뭔가 컴포넌트의 역할 상 이동까지 담당하는 게 좀 과도하지 않나 싶긴 합니다.. 나중에 이동이 아니라 다른 걸 할 수도 있기 때문에 props로 전달한 일만 하는 게 좀 좋아보이긴 합니다

- 외부에서 onClick으로 주입가능

loevray added 17 commits January 1, 2024 22:38

💄 UserContentBlock 레이아웃 기초 작성

681f8b4

- UserContentBlock은 프로필사진, 닉네임, 내용으로 구성되어있습니다. - 메시지, 알람, 댓글리스트에서 사용 가능할 것으로 예상됨

💄 UserContentBlock 프롭스 할당 및 레이아웃 완성

37fe0db

✨ UserContentBlock컴포넌트 navigate추가 및 아바타 클릭이벤트 받아올수 있게 추가

b5e49d4

- 둘 다 props로 받아옵니다

➕ react-router-dom을 storybook에서 사용하기위한 addon 추가

90662ca

- storybook-addon-react-router-v6패키지입니다

✨ UserContentBlock storybook에 withRouter추가하여 router관련 오류 제거

99dba99

💄 UserContentBlock에 subcontent추가

8eb509f

- 7일전 같이 날짜 나타낼때 쓰면 좋아보여서 넣었습니다

🎨 UserContentBlock 컴포넌트 이미지 클릭 이벤트 핸들러 제거

3c68ef1

💄 UserContentBlock에 isOnline프롭스로 판단하여 AvatarBadge 추가

d01af74

- 온라인, 오프라인 나타냅니다

✨ UserContentBlock storybook에 argTypes 추가 및 기본값 설정

a78a73c

Merge branch 'dev' of https://github.com/prgrms-fe-devcourse/FEDC5_do…

e4c5e5d

…pen_Hoil into feature/commonComponentUserContentBlock

🎨 Footer컴포넌트 props타입을 flexbox타입으로 변경

8cae1a7

- 외부에서 차크라ui처럼 주입 가능

🎨 Footer 컴포넌트 props를 전부 rest로 받아오게 변경

c9c6e54

💄 UserContentBlock subcontent 포지션 absolute로 변경 및 테마 수정

fbf84af

- 테마파일 zIndecies추가하였습니다

🎨 UserContentBlock 프롭스 변경 및 타입 FlexProps상속

b3c8cc7

🎨 UserContentBlock isOnline 조건문 변경 및 테마 green색상 추가

254f253

💄 UserContentBlock Avatar에 그림자 추가

96f4b06

🎨 subcontent에 onClick핸들러 등록시 커서모양 변경및 등록

4d42ced

loevray added ✨feature 기능 개발 💄style UI/스타일 수정 👀 리뷰 필요 labels Jan 2, 2024

loevray requested review from JaeHyunGround, SeungHyune and whdgur5717 January 2, 2024 02:43

loevray self-assigned this Jan 2, 2024

JaeHyunGround approved these changes Jan 2, 2024

View reviewed changes

whdgur5717 approved these changes Jan 2, 2024

View reviewed changes

loevray added 3 commits January 2, 2024 12:34

🎨 UserContentBlock isOnline조건부 렌더링 삼항연산자에서 &&로 변경

fd1574b

🎨 UserContentBlock props와 type 정렬

5f65d70

🎨 UserContentBlock 내부 href프롭스 및 useNavigate로직 삭제

9f0bfbb

- 외부에서 onClick으로 주입가능

loevray merged commit e410c29 into dev Jan 2, 2024

loevray deleted the feature/commonComponentUserContentBlock branch January 2, 2024 03:40

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Wip] 공통 컴포넌트 제작(4-1) UserContentBlock #23

[Wip] 공통 컴포넌트 제작(4-1) UserContentBlock #23

loevray commented Jan 2, 2024 •

edited

Loading

JaeHyunGround left a comment

JaeHyunGround Jan 2, 2024

JaeHyunGround Jan 2, 2024

loevray Jan 2, 2024

JaeHyunGround Jan 2, 2024

whdgur5717 Jan 2, 2024

loevray Jan 2, 2024

whdgur5717 Jan 2, 2024

loevray Jan 2, 2024

whdgur5717 Jan 2, 2024

loevray Jan 2, 2024

whdgur5717 Jan 2, 2024

loevray Jan 2, 2024

whdgur5717 left a comment •

edited

Loading

[Wip] 공통 컴포넌트 제작(4-1) UserContentBlock #23

[Wip] 공통 컴포넌트 제작(4-1) UserContentBlock #23

Conversation

loevray commented Jan 2, 2024 • edited Loading

작업 사항

관련 이슈

PR Point

참고사항

JaeHyunGround 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

Choose a reason for hiding this comment

Choose a reason for hiding this comment

whdgur5717 left a comment • edited Loading

Choose a reason for hiding this comment

loevray commented Jan 2, 2024 •

edited

Loading

whdgur5717 left a comment •

edited

Loading