From 7411ccc3ef79a9de609d309d1098862102323b39 Mon Sep 17 00:00:00 2001
From: Yumin Cho <dbals081216@gmail.com>
Date: Thu, 18 Jan 2024 22:08:30 +0900
Subject: [PATCH 1/4] feat: apply UserTable multi-line design

---
 packages/web/src/components/atoms/Table.tsx | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/atoms/Table.tsx b/packages/web/src/components/atoms/Table.tsx
index f4f51071..186c459f 100644
--- a/packages/web/src/components/atoms/Table.tsx
+++ b/packages/web/src/components/atoms/Table.tsx
@@ -18,6 +18,7 @@ export const Cell = styled.td<{ w?: Size; scroll?: boolean }>(
     padding: 6px 5px;
     font-size: 10px;
     font-weight: 500;
+    line-break: anywhere;
   `,
 );
 
@@ -45,7 +46,8 @@ export const Body = styled.tbody`
 export const Row = styled.tr<{ selected?: boolean }>`
   position: relative;
   display: flex;
-  height: 32px;
+  min-height: 32px;
+  height: fit-content;
   align-items: center;
   gap: 5px;
   background-color: ${props =>

From e26ba5b926a74b2d559e6b238a017b3fa1b75ea1 Mon Sep 17 00:00:00 2001
From: Yumin Cho <dbals081216@gmail.com>
Date: Thu, 18 Jan 2024 22:27:39 +0900
Subject: [PATCH 2/4] feat: align ChatInput SendIcon

---
 packages/web/src/components/molecules/ChatInput.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/web/src/components/molecules/ChatInput.tsx b/packages/web/src/components/molecules/ChatInput.tsx
index 1ef141cf..33811cc6 100644
--- a/packages/web/src/components/molecules/ChatInput.tsx
+++ b/packages/web/src/components/molecules/ChatInput.tsx
@@ -38,6 +38,7 @@ const formStyle = css`
   ${bg.white}
   ${border.gray300}
   ${round.md}
+  ${align.center}
 `;
 
 const textAreaScrollStyle = css`

From eaf5890d5b26b36b927ee7e36dac367f7fc5136d Mon Sep 17 00:00:00 2001
From: Yumin Cho <dbals081216@gmail.com>
Date: Thu, 25 Jan 2024 22:21:17 +0900
Subject: [PATCH 3/4] feat: make cards clickable

---
 .../components/molecules/AgendaCard/AdminOngoingAgendaCard.tsx  | 2 +-
 .../molecules/AgendaCard/AdminPreparingAgendaCard.tsx           | 2 +-
 packages/web/src/components/molecules/AgendaTemplateCard.tsx    | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/components/molecules/AgendaCard/AdminOngoingAgendaCard.tsx b/packages/web/src/components/molecules/AgendaCard/AdminOngoingAgendaCard.tsx
index 8c6d2f45..2c76ab1e 100644
--- a/packages/web/src/components/molecules/AgendaCard/AdminOngoingAgendaCard.tsx
+++ b/packages/web/src/components/molecules/AgendaCard/AdminOngoingAgendaCard.tsx
@@ -43,7 +43,7 @@ export const AdminOngoingAgendaCard: React.FC<Props> = ({ agenda }) => {
   };
 
   return (
-    <Card onClick={openModal}>
+    <Card clickable onClick={openModal}>
       <div css={[column, gap(8), w("fill")]}>
         <AgendaTag tags={agendaTags} admin />
         <div css={[column, gap(2)]}>
diff --git a/packages/web/src/components/molecules/AgendaCard/AdminPreparingAgendaCard.tsx b/packages/web/src/components/molecules/AgendaCard/AdminPreparingAgendaCard.tsx
index bac77a76..24131033 100644
--- a/packages/web/src/components/molecules/AgendaCard/AdminPreparingAgendaCard.tsx
+++ b/packages/web/src/components/molecules/AgendaCard/AdminPreparingAgendaCard.tsx
@@ -53,7 +53,7 @@ export const AdminPreparingAgendaCard: React.FC<Props> = ({ agenda }) => {
   };
 
   return (
-    <Card onClick={openModal}>
+    <Card clickable onClick={openModal}>
       <div css={[column, gap(8), w("fill")]}>
         <AgendaTag tags={agendaTags} admin />
         <div css={[column, gap(2)]}>
diff --git a/packages/web/src/components/molecules/AgendaTemplateCard.tsx b/packages/web/src/components/molecules/AgendaTemplateCard.tsx
index c9b645d1..351777e6 100644
--- a/packages/web/src/components/molecules/AgendaTemplateCard.tsx
+++ b/packages/web/src/components/molecules/AgendaTemplateCard.tsx
@@ -19,7 +19,7 @@ export const AgendaTemplateCard: React.FC<Props> = ({ template }) => {
   const openModal = () => navigate(`templateEdit?templateId=${template.id}`);
 
   return (
-    <Card onClick={openModal}>
+    <Card clickable onClick={openModal}>
       <Box gap={8} w="fill">
         <AdminTag tags={adminTags} suffix={template.choices.length} />
         <Box gap={11}>

From 9e34cdd827db7f247866bc6679c34887e403f6dd Mon Sep 17 00:00:00 2001
From: Yumin Cho <dbals081216@gmail.com>
Date: Wed, 6 Mar 2024 20:53:27 +0900
Subject: [PATCH 4/4] fix: remove duplicate borders

---
 packages/web/src/components/atoms/Divider.tsx | 12 +++-
 .../molecules/ModalInnerTextBox.tsx           | 55 +++++++++++--------
 2 files changed, 40 insertions(+), 27 deletions(-)

diff --git a/packages/web/src/components/atoms/Divider.tsx b/packages/web/src/components/atoms/Divider.tsx
index 91a090f5..31618e31 100644
--- a/packages/web/src/components/atoms/Divider.tsx
+++ b/packages/web/src/components/atoms/Divider.tsx
@@ -1,19 +1,25 @@
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
+import type { Color } from "@biseo/web/theme";
 
 export const Divider = styled.hr<{
   dir?: "horizontal" | "vertical";
+  color?: Color;
 }>(
-  ({ dir = "horizontal", theme }) => css`
+  ({ dir = "horizontal", color = "gray300", theme }) => css`
     border: none;
     ${dir === "horizontal"
       ? css`
           width: 100%;
-          border-bottom: 1px solid ${theme.colors.gray300};
+          height: 1px;
+          border: none;
+          background-color: ${theme.colors[color]};
         `
       : css`
+          width: 1px;
           height: 100%;
-          border-right: 1px solid ${theme.colors.gray300};
+          border: none;
+          background-color: ${theme.colors[color]};
         `}
   `,
 );
diff --git a/packages/web/src/components/molecules/ModalInnerTextBox.tsx b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
index ea4e2b41..9d54d4e7 100644
--- a/packages/web/src/components/molecules/ModalInnerTextBox.tsx
+++ b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
@@ -10,11 +10,24 @@ import {
   Button,
   Clickable,
   TaggersBox,
+  Divider,
 } from "@biseo/web/components/atoms";
 import "@biseo/web/components/atoms/placeholder.css";
 import { TrashIcon } from "@biseo/web/assets";
 import { css } from "@emotion/react";
-import { scroll, scrollBar } from "@biseo/web/styles";
+import {
+  w,
+  h,
+  padding,
+  scroll,
+  scrollBar,
+  bg,
+  align,
+  column,
+  gap,
+  border,
+  round,
+} from "@biseo/web/styles";
 
 interface ModalInnerProps extends PropsWithChildren {
   title: string;
@@ -185,11 +198,8 @@ const TextButton: React.FC<SubmitProps> = ({
 }) => (
   <BorderedBox
     w={300}
-    borderColor="gray200"
     bg="gray100"
     borderSize={1}
-    roundBot={5}
-    roundTop={0}
     borderStyle="solid"
     dir="row"
     align="center"
@@ -269,30 +279,27 @@ const AddVoteOptionArea: React.FC<SubmitProps> = ({
   onClick,
   onSubmit,
 }) => (
-  <Box w={300}>
-    <BorderedBox
-      borderColor="gray200"
-      bg="white"
-      w="fill"
-      h={152}
-      borderSize={1}
-      pad={10}
-      padRight={0}
-      roundBot={0}
-      roundTop={5}
-      borderStyle="solid"
-      align="stretch"
+  <div css={[w(300), border.gray200, round.md, `overflow: hidden`]}>
+    <div
+      css={[
+        bg.white,
+        w("fill"),
+        h(152),
+        padding(10),
+        column,
+        align.stretch,
+        scroll.y,
+        scrollBar,
+        gap(10),
+      ]}
     >
-      <Scroll>
-        <Box w="fill" gap={10}>
-          {children}
-        </Box>
-      </Scroll>
-    </BorderedBox>
+      {children}
+    </div>
+    <Divider color="gray200" />
     <TextButton onClick={onClick} onSubmit={onSubmit} value={value}>
       새로운 항목
     </TextButton>
-  </Box>
+  </div>
 );
 ModalInner.AddVoteOptionArea = AddVoteOptionArea;