feat: flyout모달 리팩토링을 위한 임시 파일 생성

Author: minh0518

src/app/(afterlogin)/(common_navbar)/home/_components/_svgs/MenuIcon.tsx

@@ -1,12 +1,22 @@
+import styles from '@/app/(beforelogin)/flyouttest/flyouttest.module.scss';
+
 const MenuIcon = () => {
   return (
-    <i>
-      <svg xmlns="http://www.w3.org/2000/svg" width="4" height="18" viewBox="0 0 4 18" fill="none">
-        <circle cx="1.95654" cy="1.95654" r="1.95654" fill="#696969" />
-        <circle cx="1.95654" cy="9.00048" r="1.95654" fill="#696969" />
-        <circle cx="1.95654" cy="16.0435" r="1.95654" fill="#696969" />
-      </svg>
-    </i>
+    <button className={styles.flyout__button}>
+      <i>
+        <svg
+          xmlns="http://www.w3.org/2000/svg"
+          width="4"
+          height="18"
+          viewBox="0 0 4 18"
+          fill="none"
+        >
+          <circle cx="1.95654" cy="1.95654" r="1.95654" fill="#696969" />
+          <circle cx="1.95654" cy="9.00048" r="1.95654" fill="#696969" />
+          <circle cx="1.95654" cy="16.0435" r="1.95654" fill="#696969" />
+        </svg>
+      </i>
+    </button>
   );
 };
 

src/app/(beforelogin)/flyouttest/flyouttest.module.scss

@@ -42,3 +42,46 @@
   justify-content: space-between;
   max-width: 440px;
 }
+
+.flyout {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  position: absolute;
+  top: 20px;
+  right: 20px;
+
+  .dimmed {
+    width: 100%;
+    height: 100%;
+  }
+
+  &__button {
+    @include pure-button;
+
+    margin-bottom: 8px;
+  }
+
+  &__list {
+    position: absolute;
+    top: 30px;
+    left: 0;
+    z-index: 2;
+    width: 120px;
+    padding: 0;
+    background: $white;
+    border: 1px solid $gray-1;
+    border-radius: 8px;
+    box-shadow: 2px 2px 3px $gray-2;
+  }
+
+  &__item {
+    padding: 12px;
+    border-bottom: 1px solid $gray-1;
+
+    &:last-child {
+      border: unset;
+    }
+  }
+}

src/app/(beforelogin)/flyouttest/page.tsx

@@ -13,8 +13,10 @@ const page = () => {
           <div className={styles.dummyImg} />
           <div className={styles.menu__box}>
             <Flyout toggleButton={<MenuIcon />}>
-              <button>a</button>
-              <button>b</button>
+              <article className={styles.flyout}>
+                <button>수정하기</button>
+                <button>삭제하기</button>
+              </article>
             </Flyout>
           </div>
         </div>
@@ -25,8 +27,10 @@ const page = () => {
           <div className={styles.dummyImg} />
           <div className={styles.menu__box}>
             <Flyout toggleButton={<MenuIcon />}>
-              <button>a</button>
-              <button>b</button>
+              <article className={styles.flyout}>
+                <button>수정하기</button>
+                <button>삭제하기</button>
+              </article>
             </Flyout>
           </div>
         </div>
@@ -37,8 +41,10 @@ const page = () => {
           <div className={styles.dummyImg} />
           <div className={styles.menu__box}>
             <Flyout toggleButton={<MenuIcon />}>
-              <button>a</button>
-              <button>b</button>
+              <article className={styles.flyout}>
+                <button>수정하기</button>
+                <button>삭제하기</button>
+              </article>
             </Flyout>
           </div>
         </div>
@@ -49,8 +55,10 @@ const page = () => {
           <div className={styles.dummyImg} />
           <div className={styles.menu__box}>
             <Flyout toggleButton={<MenuIcon />}>
-              <button>a</button>
-              <button>b</button>
+              <article className={styles.flyout}>
+                <button>수정하기</button>
+                <button>삭제하기</button>
+              </article>
             </Flyout>
           </div>
         </div>

src/app/_components/_modules/Flyout.tsx

@@ -1,5 +1,4 @@
 import React, { ReactNode, useEffect, useRef, useState } from 'react';
-import styles from './FlyoutMenu.module.scss';
 
 interface Props {
   toggleButton: ReactNode;
@@ -24,11 +23,10 @@ const Flyout = ({ toggleButton, children }: Props) => {
 
   return (
     <div ref={ref}>
-      <button className={styles.flyout__button} onClick={() => setIsOpen((prev) => !prev)}>
-        {toggleButton}
-      </button>
-      {/* {children}에서 ul, li형태로 감싸진 버튼을 주든, 단일 버튼을 주든 외부에서 자유롭게 주입 */}
-      {isOpen && <article className={styles.flyout}>{children}</article>}
+      {/* 메뉴 모달 토글 버튼 */}
+      {!isOpen && <div onClick={() => setIsOpen((prev) => !prev)}>{toggleButton}</div>}
+      {/* 수정 삭제 버튼 */}
+      {isOpen && children}
     </div>
   );
 };