From 68d5be9cab13e61a15ba536d6c1e56054ef5261c Mon Sep 17 00:00:00 2001
From: YuHyun <puh0128@gmail.com>
Date: Mon, 4 Dec 2023 22:39:17 +0900
Subject: [PATCH] =?UTF-8?q?refactor:=20borderRadius=208=20=EC=9C=A0?=
 =?UTF-8?q?=ED=8B=B8=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

[#2]
---
 .../frontend/src/components/editor/Editor.css.ts    |  3 ++-
 .../components/quiz/SolvedModal/SolvedModal.css.ts  | 13 +++++++------
 .../components/common/Button/Button.css.ts          |  3 ++-
 .../components/common/Modal/Modal.css.ts            |  3 ++-
 .../frontend/src/design-system/tokens/utils.css.ts  |  4 ++++
 5 files changed, 17 insertions(+), 9 deletions(-)

diff --git a/packages/frontend/src/components/editor/Editor.css.ts b/packages/frontend/src/components/editor/Editor.css.ts
index aff5251d..e69528e1 100644
--- a/packages/frontend/src/components/editor/Editor.css.ts
+++ b/packages/frontend/src/components/editor/Editor.css.ts
@@ -4,6 +4,7 @@ import color from "../../design-system/tokens/color";
 import typography from "../../design-system/tokens/typography";
 import {
   border,
+  borderRadius,
   flexAlignCenter,
   flexColumn,
   flexJustifyCenter,
@@ -61,8 +62,8 @@ export const notice = style([
   widthFull,
   typography.$semantic.caption2Regular,
   border.all,
+  borderRadius,
   {
-    borderRadius: 8,
     marginTop: 14,
     gap: 5,
     padding: 14,
diff --git a/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.css.ts b/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.css.ts
index 28716cd2..0dc35401 100644
--- a/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.css.ts
+++ b/packages/frontend/src/components/quiz/SolvedModal/SolvedModal.css.ts
@@ -4,12 +4,11 @@ import color from "../../../design-system/tokens/color";
 import typography from "../../../design-system/tokens/typography";
 import {
   border,
+  borderRadius,
   flexAlignCenter,
   flexCenter,
 } from "../../../design-system/tokens/utils.css";
 
-const BORDER_RADIUS = 8;
-
 export const container = style({
   width: 336,
 });
@@ -42,11 +41,12 @@ export const linkContainer = style([
 
 export const linkInput = style([
   border.all,
+  borderRadius,
   typography.$semantic.body2Regular,
   {
     flex: "1 0",
-    borderTopLeftRadius: BORDER_RADIUS,
-    borderBottomLeftRadius: BORDER_RADIUS,
+    borderTopRightRadius: 0,
+    borderBottomRightRadius: 0,
     padding: "9px 13px",
     color: "inherit",
     backgroundColor: color.$semantic.bgDefault,
@@ -56,12 +56,13 @@ export const linkInput = style([
 
 export const linkCopyButton = style([
   border.all,
+  borderRadius,
   typography.$semantic.body2Regular,
   {
     position: "relative",
     borderLeft: "none",
-    borderTopRightRadius: BORDER_RADIUS,
-    borderBottomRightRadius: BORDER_RADIUS,
+    borderTopLeftRadius: 0,
+    borderBottomLeftRadius: 0,
     padding: "9px 19px",
     color: "inherit",
     backgroundColor: color.$semantic.bgAlt,
diff --git a/packages/frontend/src/design-system/components/common/Button/Button.css.ts b/packages/frontend/src/design-system/components/common/Button/Button.css.ts
index 0c0a7fe5..4d737d37 100644
--- a/packages/frontend/src/design-system/components/common/Button/Button.css.ts
+++ b/packages/frontend/src/design-system/components/common/Button/Button.css.ts
@@ -2,13 +2,14 @@ import { style, styleVariants } from "@vanilla-extract/css";
 
 import color from "../../../tokens/color";
 import typography from "../../../tokens/typography";
+import { borderRadius } from "../../../tokens/utils.css";
 
 export const buttonBase = style([
   typography.$semantic.title4Regular,
+  borderRadius,
   {
     height: 42,
     border: "1px solid transparent",
-    borderRadius: 8,
     padding: "8px 13px",
 
     ":disabled": {
diff --git a/packages/frontend/src/design-system/components/common/Modal/Modal.css.ts b/packages/frontend/src/design-system/components/common/Modal/Modal.css.ts
index 2454dda7..55ba7891 100644
--- a/packages/frontend/src/design-system/components/common/Modal/Modal.css.ts
+++ b/packages/frontend/src/design-system/components/common/Modal/Modal.css.ts
@@ -2,6 +2,7 @@ import { style } from "@vanilla-extract/css";
 
 import color from "../../../tokens/color";
 import {
+  borderRadius,
   boxShadow,
   flexAlignCenter,
   flexCenter,
@@ -26,9 +27,9 @@ export const container = style([
   boxShadow,
   flexColumn,
   flexAlignCenter,
+  borderRadius,
   {
     width: 427,
-    borderRadius: 8,
     padding: 27,
     backgroundColor: color.$semantic.bgDefault,
   },
diff --git a/packages/frontend/src/design-system/tokens/utils.css.ts b/packages/frontend/src/design-system/tokens/utils.css.ts
index 867b86a3..822fc872 100644
--- a/packages/frontend/src/design-system/tokens/utils.css.ts
+++ b/packages/frontend/src/design-system/tokens/utils.css.ts
@@ -71,3 +71,7 @@ export const border = {
     border: `1px solid ${color.$semantic.border}`,
   }),
 };
+
+export const borderRadius = style({
+  borderRadius: 8,
+});