+ {comments.map((comment) => {
+ const isEditing = editingCommentId === comment.id;
+ const timeAgo = formatDistanceToNow(new Date(comment.createdAt), {
+ addSuffix: true,
+ locale: ko,
+ });
+
+ // VotingComment 타입인지 확인
+ const votedOption =
+ 'votedOption' in comment ? comment.votedOption : undefined;
+
+ // 투표 옵션의 색상 찾기
+ let optionColor = {
+ bg: 'bg-fill-brand-subtle-default',
+ text: 'text-text-brand',
+ icon: 'text-text-brand',
+ };
+ if (votedOption && votingOptions) {
+ const optionIndex = votingOptions.findIndex(
+ (opt) => opt.label === votedOption,
+ );
+ if (optionIndex !== -1) {
+ optionColor =
+ OPTION_BADGE_COLORS[optionIndex % OPTION_BADGE_COLORS.length];
+ }
+ }
+
+ // Author image handling
+ const authorImage =
+ 'avatar' in comment.author
+ ? comment.author.avatar
+ : 'profileImage' in comment.author
+ ? (comment.author as any).profileImage
+ : undefined;
+
+ return (
+
+
+ {/* 작성자 정보 */}
+
+
e.stopPropagation()}>
+ }
+ />
+
+
+
+
+ {comment.author.nickname}
+
+ {votedOption && (
+
+
+
+ {votedOption}
+
+
+ )}
+
+
+ {timeAgo}
+
+
+
+
+ {/* 더보기 메뉴 (본인 댓글만) */}
+ {comment.isAuthor && (
+
+
+
+ {openMenuId === comment.id && (
+ <>
+ {/* 백드롭 */}
+
setOpenMenuId(null)}
+ />
+
+ {/* 메뉴 */}
+
+
+
+
+
+ )}
+
+ )}
+
+
+ {/* 댓글 내용 또는 수정 폼 */}
+ {isEditing ? (
+
+
+
+ ) : (
+
+ {comment.content}
+
+ )}
+
+ );
+ })}
+
+ );
+}
diff --git a/src/components/discussion/discussion-detail-modal.tsx b/src/components/discussion/discussion-detail-modal.tsx
new file mode 100644
index 00000000..3765f1be
--- /dev/null
+++ b/src/components/discussion/discussion-detail-modal.tsx
@@ -0,0 +1,255 @@
+import { formatDistanceToNow } from 'date-fns';
+import { ko } from 'date-fns/locale';
+import {
+ X,
+ ThumbsUp,
+ ThumbsDown,
+ Eye,
+ Clock,
+ MessageCircle,
+} from 'lucide-react';
+import React, { useState } from 'react';
+import { cn } from '@/components/ui/(shadcn)/lib/utils';
+import UserAvatar from '@/components/ui/avatar';
+import UserProfileModal from '@/entities/user/ui/user-profile-modal';
+import { TOPIC_LABELS } from '@/mocks/discussion-mock-data';
+import { Discussion, VoteType } from '@/types/discussion';
+import { CommentFormData } from '@/types/schemas/zod-schema';
+import CommentForm from './comment-form';
+import CommentList from './comment-list';
+
+interface DiscussionDetailModalProps {
+ discussion: Discussion;
+ onClose: () => void;
+ onVote?: (discussionId: number, voteType: VoteType) => void;
+ onAddComment?: (discussionId: number, content: string) => void;
+ onDeleteComment?: (discussionId: number, commentId: number) => void;
+ onEditComment?: (
+ discussionId: number,
+ commentId: number,
+ content: string,
+ ) => void;
+}
+
+export default function DiscussionDetailModal({
+ discussion,
+ onClose,
+ onVote,
+ onAddComment,
+ onDeleteComment,
+ onEditComment,
+}: DiscussionDetailModalProps) {
+ const [isSubmitting, setIsSubmitting] = useState(false);
+
+ const timeAgo = formatDistanceToNow(new Date(discussion.createdAt), {
+ addSuffix: true,
+ locale: ko,
+ });
+
+ const handleVote = (voteType: VoteType) => {
+ if (onVote) {
+ onVote(discussion.id, voteType);
+ }
+ };
+
+ const handleCommentSubmit = async (data: CommentFormData) => {
+ setIsSubmitting(true);
+ try {
+ await onAddComment?.(discussion.id, data.content);
+ } finally {
+ setIsSubmitting(false);
+ }
+ };
+
+ return (
+
+
+ {/* 헤더 */}
+
+
+ {/* 주제 배지 */}
+
+ {TOPIC_LABELS[discussion.topic]}
+
+
+ {/* 제목 */}
+
+ {discussion.title}
+
+
+ {/* 메타 정보 */}
+
+ {/* 작성자 */}
+
e.stopPropagation()}>
+
+
+
+
+
+ {discussion.author.nickname}
+
+
+ }
+ />
+
+
+ {/* 시간 */}
+
+
+ {timeAgo}
+
+
+ {/* 조회수 */}
+
+
+ {discussion.viewCount.toLocaleString()}
+
+
+
+ {/* 태그 */}
+ {discussion.tags.length > 0 && (
+
+ {discussion.tags.map((tag) => (
+
+ #{tag}
+
+ ))}
+
+ )}
+
+
+ {/* 닫기 버튼 */}
+
+
+
+ {/* 본문 + 투표 */}
+
+ {/* 본문 */}
+
+
+ {discussion.content}
+
+
+
+ {/* 투표 섹션 */}
+
+
+ 이 토론에 대한 의견은?
+
+
+ {/* 찬성 버튼 */}
+
+
+ {/* 반대 버튼 */}
+
+
+
+
+ {/* 댓글 섹션 */}
+
+
+
+ 댓글 {discussion.commentCount}
+
+
+ {/* 댓글 목록 */}
+
+
+ onDeleteComment?.(discussion.id, commentId)
+ }
+ onEdit={(commentId, content) =>
+ onEditComment?.(discussion.id, commentId, content)
+ }
+ />
+
+
+ {/* 댓글 작성 폼 */}
+
+
+
+
+
+
+
+ {/* 주제 필터 */}
+
+
+
+ {TOPICS.map((t) => (
+
+ ))}
+
+
+
+ {/* 정렬 옵션 */}
+
+
+
+
+
+
+
+
+
{day}
+ {dayItems.map((item, itemIndex) => (
+
item.link && window.open(item.link, '_blank')}
+ onMouseEnter={(e) => {
+ const rect = e.currentTarget.getBoundingClientRect();
+ setActiveTooltip({ id: item.id, text: item.subject, rect });
+ }}
+ onMouseLeave={() => {
+ setActiveTooltip(null);
+ }}
+ className={cn(
+ 'rounded-50 relative mb-50 flex cursor-pointer items-center gap-50 truncate border px-100 py-50 text-[11px] font-medium transition-all hover:z-20',
+ item.attendance === 'ATTENDED'
+ ? 'bg-fill-success-subtle-default text-text-success hover:bg-fill-success-default border-transparent'
+ : 'bg-fill-warning-subtle-default text-text-warning hover:bg-fill-warning-default border-transparent',
+ )}
+ >
+ {item.attendance === 'ATTENDED' ? (
+
+ ) : (
+
+ )}
+ {item.subject}
+
+ ))}
+ {dayItems.length > 2 && (
+
+ +{dayItems.length - 2}개 더
+
+ )}
+
+
+
+
+ {year}년 {monthNames[month]}
+
+
+
+
+
+ {dayNames.map((name, idx) => (
+
+ {name}
+
+ ))}
+
+
+
+ {Array.from({ length: firstDay }, (_, i) => (
+
+ ))}
+ {Array.from({ length: daysInMonth }, (_, i) =>
+ renderCalendarDay(i + 1),
+ )}
+
+
+ {/* Global Tooltip Portal (Fixed Position) */}
+ {activeTooltip && (
+
+ {/* Arrow (Bottom) */}
+
+
+ {activeTooltip.text}
+
+ )}
+
+ {/* 날짜 */}
+
+
+ {item.date}
+
+
+ {/* 주제 */}
+
+ {item.subject}
+
+
+ {/* 상대방 */}
+
+
e.stopPropagation()} // 행 클릭 이벤트(링크 이동) 방지
+ >
+
+
+ {item.partner.name}
+
+
+ }
+ />
+
+ {item.role === 'INTERVIEWER' ? (
+
+
+ 면접자
+
+ ) : (
+
+
+ 답변자
+
+ )}
+
+
+ {/* 역할수행여부 */}
+
+ {item.attendance === 'ATTENDED' ? (
+
+
+ 역할수행
+
+ ) : (
+
+
+ 미진행
+
+ )}
+
+
+ {/* 진행상태 */}
+
+ {item.status === 'COMPLETED' ? (
+
+
+ 완료
+
+ ) : (
+
+
+ 진행중
+
+ )}
+
+
+ {/* 링크 */}
+
+
+ );
+};
diff --git a/src/components/ui/avatar/index.tsx b/src/components/ui/avatar/index.tsx
index 49239515..f1192c46 100644
--- a/src/components/ui/avatar/index.tsx
+++ b/src/components/ui/avatar/index.tsx
@@ -25,7 +25,17 @@ export default function Avatar({
}: UserAvatarProps) {
const [isError, setIsError] = useState(false);
- const showImage = !!image && !isError;
+ // 유효하지 않은 이미지 URL 필터링 (LOCAL, 빈 문자열, 상대 경로만 있는 경우 등)
+ const isValidImage =
+ image &&
+ typeof image === 'string' &&
+ image.trim() !== '' &&
+ image.toUpperCase() !== 'LOCAL' &&
+ (image.startsWith('http://') ||
+ image.startsWith('https://') ||
+ image.startsWith('/'));
+
+ const showImage = isValidImage && !isError;
return (
{
+ const px = { sm: 32, md: 48, lg: 80, xl: 120 }[size]; // 기존 명예의 전당 사이즈와 최대한 비슷하게 매핑 (sm:32px는 기존 row에 맞춤)
+ const effectiveAlt = alt || name || 'profile';
+
+ // src 정리(공백/이상한 상대경로 방지)
+ const normalizedSrc = useMemo(() => {
+ if (!src || typeof src !== 'string') return null;
+ const s = src.trim();
+ if (!s) return null;
+ // 유효하지 않은 값 필터링 (LOCAL, null 등)
+ if (s.toUpperCase() === 'LOCAL' || s === 'null' || s === 'undefined')
+ return null;
+ // LOCAL/로 시작하는 경우 처리 (예: LOCAL/https:/picsum.photos/202)
+ if (s.toUpperCase().startsWith('LOCAL/')) {
+ const afterLocal = s.substring(6); // 'LOCAL/'.length = 6
+ // LOCAL/ 뒤에 실제 URL이 있는 경우
+ if (
+ afterLocal.startsWith('http://') ||
+ afterLocal.startsWith('https://')
+ ) {
+ return afterLocal;
+ }
+
+ // LOCAL/ 뒤에 유효하지 않은 값인 경우
+ return null;
+ }
+ if (
+ s.startsWith('http://') ||
+ s.startsWith('https://') ||
+ s.startsWith('/')
+ )
+ return s;
+
+ return `/${s}`;
+ }, [src]);
+
+ const [broken, setBroken] = useState(false);
+ const finalSrc =
+ !broken && normalizedSrc ? normalizedSrc : '/profile-default.svg';
+
+ return (
+ setBroken(true)}
+ />
+ );
+};
diff --git a/src/components/ui/toast.tsx b/src/components/ui/toast.tsx
new file mode 100644
index 00000000..3c231840
--- /dev/null
+++ b/src/components/ui/toast.tsx
@@ -0,0 +1,52 @@
+'use client';
+
+import { CheckCircle2 } from 'lucide-react';
+import React, { useEffect } from 'react';
+import { cn } from '@/components/ui/(shadcn)/lib/utils';
+
+interface ToastProps {
+ message: string;
+ isVisible: boolean;
+ onClose: () => void;
+ duration?: number;
+}
+
+export default function Toast({
+ message,
+ isVisible,
+ onClose,
+ duration = 3000,
+}: ToastProps) {
+ useEffect(() => {
+ if (isVisible) {
+ const timer = setTimeout(() => {
+ onClose();
+ }, duration);
+
+ return () => clearTimeout(timer);
+ }
+ }, [isVisible, duration, onClose]);
+
+ if (!isVisible) return null;
+
+ return (
+
+
+ {message}
+
+ );
+}
diff --git a/src/components/voting/daily-stats-chart.tsx b/src/components/voting/daily-stats-chart.tsx
new file mode 100644
index 00000000..1b421946
--- /dev/null
+++ b/src/components/voting/daily-stats-chart.tsx
@@ -0,0 +1,211 @@
+import { TrendingUp, TrendingDown, Minus } from 'lucide-react';
+import React from 'react';
+import { cn } from '@/components/ui/(shadcn)/lib/utils';
+import { DailyStatistic, VotingOption } from '@/types/voting';
+
+interface DailyStatsChartProps {
+ dailyStats: DailyStatistic[];
+ options: VotingOption[];
+ myVote?: number;
+}
+
+const OPTION_COLORS = [
+ {
+ bg: 'bg-blue-500',
+ light: 'bg-blue-100',
+ text: 'text-blue-600',
+ hex: '#3b82f6',
+ },
+ {
+ bg: 'bg-green-500',
+ light: 'bg-green-100',
+ text: 'text-green-600',
+ hex: '#22c55e',
+ },
+ {
+ bg: 'bg-purple-500',
+ light: 'bg-purple-100',
+ text: 'text-purple-600',
+ hex: '#a855f7',
+ },
+ {
+ bg: 'bg-orange-500',
+ light: 'bg-orange-100',
+ text: 'text-orange-600',
+ hex: '#f97316',
+ },
+ {
+ bg: 'bg-pink-500',
+ light: 'bg-pink-100',
+ text: 'text-pink-600',
+ hex: '#ec4899',
+ },
+];
+
+export default function DailyStatsChart({
+ dailyStats,
+ options,
+ myVote,
+}: DailyStatsChartProps) {
+ if (!dailyStats || dailyStats.length === 0) return null;
+
+ // 내가 선택한 옵션의 추이 계산
+ const myOptionTrend =
+ myVote && dailyStats.length > 1
+ ? (dailyStats[dailyStats.length - 1].percentages[myVote] || 0) -
+ (dailyStats[0].percentages[myVote] || 0)
+ : null;
+
+ // 최대값 찾기 (차트 높이 계산용)
+ const maxPercentage = Math.max(
+ ...dailyStats.flatMap((stat) => Object.values(stat.percentages)),
+ );
+
+ return (
+
+
+ 일별 투표 추이
+
+
+ {/* 내 선택 추세 */}
+ {myVote && myOptionTrend !== null && (
+
0 && 'bg-green-50',
+ myOptionTrend < 0 && 'bg-red-50',
+ myOptionTrend === 0 && 'bg-gray-50',
+ )}
+ >
+
+ {myOptionTrend > 0 && (
+
+ )}
+ {myOptionTrend < 0 && (
+
+ )}
+ {myOptionTrend === 0 && }
+
+
+
+ 내가 선택한 의견이 어제보다{' '}
+ {myOptionTrend > 0 && (
+
+ +{myOptionTrend.toFixed(1)}%p 증가
+
+ )}
+ {myOptionTrend < 0 && (
+
+ {myOptionTrend.toFixed(1)}%p 감소
+
+ )}
+ {myOptionTrend === 0 && (
+ 변화 없음
+ )}
+
+
+ {options.find((opt) => opt.id === myVote)?.label}
+
+
+
+ )}
+
+ {/* 차트 */}
+
+
+ {/* Y축 레이블 */}
+
+ {maxPercentage.toFixed(0)}%
+ {(maxPercentage * 0.75).toFixed(0)}%
+ {(maxPercentage * 0.5).toFixed(0)}%
+ {(maxPercentage * 0.25).toFixed(0)}%
+ 0%
+
+
+ {/* 그리드 라인 */}
+
+ {[0, 25, 50, 75, 100].map((_, index) => (
+
+ ))}
+
+
+ {/* 라인 차트 */}
+
+
+
+ {/* X축 레이블 */}
+
+ {dailyStats.map((stat, index) => (
+
+ {stat.date}
+
+ ))}
+
+
+
+ {/* 범례 */}
+
+ {options.map((option, index) => {
+ const color = OPTION_COLORS[index % OPTION_COLORS.length];
+ const isMyVote = myVote === option.id;
+
+ return (
+
+ );
+ })}
+
+
+ {sortedOptions.map((option, index) => {
+ const isMyVote = myVote === option.id;
+ const isTopVote = option.id === topOption.id;
+ const colorIndex = options.findIndex((opt) => opt.id === option.id);
+ const colors = OPTION_COLORS[colorIndex % OPTION_COLORS.length];
+ const rank = index + 1;
+
+ return (
+
+ {/* 배경 그라데이션 프로그레스 바 */}
+
+
+ {/* 컨텐츠 */}
+
+ {/* 왼쪽: 순위 + 옵션명 + 내 투표 표시 */}
+
+ {/* 순위 배지 */}
+
+ {isTopVote ? : rank}
+
+
+
+ {/* 옵션 라벨 */}
+
+
+ {option.label}
+
+
+ {/* 내가 투표한 항목 표시 */}
+ {isMyVote && (
+
+
+
+ 내 선택
+
+
+ )}
+
+ {/* 1위 표시 */}
+ {isTopVote && (
+
+
+
+ 1위
+
+
+ )}
+
+
+ {/* 투표 수 */}
+
+ {option.voteCount.toLocaleString()}명이 선택
+
+
+
+
+ {/* 오른쪽: 퍼센트 */}
+ {showPercentage && (
+
+
+ {option.percentage.toFixed(1)}%
+
+
+
+ )}
+
+
+ {/* 호버 효과용 빛나는 테두리 */}
+ {!isMyVote && (
+
+ )}
+
+ );
+ })}
+
+ {/* 총 투표 수 - 더 강조된 디자인 */}
+
+
+
+
+
+
+ 총 투표 참여
+
+
+ {totalVotes.toLocaleString()}명
+
+
+
+
+
+ 종료된 투표
+
+ );
+ }
+
+ if (!endsAt) {
+ return (
+
+
+ 진행 중
+
+ );
+ }
+
+ if (!timeLeft) {
+ return (
+
+
+ 종료
+
+ );
+ }
+
+ return (
+
+
+
+ 남은 시간
+
+ {timeLeft.days > 0 && (
+ <>
+ {timeLeft.days}일
+ :
+
+ )}
+ {String(timeLeft.hours).padStart(2, '0')}
+ :
+ {String(timeLeft.minutes).padStart(2, '0')}
+ :
+ {String(timeLeft.seconds).padStart(2, '0')}
+
+
+
+
+ {/* 헤더 */}
+
+
+ {/* 라운드 & 상태 */}
+
+
+
+
+ {voting.round} 라운드
+
+
+
+
+
+ {/* 제목 */}
+
+ {voting.title}
+
+
+ {/* 작성자 정보 */}
+
e.stopPropagation()}>
+
+
+
+
+
+ {voting.author.nickname}
+
+
+ }
+ />
+
+
+ {/* 설명 토글 */}
+ {voting.description && (
+
+ )}
+
+ {showDescription && voting.description && (
+
+ {voting.description}
+
+ )}
+
+ {/* 태그 */}
+ {voting.tags &&
+ Array.isArray(voting.tags) &&
+ voting.tags.length > 0 && (
+
+ {voting.tags.map((tag, index) => (
+
+ #{tag}
+
+ ))}
+
+ )}
+
+
+ {/* 닫기 버튼 */}
+
+
+
+ {/* 본문 */}
+
+ {/* 투표 섹션 */}
+ {!hasVoted && voting.isActive ? (
+
+
+ 투표해주세요
+
+
+ {voting.options.map((option) => (
+
+ ))}
+
+
+
+
+ ) : (
+
+
+ 투표 결과
+
+
+
+ )}
+
+ {/* 댓글 섹션 */}
+
+
+
+ 댓글 {voting.commentCount}
+
+
+ {/* 투표 안 했으면 댓글 작성 불가 안내 */}
+ {!hasVoted && voting.isActive ? (
+
+
+ 투표 후 댓글을 작성할 수 있습니다
+
+
+ ) : (
+ <>
+ {/* 댓글 목록 */}
+
+
+ onDeleteComment?.(voting.id, commentId)
+ }
+ />
+
+
+ {/* 댓글 작성 폼 */}
+ {voting.isActive && (
+
+
+
+ )}
+
+ )}
+
+
+
+
+
+ 데이터를 불러오는데 실패했습니다.
+
+
+
+
+ {/* 뒤로가기 버튼 */}
+
+
+ {/* 헤더 */}
+
+ {/* 작성자 & 상태 */}
+
+ {/* 작성자 정보 */}
+
e.stopPropagation()}>
+
+
+
+
+
+ {voting.author.nickname}
+
+
+ }
+ />
+
+
+ {/* 우측 컨트롤: 타이머 + 작성자 메뉴 (겹침 방지) */}
+
+
+
+ {isAuthor && (
+
+
+
+ {isMenuOpen && (
+ <>
+
setIsMenuOpen(false)}
+ />
+
+
+
+
+
+ )}
+
+ )}
+
+
+
+ {/* 제목 */}
+
{voting.title}
+
+ {/* 태그 - 제목 바로 아래에 표시 */}
+ {voting.tags &&
+ Array.isArray(voting.tags) &&
+ voting.tags.length > 0 && (
+
+ {voting.tags.map((tag, index) => (
+
+ #{tag}
+
+ ))}
+
+ )}
+
+ {/* 설명 */}
+ {voting.description && (
+
+ {voting.description}
+
+ )}
+
+
+ {/* 투표 섹션 */}
+
+ {showVoteOptions ? (
+ <>
+ {/* 헤더 */}
+
+
+ 투표해주세요
+
+
+ {/* 현재 투표 참여 인원 */}
+
+
+
+
+
+
+ 현재 참여
+
+
+ {voting.totalVotes.toLocaleString()}명
+
+
+
+
+
+ {/* 선택지 */}
+
+ {voting.options.map((option, index) => {
+ const isSelected = selectedOption === option.id;
+ const colors = [
+ {
+ border: 'border-blue-500',
+ bg: 'bg-blue-50',
+ text: 'text-blue-600',
+ ring: 'ring-blue-500',
+ primary: 'bg-blue-500',
+ },
+ {
+ border: 'border-green-500',
+ bg: 'bg-green-50',
+ text: 'text-green-600',
+ ring: 'ring-green-500',
+ primary: 'bg-green-500',
+ },
+ {
+ border: 'border-purple-500',
+ bg: 'bg-purple-50',
+ text: 'text-purple-600',
+ ring: 'ring-purple-500',
+ primary: 'bg-purple-500',
+ },
+ {
+ border: 'border-orange-500',
+ bg: 'bg-orange-50',
+ text: 'text-orange-600',
+ ring: 'ring-orange-500',
+ primary: 'bg-orange-500',
+ },
+ {
+ border: 'border-pink-500',
+ bg: 'bg-pink-50',
+ text: 'text-pink-600',
+ ring: 'ring-pink-500',
+ primary: 'bg-pink-500',
+ },
+ ];
+ const color = colors[index % colors.length];
+
+ return (
+
+ );
+ })}
+
+
+ {/* 투표하기 버튼 */}
+
+
+ ) : (
+ <>
+
+
투표 결과
+ {isActive && hasVoted && (
+
+ )}
+
+
+
+ )}
+
+
+ {/* 일별 통계 (투표 후에만 표시) */}
+ {hasVoted && voting.dailyStats && voting.dailyStats.length > 0 && (
+
+
+
+ )}
+
+ {/* 댓글 섹션 */}
+
+
+
+ 댓글 {voting.commentCount || 0}
+
+
+ {/* 댓글 목록 (항상 표시) */}
+
+
+
+ {hasNextPage && (
+
+ )}
+
+
+ {/* 댓글 작성 폼 */}
+ {isActive && (
+ <>
+ {!hasVoted ? (
+
+
+ 투표 후 댓글을 작성할 수 있습니다
+
+
+ ) : editingCommentId === null ? (
+
+
+
+ ) : null}
+
+ )}
+
+
+ {/* 수정 모달 */}
+
setIsEditModalOpen(false)}
+ onSubmit={handleUpdateGame}
+ initialData={voting}
+ />
+
+ {/* 삭제 확인 모달 */}
+
+
+
+
+
+ 투표 주제를 삭제하시겠습니까?
+
+
+
+ 작성하신 투표 주제가 영구적으로 삭제됩니다.
+
+
+
+
+
+
+
+
+
+
+
+ {/* 헤더 */}
+
+
투표 주제 수정하기
+
+
+
+ {/* 폼 */}
+
+
+
+
+
+ 🧪 개발자 테스트 로그인
+
+
+
+ setTestMemberId(e.target.value)}
+ placeholder="Member ID"
+ className="border-border-default focus:ring-fill-brand-default-default w-full max-w-[120px] rounded-md border px-3 py-1 text-sm focus:ring-2 focus:outline-none"
+ min="1"
+ />
+
+
+
+ * 로컬/개발 환경에서만 보입니다 (Member ID 입력)
+
+
+
+
+
+
+
+
+
+ onSearchChange(e.target.value)}
+ className="rounded-100 border-border-subtle bg-background-default font-designer-14m focus:border-border-default focus:ring-fill-neutral-default-default h-600 w-full border pr-500 pl-200 transition-all outline-none focus:ring-2"
+ />
+
+
+
+
+
+
+
+
+
+
+
+ {ARCHIVE_SORT_OPTIONS.map((option) => (
+
+ ))}
+
+
+
+
+
+
+
+
+
+
+
+
+
+
onView(item)}
+ className={cn(
+ 'rounded-200 border-border-subtle bg-background-default shadow-1 hover:shadow-2 flex h-full cursor-pointer flex-col gap-250 border p-400 transition-all hover:-translate-y-50',
+ isHidden && 'opacity-50',
+ )}
+ >
+
+
+ {isHidden && (
+
+ 숨김됨
+
+ )}
+
+
+ {isAdmin && onHide && (
+
+ )}
+
+
+
+
+
+
+ {item.title}
+
+
+
+
+
+ by{' '}
+ {item.author}
+
+
+
+
+ {item.views.toLocaleString()}
+
+
+
+
+
+ {items.map((item) => (
+
+ ))}
+
+ );
+}
diff --git a/src/features/study/one-to-one/archive/ui/archive-header.tsx b/src/features/study/one-to-one/archive/ui/archive-header.tsx
new file mode 100644
index 00000000..aa5a0dfe
--- /dev/null
+++ b/src/features/study/one-to-one/archive/ui/archive-header.tsx
@@ -0,0 +1,33 @@
+import { LibraryBig } from 'lucide-react';
+import { cn } from '@/components/ui/(shadcn)/lib/utils';
+
+interface ArchiveHeaderProps {
+ isAdmin: boolean;
+ onToggleAdmin: () => void;
+}
+
+export default function ArchiveHeader({
+ isAdmin,
+ onToggleAdmin,
+}: ArchiveHeaderProps) {
+ return (
+
+
+ 제로원 아카이브
+
+
+
+
+
+ );
+}
diff --git a/src/features/study/one-to-one/archive/ui/archive-list.tsx b/src/features/study/one-to-one/archive/ui/archive-list.tsx
new file mode 100644
index 00000000..8d452997
--- /dev/null
+++ b/src/features/study/one-to-one/archive/ui/archive-list.tsx
@@ -0,0 +1,146 @@
+import { Bookmark, Eye, Heart, Search } from 'lucide-react';
+import React from 'react';
+import { cn } from '@/components/ui/(shadcn)/lib/utils';
+import { ArchiveItem } from '@/types/archive';
+
+interface ArchiveListProps {
+ items: ArchiveItem[];
+ isAdmin: boolean;
+ onLike: (e: React.MouseEvent, id: number) => void;
+ onView: (item: ArchiveItem) => void;
+ onBookmark: (e: React.MouseEvent, id: number) => void;
+ onHide?: (e: React.MouseEvent, id: number) => void;
+}
+
+const LibraryRow = ({
+ item,
+ onLike,
+ onView,
+ onBookmark,
+ onHide,
+ isAdmin,
+}: {
+ item: ArchiveItem;
+ onLike: (e: React.MouseEvent, id: number) => void;
+ onView: (item: ArchiveItem) => void;
+ onBookmark: (e: React.MouseEvent, id: number) => void;
+ onHide?: (e: React.MouseEvent, id: number) => void;
+ isAdmin?: boolean;
+}) => {
+ const isHidden = (item as any).isHidden;
+
+ return (
+ onView(item)}
+ className={cn(
+ 'group border-border-subtlest hover:bg-fill-neutral-subtle-hover flex cursor-pointer items-center gap-300 border-b px-300 py-200 transition-colors last:border-0',
+ isHidden && 'opacity-50',
+ )}
+ >
+
+
+
+ {item.title}
+
+ {isHidden && (
+
+ 숨김됨
+
+ )}
+
+
+ {item.author}
+
+ {item.date}
+
+
+
+
+ {isAdmin && onHide && (
+
+ )}
+
+
+
+
+ {item.views.toLocaleString()}
+
+
+
+
+
+
+ {items.map((item) => (
+
+ ))}
+
+
+
setIsAdmin(!isAdmin)}
+ />
+
+
+ setShowBookmarkedOnly(!showBookmarkedOnly)
+ }
+ />
+
+ {isLoading ? (
+
+ ) : (
+ <>
+ {/* Library Content */}
+ {viewMode === ARCHIVE_VIEW_MODES.GRID ? (
+
+ ) : (
+
+ )}
+
+ )}
+
+ {/* Pagination */}
+ {totalPages > 1 && (
+
+
setCurrentPage(Math.max(1, currentPage - 1))}
+ disabled={currentPage === 1}
+ >
+
+
+
+ {currentPage} / {totalPages}
+
+
+ setCurrentPage(Math.min(totalPages, currentPage + 1))
+ }
+ disabled={currentPage === totalPages}
+ >
+
+
+
+
+
+
+ 데이터를 불러오는데 실패했습니다.
+
+
+
+
+
+ {/* 사이드바 + 메인 컨텐츠 */}
+
+ {/* Left Sidebar */}
+
+
+ {/* Main Content */}
+
+ {/* 헤더 */}
+
+
+ 선택하고, 의견을 나눠보세요
+
+
+ 다양한 주제에 투표하고 댓글로 자유롭게 토론할 수 있습니다.
+
+
+ {/* 필터(상태) + 정렬 */}
+
+
setStatusFilter('active')}
+ >
+ 진행 중
+
+
setStatusFilter('closed')}
+ >
+ 종료됨
+
+
setStatusFilter('all')}
+ >
+ 전체
+
+
+ {/* divider */}
+
+
+
setSortMode('latest')}
+ >
+ 최신순
+
+
setSortMode('popular')}
+ >
+ 인기순
+
+
+
+ {/* 주제 생성 버튼 */}
+
+
+ {votings.map((voting) => (
+
+ ))}
+
+
+ {/* 무한 스크롤 로딩 */}
+
+ {isFetchingNextPage && (
+
+ )}
+ {!hasNextPage && votings.length > 0 && (
+
+ 더 이상 불러올 투표가 없습니다.
+
+ )}
+
+
+
+
+
+
+ );
+ }
+
+ // 로딩 상태 (첫 로드만)
+ if (isPending) {
+ return (
+
+ );
+ }
+
+ // 에러 상태
+ if (status === 'error') {
+ return (
+
+
+
+
+ 데이터를 불러오는데 실패했습니다.
+
+
+
+
+ {/* Header */}
+
+
+ 밸런스게임
+
+
+
+
+ {/* 헤더 설명 */}
+
+
+ 다양한 주제에 투표하고 댓글로 자유롭게 토론할 수 있습니다.
+
+
+
+ {/* 필터 + 주제 생성 버튼 */}
+
+ {/* 필터(상태) + 정렬 */}
+
+
setStatusFilter('active')}
+ >
+ 진행 중
+
+
setStatusFilter('closed')}
+ >
+ 종료됨
+
+
setStatusFilter('all')}
+ >
+ 전체
+
+
+ {/* divider */}
+
+
+ {/* Sort Dropdown */}
+
+
+
+ {/* Dropdown */}
+
+
+
+
+
+
+
+
+
+ {/* 주제 생성 버튼 */}
+
+
+
+ {/* 투표 목록 */}
+ {votings.length === 0 ? (
+
+
+
+
+ 투표가 없습니다
+
+
+ 곧 새로운 투표가 등록될 예정입니다
+
+
+
+ ) : (
+ <>
+
+ {votings.map((voting) => (
+ handleVotingClick(voting.id)}
+ />
+ ))}
+
+
+ {/* 무한 스크롤 트리거 */}
+
+ {isFetchingNextPage && (
+
+
+
+ 불러오는 중...
+
+
+ )}
+ {!hasNextPage && votings.length > 0 && (
+
+ 모든 투표를 불러왔습니다
+
+ )}
+
+
+ )}
+
+ {rank}
+
+ );
+
+ return (
+
+
+
+ );
+};
+
+const MVPTeamCard = ({
+ team,
+ className,
+}: {
+ team: MVPTeam;
+ className?: string;
+}) => {
+ return (
+
+
+
+
+
+
+
+
+ {team.weekDate} MVP 팀
+
+
+ 최고의 스터디 메이트
+
+
+
+
+ {team.members.map((member, index) => (
+
+
+
+
+
+
+ {member.nickname}
+
+
+
+ {index === 0 && (
+
+ &
+
+ )}
+
+ ))}
+
+
+
+
+
+
+ 이번 주 공유한 자료
+
+
+
+
+
+
+
+
+
+
+
+
+
+ {ranker.nickname}
+
+ {ranker.rank === 1 && (
+
+ )}
+
+
+ {ranker.jobs && ranker.jobs.length > 0
+ ? ranker.jobs
+ .map((job) => job.description || job.job || '')
+ .filter(Boolean)
+ .join(', ')
+ : ranker.major}
+
+
+
+ {ranker.scoreLabel}
+
+
+
+
+
+ 명예의 전당을 불러오고 있습니다...
+
+
+
+
+
+ 명예의 전당 정보를 불러오는 중 오류가 발생했습니다.
+
+
+
+ {/* Header */}
+
+
+ 명예의 전당
+
+
+
+
제로원을 빛낸 열정적인 멤버들과 최고의 유저들을 소개합니다.
+
+ 꾸준한 1:1 스터디를 통해 제로원 명예의 전당에 이름을 올려보세요!
+
+
+
+
+
+ {/* Section 1: Top 5 Rankers */}
+
+
+
+
+
+ {TAB_CONFIG[rankingType].icon}
+
+ {TAB_CONFIG[rankingType].label} TOP 5
+
+
+ {baseDate} 기준
+
+
+
+
+ {(Object.keys(TAB_CONFIG) as RankingType[]).map((type) => (
+ setRankingType(type)}
+ >
+
+ {TAB_CONFIG[type].icon}
+
+ {TAB_CONFIG[type].label}
+
+ ))}
+
+
+
+
+ {currentRankers.length > 0 ? (
+ currentRankers.map((ranker) => (
+
+ ))
+ ) : (
+
+ )}
+
+
+
+ {/* Section 2: MVP Team */}
+
+
+
+ 저번 주 스터디 MVP 팀
+
+
+ {data?.mvpTeam ? (
+
+ ) : (
+
+
+ 이번 주 MVP 팀이 없습니다.
+
+
+ )}
+
+
+
+
+
+ 1:1 스터디 기록을 불러오는 중입니다...
+
+
+
+
+ 나의 1:1 스터디 기록
+
+
+
+
+
+
+
+
+
+
+
+ 총 {totalElements}
+ 개의 1:1 스터디 기록이 있습니다.
+
+
+ {viewMode === 'LIST' ? (
+
+
+
날짜
+
오늘의 주제
+
상대방
+
내 역할
+
역할수행여부
+
진행상태
+
링크
+
+
+
+ {historyItems.length > 0 ? (
+ historyItems.map((item) => (
+
+ ))
+ ) : (
+
+
+
+ 아직 1:1 스터디 기록이 없습니다.
+
+
+ )}
+
+
+ ) : (
+
+ )}
+
+ {viewMode === 'LIST' && totalPages > 1 && (
+
+
setCurrentPage(Math.max(1, currentPage - 1))}
+ disabled={currentPage === 1}
+ >
+ ←
+
+
+ {currentPage} / {totalPages}
+
+
+ setCurrentPage(Math.min(totalPages, currentPage + 1))
+ }
+ disabled={currentPage === totalPages}
+ >
+ →
+
+
+ )}
+
+
+ {/* 기존 컴포넌트들을 그대로 사용 - 100% 안전 */}
+
+
+ );
+}
diff --git a/src/features/study/schedule/ui/study-card.tsx b/src/features/study/one-to-one/schedule/ui/study-card.tsx
similarity index 88%
rename from src/features/study/schedule/ui/study-card.tsx
rename to src/features/study/one-to-one/schedule/ui/study-card.tsx
index f0afcf94..065407a0 100644
--- a/src/features/study/schedule/ui/study-card.tsx
+++ b/src/features/study/one-to-one/schedule/ui/study-card.tsx
@@ -2,20 +2,20 @@
import { getMonth, getDay, startOfWeek, getDate } from 'date-fns';
import { useMemo, useState } from 'react';
-import ReservationList from '@/features/study/participation/ui/reservation-list';
import {
useStudyStatusQuery,
- useWeeklyParticipation,
-} from '@/features/study/schedule/model/use-schedule-query';
-import DateSelector from '@/features/study/schedule/ui/data-selector';
-import TodayStudyCard from '@/features/study/schedule/ui/today-study-card';
+ useWeeklyParticipationQuery,
+} from '@/features/study/one-to-one/schedule/model/use-schedule-query';
+import DateSelector from '@/features/study/one-to-one/schedule/ui/data-selector';
+import TodayStudyCard from '@/features/study/one-to-one/schedule/ui/today-study-card';
+import ReservationList from '@/features/study/participation/ui/reservation-list';
import { useAuth } from '@/hooks/common/use-auth';
import {
formatKoreaYMD,
getKoreaDate,
getKoreaDisplayMonday,
} from '@/utils/time';
-import StudyListSection from '../../../../widgets/home/study-list-table';
+import StudyListSection from '@/widgets/home/study-list-table';
// 스터디 주차 구하는 함수
function getWeekly(date: Date): { month: number; week: number } {
@@ -74,11 +74,10 @@ export default function StudyCard() {
const { data: status } = useStudyStatusQuery();
// 인증 API (로그인 한 사용자만 호출)
- const { data: participationData } = useWeeklyParticipation(
+ const { data: participationData } = useWeeklyParticipationQuery(
studyDate,
isLoggedIn,
);
-
const isParticipate = participationData?.isParticipate ?? false;
const displayMonday = useMemo(
diff --git a/src/features/study/schedule/ui/today-study-card.tsx b/src/features/study/one-to-one/schedule/ui/today-study-card.tsx
similarity index 95%
rename from src/features/study/schedule/ui/today-study-card.tsx
rename to src/features/study/one-to-one/schedule/ui/today-study-card.tsx
index e33db149..fd5bf978 100644
--- a/src/features/study/schedule/ui/today-study-card.tsx
+++ b/src/features/study/one-to-one/schedule/ui/today-study-card.tsx
@@ -6,12 +6,12 @@ import UserAvatar from '@/components/ui/avatar';
import Badge from '@/components/ui/badge';
import UserPhoneNumberCopyModal from '@/entities/user/ui/user-phone-number-copy-modal';
import UserProfileModal from '@/entities/user/ui/user-profile-modal';
+import { DailyStudyDetail } from '@/features/study/interview/api/interview-types';
+import { useDailyStudyDetailQuery } from '@/features/study/interview/model/use-interview-query';
+import { getStatusBadge } from '@/features/study/interview/ui/status-badge-map';
+import StudyDoneModal from '@/features/study/interview/ui/study-done-modal';
+import StudyReadyModal from '@/features/study/interview/ui/study-ready-modal';
import { useAuth } from '@/hooks/common/use-auth';
-import { DailyStudyDetail } from '../../interview/api/interview-types';
-import { useDailyStudyDetailQuery } from '../../interview/model/use-interview-query';
-import { getStatusBadge } from '../../interview/ui/status-badge-map';
-import StudyDoneModal from '../../interview/ui/study-done-modal';
-import StudyReadyModal from '../../interview/ui/study-ready-modal';
export default function TodayStudyCard({ studyDate }: { studyDate: string }) {
const { data: authData } = useAuth();
diff --git a/src/features/study/one-to-one/ui/one-on-one-page.tsx b/src/features/study/one-to-one/ui/one-on-one-page.tsx
new file mode 100644
index 00000000..83f6cf78
--- /dev/null
+++ b/src/features/study/one-to-one/ui/one-on-one-page.tsx
@@ -0,0 +1,988 @@
+'use client';
+
+import {
+ Trophy,
+ BookOpen,
+ Flame,
+ FileText,
+ Thermometer,
+ Search,
+ Eye,
+ Heart,
+ Loader2,
+ ChevronUp,
+ ChevronDown,
+ Minus,
+ ChevronLeft,
+ ChevronRight,
+ ExternalLink,
+ LibraryBig,
+ LayoutGrid,
+ List,
+ ArrowUpDown,
+ MessageSquareText,
+} from 'lucide-react';
+import Image from 'next/image';
+import Link from 'next/link';
+import React, { useState, useEffect } from 'react';
+import { cn } from '@/components/ui/(shadcn)/lib/utils';
+import { ProfileAvatar } from '@/components/ui/profile-avatar';
+import UserProfileModal from '@/entities/user/ui/user-profile-modal';
+
+// ----------------------------------------------------------------------
+// Types & Mock Data (Hall of Fame)
+// ----------------------------------------------------------------------
+
+type RankingType = 'ATTENDANCE' | 'STUDY_LOG' | 'SINCERITY';
+
+interface Ranker {
+ rank: number;
+ userId: number;
+ nickname: string;
+ profileImage: string | null;
+ score: number;
+ scoreLabel: string;
+ change?: 'up' | 'down' | 'same';
+ lastActive: string;
+ studyTime: string;
+ major?: string;
+ streak?: number;
+ changeValue?: number;
+}
+
+const JOBS = [
+ 'IT 노베이스 - 비지니스/창업',
+ 'IT 노베이스 - 업무 자동화',
+ 'IT 노베이스 - 내 서비스 개발',
+ 'IT 실무자 - PM/PO/기획',
+ 'IT 실무자 - 프론트엔드',
+ 'IT 실무자 - 백엔드',
+ 'IT 실무자 - AI/머신러닝',
+ 'IT 실무자 - iOS',
+ 'IT 실무자 - 안드로이드',
+ 'IT 실무자 - DevOps',
+ 'IT 실무자 - 데이터 분석',
+ 'IT 실무자 - QA',
+ 'IT 실무자 - 게임 개발',
+ 'IT 실무자 - 디자인',
+ 'IT 실무자 - 마케팅',
+ 'IT 실무자 - 기타',
+];
+
+const generateMockRankers = (type: RankingType): Ranker[] => {
+ return Array.from({ length: 20 }, (_, i) => {
+ const rank = i + 1;
+ let score = 0;
+ let scoreLabel = '';
+
+ if (type === 'ATTENDANCE') {
+ score = 150 - i * 3;
+ scoreLabel = `${score}회`;
+ } else if (type === 'STUDY_LOG') {
+ score = 80 - i * 2;
+ scoreLabel = `${score}건`;
+ } else {
+ score = parseFloat((99.9 - i * 1.5).toFixed(1));
+ scoreLabel = `${score}℃`;
+ }
+
+ const lastActive = i < 3 ? '방금 전' : `${i * 10 + 5}분 전`;
+ const studyTime = `${Math.floor(Math.random() * 40 + 10)}시간`;
+ const streak = Math.floor(Math.random() * 50) + 1;
+ const major = JOBS[Math.floor(Math.random() * JOBS.length)];
+
+ return {
+ rank,
+ userId: 100 + i,
+ nickname: `User_${100 + i}`,
+ profileImage: null as string | null,
+ score,
+ scoreLabel,
+ change:
+ Math.random() > 0.7 ? 'up' : Math.random() > 0.8 ? 'down' : 'same',
+ lastActive,
+ studyTime,
+ major,
+ streak,
+ changeValue: Math.floor(Math.random() * 5),
+ };
+ });
+};
+
+const TAB_CONFIG: Record<
+ RankingType,
+ { label: string; desc: string; icon: React.ReactNode; colorClass: string }
+> = {
+ ATTENDANCE: {
+ label: '불꽃 출석왕',
+ desc: '비가 오나 눈이 오나 자리를 지킨, 제로원의 개근상',
+ icon: ,
+ colorClass: 'text-text-brand',
+ },
+ STUDY_LOG: {
+ label: '열정 기록왕',
+ desc: '제로원의 도서관을 채운, 자료 공유의 신',
+ icon: ,
+ colorClass: 'text-text-information',
+ },
+ SINCERITY: {
+ label: '성실 온도왕',
+ desc: '가장 뜨거운 심장을 가진, 제로원의 신뢰 아이콘',
+ icon: ,
+ colorClass: 'text-text-warning',
+ },
+};
+
+// ----------------------------------------------------------------------
+// Types & Mock Data (Library)
+// ----------------------------------------------------------------------
+
+interface LibraryItem {
+ id: number;
+ title: string;
+ author: string;
+ date: string;
+ views: number;
+ likes: number;
+ link: string;
+ isLiked: boolean;
+}
+
+const MOCK_LIBRARY_DATA: LibraryItem[] = [
+ {
+ id: 1,
+ title: '2025년 상반기 백엔드 개발자 면접 질문 모음 (네카라쿠배)',
+ author: '제로원 운영진',
+ date: '2025.01.10',
+ views: 1250,
+ likes: 342,
+ link: 'https://velog.io',
+ isLiked: true,
+ },
+ {
+ id: 2,
+ title: '프론트엔드 성능 최적화: React 19 도입 가이드',
+ author: 'TechLead_Kim',
+ date: '2025.01.12',
+ views: 890,
+ likes: 120,
+ link: 'https://medium.com',
+ isLiked: false,
+ },
+ {
+ id: 3,
+ title: '비전공자가 6개월 만에 개발자로 취업한 현실적인 공부법',
+ author: 'NewDeveloper',
+ date: '2025.01.05',
+ views: 2100,
+ likes: 560,
+ link: 'https://brunch.co.kr',
+ isLiked: true,
+ },
+ {
+ id: 4,
+ title: 'CS 기초: 운영체제와 네트워크 핵심 요약 (PDF 다운로드)',
+ author: 'CS_Master',
+ date: '2024.12.28',
+ views: 1500,
+ likes: 410,
+ link: 'https://tistory.com',
+ isLiked: false,
+ },
+ {
+ id: 5,
+ title: '주니어 개발자를 위한 이력서 첨삭 가이드 101',
+ author: 'HR_Manager',
+ date: '2025.01.15',
+ views: 750,
+ likes: 230,
+ link: 'https://linkedin.com',
+ isLiked: false,
+ },
+ ...Array.from({ length: 10 }, (_, i) => ({
+ id: 10 + i,
+ title: `개발자 면접 대비 - 자료구조 핵심 질문 ${i + 1}탄`,
+ author: 'Admin',
+ date: `2024.12.${20 - i}`,
+ views: 100 + i * 10,
+ likes: 10 + i,
+ link: 'https://google.com',
+ isLiked: Math.random() > 0.5,
+ })),
+];
+
+// ----------------------------------------------------------------------
+// Components
+// ----------------------------------------------------------------------
+
+const RankBadge = ({ rank }: { rank: number }) => {
+ const iconPath =
+ rank === 1
+ ? '/icons/gold-rank.svg'
+ : rank === 2
+ ? '/icons/silver-rank.svg'
+ : '/icons/bronze-rank.svg';
+
+ return (
+
+
+
+ );
+};
+
+const RankChangeIndicator = ({
+ change,
+ value,
+}: {
+ change?: 'up' | 'down' | 'same';
+ value?: number;
+}) => {
+ if (change === 'same' || !value) {
+ return ;
+ }
+ if (change === 'up') {
+ return (
+
+
+ {value}
+
+ );
+ }
+
+ return (
+
+
+ {value}
+
+ );
+};
+
+const TopRankerCard = ({ ranker }: { ranker: Ranker }) => {
+ const isFirst = ranker.rank === 1;
+
+ return (
+
+ {isFirst && (
+
+
+
+ )}
+
+
+
+
+ {!isFirst && (
+
+
+
+ )}
+
+ {ranker.nickname}
+
+
+
+
+ {parseInt(ranker.scoreLabel.replace(/[^0-9.]/g, ''))}
+
+
+ {ranker.scoreLabel.replace(/[0-9.]/g, '')}
+
+
+
+
+
+
+ 최근 활동
+
+ {ranker.lastActive}
+
+
+
+
+ 누적 학습
+
+ {ranker.studyTime}
+
+
+
onView(item.link)}
+ className="group rounded-200 border-border-subtle bg-background-default hover:shadow-2 hover:border-border-default flex cursor-pointer flex-col gap-200 border p-400 transition-all hover:-translate-y-50"
+ >
+
+
+ {item.date}
+
+
+
+
+
+ {item.title}
+
+
+
+
+ by{' '}
+ {item.author}
+
+
+
+
+ {item.views.toLocaleString()}
+
+
+
+
+
onView(item.link)}
+ className="group border-border-subtlest hover:bg-fill-neutral-subtle-hover flex cursor-pointer items-center gap-300 border-b px-300 py-200 transition-colors last:border-0"
+ >
+ {/* Title Area */}
+
+
+ {item.title}
+
+
+ {item.author}
+
+ {item.date}
+
+
+
+ {/* Stats Area - Hidden on very small screens if needed, but flex-wrap handles it */}
+
+
+
+ {item.views.toLocaleString()}
+
+
+
+
+
+
+ {/* Left Sidebar (Tabs) */}
+
+
+ {/* Main Content Area */}
+
+
+ {/* Header Area */}
+
+
+ {activeTab === 'RANKING' && '명예의 전당'}
+ {activeTab === 'LIBRARY' && '제로원 도서관'}
+
+ {activeTab === 'RANKING' && (
+
+ )}
+ {activeTab === 'LIBRARY' && (
+
+ )}
+
+
+
+ {/* Filters & Search */}
+
+ {activeTab === 'RANKING' && (
+
+ {(Object.keys(TAB_CONFIG) as RankingType[]).map((type) => (
+
+ ))}
+
+ )}
+
+
+ {/* 1. Total Count (Left) */}
+ {activeTab === 'LIBRARY' && (
+
+ 총{' '}
+
+ {totalItems}
+
+ 개의 자료가 있습니다.
+
+ )}
+
+ {/* Right Side Controls */}
+
+ {activeTab === 'RANKING' && (
+
+ )}
+
+ {/* 2. Search Bar (Center/Right) */}
+
+ setSearchTerm(e.target.value)}
+ className="rounded-100 border-border-subtle bg-background-default font-designer-14m focus:border-border-default focus:ring-fill-neutral-default-default h-600 w-full border pr-500 pl-200 transition-all outline-none focus:ring-2"
+ />
+
+
+
+
+
+ {/* 3. Sort & View Toggle (Right End - Library Only) */}
+ {activeTab === 'LIBRARY' && (
+
+ {/* Sort Dropdown */}
+
+
+
+ {/* Dropdown Wrapper - Invisible Bridge */}
+
+ {/* Visual Dropdown */}
+
+
+
+
+
+
+
+
+
+
+ {/* View Mode Toggle */}
+
+
+
+
+
+ )}
+
+
+
+
+ {isLoading ? (
+
+
+
+ 데이터를 불러오는 중입니다...
+
+
+ ) : activeTab === 'RANKING' ? (
+ <>
+ {/* Top 3 Section */}
+ {filteredRankers.length > 0 && (
+
+ {filteredRankers[1] && (
+
+
+
+ )}
+ {filteredRankers[0] && (
+
+
+
+ )}
+ {filteredRankers[2] && (
+
+
+
+ )}
+
+ )}
+
+ {/* Ranking Table */}
+
+
+
+ Rank
+
+
Member
+
+ Score
+
+
+ Activity
+
+
+
+
+ {currentRankers.map((ranker) => (
+
+
+
+ {ranker.rank}
+
+
+
+
+
+
+
+ {ranker.nickname}
+
+
+ {ranker.major}
+
+
+
+
+ {ranker.scoreLabel}
+
+
+ 상위 1%
+
+
+
+ {ranker.studyTime} 누적
+
+
+ 최근: {ranker.lastActive}
+
+
+ }
+ />
+ ))}
+
+
+ {currentLibrary.length > 0 ? (
+ currentLibrary.map((item) => (
+
+ ))
+ ) : (
+
+ )}
+
+ {currentLibrary.length > 0 ? (
+
+ {currentLibrary.map((item) => (
+
+ ))}
+
+ ) : (
+
+ )}
+
+
+
+ {currentPage} / {totalPages}
+
+
+
+ )}
+
+
+
+ {/* 상단 프로필 바 */}
+
+
+
+
+
+ {userProfile.sincerityTemp.temperature.toFixed(1)}℃
+
+
+
+
+
+
+ {userProfile?.memberProfile.nickname || '비회원'}님
+
+
+ {userProfile.studyApplied ? '스터디 참여중' : '스터디 대기중'}
+
+
+
+ {userProfile?.memberProfile.simpleIntroduction ||
+ '오늘도 힘차게 공부해봐요! 🔥'}
+
+
+
+
+
+
+ 설정
+
+
+
+ {/* 메인 대시보드 그리드 */}
+
+ {/* 1. 스터디 정보 카드 */}
+
+
+
+
+
+
+ 선호 주제
+
+
+ {subject}
+
+
+
+
+ 가능 시간
+
+
+ {timeSlots}
+
+
+
+
+ 기술 스택
+
+
+
+ {techStacks}
+
+ {extraTechCount > 0 && (
+
+ +{extraTechCount}
+
+ )}
+
+
+
+
+
+ {/* 2. 액션 센터 */}
+
+ {userProfile.studyApplied ? (
+ <>
+
+
+
+
+ ) : (
+ <>
+
+
+
+
+
+
+ CS 스터디 시작하기
+
+
+ 매일 아침 1:1 매칭으로 루틴 만들기
+
+
+
+
+
+
+
+ {/* 3. 피드백 & 퀵 액션 */}
+
+
+
+
+
+ {/* 추가 퀵 스탯 */}
+
+
+
+