diff --git a/src/features/archive/colors.type.ts b/src/features/archive/colors.type.ts index 11191ca..f711a87 100644 --- a/src/features/archive/colors.type.ts +++ b/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,6 +32,7 @@ export const ColorMap: { [key in Color]: ColorInfo } = { description: '추진력이 돋보이는 기록', tag: '#주도적인 리더십 #적극적인 행동력', hex: '#ff5e5e', + guide: '새로운 도전이나 행동력을 보여줄 수 있는 경험을 소개해주세요!', }, YELLOW: { label: 'yellow', @@ -38,6 +40,7 @@ export const ColorMap: { [key in Color]: ColorInfo } = { description: '창의력이 돋보이는 기록', tag: '#창의적인 아이디어 #자유로운 발상', hex: '#ffe66b', + guide: '새로운 아이디어나 톡톡 튀는 아이디어를 뽐내주세요!', }, BLUE: { label: 'blue', @@ -45,6 +48,7 @@ export const ColorMap: { [key in Color]: ColorInfo } = { description: '분석력이 돋보이는 기록', tag: '#논리적 사고 #깊이 있는 연구', hex: '#8ad0e2', + guide: '논리적인 근거와 통찰력 있는 내용을 모두에게 소개시켜 주세요!', }, GREEN: { label: 'green', @@ -52,6 +56,7 @@ export const ColorMap: { [key in Color]: ColorInfo } = { description: '헌신했던 경험이 돋보이는 기록', tag: '#타인을 위한 봉사 #공동체 기여', hex: '#b5d681', + guide: '타인을 위한 실용적인 정보나 조언을 제공했던 경험을 적어보는 건 어떨까요?', }, PURPLE: { label: 'purple', @@ -59,6 +64,7 @@ export const ColorMap: { [key in Color]: ColorInfo } = { description: '성찰력이 돋보이는 기록', tag: '#내적 동기 탐구 #가치관 형성', hex: '#aa8abd', + guide: '내적 성장이나 삶의 의미를 탐구해 보아요!', }, DEFAULT: { label: 'default', @@ -66,5 +72,6 @@ export const ColorMap: { [key in Color]: ColorInfo } = { description: '기본 색상', tag: '#기본 색상', hex: '#333533', + guide: '', }, }; diff --git a/src/shared/ui/MarkdownEditor/MarkdownEditor.tsx b/src/shared/ui/MarkdownEditor/MarkdownEditor.tsx index 3bc9db3..3b003ea 100644 --- a/src/shared/ui/MarkdownEditor/MarkdownEditor.tsx +++ b/src/shared/ui/MarkdownEditor/MarkdownEditor.tsx @@ -75,6 +75,7 @@ export const MarkdownEditor = ({ eventHandler, ]} onChange={newValue => { + if (data[updateKey].length > 2500) return; onUpdate(updateKey, newValue as T[typeof updateKey]); }} onUpdate={update => { diff --git a/src/widgets/UserContents/UserContents.tsx b/src/widgets/UserContents/UserContents.tsx index 456f5a5..0756be6 100644 --- a/src/widgets/UserContents/UserContents.tsx +++ b/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 ; } @@ -38,28 +38,11 @@ const ArchiveContent = ({ userId }: ArchiveContentProps) => { - -
{isFetchingNextPage && }
+ ); }; -// 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 = () => ; - const ContentComponents = { gathering: ArchiveContent, archive: ArchiveContent, diff --git a/src/widgets/WriteArchive/WriteStep.module.scss b/src/widgets/WriteArchive/WriteStep.module.scss index e535b33..e9c97a7 100644 --- a/src/widgets/WriteArchive/WriteStep.module.scss +++ b/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; +} diff --git a/src/widgets/WriteArchive/WriteStep.tsx b/src/widgets/WriteArchive/WriteStep.tsx index 19b0bab..206baba 100644 --- a/src/widgets/WriteArchive/WriteStep.tsx +++ b/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}` }} /> {ColorMap[archiveData.colorType].name} +
+
{ColorMap[archiveData.colorType].guide}
+ +
댓글 허용 @@ -134,10 +138,14 @@ export const WriteStep = ({
- +
+ + {`(${archiveData.title.length}/30)`} +
{ + if (e.target.value.length > 30) return; updateArchiveData('title', e.target.value); }} placeholder='스토리를 나타낼 제목을 입력해주세요' @@ -147,10 +155,14 @@ export const WriteStep = ({
- +
+ + {`(${archiveData.introduction.length}/150)`} +
{ + if (e.target.value.length > 150) return; updateArchiveData('introduction', e.target.value); }} placeholder='스토리를 나타낼 간단한 소개 글을 적어주세요' @@ -159,6 +171,12 @@ export const WriteStep = ({ />
+
+
+ + {`(${archiveData.description.length}/2500)`} +
+