chevron 적용용

2025-11-05 16:15:17 +09:00
parent 4663dd5ba6
commit c524626a00
3 changed files with 50 additions and 37 deletions
--- 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' : ''}`}
                >
--- a/public/chevron.svg
+++ 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>
--- a/public/logo.png
+++ b/public/logo.png