feat(css): custom component css tokenize

sparcs-kaist · Sep 14, 2023 · b2cce26 · b2cce26
1 parent 01bb31a
commit b2cce26
Show file tree

Hide file tree

Showing 2 changed files with 54 additions and 45 deletions.
diff --git a/client/src/components/atoms/PresetOption.tsx b/client/src/components/atoms/PresetOption.tsx
@@ -1,7 +1,16 @@
 import React from "react";
-import { BorderedBox } from "./BorderedBox";
-import { Text } from "./Text";
-import { Box } from "./Box";
+import {
+  bg,
+  round,
+  row,
+  justify,
+  padding,
+  text,
+  w,
+  h,
+  align,
+  border,
+} from "@/styles";
 
 interface Tag {
   id: number;
@@ -15,32 +24,31 @@ interface Props {
 }
 
 export const PresetOption: React.FC<Props> = ({ tag, selected }) => (
-  <Box
-    dir="row"
-    w="fill"
-    h={30}
-    round={5}
-    justify="space-between"
-    align="center"
-    padHorizontal={10}
-    bg={selected ? "blue100" : "white"}
+  <div
+    css={[
+      row,
+      justify.between,
+      align.center,
+      selected ? bg.blue100 : bg.white,
+      w("fill"),
+      h(30),
+      round.md,
+      padding.horizontal(10),
+    ]}
   >
-    <BorderedBox
-      round={5}
-      borderSize={1}
-      borderStyle="solid"
-      borderColor="gray200"
-      align="center"
-      padHorizontal={6}
-      padVertical={3}
+    <div
+      css={[
+        align.center,
+        border.gray200,
+        round.md,
+        padding.horizontal(6),
+        padding.vertical(3),
+      ]}
     >
-      <Text variant="option2" color="gray500">
-        {tag.title}
-      </Text>
-    </BorderedBox>
-
-    <Text variant="option1" color={selected ? "gray600" : "gray500"}>
+      <p css={[text.option2, text.gray500]}>{tag.title}</p>
+    </div>
+    <p css={[text.option1, selected ? text.gray600 : text.gray500]}>
       {tag.description}
-    </Text>
-  </Box>
+    </p>
+  </div>
 );
diff --git a/client/src/components/atoms/TagSelect.tsx b/client/src/components/atoms/TagSelect.tsx
@@ -24,12 +24,11 @@ import {
   text,
   w,
   h,
+  align,
 } from "@/styles";
 
 import { PositionedDownArrowIcon } from "./Label";
 import { PresetOption } from "./PresetOption";
-import { BorderedBox } from "./BorderedBox";
-import { Text } from "./Text";
 
 interface Props {
   tags: Tag[];
@@ -42,6 +41,9 @@ interface Tag {
   description: string;
 }
 
+const cursorPointer = css`
+  cursor: pointer;
+`;
 const boxShadow = css`
   box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.06);
 `;
@@ -95,23 +97,21 @@ const MultiValueContainer = (props: MultiValueGenericProps<Tag>) => {
   const { data } = props;
   return (
     <components.MultiValueContainer {...props}>
-      <BorderedBox
-        dir="row"
-        round={5}
-        borderSize={1}
-        borderStyle="solid"
-        borderColor="gray200"
-        bg="white"
-        align="center"
-        gap={6}
-        padHorizontal={8}
-        padVertical={5}
+      <div
+        css={[
+          row,
+          align.center,
+          border.gray200,
+          round.md,
+          bg.white,
+          padding.horizontal(8),
+          padding.vertical(5),
+          gap(6),
+        ]}
       >
-        <Text variant="option1" color="gray500">
-          {data.title}
-        </Text>
+        <p css={[text.option1, text.gray500]}>{data.title}</p>
         <components.MultiValueRemove {...props} />
-      </BorderedBox>
+      </div>
     </components.MultiValueContainer>
   );
 };
@@ -123,6 +123,7 @@ const MultiValueRemove = (props: MultiValueRemoveProps<Tag>) => (
 
 export const TagSelect: React.FC<Props> = ({ tags, onChange }) => (
   <Select
+    css={cursorPointer}
     styles={selectStyles}
     components={{
       Option,