From 2020563a576efb4a0c1a51379f256d4fb94a689e Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Thu, 26 Oct 2023 01:02:25 +0900
Subject: [PATCH 1/2] fix: resolve conflict with design

---
 packages/web/src/components/molecules/Choice.tsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/molecules/Choice.tsx b/packages/web/src/components/molecules/Choice.tsx
index 5f263da4..92a53af8 100644
--- a/packages/web/src/components/molecules/Choice.tsx
+++ b/packages/web/src/components/molecules/Choice.tsx
@@ -6,6 +6,7 @@ import type { Choice } from "@biseo/interface/agenda";
 import { Text } from "@biseo/web/components/atoms";
 import { SelectIcon } from "@biseo/web/assets";
 import { type Color, theme } from "@biseo/web/theme";
+import { center, h, w } from "@biseo/web/styles";
 
 const Container = styled.div<{
   color: Color;
@@ -14,7 +15,7 @@ const Container = styled.div<{
   border-radius: 5px;
   background-color: ${props => props.theme.colors[props.color]};
   border: 1px solid ${props => props.theme.colors.gray200};
-  padding: 6px 13px 6px 13px;
+  padding: 6px 12px 6px 12px;
   width: 340px;
   height: 30px;
   gap: 10px;
@@ -76,7 +77,9 @@ const ChoiceBase: React.FC<ChoiceBaseProps> = ({
       onMouseEnter={onMouseEnter}
       onMouseLeave={onMouseLeave}
     >
-      <SelectIcon stroke={theme.colors[choiceStyle.selectIconColor]} />
+      <div css={[w(13), h(13), center]}>
+        <SelectIcon stroke={theme.colors[choiceStyle.selectIconColor]} />
+      </div>
       <ChoiceText color={choiceStyle.textColor}>{text}</ChoiceText>
     </Container>
   );

From 90d0d1cdda4777e648028e78950e1abbb48465cc Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Thu, 26 Oct 2023 01:02:42 +0900
Subject: [PATCH 2/2] feat: enable multi-line choice

---
 packages/web/src/components/molecules/Choice.tsx | 11 +++++++++--
 1 file changed, 9 insertions(+), 2 deletions(-)

diff --git a/packages/web/src/components/molecules/Choice.tsx b/packages/web/src/components/molecules/Choice.tsx
index 92a53af8..d2a2dd80 100644
--- a/packages/web/src/components/molecules/Choice.tsx
+++ b/packages/web/src/components/molecules/Choice.tsx
@@ -17,7 +17,7 @@ const Container = styled.div<{
   border: 1px solid ${props => props.theme.colors.gray200};
   padding: 6px 12px 6px 12px;
   width: 340px;
-  height: 30px;
+  height: fit-content;
   gap: 10px;
   display: flex;
   flex-direction: row;
@@ -35,7 +35,14 @@ interface ChoiceTextProps extends PropsWithChildren {
 }
 
 const ChoiceText: React.FC<ChoiceTextProps> = ({ color, children = null }) => (
-  <Text variant="body" color={color}>
+  <Text
+    variant="body"
+    color={color}
+    style={{
+      wordBreak: "break-all",
+      overflowWrap: "break-word",
+    }}
+  >
     {children}
   </Text>
 );