chevron 적용용

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">
@@ -89,7 +90,7 @@ 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">
+                    <div className={`transition-transform duration-200 ${isUserMenuOpen ? 'rotate-180' : ''}`}>
                       <img
                         src={chevronIcon}
                         alt="chevron"
@@ -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" />
-                        </div>
+                      <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>
+                      </button>
                     </div>
                     <div className="flex items-center justify-between w-full">
                       <div className="flex gap-10 items-start">
@@ -292,14 +296,17 @@ 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>
+            <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>
+          </button>
         </div>
         <div className="flex gap-8 items-center justify-center w-full">
           {courses.map((course, idx) => (
@@ -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>
+                <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>
+              </button>
             </div>
             <div className="flex-1 flex flex-col items-start">
               {[

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>