Merge pull request #32 from epigram5-9/epic/FE-46-common-components

FE-46 🔨 공용 컴포넌트 멘토링 수정사항 반영

.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>
   );

src/components/Header/Header.tsx

@@ -1,23 +1,35 @@
 import React from 'react';
 import { useRouter } from 'next/router';
 import Image from 'next/image';
-import { HeaderProps } from '../../types/Header';
 import { useToast } from '../ui/use-toast';
 import LOGO_ICON from '../../../public/epigram-icon.png';
 import ARROW_LEFT_ICON from '../../../public/icon/arrow-left-icon.svg';
 import PROFILE_ICON from '../../../public/icon/profile-icon.svg';
 import SEARCH_ICON from '../../../public/icon/search-icon.svg';
 import SHARE_ICON from '../../../public/icon/share-icon.svg';
 
-// TODO 네비게이션 바를 나타내는 컴포넌트 입니다.
-// TODO 상위 컴포넌트에서 Props를 받아 원하는 스타일을 보여줍니다.
-// TODO 사용 예시
-// TODO <Header icon='back' routerPage='원하는 페이지 주소' isLogo={false} insteadOfLogo='센터 텍스트' isProfileIcon={false} isShareIcon={false} isButton textInButton='버튼 텍스트' disabled={false} onClick={동작할 함수} />
-// TODO <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />;
-// TODO icon: 'back'을 사용할 경우 routerPage의 값을 무조건 지정해줘야 합니다.
-// TODO isLogo={false}일 경우 insteadOfLogo의 값을 무조건 지정해줘야 합니다.
-// TODO isButton 일 경우 textInButton의 값을 무조건 지정해줘야 합니다.
-// TODO SHARE_ICON 추가 시 토스트 기능도 사용하려면 해당 컴포넌트 아래 <Toaster /> 를 추가해주세요.
+// NOTE 네비게이션 바를 나타내는 컴포넌트 입니다.
+// NOTE 상위 컴포넌트에서 Props를 받아 원하는 스타일을 보여줍니다.
+// NOTE 사용 예시
+// NOTE <Header icon='back' routerPage='원하는 페이지 주소' isLogo={false} insteadOfLogo='센터 텍스트' isProfileIcon={false} isShareIcon={false} isButton textInButton='버튼 텍스트' disabled={false} onClick={동작할 함수} />
+// NOTE <Header icon='search' routerPage='/search' isLogo insteadOfLogo='' isProfileIcon isShareIcon={false} isButton={false} textInButton='' disabled={false} onClick={() => {}} />;
+// NOTE icon: 'back'을 사용할 경우 routerPage의 값을 무조건 지정해줘야 합니다.
+// NOTE isLogo={false}일 경우 insteadOfLogo의 값을 무조건 지정해줘야 합니다.
+// NOTE isButton 일 경우 textInButton의 값을 무조건 지정해줘야 합니다.
+// NOTE SHARE_ICON 추가 시 토스트 기능도 사용하려면 해당 컴포넌트 아래 <Toaster /> 를 추가해주세요.
+
+export interface HeaderProps {
+  icon: 'back' | 'search' | '';
+  routerPage: string;
+  isLogo: boolean;
+  insteadOfLogo: string;
+  isProfileIcon: boolean;
+  isShareIcon: boolean;
+  isButton: boolean;
+  textInButton: string;
+  disabled: boolean;
+  onClick: (e: React.MouseEvent<HTMLButtonElement>) => void;
+}
 
 function Header({ isLogo, icon, insteadOfLogo, isButton, isProfileIcon, isShareIcon, textInButton, routerPage, disabled, onClick }: HeaderProps) {
   const router = useRouter();