From 7b5ecd3bf369f140be94ce635d44648582367777 Mon Sep 17 00:00:00 2001 From: soohyeon Date: Tue, 12 Sep 2023 22:12:20 +0900 Subject: [PATCH] =?UTF-8?q?Rename,=20Design:=20OptionsSelected=20->=20Sele?= =?UTF-8?q?ctOption=20=EC=9C=BC=EB=A1=9C=20=EC=9D=B4=EB=A6=84=20=EC=88=98?= =?UTF-8?q?=EC=A0=95,=20UI=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../common/select/OptionsSelected.tsx | 103 ----------- src/components/common/select/SelectOption.tsx | 167 ++++++++++++++++++ 2 files changed, 167 insertions(+), 103 deletions(-) delete mode 100644 src/components/common/select/OptionsSelected.tsx create mode 100644 src/components/common/select/SelectOption.tsx diff --git a/src/components/common/select/OptionsSelected.tsx b/src/components/common/select/OptionsSelected.tsx deleted file mode 100644 index ceb521aa..00000000 --- a/src/components/common/select/OptionsSelected.tsx +++ /dev/null @@ -1,103 +0,0 @@ -import React, { useRef } from 'react'; -import { styled } from 'styled-components'; - -interface Option { - value: string; - label: string; -} -interface SelectOptionProps { - selectedValue: string | undefined; - onSelect: (value: string) => void; - options: Option[]; - optionStyle?: React.CSSProperties; - selectedOptionStyle?: React.CSSProperties; - placeholder: string | undefined; - size: 'lg' | 'md' | 'sm'; -} -const CustomSelect = styled.div` - position: relative; - max-width: 240px; - font-size: 0; - display: flex; -`; -const Select = styled.select` - width: 100%; - height: 3rem; - font-size: 1rem; - padding-left: 2rem; - border: 1px solid#dddddd; - border-radius: 1rem; - box-sizing: border-box; - background-color: #fff; - color: #939393; - -webkit-appearance: none; - -moz-appearance: none; - appearance: none; -`; -const IconSVG = styled.svg` - margin-left: -44px; - align-self: center; - width: 32px; - height: 32px; -`; -const StyledOption = styled.option<{ isSelected: boolean }>` - cursor: pointer; - background-color: ${(props) => (props.isSelected ? 'lightblue' : 'white')}; - font-weight: ${(props) => (props.isSelected ? 'bold' : 'normal')}; -`; - -const SelectOption: React.FC = ({ selectedValue, onSelect, options, placeholder, size }) => { - const containerRef = useRef(null); - return ( - - - - - - - - - ); -}; - -export default SelectOption; -const Container = styled.div<{ size: string }>` - display: flex; - flex-direction: column; - position: relative; - width: 100%; - gap: 1.25rem; - margin-right: 15px; - ${(props) => { - switch (props.size) { - case 'lg': - return ` - max-width:280px - `; - case 'md': - return ` - max-width:240px - `; - case 'sm': - return ` - max-width:160px - `; - default: - return ''; - } - }} -`; diff --git a/src/components/common/select/SelectOption.tsx b/src/components/common/select/SelectOption.tsx new file mode 100644 index 00000000..0cc0c2b3 --- /dev/null +++ b/src/components/common/select/SelectOption.tsx @@ -0,0 +1,167 @@ +import React, { useRef, useState } from 'react'; +import { styled } from 'styled-components'; + +interface Option { + value: string; + label: string; +} +interface SelectOptionProps { + selectedValue: string | undefined; + onSelect: (value: string) => void; + options: Option[]; + optionStyle?: React.CSSProperties; + selectedOptionStyle?: React.CSSProperties; + placeholder: string | undefined; + size: 'lg' | 'md' | 'sm'; +} +const CustomSelect = styled.div` + position: relative; + max-width: 240px; + font-size: 0; + display: flex; +`; +const Select = styled.div` + width: 100%; + height: 3rem; + font-size: 1rem; + border: 1px solid #dddddd; + border-radius: 1rem; + box-sizing: border-box; + background-color: #fff; + color: #939393; + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + position: relative; + & > div { + display: flex; + justify-content: space-between; + align-items: center; + padding: 7px 13px 9px 22px; + font-family: ${({ theme }) => theme.fonts.NOTOSANSKR}; + font-size: 14px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: -0.393px; + } + & > ul { + position: absolute; + bottom: 0; + left: 0; + transform: translateY(calc(100% + 1px)); + width: 100%; + display: flex; + flex-direction: column; + box-shadow: 0px 11.45942px 16.3706px 0px rgba(58, 58, 58, 0.08); + border-radius: 1rem; + overflow: hidden; + transition: 0.2s ease-in-out all; + &.close { + height: 0; + } + } +`; +const IconSVG = styled.svg` + align-self: center; + width: 32px; + height: 32px; +`; +const StyledOption = styled.li<{ $isSelected: boolean }>` + cursor: pointer; + background-color: ${(props) => (props.$isSelected ? '#e6f6f6' : 'white')}; + font-weight: ${(props) => (props.$isSelected ? 'bold' : 'normal')}; + padding: 15px 32px; + position: relative; + color: ${({ theme }) => theme.colors.text}; + font-family: ${({ theme }) => theme.fonts.NOTOSANSKR}; + font-size: 16px; + font-style: normal; + font-weight: 400; + line-height: normal; + letter-spacing: -0.48px; + & + li::after { + content: ''; + position: absolute; + top: 0; + left: 50%; + transform: translateX(-50%); + width: 81.9%; + height: 1px; + background: #eee; + } +`; + +const Container = styled.div<{ size: string }>` + display: flex; + flex-direction: column; + position: relative; + width: 100%; + gap: 1.25rem; + margin-right: 15px; + ${(props) => { + switch (props.size) { + case 'lg': + return ` + max-width:280px + `; + case 'md': + return ` + max-width:240px + `; + case 'sm': + return ` + max-width:196px + `; + default: + return ''; + } + }} +`; + +const SelectOption: React.FC = ({ selectedValue, onSelect, options, placeholder, size }) => { + const [selectedOption, setSelectedOption] = useState(placeholder); + const [isOpen, setIsOpen] = useState(false); + const containerRef = useRef(null); + const onSelectOption = (option: Option) => { + onSelect(option.value); + setSelectedOption(option.label); + }; + return ( + + + + + + ); +}; + +export default SelectOption;