From 91fd5bd99f7053e42b4fa9f903ac1496da0924db Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Wed, 15 Nov 2023 21:06:28 +0900
Subject: [PATCH 01/19] refactor: use css token instead of Text

---
 .../components/molecules/AddButtonCard.tsx    |  9 +--
 .../components/molecules/AdminAgendaTags.tsx  | 37 ++++--------
 .../molecules/AgendaTemplateCard.tsx          | 15 ++---
 .../src/components/molecules/ChatHeader.tsx   |  6 +-
 .../src/components/molecules/ChoiceGraph.tsx  | 13 ++---
 .../components/molecules/ChoicePercentage.tsx | 15 +++--
 .../src/components/molecules/HeaderItem.tsx   | 10 ++--
 .../molecules/Message/NoticeMessage.tsx       |  9 ++-
 .../molecules/Message/PlainMessage.tsx        | 15 ++---
 .../molecules/ModalInnerTextBox.tsx           | 58 +++++--------------
 .../components/molecules/OptionVoteResult.tsx | 15 ++---
 .../components/molecules/ParticipantBar.tsx   | 23 ++++----
 .../components/molecules/SectionHeader.tsx    |  9 ++-
 .../molecules/TerminatedAgendaModalInner.tsx  | 21 +++----
 .../src/components/molecules/UserTagCards.tsx |  7 +--
 .../src/components/molecules/VoteDetail.tsx   |  7 +--
 .../components/molecules/VoteParticipate.tsx  |  7 +--
 .../src/components/molecules/VoteResult.tsx   | 15 +++--
 .../src/components/organisms/ChatSection.tsx  |  8 +--
 .../organisms/CreateAgendaModal.tsx           |  8 +--
 .../organisms/CreateTemplateModal.tsx         | 11 ++--
 .../organisms/CreateUserTagModal.tsx          | 12 ++--
 .../components/organisms/EditAgendaModal.tsx  | 10 +---
 .../organisms/EditTemplateModal.tsx           | 15 ++---
 .../components/organisms/EditUserTagModal.tsx | 11 ++--
 .../organisms/OngoingAgendaModal.tsx          | 15 ++---
 .../web/src/components/pages/LoginPage.tsx    | 16 +++--
 27 files changed, 153 insertions(+), 244 deletions(-)

diff --git a/packages/web/src/components/molecules/AddButtonCard.tsx b/packages/web/src/components/molecules/AddButtonCard.tsx
index e5e4f371..1b5aa2da 100644
--- a/packages/web/src/components/molecules/AddButtonCard.tsx
+++ b/packages/web/src/components/molecules/AddButtonCard.tsx
@@ -1,6 +1,7 @@
-import React from "react";
-import { Card, Text } from "@biseo/web/components/atoms";
 import { PlusIcon } from "@biseo/web/assets";
+import { Card } from "@biseo/web/components/atoms";
+import { text } from "@biseo/web/styles";
+import React from "react";
 
 interface Props {
   content: string;
@@ -12,8 +13,8 @@ export const AddButtonCard: React.FC<Props> = ({
   onClick = () => {},
 }) => (
   <Card align="center" small clickable onClick={onClick}>
-    <Text color="gray500" variant="body">
+    <p css={[text.body, text.gray500]}>
       <PlusIcon /> {content}
-    </Text>
+    </p>
   </Card>
 );
diff --git a/packages/web/src/components/molecules/AdminAgendaTags.tsx b/packages/web/src/components/molecules/AdminAgendaTags.tsx
index a13cb4b8..c07e6f0b 100644
--- a/packages/web/src/components/molecules/AdminAgendaTags.tsx
+++ b/packages/web/src/components/molecules/AdminAgendaTags.tsx
@@ -1,12 +1,11 @@
 import { DownArrowIcon } from "@biseo/web/assets";
-import { BorderedBox, Box, Text } from "@biseo/web/components/atoms";
+import { BorderedBox, Box } from "@biseo/web/components/atoms";
+import { text } from "@biseo/web/styles";
 
 export const AdminAgendaTags: React.FC = () => (
   <Box w={270} h={28} gap={16} dir="row" justify="center">
     <Box dir="row" w={122} h={28} gap={10} align="center">
-      <Text variant="body" color="black">
-        투표 결과
-      </Text>
+      <p css={[text.body, text.black]}>투표 결과</p>
       <BorderedBox
         borderColor="gray200"
         bg="white"
@@ -19,15 +18,11 @@ export const AdminAgendaTags: React.FC = () => (
         borderStyle="solid"
         gap={99}
       >
-        <Text color="gray600" variant="option1">
-          비공개
-        </Text>
+        <p css={[text.option1, text.gray600]}>비공개</p>
       </BorderedBox>
     </Box>
     <Box dir="row" w={122} h={28} gap={10} align="center">
-      <Text variant="body" color="black">
-        투표 상세
-      </Text>
+      <p css={[text.body, text.black]}>투표 상세</p>
       <BorderedBox
         borderColor="gray200"
         bg="white"
@@ -40,9 +35,7 @@ export const AdminAgendaTags: React.FC = () => (
         gap={99}
         borderStyle="solid"
       >
-        <Text color="gray600" variant="option1">
-          무기명
-        </Text>
+        <p css={[text.option1, text.gray600]}>무기명</p>
       </BorderedBox>
     </Box>
   </Box>
@@ -51,9 +44,7 @@ export const AdminAgendaTags: React.FC = () => (
 export const AdminAgendaTagsSelect: React.FC = () => (
   <Box w={270} h={28} justify="space-between" dir="row">
     <Box dir="row" w={130} h={28} gap={8} align="center">
-      <Text variant="body" color="black">
-        투표 결과
-      </Text>
+      <p css={[text.body, text.black]}>투표 결과</p>
       <BorderedBox
         borderColor="gray200"
         bg="white"
@@ -67,19 +58,14 @@ export const AdminAgendaTagsSelect: React.FC = () => (
         borderStyle="solid"
         dir="row"
       >
-        <Text color="gray600" variant="option1">
-          비공개
-        </Text>
-
+        <p css={[text.option1, text.gray600]}>비공개</p>
         <Box padVertical={7}>
           <DownArrowIcon />
         </Box>
       </BorderedBox>
     </Box>
     <Box dir="row" w={130} h={28} gap={8} align="center">
-      <Text variant="body" color="black">
-        투표 상세
-      </Text>
+      <p css={[text.body, text.black]}>투표 상세</p>
       <BorderedBox
         borderColor="gray200"
         bg="white"
@@ -93,10 +79,7 @@ export const AdminAgendaTagsSelect: React.FC = () => (
         borderStyle="solid"
         dir="row"
       >
-        <Text color="gray600" variant="option1">
-          무기명
-        </Text>
-
+        <p css={[text.option1, text.gray600]}>무기명</p>
         <Box padVertical={7}>
           <DownArrowIcon />
         </Box>
diff --git a/packages/web/src/components/molecules/AgendaTemplateCard.tsx b/packages/web/src/components/molecules/AgendaTemplateCard.tsx
index c9b645d1..3e02b4f3 100644
--- a/packages/web/src/components/molecules/AgendaTemplateCard.tsx
+++ b/packages/web/src/components/molecules/AgendaTemplateCard.tsx
@@ -2,7 +2,8 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 
 import type { AgendaTemplate } from "@biseo/interface/agenda/template";
-import { Box, Text, Card, Divider } from "@biseo/web/components/atoms";
+import { Box, Card, Divider } from "@biseo/web/components/atoms";
+import { text } from "@biseo/web/styles";
 import { AdminTag } from "./AdminTag";
 
 const adminTags = {
@@ -23,18 +24,12 @@ export const AgendaTemplateCard: React.FC<Props> = ({ template }) => {
       <Box gap={8} w="fill">
         <AdminTag tags={adminTags} suffix={template.choices.length} />
         <Box gap={11}>
-          <Text variant="title2" color="gray600">
-            {template.templateName}
-          </Text>
+          <p css={[text.title2, text.gray600]}>{template.templateName}</p>
         </Box>
         <Divider />
         <Box w={340} gap={2}>
-          <Text variant="title3" color="gray500">
-            {template.title}
-          </Text>
-          <Text variant="subtitle" color="gray400">
-            {template.content}
-          </Text>
+          <p css={[text.title3, text.gray500]}>{template.title}</p>
+          <p css={[text.subtitle, text.gray400]}>{template.content}</p>
         </Box>
       </Box>
     </Card>
diff --git a/packages/web/src/components/molecules/ChatHeader.tsx b/packages/web/src/components/molecules/ChatHeader.tsx
index 77a4f3b8..a834e1b8 100644
--- a/packages/web/src/components/molecules/ChatHeader.tsx
+++ b/packages/web/src/components/molecules/ChatHeader.tsx
@@ -1,6 +1,6 @@
-import React from "react";
+import { text } from "@biseo/web/styles";
 import styled from "@emotion/styled";
-import { Text } from "@biseo/web/components/atoms";
+import React from "react";
 
 interface Props {
   title: string;
@@ -19,6 +19,6 @@ const Container = styled.div`
 
 export const ChatHeader: React.FC<Props> = ({ title }) => (
   <Container>
-    <Text variant="title2">{title}</Text>
+    <p css={[text.title2, text.black]}>{title}</p>
   </Container>
 );
diff --git a/packages/web/src/components/molecules/ChoiceGraph.tsx b/packages/web/src/components/molecules/ChoiceGraph.tsx
index 6a4695cb..cb950f05 100644
--- a/packages/web/src/components/molecules/ChoiceGraph.tsx
+++ b/packages/web/src/components/molecules/ChoiceGraph.tsx
@@ -1,6 +1,7 @@
-import React from "react";
-import { Box, Text } from "@biseo/web/components/atoms";
+import { Box } from "@biseo/web/components/atoms";
+import { text } from "@biseo/web/styles";
 import type { Color } from "@biseo/web/theme";
+import React from "react";
 
 interface Props {
   choices: { name: string; count: number }[];
@@ -33,12 +34,10 @@ const graph = (choices: { name: string; count: number }[], colors: Color[]) => {
 export const ChoiceGraph: React.FC<Props> = ({ choices, colors }) => (
   <Box h={46} dir="column" gap={10}>
     <Box w={260} justify="space-between" dir="row">
-      <Text variant="subtitle" color="black">
-        투표결과
-      </Text>
-      <Text variant="option1" color="gray500">
+      <p css={[text.subtitle, text.black]}>투표결과</p>
+      <p css={[text.option1, text.gray500]}>
         재석 {choices.map(choice => choice.count).reduce((a, b) => a + b)}명
-      </Text>
+      </p>
     </Box>
     <Box round={5} dir="row" h={20} w={260}>
       {graph(choices, colors)}
diff --git a/packages/web/src/components/molecules/ChoicePercentage.tsx b/packages/web/src/components/molecules/ChoicePercentage.tsx
index ee91b385..7ff5ccb8 100644
--- a/packages/web/src/components/molecules/ChoicePercentage.tsx
+++ b/packages/web/src/components/molecules/ChoicePercentage.tsx
@@ -1,6 +1,7 @@
-import React from "react";
-import { Box, Text } from "@biseo/web/components/atoms";
+import { Box } from "@biseo/web/components/atoms";
+import { text } from "@biseo/web/styles";
 import type { Color } from "@biseo/web/theme";
+import React from "react";
 
 interface Choice {
   name: string;
@@ -18,13 +19,11 @@ export const ChoicePercentage: React.FC<Props> = ({ choice, total }) => (
   <Box w={260} h={14} justify="space-between" dir="row">
     <Box w={39} align="center" dir="row" gap={8}>
       <Box w={12} h={12} round={2} bg={choice.color} />
-      <Text variant="option1">{choice.name}</Text>
+      <p css={[text.option1, text.black]}>{choice.name}</p>
     </Box>
-    <Text variant="option1" color="gray500">
+    <p css={[text.option1, text.gray500]}>
       {choice.count}/{total}
-    </Text>
-    <Text variant="option1" color="gray500">
-      {(choice.count / total) * 100}%
-    </Text>
+    </p>
+    <p css={[text.option1, text.gray500]}>{(choice.count / total) * 100}%</p>
   </Box>
 );
diff --git a/packages/web/src/components/molecules/HeaderItem.tsx b/packages/web/src/components/molecules/HeaderItem.tsx
index 930a51f1..9d213a81 100644
--- a/packages/web/src/components/molecules/HeaderItem.tsx
+++ b/packages/web/src/components/molecules/HeaderItem.tsx
@@ -1,7 +1,7 @@
-import React from "react";
-import styled from "@emotion/styled";
+import { text } from "@biseo/web/styles";
 import { css } from "@emotion/react";
-import { Text } from "@biseo/web/components/atoms";
+import styled from "@emotion/styled";
+import React from "react";
 
 interface Props {
   name: string;
@@ -43,9 +43,7 @@ export const HeaderItem: React.FC<Props> = ({
 }) => (
   <Container selected={selected}>
     <Link href={`/${path}`}>
-      <Text variant="title3" color={selected ? "black" : "gray500"}>
-        {name}
-      </Text>
+      <p css={[text.title3, selected ? text.black : text.gray500]}>{name}</p>
     </Link>
     {selected ? <SelectIndicator /> : null}
   </Container>
diff --git a/packages/web/src/components/molecules/Message/NoticeMessage.tsx b/packages/web/src/components/molecules/Message/NoticeMessage.tsx
index 65ade380..4befe670 100644
--- a/packages/web/src/components/molecules/Message/NoticeMessage.tsx
+++ b/packages/web/src/components/molecules/Message/NoticeMessage.tsx
@@ -1,6 +1,7 @@
+import { Box } from "@biseo/web/components/atoms";
+import { text } from "@biseo/web/styles";
 import styled from "@emotion/styled";
 import React from "react";
-import { Box, Text } from "@biseo/web/components/atoms";
 
 interface Props {
   message: string; // TODO: introduce Notice type
@@ -20,10 +21,8 @@ const Container = styled.div`
 export const NoticeMessage: React.FC<Props> = ({ message }) => (
   <Box w="fill" padHorizontal={15} padVertical={10} align="center">
     <Container>
-      <Text variant="subtitle">📢</Text>
-      <Text variant="boldtitle4" color="blue600">
-        {message}
-      </Text>
+      <p css={[text.subtitle, text.black]}>📢</p>
+      <p css={[text.boldtitle4, text.blue600]}>{message}</p>
     </Container>
   </Box>
 );
diff --git a/packages/web/src/components/molecules/Message/PlainMessage.tsx b/packages/web/src/components/molecules/Message/PlainMessage.tsx
index 92eb39ac..2d0bd947 100644
--- a/packages/web/src/components/molecules/Message/PlainMessage.tsx
+++ b/packages/web/src/components/molecules/Message/PlainMessage.tsx
@@ -1,7 +1,8 @@
 import React from "react";
 
 import type { Message } from "@biseo/interface/chat";
-import { Box, HyperText, Text } from "@biseo/web/components/atoms";
+import { Box, HyperText } from "@biseo/web/components/atoms";
+import { text } from "@biseo/web/styles";
 import { formatTime } from "@biseo/web/utils/format";
 
 interface Props {
@@ -45,15 +46,9 @@ const parseURL: React.FC<string> = (content: string) => {
 export const PlainMessage: React.FC<Props> = ({ message }) => (
   <Box dir="column" gap={4} padHorizontal={20} padVertical={10}>
     <Box dir="row" gap={4} align="center">
-      <Text variant="boldtitle3" color="black">
-        {message.user.displayName}
-      </Text>
-      <Text variant="option2" color="gray500">
-        {formatTime(message.createdAt)}
-      </Text>
+      <p css={[text.boldtitle3, text.black]}>{message.user.displayName}</p>
+      <p css={[text.option2, text.gray500]}>{formatTime(message.createdAt)}</p>
     </Box>
-    <Text variant="body" color="black">
-      {parseURL(message.message)}
-    </Text>
+    <p css={[text.body, text.black]}>{parseURL(message.message)}</p>
   </Box>
 );
diff --git a/packages/web/src/components/molecules/ModalInnerTextBox.tsx b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
index 609a79bc..8e998363 100644
--- a/packages/web/src/components/molecules/ModalInnerTextBox.tsx
+++ b/packages/web/src/components/molecules/ModalInnerTextBox.tsx
@@ -1,20 +1,19 @@
-import React, { type PropsWithChildren } from "react";
+import { TrashIcon } from "@biseo/web/assets";
 import {
   BorderedBox,
   Box,
-  Text,
-  GrayTextButton,
-  Scroll,
-  TextInput,
-  TextAreaFixedsize,
   Button,
   Clickable,
+  GrayTextButton,
+  Scroll,
   TaggersBox,
+  TextAreaFixedsize,
+  TextInput,
 } from "@biseo/web/components/atoms";
 import "@biseo/web/components/atoms/placeholder.css";
-import { TrashIcon } from "@biseo/web/assets";
+import { scroll, scrollBar, text } from "@biseo/web/styles";
 import { css } from "@emotion/react";
-import { scroll, scrollBar } from "@biseo/web/styles";
+import React, { type PropsWithChildren } from "react";
 
 interface ModalInnerProps extends PropsWithChildren {
   title: string;
@@ -66,14 +65,8 @@ export const ModalInner: React.FC<ModalInnerProps> & SubComponents = ({
     <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>
-          )}
+          <p css={[text.body, text.black]}>{title}</p>
+          {required && <p css={[text.body, text.blue600]}>*</p>}
         </Box>
         {count !== undefined && (
           <Box
@@ -84,7 +77,7 @@ export const ModalInner: React.FC<ModalInnerProps> & SubComponents = ({
             w={20}
             h={20}
           >
-            <Text color="blue600">{count}</Text>
+            <p css={[text.body, text.blue600]}>{count}</p>
           </Box>
         )}
       </Box>
@@ -106,9 +99,7 @@ const TextBox: React.FC<PropsWithChildren> = ({ children = null }) => (
     borderStyle="solid"
     gap={10}
   >
-    <Text color="gray600" variant="subtitle">
-      {children}
-    </Text>
+    <p css={[text.subtitle, text.gray600]}>{children}</p>
   </BorderedBox>
 );
 ModalInner.TextBox = TextBox;
@@ -124,9 +115,7 @@ const WhiteTextBox: React.FC<PropsWithChildren> = ({ children = null }) => (
     borderStyle="solid"
     gap={10}
   >
-    <Text color="gray600" variant="subtitle">
-      {children}
-    </Text>
+    <p css={[text.subtitle, text.gray600]}>{children}</p>
   </BorderedBox>
 );
 ModalInner.WhiteTextBox = WhiteTextBox;
@@ -203,9 +192,7 @@ const TextButton: React.FC<SubmitProps> = ({
       }}
     />
     <Button w={20} h={20} onClick={onSubmit}>
-      <Text color="blue600" variant="boldtitle2">
-        +
-      </Text>
+      <p css={[text.boldtitle2, text.blue600]}>+</p>
     </Button>
   </BorderedBox>
 );
@@ -251,9 +238,7 @@ const VoteOption: React.FC<PropsWithChildren> = ({ children = null }) => (
       overflowWrap: "break-word",
     }}
   >
-    <Text color="gray600" variant="subtitle">
-      {children}
-    </Text>
+    <p css={[text.subtitle, text.gray600]}>{children}</p>
   </BorderedBox>
 );
 ModalInner.VoteOption = VoteOption;
@@ -313,16 +298,7 @@ const VoteChoice: React.FC<PropsWithChildren & { onClick?: () => void }> = ({
       minHeight: 32,
     }}
   >
-    <Text
-      color="gray500"
-      variant="subtitle"
-      style={{
-        wordBreak: "break-all",
-        overflowWrap: "break-word",
-      }}
-    >
-      {children}
-    </Text>
+    <p css={[text.subtitle, text.gray500]}>{children}</p>
     <Clickable>
       <Box w={13} h={13} justify="center" align="center" onClick={onClick}>
         <TrashIcon />
@@ -346,9 +322,7 @@ const TagChoice: React.FC<PropsWithChildren> = ({ children = null }) => (
     justify="center"
     align="center"
   >
-    <Text color="gray600" variant="subtitle">
-      {children}
-    </Text>
+    <p css={[text.subtitle, text.gray600]}>{children}</p>
   </BorderedBox>
 );
 ModalInner.TagChoice = TagChoice;
diff --git a/packages/web/src/components/molecules/OptionVoteResult.tsx b/packages/web/src/components/molecules/OptionVoteResult.tsx
index bf77f89b..f4b1eb8f 100644
--- a/packages/web/src/components/molecules/OptionVoteResult.tsx
+++ b/packages/web/src/components/molecules/OptionVoteResult.tsx
@@ -1,7 +1,8 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Text } from "@biseo/web/components/atoms";
+import { Box } from "@biseo/web/components/atoms";
+import { text } from "@biseo/web/styles";
 import type { Color } from "@biseo/web/theme";
+import styled from "@emotion/styled";
+import React from "react";
 
 interface Props {
   name: string;
@@ -49,12 +50,12 @@ export const OptionVoteResult: React.FC<Props> = ({
         padHorizontal={13}
         padVertical={6}
       >
-        <Text color={userChoice ? "blue500" : "gray500"} variant="option1">
+        <p css={[text.option1, userChoice ? text.blue500 : text.gray500]}>
           {name}
-        </Text>
-        <Text color={userChoice ? "blue500" : "gray500"} variant="option1">
+        </p>
+        <p css={[text.option1, userChoice ? text.blue500 : text.gray500]}>
           {count}
-        </Text>
+        </p>
       </Box>
     </Background>
   </Box>
diff --git a/packages/web/src/components/molecules/ParticipantBar.tsx b/packages/web/src/components/molecules/ParticipantBar.tsx
index a9156dff..8df9bcb7 100644
--- a/packages/web/src/components/molecules/ParticipantBar.tsx
+++ b/packages/web/src/components/molecules/ParticipantBar.tsx
@@ -1,7 +1,8 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { Box, Text } from "@biseo/web/components/atoms";
+import { Box } from "@biseo/web/components/atoms";
+import { text } from "@biseo/web/styles";
 import type { Color } from "@biseo/web/theme";
+import styled from "@emotion/styled";
+import React from "react";
 
 interface Props {
   total?: number;
@@ -32,13 +33,9 @@ export const ParticipantBar: React.FC<Props> = ({
 }) => (
   <Box w={300} h={59} gap={8} dir="column">
     <Box w={75} h={20} gap={8} dir="row" align="center">
-      <Text variant="body" color="black">
-        투표 참여
-      </Text>
+      <p css={[text.body, text.black]}>투표 참여</p>
       <Box bg="blue200" round={5} align="center" justify="center" w={20} h={20}>
-        <Text variant="boldtitle4" color="blue600">
-          {participant}
-        </Text>
+        <p css={[text.boldtitle4, text.blue600]}>{participant}</p>
       </Box>
     </Box>
     <Box w={300} h={30}>
@@ -56,12 +53,12 @@ export const ParticipantBar: React.FC<Props> = ({
           padHorizontal={13}
           padVertical={6}
         >
-          <Text color="black" variant="option1">
+          <p css={[text.option1, text.black]}>
             {total ? ((participant * 100) / total).toFixed(1) : 0}%
-          </Text>
-          <Text color="black" variant="option1">
+          </p>
+          <p css={[text.option1, text.black]}>
             {participant}/{total}
-          </Text>
+          </p>
         </Box>
       </Background>
     </Box>
diff --git a/packages/web/src/components/molecules/SectionHeader.tsx b/packages/web/src/components/molecules/SectionHeader.tsx
index ce4a5825..a1ed396b 100644
--- a/packages/web/src/components/molecules/SectionHeader.tsx
+++ b/packages/web/src/components/molecules/SectionHeader.tsx
@@ -1,5 +1,6 @@
+import { Box } from "@biseo/web/components/atoms";
+import { text } from "@biseo/web/styles";
 import React, { type PropsWithChildren } from "react";
-import { Box, Text } from "@biseo/web/components/atoms";
 
 interface Props extends PropsWithChildren {
   count: number;
@@ -10,11 +11,9 @@ interface Props extends PropsWithChildren {
  */
 export const SectionHeader: React.FC<Props> = ({ count, children = null }) => (
   <Box dir="row" align="center" gap={8} padHorizontal={15} padVertical={11}>
-    <Text variant="title2" color="black">
-      {children}
-    </Text>
+    <p css={[text.title2, text.black]}>{children}</p>
     <Box bg="blue200" round={5} align="center" justify="center" w={20} h={20}>
-      <Text color="blue600">{count}</Text>
+      <p css={[text.body, text.blue600]}>{count}</p>
     </Box>
   </Box>
 );
diff --git a/packages/web/src/components/molecules/TerminatedAgendaModalInner.tsx b/packages/web/src/components/molecules/TerminatedAgendaModalInner.tsx
index 7f6d8fe3..01586ae1 100644
--- a/packages/web/src/components/molecules/TerminatedAgendaModalInner.tsx
+++ b/packages/web/src/components/molecules/TerminatedAgendaModalInner.tsx
@@ -1,5 +1,6 @@
+import { BorderedBox, Box, Scroll } from "@biseo/web/components/atoms";
+import { text } from "@biseo/web/styles";
 import React, { type PropsWithChildren } from "react";
-import { BorderedBox, Box, Scroll, Text } from "@biseo/web/components/atoms";
 
 interface BoxWithTitleProps extends PropsWithChildren {
   title: string;
@@ -18,9 +19,7 @@ const BoxWithTitle: React.FC<BoxWithTitleProps> = ({
   children = null,
 }) => (
   <Box w={300} dir="column" gap={8}>
-    <Text variant="body" color="black">
-      {title}
-    </Text>
+    <p css={[text.body, text.black]}>{title}</p>
     <BorderedBox
       borderColor="gray200"
       bg="white"
@@ -42,9 +41,7 @@ const TextBoxWithTitle: React.FC<BoxWithTitleProps> = ({
   children = null,
 }) => (
   <Box w={300} dir="column" gap={10}>
-    <Text variant="body" color="black">
-      {title}
-    </Text>
+    <p css={[text.body, text.black]}>{title}</p>
     <BorderedBox
       borderColor="gray200"
       bg="white"
@@ -55,9 +52,7 @@ const TextBoxWithTitle: React.FC<BoxWithTitleProps> = ({
       round={5}
       borderStyle="solid"
     >
-      <Text color="gray600" variant="subtitle">
-        {children}
-      </Text>
+      <p css={[text.subtitle, text.gray600]}>{children}</p>
     </BorderedBox>
   </Box>
 );
@@ -68,9 +63,7 @@ const OptionResultsBox: React.FC<BoxWithCountProps> = ({
 }) => (
   <Box w={300} h={177} dir="column" gap={8}>
     <Box dir="row" gap={8}>
-      <Text variant="body" color="black" dir="row">
-        투표 결과
-      </Text>
+      <p css={[text.body, text.black]}>투표 결과</p>
       {count !== undefined && (
         <Box
           bg="blue200"
@@ -80,7 +73,7 @@ const OptionResultsBox: React.FC<BoxWithCountProps> = ({
           w={20}
           h={20}
         >
-          <Text color="blue600">{count}</Text>
+          <p css={[text.body, text.blue600]}>{count}</p>
         </Box>
       )}
     </Box>
diff --git a/packages/web/src/components/molecules/UserTagCards.tsx b/packages/web/src/components/molecules/UserTagCards.tsx
index 42012c03..34a0d9c9 100644
--- a/packages/web/src/components/molecules/UserTagCards.tsx
+++ b/packages/web/src/components/molecules/UserTagCards.tsx
@@ -2,7 +2,8 @@ import React from "react";
 import { useNavigate } from "react-router-dom";
 
 import type { UserTag as IUserTag } from "@biseo/interface/user/tag";
-import { Box, Card, Text, UserTag } from "@biseo/web/components/atoms";
+import { Box, Card, UserTag } from "@biseo/web/components/atoms";
+import { text } from "@biseo/web/styles";
 import { AdminTag } from "./AdminTag";
 
 const adminTags = {
@@ -25,9 +26,7 @@ export const UserTagCards: React.FC<Props> = ({ tag }) => {
           <UserTag>{tag.title}</UserTag>
         </Box>
         <Box w={340}>
-          <Text variant="title2" color="gray600">
-            {tag.description}
-          </Text>
+          <p css={[text.title2, text.gray600]}>{tag.description}</p>
         </Box>
       </Box>
     </Card>
diff --git a/packages/web/src/components/molecules/VoteDetail.tsx b/packages/web/src/components/molecules/VoteDetail.tsx
index 4d6e6f27..ba380ef6 100644
--- a/packages/web/src/components/molecules/VoteDetail.tsx
+++ b/packages/web/src/components/molecules/VoteDetail.tsx
@@ -1,5 +1,6 @@
+import { Box, Tag } from "@biseo/web/components/atoms";
+import { text } from "@biseo/web/styles";
 import React from "react";
-import { Box, Text, Tag } from "@biseo/web/components/atoms";
 
 interface Props {
   type: boolean;
@@ -11,9 +12,7 @@ export const VoteDetail: React.FC<Props> = ({ type }) => (
       <>TODO</>
     ) : (
       <Box w="fill" justify="space-between" dir="row" align="center">
-        <Text variant="subtitle" color="black">
-          투표 상세
-        </Text>
+        <p css={[text.subtitle, text.black]}>투표 상세</p>
         <Tag type="anonymous" />
       </Box>
     )}
diff --git a/packages/web/src/components/molecules/VoteParticipate.tsx b/packages/web/src/components/molecules/VoteParticipate.tsx
index 198c3de3..ccaefdcc 100644
--- a/packages/web/src/components/molecules/VoteParticipate.tsx
+++ b/packages/web/src/components/molecules/VoteParticipate.tsx
@@ -1,5 +1,6 @@
+import { Box, Tag } from "@biseo/web/components/atoms";
+import { text } from "@biseo/web/styles";
 import React, { useMemo, useState } from "react";
-import { Box, Text, Tag } from "@biseo/web/components/atoms";
 
 interface Props {
   voted: number;
@@ -25,9 +26,7 @@ export const VoteParticipate: React.FC<Props> = ({ voted, total }) => {
       onMouseEnter={() => setHover(true)}
       onMouseLeave={() => setHover(false)}
     >
-      <Text variant="subtitle" color="black">
-        투표 참여
-      </Text>
+      <p css={[text.subtitle, text.black]}>투표 참여</p>
       <Tag type="participant" suffix={participantInfo} />
     </Box>
   );
diff --git a/packages/web/src/components/molecules/VoteResult.tsx b/packages/web/src/components/molecules/VoteResult.tsx
index 19b77e4a..2acc2938 100644
--- a/packages/web/src/components/molecules/VoteResult.tsx
+++ b/packages/web/src/components/molecules/VoteResult.tsx
@@ -1,5 +1,6 @@
+import { Box, Tag } from "@biseo/web/components/atoms";
+import { text } from "@biseo/web/styles";
 import React from "react";
-import { Box, Text, Tag } from "@biseo/web/components/atoms";
 
 interface Props {
   type?: boolean;
@@ -16,20 +17,18 @@ export const VoteResult: React.FC<Props> = ({
 }) => (
   <Box w="fill" justify="space-between" dir="row" align="center">
     <Box gap={5} dir="row" align="center">
-      <Text variant="subtitle" color="black">
-        투표 결과
-      </Text>
+      <p css={[text.subtitle, text.black]}>투표 결과</p>
       {voted ? (
-        <Text
-          variant="option2"
-          color="gray500"
+        // eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions
+        <p
+          css={[text.option2, text.gray500]}
           onClick={e => {
             clickHandler(revealChoice);
             e.stopPropagation();
           }}
         >
           {!revealChoice ? "내 투표 보기" : "내 투표 가리기"}
-        </Text>
+        </p>
       ) : null}
     </Box>
     <Tag type={type ? "public" : "private"} />
diff --git a/packages/web/src/components/organisms/ChatSection.tsx b/packages/web/src/components/organisms/ChatSection.tsx
index 9c82a5c3..fc106ce7 100644
--- a/packages/web/src/components/organisms/ChatSection.tsx
+++ b/packages/web/src/components/organisms/ChatSection.tsx
@@ -1,14 +1,14 @@
-import React, { useEffect } from "react";
 import styled from "@emotion/styled";
+import React, { useEffect } from "react";
 import { useInView } from "react-intersection-observer";
 
-import { Text } from "@biseo/web/components/atoms";
 import {
   ChatHeader,
   ChatInput,
   Message,
 } from "@biseo/web/components/molecules";
 import { useChat } from "@biseo/web/services";
+import { text } from "@biseo/web/styles";
 
 const Container = styled.div`
   display: flex;
@@ -40,9 +40,9 @@ export const ChatSection: React.FC = () => {
           <Message key={message.id} message={message} />
         ))}
         {hasMore && (
-          <Text ref={ref} variant="body" color="gray400">
+          <p ref={ref} css={[text.body, text.gray400]}>
             로딩 중
-          </Text>
+          </p>
         )}
       </Message.List>
       <ChatInput send={sendMessage} />
diff --git a/packages/web/src/components/organisms/CreateAgendaModal.tsx b/packages/web/src/components/organisms/CreateAgendaModal.tsx
index 978170dc..e9894647 100644
--- a/packages/web/src/components/organisms/CreateAgendaModal.tsx
+++ b/packages/web/src/components/organisms/CreateAgendaModal.tsx
@@ -6,7 +6,6 @@ import {
   Button,
   SelectTagBox,
   SelectTemplateBox,
-  Text,
 } from "@biseo/web/components/atoms";
 import {
   AdminAgendaTagsSelect,
@@ -14,8 +13,9 @@ import {
   ModalInner,
 } from "@biseo/web/components/molecules";
 import { useAdminAgenda } from "@biseo/web/services/admin-agenda";
-import { useAgendaTemplate } from "@biseo/web/services/agenda-template";
 import { useAdminUser } from "@biseo/web/services/admin-user";
+import { useAgendaTemplate } from "@biseo/web/services/agenda-template";
+import { text } from "@biseo/web/styles";
 import { UserTable } from "./UserTable";
 
 export const CreateAgendaModal: React.FC = () => {
@@ -199,9 +199,7 @@ export const CreateAgendaModal: React.FC = () => {
               style={{ textDecoration: "none" }}
             >
               <Button w={270} h={38} onClick={onSubmit} disabled={!validated}>
-                <Text variant="boldtitle3" color="blue600">
-                  투표 생성하기
-                </Text>
+                <p css={[text.boldtitle3, text.blue600]}>투표 생성하기</p>
               </Button>
             </Link>
           </Box>
diff --git a/packages/web/src/components/organisms/CreateTemplateModal.tsx b/packages/web/src/components/organisms/CreateTemplateModal.tsx
index 986a8167..446066ca 100644
--- a/packages/web/src/components/organisms/CreateTemplateModal.tsx
+++ b/packages/web/src/components/organisms/CreateTemplateModal.tsx
@@ -1,8 +1,9 @@
+import { Box, Button } from "@biseo/web/components/atoms";
+import { Modal, ModalInner } from "@biseo/web/components/molecules";
+import { useAgendaTemplate } from "@biseo/web/services/agenda-template";
+import { text } from "@biseo/web/styles";
 import React, { useMemo, useState } from "react";
 import { Link } from "react-router-dom";
-import { Button, Box, Text } from "@biseo/web/components/atoms";
-import { ModalInner, Modal } from "@biseo/web/components/molecules";
-import { useAgendaTemplate } from "@biseo/web/services/agenda-template";
 
 export const CreateTemplateModal: React.FC = () => {
   const [templateTitle, setTemplateTitle] = useState("");
@@ -107,9 +108,7 @@ export const CreateTemplateModal: React.FC = () => {
               onClick={onTemplateUpdate}
               disabled={!validated}
             >
-              <Text variant="boldtitle3" color="blue600">
-                템플릿 생성하기
-              </Text>
+              <p css={[text.boldtitle3, text.blue600]}>템플릿 생성하기</p>
             </Button>
           </Link>
         </Box>
diff --git a/packages/web/src/components/organisms/CreateUserTagModal.tsx b/packages/web/src/components/organisms/CreateUserTagModal.tsx
index b73d5042..451708d4 100644
--- a/packages/web/src/components/organisms/CreateUserTagModal.tsx
+++ b/packages/web/src/components/organisms/CreateUserTagModal.tsx
@@ -1,10 +1,10 @@
-import React, { useState, useMemo } from "react";
-import { Link } from "react-router-dom";
-
-import { Button, Box, Text } from "@biseo/web/components/atoms";
+import { Box, Button } from "@biseo/web/components/atoms";
 import { Modal, ModalInner } from "@biseo/web/components/molecules";
 import { useAdminUser } from "@biseo/web/services/admin-user";
 import { useUserTag } from "@biseo/web/services/user-tag";
+import { text } from "@biseo/web/styles";
+import React, { useMemo, useState } from "react";
+import { Link } from "react-router-dom";
 import { UserTable } from "./UserTable";
 
 export const CreateUserTagModal: React.FC = () => {
@@ -83,9 +83,7 @@ export const CreateUserTagModal: React.FC = () => {
               style={{ textDecoration: "none" }}
             >
               <Button w={300} h={42} onClick={onSubmit} disabled={!validated}>
-                <Text variant="boldtitle3" color="blue600">
-                  태그 생성하기
-                </Text>
+                <p css={[text.boldtitle3, text.blue600]}>태그 생성하기</p>
               </Button>
             </Link>
           </Box>
diff --git a/packages/web/src/components/organisms/EditAgendaModal.tsx b/packages/web/src/components/organisms/EditAgendaModal.tsx
index 35b19154..acfe7550 100644
--- a/packages/web/src/components/organisms/EditAgendaModal.tsx
+++ b/packages/web/src/components/organisms/EditAgendaModal.tsx
@@ -6,7 +6,6 @@ import {
   Button,
   SelectTagBox,
   SelectTemplateBox,
-  Text,
 } from "@biseo/web/components/atoms";
 import {
   AdminAgendaTagsSelect,
@@ -16,6 +15,7 @@ import {
 import { useAdminAgenda } from "@biseo/web/services/admin-agenda";
 import { useAdminUser } from "@biseo/web/services/admin-user";
 import { useAgendaTemplate } from "@biseo/web/services/agenda-template";
+import { text } from "@biseo/web/styles";
 import { UserTable } from "./UserTable";
 
 export const EditAgendaModal: React.FC = () => {
@@ -210,9 +210,7 @@ export const EditAgendaModal: React.FC = () => {
                 style={{ textDecoration: "none" }}
               >
                 <Button w={130} h={38} onClick={onSubmit} disabled={!validated}>
-                  <Text variant="boldtitle3" color="blue600">
-                    투표 수정하기
-                  </Text>
+                  <p css={[text.boldtitle3, text.blue600]}>투표 수정하기</p>
                 </Button>
               </Link>
               <Link
@@ -222,9 +220,7 @@ export const EditAgendaModal: React.FC = () => {
                 style={{ textDecoration: "none" }}
               >
                 <Button w={130} h={38} onClick={() => deleteAgenda(agendaId)}>
-                  <Text variant="boldtitle3" color="blue600">
-                    투표 삭제하기
-                  </Text>
+                  <p css={[text.boldtitle3, text.blue600]}>투표 삭제하기</p>
                 </Button>
               </Link>
             </Box>
diff --git a/packages/web/src/components/organisms/EditTemplateModal.tsx b/packages/web/src/components/organisms/EditTemplateModal.tsx
index 23a123e7..d848144d 100644
--- a/packages/web/src/components/organisms/EditTemplateModal.tsx
+++ b/packages/web/src/components/organisms/EditTemplateModal.tsx
@@ -1,8 +1,9 @@
-import React, { useMemo, useState } from "react";
-import { Link, useLocation } from "react-router-dom";
-import { Button, Box, Text } from "@biseo/web/components/atoms";
+import { Box, Button } from "@biseo/web/components/atoms";
 import { Modal, ModalInner } from "@biseo/web/components/molecules";
 import { useAgendaTemplate } from "@biseo/web/services/agenda-template";
+import { text } from "@biseo/web/styles";
+import React, { useMemo, useState } from "react";
+import { Link, useLocation } from "react-router-dom";
 
 export const EditTemplateModal: React.FC = () => {
   const location = useLocation();
@@ -152,9 +153,7 @@ export const EditTemplateModal: React.FC = () => {
               onClick={onTemplateUpdate}
               disabled={!validated}
             >
-              <Text variant="boldtitle3" color="blue600">
-                템플릿 수정하기
-              </Text>
+              <p css={[text.boldtitle3, text.blue600]}>템플릿 수정하기</p>
             </Button>
             <Link
               to={validated ? ".." : "#"}
@@ -163,9 +162,7 @@ export const EditTemplateModal: React.FC = () => {
               style={{ textDecoration: "none" }}
             >
               <Button w={145} h={40} onClick={onTemplateDelete}>
-                <Text variant="boldtitle3" color="blue600">
-                  템플릿 삭제하기
-                </Text>
+                <p css={[text.boldtitle3, text.blue600]}>템플릿 삭제하기</p>
               </Button>
             </Link>
           </Box>
diff --git a/packages/web/src/components/organisms/EditUserTagModal.tsx b/packages/web/src/components/organisms/EditUserTagModal.tsx
index d18e48e9..5489bb71 100644
--- a/packages/web/src/components/organisms/EditUserTagModal.tsx
+++ b/packages/web/src/components/organisms/EditUserTagModal.tsx
@@ -1,10 +1,11 @@
 import React, { useEffect, useMemo, useState } from "react";
 import { Link, useLocation } from "react-router-dom";
 
-import { Box, Button, Text } from "@biseo/web/components/atoms";
+import { Box, Button } from "@biseo/web/components/atoms";
 import { Modal, ModalInner } from "@biseo/web/components/molecules";
 import { useAdminUser } from "@biseo/web/services/admin-user";
 import { useUserTag } from "@biseo/web/services/user-tag";
+import { text } from "@biseo/web/styles";
 import { UserTable } from "./UserTable";
 
 export const EditUserTagModal: React.FC = () => {
@@ -95,9 +96,7 @@ export const EditUserTagModal: React.FC = () => {
               style={{ textDecoration: "none" }}
             >
               <Button w={145} h={40} onClick={onSubmit} disabled={!validated}>
-                <Text variant="boldtitle3" color="blue600">
-                  태그 수정하기
-                </Text>
+                <p css={[text.boldtitle3, text.blue600]}>태그 수정하기</p>
               </Button>
             </Link>
             <Link
@@ -107,9 +106,7 @@ export const EditUserTagModal: React.FC = () => {
               style={{ textDecoration: "none" }}
             >
               <Button w={145} h={40} onClick={() => deleteTag(tagId)}>
-                <Text variant="boldtitle3" color="blue600">
-                  태그 삭제하기
-                </Text>
+                <p css={[text.boldtitle3, text.blue600]}>태그 삭제하기</p>
               </Button>
             </Link>
           </Box>
diff --git a/packages/web/src/components/organisms/OngoingAgendaModal.tsx b/packages/web/src/components/organisms/OngoingAgendaModal.tsx
index 611d8662..47f3b398 100644
--- a/packages/web/src/components/organisms/OngoingAgendaModal.tsx
+++ b/packages/web/src/components/organisms/OngoingAgendaModal.tsx
@@ -1,13 +1,14 @@
-import React from "react";
-import { Link, useLocation } from "react-router-dom";
+import { Box, Button } from "@biseo/web/components/atoms";
 import {
   AdminAgendaTags,
   Modal,
   ModalInner,
   ParticipantBar,
 } from "@biseo/web/components/molecules";
-import { Box, Button, Text } from "@biseo/web/components/atoms";
 import { useAdminAgenda } from "@biseo/web/services/admin-agenda";
+import { text } from "@biseo/web/styles";
+import React from "react";
+import { Link, useLocation } from "react-router-dom";
 import { UserTable } from "./UserTable";
 
 export const OngoingAgendaModal: React.FC = () => {
@@ -80,9 +81,7 @@ export const OngoingAgendaModal: React.FC = () => {
             <AdminAgendaTags />
             <Box dir="row" w={270} gap={10} justify="space-between">
               <Button w={130} h={38} onClick={remind}>
-                <Text variant="boldtitle3" color="blue600">
-                  투표 독촉하기
-                </Text>
+                <p css={[text.boldtitle3, text.blue600]}>투표 독촉하기</p>
               </Button>
               <Link
                 to=".."
@@ -91,9 +90,7 @@ export const OngoingAgendaModal: React.FC = () => {
                 style={{ textDecoration: "none" }}
               >
                 <Button w={130} h={38} onClick={terminate}>
-                  <Text variant="boldtitle3" color="blue600">
-                    투표 종료하기
-                  </Text>
+                  <p css={[text.boldtitle3, text.blue600]}>투표 종료하기</p>
                 </Button>
               </Link>
             </Box>
diff --git a/packages/web/src/components/pages/LoginPage.tsx b/packages/web/src/components/pages/LoginPage.tsx
index a8cfbbdd..03da3239 100644
--- a/packages/web/src/components/pages/LoginPage.tsx
+++ b/packages/web/src/components/pages/LoginPage.tsx
@@ -1,16 +1,16 @@
-import React, { type FormEvent, useCallback, useState } from "react";
-import { Navigate } from "react-router-dom";
 import styled from "@emotion/styled";
 import { motion } from "framer-motion";
+import React, { useCallback, useState, type FormEvent } from "react";
+import { Navigate } from "react-router-dom";
 
 import { LogoLargeIcon } from "@biseo/web/assets";
 import LandingImg from "@biseo/web/assets/landing.png";
 import { useAuth } from "@biseo/web/services/auth";
 
 import { useInput } from "@biseo/web/common/hooks";
-import { theme } from "@biseo/web/theme";
-import { Box, Text } from "@biseo/web/components/atoms";
+import { Box } from "@biseo/web/components/atoms";
 import { text } from "@biseo/web/styles";
+import { theme } from "@biseo/web/theme";
 
 const Page = styled.div`
   width: 100vw;
@@ -156,15 +156,13 @@ export const LoginPage: React.FC = () => {
           />
           <Box dir="column" gap={8} align="flex-start">
             {error && (
-              <Text variant="subtitle" color="blue600">
+              <p css={[text.subtitle, text.blue600]}>
                 아이디 또는 비밀번호가 올바르지 않습니다.
-              </Text>
+              </p>
             )}
 
             <LoginButton>
-              <Text variant="body" color="blue600">
-                로그인
-              </Text>
+              <p css={[text.body, text.blue600]}>로그인</p>
             </LoginButton>
           </Box>
         </Box>

From 4e204b08402b98f14d2872bb87f3c6ca9906ebd5 Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Wed, 15 Nov 2023 21:25:24 +0900
Subject: [PATCH 02/19] feat: apply multiLine to all p tag

---
 packages/web/src/index.css      |  7 +++++++
 packages/web/src/styles/text.ts | 16 +++++++++++++++-
 2 files changed, 22 insertions(+), 1 deletion(-)

diff --git a/packages/web/src/index.css b/packages/web/src/index.css
index 1b841ae1..47fae3c8 100644
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -21,3 +21,10 @@ body,
 #root {
   height: 100%;
 }
+
+/* use text.singeLine as default */
+p {
+    white-space: pre-line;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
\ No newline at end of file
diff --git a/packages/web/src/styles/text.ts b/packages/web/src/styles/text.ts
index 0c59bc38..3b2c4359 100644
--- a/packages/web/src/styles/text.ts
+++ b/packages/web/src/styles/text.ts
@@ -1,5 +1,17 @@
-import { css } from "@emotion/react";
 import { mapColors } from "@biseo/web/styles/color";
+import { css } from "@emotion/react";
+
+const singleLine = css`
+  white-space: pre-line;
+  overflow: hidden;
+  text-overflow: ellipsis;
+`;
+
+const multiLine = css`
+  white-space: pre-line;
+  word-break: break-all;
+  overflow-wrap: break-word;
+`;
 
 const style = (size: number, weight: number) => css`
   font-size: ${size}px;
@@ -29,4 +41,6 @@ export const text = {
   boldtitle2: style(13, 700),
   boldtitle3: style(12, 700),
   boldtitle4: style(11, 700),
+  singleLine,
+  multiLine,
 } as const;

From 8cc0989429fe6a7e9d70c14b88c6c2774d39dee8 Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Wed, 15 Nov 2023 21:26:00 +0900
Subject: [PATCH 03/19] chore: use path for packageDir

---
 .eslintrc     | 128 ------------------------------------------------
 .eslintrc.cjs | 132 ++++++++++++++++++++++++++++++++++++++++++++++++++
 2 files changed, 132 insertions(+), 128 deletions(-)
 delete mode 100644 .eslintrc
 create mode 100644 .eslintrc.cjs

diff --git a/.eslintrc b/.eslintrc
deleted file mode 100644
index 8c95780d..00000000
--- a/.eslintrc
+++ /dev/null
@@ -1,128 +0,0 @@
-{
-  "env": {
-    "browser": true,
-    "es2021": true,
-    "node": true
-  },
-  "extends": [
-    "plugin:@typescript-eslint/recommended",
-    "airbnb",
-    "airbnb-typescript",
-    "prettier"
-  ],
-  "overrides": [
-    {
-      "env": {
-        "node": true
-      },
-      "files": [".eslintrc.{js,cjs}"],
-      "parserOptions": {
-        "sourceType": "script"
-      }
-    }
-  ],
-  "parser": "@typescript-eslint/parser",
-  "parserOptions": {
-    "ecmaVersion": "latest",
-    "sourceType": "module",
-    "ecmaFeatures": {
-      "jsx": true
-    },
-    "project": ["./packages/*/tsconfig.json", "./tsconfig.json"]
-  },
-  "plugins": ["import", "@typescript-eslint", "react"],
-  "ignorePatterns": ["node_modules/", "dist/"],
-  "rules": {
-    "import/extensions": [
-      "error",
-      "ignorePackages",
-      {
-        // Since airbnb javascript rules does not allow to import typescript files without extensions, we need to disable it
-        "ts": "never",
-        "tsx": "never"
-      }
-    ],
-    "import/named": "error",
-    "import/no-extraneous-dependencies": [
-      "error",
-      {
-        "packageDir": [
-          "./packages/web",
-          "./packages/api",
-          "./packages/interface",
-          "."
-        ]
-      }
-    ],
-    "import/prefer-default-export": "off",
-    "no-param-reassign": [
-      "error",
-      {
-        "props": true,
-        // function parameters cannot be reassigned for readability, except for the ones in the array
-        "ignorePropertyModificationsFor": ["socket", "state"]
-      }
-    ],
-    "no-restricted-imports": [
-      "error",
-      {
-        "patterns": [
-          {
-            "group": ["../*"],
-            "message": "Usage of relative parent imports is not allowed. Use path alias instead."
-          }
-        ]
-      }
-    ],
-    "radix": ["error", "as-needed"],
-    "react/function-component-definition": [
-      "error",
-      {
-        "namedComponents": "arrow-function",
-        "unnamedComponents": "arrow-function"
-      }
-    ],
-    "react/jsx-uses-react": "off",
-    "react/jsx-no-useless-fragment": [
-      "error",
-      {
-        // this allows <>{value}</> syntax, where value is a string or a number
-        "allowExpressions": true
-      }
-    ],
-    "react/jsx-props-no-spreading": "off",
-    "react/no-unknown-property": [
-      "error",
-      {
-        "ignore": ["css"]
-      }
-    ],
-    "react/react-in-jsx-scope": "off",
-    "react/require-default-props": [
-      "error",
-      {
-        // default values of the optional props must be provided as function arguments
-        "functions": "defaultArguments"
-      }
-    ],
-    "@typescript-eslint/consistent-type-imports": [
-      "error",
-      {
-        "prefer": "type-imports"
-      }
-    ]
-  },
-  "settings": {
-    "import/parsers": {
-      "@typescript-eslint/parser": [".ts", ".tsx"]
-    },
-    "import/resolver": {
-      "typescript": {
-        "project": ["./tsconfig.json"]
-      }
-    },
-    "react": {
-      "version": "18.2.0"
-    }
-  }
-}
diff --git a/.eslintrc.cjs b/.eslintrc.cjs
new file mode 100644
index 00000000..a9f89d1b
--- /dev/null
+++ b/.eslintrc.cjs
@@ -0,0 +1,132 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const path = require("path");
+
+module.exports = {
+    env: {
+        browser: true,
+        es2021: true,
+        node: true,
+    },
+    extends: [
+        "plugin:@typescript-eslint/recommended",
+        "airbnb",
+        "airbnb-typescript",
+        "prettier",
+    ],
+    overrides: [
+        {
+            env: {
+                node: true,
+            },
+            files: [".eslintrc.{js,cjs}"],
+            parserOptions: {
+                sourceType: "script",
+            },
+        },
+    ],
+    parser: "@typescript-eslint/parser",
+    parserOptions: {
+        ecmaVersion: "latest",
+        sourceType: "module",
+        ecmaFeatures: {
+            jsx: true,
+        },
+        project: ["./packages/*/tsconfig.json", "./tsconfig.json"],
+    },
+    plugins: ["import", "@typescript-eslint", "react"],
+    ignorePatterns: ["node_modules/", "dist/"],
+    rules: {
+        "import/extensions": [
+            "error",
+            "ignorePackages",
+            {
+                // Since airbnb javascript rules does not allow to import typescript files without extensions, we need to disable it
+                ts: "never",
+                tsx: "never",
+            },
+        ],
+        "import/named": "error",
+        "import/no-extraneous-dependencies": [
+            "error",
+            {
+                packageDir: [
+                    path.join(__dirname, "packages/web"),
+                    path.join(__dirname, "packages/api"),
+                    path.join(__dirname, "packages/interface"),
+                    ".",
+                ],
+            },
+        ],
+        "import/prefer-default-export": "off",
+        "no-param-reassign": [
+            "error",
+            {
+                props: true,
+                // function parameters cannot be reassigned for readability, except for the ones in the array
+                ignorePropertyModificationsFor: ["socket", "state"],
+            },
+        ],
+        "no-restricted-imports": [
+            "error",
+            {
+                patterns: [
+                    {
+                        group: ["../*"],
+                        message:
+                            "Usage of relative parent imports is not allowed. Use path alias instead.",
+                    },
+                ],
+            },
+        ],
+        "radix": ["error", "as-needed"],
+        "react/function-component-definition": [
+            "error",
+            {
+                namedComponents: "arrow-function",
+                unnamedComponents: "arrow-function",
+            },
+        ],
+        "react/jsx-uses-react": "off",
+        "react/jsx-no-useless-fragment": [
+            "error",
+            {
+                // this allows <>{value}</> syntax, where value is a string or a number
+                allowExpressions: true,
+            },
+        ],
+        "react/jsx-props-no-spreading": "off",
+        "react/no-unknown-property": [
+            "error",
+            {
+                ignore: ["css"],
+            },
+        ],
+        "react/react-in-jsx-scope": "off",
+        "react/require-default-props": [
+            "error",
+            {
+                // default values of the optional props must be provided as function arguments
+                functions: "defaultArguments",
+            },
+        ],
+        "@typescript-eslint/consistent-type-imports": [
+            "error",
+            {
+                prefer: "type-imports",
+            },
+        ],
+    },
+    settings: {
+        "import/parsers": {
+            "@typescript-eslint/parser": [".ts", ".tsx"],
+        },
+        "import/resolver": {
+            typescript: {
+                project: ["./tsconfig.json"],
+            },
+        },
+        "react": {
+            version: "18.2.0",
+        },
+    },
+};

From de636e0f5b20c14dd890404040cdfb1e1caaef58 Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Wed, 15 Nov 2023 21:35:07 +0900
Subject: [PATCH 04/19] refactor: rename color to prevent type error

---
 .../web/src/components/molecules/Choice.tsx   | 23 +++++--------------
 packages/web/src/styles/color.ts              | 12 +++++-----
 2 files changed, 12 insertions(+), 23 deletions(-)

diff --git a/packages/web/src/components/molecules/Choice.tsx b/packages/web/src/components/molecules/Choice.tsx
index d2a2dd80..8a941c29 100644
--- a/packages/web/src/components/molecules/Choice.tsx
+++ b/packages/web/src/components/molecules/Choice.tsx
@@ -1,12 +1,10 @@
-import React, { useState, type PropsWithChildren } from "react";
-import styled from "@emotion/styled";
-import { css } from "@emotion/react";
-
 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";
+import { center, h, text as styleText, w } from "@biseo/web/styles";
+import { theme, type Color } from "@biseo/web/theme";
+import { css } from "@emotion/react";
+import styled from "@emotion/styled";
+import React, { useState, type PropsWithChildren } from "react";
 
 const Container = styled.div<{
   color: Color;
@@ -35,16 +33,7 @@ interface ChoiceTextProps extends PropsWithChildren {
 }
 
 const ChoiceText: React.FC<ChoiceTextProps> = ({ color, children = null }) => (
-  <Text
-    variant="body"
-    color={color}
-    style={{
-      wordBreak: "break-all",
-      overflowWrap: "break-word",
-    }}
-  >
-    {children}
-  </Text>
+  <p css={[styleText.body, styleText[color]]}>{children}</p>
 );
 
 const choiceBaseStyle = (
diff --git a/packages/web/src/styles/color.ts b/packages/web/src/styles/color.ts
index 644899e8..14be8c8f 100644
--- a/packages/web/src/styles/color.ts
+++ b/packages/web/src/styles/color.ts
@@ -16,12 +16,12 @@ export const colors = {
   blue500: "#2F80DE",
   blue600: "#065DAC",
   blue700: "#004B81",
-  purpleLight: "#F6EEFE",
-  purple: "#9836EF",
-  orangeLight: "#FDF7E6",
-  orange: "#FF9211",
-  greenLight: "#E9F9EF",
-  green: "#008B1C",
+  purple200: "#F6EEFE",
+  purple600: "#9836EF",
+  orange200: "#FDF7E6",
+  orange600: "#FF9211",
+  green200: "#E9F9EF",
+  green600: "#008B1C",
 } as const;
 
 type ColorKeys = keyof typeof colors;

From f2ee826bc6a37af57928243f1882039c12ac36cc Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Wed, 15 Nov 2023 21:35:28 +0900
Subject: [PATCH 05/19] refactor: remove unused Text atom

---
 packages/web/src/components/atoms/Text.tsx | 40 ----------------------
 packages/web/src/components/atoms/index.ts |  1 -
 2 files changed, 41 deletions(-)
 delete mode 100644 packages/web/src/components/atoms/Text.tsx

diff --git a/packages/web/src/components/atoms/Text.tsx b/packages/web/src/components/atoms/Text.tsx
deleted file mode 100644
index 38c9eb2f..00000000
--- a/packages/web/src/components/atoms/Text.tsx
+++ /dev/null
@@ -1,40 +0,0 @@
-import styled from "@emotion/styled";
-import { css } from "@emotion/react";
-import type { Color } from "@biseo/web/theme";
-
-const typography = (size: number, weight: number) => css`
-  font-size: ${size}px;
-  font-weight: ${weight};
-`;
-
-const textStyles = {
-  title1: typography(15, 500),
-  title2: typography(14, 500),
-  title3: typography(13, 500),
-  subtitle: typography(11, 500),
-  body: typography(12, 500),
-  option1: typography(10, 500),
-  option2: typography(9, 500),
-  boldtitle1: typography(14, 700),
-  boldtitle2: typography(13, 700),
-  boldtitle3: typography(12, 700),
-  boldtitle4: typography(11, 700),
-} as const;
-
-type Variants = keyof typeof textStyles;
-
-/**
- * @deprecated use `text` token instead
- */
-export const Text = styled.p<{
-  variant?: Variants;
-  color?: Color;
-  position?: "absolute" | "static";
-}>(({ variant = "body", color = "black", theme, position = "static" }) => [
-  css({
-    color: theme.colors[color],
-    position,
-    whiteSpace: "pre-line",
-  }),
-  textStyles[variant],
-]);
diff --git a/packages/web/src/components/atoms/index.ts b/packages/web/src/components/atoms/index.ts
index a4ac980c..fe43a84f 100644
--- a/packages/web/src/components/atoms/index.ts
+++ b/packages/web/src/components/atoms/index.ts
@@ -13,7 +13,6 @@ export * from "./SelectTagBox";
 export * from "./SelectTemplateBox";
 export * from "./Table";
 export * from "./Tag";
-export * from "./Text";
 export * from "./TextArea";
 export * from "./TextInput";
 export * from "./UserTag";

From 55bb7bc8f0ebfa39b261bbcb8ae3e24bb0fc5e25 Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Wed, 15 Nov 2023 21:44:33 +0900
Subject: [PATCH 06/19] refactor: use colors css token instead of theme

---
 .../web/src/components/atoms/BorderedBox.tsx  | 15 +++++----
 packages/web/src/components/atoms/Box.tsx     |  9 +++---
 packages/web/src/components/atoms/Button.tsx  | 10 +++---
 packages/web/src/components/atoms/Card.tsx    | 12 +++----
 .../web/src/components/atoms/CheckBox.tsx     |  2 +-
 packages/web/src/components/atoms/Divider.tsx |  7 ++--
 .../src/components/atoms/GrayTextButton.tsx   |  2 +-
 .../web/src/components/atoms/HyperText.tsx    | 11 ++++---
 packages/web/src/components/atoms/Label.tsx   | 14 ++++----
 .../web/src/components/atoms/ProgressBar.tsx  |  9 +++---
 packages/web/src/components/atoms/Scroll.tsx  |  4 +--
 packages/web/src/components/atoms/Table.tsx   | 19 +++++------
 packages/web/src/components/atoms/Tag.tsx     | 11 +++----
 .../web/src/components/atoms/TextInput.tsx    |  4 +--
 packages/web/src/components/atoms/UserTag.tsx |  8 ++---
 .../src/components/molecules/ChatHeader.tsx   |  2 +-
 .../web/src/components/molecules/Choice.tsx   | 10 +++---
 .../src/components/molecules/HeaderItem.tsx   |  2 +-
 .../src/components/molecules/Message/List.tsx |  5 +--
 .../molecules/Message/NoticeMessage.tsx       |  4 +--
 .../components/molecules/OptionVoteResult.tsx |  4 +--
 .../components/molecules/ParticipantBar.tsx   |  4 +--
 .../src/components/organisms/ChatSection.tsx  |  2 +-
 .../web/src/components/organisms/Header.tsx   | 16 +++++-----
 .../web/src/components/pages/LoginPage.tsx    | 17 +++++-----
 packages/web/src/styles/color.ts              |  2 +-
 packages/web/src/theme.ts                     | 32 -------------------
 27 files changed, 104 insertions(+), 133 deletions(-)
 delete mode 100644 packages/web/src/theme.ts

diff --git a/packages/web/src/components/atoms/BorderedBox.tsx b/packages/web/src/components/atoms/BorderedBox.tsx
index 4a298fcb..658de3a4 100644
--- a/packages/web/src/components/atoms/BorderedBox.tsx
+++ b/packages/web/src/components/atoms/BorderedBox.tsx
@@ -1,6 +1,7 @@
-import styled from "@emotion/styled";
+import type { ColorKeys } from "@biseo/web/styles";
+import { colors } from "@biseo/web/styles";
 import { css } from "@emotion/react";
-import type { Color } from "@biseo/web/theme";
+import styled from "@emotion/styled";
 
 type Size = number | "hug" | "fill";
 const calcSize = (size: Size) => {
@@ -15,7 +16,7 @@ const calcSize = (size: Size) => {
 export const BorderedBox = styled.div<{
   w?: Size;
   h?: Size;
-  bg?: Color;
+  bg?: ColorKeys;
   round?: number;
   roundTop?: number;
   roundBot?: number;
@@ -31,7 +32,7 @@ export const BorderedBox = styled.div<{
   padLeft?: number;
   padRight?: number;
   borderSize?: number;
-  borderColor?: Color;
+  borderColor?: ColorKeys;
   borderStyle?:
     | "solid"
     | "dotted"
@@ -61,7 +62,7 @@ export const BorderedBox = styled.div<{
     padRight = padHorizontal,
     padBottom = padVertical,
     padTop = padVertical,
-    theme,
+
     borderSize = 0,
     borderColor,
     borderStyle,
@@ -69,7 +70,7 @@ export const BorderedBox = styled.div<{
   }) => css`
     width: ${calcSize(w)};
     height: ${calcSize(h)};
-    background-color: ${bg ? theme.colors[bg] : "transparent"};
+    background-color: ${bg ? colors[bg] : "transparent"};
     border-radius: ${roundTop}px ${roundTop}px ${roundBot}px ${roundBot}px;
     display: flex;
     flex-direction: ${dir};
@@ -81,7 +82,7 @@ export const BorderedBox = styled.div<{
     padding-left: ${padLeft}px;
     padding-right: ${padRight}px;
     border: ${borderSize}px ${borderStyle};
-    border-color: ${borderColor ? theme.colors[borderColor] : "transparent"};
+    border-color: ${borderColor ? colors[borderColor] : "transparent"};
     position: ${position};
   `,
 );
diff --git a/packages/web/src/components/atoms/Box.tsx b/packages/web/src/components/atoms/Box.tsx
index 9b4e6a42..86d30bff 100644
--- a/packages/web/src/components/atoms/Box.tsx
+++ b/packages/web/src/components/atoms/Box.tsx
@@ -1,6 +1,6 @@
-import styled from "@emotion/styled";
+import { colors, type ColorKeys } from "@biseo/web/styles";
 import { css } from "@emotion/react";
-import type { Color } from "@biseo/web/theme";
+import styled from "@emotion/styled";
 
 type Size = number | "hug" | "fill";
 const calcSize = (size: Size) => {
@@ -15,7 +15,7 @@ const calcSize = (size: Size) => {
 export const Box = styled.div<{
   w?: Size;
   h?: Size;
-  bg?: Color;
+  bg?: ColorKeys;
   round?: number;
   dir?: "row" | "column";
   gap?: number | "auto";
@@ -49,7 +49,6 @@ export const Box = styled.div<{
     padRight = padHorizontal,
     padBottom = padVertical,
     padTop = padVertical,
-    theme,
     zIndex = 0,
     position = "static",
     self = "auto",
@@ -57,7 +56,7 @@ export const Box = styled.div<{
   }) => css`
     width: ${calcSize(w)};
     height: ${calcSize(h)};
-    background-color: ${bg ? theme.colors[bg] : "transparent"};
+    background-color: ${bg ? colors[bg] : "transparent"};
     border-radius: ${round}px;
     display: flex;
     flex-direction: ${dir};
diff --git a/packages/web/src/components/atoms/Button.tsx b/packages/web/src/components/atoms/Button.tsx
index 3d478861..14a1c1e2 100644
--- a/packages/web/src/components/atoms/Button.tsx
+++ b/packages/web/src/components/atoms/Button.tsx
@@ -1,6 +1,6 @@
-import styled from "@emotion/styled";
+import { colors, type ColorKeys } from "@biseo/web/styles";
 import { css } from "@emotion/react";
-import type { Color } from "@biseo/web/theme";
+import styled from "@emotion/styled";
 
 type Size = number | "hug" | "fill";
 const calcSize = (size: Size) => {
@@ -12,10 +12,10 @@ const calcSize = (size: Size) => {
 export const Button = styled.button<{
   w?: Size;
   h?: Size;
-  color?: Color;
+  color?: ColorKeys;
   padHorizontal?: number;
 }>(
-  ({ w = "fill", h = 28, color = "blue200", padHorizontal = 0, theme }) => css`
+  ({ w = "fill", h = 28, color = "blue200", padHorizontal = 0 }) => css`
     display: flex;
     width: ${calcSize(w)};
     height: ${calcSize(h)};
@@ -25,7 +25,7 @@ export const Button = styled.button<{
     justify-content: center;
     align-items: center;
     line-height: 28px;
-    background-color: ${theme.colors[color]};
+    background-color: ${colors[color]};
 
     &:hover {
       cursor: pointer;
diff --git a/packages/web/src/components/atoms/Card.tsx b/packages/web/src/components/atoms/Card.tsx
index 01ffb38b..6f60a1e4 100644
--- a/packages/web/src/components/atoms/Card.tsx
+++ b/packages/web/src/components/atoms/Card.tsx
@@ -1,6 +1,6 @@
-import styled from "@emotion/styled";
+import { colors } from "@biseo/web/styles";
 import { css } from "@emotion/react";
-import { theme } from "@biseo/web/theme";
+import styled from "@emotion/styled";
 
 export const Card = styled.div<{
   primary?: boolean;
@@ -22,11 +22,11 @@ export const Card = styled.div<{
     justify = "start",
   }) => css`
     border-radius: ${round}px;
-    background-color: ${primary ? theme.colors.blue100 : theme.colors.white};
+    background-color: ${primary ? colors.blue100 : colors.white};
     border: 1px solid
       ${(() => {
-        if (bold) return primary ? theme.colors.blue600 : theme.colors.gray500;
-        return primary ? theme.colors.blue300 : theme.colors.gray300;
+        if (bold) return primary ? colors.blue600 : colors.gray500;
+        return primary ? colors.blue300 : colors.gray300;
       })()};
     padding: ${small ? `12px 15px` : `18px 20px`};
     width: 100%;
@@ -41,7 +41,7 @@ export const Card = styled.div<{
       cursor: pointer;
 
       &:hover {
-        background-color: ${theme.colors.blue100};
+        background-color: ${colors.blue100};
       }
     `}
   `,
diff --git a/packages/web/src/components/atoms/CheckBox.tsx b/packages/web/src/components/atoms/CheckBox.tsx
index 5a53cf63..f6643b3f 100644
--- a/packages/web/src/components/atoms/CheckBox.tsx
+++ b/packages/web/src/components/atoms/CheckBox.tsx
@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 export const CheckBox = styled.input`
   width: 9px;
   background: transparent;
-  accent-color: ${props => props.theme.colors.gray600};
+  accent-color: ${props => props.colors.gray600};
 `;
 
 CheckBox.defaultProps = { type: "checkbox" };
diff --git a/packages/web/src/components/atoms/Divider.tsx b/packages/web/src/components/atoms/Divider.tsx
index 91a090f5..9bb265c2 100644
--- a/packages/web/src/components/atoms/Divider.tsx
+++ b/packages/web/src/components/atoms/Divider.tsx
@@ -1,19 +1,20 @@
+import { colors } from "@biseo/web/styles";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
 export const Divider = styled.hr<{
   dir?: "horizontal" | "vertical";
 }>(
-  ({ dir = "horizontal", theme }) => css`
+  ({ dir = "horizontal" }) => css`
     border: none;
     ${dir === "horizontal"
       ? css`
           width: 100%;
-          border-bottom: 1px solid ${theme.colors.gray300};
+          border-bottom: 1px solid ${colors.gray300};
         `
       : css`
           height: 100%;
-          border-right: 1px solid ${theme.colors.gray300};
+          border-right: 1px solid ${colors.gray300};
         `}
   `,
 );
diff --git a/packages/web/src/components/atoms/GrayTextButton.tsx b/packages/web/src/components/atoms/GrayTextButton.tsx
index e298aca5..0a015e95 100644
--- a/packages/web/src/components/atoms/GrayTextButton.tsx
+++ b/packages/web/src/components/atoms/GrayTextButton.tsx
@@ -2,7 +2,7 @@ import styled from "@emotion/styled";
 
 export const GrayTextButton = styled.button`
   background-color: transparent;
-  color: ${props => props.theme.colors.gray400};
+  color: ${props => props.colors.gray400};
   font-size: 9px;
   font-weight: 500;
   border: none;
diff --git a/packages/web/src/components/atoms/HyperText.tsx b/packages/web/src/components/atoms/HyperText.tsx
index 5372cb2c..b827eb7b 100644
--- a/packages/web/src/components/atoms/HyperText.tsx
+++ b/packages/web/src/components/atoms/HyperText.tsx
@@ -1,6 +1,7 @@
-import styled from "@emotion/styled";
+import type { ColorKeys } from "@biseo/web/styles";
+import { colors } from "@biseo/web/styles";
 import { css } from "@emotion/react";
-import type { Color } from "@biseo/web/theme";
+import styled from "@emotion/styled";
 
 const typography = (size: number, weight: number) => css`
   font-size: ${size}px;
@@ -28,11 +29,11 @@ type Variants = keyof typeof textStyles;
  */
 export const HyperText = styled.a<{
   variant?: Variants;
-  color?: Color;
+  color?: ColorKeys;
   position?: "absolute" | "static";
-}>(({ variant = "body", color = "black", theme, position = "static" }) => [
+}>(({ variant = "body", color = "black", position = "static" }) => [
   css({
-    color: theme.colors[color],
+    color: colors[color],
     position,
     whiteSpace: "pre-line",
   }),
diff --git a/packages/web/src/components/atoms/Label.tsx b/packages/web/src/components/atoms/Label.tsx
index c800b542..21ecef06 100644
--- a/packages/web/src/components/atoms/Label.tsx
+++ b/packages/web/src/components/atoms/Label.tsx
@@ -1,6 +1,6 @@
-import styled from "@emotion/styled";
 import { DownArrowIcon } from "@biseo/web/assets";
 import { text } from "@biseo/web/styles";
+import styled from "@emotion/styled";
 
 export const SelectWrapper = styled.div`
   position: relative;
@@ -14,15 +14,15 @@ export const Select = styled.select<{ w: number; h: number }>`
   justify-content: space-between;
   align-items: center;
   border-radius: 5px;
-  border: 1px solid ${props => props.theme.colors.gray200};
-  background-color: ${props => props.theme.colors.white};
+  border: 1px solid ${props => props.colors.gray200};
+  background-color: ${props => props.colors.white};
 
   font-family: "Noto Sansf KR";
   font-size: 10px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
-  color: ${props => props.theme.colors.gray600};
+  color: ${props => props.colors.gray600};
 
   &:focus {
     outline: none;
@@ -54,10 +54,10 @@ export const TemplateSelect = styled.select<{ w: number; h: number }>`
   justify-content: space-between;
   align-items: center;
   border-radius: 5px;
-  border: 1px solid ${props => props.theme.colors.gray200};
-  background-color: ${props => props.theme.colors.gray100};
+  border: 1px solid ${props => props.colors.gray200};
+  background-color: ${props => props.colors.gray100};
 
-  color: ${props => props.theme.colors.gray300};
+  color: ${props => props.colors.gray300};
 
   ${text.subtitle}
 
diff --git a/packages/web/src/components/atoms/ProgressBar.tsx b/packages/web/src/components/atoms/ProgressBar.tsx
index ac1724cf..7d0d55d1 100644
--- a/packages/web/src/components/atoms/ProgressBar.tsx
+++ b/packages/web/src/components/atoms/ProgressBar.tsx
@@ -1,13 +1,14 @@
-import React from "react";
+import { colors } from "@biseo/web/styles";
 import styled from "@emotion/styled";
+import React from "react";
 
 const ProgressContainer = styled.div<{ width?: number }>(
-  ({ width = 180, theme }) => `
+  ({ width = 180 }) => `
   display: flex;
   align-items: center;
   width: ${width}px;
   height: 12px;
-  background-color: ${theme.colors.blue200};
+  background-color: ${colors.blue200};
   border-radius: 5px;
   overflow: hidden;
 `,
@@ -15,7 +16,7 @@ const ProgressContainer = styled.div<{ width?: number }>(
 
 const ProgressBarFill = styled.div<{ value: number; max: number }>`
   height: 100%;
-  background-color: ${props => props.theme.colors.blue400};
+  background-color: ${colors.blue400};
   width: ${props => (props.max ? (props.value / props.max) * 100 : 0)}%;
   border-radius: 5px ${props => (props.value === props.max ? "5px" : "0px")} 0px
     5px;
diff --git a/packages/web/src/components/atoms/Scroll.tsx b/packages/web/src/components/atoms/Scroll.tsx
index 7bf5b6ad..cf2963d6 100644
--- a/packages/web/src/components/atoms/Scroll.tsx
+++ b/packages/web/src/components/atoms/Scroll.tsx
@@ -1,5 +1,5 @@
-import styled from "@emotion/styled";
 import { css } from "@emotion/react";
+import styled from "@emotion/styled";
 
 /**
  * @deprecated use `scroll` and `scrollBar` instead
@@ -24,7 +24,7 @@ export const Scroll = styled.div<{ hide?: boolean }>`
     ${props =>
       !props.hide &&
       css`
-        background-color: ${props.theme.colors.gray400};
+        background-color: ${props.colors.gray400};
       `}
     border-radius: 100px;
   }
diff --git a/packages/web/src/components/atoms/Table.tsx b/packages/web/src/components/atoms/Table.tsx
index f4f51071..69f5878d 100644
--- a/packages/web/src/components/atoms/Table.tsx
+++ b/packages/web/src/components/atoms/Table.tsx
@@ -1,3 +1,4 @@
+import { colors } from "@biseo/web/styles";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
@@ -24,21 +25,21 @@ export const Cell = styled.td<{ w?: Size; scroll?: boolean }>(
 export const Header = styled.thead`
   width: 100%;
   text-align: left;
-  background-color: ${props => props.theme.colors.gray100};
+  background-color: ${colors.gray100};
 
   > * tr {
-    color: ${props => props.theme.colors.gray500};
-  }
+    color: ${colors.gray500};
+  
 `;
 
 export const Body = styled.tbody`
   display: block;
   width: 100%;
   height: 100%;
-  background-color: ${props => props.theme.colors.white};
+  background-color: ${colors.white};
 
   > * tr {
-    color: ${props => props.theme.colors.gray600};
+    color: ${colors.gray600};
   }
 `;
 
@@ -49,16 +50,16 @@ export const Row = styled.tr<{ selected?: boolean }>`
   align-items: center;
   gap: 5px;
   background-color: ${props =>
-    props.selected ? props.theme.colors.blue100 : "transparent"};
-  border-bottom: solid 1px ${props => props.theme.colors.gray200};
+    props.selected ? colors.blue100 : "transparent"};
+  border-bottom: solid 1px ${colors.gray200};
   padding: 0 5px;
 `;
 
 export const Table = styled.table<{ w?: Size; h?: Size }>(
-  ({ w = "hug", h = "hug", theme }) => css`
+  ({ w = "hug", h = "hug" }) => css`
     width: ${calcSize(w)};
     height: ${calcSize(h)};
-    border: solid 1px ${theme.colors.gray200};
+    border: solid 1px ${colors.gray200};
     border-radius: 5px;
     border-spacing: 0;
     overflow: hidden;
diff --git a/packages/web/src/components/atoms/Tag.tsx b/packages/web/src/components/atoms/Tag.tsx
index 53cc5dfc..42afc29f 100644
--- a/packages/web/src/components/atoms/Tag.tsx
+++ b/packages/web/src/components/atoms/Tag.tsx
@@ -1,13 +1,12 @@
-import React from "react";
-import styled from "@emotion/styled";
-import { css, type SerializedStyles } from "@emotion/react";
-import { theme } from "@biseo/web/theme";
 import type { Color } from "@biseo/web/theme";
+import { css, type SerializedStyles } from "@emotion/react";
+import styled from "@emotion/styled";
+import React from "react";
 
 const colors = (color: Color, bg: Color) =>
   css({
-    color: theme.colors[color],
-    backgroundColor: theme.colors[bg],
+    color: colors[color],
+    backgroundColor: colors[bg],
   });
 
 type TagTypes =
diff --git a/packages/web/src/components/atoms/TextInput.tsx b/packages/web/src/components/atoms/TextInput.tsx
index e0e1020b..d3067557 100644
--- a/packages/web/src/components/atoms/TextInput.tsx
+++ b/packages/web/src/components/atoms/TextInput.tsx
@@ -9,10 +9,10 @@ export const TextInput = styled.input`
   background: transparent;
   border: none;
   border-radius: 5px;
-  color: ${props => props.theme.colors.black};
+  color: ${props => props.colors.black};
   ::placeholder {
     font-family: "Noto Sans KR", sans-serif;
-    color: ${props => props.theme.colors.gray300};
+    color: ${props => props.colors.gray300};
   }
 `;
 TextInput.defaultProps = {
diff --git a/packages/web/src/components/atoms/UserTag.tsx b/packages/web/src/components/atoms/UserTag.tsx
index 0e868fe3..2dcad691 100644
--- a/packages/web/src/components/atoms/UserTag.tsx
+++ b/packages/web/src/components/atoms/UserTag.tsx
@@ -1,5 +1,5 @@
-import React, { type PropsWithChildren } from "react";
 import styled from "@emotion/styled";
+import React, { type PropsWithChildren } from "react";
 
 interface Props extends PropsWithChildren {
   tag?: string;
@@ -13,9 +13,9 @@ const Container = styled.div`
   align-items: center;
   font-size: 9px;
   font-weight: 500;
-  color: ${props => props.theme.colors.gray500};
-  background-color: ${props => props.theme.colors.white};
-  border: solid 1px ${props => props.theme.colors.gray200};
+  color: ${props => props.colors.gray500};
+  background-color: ${props => props.colors.white};
+  border: solid 1px ${props => props.colors.gray200};
   border-radius: 5px;
 `;
 
diff --git a/packages/web/src/components/molecules/ChatHeader.tsx b/packages/web/src/components/molecules/ChatHeader.tsx
index a834e1b8..e9866316 100644
--- a/packages/web/src/components/molecules/ChatHeader.tsx
+++ b/packages/web/src/components/molecules/ChatHeader.tsx
@@ -12,7 +12,7 @@ const Container = styled.div`
   flex-direction: column;
   width: "100%";
   min-height: 42px;
-  background-color: ${props => props.theme.colors.gray100};
+  background-color: ${props => props.colors.gray100};
   padding: 0 20px;
   justify-content: center;
 `;
diff --git a/packages/web/src/components/molecules/Choice.tsx b/packages/web/src/components/molecules/Choice.tsx
index 8a941c29..0429b972 100644
--- a/packages/web/src/components/molecules/Choice.tsx
+++ b/packages/web/src/components/molecules/Choice.tsx
@@ -1,7 +1,7 @@
 import type { Choice } from "@biseo/interface/agenda";
 import { SelectIcon } from "@biseo/web/assets";
-import { center, h, text as styleText, w } from "@biseo/web/styles";
-import { theme, type Color } from "@biseo/web/theme";
+import { center, colors, h, text as styleText, w } from "@biseo/web/styles";
+import { type Color } from "@biseo/web/theme";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import React, { useState, type PropsWithChildren } from "react";
@@ -11,8 +11,8 @@ const Container = styled.div<{
   clickable?: boolean;
 }>`
   border-radius: 5px;
-  background-color: ${props => props.theme.colors[props.color]};
-  border: 1px solid ${props => props.theme.colors.gray200};
+  background-color: ${props => props.colors[props.color]};
+  border: 1px solid ${props => props.colors.gray200};
   padding: 6px 12px 6px 12px;
   width: 340px;
   height: fit-content;
@@ -74,7 +74,7 @@ const ChoiceBase: React.FC<ChoiceBaseProps> = ({
       onMouseLeave={onMouseLeave}
     >
       <div css={[w(13), h(13), center]}>
-        <SelectIcon stroke={theme.colors[choiceStyle.selectIconColor]} />
+        <SelectIcon stroke={colors[choiceStyle.selectIconColor]} />
       </div>
       <ChoiceText color={choiceStyle.textColor}>{text}</ChoiceText>
     </Container>
diff --git a/packages/web/src/components/molecules/HeaderItem.tsx b/packages/web/src/components/molecules/HeaderItem.tsx
index 9d213a81..b884b634 100644
--- a/packages/web/src/components/molecules/HeaderItem.tsx
+++ b/packages/web/src/components/molecules/HeaderItem.tsx
@@ -32,7 +32,7 @@ const SelectIndicator = styled.div`
   bottom: 0;
   width: 100%;
   height: 2px;
-  background-color: ${props => props.theme.colors.black};
+  background-color: ${props => props.colors.black};
   border-radius: 1px 1px 0 0;
 `;
 
diff --git a/packages/web/src/components/molecules/Message/List.tsx b/packages/web/src/components/molecules/Message/List.tsx
index 7abf7c1a..5c785cc9 100644
--- a/packages/web/src/components/molecules/Message/List.tsx
+++ b/packages/web/src/components/molecules/Message/List.tsx
@@ -1,9 +1,10 @@
-import styled from "@emotion/styled";
 import { Scroll } from "@biseo/web/components/atoms";
+import { colors } from "@biseo/web/styles";
+import styled from "@emotion/styled";
 
 export const List = styled(Scroll)`
   display: flex;
   flex-direction: column-reverse;
   flex-grow: 1;
-  background: ${({ theme }) => theme.colors.white};
+  background: ${colors.white};
 `;
diff --git a/packages/web/src/components/molecules/Message/NoticeMessage.tsx b/packages/web/src/components/molecules/Message/NoticeMessage.tsx
index 4befe670..3e03d9b8 100644
--- a/packages/web/src/components/molecules/Message/NoticeMessage.tsx
+++ b/packages/web/src/components/molecules/Message/NoticeMessage.tsx
@@ -13,8 +13,8 @@ const Container = styled.div`
   flex-direction: row;
   gap: 4px;
   padding: 6px 15px;
-  background-color: ${props => props.theme.colors.blue100};
-  border: solid 1px ${props => props.theme.colors.blue600};
+  background-color: ${props => props.colors.blue100};
+  border: solid 1px ${props => props.colors.blue600};
   border-radius: 10px;
 `;
 
diff --git a/packages/web/src/components/molecules/OptionVoteResult.tsx b/packages/web/src/components/molecules/OptionVoteResult.tsx
index f4b1eb8f..09f9bef7 100644
--- a/packages/web/src/components/molecules/OptionVoteResult.tsx
+++ b/packages/web/src/components/molecules/OptionVoteResult.tsx
@@ -19,12 +19,12 @@ const Background = styled.div<{
   width: 100%;
   height: 100%;
 
-  border: 1px solid ${props => props.theme.colors[props.borderColor]};
+  border: 1px solid ${props => props.colors[props.borderColor]};
   border-radius: 5px;
 
   background: linear-gradient(
     to right,
-    ${props => props.theme.colors[props.color]} ${props => props.percent}%,
+    ${props => props.colors[props.color]} ${props => props.percent}%,
     #ffffff ${props => props.percent}%
   );
 `;
diff --git a/packages/web/src/components/molecules/ParticipantBar.tsx b/packages/web/src/components/molecules/ParticipantBar.tsx
index 8df9bcb7..4e8d9175 100644
--- a/packages/web/src/components/molecules/ParticipantBar.tsx
+++ b/packages/web/src/components/molecules/ParticipantBar.tsx
@@ -17,12 +17,12 @@ const Background = styled.div<{
   width: 100%;
   height: 100%;
 
-  border: 1px solid ${props => props.theme.colors[props.borderColor]};
+  border: 1px solid ${props => props.colors[props.borderColor]};
   border-radius: 5px;
 
   background: linear-gradient(
     to right,
-    ${props => props.theme.colors[props.color]} ${props => props.percent}%,
+    ${props => props.colors[props.color]} ${props => props.percent}%,
     #ffffff ${props => props.percent}%
   );
 `;
diff --git a/packages/web/src/components/organisms/ChatSection.tsx b/packages/web/src/components/organisms/ChatSection.tsx
index fc106ce7..0365fa91 100644
--- a/packages/web/src/components/organisms/ChatSection.tsx
+++ b/packages/web/src/components/organisms/ChatSection.tsx
@@ -14,7 +14,7 @@ const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 458px;
-  border: solid 1px ${props => props.theme.colors.gray300};
+  border: solid 1px ${props => props.colors.gray300};
   border-radius: 5px;
   overflow: hidden;
 `;
diff --git a/packages/web/src/components/organisms/Header.tsx b/packages/web/src/components/organisms/Header.tsx
index 243c2312..a8a83b73 100644
--- a/packages/web/src/components/organisms/Header.tsx
+++ b/packages/web/src/components/organisms/Header.tsx
@@ -1,21 +1,21 @@
-import React, { useState } from "react";
-import styled from "@emotion/styled";
-import { useNavigate } from "react-router-dom";
 import { LogoIcon } from "@biseo/web/assets";
 import { Box } from "@biseo/web/components/atoms";
 import { HeaderItem, Profile } from "@biseo/web/components/molecules";
 import { useAuth } from "@biseo/web/services/auth";
 import {
+  align,
   bg,
   center,
+  column,
   h,
-  w,
+  justify,
   round,
   text,
-  justify,
-  align,
-  column,
+  w,
 } from "@biseo/web/styles";
+import styled from "@emotion/styled";
+import React, { useState } from "react";
+import { useNavigate } from "react-router-dom";
 
 const adminPathList = [
   { name: "유저 모드", path: "" },
@@ -33,7 +33,7 @@ const Container = styled.header`
   height: 60px;
   padding: 0 50px;
   padding-top: 5px;
-  border-bottom: 1px solid ${props => props.theme.colors.gray300};
+  border-bottom: 1px solid ${props => props.colors.gray300};
 `;
 
 export const Header: React.FC = () => {
diff --git a/packages/web/src/components/pages/LoginPage.tsx b/packages/web/src/components/pages/LoginPage.tsx
index 03da3239..c2bc22a5 100644
--- a/packages/web/src/components/pages/LoginPage.tsx
+++ b/packages/web/src/components/pages/LoginPage.tsx
@@ -10,7 +10,6 @@ import { useAuth } from "@biseo/web/services/auth";
 import { useInput } from "@biseo/web/common/hooks";
 import { Box } from "@biseo/web/components/atoms";
 import { text } from "@biseo/web/styles";
-import { theme } from "@biseo/web/theme";
 
 const Page = styled.div`
   width: 100vw;
@@ -31,7 +30,7 @@ const Page = styled.div`
 const LoginTitle = styled(motion.div)`
   font-size: 35px;
   font-weight: 700;
-  color: ${theme.colors.black};
+  color: ${colors.black};
 `;
 
 const InputContainer = styled.input`
@@ -41,23 +40,23 @@ const InputContainer = styled.input`
   box-sizing: border-box;
   padding: 9px 14px;
 
-  border: 1px solid ${theme.colors.gray300};
+  border: 1px solid ${colors.gray300};
   border-radius: 5px;
   outline: none;
 
   ${text.subtitle}
 
   &:hover {
-    border: 1px solid ${theme.colors.gray400};
+    border: 1px solid ${colors.gray400};
   }
 
   &:focus {
-    border: 1px solid ${theme.colors.blue300};
-    box-shadow: 0px 0px 0px 3px ${theme.colors.blue200};
+    border: 1px solid ${colors.blue300};
+    box-shadow: 0px 0px 0px 3px ${colors.blue200};
   }
   &::placeholder {
     font-size: 13px;
-    color: ${theme.colors.gray300};
+    color: ${colors.gray300};
   }
 `;
 
@@ -65,13 +64,13 @@ const LoginButton = styled.button`
   width: 320px;
   height: 45px;
 
-  background-color: ${theme.colors.blue200};
+  background-color: ${colors.blue200};
   border: none;
   border-radius: 5px;
   outline: none;
 
   &:hover {
-    background-color: ${theme.colors.blue300};
+    background-color: ${colors.blue300};
   }
 
   display: flex;
diff --git a/packages/web/src/styles/color.ts b/packages/web/src/styles/color.ts
index 14be8c8f..ec5df170 100644
--- a/packages/web/src/styles/color.ts
+++ b/packages/web/src/styles/color.ts
@@ -24,7 +24,7 @@ export const colors = {
   green600: "#008B1C",
 } as const;
 
-type ColorKeys = keyof typeof colors;
+export type ColorKeys = keyof typeof colors;
 export type Color = (typeof colors)[ColorKeys];
 export const mapColors = <T>(cb: (color: Color) => T) =>
   Object.fromEntries(
diff --git a/packages/web/src/theme.ts b/packages/web/src/theme.ts
deleted file mode 100644
index bda41345..00000000
--- a/packages/web/src/theme.ts
+++ /dev/null
@@ -1,32 +0,0 @@
-export const theme = {
-  colors: {
-    white: "#FFFFFF",
-    black: "#444444",
-    white100: "#FAFBFC",
-    gray100: "#FAFAFA",
-    gray200: "#EEEEEE",
-    gray300: "#D9D9D9",
-    gray400: "#B6B6B6",
-    gray500: "#8C8C8C",
-    gray600: "#555555",
-    grayTrans: "rgba(85, 85, 85, 0.1)",
-    blue100: "#FAFCFF",
-    blue200: "#E7F0FF",
-    blue300: "#BFDCFF",
-    blue400: "#6EABF4",
-    blue500: "#2F80DE",
-    blue600: "#065DAC",
-    blue700: "#004B81",
-    // added by ella_start
-    purple200: "#F6EEFE", // purple-light
-    purple600: "#9836EF", // purple
-    orange200: "#FDF7E6", // orange-light
-    orange600: "#FF9211", // orange
-    green200: "#E9F9EF", // green-light
-    green600: "#008B1C", // green
-    // added by ella_end
-  } as const,
-} as const;
-
-export type Theme = typeof theme;
-export type Color = keyof Theme["colors"];

From f6d2b521c6ba26322e97fa7b3a01fd5af0ff1659 Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Wed, 15 Nov 2023 21:51:11 +0900
Subject: [PATCH 07/19] fix: remove themeProvider

---
 packages/web/src/main.tsx | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/packages/web/src/main.tsx b/packages/web/src/main.tsx
index 2de23a6f..bc0b9104 100644
--- a/packages/web/src/main.tsx
+++ b/packages/web/src/main.tsx
@@ -1,11 +1,9 @@
+import { enableMapSet } from "immer";
 import React from "react";
 import ReactDOM from "react-dom/client";
 import { RouterProvider } from "react-router-dom";
-import { ThemeProvider } from "@emotion/react";
-import { enableMapSet } from "immer";
 
 import router from "@biseo/web/router";
-import { theme } from "@biseo/web/theme";
 
 import "./index.css";
 
@@ -13,8 +11,6 @@ enableMapSet();
 
 ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render(
   <React.StrictMode>
-    <ThemeProvider theme={theme}>
-      <RouterProvider router={router} />
-    </ThemeProvider>
+    <RouterProvider router={router} />
   </React.StrictMode>,
 );

From 42c2f5b0ce3b3308cbd78e894cb451fa936f13fe Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Wed, 15 Nov 2023 21:57:33 +0900
Subject: [PATCH 08/19] fix: exclude .eslintrc.cjs from linting

---
 .eslintrc.cjs | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index a9f89d1b..43643441 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -34,7 +34,7 @@ module.exports = {
         project: ["./packages/*/tsconfig.json", "./tsconfig.json"],
     },
     plugins: ["import", "@typescript-eslint", "react"],
-    ignorePatterns: ["node_modules/", "dist/"],
+    ignorePatterns: ["node_modules/", "dist/", ".eslintrc.cjs"],
     rules: {
         "import/extensions": [
             "error",

From ccc0ec776331354d667d9a6478850e97c3d3c652 Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Tue, 21 Nov 2023 22:57:55 +0900
Subject: [PATCH 09/19] fix: minor lint

---
 packages/web/src/index.css | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/web/src/index.css b/packages/web/src/index.css
index 47fae3c8..68a39109 100644
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -24,7 +24,7 @@ body,
 
 /* use text.singeLine as default */
 p {
-    white-space: pre-line;
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
\ No newline at end of file
+  white-space: pre-line;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

From bc748908e25dac9b5e41da44c00c2adb78f4a75a Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Tue, 21 Nov 2023 23:00:59 +0900
Subject: [PATCH 10/19] fix: use colors instead of props.colors

---
 packages/web/src/components/atoms/CheckBox.tsx     |  3 ++-
 .../web/src/components/atoms/GrayTextButton.tsx    |  3 ++-
 packages/web/src/components/atoms/Label.tsx        | 14 +++++++-------
 packages/web/src/components/atoms/TextInput.tsx    |  5 +++--
 packages/web/src/components/atoms/UserTag.tsx      |  7 ++++---
 .../web/src/components/molecules/ChatHeader.tsx    |  4 ++--
 packages/web/src/components/molecules/Choice.tsx   |  4 ++--
 .../web/src/components/molecules/HeaderItem.tsx    |  4 ++--
 .../components/molecules/Message/NoticeMessage.tsx |  6 +++---
 .../src/components/molecules/OptionVoteResult.tsx  |  6 +++---
 .../src/components/molecules/ParticipantBar.tsx    |  6 +++---
 .../web/src/components/organisms/ChatSection.tsx   |  4 ++--
 packages/web/src/components/organisms/Header.tsx   |  3 ++-
 13 files changed, 37 insertions(+), 32 deletions(-)

diff --git a/packages/web/src/components/atoms/CheckBox.tsx b/packages/web/src/components/atoms/CheckBox.tsx
index f6643b3f..25bac088 100644
--- a/packages/web/src/components/atoms/CheckBox.tsx
+++ b/packages/web/src/components/atoms/CheckBox.tsx
@@ -1,9 +1,10 @@
+import { colors } from "@biseo/web/styles";
 import styled from "@emotion/styled";
 
 export const CheckBox = styled.input`
   width: 9px;
   background: transparent;
-  accent-color: ${props => props.colors.gray600};
+  accent-color: ${colors.gray600};
 `;
 
 CheckBox.defaultProps = { type: "checkbox" };
diff --git a/packages/web/src/components/atoms/GrayTextButton.tsx b/packages/web/src/components/atoms/GrayTextButton.tsx
index 0a015e95..3e44550c 100644
--- a/packages/web/src/components/atoms/GrayTextButton.tsx
+++ b/packages/web/src/components/atoms/GrayTextButton.tsx
@@ -1,8 +1,9 @@
+import { colors } from "@biseo/web/styles";
 import styled from "@emotion/styled";
 
 export const GrayTextButton = styled.button`
   background-color: transparent;
-  color: ${props => props.colors.gray400};
+  color: ${colors.gray400};
   font-size: 9px;
   font-weight: 500;
   border: none;
diff --git a/packages/web/src/components/atoms/Label.tsx b/packages/web/src/components/atoms/Label.tsx
index 21ecef06..9e9eb754 100644
--- a/packages/web/src/components/atoms/Label.tsx
+++ b/packages/web/src/components/atoms/Label.tsx
@@ -1,5 +1,5 @@
 import { DownArrowIcon } from "@biseo/web/assets";
-import { text } from "@biseo/web/styles";
+import { colors, text } from "@biseo/web/styles";
 import styled from "@emotion/styled";
 
 export const SelectWrapper = styled.div`
@@ -14,15 +14,15 @@ export const Select = styled.select<{ w: number; h: number }>`
   justify-content: space-between;
   align-items: center;
   border-radius: 5px;
-  border: 1px solid ${props => props.colors.gray200};
-  background-color: ${props => props.colors.white};
+  border: 1px solid ${colors.gray200};
+  background-color: ${colors.white};
 
   font-family: "Noto Sansf KR";
   font-size: 10px;
   font-style: normal;
   font-weight: 500;
   line-height: normal;
-  color: ${props => props.colors.gray600};
+  color: ${colors.gray600};
 
   &:focus {
     outline: none;
@@ -54,10 +54,10 @@ export const TemplateSelect = styled.select<{ w: number; h: number }>`
   justify-content: space-between;
   align-items: center;
   border-radius: 5px;
-  border: 1px solid ${props => props.colors.gray200};
-  background-color: ${props => props.colors.gray100};
+  border: 1px solid ${colors.gray200};
+  background-color: ${colors.gray100};
 
-  color: ${props => props.colors.gray300};
+  color: ${colors.gray300};
 
   ${text.subtitle}
 
diff --git a/packages/web/src/components/atoms/TextInput.tsx b/packages/web/src/components/atoms/TextInput.tsx
index d3067557..a014c00b 100644
--- a/packages/web/src/components/atoms/TextInput.tsx
+++ b/packages/web/src/components/atoms/TextInput.tsx
@@ -1,3 +1,4 @@
+import { colors } from "@biseo/web/styles";
 import styled from "@emotion/styled";
 
 export const TextInput = styled.input`
@@ -9,10 +10,10 @@ export const TextInput = styled.input`
   background: transparent;
   border: none;
   border-radius: 5px;
-  color: ${props => props.colors.black};
+  color: ${colors.black};
   ::placeholder {
     font-family: "Noto Sans KR", sans-serif;
-    color: ${props => props.colors.gray300};
+    color: ${colors.gray300};
   }
 `;
 TextInput.defaultProps = {
diff --git a/packages/web/src/components/atoms/UserTag.tsx b/packages/web/src/components/atoms/UserTag.tsx
index 2dcad691..1911c7be 100644
--- a/packages/web/src/components/atoms/UserTag.tsx
+++ b/packages/web/src/components/atoms/UserTag.tsx
@@ -1,3 +1,4 @@
+import { colors } from "@biseo/web/styles";
 import styled from "@emotion/styled";
 import React, { type PropsWithChildren } from "react";
 
@@ -13,9 +14,9 @@ const Container = styled.div`
   align-items: center;
   font-size: 9px;
   font-weight: 500;
-  color: ${props => props.colors.gray500};
-  background-color: ${props => props.colors.white};
-  border: solid 1px ${props => props.colors.gray200};
+  color: ${colors.gray500};
+  background-color: ${colors.white};
+  border: solid 1px ${colors.gray200};
   border-radius: 5px;
 `;
 
diff --git a/packages/web/src/components/molecules/ChatHeader.tsx b/packages/web/src/components/molecules/ChatHeader.tsx
index e9866316..ad28d19f 100644
--- a/packages/web/src/components/molecules/ChatHeader.tsx
+++ b/packages/web/src/components/molecules/ChatHeader.tsx
@@ -1,4 +1,4 @@
-import { text } from "@biseo/web/styles";
+import { colors, text } from "@biseo/web/styles";
 import styled from "@emotion/styled";
 import React from "react";
 
@@ -12,7 +12,7 @@ const Container = styled.div`
   flex-direction: column;
   width: "100%";
   min-height: 42px;
-  background-color: ${props => props.colors.gray100};
+  background-color: ${colors.gray100};
   padding: 0 20px;
   justify-content: center;
 `;
diff --git a/packages/web/src/components/molecules/Choice.tsx b/packages/web/src/components/molecules/Choice.tsx
index 0429b972..e49fc92c 100644
--- a/packages/web/src/components/molecules/Choice.tsx
+++ b/packages/web/src/components/molecules/Choice.tsx
@@ -11,8 +11,8 @@ const Container = styled.div<{
   clickable?: boolean;
 }>`
   border-radius: 5px;
-  background-color: ${props => props.colors[props.color]};
-  border: 1px solid ${props => props.colors.gray200};
+  background-color: ${props => colors[props.color]};
+  border: 1px solid ${colors.gray200};
   padding: 6px 12px 6px 12px;
   width: 340px;
   height: fit-content;
diff --git a/packages/web/src/components/molecules/HeaderItem.tsx b/packages/web/src/components/molecules/HeaderItem.tsx
index b884b634..0d3564ef 100644
--- a/packages/web/src/components/molecules/HeaderItem.tsx
+++ b/packages/web/src/components/molecules/HeaderItem.tsx
@@ -1,4 +1,4 @@
-import { text } from "@biseo/web/styles";
+import { colors, text } from "@biseo/web/styles";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import React from "react";
@@ -32,7 +32,7 @@ const SelectIndicator = styled.div`
   bottom: 0;
   width: 100%;
   height: 2px;
-  background-color: ${props => props.colors.black};
+  background-color: ${colors.black};
   border-radius: 1px 1px 0 0;
 `;
 
diff --git a/packages/web/src/components/molecules/Message/NoticeMessage.tsx b/packages/web/src/components/molecules/Message/NoticeMessage.tsx
index 3e03d9b8..3767133e 100644
--- a/packages/web/src/components/molecules/Message/NoticeMessage.tsx
+++ b/packages/web/src/components/molecules/Message/NoticeMessage.tsx
@@ -1,5 +1,5 @@
 import { Box } from "@biseo/web/components/atoms";
-import { text } from "@biseo/web/styles";
+import { colors, text } from "@biseo/web/styles";
 import styled from "@emotion/styled";
 import React from "react";
 
@@ -13,8 +13,8 @@ const Container = styled.div`
   flex-direction: row;
   gap: 4px;
   padding: 6px 15px;
-  background-color: ${props => props.colors.blue100};
-  border: solid 1px ${props => props.colors.blue600};
+  background-color: ${colors.blue100};
+  border: solid 1px ${colors.blue600};
   border-radius: 10px;
 `;
 
diff --git a/packages/web/src/components/molecules/OptionVoteResult.tsx b/packages/web/src/components/molecules/OptionVoteResult.tsx
index e917c3d8..50f82c54 100644
--- a/packages/web/src/components/molecules/OptionVoteResult.tsx
+++ b/packages/web/src/components/molecules/OptionVoteResult.tsx
@@ -1,6 +1,6 @@
 import { Box } from "@biseo/web/components/atoms";
-import { text } from "@biseo/web/styles";
 import type { Color } from "@biseo/web/theme";
+import { colors, text } from "@biseo/web/styles";
 import styled from "@emotion/styled";
 import React from "react";
 
@@ -19,12 +19,12 @@ const Background = styled.div<{
   width: 100%;
   height: 100%;
 
-  border: 1px solid ${props => props.colors[props.borderColor]};
+  border: 1px solid ${props => colors[props.borderColor]};
   border-radius: 5px;
 
   background: linear-gradient(
     to right,
-    ${props => props.colors[props.color]} ${props => props.percent}%,
+    ${props => colors[props.color]} ${props => props.percent}%,
     #ffffff ${props => props.percent}%
   );
 `;
diff --git a/packages/web/src/components/molecules/ParticipantBar.tsx b/packages/web/src/components/molecules/ParticipantBar.tsx
index 4e8d9175..00ae4b67 100644
--- a/packages/web/src/components/molecules/ParticipantBar.tsx
+++ b/packages/web/src/components/molecules/ParticipantBar.tsx
@@ -1,6 +1,6 @@
 import { Box } from "@biseo/web/components/atoms";
-import { text } from "@biseo/web/styles";
 import type { Color } from "@biseo/web/theme";
+import { colors, text } from "@biseo/web/styles";
 import styled from "@emotion/styled";
 import React from "react";
 
@@ -17,12 +17,12 @@ const Background = styled.div<{
   width: 100%;
   height: 100%;
 
-  border: 1px solid ${props => props.colors[props.borderColor]};
+  border: 1px solid ${props => colors[props.borderColor]};
   border-radius: 5px;
 
   background: linear-gradient(
     to right,
-    ${props => props.colors[props.color]} ${props => props.percent}%,
+    ${props => colors[props.color]} ${props => props.percent}%,
     #ffffff ${props => props.percent}%
   );
 `;
diff --git a/packages/web/src/components/organisms/ChatSection.tsx b/packages/web/src/components/organisms/ChatSection.tsx
index 0365fa91..0c74459f 100644
--- a/packages/web/src/components/organisms/ChatSection.tsx
+++ b/packages/web/src/components/organisms/ChatSection.tsx
@@ -8,13 +8,13 @@ import {
   Message,
 } from "@biseo/web/components/molecules";
 import { useChat } from "@biseo/web/services";
-import { text } from "@biseo/web/styles";
+import { colors, text } from "@biseo/web/styles";
 
 const Container = styled.div`
   display: flex;
   flex-direction: column;
   width: 458px;
-  border: solid 1px ${props => props.colors.gray300};
+  border: solid 1px ${colors.gray300};
   border-radius: 5px;
   overflow: hidden;
 `;
diff --git a/packages/web/src/components/organisms/Header.tsx b/packages/web/src/components/organisms/Header.tsx
index a8a83b73..edc231c7 100644
--- a/packages/web/src/components/organisms/Header.tsx
+++ b/packages/web/src/components/organisms/Header.tsx
@@ -6,6 +6,7 @@ import {
   align,
   bg,
   center,
+  colors,
   column,
   h,
   justify,
@@ -33,7 +34,7 @@ const Container = styled.header`
   height: 60px;
   padding: 0 50px;
   padding-top: 5px;
-  border-bottom: 1px solid ${props => props.colors.gray300};
+  border-bottom: 1px solid ${colors.gray300};
 `;
 
 export const Header: React.FC = () => {

From 289687fc70d86208d576f21643c94103a2d418e6 Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Tue, 21 Nov 2023 23:01:25 +0900
Subject: [PATCH 11/19] fix: use ColorKeys instead of Color

---
 packages/web/src/components/molecules/Choice.tsx     | 12 ++++++------
 .../src/components/molecules/OptionVoteResult.tsx    |  6 +++---
 .../web/src/components/molecules/ParticipantBar.tsx  |  6 +++---
 3 files changed, 12 insertions(+), 12 deletions(-)

diff --git a/packages/web/src/components/molecules/Choice.tsx b/packages/web/src/components/molecules/Choice.tsx
index e49fc92c..276ac053 100644
--- a/packages/web/src/components/molecules/Choice.tsx
+++ b/packages/web/src/components/molecules/Choice.tsx
@@ -1,13 +1,13 @@
 import type { Choice } from "@biseo/interface/agenda";
 import { SelectIcon } from "@biseo/web/assets";
+import type { ColorKeys } from "@biseo/web/styles";
 import { center, colors, h, text as styleText, w } from "@biseo/web/styles";
-import { type Color } from "@biseo/web/theme";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 import React, { useState, type PropsWithChildren } from "react";
 
 const Container = styled.div<{
-  color: Color;
+  color: ColorKeys;
   clickable?: boolean;
 }>`
   border-radius: 5px;
@@ -29,7 +29,7 @@ const Container = styled.div<{
 `;
 
 interface ChoiceTextProps extends PropsWithChildren {
-  color: Color;
+  color: ColorKeys;
 }
 
 const ChoiceText: React.FC<ChoiceTextProps> = ({ color, children = null }) => (
@@ -37,9 +37,9 @@ const ChoiceText: React.FC<ChoiceTextProps> = ({ color, children = null }) => (
 );
 
 const choiceBaseStyle = (
-  containerColor: Color,
-  selectIconColor: Color,
-  textColor: Color,
+  containerColor: ColorKeys,
+  selectIconColor: ColorKeys,
+  textColor: ColorKeys,
 ) => ({ containerColor, selectIconColor, textColor });
 
 const choiceStyles = {
diff --git a/packages/web/src/components/molecules/OptionVoteResult.tsx b/packages/web/src/components/molecules/OptionVoteResult.tsx
index 50f82c54..ac2ea888 100644
--- a/packages/web/src/components/molecules/OptionVoteResult.tsx
+++ b/packages/web/src/components/molecules/OptionVoteResult.tsx
@@ -1,5 +1,5 @@
 import { Box } from "@biseo/web/components/atoms";
-import type { Color } from "@biseo/web/theme";
+import type { ColorKeys } from "@biseo/web/styles";
 import { colors, text } from "@biseo/web/styles";
 import styled from "@emotion/styled";
 import React from "react";
@@ -13,8 +13,8 @@ interface Props {
 
 const Background = styled.div<{
   percent: number;
-  color: Color;
-  borderColor: Color;
+  color: ColorKeys;
+  borderColor: ColorKeys;
 }>`
   width: 100%;
   height: 100%;
diff --git a/packages/web/src/components/molecules/ParticipantBar.tsx b/packages/web/src/components/molecules/ParticipantBar.tsx
index 00ae4b67..3cba1bfe 100644
--- a/packages/web/src/components/molecules/ParticipantBar.tsx
+++ b/packages/web/src/components/molecules/ParticipantBar.tsx
@@ -1,5 +1,5 @@
 import { Box } from "@biseo/web/components/atoms";
-import type { Color } from "@biseo/web/theme";
+import type { ColorKeys } from "@biseo/web/styles";
 import { colors, text } from "@biseo/web/styles";
 import styled from "@emotion/styled";
 import React from "react";
@@ -11,8 +11,8 @@ interface Props {
 
 const Background = styled.div<{
   percent: number;
-  color: Color;
-  borderColor: Color;
+  color: ColorKeys;
+  borderColor: ColorKeys;
 }>`
   width: 100%;
   height: 100%;

From 6ee2e43dd82caabd881e331e223adc10691dc191 Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Tue, 21 Nov 2023 23:21:11 +0900
Subject: [PATCH 12/19] fix: use colors, ColorKeys instead of legacy

---
 packages/web/src/components/atoms/Scroll.tsx  |  3 ++-
 packages/web/src/components/atoms/Tag.tsx     | 21 ++++++++++---------
 .../src/components/molecules/ChoiceGraph.tsx  |  9 +++++---
 .../components/molecules/ChoicePercentage.tsx |  4 ++--
 .../web/src/components/pages/LoginPage.tsx    |  2 +-
 5 files changed, 22 insertions(+), 17 deletions(-)

diff --git a/packages/web/src/components/atoms/Scroll.tsx b/packages/web/src/components/atoms/Scroll.tsx
index cf2963d6..3aae30b7 100644
--- a/packages/web/src/components/atoms/Scroll.tsx
+++ b/packages/web/src/components/atoms/Scroll.tsx
@@ -1,3 +1,4 @@
+import { colors } from "@biseo/web/styles";
 import { css } from "@emotion/react";
 import styled from "@emotion/styled";
 
@@ -24,7 +25,7 @@ export const Scroll = styled.div<{ hide?: boolean }>`
     ${props =>
       !props.hide &&
       css`
-        background-color: ${props.colors.gray400};
+        background-color: ${colors.gray400};
       `}
     border-radius: 100px;
   }
diff --git a/packages/web/src/components/atoms/Tag.tsx b/packages/web/src/components/atoms/Tag.tsx
index 42afc29f..1cdd8683 100644
--- a/packages/web/src/components/atoms/Tag.tsx
+++ b/packages/web/src/components/atoms/Tag.tsx
@@ -1,9 +1,10 @@
-import type { Color } from "@biseo/web/theme";
+import type { ColorKeys } from "@biseo/web/styles";
+import { colors } from "@biseo/web/styles";
 import { css, type SerializedStyles } from "@emotion/react";
 import styled from "@emotion/styled";
 import React from "react";
 
-const colors = (color: Color, bg: Color) =>
+const tagColors = (color: ColorKeys, bg: ColorKeys) =>
   css({
     color: colors[color],
     backgroundColor: colors[bg],
@@ -31,14 +32,14 @@ const tagNames: Record<TagTypes, string> = {
 };
 
 const tagStyles: Record<TagTypes, SerializedStyles> = {
-  public: colors("orange600", "orange200"),
-  private: colors("gray600", "gray200"),
-  identified: colors("green600", "green200"),
-  anonymous: colors("purple600", "purple200"),
-  votable: colors("blue600", "blue200"),
-  participant: colors("blue600", "blue200"),
-  user: colors("purple600", "purple200"),
-  template: colors("orange600", "orange200"),
+  public: tagColors("orange600", "orange200"),
+  private: tagColors("gray600", "gray200"),
+  identified: tagColors("green600", "green200"),
+  anonymous: tagColors("purple600", "purple200"),
+  votable: tagColors("blue600", "blue200"),
+  participant: tagColors("blue600", "blue200"),
+  user: tagColors("purple600", "purple200"),
+  template: tagColors("orange600", "orange200"),
 };
 
 const TagInner = styled.div<{
diff --git a/packages/web/src/components/molecules/ChoiceGraph.tsx b/packages/web/src/components/molecules/ChoiceGraph.tsx
index cb950f05..d9cba7d2 100644
--- a/packages/web/src/components/molecules/ChoiceGraph.tsx
+++ b/packages/web/src/components/molecules/ChoiceGraph.tsx
@@ -1,15 +1,18 @@
 import { Box } from "@biseo/web/components/atoms";
+import type { ColorKeys } from "@biseo/web/styles";
 import { text } from "@biseo/web/styles";
-import type { Color } from "@biseo/web/theme";
 import React from "react";
 
 interface Props {
   choices: { name: string; count: number }[];
-  colors: Color[];
+  colors: ColorKeys[];
 }
 const graphMaxLength = 260;
 
-const graph = (choices: { name: string; count: number }[], colors: Color[]) => {
+const graph = (
+  choices: { name: string; count: number }[],
+  colors: ColorKeys[],
+) => {
   const sortedChoices = choices.sort((a, b) => b.count - a.count);
 
   const totalChoiceCount = sortedChoices
diff --git a/packages/web/src/components/molecules/ChoicePercentage.tsx b/packages/web/src/components/molecules/ChoicePercentage.tsx
index 7ff5ccb8..981a058b 100644
--- a/packages/web/src/components/molecules/ChoicePercentage.tsx
+++ b/packages/web/src/components/molecules/ChoicePercentage.tsx
@@ -1,12 +1,12 @@
 import { Box } from "@biseo/web/components/atoms";
+import type { ColorKeys } from "@biseo/web/styles";
 import { text } from "@biseo/web/styles";
-import type { Color } from "@biseo/web/theme";
 import React from "react";
 
 interface Choice {
   name: string;
   count: number;
-  color: Color;
+  color: ColorKeys;
 }
 
 interface Props {
diff --git a/packages/web/src/components/pages/LoginPage.tsx b/packages/web/src/components/pages/LoginPage.tsx
index c2bc22a5..26a8252b 100644
--- a/packages/web/src/components/pages/LoginPage.tsx
+++ b/packages/web/src/components/pages/LoginPage.tsx
@@ -9,7 +9,7 @@ import { useAuth } from "@biseo/web/services/auth";
 
 import { useInput } from "@biseo/web/common/hooks";
 import { Box } from "@biseo/web/components/atoms";
-import { text } from "@biseo/web/styles";
+import { colors, text } from "@biseo/web/styles";
 
 const Page = styled.div`
   width: 100vw;

From bfdbdbe13a8355832d47b236c13768d8c71182e3 Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Tue, 21 Nov 2023 23:24:28 +0900
Subject: [PATCH 13/19] fix: lint .eslintrc.cjs

---
 .eslintrc.cjs | 240 +++++++++++++++++++++++++-------------------------
 1 file changed, 120 insertions(+), 120 deletions(-)

diff --git a/.eslintrc.cjs b/.eslintrc.cjs
index 43643441..5ba92ffe 100644
--- a/.eslintrc.cjs
+++ b/.eslintrc.cjs
@@ -2,131 +2,131 @@
 const path = require("path");
 
 module.exports = {
-    env: {
-        browser: true,
-        es2021: true,
+  env: {
+    browser: true,
+    es2021: true,
+    node: true,
+  },
+  extends: [
+    "plugin:@typescript-eslint/recommended",
+    "airbnb",
+    "airbnb-typescript",
+    "prettier",
+  ],
+  overrides: [
+    {
+      env: {
         node: true,
+      },
+      files: [".eslintrc.{js,cjs}"],
+      parserOptions: {
+        sourceType: "script",
+      },
     },
-    extends: [
-        "plugin:@typescript-eslint/recommended",
-        "airbnb",
-        "airbnb-typescript",
-        "prettier",
-    ],
-    overrides: [
-        {
-            env: {
-                node: true,
-            },
-            files: [".eslintrc.{js,cjs}"],
-            parserOptions: {
-                sourceType: "script",
-            },
-        },
-    ],
-    parser: "@typescript-eslint/parser",
-    parserOptions: {
-        ecmaVersion: "latest",
-        sourceType: "module",
-        ecmaFeatures: {
-            jsx: true,
-        },
-        project: ["./packages/*/tsconfig.json", "./tsconfig.json"],
+  ],
+  parser: "@typescript-eslint/parser",
+  parserOptions: {
+    ecmaVersion: "latest",
+    sourceType: "module",
+    ecmaFeatures: {
+      jsx: true,
     },
-    plugins: ["import", "@typescript-eslint", "react"],
-    ignorePatterns: ["node_modules/", "dist/", ".eslintrc.cjs"],
-    rules: {
-        "import/extensions": [
-            "error",
-            "ignorePackages",
-            {
-                // Since airbnb javascript rules does not allow to import typescript files without extensions, we need to disable it
-                ts: "never",
-                tsx: "never",
-            },
-        ],
-        "import/named": "error",
-        "import/no-extraneous-dependencies": [
-            "error",
-            {
-                packageDir: [
-                    path.join(__dirname, "packages/web"),
-                    path.join(__dirname, "packages/api"),
-                    path.join(__dirname, "packages/interface"),
-                    ".",
-                ],
-            },
-        ],
-        "import/prefer-default-export": "off",
-        "no-param-reassign": [
-            "error",
-            {
-                props: true,
-                // function parameters cannot be reassigned for readability, except for the ones in the array
-                ignorePropertyModificationsFor: ["socket", "state"],
-            },
-        ],
-        "no-restricted-imports": [
-            "error",
-            {
-                patterns: [
-                    {
-                        group: ["../*"],
-                        message:
-                            "Usage of relative parent imports is not allowed. Use path alias instead.",
-                    },
-                ],
-            },
-        ],
-        "radix": ["error", "as-needed"],
-        "react/function-component-definition": [
-            "error",
-            {
-                namedComponents: "arrow-function",
-                unnamedComponents: "arrow-function",
-            },
-        ],
-        "react/jsx-uses-react": "off",
-        "react/jsx-no-useless-fragment": [
-            "error",
-            {
-                // this allows <>{value}</> syntax, where value is a string or a number
-                allowExpressions: true,
-            },
-        ],
-        "react/jsx-props-no-spreading": "off",
-        "react/no-unknown-property": [
-            "error",
-            {
-                ignore: ["css"],
-            },
-        ],
-        "react/react-in-jsx-scope": "off",
-        "react/require-default-props": [
-            "error",
-            {
-                // default values of the optional props must be provided as function arguments
-                functions: "defaultArguments",
-            },
+    project: ["./packages/*/tsconfig.json", "./tsconfig.json"],
+  },
+  plugins: ["import", "@typescript-eslint", "react"],
+  ignorePatterns: ["node_modules/", "dist/", ".eslintrc.cjs"],
+  rules: {
+    "import/extensions": [
+      "error",
+      "ignorePackages",
+      {
+        // Since airbnb javascript rules does not allow to import typescript files without extensions, we need to disable it
+        ts: "never",
+        tsx: "never",
+      },
+    ],
+    "import/named": "error",
+    "import/no-extraneous-dependencies": [
+      "error",
+      {
+        packageDir: [
+          path.join(__dirname, "packages/web"),
+          path.join(__dirname, "packages/api"),
+          path.join(__dirname, "packages/interface"),
+          ".",
         ],
-        "@typescript-eslint/consistent-type-imports": [
-            "error",
-            {
-                prefer: "type-imports",
-            },
+      },
+    ],
+    "import/prefer-default-export": "off",
+    "no-param-reassign": [
+      "error",
+      {
+        props: true,
+        // function parameters cannot be reassigned for readability, except for the ones in the array
+        ignorePropertyModificationsFor: ["socket", "state"],
+      },
+    ],
+    "no-restricted-imports": [
+      "error",
+      {
+        patterns: [
+          {
+            group: ["../*"],
+            message:
+              "Usage of relative parent imports is not allowed. Use path alias instead.",
+          },
         ],
+      },
+    ],
+    "radix": ["error", "as-needed"],
+    "react/function-component-definition": [
+      "error",
+      {
+        namedComponents: "arrow-function",
+        unnamedComponents: "arrow-function",
+      },
+    ],
+    "react/jsx-uses-react": "off",
+    "react/jsx-no-useless-fragment": [
+      "error",
+      {
+        // this allows <>{value}</> syntax, where value is a string or a number
+        allowExpressions: true,
+      },
+    ],
+    "react/jsx-props-no-spreading": "off",
+    "react/no-unknown-property": [
+      "error",
+      {
+        ignore: ["css"],
+      },
+    ],
+    "react/react-in-jsx-scope": "off",
+    "react/require-default-props": [
+      "error",
+      {
+        // default values of the optional props must be provided as function arguments
+        functions: "defaultArguments",
+      },
+    ],
+    "@typescript-eslint/consistent-type-imports": [
+      "error",
+      {
+        prefer: "type-imports",
+      },
+    ],
+  },
+  settings: {
+    "import/parsers": {
+      "@typescript-eslint/parser": [".ts", ".tsx"],
+    },
+    "import/resolver": {
+      typescript: {
+        project: ["./tsconfig.json"],
+      },
     },
-    settings: {
-        "import/parsers": {
-            "@typescript-eslint/parser": [".ts", ".tsx"],
-        },
-        "import/resolver": {
-            typescript: {
-                project: ["./tsconfig.json"],
-            },
-        },
-        "react": {
-            version: "18.2.0",
-        },
+    "react": {
+      version: "18.2.0",
     },
+  },
 };

From 42562904b4f8f084ffb96bf6a1ccb3ac3142c009 Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Wed, 22 Nov 2023 20:27:53 +0900
Subject: [PATCH 14/19] fix: use text.multiLine as default

---
 packages/web/src/index.css | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/web/src/index.css b/packages/web/src/index.css
index 68a39109..39c7941f 100644
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -22,9 +22,9 @@ body,
   height: 100%;
 }
 
-/* use text.singeLine as default */
+/* use text.multiLine as default */
 p {
   white-space: pre-line;
-  overflow: hidden;
-  text-overflow: ellipsis;
+  word-break: break-all;
+  overflow-wrap: break-word;
 }

From e41eea9fd0c47a3700dc0ee1ad89021f59722722 Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Wed, 22 Nov 2023 20:28:09 +0900
Subject: [PATCH 15/19] feat: use p tag instead of h1 tag

---
 .../molecules/AgendaCard/AdminOngoingAgendaCard.tsx           | 2 +-
 .../molecules/AgendaCard/AdminPreparingAgendaCard.tsx         | 2 +-
 .../molecules/AgendaCard/AdminTerminatedAgendaCard.tsx        | 2 +-
 .../src/components/molecules/AgendaCard/OngoingAgendaCard.tsx | 2 +-
 .../components/molecules/AgendaCard/PreparingAgendaCard.tsx   | 2 +-
 .../components/molecules/AgendaCard/TerminatedAgendaCard.tsx  | 4 ++--
 packages/web/src/components/molecules/Modal.tsx               | 2 +-
 7 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/components/molecules/AgendaCard/AdminOngoingAgendaCard.tsx b/packages/web/src/components/molecules/AgendaCard/AdminOngoingAgendaCard.tsx
index 8c6d2f45..0b89cde1 100644
--- a/packages/web/src/components/molecules/AgendaCard/AdminOngoingAgendaCard.tsx
+++ b/packages/web/src/components/molecules/AgendaCard/AdminOngoingAgendaCard.tsx
@@ -47,7 +47,7 @@ export const AdminOngoingAgendaCard: React.FC<Props> = ({ agenda }) => {
       <div css={[column, gap(8), w("fill")]}>
         <AgendaTag tags={agendaTags} admin />
         <div css={[column, gap(2)]}>
-          <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
+          <p css={[text.title2, text.black]}>{agenda.title}</p>
           <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
         </div>
         <div css={[row, center, justify.between, w("fill")]}>
diff --git a/packages/web/src/components/molecules/AgendaCard/AdminPreparingAgendaCard.tsx b/packages/web/src/components/molecules/AgendaCard/AdminPreparingAgendaCard.tsx
index bac77a76..2ca582cf 100644
--- a/packages/web/src/components/molecules/AgendaCard/AdminPreparingAgendaCard.tsx
+++ b/packages/web/src/components/molecules/AgendaCard/AdminPreparingAgendaCard.tsx
@@ -57,7 +57,7 @@ export const AdminPreparingAgendaCard: React.FC<Props> = ({ agenda }) => {
       <div css={[column, gap(8), w("fill")]}>
         <AgendaTag tags={agendaTags} admin />
         <div css={[column, gap(2)]}>
-          <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
+          <p css={[text.title2, text.black]}>{agenda.title}</p>
           <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
         </div>
         <Divider />
diff --git a/packages/web/src/components/molecules/AgendaCard/AdminTerminatedAgendaCard.tsx b/packages/web/src/components/molecules/AgendaCard/AdminTerminatedAgendaCard.tsx
index 846b9a58..fcc6e551 100644
--- a/packages/web/src/components/molecules/AgendaCard/AdminTerminatedAgendaCard.tsx
+++ b/packages/web/src/components/molecules/AgendaCard/AdminTerminatedAgendaCard.tsx
@@ -33,7 +33,7 @@ export const AdminTerminatedAgendaCard: React.FC<Props> = ({ agenda }) => {
           }}
         />
         <div css={[column, gap(2)]}>
-          <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
+          <p css={[text.title2, text.black]}>{agenda.title}</p>
           <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
         </div>
       </div>
diff --git a/packages/web/src/components/molecules/AgendaCard/OngoingAgendaCard.tsx b/packages/web/src/components/molecules/AgendaCard/OngoingAgendaCard.tsx
index db257052..def866a4 100644
--- a/packages/web/src/components/molecules/AgendaCard/OngoingAgendaCard.tsx
+++ b/packages/web/src/components/molecules/AgendaCard/OngoingAgendaCard.tsx
@@ -81,7 +81,7 @@ export const OngoingAgendaCard: React.FC<OngoingAgendaProps> = ({ agenda }) => {
             }}
           />
           <div css={[column, gap(2)]}>
-            <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
+            <p css={[text.title2, text.black]}>{agenda.title}</p>
             <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
           </div>
         </div>
diff --git a/packages/web/src/components/molecules/AgendaCard/PreparingAgendaCard.tsx b/packages/web/src/components/molecules/AgendaCard/PreparingAgendaCard.tsx
index 2f7616f7..2a2b5c8f 100644
--- a/packages/web/src/components/molecules/AgendaCard/PreparingAgendaCard.tsx
+++ b/packages/web/src/components/molecules/AgendaCard/PreparingAgendaCard.tsx
@@ -28,7 +28,7 @@ export const PreparingAgendaCard: React.FC<Props> = ({ agenda }) => (
         }}
       />
       <div css={[column, gap(2)]}>
-        <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
+        <p css={[text.title2, text.black]}>{agenda.title}</p>
         <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
       </div>
     </div>
diff --git a/packages/web/src/components/molecules/AgendaCard/TerminatedAgendaCard.tsx b/packages/web/src/components/molecules/AgendaCard/TerminatedAgendaCard.tsx
index c3593c24..dd551792 100644
--- a/packages/web/src/components/molecules/AgendaCard/TerminatedAgendaCard.tsx
+++ b/packages/web/src/components/molecules/AgendaCard/TerminatedAgendaCard.tsx
@@ -43,7 +43,7 @@ export const TerminatedAgendaCard: React.FC<Props> = ({ agenda }) => {
       {enabled ? (
         <div css={[column, gap(15), w("fill")]}>
           <div css={[column, gap(2)]}>
-            <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
+            <p css={[text.title2, text.black]}>{agenda.title}</p>
             <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
           </div>
           <div>
@@ -83,7 +83,7 @@ export const TerminatedAgendaCard: React.FC<Props> = ({ agenda }) => {
             }}
           />
           <div css={[column, gap(2)]}>
-            <h1 css={[text.title2, text.black]}>{agenda.title}</h1>
+            <p css={[text.title2, text.black]}>{agenda.title}</p>
             <p css={[text.subtitle, text.gray500]}>{agenda.content}</p>
           </div>
         </div>
diff --git a/packages/web/src/components/molecules/Modal.tsx b/packages/web/src/components/molecules/Modal.tsx
index 46f7ff8c..c9ea095f 100644
--- a/packages/web/src/components/molecules/Modal.tsx
+++ b/packages/web/src/components/molecules/Modal.tsx
@@ -109,7 +109,7 @@ export const Modal: React.FC<Props> = ({
     <div css={[backDropStyle]}>
       <div css={[containerStyle, w(width), h(height)]} ref={containerRef}>
         <div css={[w("fill"), row, align.center, justify.between]}>
-          <h1 css={[text.title1, text.black]}>{title}</h1>
+          <p css={[text.title1, text.black]}>{title}</p>
           <Link
             to=".."
             relative="path"

From ddacbbd53dcc8dd3f4ed4cb121ba71d137e5e97f Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Wed, 22 Nov 2023 20:34:19 +0900
Subject: [PATCH 16/19] fix: solve conflict after merging with main

---
 packages/web/src/components/atoms/Button.tsx        |  2 +-
 .../src/components/organisms/CreateAgendaModal.tsx  |  9 ++++++++-
 packages/web/src/components/organisms/Header.tsx    | 13 +------------
 3 files changed, 10 insertions(+), 14 deletions(-)

diff --git a/packages/web/src/components/atoms/Button.tsx b/packages/web/src/components/atoms/Button.tsx
index 9ad71170..729657cc 100644
--- a/packages/web/src/components/atoms/Button.tsx
+++ b/packages/web/src/components/atoms/Button.tsx
@@ -33,7 +33,7 @@ export const Button = styled.button<{
 
     &:disabled {
       cursor: none;
-      background-color: ${theme.colors.white};
+      background-color: ${colors.white};
     }
   `,
 );
diff --git a/packages/web/src/components/organisms/CreateAgendaModal.tsx b/packages/web/src/components/organisms/CreateAgendaModal.tsx
index e6713986..65fc680d 100644
--- a/packages/web/src/components/organisms/CreateAgendaModal.tsx
+++ b/packages/web/src/components/organisms/CreateAgendaModal.tsx
@@ -199,7 +199,14 @@ export const CreateAgendaModal: React.FC = () => {
               style={{ textDecoration: "none" }}
             >
               <Button w={270} h={38} onClick={onSubmit} disabled={!validated}>
-                <p css={[text.boldtitle3, validated ? text.blue600 : text.gray300]}>투표 생성하기</p>
+                <p
+                  css={[
+                    text.boldtitle3,
+                    validated ? text.blue600 : text.gray300,
+                  ]}
+                >
+                  투표 생성하기
+                </p>
               </Button>
             </Link>
           </Box>
diff --git a/packages/web/src/components/organisms/Header.tsx b/packages/web/src/components/organisms/Header.tsx
index bbdc2a49..36d4536a 100644
--- a/packages/web/src/components/organisms/Header.tsx
+++ b/packages/web/src/components/organisms/Header.tsx
@@ -2,18 +2,7 @@ import { LogoIcon } from "@biseo/web/assets";
 import { Box } from "@biseo/web/components/atoms";
 import { HeaderItem, Profile } from "@biseo/web/components/molecules";
 import { useAuth } from "@biseo/web/services/auth";
-import {
-  align,
-  bg,
-  center,
-  colors,
-  column,
-  h,
-  justify,
-  round,
-  text,
-  w,
-} from "@biseo/web/styles";
+import { bg, center, colors, h, round, text, w } from "@biseo/web/styles";
 import styled from "@emotion/styled";
 import React, { useState } from "react";
 import { useNavigate } from "react-router-dom";

From b2ee4b3822b87e3cbff23e8b2ebaa0c4012e1a9b Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Sat, 30 Dec 2023 11:45:21 +0900
Subject: [PATCH 17/19] style: lint

---
 packages/web/src/components/atoms/Tag.tsx     | 8 +++++---
 packages/web/src/components/atoms/UserTag.tsx | 6 ++++--
 2 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/web/src/components/atoms/Tag.tsx b/packages/web/src/components/atoms/Tag.tsx
index 1cdd8683..7273fd90 100644
--- a/packages/web/src/components/atoms/Tag.tsx
+++ b/packages/web/src/components/atoms/Tag.tsx
@@ -48,12 +48,14 @@ const TagInner = styled.div<{
   css`
     display: flex;
     height: 18px;
-    border-radius: 3px;
-    align-items: center;
     justify-content: center;
+    align-items: center;
+
+    font-weight: 500;
+
+    border-radius: 3px;
     padding: 2px 10px;
     font-size: 10px;
-    font-weight: 500;
   `,
   tagStyles[type],
 ]);
diff --git a/packages/web/src/components/atoms/UserTag.tsx b/packages/web/src/components/atoms/UserTag.tsx
index 1911c7be..30b6657a 100644
--- a/packages/web/src/components/atoms/UserTag.tsx
+++ b/packages/web/src/components/atoms/UserTag.tsx
@@ -9,11 +9,13 @@ interface Props extends PropsWithChildren {
 const Container = styled.div`
   display: flex;
   height: 18px;
-  padding: 3px 6px;
   justify-content: center;
   align-items: center;
-  font-size: 9px;
+
   font-weight: 500;
+
+  padding: 3px 6px;
+  font-size: 9px;
   color: ${colors.gray500};
   background-color: ${colors.white};
   border: solid 1px ${colors.gray200};

From c11116727a8131af0e44cefacdbe426c2db9e9ab Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Sat, 30 Dec 2023 11:45:39 +0900
Subject: [PATCH 18/19] refactor: remove unused css

---
 packages/web/src/index.css | 7 -------
 1 file changed, 7 deletions(-)

diff --git a/packages/web/src/index.css b/packages/web/src/index.css
index 39c7941f..1b841ae1 100644
--- a/packages/web/src/index.css
+++ b/packages/web/src/index.css
@@ -21,10 +21,3 @@ body,
 #root {
   height: 100%;
 }
-
-/* use text.multiLine as default */
-p {
-  white-space: pre-line;
-  word-break: break-all;
-  overflow-wrap: break-word;
-}

From 9b11199b214aff342c3a7db61aed161e33ee4127 Mon Sep 17 00:00:00 2001
From: JeukHwang <92910273+JeukHwang@users.noreply.github.com>
Date: Sat, 30 Dec 2023 11:45:52 +0900
Subject: [PATCH 19/19] refactor: add comments

---
 packages/web/src/components/atoms/Box.tsx | 17 +++++++++--------
 1 file changed, 9 insertions(+), 8 deletions(-)

diff --git a/packages/web/src/components/atoms/Box.tsx b/packages/web/src/components/atoms/Box.tsx
index 86d30bff..dca32a89 100644
--- a/packages/web/src/components/atoms/Box.tsx
+++ b/packages/web/src/components/atoms/Box.tsx
@@ -11,6 +11,7 @@ const calcSize = (size: Size) => {
 
 /**
  * @deprecated use `padding`, `round`, and layout tokens instead
+ * w("hug"), h("hug"), bg.transparent, round(0), dir("column"), gap(0), align("start"), justify("start"), pad(0), padHorizontal(0), padVertical(0), padTop(0), padBottom(0), padLeft(0), padRight(0), zIndex(0), position("static"), self("auto"), wrap("nowrap")
  */
 export const Box = styled.div<{
   w?: Size;
@@ -37,20 +38,20 @@ export const Box = styled.div<{
     w = "hug",
     h = "hug",
     bg,
-    round = 0,
-    dir = "column",
-    gap = 0,
-    align = "start",
-    justify = "start",
-    pad = 0,
+    round = 0, // default
+    dir = "column", // not default
+    gap = 0, // not default
+    align = "start", // not default
+    justify = "start", // not default
+    pad = 0, // pad(0)
     padHorizontal = pad,
     padVertical = pad,
     padLeft = padHorizontal,
     padRight = padHorizontal,
     padBottom = padVertical,
     padTop = padVertical,
-    zIndex = 0,
-    position = "static",
+    zIndex = 0, // zIndex(0)
+    position = "static", // default
     self = "auto",
     wrap = "nowrap",
   }) => css`