Skip to content

Commit

Permalink
refactor: 커스텀 Icon을 적용할 수 있도록 icon prop 추가.
Browse files Browse the repository at this point in the history
  • Loading branch information
Brokyeom committed Dec 14, 2024
1 parent da32f45 commit 46e2050
Showing 1 changed file with 17 additions and 9 deletions.
26 changes: 17 additions & 9 deletions packages/ui/Input/Select.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
import type { ReactNode } from 'react';
import { useState, useRef, useEffect, useCallback, createContext, useContext } from 'react';
import { IconChevronDown, IconUser } from '@sopt-makers/icons';
import { createPortal } from 'react-dom';
Expand Down Expand Up @@ -147,25 +148,32 @@ function SelectTrigger({ children }: SelectTriggerProps) {
interface SelectTriggerContentProps {
placeholder?: string;
className?: string;
icon?: ReactNode;
}

// Select.TriggerContent 컴포넌트: trigger의 미리 정의된 UI
function SelectTriggerContent({ placeholder, className }: SelectTriggerContentProps) {
function SelectTriggerContent(props: SelectTriggerContentProps) {
const { placeholder, className, icon } = props;

const { open, selected } = useSelectContext();

const selectedLabel = selected ? selected.label : placeholder;

return (
<div className={`${S.select} ${open ? S.focus : ''} ${className}`}>
<p className={!selected ? S.selectPlaceholder : ''}>{selectedLabel}</p>
<IconChevronDown
style={{
width: 20,
height: 20,
transform: open ? 'rotate(-180deg)' : '',
transition: 'all 0.3s ease',
}}
/>
{icon ? (
icon
) : (
<IconChevronDown
style={{
width: 20,
height: 20,
transform: open ? 'rotate(-180deg)' : '',
transition: 'all 0.3s ease',
}}
/>
)}
</div>
);
}
Expand Down

0 comments on commit 46e2050

Please sign in to comment.