feat: 커뮤니티 소개 타임테이블 추가

Author: cpprhtn

src/components/CommunityItem.jsx

@@ -4,7 +4,7 @@ import "./CommunityItem.css";
 
 function CommunityItem({ community }) {
   const { i18n } = useTranslation();
-  const isEn = i18n.language === "en";
+  const isEn = i18n.language?.startsWith("en");
   const name = isEn ? community.name.en : community.name.ko;
 
   return (

src/components/TimetableList.jsx

@@ -3,23 +3,24 @@ import { Link } from 'react-router-dom';
 import { speakerAvatars } from '../data/speakerAvatars';
 import './TimetableList.css';
 
-function SessionCell({ title, speaker, code }) {
+function SessionCell({ title, speaker, speakerEn, code, isEn }) {
   const avatarUrl = code ? speakerAvatars[code] : null;
+  const speakerLabel = isEn && speakerEn != null ? speakerEn : speaker;
 
   const body = (
     <div className="tt-session">
       <div className="tt-session-title">{title}</div>
-      {speaker && (
+      {speakerLabel && (
         <div className={`tt-session-speaker ${avatarUrl ? 'has-avatar' : ''}`}>
           {avatarUrl && (
             <img
               className="tt-session-avatar"
               src={avatarUrl}
-              alt={speaker}
+              alt={speakerLabel}
               loading="lazy"
             />
           )}
-          <span>{speaker}</span>
+          <span>{speakerLabel}</span>
         </div>
       )}
     </div>
@@ -50,7 +51,7 @@ function TimeRange({ start, end }) {
 
 function TimetableList({ sessions }) {
   const { i18n } = useTranslation();
-  const isEn = i18n.language === 'en';
+  const isEn = i18n.language?.startsWith('en');
 
   const title = (row) => (isEn && row.titleEn != null ? row.titleEn : row.title);
   const roomTitle = (room) => (isEn && room.titleEn != null ? room.titleEn : room.title);
@@ -74,7 +75,13 @@ function TimetableList({ sessions }) {
                     <TimeRange start={row.time} end={row.endTime} />
                   </td>
                   <td className="tt-td tt-cell-full">
-                    <SessionCell title={title(row)} speaker={row.speaker} code={row.code} />
+                    <SessionCell
+                      title={title(row)}
+                      speaker={row.speaker}
+                      speakerEn={row.speakerEn}
+                      code={row.code}
+                      isEn={isEn}
+                    />
                   </td>
                   <td className="tt-td tt-cell-empty"></td>
                 </tr>
@@ -88,10 +95,22 @@ function TimetableList({ sessions }) {
                     <TimeRange start={row.time} end={row.endTime} />
                   </td>
                   <td className="tt-td tt-cell-session">
-                    <SessionCell title={roomTitle(row.room1)} speaker={row.room1.speaker} code={row.room1.code} />
+                    <SessionCell
+                      title={roomTitle(row.room1)}
+                      speaker={row.room1.speaker}
+                      speakerEn={row.room1.speakerEn}
+                      code={row.room1.code}
+                      isEn={isEn}
+                    />
                   </td>
                   <td className="tt-td tt-cell-session">
-                    <SessionCell title={roomTitle(row.room2)} speaker={row.room2.speaker} code={row.room2.code} />
+                    <SessionCell
+                      title={roomTitle(row.room2)}
+                      speaker={row.room2.speaker}
+                      speakerEn={row.room2.speakerEn}
+                      code={row.room2.code}
+                      isEn={isEn}
+                    />
                   </td>
                 </tr>
               );

src/data/schedule.js

@@ -20,6 +20,7 @@ export const schedule = [
     title: '오프닝',
     titleEn: 'Opening',
     speaker: '준비위원회',
+    speakerEn: 'Organizing Committee',
   },
   {
     time: '10:10',
@@ -50,6 +51,16 @@ export const schedule = [
   },
   {
     time: '11:50',
+    endTime: '12:20',
+    type: 'full',
+    code: 'community-intro',
+    title: '커뮤니티 소개',
+    titleEn: 'Community Introduction',
+    speaker: '준비위원회',
+    speakerEn: 'Organizing Committee',
+  },
+  {
+    time: '12:20',
     type: 'break',
     title: '점심 시간',
     titleEn: 'Lunch Break',
@@ -190,6 +201,7 @@ export function findSessionByCode(code) {
         title: row.title,
         titleEn: row.titleEn,
         speaker: row.speaker,
+        speakerEn: row.speakerEn,
         abstract: row.abstract,
         tag: row.tag,
         time: row.time,
@@ -210,6 +222,7 @@ export function findSessionByCode(code) {
             title: r.title,
             titleEn: r.titleEn,
             speaker: r.speaker,
+            speakerEn: r.speakerEn,
             abstract: r.abstract,
             time: row.time,
             endTime: row.endTime,

src/data/sessionDetails.js

@@ -97,6 +97,15 @@
 
   "timetableHeading": "Timetable",
   "timetableDesc": "May 9, 2026 (Sat) · Busan Centum Venture Town",
+  "timetableDetailBack": "Back to timetable",
+  "timetableDetailNotFoundTitle": "Session not found",
+  "timetableDetailNotFoundDesc": "No information was found for the requested session code {{code}}.",
+  "timetableDetailTime": "Time",
+  "timetableDetailLocation": "Location",
+  "timetableDetailSpeaker": "Speaker",
+  "timetableDetailSessionIntro": "Session Overview",
+  "timetableDetailSpeakerIntro": "Speaker Bio",
+  "timetableDetailPlaceholder": "This information is not ready yet. It will be updated once confirmed.",
 
   "communities": "Open Source Communities",
   "communitiesHeading": "Open Source Communities",

src/locales/en/translation.json

@@ -97,6 +97,15 @@
 
   "timetableHeading": "시간표",
   "timetableDesc": "2026년 5월 9일 (토) · 부산 센텀벤처타운",
+  "timetableDetailBack": "타임테이블로 돌아가기",
+  "timetableDetailNotFoundTitle": "세션을 찾을 수 없습니다",
+  "timetableDetailNotFoundDesc": "요청하신 세션 코드 {{code}} 에 해당하는 정보가 없습니다.",
+  "timetableDetailTime": "시간",
+  "timetableDetailLocation": "장소",
+  "timetableDetailSpeaker": "발표자",
+  "timetableDetailSessionIntro": "세션 소개",
+  "timetableDetailSpeakerIntro": "발표자 소개",
+  "timetableDetailPlaceholder": "해당 정보가 아직 준비되지 않았습니다. 확정되는 대로 업데이트됩니다.",
 
   "communities": "오픈소스 커뮤니티",
   "communitiesHeading": "오픈소스 커뮤니티",

src/locales/kr/translation.json

@@ -6,7 +6,7 @@ import "./CommunityDetail.css";
 function CommunityDetail() {
   const { id } = useParams();
   const { t, i18n } = useTranslation();
-  const isEn = i18n.language === "en";
+  const isEn = i18n.language?.startsWith("en");
 
   const community = communities.find((c) => c.id === id);
 

src/pages/CommunityDetail.jsx

@@ -6,9 +6,6 @@ import { sessionDetails } from "../data/sessionDetails";
 import { speakerAvatars } from "../data/speakerAvatars";
 import "./TimetableDetail.css";
 
-const PLACEHOLDER_TEXT =
-  "해당 정보가 아직 준비되지 않았습니다. 확정되는 대로 업데이트됩니다.";
-
 function TimeRange({ start, end }) {
   if (!start) return <span>TBA</span>;
   if (!end) return <span>{start}</span>;
@@ -26,20 +23,20 @@ function pickLang(valKo, valEn, isEn) {
 
 function TimetableDetail() {
   const { code } = useParams();
-  const { i18n } = useTranslation();
-  const isEn = i18n.language === "en";
+  const { t, i18n } = useTranslation();
+  const isEn = i18n.language?.startsWith("en");
   const session = findSessionByCode(code);
 
   if (!session) {
     return (
       <div className="tt-detail-page">
         <div className="tt-detail-container">
-          <h1 className="tt-detail-title">세션을 찾을 수 없습니다</h1>
+          <h1 className="tt-detail-title">{t("timetableDetailNotFoundTitle")}</h1>
           <p className="tt-detail-abstract">
-            요청하신 세션 코드 <code>{code}</code> 에 해당하는 정보가 없습니다.
+            {t("timetableDetailNotFoundDesc", { code })}
           </p>
           <Link to="/timetable" className="tt-detail-back">
-            ← 타임테이블로 돌아가기
+            ← {t("timetableDetailBack")}
           </Link>
         </div>
       </div>
@@ -50,7 +47,7 @@ function TimetableDetail() {
   const title =
     isEn && session.titleEn != null ? session.titleEn : session.title;
   const room = isEn ? session.roomEn : session.room;
-  const speakerName = session.speaker || "TBD";
+  const speakerName = isEn && session.speakerEn != null ? session.speakerEn : session.speaker || "TBD";
   const speakerInitial = speakerName.trim().slice(0, 1) || "?";
   const avatarUrl = speakerAvatars[code];
 
@@ -61,7 +58,7 @@ function TimetableDetail() {
     <div className="tt-detail-page">
       <div className="tt-detail-container">
         <Link to="/timetable" className="tt-detail-back">
-          ← 타임테이블로 돌아가기
+          ← {t("timetableDetailBack")}
         </Link>
 
         <header className="tt-detail-header">
@@ -75,28 +72,30 @@ function TimetableDetail() {
 
         <section className="tt-detail-meta">
           <div className="meta-row">
-            <span className="meta-label">시간</span>
+            <span className="meta-label">{t("timetableDetailTime")}</span>
             <span className="meta-value">
               <TimeRange start={session.time} end={session.endTime} />
             </span>
           </div>
           <div className="meta-row">
-            <span className="meta-label">장소</span>
+            <span className="meta-label">{t("timetableDetailLocation")}</span>
             <span className="meta-value">{room}</span>
           </div>
           <div className="meta-row">
-            <span className="meta-label">발표자</span>
+            <span className="meta-label">{t("timetableDetailSpeaker")}</span>
             <span className="meta-value">{speakerName}</span>
           </div>
         </section>
 
         <section className="tt-detail-section">
-          <h2 className="section-heading">세션 소개</h2>
-          <div className="description-box">{description || PLACEHOLDER_TEXT}</div>
+          <h2 className="section-heading">{t("timetableDetailSessionIntro")}</h2>
+          <div className="description-box">
+            {description || t("timetableDetailPlaceholder")}
+          </div>
         </section>
 
         <section className="tt-detail-section">
-          <h2 className="section-heading">발표자 소개</h2>
+          <h2 className="section-heading">{t("timetableDetailSpeakerIntro")}</h2>
           <article className="speaker-card">
             <div className="speaker-avatar">
               {avatarUrl ? (
@@ -109,7 +108,7 @@ function TimetableDetail() {
             </div>
             <div className="speaker-info">
               <h3 className="speaker-name">{speakerName}</h3>
-              <p className="speaker-bio">{bio || PLACEHOLDER_TEXT}</p>
+              <p className="speaker-bio">{bio || t("timetableDetailPlaceholder")}</p>
             </div>
           </article>
         </section>