From a5313202ee367b615001600630ac73bf71250fe7 Mon Sep 17 00:00:00 2001
From: HamsterStudent <hwanyamyu@gmail.com>
Date: Sat, 4 Nov 2023 12:56:12 +0900
Subject: [PATCH] :lipstick: Style : fix arrow temp

---
 Frontend/public/assets/icon/icon_arrow.png    | Bin 0 -> 181 bytes
 .../src/pages/Map/components/ListMenu.tsx     |  44 +++++++++++-------
 2 files changed, 28 insertions(+), 16 deletions(-)
 create mode 100644 Frontend/public/assets/icon/icon_arrow.png

diff --git a/Frontend/public/assets/icon/icon_arrow.png b/Frontend/public/assets/icon/icon_arrow.png
new file mode 100644
index 0000000000000000000000000000000000000000..e55d9bca6411677043880820dcc8f78b0b880b2f
GIT binary patch
literal 181
zcmeAS@N?(olHy`uVBq!ia0vp^{6Ngf!3HGX_Lqf&I0YV&#S9GG!XV7ZFl&wkP>``W
z$lZxy-8q?;Kn_c~qpu?a!^VE@KZ&eBzL%$qV@L(#+=(}N83Y7a<1@W3FwPBF<tGsC
zvf;SO`}003+<Od5<+x&E<+!5)MQ$AJ_?H{@Ktw&|f$AhiuRm-;&U;v;#5Ps0`_8&Z
XL^Vcg*W)ihQyDy6{an^LB{Ts5(ZDk1

literal 0
HcmV?d00001

diff --git a/Frontend/src/pages/Map/components/ListMenu.tsx b/Frontend/src/pages/Map/components/ListMenu.tsx
index f031302..2222e21 100644
--- a/Frontend/src/pages/Map/components/ListMenu.tsx
+++ b/Frontend/src/pages/Map/components/ListMenu.tsx
@@ -13,6 +13,10 @@ interface IList {
   color: string;
 }
 
+interface IShowMenu {
+  isOpen: boolean;
+}
+
 const ContentsWrap = styled.section`
   padding: 0 30px;
   border-radius: 20px 20px 0 0;
@@ -31,6 +35,12 @@ const SelectWrap = styled.div`
   }
 `;
 
+const Icon = styled.div<{ isOpen: boolean }>`
+  display: inline-block;
+  transform-origin: 45% 65%;
+  transform: ${(props) => (props.isOpen ? "rotate(180deg)" : null)};
+`;
+
 const SelectList = styled.ul`
   width: 153px;
   border-radius: 12px;
@@ -146,7 +156,7 @@ interface IListMenu {
 }
 
 const ListMenu = ({ clickEvent, dataArr, wholeData }: IListMenu) => {
-  const [showMenu, setShowMenu] = useState(false);
+  const [showMenu, setShowMenu] = useState<boolean>(false);
   const [categoryName, setCategoryName] = useRecoilState(categoryNameAtom);
   const setListName = useSetRecoilState(listNameAtom);
 
@@ -173,21 +183,23 @@ const ListMenu = ({ clickEvent, dataArr, wholeData }: IListMenu) => {
       <SelectWrap>
         <h3 onClick={() => setShowMenu((prev) => !prev)}>
           {categoryName}{" "}
-          <svg
-            xmlns="http://www.w3.org/2000/svg"
-            width="15"
-            height="9"
-            viewBox="0 0 15 9"
-            fill="none"
-          >
-            <path
-              d="M1.0769 7.5L7.07691 1.5L13.0769 7.5"
-              stroke="black"
-              strokeWidth="2"
-              strokeLinecap="round"
-              strokeLinejoin="round"
-            />
-          </svg>
+          <Icon isOpen={showMenu}>
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="15"
+              height="9"
+              viewBox="0 0 15 9"
+              fill="none"
+            >
+              <path
+                d="M1.0769 7.5L7.07691 1.5L13.0769 7.5"
+                stroke="black"
+                strokeWidth="2"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+              />
+            </svg>
+          </Icon>
         </h3>
 
         {showMenu ? (