From 59344d03e9c2924c1ffbd05dc6b46a224162ed39 Mon Sep 17 00:00:00 2001
From: PJW <pyojaewon03@gmail.com>
Date: Sat, 4 Jul 2026 14:49:49 +0900
Subject: [PATCH 1/3] =?UTF-8?q?feat=20:=20WEB-9=20=EA=B4=80=EB=A6=AC?=
 =?UTF-8?q?=EC=9E=90=20=EB=A9=94=EC=9D=B8=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/images/deleteicon.svg             |   3 +
 src/assets/images/editicon.svg               |   3 +
 src/pages/admin/AdminPage.jsx                |  17 +-
 src/pages/visitor/main/ActivitiesSection.jsx | 125 ++++-
 src/pages/visitor/main/RecruitSection.jsx    | 164 +++++--
 src/pages/visitor/main/TimelineSection.jsx   | 474 +++++++++++++++----
 src/stores/homeContentStore.js               |  44 ++
 7 files changed, 678 insertions(+), 152 deletions(-)
 create mode 100644 src/assets/images/deleteicon.svg
 create mode 100644 src/assets/images/editicon.svg
 create mode 100644 src/stores/homeContentStore.js

diff --git a/src/assets/images/deleteicon.svg b/src/assets/images/deleteicon.svg
new file mode 100644
index 0000000..a3058df
--- /dev/null
+++ b/src/assets/images/deleteicon.svg
@@ -0,0 +1,3 @@
+<svg width="25" height="25" viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 18.75L12.5 14.25L17 18.75L18.75 17L14.25 12.5L18.75 8L17 6.25L12.5 10.75L8 6.25L6.25 8L10.75 12.5L6.25 17L8 18.75ZM12.5 25C10.7708 25 9.14584 24.6717 7.625 24.015C6.10417 23.3583 4.78125 22.4679 3.65625 21.3438C2.53125 20.2196 1.64084 18.8967 0.985002 17.375C0.329168 15.8533 0.000834916 14.2283 1.58228e-06 12.5C-0.000831751 10.7717 0.327502 9.14667 0.985002 7.625C1.6425 6.10333 2.53292 4.78042 3.65625 3.65625C4.77958 2.53208 6.1025 1.64167 7.625 0.985C9.1475 0.328333 10.7725 0 12.5 0C14.2275 0 15.8525 0.328333 17.375 0.985C18.8975 1.64167 20.2204 2.53208 21.3438 3.65625C22.4671 4.78042 23.3579 6.10333 24.0163 7.625C24.6746 9.14667 25.0025 10.7717 25 12.5C24.9975 14.2283 24.6692 15.8533 24.015 17.375C23.3608 18.8967 22.4704 20.2196 21.3438 21.3438C20.2171 22.4679 18.8942 23.3587 17.375 24.0162C15.8558 24.6737 14.2308 25.0017 12.5 25ZM12.5 22.5C15.2917 22.5 17.6562 21.5312 19.5938 19.5938C21.5312 17.6562 22.5 15.2917 22.5 12.5C22.5 9.70833 21.5312 7.34375 19.5938 5.40625C17.6562 3.46875 15.2917 2.5 12.5 2.5C9.70833 2.5 7.34375 3.46875 5.40625 5.40625C3.46875 7.34375 2.5 9.70833 2.5 12.5C2.5 15.2917 3.46875 17.6562 5.40625 19.5938C7.34375 21.5312 9.70833 22.5 12.5 22.5Z" fill="#FF6B00"/>
+</svg>
diff --git a/src/assets/images/editicon.svg b/src/assets/images/editicon.svg
new file mode 100644
index 0000000..9bbb489
--- /dev/null
+++ b/src/assets/images/editicon.svg
@@ -0,0 +1,3 @@
+<svg width="19" height="19" viewBox="0 0 19 19" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M18.4479 4.21094C18.8542 3.80469 18.8542 3.1276 18.4479 2.74219L16.0104 0.304688C15.625 -0.101563 14.9479 -0.101563 14.5417 0.304688L12.625 2.21094L16.5312 6.11719M0 14.8464V18.7526H3.90625L15.4271 7.22135L11.5208 3.3151L0 14.8464Z" fill="#FF6B00"/>
+</svg>
diff --git a/src/pages/admin/AdminPage.jsx b/src/pages/admin/AdminPage.jsx
index 6a8b0c0..e3a1ca1 100644
--- a/src/pages/admin/AdminPage.jsx
+++ b/src/pages/admin/AdminPage.jsx
@@ -1,8 +1,21 @@
+import ActivitiesSection from '@/pages/visitor/main/ActivitiesSection';
+import TimelineSection from '@/pages/visitor/main/TimelineSection';
+import RecruitSection from '@/pages/visitor/main/RecruitSection';
+import HeroSection from '../visitor/main/HeroSection';
+
+/**
+ * 관리자 홈 콘텐츠 관리 페이지.
+ * 주요 활동/ONE 활동 현황/신입 부원 모집 섹션을 그대로 재사용한다.
+ * isEditable을 켜서 렌더링하므로, 관리자 로그인 상태(isAuthenticated)일 때만 수정/삭제 아이콘을 노출한다.
+ * 방문자용 HomePage는 isEditable을 넘기지 않아 로그인 여부와 무관하게 항상 일반 화면만 보인다.
+ */
 function AdminPage() {
   return (
     <section>
-      <h2>관리자 페이지</h2>
-      <p>신청 부원 정보, 수상경력, 연간 계획, 동아리 소개, 명부 관리 (CRUD)</p>
+      <HeroSection />
+      <ActivitiesSection isEditable />
+      <TimelineSection isEditable />
+      <RecruitSection isEditable />
     </section>
   );
 }
diff --git a/src/pages/visitor/main/ActivitiesSection.jsx b/src/pages/visitor/main/ActivitiesSection.jsx
index 060b6d0..3cfec47 100644
--- a/src/pages/visitor/main/ActivitiesSection.jsx
+++ b/src/pages/visitor/main/ActivitiesSection.jsx
@@ -1,8 +1,39 @@
+import { useState } from 'react';
 import useScrollReveal from '@/hooks/useScrollReveal';
-import { ACTIVITY_LIST } from '@/constants/homeData';
+import useAuthStore from '@/stores/authStore';
+import useHomeContentStore from '@/stores/homeContentStore';
+import editIcon from '@/assets/images/editicon.svg';
+import deleteIcon from '@/assets/images/deleteicon.svg';
 
-export default function ActivitiesSection() {
+export default function ActivitiesSection({ isEditable = false }) {
   const revealRef = useScrollReveal();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated) && isEditable;
+  const activities = useHomeContentStore((state) => state.activities);
+  const updateActivity = useHomeContentStore((state) => state.updateActivity);
+
+  const [editingIndex, setEditingIndex] = useState(null);
+  const [draftTitle, setDraftTitle] = useState('');
+  const [draftDescription, setDraftDescription] = useState('');
+
+  const startEdit = (index) => {
+    setEditingIndex(index);
+    setDraftTitle(activities[index].title);
+    setDraftDescription(activities[index].description);
+  };
+
+  const handleSaveClick = (index) => {
+    if (!draftTitle.trim() || !draftDescription.trim()) {
+      alert('내용을 입력해 주세요.');
+      return;
+    }
+    updateActivity(index, { title: draftTitle, description: draftDescription });
+    setEditingIndex(null);
+  };
+
+  const handleDeleteContent = (index) => {
+    updateActivity(index, { title: '', description: '' });
+    setEditingIndex((previous) => (previous === index ? null : previous));
+  };
 
   return (
     <section className="py-20 px-6 bg-brand-soft">
@@ -15,27 +46,77 @@ export default function ActivitiesSection() {
 
         {/* 2×2 카드 그리드 */}
         <div className="grid grid-cols-2 gap-5">
-          {ACTIVITY_LIST.map((activity, index) => (
-            <div
-              key={activity.title}
-              ref={revealRef}
-              className="reveal-up bg-white rounded-2xl p-12 border border-[#EDCFBC] flex flex-col items-center text-center"
-              style={{ transitionDelay: `${index * 80}ms` }}
-            >
-              {/* 원형 아이콘 컨테이너 */}
-              <div className="w-24 h-24 rounded-full flex items-center justify-center mb-7 bg-brand-soft">
-                <img
-                  src={activity.icon}
-                  alt={activity.title}
-                  className="w-[100px] h-[100px] object-cover"
-                />
+          {activities.map((activity, index) => {
+            const isEditing = editingIndex === index;
+            return (
+              <div
+                key={index}
+                ref={revealRef}
+                className="reveal-up relative bg-white rounded-2xl p-12 border border-[#EDCFBC] flex flex-col items-center text-center"
+                style={{ transitionDelay: `${index * 80}ms` }}
+              >
+                {isAuthenticated && (
+                  <div className="absolute top-4 right-4 flex items-center gap-3">
+                    <button
+                      type="button"
+                      onClick={() => (isEditing ? handleSaveClick(index) : startEdit(index))}
+                      aria-label={isEditing ? '저장' : '수정'}
+                      className={
+                        isEditing
+                          ? 'rounded-full bg-brand px-3 py-1 text-xs font-bold text-white'
+                          : 'flex h-6 w-6 items-center justify-center rounded-full transition-colors hover:bg-brand-soft'
+                      }
+                    >
+                      {isEditing ? '저장' : <img src={editIcon} alt="" className="h-3.5 w-3.5" />}
+                    </button>
+                    <button
+                      type="button"
+                      onClick={() => handleDeleteContent(index)}
+                      aria-label="삭제"
+                      className="flex h-6 w-6 items-center justify-center rounded-full transition-colors hover:bg-brand-soft"
+                    >
+                      <img src={deleteIcon} alt="" className="h-4 w-4" />
+                    </button>
+                  </div>
+                )}
+
+                {/* 원형 아이콘 컨테이너 */}
+                <div className="w-24 h-24 rounded-full flex items-center justify-center mb-7 bg-brand-soft">
+                  <img
+                    src={activity.icon}
+                    alt={activity.title}
+                    className="w-[100px] h-[100px] object-cover"
+                  />
+                </div>
+
+                {isEditing ? (
+                  <>
+                    <input
+                      type="text"
+                      value={draftTitle}
+                      onChange={(event) => setDraftTitle(event.target.value)}
+                      placeholder="활동 제목"
+                      className="mb-5 w-full rounded-md border border-line px-3 py-2 text-center text-lg font-bold text-ink"
+                    />
+                    <textarea
+                      value={draftDescription}
+                      onChange={(event) => setDraftDescription(event.target.value)}
+                      placeholder="활동 설명"
+                      rows={3}
+                      className="w-full resize-none rounded-md border border-line px-3 py-2 text-center text-sm text-ink-sub"
+                    />
+                  </>
+                ) : (
+                  <>
+                    <h3 className="text-lg font-bold text-ink mb-5">{activity.title}</h3>
+                    <p className="text-sm text-ink-sub leading-7 m-0 whitespace-pre-line">
+                      {activity.description}
+                    </p>
+                  </>
+                )}
               </div>
-              <h3 className="text-lg font-bold text-ink mb-5">{activity.title}</h3>
-              <p className="text-sm text-ink-sub leading-7 m-0 whitespace-pre-line">
-                {activity.description}
-              </p>
-            </div>
-          ))}
+            );
+          })}
         </div>
       </div>
     </section>
diff --git a/src/pages/visitor/main/RecruitSection.jsx b/src/pages/visitor/main/RecruitSection.jsx
index e15ef91..b13f713 100644
--- a/src/pages/visitor/main/RecruitSection.jsx
+++ b/src/pages/visitor/main/RecruitSection.jsx
@@ -1,11 +1,88 @@
+import { useState } from 'react';
 import { Link } from 'react-router-dom';
 
 import useScrollReveal from '@/hooks/useScrollReveal';
-import { RECRUIT_INFO_LIST } from '@/constants/homeData';
 import { ROUTES } from '@/constants/routes';
+import useAuthStore from '@/stores/authStore';
+import useHomeContentStore from '@/stores/homeContentStore';
+import editIcon from '@/assets/images/editicon.svg';
 
-export default function RecruitSection() {
+function highlightOne(text) {
+  return text.split('\n').map((line, lineIndex) => (
+    <span key={lineIndex}>
+      {lineIndex > 0 && <br />}
+      {line.split(/(ONE)/g).map((chunk, chunkIndex) =>
+        chunk === 'ONE' ? (
+          <span key={chunkIndex} className="text-brand">
+            {chunk}
+          </span>
+        ) : (
+          chunk
+        )
+      )}
+    </span>
+  ));
+}
+
+function RecruitEditForm({ heading, infoList, onSave, onCancel }) {
+  const [headingValue, setHeadingValue] = useState(heading);
+  const [values, setValues] = useState(infoList.map((item) => item.value));
+
+  const handleValueChange = (index, value) => {
+    setValues((previous) => previous.map((item, i) => (i === index ? value : item)));
+  };
+
+  return (
+    <div className="mx-auto flex max-w-[560px] flex-col gap-3 text-left">
+      <textarea
+        value={headingValue}
+        onChange={(event) => setHeadingValue(event.target.value)}
+        rows={2}
+        className="resize-none rounded-md border border-line px-3 py-2 text-center text-base font-bold text-ink"
+      />
+
+      {infoList.map((item, index) => (
+        <div key={item.label} className="flex items-center gap-3">
+          <span className="w-20 shrink-0 text-right text-sm text-ink-sub">{item.label}</span>
+          <input
+            value={values[index]}
+            onChange={(event) => handleValueChange(index, event.target.value)}
+            className="flex-1 rounded-md border border-line px-3 py-2 text-sm text-ink"
+          />
+        </div>
+      ))}
+
+      <div className="mt-2 flex justify-center gap-3">
+        <button type="button" onClick={onCancel} className="rounded-full border border-line px-5 py-1.5 text-sm text-ink-sub">
+          취소
+        </button>
+        <button
+          type="button"
+          onClick={() => onSave(headingValue, values)}
+          className="rounded-full bg-brand px-5 py-1.5 text-sm font-bold text-white"
+        >
+          저장
+        </button>
+      </div>
+    </div>
+  );
+}
+
+export default function RecruitSection({ isEditable = false }) {
   const revealRef = useScrollReveal();
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated) && isEditable;
+  const recruitHeading = useHomeContentStore((state) => state.recruitHeading);
+  const recruitInfoList = useHomeContentStore((state) => state.recruitInfoList);
+  const updateRecruitHeading = useHomeContentStore((state) => state.updateRecruitHeading);
+  const updateRecruitInfoItem = useHomeContentStore((state) => state.updateRecruitInfoItem);
+
+  const [isEditing, setIsEditing] = useState(false);
+
+  const handleSave = (heading, values) => {
+    updateRecruitHeading(heading);
+    values.forEach((value, index) => updateRecruitInfoItem(index, value));
+    setIsEditing(false);
+  };
 
   return (
     <section className="pb-28 px-6 bg-brand-soft">
@@ -20,41 +97,56 @@ export default function RecruitSection() {
         />
       </div>
 
-      <div ref={revealRef} className="reveal-up max-w-[680px] mx-auto text-center">
-        {/* 메인 카피 */}
-        <h2
-          className="font-bold text-ink leading-relaxed mb-12"
-          style={{ fontSize: 'clamp(1.4rem, 3vw, 1.9rem)' }}
-        >
-          단순히 배우는 것을 넘어,
-          <br />
-          함께 성장할 <span className="text-brand">ONE</span>의 새로운 부원을 모집합니다.
-        </h2>
-
-        {/* 모집 정보 – 카드 없이 텍스트 나열 */}
-        <div className="mb-14 space-y-3">
-          {RECRUIT_INFO_LIST.map(({ label, value }) => (
-            <p key={label} className="text-base text-[#555] m-0">
-              {label}: {value}
-            </p>
-          ))}
-        </div>
+      <div ref={revealRef} className="reveal-up relative max-w-[680px] mx-auto text-center">
+        {isAuthenticated && !isEditing && (
+          <button
+            type="button"
+            onClick={() => setIsEditing(true)}
+            aria-label="수정"
+            className="absolute right-0 top-0 flex h-6 w-6 items-center justify-center rounded-full hover:bg-brand-soft"
+          >
+            <img src={editIcon} alt="" className="h-3.5 w-3.5" />
+          </button>
+        )}
 
-        <Link
-          to={ROUTES.RECRUIT}
-          className="inline-flex items-center gap-3 bg-brand text-white rounded-full px-12 py-4 text-base font-bold no-underline transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_12px_32px_rgba(255,107,0,0.45)]"
-        >
-          지원하기
-          <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
-            <path
-              d="M3.5 9h11M10 5l4 4-4 4"
-              stroke="#fff"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
-        </Link>
+        {isEditing ? (
+          <RecruitEditForm heading={recruitHeading} infoList={recruitInfoList} onSave={handleSave} onCancel={() => setIsEditing(false)} />
+        ) : (
+          <>
+            {/* 메인 카피 */}
+            <h2
+              className="font-bold text-ink leading-relaxed mb-12"
+              style={{ fontSize: 'clamp(1.4rem, 3vw, 1.9rem)' }}
+            >
+              {highlightOne(recruitHeading)}
+            </h2>
+
+            {/* 모집 정보 – 카드 없이 텍스트 나열 */}
+            <div className="mb-14 space-y-3">
+              {recruitInfoList.map(({ label, value }) => (
+                <p key={label} className="text-base text-[#555] m-0">
+                  {label}: {value}
+                </p>
+              ))}
+            </div>
+
+            <Link
+              to={ROUTES.RECRUIT}
+              className="inline-flex items-center gap-3 bg-brand text-white rounded-full px-12 py-4 text-base font-bold no-underline transition-all duration-200 hover:-translate-y-0.5 hover:shadow-[0_12px_32px_rgba(255,107,0,0.45)]"
+            >
+              지원하기
+              <svg width="18" height="18" viewBox="0 0 18 18" fill="none">
+                <path
+                  d="M3.5 9h11M10 5l4 4-4 4"
+                  stroke="#fff"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </Link>
+          </>
+        )}
       </div>
     </section>
   );
diff --git a/src/pages/visitor/main/TimelineSection.jsx b/src/pages/visitor/main/TimelineSection.jsx
index 42522bb..78ea397 100644
--- a/src/pages/visitor/main/TimelineSection.jsx
+++ b/src/pages/visitor/main/TimelineSection.jsx
@@ -1,103 +1,344 @@
-import { useState } from 'react';
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
 import useScrollReveal from '@/hooks/useScrollReveal';
-import { TIMELINE_LIST } from '@/constants/homeData';
+import useAuthStore from '@/stores/authStore';
+import useHomeContentStore from '@/stores/homeContentStore';
+import editIcon from '@/assets/images/editicon.svg';
+import deleteIcon from '@/assets/images/deleteicon.svg';
 
-function TimelineCard({ event, isRight, isExpanded, onToggle }) {
-  const handleKeyDown = (e) => {
-    if (e.key === 'Enter' || e.key === ' ') {
+function toMonthInputValue(monthText) {
+  return monthText ? monthText.trim().replace('.', '-') : '';
+}
+
+function parsePeriod(period) {
+  const [start, end] = (period || '').split('-').map((part) => part.trim());
+  return { periodStart: toMonthInputValue(start), periodEnd: toMonthInputValue(end) };
+}
+
+const EMPTY_EVENT = {
+  year: '',
+  projectName: '',
+  award: '',
+  activity: '',
+  period: '',
+  memberCount: null,
+  techStack: [],
+  description: '',
+  images: [],
+};
+
+const TimelineEditForm = forwardRef(function TimelineEditForm({ event, onSave, onCancel, showSaveButton = false }, ref) {
+  const [year, setYear] = useState(event.year);
+  const [projectName, setProjectName] = useState(event.projectName);
+  const [award, setAward] = useState(event.award);
+  const [activity, setActivity] = useState(event.activity);
+  const initialPeriod = parsePeriod(event.period);
+  const [periodStart, setPeriodStart] = useState(initialPeriod.periodStart);
+  const [periodEnd, setPeriodEnd] = useState(initialPeriod.periodEnd);
+  const [memberCount, setMemberCount] = useState(
+    event.memberCount === null || event.memberCount === undefined ? '' : String(event.memberCount)
+  );
+  const [techStack, setTechStack] = useState(event.techStack.length > 0 ? [...event.techStack] : ['']);
+  const [description, setDescription] = useState(event.description);
+  const [images, setImages] = useState([...event.images]);
+
+  const inputClass = 'w-full rounded-md border border-line px-3 py-2 text-sm text-ink';
+
+  const handleMemberCountChange = (value) => {
+    setMemberCount(value.replace(/\D/g, ''));
+  };
+
+  const handleTechStackChange = (index, value) => {
+    setTechStack((previous) => previous.map((tech, i) => (i === index ? value : tech)));
+  };
+
+  const handleTechStackKeyDown = (index, e) => {
+    if (e.key === 'Enter') {
       e.preventDefault();
-      onToggle();
+      setTechStack((previous) => [...previous.slice(0, index + 1), '', ...previous.slice(index + 1)]);
+    }
+  };
+
+  const handleAddTechStack = () => {
+    setTechStack((previous) => [...previous, '']);
+  };
+
+  const handleRemoveTechStack = (index) => {
+    setTechStack((previous) => previous.filter((_, i) => i !== index));
+  };
+
+  const handleAddImage = (e) => {
+    const file = e.target.files[0];
+    e.target.value = '';
+    if (!file) return;
+    if (!file.type.startsWith('image/')) {
+      alert('이미지 파일만 업로드할 수 있습니다.');
+      return;
+    }
+    setImages((previous) => [...previous, URL.createObjectURL(file)]);
+  };
+
+  const handleRemoveImage = (index) => {
+    setImages((previous) => previous.filter((_, i) => i !== index));
+  };
+
+  const handleSave = () => {
+    if (periodStart && periodEnd && periodStart > periodEnd) {
+      alert('기간 설정이 잘못되었습니다.');
+      return;
     }
+
+    const validTechStack = techStack.map((tech) => tech.trim()).filter(Boolean);
+    if (validTechStack.length === 0) {
+      alert('기술 스택을 입력해주세요.');
+      return;
+    }
+
+    onSave({
+      year,
+      projectName,
+      award,
+      activity,
+      period:
+        periodStart && periodEnd
+          ? `${periodStart.replace('-', '.')} - ${periodEnd.replace('-', '.')}`
+          : '',
+      memberCount: memberCount === '' ? null : Number(memberCount),
+      techStack: validTechStack,
+      description,
+      images,
+    });
   };
 
+  useImperativeHandle(ref, () => ({ requestSave: handleSave }));
+
   return (
-    <div
-      onClick={onToggle}
-      onKeyDown={handleKeyDown}
-      role="button"
-      tabIndex={0}
-      aria-expanded={isExpanded}
-      className={`bg-white rounded-2xl px-9 py-6 border cursor-pointer select-none transition-all duration-300 ${
-        isExpanded ? 'border-brand shadow-md' : 'border-[#EDCFBC] hover:border-brand hover:shadow-sm'
-      } ${isRight ? 'text-left' : 'text-right'}`}
-    >
-      {/* 기본 정보 */}
-      <div className={isRight ? '' : 'ml-auto'}>
-        <p className="text-sm text-brand font-bold m-0 mb-2">
-          {event.year}
-          {event.projectName ? `, ${event.projectName}` : ''}
-        </p>
-        <p className="text-base font-bold text-ink m-0 mb-2">{event.award}</p>
-        <p className="text-xs text-[#AAAAAA] m-0">{event.activity}</p>
+    <div className="flex flex-col gap-4 text-left" onClick={(e) => e.stopPropagation()}>
+      <div className="grid grid-cols-2 gap-3">
+        <input className={inputClass} value={year} onChange={(e) => setYear(e.target.value)} placeholder="연도" />
+        <input
+          className={inputClass}
+          value={projectName}
+          onChange={(e) => setProjectName(e.target.value)}
+          placeholder="프로젝트명"
+        />
       </div>
+      <input className={inputClass} value={award} onChange={(e) => setAward(e.target.value)} placeholder="수상 내역" />
+      <input
+        className={inputClass}
+        value={activity}
+        onChange={(e) => setActivity(e.target.value)}
+        placeholder="주요 활동 요약"
+      />
 
-      {/* 펼쳐지는 상세 내용 */}
-      <div
-        className={`overflow-hidden transition-all duration-400 ease-in-out ${
-          isExpanded ? 'max-h-[600px] opacity-100 mt-4' : 'max-h-0 opacity-0'
-        }`}
-      >
-        <hr className="border-[#EDCFBC] mb-4" />
-
-        {/* 기간 / 인원 */}
-        <div className={`flex gap-6 mb-4 text-xs text-ink-sub ${isRight ? '' : 'justify-end'}`}>
-          <span className="flex items-center gap-1">
-            <span>📅</span> {event.period}
-          </span>
-          {event.memberCount && (
-            <span className="flex items-center gap-1">
-              <span>👥</span> {event.memberCount}명
-            </span>
-          )}
+      <div className="grid grid-cols-2 gap-3">
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-ink-sub">기간</span>
+          <div className="flex items-center gap-2">
+            <input
+              type="month"
+              className={inputClass}
+              value={periodStart}
+              onChange={(e) => setPeriodStart(e.target.value)}
+            />
+            <span className="text-ink-sub">-</span>
+            <input
+              type="month"
+              className={inputClass}
+              value={periodEnd}
+              onChange={(e) => setPeriodEnd(e.target.value)}
+            />
+          </div>
         </div>
+        <div className="flex flex-col gap-1">
+          <span className="text-xs text-ink-sub">팀원</span>
+          <div className="flex items-center gap-2">
+            <input
+              type="text"
+              inputMode="numeric"
+              className={inputClass}
+              value={memberCount}
+              onChange={(e) => handleMemberCountChange(e.target.value)}
+              placeholder="숫자만 입력"
+            />
+            <span className="shrink-0 text-sm text-ink-sub">명</span>
+          </div>
+        </div>
+      </div>
 
-        {/* 기술 스택 */}
-        {event.techStack.length > 0 && (
-          <div className={`mb-4 ${isRight ? '' : 'flex flex-col items-end'}`}>
-            <p className="text-xs text-[#AAAAAA] m-0 mb-2">기술 스택</p>
-            <div className={`flex flex-wrap gap-2 ${isRight ? '' : 'justify-end'}`}>
-              {event.techStack.map((tech) => (
-                <span
-                  key={tech}
-                  className="px-3 py-1 rounded-full bg-brand-soft text-brand text-xs font-medium"
-                >
-                  {tech}
-                </span>
-              ))}
+      <div className="flex flex-col gap-2">
+        <span className="text-xs text-ink-sub">기술 스택</span>
+        <div className="flex flex-wrap items-center gap-2">
+          {techStack.map((tech, index) => (
+            <div key={index} className="flex items-center gap-1 rounded-full bg-brand-soft px-3 py-1">
+              <input
+                value={tech}
+                onChange={(e) => handleTechStackChange(index, e.target.value)}
+                onKeyDown={(e) => handleTechStackKeyDown(index, e)}
+                placeholder="기술 스택"
+                className="w-24 bg-transparent text-xs text-brand outline-none"
+              />
+              <button
+                type="button"
+                onClick={() => handleRemoveTechStack(index)}
+                aria-label="기술 스택 삭제"
+                className="text-xs text-brand/60"
+              >
+                ✕
+              </button>
             </div>
-          </div>
-        )}
+          ))}
+          <button
+            type="button"
+            onClick={handleAddTechStack}
+            aria-label="기술 스택 추가"
+            className="flex h-7 w-7 items-center justify-center rounded-full border border-line text-ink-sub"
+          >
+            +
+          </button>
+        </div>
+      </div>
+
+      <div className="flex flex-col gap-1">
+        <span className="text-xs text-ink-sub">프로젝트 소개</span>
+        <textarea
+          className={`${inputClass} resize-none`}
+          rows={3}
+          value={description}
+          onChange={(e) => setDescription(e.target.value)}
+          placeholder="프로젝트 소개를 입력해 주세요."
+        />
+      </div>
 
-        {/* 프로젝트 소개 */}
-        <div className={`mb-4 ${isRight ? '' : 'text-right'}`}>
-          <p className="text-xs text-[#AAAAAA] m-0 mb-2">프로젝트 소개</p>
-          <p className="text-sm text-ink leading-6 m-0 whitespace-pre-line">{event.description}</p>
+      <div className="flex flex-col gap-1">
+        <span className="text-xs text-ink-sub">이미지</span>
+        <div className="flex gap-3">
+          {images.map((src, index) => (
+            <div key={index} className="relative h-16 w-24 shrink-0 overflow-hidden rounded-lg bg-[#F0F0F0]">
+              <img src={src} alt="" className="h-full w-full object-cover" />
+              <button
+                type="button"
+                onClick={() => handleRemoveImage(index)}
+                aria-label="이미지 삭제"
+                className="absolute right-1 top-1 flex h-5 w-5 items-center justify-center rounded-full bg-black/50 text-xs text-white"
+              >
+                ✕
+              </button>
+            </div>
+          ))}
+          {images.length < 3 && (
+            <label className="flex h-16 w-24 shrink-0 cursor-pointer items-center justify-center rounded-lg border border-dashed border-line text-xs text-ink-sub">
+              이미지 추가
+              <input type="file" accept="image/*" className="hidden" onChange={handleAddImage} />
+            </label>
+          )}
         </div>
+      </div>
 
-        {/* 이미지 */}
-        {event.images.length > 0 && (
-          <div className="grid grid-cols-3 gap-3 mt-2">
-            {event.images.map((src, index) => (
-              <img
-                key={index}
-                src={src}
-                alt={`${event.projectName} 이미지 ${index + 1}`}
-                className="w-full aspect-[4/3] object-cover rounded-lg bg-[#F0F0F0]"
-              />
-            ))}
-          </div>
+      <div className="flex justify-end gap-3">
+        <button type="button" onClick={onCancel} className="rounded-full border border-line px-5 py-1.5 text-sm text-ink-sub">
+          취소
+        </button>
+        {showSaveButton && (
+          <button type="button" onClick={handleSave} className="rounded-full bg-brand px-5 py-1.5 text-sm font-bold text-white">
+            저장
+          </button>
         )}
       </div>
     </div>
   );
+});
+
+function TimelineControls({ isRight, isEditing, onEdit, onDelete }) {
+  const editButton = (
+    <button
+      type="button"
+      onClick={onEdit}
+      aria-label={isEditing ? '저장' : '수정'}
+      className={
+        isEditing ? 'whitespace-nowrap text-sm font-bold text-brand' : 'flex h-6 w-6 items-center justify-center'
+      }
+    >
+      {isEditing ? '저장' : <img src={editIcon} alt="" className="h-3.5 w-3.5" />}
+    </button>
+  );
+  const deleteButton = (
+    <button type="button" onClick={onDelete} aria-label="삭제" className="flex h-6 w-6 items-center justify-center">
+      <img src={deleteIcon} alt="" className="h-4 w-4" />
+    </button>
+  );
+
+  return (
+    <div className="flex shrink-0 items-center gap-2 pt-1" onClick={(e) => e.stopPropagation()}>
+      {isRight ? (
+        <>
+          {editButton}
+          {deleteButton}
+        </>
+      ) : (
+        <>
+          {deleteButton}
+          {editButton}
+        </>
+      )}
+    </div>
+  );
+}
+
+function TimelineCard({ event, isRight, isEditing, formRef, onSaveEdit, onCancelEdit }) {
+  return (
+    <div className={`relative bg-white rounded-2xl px-9 py-6 shadow-md ${isRight ? 'text-left' : 'text-right'}`}>
+      <span
+        aria-hidden="true"
+        className={`absolute top-6 h-3 w-3 rotate-45 bg-white ${isRight ? '-left-1.5' : '-right-1.5'}`}
+      />
+
+      {isEditing ? (
+        <TimelineEditForm ref={formRef} event={event} onSave={onSaveEdit} onCancel={onCancelEdit} />
+      ) : (
+        <div className={isRight ? '' : 'ml-auto'}>
+          <p className="text-sm text-brand font-bold m-0 mb-2">
+            {event.year}
+            {event.projectName ? `, ${event.projectName}` : ''}
+          </p>
+          <p className="text-base font-bold text-ink m-0 mb-2">{event.award}</p>
+          <p className="text-xs text-[#AAAAAA] m-0">{event.activity}</p>
+        </div>
+      )}
+    </div>
+  );
 }
 
-export default function TimelineSection() {
+export default function TimelineSection({ isEditable = false }) {
   const revealRef = useScrollReveal();
-  const [expandedIndex, setExpandedIndex] = useState(null);
+  const isAuthenticated = useAuthStore((state) => state.isAuthenticated) && isEditable;
+  const timeline = useHomeContentStore((state) => state.timeline);
+  const updateTimelineItem = useHomeContentStore((state) => state.updateTimelineItem);
+  const deleteTimelineItem = useHomeContentStore((state) => state.deleteTimelineItem);
+  const addTimelineItem = useHomeContentStore((state) => state.addTimelineItem);
 
-  const handleToggle = (index) => {
-    setExpandedIndex((previous) => (previous === index ? null : index));
+  const [editingIndex, setEditingIndex] = useState(null);
+  const [isAdding, setIsAdding] = useState(false);
+  const editFormRefs = useRef({});
+
+  const handleDelete = (index) => {
+    if (window.confirm('삭제하시겠습니까?')) {
+      deleteTimelineItem(index);
+      setEditingIndex((previous) => (previous === index ? null : previous));
+    }
+  };
+
+  const handleEditButtonClick = (index) => {
+    if (editingIndex === index) {
+      editFormRefs.current[index]?.requestSave();
+    } else {
+      setEditingIndex(index);
+    }
+  };
+
+  const handleSaveNew = (item) => {
+    const nextSide = timeline.length % 2 === 0 ? 'right' : 'left';
+    addTimelineItem({ ...item, side: nextSide });
+    setIsAdding(false);
   };
 
   return (
@@ -117,12 +358,36 @@ export default function TimelineSection() {
             className="absolute top-0 bottom-0 w-[1.5px] left-1/2 -translate-x-1/2 bg-brand opacity-50"
           />
 
-          {TIMELINE_LIST.map((event, index) => {
+          {timeline.map((event, index) => {
             const isRight = event.side === 'right';
-            const isExpanded = expandedIndex === index;
+            const isEditing = editingIndex === index;
+            const card = (
+              <TimelineCard
+                event={event}
+                isRight={isRight}
+                isEditing={isEditing}
+                formRef={(el) => {
+                  editFormRefs.current[index] = el;
+                }}
+                onSaveEdit={(patch) => {
+                  updateTimelineItem(index, patch);
+                  setEditingIndex(null);
+                }}
+                onCancelEdit={() => setEditingIndex(null)}
+              />
+            );
+            const controls = isAuthenticated && (
+              <TimelineControls
+                isRight={isRight}
+                isEditing={isEditing}
+                onEdit={() => handleEditButtonClick(index)}
+                onDelete={() => handleDelete(index)}
+              />
+            );
+
             return (
               <div
-                key={`${event.year}-${event.projectName}`}
+                key={`${event.year}-${event.projectName}-${index}`}
                 ref={revealRef}
                 className="reveal-up grid items-start"
                 style={{ gridTemplateColumns: '1fr 40px 1fr', transitionDelay: `${index * 90}ms` }}
@@ -130,12 +395,10 @@ export default function TimelineSection() {
                 {/* 왼쪽 */}
                 <div className="pr-8">
                   {!isRight && (
-                    <TimelineCard
-                      event={event}
-                      isRight={false}
-                      isExpanded={isExpanded}
-                      onToggle={() => handleToggle(index)}
-                    />
+                    <div className="flex items-start gap-2">
+                      {controls}
+                      <div className="flex-1">{card}</div>
+                    </div>
                   )}
                 </div>
 
@@ -147,17 +410,44 @@ export default function TimelineSection() {
                 {/* 오른쪽 */}
                 <div className="pl-8">
                   {isRight && (
-                    <TimelineCard
-                      event={event}
-                      isRight={true}
-                      isExpanded={isExpanded}
-                      onToggle={() => handleToggle(index)}
-                    />
+                    <div className="flex items-start gap-2">
+                      <div className="flex-1">{card}</div>
+                      {controls}
+                    </div>
                   )}
                 </div>
               </div>
             );
           })}
+
+          {isAdding && (
+            <div className="grid items-start" style={{ gridTemplateColumns: '1fr 40px 1fr' }}>
+              <div className="pr-8" />
+              <div className="flex justify-center pt-5">
+                <div className="w-4 h-4 rounded-full flex-shrink-0 bg-brand" />
+              </div>
+              <div className="pl-8">
+                <div className="relative bg-white rounded-2xl px-9 py-6 shadow-md">
+                  <TimelineEditForm
+                    event={EMPTY_EVENT}
+                    onSave={handleSaveNew}
+                    onCancel={() => setIsAdding(false)}
+                    showSaveButton
+                  />
+                </div>
+              </div>
+            </div>
+          )}
+
+          {isAuthenticated && !isAdding && (
+            <button
+              type="button"
+              onClick={() => setIsAdding(true)}
+              className="absolute top-full right-0 mt-4 text-sm font-bold text-brand"
+            >
+              + 프로젝트 추가하기
+            </button>
+          )}
         </div>
 
         {/* 하단 연결선 — RecruitSection 점선과 이어짐 */}
diff --git a/src/stores/homeContentStore.js b/src/stores/homeContentStore.js
new file mode 100644
index 0000000..c5d043a
--- /dev/null
+++ b/src/stores/homeContentStore.js
@@ -0,0 +1,44 @@
+import { create } from 'zustand';
+import { ACTIVITY_LIST, TIMELINE_LIST, RECRUIT_INFO_LIST } from '@/constants/homeData';
+
+/**
+ * 메인페이지 콘텐츠(주요 활동/ONE 활동 현황/신입 부원 모집) 전역 상태.
+ * 백엔드 API가 아직 없어 homeData.jsx의 정적 배열을 초기값으로 복사해 사용한다.
+ * 새로고침 시 초기값으로 되돌아간다(영구 저장 아님).
+ */
+const useHomeContentStore = create((set) => ({
+  activities: ACTIVITY_LIST.map((item) => ({ ...item })),
+  timeline: TIMELINE_LIST.map((item) => ({
+    ...item,
+    techStack: [...item.techStack],
+    images: [...item.images],
+  })),
+  recruitHeading: '단순히 배우는 것을 넘어,\n함께 성장할 ONE의 새로운 부원을 모집합니다.',
+  recruitInfoList: RECRUIT_INFO_LIST.map((item) => ({ ...item })),
+
+  updateActivity: (index, patch) =>
+    set((state) => ({
+      activities: state.activities.map((item, i) => (i === index ? { ...item, ...patch } : item)),
+    })),
+
+  updateTimelineItem: (index, patch) =>
+    set((state) => ({
+      timeline: state.timeline.map((item, i) => (i === index ? { ...item, ...patch } : item)),
+    })),
+  deleteTimelineItem: (index) =>
+    set((state) => ({
+      timeline: state.timeline.filter((_, i) => i !== index),
+    })),
+  addTimelineItem: (item) =>
+    set((state) => ({
+      timeline: [...state.timeline, item],
+    })),
+
+  updateRecruitHeading: (heading) => set({ recruitHeading: heading }),
+  updateRecruitInfoItem: (index, value) =>
+    set((state) => ({
+      recruitInfoList: state.recruitInfoList.map((item, i) => (i === index ? { ...item, value } : item)),
+    })),
+}));
+
+export default useHomeContentStore;

From 73de48e52bf5c34b6f86d46979389417682b5035 Mon Sep 17 00:00:00 2001
From: PJW <pyojaewon03@gmail.com>
Date: Sat, 4 Jul 2026 16:26:01 +0900
Subject: [PATCH 2/3] =?UTF-8?q?fix=20:=20WEB-9=20=EC=A0=9C=EB=AF=B8?=
 =?UTF-8?q?=EB=82=98=EC=9D=B4=20=EC=BD=94=EB=93=9C=20=EB=A6=AC=EB=B7=B0=20?=
 =?UTF-8?q?=EB=B0=98=EC=98=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/visitor/main/RecruitSection.jsx  |   7 +-
 src/pages/visitor/main/TimelineSection.jsx | 139 ++++++++++++++++++---
 src/stores/homeContentStore.js             |   6 +-
 3 files changed, 128 insertions(+), 24 deletions(-)

diff --git a/src/pages/visitor/main/RecruitSection.jsx b/src/pages/visitor/main/RecruitSection.jsx
index b13f713..139f8db 100644
--- a/src/pages/visitor/main/RecruitSection.jsx
+++ b/src/pages/visitor/main/RecruitSection.jsx
@@ -8,6 +8,7 @@ import useHomeContentStore from '@/stores/homeContentStore';
 import editIcon from '@/assets/images/editicon.svg';
 
 function highlightOne(text) {
+  if (typeof text !== 'string') return null;
   return text.split('\n').map((line, lineIndex) => (
     <span key={lineIndex}>
       {lineIndex > 0 && <br />}
@@ -73,14 +74,12 @@ export default function RecruitSection({ isEditable = false }) {
   const isAuthenticated = useAuthStore((state) => state.isAuthenticated) && isEditable;
   const recruitHeading = useHomeContentStore((state) => state.recruitHeading);
   const recruitInfoList = useHomeContentStore((state) => state.recruitInfoList);
-  const updateRecruitHeading = useHomeContentStore((state) => state.updateRecruitHeading);
-  const updateRecruitInfoItem = useHomeContentStore((state) => state.updateRecruitInfoItem);
+  const updateRecruitContent = useHomeContentStore((state) => state.updateRecruitContent);
 
   const [isEditing, setIsEditing] = useState(false);
 
   const handleSave = (heading, values) => {
-    updateRecruitHeading(heading);
-    values.forEach((value, index) => updateRecruitInfoItem(index, value));
+    updateRecruitContent(heading, values);
     setIsEditing(false);
   };
 
diff --git a/src/pages/visitor/main/TimelineSection.jsx b/src/pages/visitor/main/TimelineSection.jsx
index 78ea397..1906175 100644
--- a/src/pages/visitor/main/TimelineSection.jsx
+++ b/src/pages/visitor/main/TimelineSection.jsx
@@ -1,4 +1,4 @@
-import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import { forwardRef, useEffect, useImperativeHandle, useRef, useState } from 'react';
 import useScrollReveal from '@/hooks/useScrollReveal';
 import useAuthStore from '@/stores/authStore';
 import useHomeContentStore from '@/stores/homeContentStore';
@@ -10,10 +10,27 @@ function toMonthInputValue(monthText) {
 }
 
 function parsePeriod(period) {
-  const [start, end] = (period || '').split('-').map((part) => part.trim());
+  const trimmed = (period || '').trim();
+  if (!trimmed) return { periodStart: '', periodEnd: '' };
+  if (trimmed.endsWith('-')) {
+    return { periodStart: toMonthInputValue(trimmed.slice(0, -1)), periodEnd: '' };
+  }
+  if (trimmed.startsWith('-')) {
+    return { periodStart: '', periodEnd: toMonthInputValue(trimmed.slice(1)) };
+  }
+  const [start, end] = trimmed.split('-').map((part) => part.trim());
   return { periodStart: toMonthInputValue(start), periodEnd: toMonthInputValue(end) };
 }
 
+function formatPeriod(periodStart, periodEnd) {
+  const start = periodStart ? periodStart.replace('-', '.') : '';
+  const end = periodEnd ? periodEnd.replace('-', '.') : '';
+  if (start && end) return `${start} - ${end}`;
+  if (start) return `${start} -`;
+  if (end) return `- ${end}`;
+  return '';
+}
+
 const EMPTY_EVENT = {
   year: '',
   projectName: '',
@@ -40,6 +57,14 @@ const TimelineEditForm = forwardRef(function TimelineEditForm({ event, onSave, o
   const [techStack, setTechStack] = useState(event.techStack.length > 0 ? [...event.techStack] : ['']);
   const [description, setDescription] = useState(event.description);
   const [images, setImages] = useState([...event.images]);
+  const createdObjectUrlsRef = useRef(new Set());
+
+  useEffect(() => {
+    const createdObjectUrls = createdObjectUrlsRef.current;
+    return () => {
+      createdObjectUrls.forEach((url) => URL.revokeObjectURL(url));
+    };
+  }, []);
 
   const inputClass = 'w-full rounded-md border border-line px-3 py-2 text-sm text-ink';
 
@@ -74,11 +99,20 @@ const TimelineEditForm = forwardRef(function TimelineEditForm({ event, onSave, o
       alert('이미지 파일만 업로드할 수 있습니다.');
       return;
     }
-    setImages((previous) => [...previous, URL.createObjectURL(file)]);
+    const url = URL.createObjectURL(file);
+    createdObjectUrlsRef.current.add(url);
+    setImages((previous) => [...previous, url]);
   };
 
   const handleRemoveImage = (index) => {
-    setImages((previous) => previous.filter((_, i) => i !== index));
+    setImages((previous) => {
+      const removed = previous[index];
+      if (createdObjectUrlsRef.current.has(removed)) {
+        URL.revokeObjectURL(removed);
+        createdObjectUrlsRef.current.delete(removed);
+      }
+      return previous.filter((_, i) => i !== index);
+    });
   };
 
   const handleSave = () => {
@@ -93,15 +127,13 @@ const TimelineEditForm = forwardRef(function TimelineEditForm({ event, onSave, o
       return;
     }
 
+    createdObjectUrlsRef.current.clear();
     onSave({
       year,
       projectName,
       award,
       activity,
-      period:
-        periodStart && periodEnd
-          ? `${periodStart.replace('-', '.')} - ${periodEnd.replace('-', '.')}`
-          : '',
+      period: formatPeriod(periodStart, periodEnd),
       memberCount: memberCount === '' ? null : Number(memberCount),
       techStack: validTechStack,
       description,
@@ -285,8 +317,26 @@ function TimelineControls({ isRight, isEditing, onEdit, onDelete }) {
 }
 
 function TimelineCard({ event, isRight, isEditing, formRef, onSaveEdit, onCancelEdit }) {
+  const [isExpanded, setIsExpanded] = useState(false);
+
+  const handleKeyDown = (e) => {
+    if (e.key === 'Enter' || e.key === ' ') {
+      e.preventDefault();
+      setIsExpanded((prev) => !prev);
+    }
+  };
+
   return (
-    <div className={`relative bg-white rounded-2xl px-9 py-6 shadow-md ${isRight ? 'text-left' : 'text-right'}`}>
+    <div
+      onClick={() => !isEditing && setIsExpanded((prev) => !prev)}
+      onKeyDown={handleKeyDown}
+      role={isEditing ? undefined : 'button'}
+      tabIndex={isEditing ? undefined : 0}
+      aria-expanded={isExpanded}
+      className={`relative bg-white rounded-2xl px-9 py-6 border shadow-md transition-all duration-300 ${
+        isExpanded ? 'border-brand' : 'border-[#EDCFBC]'
+      } ${isRight ? 'text-left' : 'text-right'} ${isEditing ? '' : 'cursor-pointer select-none'}`}
+    >
       <span
         aria-hidden="true"
         className={`absolute top-6 h-3 w-3 rotate-45 bg-white ${isRight ? '-left-1.5' : '-right-1.5'}`}
@@ -295,14 +345,69 @@ function TimelineCard({ event, isRight, isEditing, formRef, onSaveEdit, onCancel
       {isEditing ? (
         <TimelineEditForm ref={formRef} event={event} onSave={onSaveEdit} onCancel={onCancelEdit} />
       ) : (
-        <div className={isRight ? '' : 'ml-auto'}>
-          <p className="text-sm text-brand font-bold m-0 mb-2">
-            {event.year}
-            {event.projectName ? `, ${event.projectName}` : ''}
-          </p>
-          <p className="text-base font-bold text-ink m-0 mb-2">{event.award}</p>
-          <p className="text-xs text-[#AAAAAA] m-0">{event.activity}</p>
-        </div>
+        <>
+          <div className={isRight ? '' : 'ml-auto'}>
+            <p className="text-sm text-brand font-bold m-0 mb-2">
+              {event.year}
+              {event.projectName ? `, ${event.projectName}` : ''}
+            </p>
+            <p className="text-base font-bold text-ink m-0 mb-2">{event.award}</p>
+            <p className="text-xs text-[#AAAAAA] m-0">{event.activity}</p>
+          </div>
+
+          <div
+            className={`overflow-hidden transition-all duration-400 ease-in-out ${
+              isExpanded ? 'max-h-[600px] opacity-100 mt-4' : 'max-h-0 opacity-0'
+            }`}
+          >
+            <hr className="border-[#EDCFBC] mb-4" />
+
+            <div className={`flex gap-6 mb-4 text-xs text-ink-sub ${isRight ? '' : 'justify-end'}`}>
+              <span className="flex items-center gap-1">
+                <span>📅</span> {event.period}
+              </span>
+              {event.memberCount && (
+                <span className="flex items-center gap-1">
+                  <span>👥</span> {event.memberCount}명
+                </span>
+              )}
+            </div>
+
+            {event.techStack && event.techStack.length > 0 && (
+              <div className={`mb-4 ${isRight ? '' : 'flex flex-col items-end'}`}>
+                <p className="text-xs text-[#AAAAAA] m-0 mb-2">기술 스택</p>
+                <div className={`flex flex-wrap gap-2 ${isRight ? '' : 'justify-end'}`}>
+                  {event.techStack.map((tech) => (
+                    <span
+                      key={tech}
+                      className="px-3 py-1 rounded-full bg-brand-soft text-brand text-xs font-medium"
+                    >
+                      {tech}
+                    </span>
+                  ))}
+                </div>
+              </div>
+            )}
+
+            <div className={`mb-4 ${isRight ? '' : 'text-right'}`}>
+              <p className="text-xs text-[#AAAAAA] m-0 mb-2">프로젝트 소개</p>
+              <p className="text-sm text-ink leading-6 m-0 whitespace-pre-line">{event.description}</p>
+            </div>
+
+            {event.images && event.images.length > 0 && (
+              <div className="grid grid-cols-3 gap-3 mt-2">
+                {event.images.map((src, index) => (
+                  <img
+                    key={index}
+                    src={src}
+                    alt={`${event.projectName} 이미지 ${index + 1}`}
+                    className="w-full aspect-[4/3] object-cover rounded-lg bg-[#F0F0F0]"
+                  />
+                ))}
+              </div>
+            )}
+          </div>
+        </>
       )}
     </div>
   );
diff --git a/src/stores/homeContentStore.js b/src/stores/homeContentStore.js
index c5d043a..867d5f2 100644
--- a/src/stores/homeContentStore.js
+++ b/src/stores/homeContentStore.js
@@ -34,10 +34,10 @@ const useHomeContentStore = create((set) => ({
       timeline: [...state.timeline, item],
     })),
 
-  updateRecruitHeading: (heading) => set({ recruitHeading: heading }),
-  updateRecruitInfoItem: (index, value) =>
+  updateRecruitContent: (heading, values) =>
     set((state) => ({
-      recruitInfoList: state.recruitInfoList.map((item, i) => (i === index ? { ...item, value } : item)),
+      recruitHeading: heading,
+      recruitInfoList: state.recruitInfoList.map((item, i) => ({ ...item, value: values[i] })),
     })),
 }));
 

From c927a3d3148f93e8e2faaa15fe328e4434e4dc77 Mon Sep 17 00:00:00 2001
From: PJW <pyojaewon03@gmail.com>
Date: Mon, 6 Jul 2026 11:37:22 +0900
Subject: [PATCH 3/3] =?UTF-8?q?fix=20:=20WEB-9=20=ED=94=BC=EB=93=9C?=
 =?UTF-8?q?=EB=B0=B1=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/hooks/useScrollReveal.js                 | 18 +++++++---
 src/pages/visitor/main/ActivitiesSection.jsx | 34 +++++++++++++++---
 src/pages/visitor/main/RecruitSection.jsx    |  6 ++--
 src/pages/visitor/main/TimelineSection.jsx   | 37 ++++++++++++++------
 4 files changed, 73 insertions(+), 22 deletions(-)

diff --git a/src/hooks/useScrollReveal.js b/src/hooks/useScrollReveal.js
index 46d1767..4e0dd76 100644
--- a/src/hooks/useScrollReveal.js
+++ b/src/hooks/useScrollReveal.js
@@ -6,7 +6,8 @@ import { useRef, useEffect, useCallback } from 'react';
  * @returns {Function} ref 콜백 — 감시할 DOM 요소에 ref={revealRef} 로 전달
  */
 export default function useScrollReveal() {
-  const revealRefs = useRef([]);
+  const observerRef = useRef(null);
+  const elementsRef = useRef([]);
 
   useEffect(() => {
     const observer = new IntersectionObserver(
@@ -20,14 +21,21 @@ export default function useScrollReveal() {
       },
       { threshold: 0.1 }
     );
+    observerRef.current = observer;
 
-    revealRefs.current.forEach((element) => element && observer.observe(element));
-    return () => observer.disconnect();
+    elementsRef.current.forEach((element) => observer.observe(element));
+
+    return () => {
+      observer.disconnect();
+      observerRef.current = null;
+    };
   }, []);
 
   return useCallback((element) => {
-    if (element && !revealRefs.current.includes(element)) {
-      revealRefs.current.push(element);
+    if (!element) return;
+    if (!elementsRef.current.includes(element)) {
+      elementsRef.current.push(element);
     }
+    observerRef.current?.observe(element);
   }, []);
 }
diff --git a/src/pages/visitor/main/ActivitiesSection.jsx b/src/pages/visitor/main/ActivitiesSection.jsx
index 3cfec47..87c2f1a 100644
--- a/src/pages/visitor/main/ActivitiesSection.jsx
+++ b/src/pages/visitor/main/ActivitiesSection.jsx
@@ -21,6 +21,27 @@ export default function ActivitiesSection({ isEditable = false }) {
     setDraftDescription(activities[index].description);
   };
 
+  const DESCRIPTION_LINE_LENGTH = 30;
+
+  const handleDescriptionChange = (value) => {
+    let [firstLine, ...restLines] = value.split('\n');
+    let secondLine = restLines.join('');
+
+    if (firstLine.length > DESCRIPTION_LINE_LENGTH) {
+      secondLine = firstLine.slice(DESCRIPTION_LINE_LENGTH) + secondLine;
+      firstLine = firstLine.slice(0, DESCRIPTION_LINE_LENGTH);
+    }
+    secondLine = secondLine.slice(0, DESCRIPTION_LINE_LENGTH);
+
+    setDraftDescription(restLines.length > 0 || secondLine ? `${firstLine}\n${secondLine}` : firstLine);
+  };
+
+  const handleDescriptionKeyDown = (event) => {
+    if (event.key === 'Enter' && draftDescription.includes('\n')) {
+      event.preventDefault();
+    }
+  };
+
   const handleSaveClick = (index) => {
     if (!draftTitle.trim() || !draftDescription.trim()) {
       alert('내용을 입력해 주세요.');
@@ -96,20 +117,23 @@ export default function ActivitiesSection({ isEditable = false }) {
                       value={draftTitle}
                       onChange={(event) => setDraftTitle(event.target.value)}
                       placeholder="활동 제목"
+                      maxLength={20}
                       className="mb-5 w-full rounded-md border border-line px-3 py-2 text-center text-lg font-bold text-ink"
                     />
                     <textarea
                       value={draftDescription}
-                      onChange={(event) => setDraftDescription(event.target.value)}
-                      placeholder="활동 설명"
-                      rows={3}
+                      onChange={(event) => handleDescriptionChange(event.target.value)}
+                      onKeyDown={handleDescriptionKeyDown}
+                      placeholder="활동 설명 (최대 2줄)"
+                      rows={2}
+                      maxLength={61}
                       className="w-full resize-none rounded-md border border-line px-3 py-2 text-center text-sm text-ink-sub"
                     />
                   </>
                 ) : (
                   <>
-                    <h3 className="text-lg font-bold text-ink mb-5">{activity.title}</h3>
-                    <p className="text-sm text-ink-sub leading-7 m-0 whitespace-pre-line">
+                    <h3 className="w-full text-lg font-bold text-ink mb-5 break-words">{activity.title}</h3>
+                    <p className="w-full text-sm text-ink-sub leading-7 m-0 whitespace-pre-line break-words">
                       {activity.description}
                     </p>
                   </>
diff --git a/src/pages/visitor/main/RecruitSection.jsx b/src/pages/visitor/main/RecruitSection.jsx
index 139f8db..e22c291 100644
--- a/src/pages/visitor/main/RecruitSection.jsx
+++ b/src/pages/visitor/main/RecruitSection.jsx
@@ -39,6 +39,7 @@ function RecruitEditForm({ heading, infoList, onSave, onCancel }) {
         value={headingValue}
         onChange={(event) => setHeadingValue(event.target.value)}
         rows={2}
+        maxLength={100}
         className="resize-none rounded-md border border-line px-3 py-2 text-center text-base font-bold text-ink"
       />
 
@@ -48,6 +49,7 @@ function RecruitEditForm({ heading, infoList, onSave, onCancel }) {
           <input
             value={values[index]}
             onChange={(event) => handleValueChange(index, event.target.value)}
+            maxLength={50}
             className="flex-1 rounded-md border border-line px-3 py-2 text-sm text-ink"
           />
         </div>
@@ -114,7 +116,7 @@ export default function RecruitSection({ isEditable = false }) {
           <>
             {/* 메인 카피 */}
             <h2
-              className="font-bold text-ink leading-relaxed mb-12"
+              className="break-words font-bold text-ink leading-relaxed mb-12"
               style={{ fontSize: 'clamp(1.4rem, 3vw, 1.9rem)' }}
             >
               {highlightOne(recruitHeading)}
@@ -123,7 +125,7 @@ export default function RecruitSection({ isEditable = false }) {
             {/* 모집 정보 – 카드 없이 텍스트 나열 */}
             <div className="mb-14 space-y-3">
               {recruitInfoList.map(({ label, value }) => (
-                <p key={label} className="text-base text-[#555] m-0">
+                <p key={label} className="break-words text-base text-[#555] m-0">
                   {label}: {value}
                 </p>
               ))}
diff --git a/src/pages/visitor/main/TimelineSection.jsx b/src/pages/visitor/main/TimelineSection.jsx
index 1906175..068a3dd 100644
--- a/src/pages/visitor/main/TimelineSection.jsx
+++ b/src/pages/visitor/main/TimelineSection.jsx
@@ -146,20 +146,34 @@ const TimelineEditForm = forwardRef(function TimelineEditForm({ event, onSave, o
   return (
     <div className="flex flex-col gap-4 text-left" onClick={(e) => e.stopPropagation()}>
       <div className="grid grid-cols-2 gap-3">
-        <input className={inputClass} value={year} onChange={(e) => setYear(e.target.value)} placeholder="연도" />
+        <input
+          className={inputClass}
+          value={year}
+          onChange={(e) => setYear(e.target.value)}
+          placeholder="연도"
+          maxLength={9}
+        />
         <input
           className={inputClass}
           value={projectName}
           onChange={(e) => setProjectName(e.target.value)}
           placeholder="프로젝트명"
+          maxLength={30}
         />
       </div>
-      <input className={inputClass} value={award} onChange={(e) => setAward(e.target.value)} placeholder="수상 내역" />
+      <input
+        className={inputClass}
+        value={award}
+        onChange={(e) => setAward(e.target.value)}
+        placeholder="수상 내역"
+        maxLength={50}
+      />
       <input
         className={inputClass}
         value={activity}
         onChange={(e) => setActivity(e.target.value)}
         placeholder="주요 활동 요약"
+        maxLength={60}
       />
 
       <div className="grid grid-cols-2 gap-3">
@@ -168,14 +182,14 @@ const TimelineEditForm = forwardRef(function TimelineEditForm({ event, onSave, o
           <div className="flex items-center gap-2">
             <input
               type="month"
-              className={inputClass}
+              className={`${inputClass} min-w-0 flex-1`}
               value={periodStart}
               onChange={(e) => setPeriodStart(e.target.value)}
             />
-            <span className="text-ink-sub">-</span>
+            <span className="shrink-0 text-ink-sub">-</span>
             <input
               type="month"
-              className={inputClass}
+              className={`${inputClass} min-w-0 flex-1`}
               value={periodEnd}
               onChange={(e) => setPeriodEnd(e.target.value)}
             />
@@ -191,6 +205,7 @@ const TimelineEditForm = forwardRef(function TimelineEditForm({ event, onSave, o
               value={memberCount}
               onChange={(e) => handleMemberCountChange(e.target.value)}
               placeholder="숫자만 입력"
+              maxLength={3}
             />
             <span className="shrink-0 text-sm text-ink-sub">명</span>
           </div>
@@ -207,6 +222,7 @@ const TimelineEditForm = forwardRef(function TimelineEditForm({ event, onSave, o
                 onChange={(e) => handleTechStackChange(index, e.target.value)}
                 onKeyDown={(e) => handleTechStackKeyDown(index, e)}
                 placeholder="기술 스택"
+                maxLength={20}
                 className="w-24 bg-transparent text-xs text-brand outline-none"
               />
               <button
@@ -238,6 +254,7 @@ const TimelineEditForm = forwardRef(function TimelineEditForm({ event, onSave, o
           value={description}
           onChange={(e) => setDescription(e.target.value)}
           placeholder="프로젝트 소개를 입력해 주세요."
+          maxLength={300}
         />
       </div>
 
@@ -347,12 +364,12 @@ function TimelineCard({ event, isRight, isEditing, formRef, onSaveEdit, onCancel
       ) : (
         <>
           <div className={isRight ? '' : 'ml-auto'}>
-            <p className="text-sm text-brand font-bold m-0 mb-2">
+            <p className="text-sm text-brand font-bold m-0 mb-2 break-words">
               {event.year}
               {event.projectName ? `, ${event.projectName}` : ''}
             </p>
-            <p className="text-base font-bold text-ink m-0 mb-2">{event.award}</p>
-            <p className="text-xs text-[#AAAAAA] m-0">{event.activity}</p>
+            <p className="text-base font-bold text-ink m-0 mb-2 break-words">{event.award}</p>
+            <p className="text-xs text-[#AAAAAA] m-0 break-words">{event.activity}</p>
           </div>
 
           <div
@@ -380,7 +397,7 @@ function TimelineCard({ event, isRight, isEditing, formRef, onSaveEdit, onCancel
                   {event.techStack.map((tech) => (
                     <span
                       key={tech}
-                      className="px-3 py-1 rounded-full bg-brand-soft text-brand text-xs font-medium"
+                      className="max-w-full break-words px-3 py-1 rounded-full bg-brand-soft text-brand text-xs font-medium"
                     >
                       {tech}
                     </span>
@@ -391,7 +408,7 @@ function TimelineCard({ event, isRight, isEditing, formRef, onSaveEdit, onCancel
 
             <div className={`mb-4 ${isRight ? '' : 'text-right'}`}>
               <p className="text-xs text-[#AAAAAA] m-0 mb-2">프로젝트 소개</p>
-              <p className="text-sm text-ink leading-6 m-0 whitespace-pre-line">{event.description}</p>
+              <p className="text-sm text-ink leading-6 m-0 whitespace-pre-line break-words">{event.description}</p>
             </div>
 
             {event.images && event.images.length > 0 && (