FE-61 🔨 공용 컴포넌트 수정

.eslintrc.js

@@ -30,6 +30,8 @@ module.exports = {
     'react/jsx-props-no-spreading': 'off',
     'no-use-before-define': 'off',
     '@typescript-eslint/no-use-before-define': ['off'],
+    "react/require-default-props": 'off',
+    "react/self-closing-comp": 'off',
   },
   settings: {
     react: {

src/components/Card/CommentCard.tsx

@@ -1,8 +1,11 @@
 import React from 'react';
 import Image from 'next/image';
-import { CommentCardProps } from '@/types/CommentCardTypes';
 import { sizeStyles, textSizeStyles, gapStyles, paddingStyles, contentWidthStyles } from '@/styles/CommentCardStyles';
 
+export interface CommentCardProps {
+  status: 'edit' | 'complete';
+}
+
 function CommentCard({ status }: CommentCardProps) {
   return (
     <div
@@ -17,8 +20,14 @@ function CommentCard({ status }: CommentCardProps) {
         <div className={`flex-col justify-start items-start ${gapStyles.sm} ${gapStyles.md} ${gapStyles.lg} inline-flex ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}>
           <div className='justify-between items-center w-full inline-flex'>
             <div className='justify-start items-start gap-2 flex'>
-              <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.name} ${textSizeStyles.md.name} ${textSizeStyles.lg.name}`}>지킬과 하이드</div>
-              <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.time} ${textSizeStyles.md.time} ${textSizeStyles.lg.time}`}>1시간 전</div>
+              <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.name} ${textSizeStyles.md.name} ${textSizeStyles.lg.name}`}>
+                {/* 테스트 텍스트입니다. */}
+                지킬과 하이드
+              </div>
+              <div className={`text-zinc-600 font-normal font-pretendard leading-normal ${textSizeStyles.sm.time} ${textSizeStyles.md.time} ${textSizeStyles.lg.time}`}>
+                {/* 테스트 텍스트입니다. */}
+                1시간 전
+              </div>
             </div>
             {status === 'edit' && (
               <div className='justify-start items-start gap-4 flex'>
@@ -30,6 +39,7 @@ function CommentCard({ status }: CommentCardProps) {
           <div
             className={`w-full text-zinc-800 font-normal font-pretendard ${textSizeStyles.sm.content} ${textSizeStyles.md.content} ${textSizeStyles.lg.content} ${contentWidthStyles.sm} ${contentWidthStyles.md} ${contentWidthStyles.lg}`}
           >
+            {/* 테스트 텍스트입니다. */}
             오늘 하루 우울했었는데 덕분에 많은 힘 얻고 갑니다. 연금술사 책 다시 사서 오랜만에 읽어봐야겠어요!
           </div>
         </div>

src/components/Card/EpigramCard.tsx

@@ -1,9 +1,9 @@
 import React from 'react';
 
 // figma 상으로는 sm ~ 3xl 사이즈로 구현되어 있는데, tailwind 환경을 반영해
-// base ~ 2xl 으로 정의했습니다.
+// xs ~ 2xl 으로 정의했습니다.
 const sizeStyles = {
-  base: 'w-[286px] max-h-[132px]',
+  xs: 'w-[286px] max-h-[132px]',
   sm: 'sm:w-[312px] sm:max-h-[152px]',
   md: 'md:w-[384px] md:max-h-[180px]',
   lg: 'lg:w-[540px] lg:max-h-[160px]',
@@ -12,7 +12,7 @@ const sizeStyles = {
 };
 
 const textSizeStyles = {
-  base: 'text-xs',
+  xs: 'text-xs',
   sm: 'sm:text-sm',
   md: 'md:text-base',
   lg: 'lg:text-xl',
@@ -22,34 +22,37 @@ const textSizeStyles = {
 
 function EpigramCard() {
   return (
-    <div className={`relative flex-col justify-start items-end gap-2 inline-flex ${sizeStyles.base} ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${sizeStyles.xl} ${sizeStyles['2xl']}`}>
+    <div className={`relative flex-col justify-start items-end gap-2 inline-flex ${sizeStyles.xs} ${sizeStyles.sm} ${sizeStyles.md} ${sizeStyles.lg} ${sizeStyles.xl} ${sizeStyles['2xl']}`}>
       <div className='w-full p-[22px] bg-white rounded-[14.67px] shadow border border-zinc-100 flex-col justify-start items-start flex relative overflow-hidden'>
         {/* eslint-disable-next-line */}
         <div className='absolute inset-0 bg-stripes w-full h-full'></div> {/* 줄무늬를 만들려면 비어있는 div가 필요합니다. */}
         <div className='relative w-full z-10 flex flex-col justify-start items-start flex-1'>
           <div className='self-stretch flex-col justify-start items-start gap-2 flex'>
             <div
-              className={`self-stretch ${textSizeStyles.base} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-neutral-700 font-normal font-iropkeBatang leading-normal`}
+              className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-neutral-700 font-normal font-iropkeBatang leading-normal`}
             >
+              {/* 테스트 텍스트입니다. */}
               오랫동안 꿈을 그리는 사람은 마침내 그 꿈을 닮아 간다.
             </div>
             <div
-              className={`self-stretch ${textSizeStyles.base} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-right text-slate-400 font-normal font-iropkeBatang leading-normal`}
+              className={`self-stretch ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-right text-slate-400 font-normal font-iropkeBatang leading-normal`}
             >
-              - 앙드레 말로 -
+              {/* 테스트 텍스트입니다. */}- 앙드레 말로 -
             </div>
           </div>
         </div>
       </div>
       <div className='justify-start items-start gap-2 inline-flex'>
         <div
-          className={`text-right ${textSizeStyles.base} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-slate-400 font-normal font-iropkeBatang leading-normal`}
+          className={`text-right ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-slate-400 font-normal font-iropkeBatang leading-normal`}
         >
+          {/* 테스트 텍스트입니다. */}
           #나아가야할때
         </div>
         <div
-          className={`text-right ${textSizeStyles.base} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-slate-400 font-normal font-iropkeBatang leading-normal`}
+          className={`text-right ${textSizeStyles.xs} ${textSizeStyles.sm} ${textSizeStyles.md} ${textSizeStyles.lg} ${textSizeStyles.xl} ${textSizeStyles['2xl']} text-slate-400 font-normal font-iropkeBatang leading-normal`}
         >
+          {/* 테스트 텍스트입니다. */}
           #꿈을이루고싶을때
         </div>
       </div>

src/components/Emotion/card/EmotionIconCard.tsx → src/components/Emotion/EmotionCard.tsx

@@ -1,3 +1,9 @@
+/*
+  1개의 감정 아이콘 카드를 랜더링 합니다.
+  아이콘의 타입, 상태, 크기, 클릭 이벤트를 관리합니다.
+  아이콘 타입과 상태에 따라 아이콘의 모양과 스타일을 조정합니다.
+ */
+
 import React from 'react';
 import cn from '@/lib/utils';
 import Image from 'next/image';
@@ -104,11 +110,4 @@ function EmotionIconCard({ iconType = '감동', state = 'Default', size = 'sm',
   );
 }
 
-EmotionIconCard.displayName = 'EmotionIconCard';
-
-// 기본 props 설정
-EmotionIconCard.defaultProps = {
-  onClick: () => {},
-};
-
 export default EmotionIconCard;

src/components/Emotion/card/EmotionSelector.tsx → src/components/Emotion/EmotionSelector.tsx

@@ -1,5 +1,10 @@
+/*
+  여러 개의 EmotionIconCard를 관리합니다.
+  사용자 인터페이스에 필요한 상호 작용 로직을 포함합니다.
+ */
+
 import React, { useState } from 'react';
-import InteractiveEmotionIconCard from '@/components/Emotion/card/InteractiveEmotionIconCard';
+import EmotionIconCard from '@/components/Emotion/EmotionCard';
 import useMediaQuery from '@/hooks/useMediaQuery';
 import { EmotionType, EmotionState } from '@/types/EmotionTypes';
 
@@ -52,7 +57,7 @@ function EmotionSelector() {
   return (
     <div className={`justify-start items-start inline-flex ${containerClass}`}>
       {(['감동', '기쁨', '고민', '슬픔', '분노'] as const).map((iconType) => (
-        <InteractiveEmotionIconCard key={iconType} iconType={iconType} size={cardSize} state={states[iconType]} onClick={() => handleCardClick(iconType)} />
+        <EmotionIconCard key={iconType} iconType={iconType} size={cardSize} state={states[iconType]} onClick={() => handleCardClick(iconType)} />
       ))}
     </div>
   );