From 161f23a56806566ffaa396b3fd9fa7bbf9152c3b Mon Sep 17 00:00:00 2001
From: HyeongKyeom Kim <97586683+Brokyeom@users.noreply.github.com>
Date: Sun, 15 Dec 2024 20:06:18 +0900
Subject: [PATCH] =?UTF-8?q?refactor(ui):=20SelectV2=20TriggerContent=20?=
 =?UTF-8?q?=EB=82=B4=20=EC=BB=A4=EC=8A=A4=ED=85=80=20Icon=EC=9D=84=20?=
 =?UTF-8?q?=EC=A0=81=EC=9A=A9=ED=95=A0=20=EC=88=98=20=EC=9E=88=EB=8F=84?=
 =?UTF-8?q?=EB=A1=9D=20icon=20prop=20=EC=B6=94=EA=B0=80.=20(#228)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* refactor: 커스텀 Icon을 적용할 수 있도록 icon prop 추가.

* cs
---
 .changeset/early-owls-protect.md |  5 +++++
 packages/ui/Input/Select.tsx     | 26 +++++++++++++++++---------
 2 files changed, 22 insertions(+), 9 deletions(-)
 create mode 100644 .changeset/early-owls-protect.md

diff --git a/.changeset/early-owls-protect.md b/.changeset/early-owls-protect.md
new file mode 100644
index 00000000..521322e4
--- /dev/null
+++ b/.changeset/early-owls-protect.md
@@ -0,0 +1,5 @@
+---
+'@sopt-makers/ui': patch
+---
+
+SelectV2 TriggerContent 내 커스텀 Icon을 적용할 수 있도록 icon prop 추가.
diff --git a/packages/ui/Input/Select.tsx b/packages/ui/Input/Select.tsx
index 293b576e..ac15e253 100644
--- a/packages/ui/Input/Select.tsx
+++ b/packages/ui/Input/Select.tsx
@@ -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';
@@ -147,10 +148,13 @@ 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;
@@ -158,14 +162,18 @@ function SelectTriggerContent({ placeholder, className }: SelectTriggerContentPr
   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>
   );
 }