From 673a283e2a032c3031fca2f8b266320a6d154a57 Mon Sep 17 00:00:00 2001
From: Sanghou <tkdgh97531@gmail.com>
Date: Wed, 1 May 2024 19:57:54 +0900
Subject: [PATCH 01/10] feat: change modal inner's css

---
 .../molecules/ModalInnerTextBox.tsx           | 42 +++++++------------
 1 file changed, 16 insertions(+), 26 deletions(-)

diff --git a/packages/web/src/components/molecules/ModalInnerTextBox.tsx b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
index 62339219..661f1fbb 100644
--- a/packages/web/src/components/molecules/ModalInnerTextBox.tsx
+++ b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
@@ -29,6 +29,9 @@ import {
   gap,
   border,
   round,
+  row,
+  center,
+  justify,
 } from "@biseo/web/styles";
 
 interface ModalInnerProps extends PropsWithChildren {
@@ -80,36 +83,23 @@ export const ModalInner: React.FC<ModalInnerProps> & SubComponents = ({
   children,
   required = false,
 }: ModalInnerProps) => (
-  <Box dir="column" w="fill" gap={8}>
-    <Box w="fill" dir="row" align="flex-end" justify="space-between">
-      <Box dir="row" align="center" gap={8}>
-        <Box dir="row" gap={2}>
-          <Text variant="body" color="black">
-            {title}
-          </Text>
-          {required && (
-            <Text variant="body" color="blue600">
-              *
-            </Text>
-          )}
-        </Box>
+  <div css={[column, w("fill"), gap(8)]}>
+    <div css={[w("fill"), row, align.end, justify.between]}>
+      <div css={[row, align.center, gap(8)]}>
+        <div css={[row, gap(2)]}>
+          <p css={[text.body, text.black]}>{title}</p>
+          {required && <p css={[text.body, text.blue600]}>*</p>}
+        </div>
         {count !== undefined && (
-          <Box
-            bg="blue200"
-            round={5}
-            align="center"
-            justify="center"
-            w={20}
-            h={20}
-          >
-            <Text color="blue600">{count}</Text>
-          </Box>
+          <div css={[center, bg.blue200, round.md, w(20), h(20)]}>
+            <p css={[text.blue600, text.body]}>{count}</p>
+          </div>
         )}
-      </Box>
+      </div>
       <GrayTextButton onClick={buttonOnClick}>{buttonText}</GrayTextButton>
-    </Box>
+    </div>
     {children}
-  </Box>
+  </div>
 );
 
 const TextBox: React.FC<PropsWithChildren> = ({ children = null }) => (

From 545fb1b760f521e4f4e5cb48c2bbd05ebedecd27 Mon Sep 17 00:00:00 2001
From: Sanghou <tkdgh97531@gmail.com>
Date: Wed, 1 May 2024 20:07:23 +0900
Subject: [PATCH 02/10] feat: change text to p with token css

---
 .../molecules/ModalInnerTextBox.tsx           | 26 ++++++-------------
 1 file changed, 8 insertions(+), 18 deletions(-)

diff --git a/packages/web/src/components/molecules/ModalInnerTextBox.tsx b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
index 661f1fbb..3a2a78ee 100644
--- a/packages/web/src/components/molecules/ModalInnerTextBox.tsx
+++ b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
@@ -2,7 +2,6 @@ import React, { type PropsWithChildren } from "react";
 import {
   BorderedBox,
   Box,
-  Text,
   GrayTextButton,
   Scroll,
   TextInput,
@@ -114,9 +113,7 @@ const TextBox: React.FC<PropsWithChildren> = ({ children = null }) => (
     borderStyle="solid"
     gap={10}
   >
-    <Text color="gray600" variant="subtitle">
-      {children}
-    </Text>
+    <p css={[colors.gray600, text.subtitle]}>{children}</p>
   </BorderedBox>
 );
 ModalInner.TextBox = TextBox;
@@ -132,9 +129,7 @@ const WhiteTextBox: React.FC<PropsWithChildren> = ({ children = null }) => (
     borderStyle="solid"
     gap={10}
   >
-    <Text color="gray600" variant="subtitle">
-      {children}
-    </Text>
+    <p css={[colors.gray600, text.subtitle]}>{children}</p>
   </BorderedBox>
 );
 ModalInner.WhiteTextBox = WhiteTextBox;
@@ -210,7 +205,7 @@ const TextButton: React.FC<SubmitProps> = ({
       }}
     />
     <Button w={20} h={20} onClick={onSubmit}>
-      <Text css={[colors.blue600, text.boldtitle2, "line-height: 1"]}>+</Text>
+      <p css={[colors.blue600, text.boldtitle2, "line-height: 1"]}>+</p>
     </Button>
   </BorderedBox>
 );
@@ -256,9 +251,7 @@ const VoteOption: React.FC<PropsWithChildren> = ({ children = null }) => (
       overflowWrap: "break-word",
     }}
   >
-    <Text color="gray600" variant="subtitle">
-      {children}
-    </Text>
+    <p css={[colors.gray600, text.subtitle]}>{children}</p>
   </BorderedBox>
 );
 ModalInner.VoteOption = VoteOption;
@@ -315,16 +308,15 @@ const VoteChoice: React.FC<PropsWithChildren & { onClick?: () => void }> = ({
       minHeight: 32,
     }}
   >
-    <Text
-      color="gray500"
-      variant="subtitle"
+    <p
+      css={[colors.gray600, text.subtitle]}
       style={{
         wordBreak: "break-all",
         overflowWrap: "break-word",
       }}
     >
       {children}
-    </Text>
+    </p>
     <Clickable>
       <Box w={13} h={13} justify="center" align="center" onClick={onClick}>
         <TrashIcon />
@@ -348,9 +340,7 @@ const TagChoice: React.FC<PropsWithChildren> = ({ children = null }) => (
     justify="center"
     align="center"
   >
-    <Text color="gray600" variant="subtitle">
-      {children}
-    </Text>
+    <p css={[colors.gray600, text.subtitle]}>{children}</p>
   </BorderedBox>
 );
 ModalInner.TagChoice = TagChoice;

From c8b44f8c46721215904e08685222de25f6622f03 Mon Sep 17 00:00:00 2001
From: Sanghou <tkdgh97531@gmail.com>
Date: Wed, 1 May 2024 20:34:18 +0900
Subject: [PATCH 03/10] feat: change text box

---
 .../molecules/ModalInnerTextBox.tsx           | 81 +++++++------------
 1 file changed, 28 insertions(+), 53 deletions(-)

diff --git a/packages/web/src/components/molecules/ModalInnerTextBox.tsx b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
index 3a2a78ee..a96a1136 100644
--- a/packages/web/src/components/molecules/ModalInnerTextBox.tsx
+++ b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
@@ -102,55 +102,46 @@ export const ModalInner: React.FC<ModalInnerProps> & SubComponents = ({
 );
 
 const TextBox: React.FC<PropsWithChildren> = ({ children = null }) => (
-  <BorderedBox
-    borderColor="gray200"
-    bg="gray100"
-    w={300}
-    borderSize={1}
-    padVertical={10}
-    padHorizontal={15}
-    round={5}
-    borderStyle="solid"
-    gap={10}
+  <div
+    css={[
+      border.gray200,
+      round.md,
+      bg.gray100,
+      w(300),
+      padding.vertical(10),
+      padding.horizontal(15),
+      gap(10),
+    ]}
   >
     <p css={[colors.gray600, text.subtitle]}>{children}</p>
-  </BorderedBox>
+  </div>
 );
 ModalInner.TextBox = TextBox;
 const WhiteTextBox: React.FC<PropsWithChildren> = ({ children = null }) => (
-  <BorderedBox
-    borderColor="gray200"
-    bg="white"
-    w={300}
-    borderSize={1}
-    padVertical={10}
-    padHorizontal={15}
-    round={5}
-    borderStyle="solid"
-    gap={10}
+  <div
+    css={[
+      border.gray200,
+      round.md,
+      bg.white,
+      w(300),
+      padding.vertical(10),
+      padding.horizontal(15),
+      gap(10),
+    ]}
   >
     <p css={[colors.gray600, text.subtitle]}>{children}</p>
-  </BorderedBox>
+  </div>
 );
 ModalInner.WhiteTextBox = WhiteTextBox;
 const InputBox: React.FC<InputProps> = ({ value = undefined, onChange }) => (
-  <BorderedBox
-    w={300}
-    borderColor="gray200"
-    bg="gray100"
-    borderSize={1}
-    round={5}
-    borderStyle="solid"
-    dir="row"
-    align="center"
-  >
+  <div css={[border.gray200, round.md, bg.gray100, w(300), row, align.center]}>
     <TextInput
       placeholder="내용을 입력하세요"
       value={value}
       onChange={onChange}
       maxLength={maxTextLength}
     />
-  </BorderedBox>
+  </div>
 );
 ModalInner.InputBox = InputBox;
 
@@ -158,22 +149,14 @@ const TextAreaInputBox: React.FC<TextAreaProps> = ({
   value = undefined,
   onChange,
 }) => (
-  <BorderedBox
-    w={300}
-    h={68}
-    borderColor="gray200"
-    bg="gray100"
-    borderSize={1}
-    round={5}
-    borderStyle="solid"
-  >
+  <div css={[w(300), h(68), border.gray200, round.md, bg.gray100]}>
     <TextAreaFixedsize
       placeholder="내용을 입력하세요"
       value={value}
       onChange={onChange}
       maxLength={maxTextLength}
     />
-  </BorderedBox>
+  </div>
 );
 ModalInner.TextAreaInputBox = TextAreaInputBox;
 
@@ -183,15 +166,7 @@ const TextButton: React.FC<SubmitProps> = ({
   onClick,
   onSubmit,
 }) => (
-  <BorderedBox
-    w={300}
-    bg="gray100"
-    borderSize={1}
-    borderStyle="solid"
-    dir="row"
-    align="center"
-    padRight={15}
-  >
+  <div css={[w(300), bg.gray100, row, align.center, padding.right(15), border]}>
     <TextInput
       value={value}
       placeholder={children?.toString()}
@@ -207,7 +182,7 @@ const TextButton: React.FC<SubmitProps> = ({
     <Button w={20} h={20} onClick={onSubmit}>
       <p css={[colors.blue600, text.boldtitle2, "line-height: 1"]}>+</p>
     </Button>
-  </BorderedBox>
+  </div>
 );
 ModalInner.TextButton = TextButton;
 

From ecf046a886dd0b9bcbabeaf934924f72fa82f7b8 Mon Sep 17 00:00:00 2001
From: Sanghou <tkdgh97531@gmail.com>
Date: Wed, 1 May 2024 20:42:36 +0900
Subject: [PATCH 04/10] feat: fix vote options

---
 .../molecules/ModalInnerTextBox.tsx           | 23 +++++++++++--------
 1 file changed, 14 insertions(+), 9 deletions(-)

diff --git a/packages/web/src/components/molecules/ModalInnerTextBox.tsx b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
index a96a1136..2d5f9005 100644
--- a/packages/web/src/components/molecules/ModalInnerTextBox.tsx
+++ b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
@@ -192,18 +192,23 @@ const VoteOptions: React.FC<PropsWithChildren> = ({ children = null }) => {
     ${scrollBar}
   overflow-y: scroll;
   `;
+  const flexWrap = css`
+    flex-wrap: wrap;
+  `;
   return (
-    <Box
-      dir="row"
-      gap={8}
-      w="fill"
-      h={150}
-      wrap="wrap"
-      justify="flex-start"
-      css={scrollTyle}
+    <div
+      css={[
+        row,
+        justify.start,
+        w("fill"),
+        h(150),
+        scrollTyle,
+        gap(8),
+        flexWrap,
+      ]}
     >
       {children}
-    </Box>
+    </div>
   );
 };
 ModalInner.VoteOptions = VoteOptions;

From d1b294c04293c6c93f1e19ad19aaa37f4a4c544f Mon Sep 17 00:00:00 2001
From: Sanghou <tkdgh97531@gmail.com>
Date: Wed, 8 May 2024 20:24:30 +0900
Subject: [PATCH 05/10] feat: update modalInner TextBox

---
 .../molecules/ModalInnerTextBox.tsx           | 79 +++++++++----------
 1 file changed, 37 insertions(+), 42 deletions(-)

diff --git a/packages/web/src/components/molecules/ModalInnerTextBox.tsx b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
index 2d5f9005..598c2fc1 100644
--- a/packages/web/src/components/molecules/ModalInnerTextBox.tsx
+++ b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
@@ -1,7 +1,5 @@
 import React, { type PropsWithChildren } from "react";
 import {
-  BorderedBox,
-  Box,
   GrayTextButton,
   Scroll,
   TextInput,
@@ -10,6 +8,7 @@ import {
   Clickable,
   TaggersBox,
   Divider,
+  Box,
 } from "@biseo/web/components/atoms";
 import "@biseo/web/components/atoms/placeholder.css";
 import { TrashIcon } from "@biseo/web/assets";
@@ -214,17 +213,16 @@ const VoteOptions: React.FC<PropsWithChildren> = ({ children = null }) => {
 ModalInner.VoteOptions = VoteOptions;
 
 const VoteOption: React.FC<PropsWithChildren> = ({ children = null }) => (
-  <BorderedBox
-    borderColor="gray200"
-    bg="white"
-    w="hug"
-    h="hug"
-    justify="center"
-    borderSize={1}
-    padVertical={7}
-    padHorizontal={15}
-    round={5}
-    borderStyle="solid"
+  <div
+    css={[
+      w("hug"),
+      h("hug"),
+      justify.center,
+      border.gray200,
+      round.md,
+      padding.vertical(7),
+      padding.horizontal(15),
+    ]}
     style={{
       maxWidth: "100%",
       wordBreak: "break-all",
@@ -232,7 +230,7 @@ const VoteOption: React.FC<PropsWithChildren> = ({ children = null }) => (
     }}
   >
     <p css={[colors.gray600, text.subtitle]}>{children}</p>
-  </BorderedBox>
+  </div>
 );
 ModalInner.VoteOption = VoteOption;
 
@@ -270,20 +268,19 @@ const VoteChoice: React.FC<PropsWithChildren & { onClick?: () => void }> = ({
   children = null,
   onClick = () => {},
 }) => (
-  <BorderedBox
-    borderColor="gray200"
-    bg="white"
-    w="fill"
-    h="hug"
-    borderSize={1}
-    padVertical={8}
-    padHorizontal={12}
-    round={5}
-    borderStyle="solid"
-    justify="space-between"
-    gap={5}
-    dir="row"
-    align="flex-start"
+  <div
+    css={[
+      w("fill"),
+      h("hug"),
+      bg.white,
+      justify.start,
+      border.gray200,
+      round.md,
+      padding.vertical(8),
+      padding.horizontal(12),
+      row,
+      gap(5),
+    ]}
     style={{
       minHeight: 32,
     }}
@@ -302,26 +299,24 @@ const VoteChoice: React.FC<PropsWithChildren & { onClick?: () => void }> = ({
         <TrashIcon />
       </Box>
     </Clickable>
-  </BorderedBox>
+  </div>
 );
 ModalInner.VoteChoice = VoteChoice;
 
 const TagChoice: React.FC<PropsWithChildren> = ({ children = null }) => (
-  <BorderedBox
-    borderColor="gray200"
-    bg="white"
-    h={30}
-    borderSize={1}
-    padVertical={0}
-    padHorizontal={15}
-    round={5}
-    borderStyle="solid"
-    gap={8}
-    justify="center"
-    align="center"
+  <div
+    css={[
+      h(30),
+      bg.white,
+      border.gray200,
+      padding.horizontal(15),
+      round.md,
+      gap(8),
+      center,
+    ]}
   >
     <p css={[colors.gray600, text.subtitle]}>{children}</p>
-  </BorderedBox>
+  </div>
 );
 ModalInner.TagChoice = TagChoice;
 

From fcd5998310f8bb80363063fb967a57b0d3fdee8c Mon Sep 17 00:00:00 2001
From: Sanghou <tkdgh97531@gmail.com>
Date: Wed, 8 May 2024 20:38:58 +0900
Subject: [PATCH 06/10] fix: change justiry for option

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

diff --git a/packages/web/src/components/molecules/ModalInnerTextBox.tsx b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
index 598c2fc1..14795baf 100644
--- a/packages/web/src/components/molecules/ModalInnerTextBox.tsx
+++ b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
@@ -273,7 +273,7 @@ const VoteChoice: React.FC<PropsWithChildren & { onClick?: () => void }> = ({
       w("fill"),
       h("hug"),
       bg.white,
-      justify.start,
+      justify.between,
       border.gray200,
       round.md,
       padding.vertical(8),

From 3bfa4ad5e89b696cc036cc519ef09b0ef392cee5 Mon Sep 17 00:00:00 2001
From: Sanghou <tkdgh97531@gmail.com>
Date: Wed, 8 May 2024 20:39:50 +0900
Subject: [PATCH 07/10] fix: update voteChoice flex

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

diff --git a/packages/web/src/components/molecules/ModalInnerTextBox.tsx b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
index 14795baf..69a63cc4 100644
--- a/packages/web/src/components/molecules/ModalInnerTextBox.tsx
+++ b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
@@ -274,6 +274,7 @@ const VoteChoice: React.FC<PropsWithChildren & { onClick?: () => void }> = ({
       h("hug"),
       bg.white,
       justify.between,
+      align.start,
       border.gray200,
       round.md,
       padding.vertical(8),

From 5755ddb37c6290772c1ec7a1fe8a3b407acf0e70 Mon Sep 17 00:00:00 2001
From: Sanghou <tkdgh97531@gmail.com>
Date: Wed, 8 May 2024 20:49:15 +0900
Subject: [PATCH 08/10] fix: change box to submitterable button

---
 .../src/components/molecules/ModalInnerTextBox.tsx  | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/components/molecules/ModalInnerTextBox.tsx b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
index 69a63cc4..59a6b20b 100644
--- a/packages/web/src/components/molecules/ModalInnerTextBox.tsx
+++ b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
@@ -8,7 +8,6 @@ import {
   Clickable,
   TaggersBox,
   Divider,
-  Box,
 } from "@biseo/web/components/atoms";
 import "@biseo/web/components/atoms/placeholder.css";
 import { TrashIcon } from "@biseo/web/assets";
@@ -296,9 +295,17 @@ const VoteChoice: React.FC<PropsWithChildren & { onClick?: () => void }> = ({
       {children}
     </p>
     <Clickable>
-      <Box w={13} h={13} justify="center" align="center" onClick={onClick}>
+      <button
+        type="submit"
+        css={[w(13), h(13), center, bg.white]}
+        style={{
+          border: "none",
+          background: "transparent",
+        }}
+        onClick={onClick}
+      >
         <TrashIcon />
-      </Box>
+      </button>
     </Clickable>
   </div>
 );

From c86b1ad8d6da65ad6b19e683bd20d2c99707945c Mon Sep 17 00:00:00 2001
From: Sanghou <tkdgh97531@gmail.com>
Date: Wed, 8 May 2024 20:53:14 +0900
Subject: [PATCH 09/10] fix: change to button

---
 .../src/components/molecules/ModalInnerTextBox.tsx   | 12 ++----------
 1 file changed, 2 insertions(+), 10 deletions(-)

diff --git a/packages/web/src/components/molecules/ModalInnerTextBox.tsx b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
index 59a6b20b..cb1a2f73 100644
--- a/packages/web/src/components/molecules/ModalInnerTextBox.tsx
+++ b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
@@ -295,17 +295,9 @@ const VoteChoice: React.FC<PropsWithChildren & { onClick?: () => void }> = ({
       {children}
     </p>
     <Clickable>
-      <button
-        type="submit"
-        css={[w(13), h(13), center, bg.white]}
-        style={{
-          border: "none",
-          background: "transparent",
-        }}
-        onClick={onClick}
-      >
+      <Button css={[w(13), h(13)]} onClick={onClick}>
         <TrashIcon />
-      </button>
+      </Button>
     </Clickable>
   </div>
 );

From 064ffff1a745afb40b3b82917bd704b261c0a8d7 Mon Sep 17 00:00:00 2001
From: Sanghou <tkdgh97531@gmail.com>
Date: Wed, 8 May 2024 20:56:08 +0900
Subject: [PATCH 10/10] fix: change button style

---
 packages/web/src/components/molecules/ModalInnerTextBox.tsx | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/components/molecules/ModalInnerTextBox.tsx b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
index cb1a2f73..095dd879 100644
--- a/packages/web/src/components/molecules/ModalInnerTextBox.tsx
+++ b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
@@ -295,7 +295,11 @@ const VoteChoice: React.FC<PropsWithChildren & { onClick?: () => void }> = ({
       {children}
     </p>
     <Clickable>
-      <Button css={[w(13), h(13)]} onClick={onClick}>
+      <Button
+        css={[w(13), h(13)]}
+        style={{ background: "transparent" }}
+        onClick={onClick}
+      >
         <TrashIcon />
       </Button>
     </Clickable>