[#50] ✨ 공통 컴포넌트 dropdown 개발 #111

KingNono1030 · 2024-11-18T15:23:31Z

📌 PR 템플릿

🏷️ PR 타입 (PR Type)

아래 해당 사항에 체크해 주세요.

🐛 버그 수정 (Bugfix)
✨ 기능 개발 (Feature)
🎨 코드 스타일 변경 (Code style update) - 포매팅, 로컬 변수 등
♻️ 리팩토링 (Refactoring) - 기능 변화 없음, API 변경 없음
🛠️ 빌드 관련 변경 (Build related changes)
📝 문서 내용 변경 (Documentation)
🔄 기타 (Other) - 설명 작성

📝 요약 (Summary)

PR의 목적과 간단한 설명을 적어주세요.

드롭다운 메뉴 또는 설렉트 컴포넌트의 재료가 되는 아토믹한 드롭다운의 개발

🔍 상세 내용 (Describe your changes)

변경 사항을 구체적으로 작성해 주세요.

기본 드롭다운 스타일링
드롭다운 스토리 추가
드롭다운 이용 -> 헤더 유저 메뉴
- 공통 컴포넌트 하이라이트, 아바타 일부 수정
스토리 추가

🔗 관련 이슈 또는 링크 (Issue Number or Link)

이슈 번호나 관련 링크가 있다면 추가해 주세요.

reolsolves: [FEATURE] [공통 컴포넌트] Dropdown #97

✅ 체크리스트 (Checklist)

PR 작성 시 아래 사항들을 점검해 주세요.

빌드가 성공적으로 되었나요?
코드에 주석을 추가했나요?
모든 테스트가 통과했나요?
관련 문서가 업데이트되었나요?

📸 스크린샷 (선택 사항)

변경 사항이 UI와 관련이 있다면 스크린샷을 추가해 주세요.

2024-11-21.01.27.05.mov

드롭다운 바깥을 누르면 드롭다운이 닫힙니다.

📝 기타 사항

PR과 관련된 기타 사항이 있다면 적어주세요.

…of dropdown

yellowjang · 2024-11-22T03:31:23Z

혹시 프로필 눌렀을 때, 드롭다운 열리면서 프로필이 살짝 밀리는 건 스토리북 환경에서만 그런건가요 ??

yellowjang

작업량이 엄청나시네요 ...
윤호님 코드는 주석이 없어도 흐름대로 코드가 깔끔하게 잘 작성되어 있어서 가독성이 정말 뛰어난 것 같아요... 많이 배웁니다 ㅜㅜ

yellowjang · 2024-11-22T03:37:46Z

src/components/common/dropdown/Dropdown.tsx

+  }, [])
+
+  return (
+    <DropdownContext.Provider value={{ isOpen, toggle, close }}>


Dropdown value에 상태를 넣어주는거군요..!

맞아요 드롭다운 안에서는 context api 로 상태를 관리하고 있어요

yellowjang · 2024-11-22T03:40:28Z

src/components/common/dropdown/Dropdown.tsx

+}
+
+interface MenuProps extends BaseProps {
+  position?: 'dropup' | 'dropdown'


오 dropup/dropdown 으로 구분해서 position prop 나누어주는 거 좋은 것 같아요

yellowjang · 2024-11-22T03:41:45Z

src/components/common/dropdown/Dropdown.tsx

+const Menu = ({
+  children,
+  className = '',
+  position = 'dropdown',
+  alignment = 'left',
+}: MenuProps): JSX.Element | null => {
+  const { isOpen } = useDropdownContext()
+  if (!isOpen) return null


이런 식으로 prop 넘겨주는 게 많다보면 사용할 때 복잡할 거라고 생각했었는데 오히려 어떤 것들을 지정해줘야 되는지 명확해서 좋은 것 같네용

저도 바깥에서 classNames 를 내리느냐 vs 미리 props 를 연결해주느냐
관련해서 많은 고민을 했는데, 드롭다운을 쓰는 동료 개발자 입장에서는
처음부터 className을 임의로 주기에는 복잡도가 높은 것 같아서, 어느 정도 반복되는 패턴이 있으면 props 로 넘기고
예외가 있다면 바깥에서 추가로 스타일링을 입히는 방식으로 굳혔어요 ㅎㅎ

yellowjang · 2024-11-22T03:43:42Z

src/components/common/dropdown/Dropdown.tsx

+  const handleClick = (e: React.MouseEvent<HTMLElement>) => {
+    if (typeof onClick === 'function') {
+      onClick(e)
+    }


혹시 typeof onClick 가 function 일 경우에 onClick 이벤트가 발생하도록
처리하신 이유가 있으신가요 ??

onClick 이 옵셔널 프롭스인데, onClick 이 undefined 일 때 호출을 하면 타입 에러가 발생해서,
onClick 을 받은 경우에만 호출하도록 타입 가드를 설정해줬어요

아!! 그런 거였군요 ㅎㅎ 설명 감사합니다 :)

KingNono1030 · 2024-11-22T04:50:31Z

혹시 프로필 눌렀을 때, 드롭다운 열리면서 프로필이 살짝 밀리는 건 스토리북 환경에서만 그런건가요 ??

네 맞아요 저게 layout centered 라서, 자동으로 중간에 맞추려고 해서 그런데,
absolute 라서 트리거만 노말 플로우고, 메뉴 부분은 기존 돔 레이아웃에 관계 없어요

KingNono1030 · 2024-11-22T04:51:51Z

작업량이 엄청나시네요 ... 윤호님 코드는 주석이 없어도 흐름대로 코드가 깔끔하게 잘 작성되어 있어서 가독성이 정말 뛰어난 것 같아요... 많이 배웁니다 ㅜㅜ

제가 듣고 싶은 최고의 찬사네요 ㅎㅎ 감사합니다
근데 우리가 컴포넌트 기반의 개발을 해서 더욱이 두드러지는 것 같아요 :)

[#50] 🚚 rename index.tsx -> index.ts

b5642de

KingNono1030 self-assigned this Nov 18, 2024

KingNono1030 linked an issue Nov 18, 2024 that may be closed by this pull request

[FEATURE] [공통 컴포넌트] Dropdown #97

Closed

5 tasks

KingNono1030 added 13 commits November 19, 2024 00:57

[#67] 💄 solve prettier build warnings by formatting

5b4dbf3

[#97] ✨ add dropdown component

209ddec

[#97] ♻️ add close method to useToggle hook

dda143e

[#97] ✅ add dropdown stories

066aff0

[#97] 🔧 add icon assets (setting / workbag / codefile / logout)

a8e1b7d

[#97] 💄 adjust svg fill and stroke attributes

c9831b5

[#97] 💄 replace size props from 44 px to 48px in avatar

0759eaa

[#97] 💄 expand highlight component with new className props

223e965

[#97] ✨ add header user menu component

99a8f0a

[#97] ✅ add header user menu stories

9105d41

[#97] 🐛 remove unused value props from dropdown items

e1ddd27

[#97] 🚚 remove comments and allow close method when touching outside …

63a240e

…of dropdown

[#97] 🚚 remove closeOnSelect props from header user menu component

3ecf19c

KingNono1030 marked this pull request as ready for review November 20, 2024 16:38

KingNono1030 requested a review from yongb2n November 20, 2024 16:38

KingNono1030 added 3 commits November 21, 2024 01:39

[#97] 🗑️ remove select component

9a701fe

[#97] 🐛 solve build warning by removing unused import line

a901256

[#97] ✨ make sure dropdown to close when clicked outside of the menu

5484dd0

yellowjang approved these changes Nov 22, 2024

View reviewed changes

KingNono1030 merged commit be6443b into dev Nov 22, 2024
3 of 4 checks passed

KingNono1030 deleted the feat/common-component-dropdown branch November 25, 2024 05:16

[#50] ✨ 공통 컴포넌트 dropdown 개발 #111

[#50] ✨ 공통 컴포넌트 dropdown 개발 #111

Uh oh!

Conversation

KingNono1030 commented Nov 18, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 PR 템플릿

🏷️ PR 타입 (PR Type)

📝 요약 (Summary)

🔍 상세 내용 (Describe your changes)

🔗 관련 이슈 또는 링크 (Issue Number or Link)

✅ 체크리스트 (Checklist)

📸 스크린샷 (선택 사항)

📝 기타 사항

Uh oh!

yellowjang commented Nov 22, 2024

Uh oh!

yellowjang left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

KingNono1030 commented Nov 22, 2024

Uh oh!

KingNono1030 commented Nov 22, 2024

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

KingNono1030 commented Nov 18, 2024 •

edited

Loading