[ React ] SelectBox 컴포넌트 구현단순한 SelectBox 만들기 ~ 요구사항 분석필요한 컴포넌트SelectorBox - 선택된 값이 표시되는 요소OptionListBox - 옵션 리스트 팝업OptionItem - 옵션 리스트 내의 각각의 아이템CaretIcon - 옵션 리스트 팝업zodev.tistory.com지난번 만든 SelectBox에서 더 나아가 검색을 통해 옵션 리스트를 불러오는 SelectBox를 만들어봤다. 기본 틀은 이전과 동일 !! 추가할 내용InputInput에 따라 달라지는 options 1. Input 입력된 값을 보여주기 위해 keyword 변수를 생성했다.// Input 컴포넌트에 바인딩하는 Keywordconst handleInput = (e: React...
컴포넌트
단순한 SelectBox 만들기 ~ 요구사항 분석필요한 컴포넌트SelectorBox - 선택된 값이 표시되는 요소OptionListBox - 옵션 리스트 팝업OptionItem - 옵션 리스트 내의 각각의 아이템CaretIcon - 옵션 리스트 팝업의 열림/닫힘을 표시하는 아이콘 구현할 동작SelectorBox를 누르면 OptionListBox가 열린다.OptionListBox에서 특정 OptionItem을 선택하면 OptionListBox가 닫히면서 SelectorBox에 선택한 값을 표시한다. (상위 데이터 변경)OptionListBox의 상태에 따라 CaretIcon을 바꿔준다.외부 영역을 클릭했을 시에도 OptionListBox를 닫아준다.마우스 hover 상태의 OptionItem은 밝은 색상..
마땅한 라이브러리가 없어 직접 만들어봤다. 아이디어시간과 구분선은 같은 컴포넌트 내부에 작성하여 미리 시간표 레이아웃을 만들어 두고 그 외 예약 정보는 absolute로 적용한다. 시간표 레이아웃 {TIMELIST.map((time) => ( {time} ))}export const TimeList = styled.div` ${flexBox("column", "start", "start")}; color: ${({ theme }) => theme.colors.gray}; gap: 4rem; width: 100%; height: 100%; div { ${flexBox()}; width: 100%; height: 1rem; span {..
지난 번에 react-datepicker 라이브러리를 커스텀하여 DatePicker 공통 컴포넌트를 만들었는데, 아무래도 라이브러리를 커스텀하기 때문에 불필요한 스타일을 빼고 원하는 스타일을 넣는 과정 등이 꽤나 불편하게 느껴졌다. (CSS 코드가 많이 더러워졌다...ㅜ) 그래서 캘린더 만든 김에 DatePicker도 직접 만들어 보려고 한다.물론 라이브러리가 제공하는 기능이 훨씬 많지만 내 프로젝트에서 필요한 기능만 컴팩트하게 만들어보려고 한다. 그래서 일단 사용자 입력은 제외하고 날짜 선택만 가능하도록 했다. String, Date 타입에 대한 고민데이터 자체는 Date 타입이어야 date-fns 라이브러리의 날짜 관련 함수를 사용하기 편리하다.그러나 사용자에게 시각적으로 보여지는 포맷은 “YY..
