Feat: FAQ item 화살표 rotation 애니메이션 추가 #33

src/app/recruit/components/FAQItem.tsx

@@ -1,4 +1,6 @@
-import React from 'react'
+'use client'
+
+import React, { useState } from 'react'
 import { FAQObj } from '../../../utils/recruitMockData'
 import ArrowLink from '../../../../public/icon/button/FAQ-arrow-button.svg'
 
@@ -7,25 +9,35 @@ interface Items {
 }
 
 const FAQItem = ({ items }: Items) => {
+  const [open, setOpen] = useState(Array(items.length).fill(false))
   return (
     <div className="flex flex-col justify-center items-center text-black">
       <div className="font-pp max-tablet:text-[2.4rem] text-[3.2rem] italic">
         FAQ
       </div>
       <div className="w-full max-w-[97rem]">
-        {items.map(element => {
+        {items.map((item, index) => {
           return (
             <div
-              key={element.Q}
+              key={item.Q}
               className="flex-1 bg-grey p-[1.7rem] mt-[3.9rem] rounded-[1rem]">
               <div className="justify-between text-[1.6rem] font-semibold flex items-center">
-                <div className="">{element.Q}</div>
-                <div>
+                <div className="">{item.Q}</div>
+                <button
+                  onClick={() =>
+                    setOpen(prev => {
+                      console.log(prev)
+                      const temp = [...prev]
+                      temp[index] = !temp[index]
+                      return temp
+                    })
+                  }
+                  className={`${open[index] ? 'rotate-180 ' : null} transition-all`}>
                   <ArrowLink />
-                </div>
+                </button>
               </div>
               <div className="mt-[1.4rem] font-medium text-[1.6rem] whitespace-pre-line">
-                {element.A}
+                {item.A}
               </div>
             </div>
           )