[Feat] 아카이브 글자수 제한 표시 및 가이드 추가 (#112)

* feat: 아카이브 글자수 제한 표시 및 가이드 추가

* fix: userData -> myData

src/features/archive/colors.type.ts

@@ -6,6 +6,7 @@ export interface ColorInfo {
   description: string;
   tag: string;
   hex: string;
+  guide: string;
 }
 
 export interface ColorGroup {
@@ -31,40 +32,46 @@ export const ColorMap: { [key in Color]: ColorInfo } = {
     description: '추진력이 돋보이는 기록',
     tag: '#주도적인 리더십 #적극적인 행동력',
     hex: '#ff5e5e',
+    guide: '새로운 도전이나 행동력을 보여줄 수 있는 경험을 소개해주세요!',
   },
   YELLOW: {
     label: 'yellow',
     name: '노랑',
     description: '창의력이 돋보이는 기록',
     tag: '#창의적인 아이디어 #자유로운 발상',
     hex: '#ffe66b',
+    guide: '새로운 아이디어나 톡톡 튀는 아이디어를 뽐내주세요!',
   },
   BLUE: {
     label: 'blue',
     name: '파랑',
     description: '분석력이 돋보이는 기록',
     tag: '#논리적 사고 #깊이 있는 연구',
     hex: '#8ad0e2',
+    guide: '논리적인 근거와 통찰력 있는 내용을 모두에게 소개시켜 주세요!',
   },
   GREEN: {
     label: 'green',
     name: '초록',
     description: '헌신했던 경험이 돋보이는 기록',
     tag: '#타인을 위한 봉사 #공동체 기여',
     hex: '#b5d681',
+    guide: '타인을 위한 실용적인 정보나 조언을 제공했던 경험을 적어보는 건 어떨까요?',
   },
   PURPLE: {
     label: 'purple',
     name: '보라',
     description: '성찰력이 돋보이는 기록',
     tag: '#내적 동기 탐구 #가치관 형성',
     hex: '#aa8abd',
+    guide: '내적 성장이나 삶의 의미를 탐구해 보아요!',
   },
   DEFAULT: {
     label: 'default',
     name: '기본',
     description: '기본 색상',
     tag: '#기본 색상',
     hex: '#333533',
+    guide: '',
   },
 };

src/shared/ui/MarkdownEditor/MarkdownEditor.tsx

@@ -75,6 +75,7 @@ export const MarkdownEditor = <T extends { [key: string]: any }>({
           eventHandler,
         ]}
         onChange={newValue => {
+          if (data[updateKey].length > 2500) return;
           onUpdate(updateKey, newValue as T[typeof updateKey]);
         }}
         onUpdate={update => {

src/widgets/UserContents/UserContents.tsx

@@ -5,7 +5,7 @@ import { ContentsTab } from './ContentsTab';
 import { useUserTab } from './hook/useUserTab';
 
 import type { ColorCountDTO } from '@/features';
-import { ColorMap, useUserArchiveColors, useUserArchiveList } from '@/features';
+import { ColorMap, useMyArchiveList, useUserArchiveColors } from '@/features';
 //import type { GatheringItemDto } from '@/features/gathering/model/gathering.dto';
 import { Loader } from '@/shared/ui';
 import { PieChart } from '@/shared/ui/Chart/PieChart';
@@ -15,10 +15,10 @@ interface ArchiveContentProps {
 }
 
 const ArchiveContent = ({ userId }: ArchiveContentProps) => {
-  const { items: archives, isFetchingNextPage, isPending, ref } = useUserArchiveList(userId);
+  const { data: archives, isPending } = useMyArchiveList();
   const { data: colorData, isPending: isColorPending } = useUserArchiveColors(userId);
 
-  if (!colorData?.data || isColorPending || isPending) {
+  if (!colorData?.data || isColorPending || isPending || !archives?.data) {
     return <Loader />;
   }
 
@@ -38,28 +38,11 @@ const ArchiveContent = ({ userId }: ArchiveContentProps) => {
           <PieChart data={convertToChartData(colorData.data)} />
         </div>
       </div>
-      <ArchiveGrid archives={archives} isMine />
-      <div ref={ref}>{isFetchingNextPage && <Loader />}</div>
+      <ArchiveGrid archives={archives?.data?.archives} />
     </div>
   );
 };
 
-// const dummyGatherings: GatheringItemDto<'프로젝트'>[] = Array.from({ length: 9 }, (_, i) => ({
-//   gatheringId: i.toString(),
-//   title: `Sample Gathering ${i + 1}`,
-//   userId: `user_${i}`,
-//   username: '홍길동',
-//   sort: '프로젝트',
-//   subject: '개발', // ProjectSubjectType만 허용
-//   tags: ['React', 'TypeScript', 'Next.js'],
-//   deadLine: '2024-11-28',
-//   position: ['개발자', '디자이너'], // 여러 포지션 가능
-//   contactType: '온라인',
-//   period: '3개월',
-//   personnel: '3',
-// }));
-// const GatheringContent = () => <GatheringGrid items={dummyGatherings} />;
-
 const ContentComponents = {
   gathering: ArchiveContent,
   archive: ArchiveContent,

src/widgets/WriteArchive/WriteStep.module.scss

@@ -100,3 +100,46 @@
     border-radius: 8px;
   }
 }
+
+.label {
+  display: flex;
+  gap: 0.3rem;
+  align-items: center;
+}
+
+.guideWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1rem;
+  height: 1rem;
+  background-color: $primary-color;
+  border-radius: 50%;
+
+  .guide {
+    position: absolute;
+    top: -0.3rem;
+    left: 1.8rem;
+    z-index: 3000;
+    width: 20rem;
+    padding: 0.3rem 0;
+    visibility: hidden;
+    background-color: white;
+    opacity: 0;
+    transition: all 0.3s;
+
+    @media (width <= 768px) {
+      width: 13rem;
+    }
+  }
+
+  &:hover .guide {
+    visibility: visible;
+    opacity: 1;
+  }
+}
+
+.infoIcon {
+  color: $secondary-color;
+}

src/widgets/WriteArchive/WriteStep.tsx

@@ -1,4 +1,4 @@
-import { faChevronLeft } from '@fortawesome/free-solid-svg-icons';
+import { faChevronLeft, faInfo } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
@@ -121,6 +121,10 @@ export const WriteStep = ({
             style={{ backgroundColor: `${ColorMap[archiveData.colorType].hex}` }}
           />
           <span>{ColorMap[archiveData.colorType].name}</span>
+          <div className={styles.guideWrapper}>
+            <div className={styles.guide}>{ColorMap[archiveData.colorType].guide}</div>
+            <FontAwesomeIcon className={styles.infoIcon} icon={faInfo} size='xs' />
+          </div>
         </div>
         <div className={styles.settingWrapper}>
           <span>댓글 허용</span>
@@ -134,10 +138,14 @@ export const WriteStep = ({
       </div>
 
       <div className={styles.inputContainer}>
-        <label>제목</label>
+        <div className={styles.label}>
+          <label>제목</label>
+          <span>{`(${archiveData.title.length}/30)`}</span>
+        </div>
         <div className={styles.inputBox}>
           <input
             onChange={e => {
+              if (e.target.value.length > 30) return;
               updateArchiveData('title', e.target.value);
             }}
             placeholder='스토리를 나타낼 제목을 입력해주세요'
@@ -147,10 +155,14 @@ export const WriteStep = ({
         </div>
       </div>
       <div className={styles.inputContainer}>
-        <label>한 줄 소개</label>
+        <div className={styles.label}>
+          <label>한 줄 소개</label>
+          <span>{`(${archiveData.introduction.length}/150)`}</span>
+        </div>
         <div className={styles.inputBox}>
           <input
             onChange={e => {
+              if (e.target.value.length > 150) return;
               updateArchiveData('introduction', e.target.value);
             }}
             placeholder='스토리를 나타낼 간단한 소개 글을 적어주세요'
@@ -159,6 +171,12 @@ export const WriteStep = ({
           />
         </div>
       </div>
+      <div className={styles.inputContainer}>
+        <div className={styles.label}>
+          <label>본문</label>
+          <span>{`(${archiveData.description.length}/2500)`}</span>
+        </div>
+      </div>
       <MarkdownEditor data={archiveData} onUpdate={updateArchiveData} updateKey={'description'} />
       <div className={styles.inputContainer}>
         <label>태그</label>