From c524626a00b7d1c7ded939758d6afbc7c8898bde Mon Sep 17 00:00:00 2001
From: wallace <mspark@robotegra.com>
Date: Wed, 5 Nov 2025 16:15:17 +0900
Subject: [PATCH] =?UTF-8?q?chevron=20=EC=A0=81=EC=9A=A9=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app/page.tsx       |  84 +++++++++++++++++++++++++--------------------
 public/chevron.svg |   3 ++
 public/logo.png    | Bin 0 -> 2440 bytes
 3 files changed, 50 insertions(+), 37 deletions(-)
 create mode 100644 public/chevron.svg
 create mode 100644 public/logo.png

diff --git a/app/page.tsx b/app/page.tsx
index 50a521c..f1ac40f 100644
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -5,10 +5,8 @@ import { useState } from "react";
 
 // 이미지 상수
 const logoImage = "http://localhost:3845/assets/89fda8e949171025b1232bae70fc9d442e4e70c8.png";
-const chevronIcon = "http://localhost:3845/assets/6abc26b721560f9d3c51cf552531775f54f2f86a.svg";
+const chevronIcon = "/chevron.svg";
 const heroImage = "http://localhost:3845/assets/02d8c5116625dec34c335abdf02727a333ee1e42.png";
-const chevronIcon1 = "http://localhost:3845/assets/ad74d16bce8358831f1349a912d7e02bb0efaa84.svg";
-const chevronIcon2 = "http://localhost:3845/assets/f671b394255e49d772f588cdc8bd6e9dfd423281.svg";
 const lineIcon = "http://localhost:3845/assets/2fbce31172577fb51bb8028f779906af08a2aef0.svg";
 
 // 과목 이미지들
@@ -31,6 +29,9 @@ const courses = [
 export default function Home() {
   const [isMobileMenuOpen, setIsMobileMenuOpen] = useState(false);
   const [isUserMenuOpen, setIsUserMenuOpen] = useState(false);
+  const [isCourseExpanded, setIsCourseExpanded] = useState(false);
+  const [isMoreExpanded, setIsMoreExpanded] = useState(false);
+  const [isNoticeExpanded, setIsNoticeExpanded] = useState(false);
 
   return (
     <div className="flex flex-col flex-1 bg-white items-center">
@@ -43,15 +44,15 @@ export default function Home() {
               {/* Company 로고 */}
               <div className="flex items-center gap-2">
                 <div className="h-9 relative w-[46.703px]">
-                  <img 
-                    alt="XR LMS Logo" 
-                    className="h-full w-full object-contain" 
-                    src={logoImage} 
+                  <img
+                    alt="XR LMS Logo"
+                    className="h-full w-full object-contain"
+                    src={logoImage}
                   />
                 </div>
                 <h1 className="text-2xl font-bold text-black leading-[1.45] whitespace-pre">XR LMS</h1>
               </div>
-              
+
               {/* 네비게이션 메뉴 */}
               <nav className="hidden md:flex items-center">
                 <div className="flex gap-0.5">
@@ -73,7 +74,7 @@ export default function Home() {
                 </div>
               </nav>
             </div>
-            
+
             {/* 사용자 메뉴 그룹 */}
             <nav className="flex items-center gap-6 shrink-0">
               <div className="hidden md:flex items-center gap-6">
@@ -89,10 +90,10 @@ export default function Home() {
                     className="flex items-center gap-1 px-4 py-2 text-[#5f5f5f] font-bold text-base hover:text-blue-600 transition h-9"
                   >
                     <span>조유주</span>
-                    <div className="rotate-180">
-                      <img 
-                        src={chevronIcon} 
-                        alt="chevron" 
+                    <div className={`transition-transform duration-200 ${isUserMenuOpen ? 'rotate-180' : ''}`}>
+                      <img
+                        src={chevronIcon}
+                        alt="chevron"
                         className="w-6 h-6"
                       />
                     </div>
@@ -110,7 +111,7 @@ export default function Home() {
                   )}
                 </div>
               </div>
-              
+
               {/* 모바일 햄버거 메뉴 아이콘 */}
               <button
                 className="md:hidden p-2 text-gray-700 hover:text-blue-600 transition"
@@ -142,7 +143,7 @@ export default function Home() {
               </button>
             </nav>
           </div>
-          
+
           {/* 모바일 메뉴 */}
           {isMobileMenuOpen && (
             <div className="md:hidden border-t border-gray-200 py-4">
@@ -159,7 +160,7 @@ export default function Home() {
                   >
                     내 강의실
                   </Link>
-                  <Link 
+                  <Link
                     href="#"
                     className="px-4 py-2 text-gray-700 hover:text-blue-600 transition font-bold"
                   >
@@ -177,10 +178,10 @@ export default function Home() {
         {/* Hero 배너 */}
         <div className="flex-1 min-h-0 overflow-hidden relative rounded-xl self-stretch">
           <div className="absolute inset-0">
-            <img 
-              alt="Hero Banner" 
-              className="absolute inset-0 max-w-none object-cover w-full h-full" 
-              src={heroImage} 
+            <img
+              alt="Hero Banner"
+              className="absolute inset-0 max-w-none object-cover w-full h-full"
+              src={heroImage}
             />
           </div>
           <div className="absolute bottom-[60px] left-1/2 -translate-x-1/2 flex flex-col gap-2 items-start text-white text-center w-[496px]">
@@ -251,11 +252,14 @@ export default function Home() {
                           </h5>
                         </div>
                       </div>
-                      <div className="flex items-center justify-center shrink-0">
-                        <div className="rotate-180">
-                          <img src={chevronIcon1} alt="chevron" className="w-6 h-6" />
+                      <button
+                        onClick={() => setIsCourseExpanded(!isCourseExpanded)}
+                        className="flex items-center justify-center shrink-0"
+                      >
+                        <div className={`transition-transform duration-200 ${isCourseExpanded ? 'rotate-180' : ''}`}>
+                          <img src={chevronIcon} alt="chevron" className="w-6 h-6" />
                         </div>
-                      </div>
+                      </button>
                     </div>
                     <div className="flex items-center justify-between w-full">
                       <div className="flex gap-10 items-start">
@@ -292,24 +296,27 @@ export default function Home() {
               </p>
             </div>
           </div>
-          <div className="flex gap-0.5 items-center">
+          <button
+            onClick={() => setIsMoreExpanded(!isMoreExpanded)}
+            className="flex gap-0.5 items-center"
+          >
             <p className="font-semibold leading-[1.6] text-[14px] text-[#6e6e6e] text-nowrap tracking-[-0.14px]">
               더보기
             </p>
-            <div className="overflow-hidden shrink-0 w-4 h-4">
-              <img src={chevronIcon2} alt="chevron" className="block max-w-none w-full h-full" />
+            <div className={`overflow-hidden shrink-0 w-4 h-4 transition-transform duration-200 ${isMoreExpanded ? 'rotate-180' : ''}`}>
+              <img src={chevronIcon} alt="chevron" className="block max-w-none w-full h-full" />
             </div>
-          </div>
+          </button>
         </div>
         <div className="flex gap-8 items-center justify-center w-full">
           {courses.map((course, idx) => (
             <div key={idx} className="flex-1 flex flex-col gap-4 items-start rounded-lg">
               <div className="h-[230px] overflow-hidden relative rounded-xl w-full">
                 <div className="absolute inset-0">
-                  <img 
-                    alt={course.title} 
-                    className="absolute inset-0 max-w-none object-cover w-full h-full" 
-                    src={course.image} 
+                  <img
+                    alt={course.title}
+                    className="absolute inset-0 max-w-none object-cover w-full h-full"
+                    src={course.image}
                   />
                 </div>
                 {course.hasNew && (
@@ -341,14 +348,17 @@ export default function Home() {
               <div className="flex flex-col h-[44px] justify-center text-[#333c47] text-[19px] text-center tracking-[-0.19px] w-[66px]">
                 <p className="font-bold leading-[1.5]">공지사항</p>
               </div>
-              <div className="flex gap-0.5 items-center">
+              <button
+                onClick={() => setIsNoticeExpanded(!isNoticeExpanded)}
+                className="flex gap-0.5 items-center"
+              >
                 <p className="font-semibold leading-[1.6] text-[14px] text-[#6e6e6e] text-nowrap tracking-[-0.14px]">
                   목록보기
                 </p>
-                <div className="overflow-hidden shrink-0 w-4 h-4">
-                  <img src={chevronIcon2} alt="chevron" className="block max-w-none w-full h-full" />
+                <div className={`overflow-hidden shrink-0 w-4 h-4 transition-transform duration-200 ${isNoticeExpanded ? 'rotate-180' : ''}`}>
+                  <img src={chevronIcon} alt="chevron" className="block max-w-none w-full h-full" />
                 </div>
-              </div>
+              </button>
             </div>
             <div className="flex-1 flex flex-col items-start">
               {[
@@ -356,7 +366,7 @@ export default function Home() {
                 { category: "점검", title: "방사선 폐기 VR 실습 서버 정기점검 안내", date: "2025. 12. 12. (화)" },
                 { category: "점검", title: "방사선 폐기 VR 실습 서버 정기점검 안내", date: "2025. 12. 12. (화)" },
               ].map((notice, idx) => (
-                <div 
+                <div
                   key={idx}
                   className={`flex gap-2 h-11 items-center px-2 py-3 w-full ${idx < 2 ? 'border-b border-black/10' : ''}`}
                 >
diff --git a/public/chevron.svg b/public/chevron.svg
new file mode 100644
index 0000000..0badde4
--- /dev/null
+++ b/public/chevron.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18.7071 8.29289C19.0976 8.68342 19.0976 9.31658 18.7071 9.70711L12.7071 15.7071C12.3166 16.0976 11.6834 16.0976 11.2929 15.7071L5.29289 9.70711C4.90237 9.31658 4.90237 8.68342 5.29289 8.29289C5.68342 7.90237 6.31658 7.90237 6.70711 8.29289L12 13.5858L17.2929 8.29289C17.6834 7.90237 18.3166 7.90237 18.7071 8.29289Z" fill="#5F5F5F"/>
+</svg>
diff --git a/public/logo.png b/public/logo.png
new file mode 100644
index 0000000000000000000000000000000000000000..4add0d7ad838d8d6407ee91f22ee8ef01534e229
GIT binary patch
literal 2440
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
GLSTZeQLc^v

literal 0
HcmV?d00001