feat: dialog와 statebutton 컴포넌트 제작

[ssolfa]

1️⃣ 어떤 작업을 했나요? (Summary)

• resolved feat: 다이얼로그와 버튼 컴포넌트 제작 #1

2025-01-27.8.41.23.mov

dialog와 statebutton 컴포넌트를 제작하였습니다.

기존 코드에 영향을 미치는 변경사항

• Handy 디자인 시스템의 버튼 스타일이 정상적으로 적용되도록 index.css에 button 관련 코드 주석처리 해두었습니다.
• 컴포넌트 테스트 페이지를 하나 만들어서 라우터에도 임시로 넣어뒀는데 확인하고 사용 방법 익히고 삭제하면 될 듯 합니다. /test 이 경로로 들어가면 확인 가능합니당
• 그리고 pr이랑 이슈 템플릿 main에 올려뒀어요 숨쉴 꺼 가져왔슴다

기존 코드에 영향을 미치지 않는 변경사항

• dialog 컴포넌트와 statebutton 컴포넌트, 그리고 상수를 추가했습니다. 컴포넌트 사용방법 자세히 밑에 적을게요

컴포넌트 사용 방법

일단 컴포넌트 전체 구조입니다! 추가된 부분만 썼어요

├── src
│   ├── components
│   │   ├── StateButton
│   │   │   ├── ApplicantStateButton.tsx
│   │   │   ├── MemberStateButton.tsx
│   │   │   ├── RoleStateButton.tsx
│   │   │   ├── StateButton.style.ts
│   │   │   ├── StateButton.tsx
│   │   │   └── index.ts
│   │   └── dialog
│   │       ├── Dialog.style.ts
│   │       ├── Dialog.tsx
│   │       └── GenericDialog.tsx
│   ├── constants
│   │   ├── IconOptions.tsx
│   │   └── options.ts

Dialog 컴포넌트 구현

1. 컴포넌트 개요

Handy의 TextButton을 기반으로 한 리스트 형태의 다이얼로그 컴포넌트입니다. TextButton을 여러개 이어서 만들었어요.

2. DialogProps 설명

interface DialogProps {
  isOpen: boolean;
  onClose: () => void; // 클릭에 따라 다이얼로그가 열리고 닫히게
  options: DialogOption[]; // 다이얼로그의 option들 (ex) 액티브, 비액티브, 졸업, 탈퇴)
  onSelect: (value: string) => void; // 현재 선택된 option (ex) 액티브)
  position: "top" | "bottom"; // 다이얼로그가 어느 방향으로 나타날지 (피그마 상에 위, 아래만 존재해서 두 개만 제작)
  width: number; // 다이얼로그 가로 길이에 맞는거 넣어서 쓰세요 (119, 128, 150, 196)
}

3. 사용 방법 - 새로운 다이얼로그 만드는 방법

만약 새로운 다이얼로그가 필요한 경우 options에 새로운 배열을 넣고 만들면 돼요!

 <Dialog
          isOpen={true}
          onClose={() => {}}
          options={ROLE_STATE_OPTIONS}
          onSelect={() => {}}
          position="bottom"
          width={150}
        />

이런 식으로 props를 넣어주면

이런 다이얼로그가 생겨요

GenericDialog 컴포넌트 구현

1. 컴포넌트 개요

그럼 이건 무엇이냐 하면 Dialog를 버튼과 같이 쉽게 쓰기 위해 만든 래퍼 컴포넌트에요

Dialog - 순수하게 다이얼로그 UI와 기본 동작만 담당
GenericDialog - 다이얼로그를 열고 닫는 트리거 요소와 Dialog를 조합

2. GenericDialogProps 설명

interface GenericDialogProps {
  options: DialogOption[];
  onSelect: (value: string) => void;
  children: React.ReactElement;
  width?: number;
  position?: "top" | "bottom";
}

래퍼라 children: React.ReactElement; 이 부분만 추가된 거 확인하면 될 것 같습니당
버튼을 children로 받는 거라고 생각하면 돼요! 그래서 받은 버튼 + GenericDialog = 드롭다운 형태를 쉽게 만들도록 했어요

3. 사용 방법 - 드롭다운 만드는 방법

<GenericDialog
          options={PARTS_OPTIONS}
          onSelect={handleSelect("parts")}
          position="bottom"
          width={196}
        >
          <BoxButton size="large" variant="filledPrimary">
            핸디 boxbutton 버튼 썼을 때
          </BoxButton>
        </GenericDialog>

이런식으로 사용하면 됩니당 핸디에서 쓰는 BoxButton과 같이 버튼을 안에 넣어주면

이렇게 쓸 수 있어요

StateButton 컴포넌트 구현

1. 컴포넌트 개요

위에서 설명한 GenericDialog와 버튼을 합쳐두었어요!

이거 세 개는 미리 만들어 두었어요

2. StateButtonProps 설명

interface StateButtonProps {
  options: DialogOption[]; // 이름은 같은데 위에 옵션이랑 달라요! 핸디의 boxbutton을 커스텀하기 위한 label과 color가 있다고 생각해주세요
  selectedValue: string; // 현재 상태
  onSelect: (value: string) => void; // 상태 변경 함수
  variant?: "filledPrimary" | "filledSecondary" | "outlined"; // 핸디의 boxbutton을 커스텀하기 위한~
}

3. 사용 방법

얘네는 만들어둔거라 이런식으로 사용하면 될 것 같아요

const [userRole, setUserRole] = useState<string>("액티브"); 

  const handleRoleChange = (newRole: string) => {
    setUserRole(newRole);
  };

return (
       <MemberStateButton
          selectedValue={userRole}
          onStateChange={handleRoleChange}
       />
       <ApplicantStateButton
          // 얘네도
       />
       <RoleStateButton
          // 똑같이
       />
)

순서대로 이거 세 개 입니당

2️⃣ 알아두시면 좋아요!

• statebutton이 좀 많아서 index.ts에서 여러 파일을 한 번에 export 했습니당
• 옵션들(액티브, 비액티브, 졸업, 탈퇴) 상수로 지정해뒀는데 학기(24-1)같은 건 api로 불러와야 될 것 같아요 일단은 상수로 뒀어요

3️⃣ 추후 작업

• 렌더 프롭 해결하기
  다이얼로그 외부 클릭이랑 버튼 재 클릭시 다이얼로그가 닫히게 하기 위해서cloneElement를 썼는데요, 이걸 쓰지 말라고 하더라구요 암튼 그래서 이 부분 수정할건데 아마 전반적인 코드는 안바뀔 것 같아서 일단 pr 올리고 제롬이 저의 고봉밥 pr을 읽는 동안 수정해서 커밋하도록 하겠습니당

• 그리고 쉽게 갖다 쓸 수 있게 생각하고 코드 짜긴 했는데 너무 어렵더라구여... 이 부분 이상하다 이 컴포넌트 도저히 못 쓰겠다 하는 건 바로 말해주세요 이해 안가는 부분도 말해주세요 바로 달려오겠음 자 여기까지 pr 읽어주셔서 감사합니다 ㅎ

4️⃣ 체크리스트 (Checklist)

• main 브랜치의 최신 코드를 pull 받았나요?

[owl1753]

와우 고생하셨습니다! 수정 될 거 다 되면 바로 머지 가시죠

일단 그대로 사용해보고 문제 생기면 그떄 이슈 올려서 해결해도 될 거 같아요!

[owl1753]

아 그리고 border-radius나 color, background-color 등은 최대한 Handy에서 정의되어 있는 상수들을 사용하는게 좋을 것 같아요

[ssolfa]

@owl1753 제롬 제가 데이터도 잘 안터지는 시골오지에 가게 되는데............. 그래서 내일 돼야 수정 가능할 것 같습니다 🥹🥹🥹
죄송 죄송 새복많 급하면 머지하십쇼 수정 pr 따로 올릴게여

[owl1753]

죠습니다 일단 머지할게요 새복많~~~