첫 커밋

src/entities/settlement/ui/detail-arrow.tsx

@@ -0,0 +1,23 @@
+import { useEffect, useState } from 'react';
+import { IMAGE_ROOT } from '@/shared/constants/common';
+import { AltMsgKeys, DetailArrowProps } from '../model/types';
+
+export const DetailArrow = ({ show }: DetailArrowProps) => {
+  const [altMsg, setAltMsg] = useState<AltMsgKeys>(AltMsgKeys.Fold);
+  const [className, setClassName] = useState<string>('ic20 rot-180');
+
+  useEffect(() => {
+    setAltMsg((show)? AltMsgKeys.Fold: AltMsgKeys.UnFold);
+    setClassName(`ic20 ${(show)? 'rot-180': ''}`);
+  }, [show]);
+
+  return (
+    <>
+      <img
+        className={ className }
+        src={ IMAGE_ROOT + '/select_arrow.svg' } 
+        alt={ altMsg }
+      />
+    </>
+  );
+};