이제 드롭다운을 만들어 보겠다.
드롭다운 내장 태그인 select
는 당연히 못쓴다. 디자인 커스텀이 제한적이기 때문에!
그래서 위 사진 같이 드롭다운을 눌렀을 때 div
가 나와야한다. 또 선택 전, 선택 중, 선택 후 border
, Text color
가 달라져야하고, disable
가 있다.
그리고 Hover
되거나, Selected
가 된 요소들은 다른 배경색을 가져야한다. 구현해야할 게 많다 너무
이제 만들어보자!
저렇게 텍스트로 받아야하니 string
으로 된 배열을 하나 받고, 선택된 항목을 관리하는 상태, 선택을 관리해주는 핸들러, Input에서 했던 것처럼 disabled
, 제목 받는 label
, description
, placeholder
를 받아줄 것이다.
코드는 다음과 같다.
interface DropDownProps {
label?: string; // 제목
list: string[]; // 드롭다운 리스트
selected: string; // 선택된 항목(selected state)
dropDownPlaceHolder?: string; // 드롭다운 플레이스홀더
handleSelectedChange: (selected: string) => void; // 선택된 항목 변경 함수(selected setState 변경 함수)
description?: string; // 드롭다운 설명
disabled?: boolean; // 드롭다운 비활성화
}
export default function DropDownCommon({
label,
list,
selected,
dropDownPlaceHolder,
handleSelectedChange,
description,
disabled = false,
}: DropDownProps)
이렇게 받아줄 것이다!
드롭다운 기본 형태를 만들어야한다.
isActive
상태를 만듦. boolean 데이터 사용하여 드롭다운 클릭하면 수정되게toggleDropdown
로 onClick
이벤트 관리isActive
에 따라 DropdownMenuContainer
같은 div
조정handleSelect
같은 핸들러를 만들어 펼쳐진 드롭다운 onClick
이벤트 추가. 클릭하면 isActive
가 false
.만들어보자!
const [isActive, setIsActive] = useState(false);
const toggleDropdown = () => {
setIsActive(!isActive);
};
const handleSelect = () => {
setIsActive(false);
};
return (
<S.Container>
<S.DropdownContainer>
<S.DropdownBody
onClick={toggleDropdown}
isActive={isActive}
>
</S.DropdownBody>
<S.DropdownMenuContainer isActive={isActive}>
{list.map((item) => (
<S.DropdownItemContainer
key={item}
onClick={() => {
handleSelect();
}}
>
{item}
</S.DropdownItemContainer>
))}
</S.DropdownMenuContainer>
</S.DropdownContainer>
</S.Container>
);
이렇게 하면 클릭하면 DropdownMenuContainer
가 나올 것이고, item
들이 map으로 들어간다.
그 들어간 DropdownItemContainer
를 클릭하면 handleSelect
가 실행되고, isActive
가 false
가 되고 드롭다운 확장 div
가 없어질 것이다.
나중에 CSS 작성할 때 isActive
를 조건으로 block
, none
바뀌게 할 것이다.
오늘은 디자인만 만들었기 때문에 일단 지금까지 짰던 디자인을 보자.
Test
한 코드는 아래와 같다.
import { useState } from "react";
import { Margin } from "../components/ui";
import DropDown from "../components/ui/dropDownUI";
import styled from "styled-components";
export default function Test() {
const [selected, setSelected] = useState<string>("");
const handleSelectedChange = (selected: string) => {
setSelected(selected);
};
const countryList = [
{
code: "KR",
nation: "대한민국",
add_code_nation: "KR 대한민국",
country: "REPUBLIC OF KOREA",
},
{
code: "CN",
nation: "중화인민공화국",
add_code_nation: "CN 중화인민공화국",
country: "CHINA",
},
{
code: "VN",
nation: "베트남",
add_code_nation: "VN 베트남",
country: "VIET NAM",
},
];
return (
<S.Wrapper>
<Margin size={50} direction="column" />
<div>
<Margin size={8} direction="row" />
<DropDown
label="안녕"
list={countryList.map((item) => item.country)}
selected={selected}
handleSelectedChange={handleSelectedChange}
/>
</div>
</S.Wrapper>
);
}
const S = {
Wrapper: styled.div`
padding-left: 24px;
padding-right: 24px;
`,
};
lists
에 countryList
객체를 string
으로 이루어진 리스트로 바꿧다.
selected
상태와 setter 함수가 담긴 handleSelectedChange
도 일단 임시적으로 넣어줬다.
짠! 이제 잘 나온다! 사실 좀 디자인 했는데 그거는 styled
된 코드 할 때 설명하겠다.
다음 편에서는 기능까지 잇고, style
하는 시간을 갖겠다.
오늘도 잘 보고 갑니닷 !!