댓글 아이템 UI 수정

Author: LimSB-dev

src/components/posts/[id]/Comments/CommentForm/index.tsx

@@ -82,17 +82,6 @@ export const CommentForm = ({ onSubmit, isAuthenticated }: CommentFormProps) =>
             disabled={isSubmitting}
           />
           <div className={styles.comment_form_footer}>
-            <div className={styles.markdown_hint}>
-              <a
-                href="https://docs.github.com/en/get-started/writing-on-github/getting-started-with-writing-and-formatting-on-github/basic-writing-and-formatting-syntax"
-                target="_blank"
-                rel="noopener noreferrer"
-                className={styles.markdown_link}
-              >
-                Markdown
-              </a>
-              을 사용할 수 있습니다
-            </div>
             <button
               type="submit"
               className={styles.submit_button}

src/components/posts/[id]/Comments/CommentForm/styles.module.scss

@@ -43,7 +43,7 @@
   width: 100%;
   min-height: 80px;
   padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 6px;
   background: var(--background-color);
   color: var(--text-color);
@@ -52,6 +52,15 @@
   resize: none;
   transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
 
+  html[data-theme="dark"] & {
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  html[data-theme="light"] &,
+  :root & {
+    border-color: rgba(0, 0, 0, 0.15);
+  }
+
   &:focus {
     outline: none;
     border-color: var(--primary-color);
@@ -70,7 +79,7 @@
 
 .comment_form_footer {
   display: flex;
-  justify-content: space-between;
+  justify-content: flex-end;
   align-items: center;
 }
 
@@ -93,7 +102,7 @@
   padding: 8px 16px;
   background: var(--card-background-color);
   color: var(--text-color);
-  border: 1px solid rgba(255, 255, 255, 0.15);
+  border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 6px;
   font-size: var(--p);
   font-weight: 500;
@@ -102,9 +111,25 @@
   box-shadow: inset 0 1px 2px var(--card-shadow-color-up),
     inset 0 -1px 2px var(--card-shadow-color-down);
 
+  html[data-theme="dark"] & {
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  html[data-theme="light"] &,
+  :root & {
+    border-color: rgba(0, 0, 0, 0.15);
+  }
+
   &:hover:not(:disabled) {
-    background: rgba(255, 255, 255, 0.05);
-    border-color: rgba(255, 255, 255, 0.25);
+    html[data-theme="dark"] & {
+      background: rgba(255, 255, 255, 0.05);
+      border-color: rgba(255, 255, 255, 0.25);
+    }
+    html[data-theme="light"] &,
+    :root & {
+      background: rgba(0, 0, 0, 0.03);
+      border-color: rgba(0, 0, 0, 0.25);
+    }
     transform: translateY(1px);
     box-shadow: inset 0 1px 2px var(--card-shadow-color-down),
       inset 0 -1px 2px var(--card-shadow-color-up);

src/components/posts/[id]/Comments/CommentItem/styles.module.scss

@@ -2,14 +2,20 @@
   width: 100%;
   padding: 16px;
   margin-bottom: 12px;
-  background: rgba(255, 255, 255, 0.02);
-  border: 1px solid rgba(255, 255, 255, 0.08);
   border-radius: 6px;
   transition: all 0.2s ease-in-out;
 
-  &:hover {
+  // 다크 테마 - 호버 스타일을 기본으로 적용
+  html[data-theme="dark"] & {
     background: rgba(255, 255, 255, 0.04);
-    border-color: rgba(255, 255, 255, 0.12);
+    border: 1px solid rgba(255, 255, 255, 0.18);
+  }
+
+  // 라이트 테마 - 호버 스타일을 기본으로 적용
+  html[data-theme="light"] &,
+  :root & {
+    background: rgba(0, 0, 0, 0.02);
+    border: 1px solid rgba(0, 0, 0, 0.18);
   }
 }
 
@@ -75,13 +81,22 @@
 .action_button {
   padding: 4px 8px;
   background: transparent;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 4px;
   color: var(--secondary-color);
   font-size: var(--caption);
   cursor: pointer;
   transition: all 0.2s ease-in-out;
 
+  html[data-theme="dark"] & {
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  html[data-theme="light"] &,
+  :root & {
+    border-color: rgba(0, 0, 0, 0.15);
+  }
+
   &:hover {
     color: var(--text-color);
     border-color: rgba(255, 215, 0, 0.3);
@@ -123,10 +138,19 @@
     }
 
     pre {
-      background: rgba(0, 0, 0, 0.1);
+      background: rgba(0, 0, 0, 0.05);
       padding: 12px;
       border-radius: 6px;
       overflow-x: auto;
+
+      html[data-theme="dark"] & {
+        background: rgba(0, 0, 0, 0.2);
+      }
+
+      html[data-theme="light"] &,
+      :root & {
+        background: rgba(0, 0, 0, 0.05);
+      }
     }
 
     a {
@@ -149,7 +173,7 @@
   width: 100%;
   min-height: 100px;
   padding: 12px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 6px;
   background: var(--background-color);
   color: var(--text-color);
@@ -158,6 +182,15 @@
   resize: vertical;
   transition: border-color 0.2s ease-in-out;
 
+  html[data-theme="dark"] & {
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  html[data-theme="light"] &,
+  :root & {
+    border-color: rgba(0, 0, 0, 0.15);
+  }
+
   &:focus {
     outline: none;
     border-color: var(--primary-color);
@@ -179,11 +212,20 @@
 .cancel_button,
 .save_button {
   padding: 6px 12px;
-  border: 1px solid rgba(255, 255, 255, 0.1);
+  border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 4px;
   font-size: var(--caption);
   cursor: pointer;
   transition: all 0.2s ease-in-out;
+
+  html[data-theme="dark"] & {
+    border-color: rgba(255, 255, 255, 0.15);
+  }
+
+  html[data-theme="light"] &,
+  :root & {
+    border-color: rgba(0, 0, 0, 0.15);
+  }
 }
 
 .cancel_button {
@@ -192,7 +234,13 @@
 
   &:hover:not(:disabled) {
     color: var(--text-color);
-    border-color: rgba(255, 255, 255, 0.2);
+    html[data-theme="dark"] & {
+      border-color: rgba(255, 255, 255, 0.25);
+    }
+    html[data-theme="light"] &,
+    :root & {
+      border-color: rgba(0, 0, 0, 0.25);
+    }
   }
 }
 

src/components/posts/[id]/Comments/styles.module.scss

@@ -2,7 +2,16 @@
   width: 100%;
   margin-top: 48px;
   padding: 24px 0;
-  border-top: 1px solid rgba(255, 255, 255, 0.1);
+  border-top: 1px solid rgba(0, 0, 0, 0.1);
+
+  html[data-theme="dark"] & {
+    border-top-color: rgba(255, 255, 255, 0.1);
+  }
+
+  html[data-theme="light"] &,
+  :root & {
+    border-top-color: rgba(0, 0, 0, 0.1);
+  }
 }
 
 .comments_title {