Fix readmes

Author: forestream

README.md

@@ -83,30 +83,27 @@ Devup UI eliminates the performance degradation of the browser through the CSS i
 We develop a preprocessor that considers all grammatical cases.
 
 ```typescript
-// Before
-<Box bg={"red"}/>
-// After
-<Box className={"d0"}/>
+const before = <Box bg={"red"}/>
+
+const after = <div className="d0"/>
 ```
 
 Variables are fully supported.
 
 ```typescript
-// Before
-<Box bg={colorVariable}/>
-// After
-<Box className={"d0"} style={{
+const before = <Box bg={colorVariable}/>
+
+const after = <div className="d0" style={{
     "--d0": colorVariable
 }}/>
 ```
 
 Various expressions and responsiveness are also fully supported.
 
 ```typescript
-// Before
-<Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
-// After
-<Box className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
+const before = <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
+
+const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
     "--d2": variable
 }}/>
 ```
@@ -141,9 +138,8 @@ You can use responsive and pseudo selector.
 
 ```typescript
 // Responsive with Selector
-<Box _hover={{bg: ["red", "blue"]}}/>
+const box = <Box _hover={{bg: ["red", "blue"]}}/>
 
 // Same
-<Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
-
+const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
 ```

README_ko.md

@@ -83,30 +83,27 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를
 모든 문법적 경우의 수를 고려하여 전처리기를 개발합니다.
 
 ```typescript
-// Before
-<Box bg={"red"}/>
-// After
-<Box className={"d0"}/>
+const before = <Box bg={"red"}/>
+
+const after = <div className="d0"/>
 ```
 
 변수 사용도 완전히 지원합니다.
 
 ```typescript
-// Before
-<Box bg={colorVariable}/>
-// After
-<Box className={"d0"} style={{
+const before = <Box bg={colorVariable}/>
+
+const after = <div className="d0" style={{
     "--d0": colorVariable
 }}/>
 ```
 
 다양한 표현식과 반응형도 모두 지원합니다.
 
 ```typescript
-// Before
-<Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
-// After
-<Box className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
+const before = <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
+
+const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
     "--d2": variable
 }}/>
 ```
@@ -141,9 +138,8 @@ Devup UI는 CSS in JS 전처리기를 통하여 브라우저의 성능 저하를
 
 ```typescript
 // Responsive with Selector
-<Box _hover={{bg: ["red", "blue"]}}/>
+const box = <Box _hover={{bg: ["red", "blue"]}}/>
 
 // Same
-<Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
-
+const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
 ```

packages/components/README.md

@@ -83,30 +83,27 @@ Devup UI eliminates the performance degradation of the browser through the CSS i
 We develop a preprocessor that considers all grammatical cases.
 
 ```typescript
-// Before
-<Box bg={"red"}/>
-// After
-<Box className={"d0"}/>
+const before = <Box bg={"red"}/>
+
+const after = <div className="d0"/>
 ```
 
 Variables are fully supported.
 
 ```typescript
-// Before
-<Box bg={colorVariable}/>
-// After
-<Box className={"d0"} style={{
+const before = <Box bg={colorVariable}/>
+
+const after = <div className="d0" style={{
     "--d0": colorVariable
 }}/>
 ```
 
 Various expressions and responsiveness are also fully supported.
 
 ```typescript
-// Before
-<Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
-// After
-<Box className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
+const before = <Box bg={["red", "blue", a > b ? "yellow" : variable]}/>
+
+const after = <div className={`d0 d1 ${a > b ? "d2" : "d3"}`} style={{
     "--d2": variable
 }}/>
 ```
@@ -141,9 +138,8 @@ You can use responsive and pseudo selector.
 
 ```typescript
 // Responsive with Selector
-<Box _hover={{bg: ["red", "blue"]}}/>
-
-// Another way
-<Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
+const box = <Box _hover={{bg: ["red", "blue"]}}/>
 
+// Same
+const box = <Box _hover={[{bg: "red"}, {bg: "blue"}]}/>
 ```