From b0591d61cebb4c7588b5d17d4142a63e33485edd Mon Sep 17 00:00:00 2001
From: NEWJIN <winniepooh00@naver.com>
Date: Thu, 11 Jul 2024 23:42:30 +0900
Subject: [PATCH] =?UTF-8?q?FE-58=20:lips:=20=EB=8C=93=EA=B8=80=20=EC=B9=B4?=
 =?UTF-8?q?=EB=93=9C=20=EA=B4=80=EB=A0=A8=20=EC=9D=B8=ED=84=B0=ED=8E=98?=
 =?UTF-8?q?=EC=9D=B4=EC=8A=A4,=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B6=84?=
 =?UTF-8?q?=EB=A6=AC?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/Card/CommentCard.tsx | 51 ++---------------------------
 src/styles/CommentCardStyles.ts     | 44 +++++++++++++++++++++++++
 src/types/CommentCardTypes.ts       |  3 ++
 3 files changed, 49 insertions(+), 49 deletions(-)
 create mode 100644 src/styles/CommentCardStyles.ts
 create mode 100644 src/types/CommentCardTypes.ts

diff --git a/src/components/Card/CommentCard.tsx b/src/components/Card/CommentCard.tsx
index b64ed404..3975f828 100644
--- a/src/components/Card/CommentCard.tsx
+++ b/src/components/Card/CommentCard.tsx
@@ -1,54 +1,7 @@
 import React from 'react';
 import Image from 'next/image';
-
-interface CommentCardProps {
-  status: 'edit' | 'complete';
-}
-
-const sizeStyles = {
-  sm: 'w-[360px] h-[130px]',
-  md: 'md:w-[384px] md:h-[162px]',
-  lg: 'lg:w-[640px] lg:h-[176px]',
-};
-
-const textSizeStyles = {
-  sm: {
-    name: 'text-xs',
-    time: 'text-xs',
-    action: 'text-xs',
-    content: 'text-sm',
-  },
-  md: {
-    name: 'md:text-sm',
-    time: 'md:text-sm',
-    action: 'md:text-sm',
-    content: 'md:text-base',
-  },
-  lg: {
-    name: 'lg:text-base',
-    time: 'lg:text-base',
-    action: 'lg:text-base',
-    content: 'lg:text-xl',
-  },
-};
-
-const gapStyles = {
-  sm: 'gap-2',
-  md: 'md:gap-3',
-  lg: 'lg:gap-4',
-};
-
-const paddingStyles = {
-  sm: 'py-4 px-6',
-  md: 'md:p-6',
-  lg: 'lg:py-[35px] lg:px-6',
-};
-
-const contentWidthStyles = {
-  sm: 'w-[248px]',
-  md: 'md:w-[272px]',
-  lg: 'lg:w-[528px]',
-};
+import { CommentCardProps } from '@/types/CommentCardTypes';
+import { sizeStyles, textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles';
 
 function CommentCard({ status }: CommentCardProps) {
   return (
diff --git a/src/styles/CommentCardStyles.ts b/src/styles/CommentCardStyles.ts
new file mode 100644
index 00000000..6d7a6a66
--- /dev/null
+++ b/src/styles/CommentCardStyles.ts
@@ -0,0 +1,44 @@
+export const sizeStyles = {
+  sm: 'w-[360px] h-[130px]',
+  md: 'md:w-[384px] md:h-[162px]',
+  lg: 'lg:w-[640px] lg:h-[176px]',
+};
+
+export const textSizeStyles = {
+  sm: {
+    name: 'text-xs',
+    time: 'text-xs',
+    action: 'text-xs',
+    content: 'text-sm',
+  },
+  md: {
+    name: 'md:text-sm',
+    time: 'md:text-sm',
+    action: 'md:text-sm',
+    content: 'md:text-base',
+  },
+  lg: {
+    name: 'lg:text-base',
+    time: 'lg:text-base',
+    action: 'lg:text-base',
+    content: 'lg:text-xl',
+  },
+};
+
+export const gapStyles = {
+  sm: 'gap-2',
+  md: 'md:gap-3',
+  lg: 'lg:gap-4',
+};
+
+export const paddingStyles = {
+  sm: 'py-4 px-6', // 위아래 16px, 양 옆 24px
+  md: 'md:p-6', // 위아래, 양옆 24px
+  lg: 'lg:py-[35px] lg:px-6', // 위아래 35px, 양 옆 24px
+};
+
+export const contentWidthStyles = {
+  sm: 'w-[248px]',
+  md: 'md:w-[272px]',
+  lg: 'lg:w-[528px]',
+};
diff --git a/src/types/CommentCardTypes.ts b/src/types/CommentCardTypes.ts
new file mode 100644
index 00000000..abb0a28b
--- /dev/null
+++ b/src/types/CommentCardTypes.ts
@@ -0,0 +1,3 @@
+export interface CommentCardProps {
+  status: 'edit' | 'complete';
+}