공지사항 작업, 등록폼 디자인 수정1

src/app/admin/courses/CourseRegistrationModal.tsx

@@ -173,10 +173,10 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
                     }
                   }}
                   placeholder="교육 과정명을 입력해 주세요."
-                  className={`h-[40px] px-3 py-2 border rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:ring-2 ${
+                  className={`h-[40px] px-3 py-2 border rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none ${
                     errors.courseName
-                      ? "border-[#f64c4c] focus:ring-[#f64c4c] focus:border-[#f64c4c]"
+                      ? "border-[#f64c4c] focus:shadow-[inset_0_0_0_1px_#333c47]"
-                      : "border-[#dee1e6] focus:ring-[#1f2b91] focus:border-transparent"
+                      : "border-[#dee1e6] focus:shadow-[inset_0_0_0_1px_#333c47]"
                   }`}
                 />
                 {errors.courseName && (
@@ -193,10 +193,10 @@ export default function CourseRegistrationModal({ open, onClose, onSave, onDelet
                   <button
                     type="button"
                     onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-                    className={`w-full h-[40px] px-3 py-2 border rounded-[8px] bg-white flex items-center justify-between text-left focus:outline-none focus:ring-2 cursor-pointer ${
+                    className={`w-full h-[40px] px-3 py-2 border rounded-[8px] bg-white flex items-center justify-between text-left focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47] cursor-pointer ${
                       errors.instructor
-                        ? "border-[#f64c4c] focus:ring-[#f64c4c] focus:border-[#f64c4c]"
+                        ? "border-[#f64c4c]"
-                        : "border-[#dee1e6] focus:ring-[#1f2b91] focus:border-transparent"
+                        : "border-[#dee1e6]"
                     }`}
                   >
                     <span

src/app/admin/courses/page.tsx

@@ -117,7 +117,7 @@ export default function AdminCoursesPage() {
               <div className="flex-1 pt-2 flex flex-col">
                 {courses.length === 0 ? (
                   <div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
-                    <p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
+                    <p className="text-[16px] font-medium leading-[1.5] text-[#333c47] text-center">
                       등록된 교육과정이 없습니다.
                       <br />
                       과목을 등록해주세요.

src/app/admin/lessons/page.tsx

@@ -5,11 +5,21 @@ import AdminSidebar from "@/app/components/AdminSidebar";
 import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
 import DropdownIcon from "@/app/svgs/dropdownicon";
 import BackArrowSvg from "@/app/svgs/backarrow";
-import { MOCK_COURSES } from "@/app/admin/courses/mockData";
+import { MOCK_COURSES, MOCK_CURRENT_USER } from "@/app/admin/courses/mockData";
+import CloseXOSvg from "@/app/svgs/closexo";
+
+type Lesson = {
+  id: string;
+  courseName: string; // 교육과정명
+  lessonName: string; // 강좌명
+  attachments: string; // 첨부파일 (예: "강좌영상 3개, VR콘텐츠 2개, 평가문제 1개")
+  questionCount: number; // 학습 평가 문제 수
+  createdBy: string; // 등록자
+  createdAt: string; // 등록일
+};
 
 export default function AdminLessonsPage() {
-  // TODO: 나중에 실제 데이터로 교체
+  const [lessons, setLessons] = useState<Lesson[]>([]);
-  const items: any[] = [];
   const [currentPage, setCurrentPage] = useState(1);
   const [isRegistrationMode, setIsRegistrationMode] = useState(false);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false);
@@ -20,17 +30,27 @@ export default function AdminLessonsPage() {
   const [lessonName, setLessonName] = useState("");
   const [learningGoal, setLearningGoal] = useState("");
   const [courseVideoCount, setCourseVideoCount] = useState(0);
+  const [courseVideoFiles, setCourseVideoFiles] = useState<string[]>([]);
   const [vrContentCount, setVrContentCount] = useState(0);
+  const [vrContentFiles, setVrContentFiles] = useState<string[]>([]);
+  const [questionFileCount, setQuestionFileCount] = useState(0);
   
-  const totalCount = useMemo(() => items.length, [items]);
+  const totalCount = useMemo(() => lessons.length, [lessons]);
   
   const ITEMS_PER_PAGE = 10;
-  const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);
+  const sortedLessons = useMemo(() => {
-  const paginatedItems = useMemo(() => {
+    return [...lessons].sort((a, b) => {
+      // 생성일 내림차순 정렬 (최신 날짜가 먼저)
+      return b.createdAt.localeCompare(a.createdAt);
+    });
+  }, [lessons]);
+  
+  const totalPages = Math.ceil(sortedLessons.length / ITEMS_PER_PAGE);
+  const paginatedLessons = useMemo(() => {
     const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
     const endIndex = startIndex + ITEMS_PER_PAGE;
-    return items.slice(startIndex, endIndex);
+    return sortedLessons.slice(startIndex, endIndex);
-  }, [items, currentPage]);
+  }, [sortedLessons, currentPage]);
 
   // 교육과정 옵션 - mockData에서 가져오기
   const courseOptions = useMemo(() => 
@@ -67,13 +87,67 @@ export default function AdminLessonsPage() {
     setLessonName("");
     setLearningGoal("");
     setCourseVideoCount(0);
+    setCourseVideoFiles([]);
     setVrContentCount(0);
+    setVrContentFiles([]);
+    setQuestionFileCount(0);
   };
 
   const handleRegisterClick = () => {
     setIsRegistrationMode(true);
   };
 
+  const handleSaveClick = () => {
+    // 유효성 검사
+    if (!selectedCourse || !lessonName) {
+      // TODO: 에러 메시지 표시
+      return;
+    }
+
+    // 첨부파일 정보 문자열 생성
+    const attachmentParts: string[] = [];
+    if (courseVideoCount > 0) {
+      attachmentParts.push(`강좌영상 ${courseVideoCount}개`);
+    }
+    if (vrContentCount > 0) {
+      attachmentParts.push(`VR콘텐츠 ${vrContentCount}개`);
+    }
+    if (questionFileCount > 0) {
+      attachmentParts.push(`평가문제 ${questionFileCount}개`);
+    }
+    const attachments = attachmentParts.length > 0 
+      ? attachmentParts.join(', ') 
+      : '없음';
+
+    // 교육과정명 가져오기
+    const courseName = courseOptions.find(c => c.id === selectedCourse)?.name || '';
+
+    // 새 강좌 생성
+    const newLesson: Lesson = {
+      id: String(Date.now()),
+      courseName,
+      lessonName,
+      attachments,
+      questionCount: questionFileCount,
+      createdBy: MOCK_CURRENT_USER,
+      createdAt: new Date().toISOString().split('T')[0],
+    };
+
+    // 강좌 목록에 추가
+    setLessons(prev => [...prev, newLesson]);
+
+    // 등록 모드 종료 및 폼 초기화
+    setIsRegistrationMode(false);
+    setSelectedCourse("");
+    setLessonName("");
+    setLearningGoal("");
+    setCourseVideoCount(0);
+    setCourseVideoFiles([]);
+    setVrContentCount(0);
+    setVrContentFiles([]);
+    setQuestionFileCount(0);
+  };
+
   return (
     <div className="min-h-screen flex flex-col bg-white">
       {/* 메인 레이아웃 */}
@@ -124,7 +198,7 @@ export default function AdminLessonsPage() {
                               <button
                                 type="button"
                                 onClick={() => setIsDropdownOpen(!isDropdownOpen)}
-                                className="w-full h-[40px] px-[12px] py-[8px] border border-[#dee1e6] rounded-[8px] bg-white flex items-center justify-between focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent cursor-pointer"
+                                className="w-full h-[40px] px-[12px] py-[8px] border border-[#dee1e6] rounded-[8px] bg-white flex items-center justify-between focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47] cursor-pointer"
                               >
                                 <span className={`text-[16px] font-normal leading-[1.5] flex-1 text-left ${
                                   selectedCourse ? 'text-[#1b2027]' : 'text-[#6c7682]'
@@ -173,7 +247,7 @@ export default function AdminLessonsPage() {
                               value={lessonName}
                               onChange={(e) => setLessonName(e.target.value)}
                               placeholder="강좌명을 입력해 주세요."
-                              className="h-[40px] px-[12px] py-[8px] border border-[#dee1e6] rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
+                              className="h-[40px] px-[12px] py-[8px] border border-[#dee1e6] rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47]"
                             />
                           </div>
 
@@ -191,7 +265,7 @@ export default function AdminLessonsPage() {
                                   }
                                 }}
                                 placeholder="내용을 입력해 주세요. (최대 1,000자)"
-                                className="w-full h-[160px] px-[12px] py-[8px] border border-[#dee1e6] rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent resize-none"
+                                className="w-full h-[160px] px-[12px] py-[8px] border border-[#dee1e6] rounded-[8px] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:shadow-[inset_0_0_0_1px_#333c47] resize-none"
                               />
                               <div className="absolute bottom-[8px] right-[12px]">
                                 <p className="text-[13px] font-normal leading-[1.4] text-[#6c7682] text-right">
@@ -220,18 +294,69 @@ export default function AdminLessonsPage() {
                                   30MB 미만 파일
                                 </span>
                               </div>
-                              <button
+                              <label className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center">
-                                type="button"
+                                <span>첨부</span>
-                                className="h-[32px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer"
+                                <input
-                              >
+                                  type="file"
-                                첨부
+                                  multiple
-                              </button>
+                                  accept=".mp4,video/mp4"
+                                  className="hidden"
+                                  onChange={(e) => {
+                                    const files = e.target.files;
+                                    if (!files) return;
+
+                                    const MAX_SIZE = 30 * 1024 * 1024; // 30MB
+                                    const mp4Files: string[] = [];
+                                    Array.from(files).forEach((file) => {
+                                      // mp4 파일이고 30MB 이하인 파일만 필터링
+                                      if (file.name.toLowerCase().endsWith('.mp4') && file.size <= MAX_SIZE) {
+                                        mp4Files.push(file.name);
+                                      }
+                                    });
+
+                                    if (courseVideoCount + mp4Files.length <= 10) {
+                                      setCourseVideoFiles(prev => [...prev, ...mp4Files]);
+                                      setCourseVideoCount(prev => prev + mp4Files.length);
+                                    }
+                                    // input 초기화 (같은 파일 다시 선택 가능하도록)
+                                    e.target.value = '';
+                                  }}
+                                />
+                              </label>
                             </div>
-                            <div className="h-[64px] border border-[#dee1e6] rounded-[8px] bg-gray-50 flex items-center justify-center">
+                            <div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
+                              {courseVideoFiles.length === 0 ? (
+                                <div className="h-[64px] flex items-center justify-center">
                                   <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
                                     강좌 주제별 영상 파일을 첨부해주세요.
                                   </p>
                                 </div>
+                              ) : (
+                                <div className="flex flex-col py-[12px]">
+                                  {courseVideoFiles.map((fileName, index) => (
+                                    <div
+                                      key={index}
+                                      className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
+                                    >
+                                      <p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
+                                        {fileName}
+                                      </p>
+                                      <button
+                                        type="button"
+                                        onClick={() => {
+                                          setCourseVideoFiles(prev => prev.filter((_, i) => i !== index));
+                                          setCourseVideoCount(prev => prev - 1);
+                                        }}
+                                        className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
+                                        aria-label="파일 삭제"
+                                      >
+                                        <CloseXOSvg />
+                                      </button>
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
                           </div>
 
                           {/* VR 콘텐츠 */}
@@ -239,24 +364,75 @@ export default function AdminLessonsPage() {
                             <div className="flex items-center justify-between h-[32px]">
                               <div className="flex items-center gap-[8px]">
                                 <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682]">
-                                  VR 콘텐츠 <span className="font-normal">({vrContentCount}/10)</span>
+                                  VR 콘텐츠 ({vrContentCount}/10)
                                 </label>
                                 <span className="text-[13px] font-normal leading-[1.4] text-[#8c95a1]">
                                   30MB 미만 파일
                                 </span>
                               </div>
-                              <button
+                              <label className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center">
-                                type="button"
+                                <span>첨부</span>
-                                className="h-[32px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer"
+                                <input
-                              >
+                                  type="file"
-                                첨부
+                                  multiple
-                              </button>
+                                  accept=".zip,application/zip"
+                                  className="hidden"
+                                  onChange={(e) => {
+                                    const files = e.target.files;
+                                    if (!files) return;
+
+                                    const MAX_SIZE = 30 * 1024 * 1024; // 30MB
+                                    const zipFiles: string[] = [];
+                                    Array.from(files).forEach((file) => {
+                                      // zip 파일이고 30MB 이하인 파일만 필터링
+                                      if (file.name.toLowerCase().endsWith('.zip') && file.size <= MAX_SIZE) {
+                                        zipFiles.push(file.name);
+                                      }
+                                    });
+
+                                    if (vrContentCount + zipFiles.length <= 10) {
+                                      setVrContentFiles(prev => [...prev, ...zipFiles]);
+                                      setVrContentCount(prev => prev + zipFiles.length);
+                                    }
+                                    // input 초기화 (같은 파일 다시 선택 가능하도록)
+                                    e.target.value = '';
+                                  }}
+                                />
+                              </label>
                             </div>
-                            <div className="h-[64px] border border-[#dee1e6] rounded-[8px] bg-gray-50 flex items-center justify-center">
+                            <div className="border border-[#dee1e6] rounded-[8px] bg-gray-50">
+                              {vrContentFiles.length === 0 ? (
+                                <div className="h-[64px] flex items-center justify-center">
                                   <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
                                     VR 학습 체험용 콘텐츠 파일을 첨부해주세요.
                                   </p>
                                 </div>
+                              ) : (
+                                <div className="flex flex-col py-[12px]">
+                                  {vrContentFiles.map((fileName, index) => (
+                                    <div
+                                      key={index}
+                                      className="h-[40px] px-[20px] py-[12px] flex items-center gap-[12px]"
+                                    >
+                                      <p className="flex-1 text-[15px] font-normal leading-[1.5] text-[#333c47]">
+                                        {fileName}
+                                      </p>
+                                      <button
+                                        type="button"
+                                        onClick={() => {
+                                          setVrContentFiles(prev => prev.filter((_, i) => i !== index));
+                                          setVrContentCount(prev => prev - 1);
+                                        }}
+                                        className="size-[16px] flex items-center justify-center cursor-pointer hover:opacity-70 transition-opacity shrink-0"
+                                        aria-label="파일 삭제"
+                                      >
+                                        <CloseXOSvg />
+                                      </button>
+                                    </div>
+                                  ))}
+                                </div>
+                              )}
+                            </div>
                           </div>
 
                           {/* 학습 평가 문제 */}
@@ -277,12 +453,24 @@ export default function AdminLessonsPage() {
                                 >
                                   다운로드
                                 </button>
-                                <button
+                                <label className="h-[32px] w-[62px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer flex items-center justify-center">
-                                  type="button"
+                                  <span>첨부</span>
-                                  className="h-[32px] px-[4px] py-[3px] border border-[#8c95a1] rounded-[6px] bg-white text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap hover:bg-gray-50 transition-colors cursor-pointer"
+                                  <input
-                                >
+                                    type="file"
-                                  첨부
+                                    accept=".csv"
-                                </button>
+                                    className="hidden"
+                                    onChange={(e) => {
+                                      const files = e.target.files;
+                                      if (!files || files.length === 0) return;
+
+                                      const file = files[0];
+                                      // CSV 파일만 허용
+                                      if (file.name.toLowerCase().endsWith('.csv')) {
+                                        setQuestionFileCount(1);
+                                      }
+                                    }}
+                                  />
+                                </label>
                               </div>
                             </div>
                             <div className="h-[64px] border border-[#dee1e6] rounded-[8px] bg-gray-50 flex items-center justify-center">
@@ -295,7 +483,7 @@ export default function AdminLessonsPage() {
                       </div>
 
                       {/* 액션 버튼 */}
-                      <div className="flex items-center justify-center gap-[12px]">
+                      <div className="flex items-center justify-end gap-[12px]">
                         <button
                           type="button"
                           onClick={handleBackClick}
@@ -305,6 +493,7 @@ export default function AdminLessonsPage() {
                         </button>
                         <button
                           type="button"
+                          onClick={handleSaveClick}
                           className="h-[48px] px-[16px] rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white hover:bg-[#1a2478] transition-colors cursor-pointer"
                         >
                           저장하기
@@ -339,20 +528,72 @@ export default function AdminLessonsPage() {
 
                   {/* 콘텐츠 영역 */}
                   <div className="flex-1 pt-2 flex flex-col">
-                    {items.length === 0 ? (
+                    {lessons.length === 0 ? (
                       <div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
                         <p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
+                          <span className="block text-center">
                             등록된 강좌가 없습니다.
                             <br />
                             강좌를 등록해주세요.
+                          </span>
                         </p>
                       </div>
                     ) : (
                       <>
-                        {/* TODO: 테이블 또는 리스트를 여기에 추가 */}
+                        <div className="rounded-[8px]">
+                          <div className="w-full rounded-[8px] border border-[#dee1e6] overflow-visible">
+                            <table className="min-w-full border-collapse">
+                              <colgroup>
+                                <col />
+                                <col />
+                                <col />
+                                <col style={{ width: 140 }} />
+                                <col style={{ width: 120 }} />
+                                <col style={{ width: 120 }} />
+                              </colgroup>
+                              <thead>
+                                <tr className="h-12 bg-gray-50 text-left">
+                                  <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">교육과정명</th>
+                                  <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">강좌명</th>
+                                  <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">첨부파일</th>
+                                  <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">학습 평가 문제 수</th>
+                                  <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">등록자</th>
+                                  <th className="px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">등록일</th>
+                                </tr>
+                              </thead>
+                              <tbody>
+                                {paginatedLessons.map((lesson) => (
+                                  <tr
+                                    key={lesson.id}
+                                    className="h-12 hover:bg-[#F5F7FF] transition-colors"
+                                  >
+                                    <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                      {lesson.courseName}
+                                    </td>
+                                    <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                      {lesson.lessonName}
+                                    </td>
+                                    <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027]">
+                                      {lesson.attachments}
+                                    </td>
+                                    <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                      {lesson.questionCount}개
+                                    </td>
+                                    <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                      {lesson.createdBy}
+                                    </td>
+                                    <td className="border-t border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                      {lesson.createdAt}
+                                    </td>
+                                  </tr>
+                                ))}
+                              </tbody>
+                            </table>
+                          </div>
+                        </div>
                         
                         {/* 페이지네이션 - 10개 초과일 때만 표시 */}
-                        {items.length > ITEMS_PER_PAGE && (() => {
+                        {lessons.length > ITEMS_PER_PAGE && (() => {
                           // 페이지 번호를 10단위로 표시
                           const pageGroup = Math.floor((currentPage - 1) / 10);
                           const startPage = pageGroup * 10 + 1;

src/app/admin/notices/mockData.ts

@@ -0,0 +1,37 @@
+export type Notice = {
+  id: number;
+  title: string;
+  date: string; // 게시일
+  views: number; // 조회수
+  writer: string; // 작성자
+  content?: string[]; // 본문 내용 (상세 페이지용)
+  hasAttachment?: boolean; // 첨부파일 여부
+};
+
+// TODO: 나중에 DB에서 가져오도록 변경
+export const MOCK_NOTICES: Notice[] = [
+  {
+    id: 2,
+    title: '공지사항 제목이 노출돼요',
+    date: '2025-09-10',
+    views: 1230,
+    writer: '문지호',
+    content: [
+      '사이트 이용 관련 주요 변경 사항을 안내드립니다.',
+      '변경되는 내용은 공지일자로부터 즉시 적용됩니다.',
+    ],
+  },
+  {
+    id: 1,
+    title: '📢 방사선학 온라인 강의 수강 안내 및 필수 공지',
+    date: '2025-06-28',
+    views: 594,
+    writer: '문지호',
+    hasAttachment: true,
+    content: [
+      '온라인 강의 수강 방법과 필수 확인 사항을 안내드립니다.',
+      '수강 기간 및 출석, 과제 제출 관련 정책을 반드시 확인해 주세요.',
+    ],
+  },
+];
+

src/app/admin/notices/page.tsx

@@ -1,21 +1,95 @@
 'use client';
 
-import { useState, useMemo } from "react";
+import { useState, useMemo, useRef, ChangeEvent } from "react";
 import AdminSidebar from "@/app/components/AdminSidebar";
 import ChevronDownSvg from "@/app/svgs/chevrondownsvg";
+import BackArrowSvg from "@/app/svgs/backarrow";
+import { MOCK_NOTICES, type Notice } from "@/app/admin/notices/mockData";
 
 export default function AdminNoticesPage() {
-  // TODO: 나중에 실제 데이터로 교체
+  const [notices, setNotices] = useState<Notice[]>(MOCK_NOTICES);
-  const items: any[] = [];
   const [currentPage, setCurrentPage] = useState(1);
+  const [isWritingMode, setIsWritingMode] = useState(false);
+  const [title, setTitle] = useState('');
+  const [content, setContent] = useState('');
+  const [attachedFile, setAttachedFile] = useState<File | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  
+  const totalCount = useMemo(() => notices.length, [notices]);
+  
+  const characterCount = useMemo(() => content.length, [content]);
+  
+  const handleBack = () => {
+    setIsWritingMode(false);
+    setTitle('');
+    setContent('');
+    setAttachedFile(null);
+  };
+  
+  const handleFileAttach = () => {
+    fileInputRef.current?.click();
+  };
+  
+  const handleFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      if (file.size > 30 * 1024 * 1024) {
+        alert('30MB 미만의 파일만 첨부할 수 있습니다.');
+        return;
+      }
+      setAttachedFile(file);
+    }
+  };
+  
+  const handleSave = () => {
+    if (!title.trim()) {
+      alert('제목을 입력해주세요.');
+      return;
+    }
+    if (!content.trim()) {
+      alert('내용을 입력해주세요.');
+      return;
+    }
+    
+    // 새 공지사항 추가
+    const newNotice: Notice = {
+      id: notices.length > 0 ? Math.max(...notices.map(n => n.id)) + 1 : 1,
+      title: title.trim(),
+      date: new Date().toISOString().split('T')[0],
+      views: 0,
+      writer: '관리자', // TODO: 실제 작성자 정보 사용
+      content: content.split('\n'),
+      hasAttachment: attachedFile !== null,
+    };
+    
+    setNotices([newNotice, ...notices]);
+    handleBack();
+  };
+  
+  const handleCancel = () => {
+    if (title.trim() || content.trim() || attachedFile) {
+      if (confirm('작성 중인 내용이 있습니다. 정말 취소하시겠습니까?')) {
+        handleBack();
+      }
+    } else {
+      handleBack();
+    }
+  };
   
   const ITEMS_PER_PAGE = 10;
-  const totalPages = Math.ceil(items.length / ITEMS_PER_PAGE);
+  const sortedNotices = useMemo(() => {
-  const paginatedItems = useMemo(() => {
+    return [...notices].sort((a, b) => {
+      // 생성일 내림차순 정렬 (최신 날짜가 먼저)
+      return b.date.localeCompare(a.date);
+    });
+  }, [notices]);
+  
+  const totalPages = Math.ceil(sortedNotices.length / ITEMS_PER_PAGE);
+  const paginatedNotices = useMemo(() => {
     const startIndex = (currentPage - 1) * ITEMS_PER_PAGE;
     const endIndex = startIndex + ITEMS_PER_PAGE;
-    return items.slice(startIndex, endIndex);
+    return sortedNotices.slice(startIndex, endIndex);
-  }, [items, currentPage]);
+  }, [sortedNotices, currentPage]);
 
   return (
     <div className="min-h-screen flex flex-col bg-white">
@@ -30,6 +104,133 @@ export default function AdminNoticesPage() {
           {/* 메인 콘텐츠 */}
           <main className="w-[1120px] bg-white">
             <div className="h-full flex flex-col px-8">
+              {isWritingMode ? (
+                <>
+                  {/* 작성 모드 헤더 */}
+                  <div className="h-[100px] flex items-center">
+                    <div className="flex gap-3 items-center">
+                      <button
+                        type="button"
+                        onClick={handleBack}
+                        className="flex items-center justify-center w-8 h-8 cursor-pointer"
+                        aria-label="뒤로가기"
+                      >
+                        <BackArrowSvg width={32} height={32} />
+                      </button>
+                      <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
+                        공지사항 작성
+                      </h1>
+                    </div>
+                  </div>
+
+                  {/* 작성 폼 */}
+                  <div className="flex-1 flex flex-col gap-10 pb-20 pt-8 w-full">
+                    <div className="flex flex-col gap-6 w-full">
+                      {/* 제목 입력 */}
+                      <div className="flex flex-col gap-2 items-start justify-center w-full">
+                        <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] w-[100px]">
+                          제목
+                        </label>
+                        <input
+                          type="text"
+                          value={title}
+                          onChange={(e) => setTitle(e.target.value)}
+                          placeholder="제목을 입력해 주세요."
+                          className="w-full h-[40px] px-3 py-2 rounded-[8px] border border-[#dee1e6] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
+                        />
+                      </div>
+
+                      {/* 내용 입력 */}
+                      <div className="flex flex-col gap-2 items-start justify-center w-full">
+                        <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] w-[100px]">
+                          내용
+                        </label>
+                        <div className="relative w-full">
+                          <textarea
+                            value={content}
+                            onChange={(e) => {
+                              const newContent = e.target.value;
+                              if (newContent.length <= 1000) {
+                                setContent(newContent);
+                              }
+                            }}
+                            placeholder="내용을 입력해 주세요. (최대 1,000자 이내)"
+                            className="w-full h-[320px] px-3 py-2 rounded-[8px] border border-[#dee1e6] bg-white text-[16px] font-normal leading-[1.5] text-[#1b2027] placeholder:text-[#b1b8c0] resize-none focus:outline-none focus:ring-2 focus:ring-[#1f2b91] focus:border-transparent"
+                          />
+                          <div className="absolute bottom-3 right-3">
+                            <p className="text-[13px] font-normal leading-[1.4] text-[#6c7682] text-right">
+                              {characterCount}/1000
+                            </p>
+                          </div>
+                        </div>
+                      </div>
+
+                      {/* 첨부 파일 */}
+                      <div className="flex flex-col gap-2 items-start justify-center w-full">
+                        <div className="flex items-center justify-between h-8 w-full">
+                          <div className="flex items-center gap-3 flex-1 min-w-0">
+                            <label className="text-[15px] font-semibold leading-[1.5] text-[#6c7682] whitespace-nowrap">
+                              첨부 파일{' '}
+                              <span className="font-normal">
+                                ({attachedFile ? 1 : 0}/1)
+                              </span>
+                            </label>
+                            <p className="text-[13px] font-normal leading-[1.4] text-[#8c95a1] whitespace-nowrap">
+                              30MB 미만 파일
+                            </p>
+                          </div>
+                          <button
+                            type="button"
+                            onClick={handleFileAttach}
+                            className="h-[32px] w-[62px] px-[4px] py-[3px] rounded-[6px] border border-[#8c95a1] bg-white flex items-center justify-center cursor-pointer hover:bg-gray-50 transition-colors shrink-0"
+                          >
+                            <span className="text-[13px] font-medium leading-[1.4] text-[#4c5561] whitespace-nowrap">
+                              첨부
+                            </span>
+                          </button>
+                          <input
+                            ref={fileInputRef}
+                            type="file"
+                            onChange={handleFileChange}
+                            className="hidden"
+                            accept="*/*"
+                          />
+                        </div>
+                        <div className="h-16 w-full rounded-[8px] border border-[#dee1e6] bg-gray-50 flex items-center justify-center">
+                          {attachedFile ? (
+                            <p className="text-[14px] font-normal leading-[1.5] text-[#1b2027]">
+                              {attachedFile.name}
+                            </p>
+                          ) : (
+                            <p className="text-[14px] font-normal leading-[1.5] text-[#8c95a1] text-center">
+                              파일을 첨부해주세요.
+                            </p>
+                          )}
+                        </div>
+                      </div>
+                    </div>
+
+                    {/* 액션 버튼 */}
+                    <div className="flex gap-3 items-center justify-end shrink-0 w-full">
+                      <button
+                        type="button"
+                        onClick={handleCancel}
+                        className="h-12 px-8 rounded-[10px] bg-[#f1f3f5] text-[16px] font-semibold leading-[1.5] text-[#4c5561] whitespace-nowrap hover:bg-[#e5e8eb] transition-colors cursor-pointer"
+                      >
+                        취소
+                      </button>
+                      <button
+                        type="button"
+                        onClick={handleSave}
+                        className="h-12 px-4 rounded-[10px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors cursor-pointer"
+                      >
+                        저장하기
+                      </button>
+                    </div>
+                  </div>
+                </>
+              ) : (
+                <>
                   {/* 제목 영역 */}
                   <div className="h-[100px] flex items-center">
                     <h1 className="text-[24px] font-bold leading-[1.5] text-[#1b2027]">
@@ -37,20 +238,85 @@ export default function AdminNoticesPage() {
                     </h1>
                   </div>
 
+                  {/* 헤더 영역 (제목과 콘텐츠 사이) */}
+                  <div className="pt-2 pb-4 flex items-center justify-between">
+                    <p className="text-[15px] font-medium leading-[1.5] text-[#333c47] whitespace-nowrap">
+                      총 {totalCount}건
+                    </p>
+                    <button
+                      type="button"
+                      onClick={() => setIsWritingMode(true)}
+                      className="h-[40px] px-4 rounded-[8px] bg-[#1f2b91] text-[16px] font-semibold leading-[1.5] text-white whitespace-nowrap hover:bg-[#1a2478] transition-colors cursor-pointer"
+                    >
+                      작성하기
+                    </button>
+                  </div>
+
                   {/* 콘텐츠 영역 */}
-              <div className="flex-1 pt-8 flex flex-col">
+                  <div className="flex-1 pt-2 flex flex-col">
-                {items.length === 0 ? (
+                {notices.length === 0 ? (
                   <div className="rounded-lg border border-[#dee1e6] bg-white min-h-[400px] flex items-center justify-center">
                     <p className="text-[16px] font-medium leading-[1.5] text-[#333c47]">
-                      현재 관리할 수 있는 항목이 없습니다.
+                      등록된 공지사항이 없습니다.
+                      <br />
+                      공지사항을 등록해주세요.
                     </p>
                   </div>
                 ) : (
                   <>
-                    {/* TODO: 테이블 또는 리스트를 여기에 추가 */}
+                    <div className="rounded-[8px]">
+                      <div className="w-full rounded-[8px] border border-[#dee1e6] overflow-visible">
+                        <table className="min-w-full border-collapse">
+                          <colgroup>
+                            <col style={{ width: 80 }} />
+                            <col />
+                            <col style={{ width: 140 }} />
+                            <col style={{ width: 120 }} />
+                            <col style={{ width: 120 }} />
+                          </colgroup>
+                          <thead>
+                            <tr className="h-12 bg-gray-50 text-left">
+                              <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">번호</th>
+                              <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">제목</th>
+                              <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">게시일</th>
+                              <th className="border-r border-[#dee1e6] px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">조회수</th>
+                              <th className="px-4 text-[14px] font-semibold leading-[1.5] text-[#4c5561]">작성자</th>
+                            </tr>
+                          </thead>
+                          <tbody>
+                            {paginatedNotices.map((notice, index) => {
+                              // 번호는 전체 목록에서의 순서 (정렬된 목록 기준)
+                              const noticeNumber = sortedNotices.length - (currentPage - 1) * ITEMS_PER_PAGE - index;
+                              return (
+                                <tr
+                                  key={notice.id}
+                                  className="h-12 hover:bg-[#F5F7FF] transition-colors"
+                                >
+                                  <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap text-center">
+                                    {noticeNumber}
+                                  </td>
+                                  <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027]">
+                                    {notice.title}
+                                  </td>
+                                  <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                    {notice.date}
+                                  </td>
+                                  <td className="border-t border-r border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                    {notice.views.toLocaleString()}
+                                  </td>
+                                  <td className="border-t border-[#dee1e6] px-4 text-[13px] leading-[1.5] text-[#1b2027] whitespace-nowrap">
+                                    {notice.writer}
+                                  </td>
+                                </tr>
+                              );
+                            })}
+                          </tbody>
+                        </table>
+                      </div>
+                    </div>
                     
                     {/* 페이지네이션 - 10개 초과일 때만 표시 */}
-                    {items.length > ITEMS_PER_PAGE && (() => {
+                    {notices.length > ITEMS_PER_PAGE && (() => {
                       // 페이지 번호를 10단위로 표시
                       const pageGroup = Math.floor((currentPage - 1) / 10);
                       const startPage = pageGroup * 10 + 1;
@@ -135,6 +401,8 @@ export default function AdminNoticesPage() {
                   </>
                 )}
                   </div>
+                </>
+              )}
             </div>
           </main>
         </div>

src/app/notices/[id]/page.tsx

@@ -1,40 +1,7 @@
 import Link from 'next/link';
 import { notFound } from 'next/navigation';
 import BackCircleSvg from '../../svgs/backcirclesvg';
-
+import { MOCK_NOTICES } from '../../admin/notices/mockData';
-type NoticeItem = {
-  id: number;
-  title: string;
-  date: string;
-  views: number;
-  writer: string;
-  content: string[];
-};
-
-const DATA: NoticeItem[] = [
-  {
-    id: 2,
-    title: '공지사항 제목이 노출돼요',
-    date: '2025-09-10',
-    views: 1230,
-    writer: '문지호',
-    content: [
-      '사이트 이용 관련 주요 변경 사항을 안내드립니다.',
-      '변경되는 내용은 공지일자로부터 즉시 적용됩니다.',
-    ],
-  },
-  {
-    id: 1,
-    title: '📢 방사선학 온라인 강의 수강 안내 및 필수 공지',
-    date: '2025-06-28',
-    views: 594,
-    writer: '문지호',
-    content: [
-      '온라인 강의 수강 방법과 필수 확인 사항을 안내드립니다.',
-      '수강 기간 및 출석, 과제 제출 관련 정책을 반드시 확인해 주세요.',
-    ],
-  },
-];
 
 export default async function NoticeDetailPage({
   params,
@@ -43,8 +10,8 @@ export default async function NoticeDetailPage({
 }) {
   const { id } = await params;
   const numericId = Number(id);
-  const item = DATA.find((r) => r.id === numericId);
+  const item = MOCK_NOTICES.find((r) => r.id === numericId);
-  if (!item) return notFound();
+  if (!item || !item.content) return notFound();
 
   return (
     <div className="w-full bg-white">

src/app/notices/page.tsx

@@ -2,37 +2,14 @@
 
 import { useRouter } from 'next/navigation';
 import PaperClipSvg from '../svgs/paperclipsvg';
-
+import { MOCK_NOTICES } from '../admin/notices/mockData';
-type NoticeRow = {
-  id: number;
-  title: string;
-  date: string;
-  views: number;
-  writer: string;
-  hasAttachment?: boolean;
-};
-
-const rows: NoticeRow[] = [
-  {
-    id: 2,
-    title: '공지사항 제목이 노출돼요',
-    date: '2025-09-10',
-    views: 1230,
-    writer: '문지호',
-  },
-  {
-    id: 1,
-    title: '📢 방사선학 온라인 강의 수강 안내 및 필수 공지',
-    date: '2025-06-28',
-    views: 594,
-    writer: '문지호',
-    hasAttachment: true,
-  },
-];
 
 export default function NoticesPage() {
   const router = useRouter();
   
+  // 날짜 내림차순 정렬 (최신 날짜가 먼저)
+  const rows = [...MOCK_NOTICES].sort((a, b) => b.date.localeCompare(a.date));
+
   return (
     <div className="w-full bg-white">
       <div className="flex justify-center">
@@ -74,7 +51,10 @@ export default function NoticesPage() {
 
               {/* 바디 */}
               <div>
-                {rows.map((r) => (
+                {rows.map((r, index) => {
+                  // 번호는 정렬된 목록에서의 순서
+                  const noticeNumber = rows.length - index;
+                  return (
                     <div
                       key={r.id}
                       role="button"
@@ -91,7 +71,7 @@ export default function NoticesPage() {
                       ].join(' ')}
                     >
                       <div className="flex items-center justify-center px-2 whitespace-nowrap border-r border-[#DEE1E6]">
-                      {r.id}
+                        {noticeNumber}
                       </div>
                     <div
                       className="flex items-center gap-1.5 px-4 border-r border-[#DEE1E6] whitespace-nowrap overflow-hidden text-ellipsis"
@@ -110,7 +90,8 @@ export default function NoticesPage() {
                     </div>
                     <div className="flex items-center px-4">{r.writer}</div>
                     </div>
-                ))}
+                  );
+                })}
               </div>
             </div>
           </section>

src/app/svgs/closexo.tsx

@@ -0,0 +1,41 @@
+import React from "react";
+
+type CloseXOSvgProps = React.SVGProps<SVGSVGElement>;
+
+export default function CloseXOSvg(props: CloseXOSvgProps) {
+  return (
+    <svg
+      width="16"
+      height="16"
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...props}
+    >
+      <path
+        fillRule="evenodd"
+        clipRule="evenodd"
+        d="M8 14V14C4.686 14 2 11.314 2 8V8C2 4.686 4.686 2 8 2V2C11.314 2 14 4.686 14 8V8C14 11.314 11.314 14 8 14Z"
+        fill="#6C7682"
+        stroke="#6C7682"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.88661 6.11328L6.11328 9.88661"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M9.88661 9.88661L6.11328 6.11328"
+        stroke="white"
+        strokeWidth="1.5"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+}