Feat: 드롭다운 버튼 제작 #29

[JaeGuipi]

🧩 이슈 번호

• [travalmaker #29 ](이슈 주소)

  
  

🔎 작업 내용

• 드롭다운 컴포넌트 제작
• 드롭다운은 "use client" 컴포넌트에서 사용되어야 합니다.
• page.tsx 에서 사용하기 위해서는 app/해당페이지폴더 아래에 'use client' 컴포넌트로 불러와서 적용후에 page.tsx로 export 해주어야 합니다.

  
  <>
  //toggle default
    <div>
      <Dropdown>
        <Dropdown.Toggle variant="default">옵션</Dropdown.Toggle>
        <Dropdown.Menu>
          <Dropdown.Item>항목 1</Dropdown.Item>
          <Dropdown.Item onClick={() => alert("항목 2 선택")}>항목 2</Dropdown.Item>
          <Dropdown.Item onClick={() => alert("항목 3 선택")}>항목 3</Dropdown.Item>
          <Dropdown.Item onClick={() => alert("항목 4 선택")}>항목 4</Dropdown.Item>
        </Dropdown.Menu>
      </Dropdown>
    </div>

//toggle kebab

항목 1

</>

- `Dropdown.Toggle`의 속성 값 `variant`는 `default`와 `kebab`으로 이루어져 있습니다.
- `default`는 `{children}`에 이름을 입력하면 입력된 텍스트를 가진 박스모양의 드롭다운으로 변경됩니다.
- `kebab`은 따로 자식요소를 내려줄 필요 없이 속성만 적용하면 점 세개를 가진 드롭다운으로 변경됩니다.

  <br/>

## 이미지 첨부
![스크린샷 2024-11-27 015518](https://github.com/user-attachments/assets/c9fe6ee1-f57d-48b2-872c-15cc38fd21d8)
- 서버 컴포넌트에서의 사용 모습
- 
![스크린샷 2024-11-27 015536](https://github.com/user-attachments/assets/491633c5-8a2d-4c9c-87d0-a6e29e56e42f)

![스크린샷 2024-11-27 015649](https://github.com/user-attachments/assets/fe2a0a99-ac6b-49e2-82f9-8653ca534929)
- 위가 `variant="default"` 아래가 `variant="kebab"`
<br/>

## 👩‍💻 공유 포인트 및 논의 사항

Dropdown.Itme에 `onClick`이벤트를 프롭으로 받을 수 있게 해놨지만 기능 수행이 되는지는 테스트를 하지 못했습니다. 실 사용 과정에서 오류가 발생될 수 도 있을 것 같습니다.

<!-- 공유하거나 논의할 사항을 작성해주세요. -->