feat-fe: DropdownSub 컴포넌트 구현 #762

github-actions · 2024-10-03T01:26:42Z

Original issue description

목적

DropdownSubTrigger 컴포넌트는 현재 드롭다운, 팝오버메뉴의 내부 아이템 요소입니다.
현재 '단계 이동' 기능에서 사용되는 UI개선을 위해서 만들어 집니다.

작업 세부사항

DropdownSubTrigger 컴포넌트 구현.
Storybook 예제 추가

참고 사항

아래의 별표줄 밑에 요구사항 ID만 작성해주세요. Prefix 금지!

COM_DROP_SUB

closes #761

RecursiveDropdownItem 컴포넌트를 이용하여 DropdownItem을 렌더링 합니다.

  <Dropdown
       initValue={process.name}
       size="sm"
       width={112}
       isShadow={false}
       disabled={applicant.isRejected}
     >
       <RecursiveDropdownItem items={menuItems} /> --> items요소에 DropdownItem 트리 구조를 할당하면 됩니다.
     </Dropdown>

DropdownPovider를 구현하였습니다.

interface DropdownContext {
   isOpen: boolean;
   open: () => void;
   close: () => void;
   selected?: string;
   setSelected: (name: string) => void;
}

useModal 훅을 통해 사용할 수 있습니다.

ApplicantModla에서 지원자 단계 이동 Dropdown에 있는 이메일 보내기, 불합격 기능을 삭제했습니다.
좌우 스크롤을 아래로 내렸습니다.

github-actions · 2024-10-04T08:36:08Z

1728030968.302279

github-actions · 2024-10-04T08:36:13Z

1728030972.419849

github-actions · 2024-10-04T08:36:44Z

1728031004.015119

llqqssttyy

제가 봤을 떄 예측 불가능한 동작은 없었습니다. 남긴 코멘트에 대해서 검토하시고 반영해주세요~

llqqssttyy · 2024-10-04T08:33:59Z

frontend/src/components/_common/atoms/RecursiveDropdownItem/index.tsx

+  items: (ClickableItem | SubTrigger)[];
+}
+
+export type DropdownItemType = ClickableItem | SubTrigger;


타입 오버라이딩을 사용해서 잘 구현해주셨네요👍

llqqssttyy · 2024-10-04T08:47:48Z

frontend/src/components/_common/molecules/DropdownSubTrigger/style.ts

+  padding: 0.4rem;
+
+  top: -0.36rem;
+  right: ${({ width }) => `${width - 4}px`};


현재는 왼쪽에 고정적으로 렌더링되는데요,
prop으로 렌더링 방향을 받아서 선택할 수 있게 만들 수 있을까요?!

llqqssttyy · 2024-10-04T08:50:33Z

frontend/src/components/_common/atoms/DropdownItem/index.tsx

@@ -1,3 +1,4 @@
+import { useDropdown } from '@contexts/DropdownContext';


저는 SubTrigger가 atom이라고 생각하는데 러기는 어떻게 생각하시나용?

llqqssttyy · 2024-10-04T08:54:48Z

frontend/src/components/_common/atoms/RecursiveDropdownItem/index.tsx

@@ -0,0 +1,61 @@
+import DropdownSubTrigger from '@components/_common/molecules/DropdownSubTrigger';


molecules로 바꿔주세요~

llqqssttyy · 2024-10-04T09:04:23Z

frontend/src/components/_common/atoms/RecursiveDropdownItem/index.tsx

+  size?: 'sm' | 'md';
+}
+
+export default function RecursiveDropdownItem({ items, size = 'sm' }: RecursiveDropdownRendererProps) {


러쉬: DropdownItemSelector 어떤가요?

렛서: DropdownItemRenderer 어떤가요?

러기가 판단하고 변경or유지 후 props의 interface와 이름 일치시켜주세요~

llqqssttyy

변경사항 확인했습니다! 고생하셨어요~

seongjinme

러기 고생하셨어요. 쉽지 않은 작업을 해주셨네요. 지난 주에 렛서가 피드백 드렸던 내용도 반영되었고, 서브 드랍다운 노출 위치를 정할 수 있도록 유연하게 만들어 주신 것 같아요. Storybook과 local test 환경에서 각각 테스트했고, 모두 의도대로 동작하는 것을 확인했기에 Approve 드립니다. 🙏

seongjinme · 2024-10-07T06:06:54Z

frontend/src/components/_common/molecules/Dropdown/index.tsx

-    setIsOpen(!isOpen);
+    if (isOpen) close();
+    if (!isOpen) open();


Early return이나 if-else보다는 이런 방식이 더 직관적이라고 생각하신 것일까요? 🤔

Co-authored-by: Jeongwoo Park <[email protected]>

Create draft PR for #761

f722d1c

github-actions bot added feature 새로운 기능 frontend 프론트엔드 labels Oct 3, 2024

github-actions bot assigned lurgi Oct 3, 2024

lurgi changed the title ~~feat-fe: DropdownSubTrigger 컴포넌트 구현~~ feat-fe: DropdownSub 컴포넌트 구현 Oct 3, 2024

lurgi added 13 commits October 4, 2024 08:31

feat: DropdownSubTrigger 컴포넌트 구현

ffe55b5

feat: RecursiveDropdownItem 컴포넌트 구현

42373bc

feat: RecursiveDropdownItem size prop 추가

6a175d0

feat: DropdownItem을 RecursiveDropdownItem에 맞게 수정

ec07d67

feat: Dropdown에 RecursiveDropdownItem 적용

fef013d

feat: PopOverMenu에 RecursiveDropdownItem 스타일 적용

3c559bc

feat: size prop 옵셔널로 적용 및 불필요 타입 삭제

7d7f08b

refactor: RecursiveDropdownItem 적용

41e3f29

refactor: ApplicantCard에 RecursiveDropdownItem 적용

7067a79

refactor: ProcessColumn, QuestionBuilder에 Recursive 적용

1c86720

feat: DropdownProvider 구현 및 적용

c6dc5ff

feat: Process 스타일 수정

d4f8c50

feat: Dropdown 기능 구현

7adb6b9

lurgi temporarily deployed to dev October 4, 2024 07:56 — with GitHub Actions Inactive

lurgi requested review from llqqssttyy and seongjinme October 4, 2024 08:35

lurgi marked this pull request as ready for review October 4, 2024 08:36

lurgi temporarily deployed to dev October 4, 2024 08:36 — with GitHub Actions Inactive

llqqssttyy requested changes Oct 4, 2024

View reviewed changes

lurgi added 3 commits October 5, 2024 10:35

refactor: DropdownSubTrigger 컴포넌트 molecule에서 atom으로 변경

6cf298e

refactor: RecursiveDropdownItem 이름 DropdownItemRenderer로 변경

6432697

test: DropdownItem 스토리 수정

982a863

lurgi added 2 commits October 5, 2024 11:26

feat: DropdownSubTrigger 방향 prop 추가

7dc5180

test: ApplicantCard 스토리 추가

432f7f0

lurgi temporarily deployed to dev October 5, 2024 02:26 — with GitHub Actions Inactive

lurgi requested a review from llqqssttyy October 5, 2024 02:29

llqqssttyy approved these changes Oct 5, 2024

View reviewed changes

seongjinme approved these changes Oct 7, 2024

View reviewed changes

lurgi merged commit f98ee10 into fe/develop Oct 7, 2024
24 of 26 checks passed

lurgi deleted the fe-761-COM_DROP_SUB branch October 7, 2024 06:16

lurgi added a commit that referenced this pull request Oct 7, 2024

feat-fe: DropdownSub 컴포넌트 구현 (#762)

c3b226b

Co-authored-by: Jeongwoo Park <[email protected]>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat-fe: DropdownSub 컴포넌트 구현 #762

feat-fe: DropdownSub 컴포넌트 구현 #762

github-actions bot commented Oct 3, 2024 •

edited by lurgi

Loading

github-actions bot commented Oct 4, 2024

github-actions bot commented Oct 4, 2024

github-actions bot commented Oct 4, 2024

llqqssttyy left a comment

llqqssttyy Oct 4, 2024

llqqssttyy Oct 4, 2024

llqqssttyy Oct 4, 2024

llqqssttyy Oct 4, 2024

llqqssttyy Oct 4, 2024

llqqssttyy Oct 4, 2024

llqqssttyy Oct 4, 2024

llqqssttyy left a comment

seongjinme left a comment

seongjinme Oct 7, 2024

		@@ -1,3 +1,4 @@
		import { useDropdown } from '@contexts/DropdownContext';

		@@ -0,0 +1,61 @@
		import DropdownSubTrigger from '@components/_common/molecules/DropdownSubTrigger';

feat-fe: DropdownSub 컴포넌트 구현 #762

feat-fe: DropdownSub 컴포넌트 구현 #762

Conversation

github-actions bot commented Oct 3, 2024 • edited by lurgi Loading

목적

작업 세부사항

참고 사항

github-actions bot commented Oct 4, 2024

github-actions bot commented Oct 4, 2024

github-actions bot commented Oct 4, 2024

llqqssttyy 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

llqqssttyy left a comment

Choose a reason for hiding this comment

seongjinme left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Oct 3, 2024 •

edited by lurgi

Loading