comments update

Author: ppippi-dev

components/Comments/styles.css.ts

@@ -1,4 +1,4 @@
-import { style } from '@vanilla-extract/css';
+import { style, globalStyle } from '@vanilla-extract/css';
 
 export const commentsContainer = style({
   margin: '2rem 0',
@@ -11,27 +11,29 @@ export const commentForm = style({
   flexDirection: 'column',
   gap: '1rem',
   marginBottom: '2rem',
-  
-  selectors: {
-    '& div': {
-      display: 'flex',
-      flexDirection: 'column',
-      gap: '0.5rem',
-    },
-    '& label': {
-      fontWeight: 'bold',
-    },
-    '& input, & textarea': {
-      padding: '0.5rem',
-      border: '1px solid #ddd',
-      borderRadius: '4px',
-      fontSize: '1rem',
-    },
-    '& textarea': {
-      minHeight: '100px',
-      resize: 'vertical',
-    }
-  }
+});
+
+// 전역 스타일 적용
+globalStyle(`${commentForm} div`, {
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '0.5rem',
+});
+
+globalStyle(`${commentForm} label`, {
+  fontWeight: 'bold',
+});
+
+globalStyle(`${commentForm} input, ${commentForm} textarea`, {
+  padding: '0.5rem',
+  border: '1px solid #ddd',
+  borderRadius: '4px',
+  fontSize: '1rem',
+});
+
+globalStyle(`${commentForm} textarea`, {
+  minHeight: '100px',
+  resize: 'vertical',
 });
 
 export const submitButton = style({
@@ -65,13 +67,12 @@ export const commentHeader = style({
   justifyContent: 'space-between',
   alignItems: 'center',
   marginBottom: '0.5rem',
-  
-  selectors: {
-    '& span': {
-      color: '#666',
-      fontSize: '0.875rem'
-    }
-  }
+});
+
+// 전역 스타일 적용
+globalStyle(`${commentHeader} span`, {
+  color: '#666',
+  fontSize: '0.875rem'
 });
 
 export const commentBody = style({