fix: 콘텐츠 캘린더 뿌연 현상 근본 해결 — isDragging bug fix
세션 내내 추적하던 'opacity 20-30% 흐림' 인상의 진짜 원인: const isDragging = draggedEntry?.entry.id === entry.id; → mock entry에 id가 없어 undefined === undefined → true → 모든 entry에 opacity-40 상시 적용됨 수정: - isDragging: 오브젝트 참조 비교로 전환 (id 의존 제거) - entry 배경/border: 더 진한 파스텔로 대비 강화 (#F3F0FF → #EDE5FF, border #D5CDF5 → #B8A8E8 등) - entry 제목: text-slate-700 → font-medium text-[#0A1128] - 아이콘 opacity-60 제거 (100% 불투명) - shadow-sm + hover:shadow-lg - 섹션 dark 테마 복원 (Dark/White 섹션 교차 규칙 유지) - 일자 셀 bg-slate-50/50 제거, 빈 셀 border 불투명화 6개 병원 데모(view-clinic/banobagi/grand/wonjin/ts/irum) 모두 ContentCalendar 컴포넌트를 공유하므로 한 번에 반영. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>main
parent
281efac932
commit
d816bb2d13
|
|
@ -24,10 +24,10 @@ interface ContentCalendarProps {
|
||||||
}
|
}
|
||||||
|
|
||||||
const contentTypeColors: Record<ContentCategory, { bg: string; text: string; entry: string; border: string; shadow: string }> = {
|
const contentTypeColors: Record<ContentCategory, { bg: string; text: string; entry: string; border: string; shadow: string }> = {
|
||||||
video: { bg: 'bg-[#F3F0FF]', text: 'text-[#6C5CE7]', entry: 'bg-[#F3F0FF] border-[#D5CDF5]', border: 'border-[#D5CDF5]', shadow: 'shadow-[2px_3px_8px_rgba(155,138,212,0.15)]' },
|
video: { bg: 'bg-[#F3F0FF]', text: 'text-[#6C5CE7]', entry: 'bg-[#EDE5FF] border-[#B8A8E8]', border: 'border-[#D5CDF5]', shadow: 'shadow-[2px_3px_8px_rgba(155,138,212,0.15)]' },
|
||||||
blog: { bg: 'bg-[#EFF0FF]', text: 'text-[#3A3F7C]', entry: 'bg-[#EFF0FF] border-[#C5CBF5]', border: 'border-[#C5CBF5]', shadow: 'shadow-[2px_3px_8px_rgba(122,132,212,0.15)]' },
|
blog: { bg: 'bg-[#EFF0FF]', text: 'text-[#3A3F7C]', entry: 'bg-[#E2E5FF] border-[#A8B0E8]', border: 'border-[#C5CBF5]', shadow: 'shadow-[2px_3px_8px_rgba(122,132,212,0.15)]' },
|
||||||
social: { bg: 'bg-[#FFF6ED]', text: 'text-[#7C5C3A]', entry: 'bg-[#FFF6ED] border-[#F5E0C5]', border: 'border-[#F5E0C5]', shadow: 'shadow-[2px_3px_8px_rgba(212,168,114,0.15)]' },
|
social: { bg: 'bg-[#FFF6ED]', text: 'text-[#7C5C3A]', entry: 'bg-[#FFEED9] border-[#E8C896]', border: 'border-[#F5E0C5]', shadow: 'shadow-[2px_3px_8px_rgba(212,168,114,0.15)]' },
|
||||||
ad: { bg: 'bg-[#FFF0F0]', text: 'text-[#7C3A4B]', entry: 'bg-[#FFF0F0] border-[#F5D5DC]', border: 'border-[#F5D5DC]', shadow: 'shadow-[2px_3px_8px_rgba(212,136,154,0.15)]' },
|
ad: { bg: 'bg-[#FFF0F0]', text: 'text-[#7C3A4B]', entry: 'bg-[#FFE0E0] border-[#E8A8B4]', border: 'border-[#F5D5DC]', shadow: 'shadow-[2px_3px_8px_rgba(212,136,154,0.15)]' },
|
||||||
};
|
};
|
||||||
|
|
||||||
const contentTypeLabels: Record<ContentCategory, string> = {
|
const contentTypeLabels: Record<ContentCategory, string> = {
|
||||||
|
|
@ -220,12 +220,12 @@ export default function ContentCalendar({ data, planId, onEntryUpdate }: Content
|
||||||
const ContentIcon = contentTypeIcons[entry.contentType];
|
const ContentIcon = contentTypeIcons[entry.contentType];
|
||||||
const ChannelIcon = channelIconMap[entry.channelIcon] ?? GlobeFilled;
|
const ChannelIcon = channelIconMap[entry.channelIcon] ?? GlobeFilled;
|
||||||
const statusDot = statusDotColors[entry.status ?? 'draft'];
|
const statusDot = statusDotColors[entry.status ?? 'draft'];
|
||||||
const isDragging = draggedEntry?.entry.id === entry.id;
|
const isDragging = draggedEntry !== null && draggedEntry.entry === entry;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<div
|
||||||
key={entry.id ?? entryIdx}
|
key={entry.id ?? entryIdx}
|
||||||
className={`${colors.entry} ${colors.shadow} border rounded-lg p-1.5 mb-1 last:mb-0 cursor-grab active:cursor-grabbing hover:ring-2 hover:ring-white/40 transition-all group relative ${isDragging ? 'opacity-40' : ''}`}
|
className={`${colors.entry} border rounded-lg p-1.5 mb-1 last:mb-0 cursor-grab active:cursor-grabbing hover:ring-2 hover:ring-[#6C5CE7]/30 hover:shadow-lg shadow-sm transition-all group relative ${isDragging ? 'opacity-40' : ''}`}
|
||||||
draggable={weekNumber !== undefined}
|
draggable={weekNumber !== undefined}
|
||||||
onDragStart={weekNumber !== undefined ? () => handleDragStart(entry, weekNumber) : undefined}
|
onDragStart={weekNumber !== undefined ? () => handleDragStart(entry, weekNumber) : undefined}
|
||||||
onDragEnd={weekNumber !== undefined ? handleDragEnd : undefined}
|
onDragEnd={weekNumber !== undefined ? handleDragEnd : undefined}
|
||||||
|
|
@ -234,9 +234,9 @@ export default function ContentCalendar({ data, planId, onEntryUpdate }: Content
|
||||||
<div className="flex items-center gap-1 mb-0.5">
|
<div className="flex items-center gap-1 mb-0.5">
|
||||||
<span className={`w-1.5 h-1.5 rounded-full ${statusDot} flex-shrink-0`} />
|
<span className={`w-1.5 h-1.5 rounded-full ${statusDot} flex-shrink-0`} />
|
||||||
<ChannelIcon size={10} className={colors.text} />
|
<ChannelIcon size={10} className={colors.text} />
|
||||||
<ContentIcon size={10} className={`${colors.text} opacity-60`} />
|
<ContentIcon size={10} className={colors.text} />
|
||||||
</div>
|
</div>
|
||||||
<p className="text-[11px] text-slate-700 leading-tight line-clamp-2">
|
<p className="text-[11px] font-medium text-[#0A1128] leading-tight line-clamp-2">
|
||||||
{entry.title}
|
{entry.title}
|
||||||
</p>
|
</p>
|
||||||
{entry.description && (
|
{entry.description && (
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue