feat: dialog 연동

src/domain/참고하는/components/FolderDialog.css.ts

@@ -0,0 +1,43 @@
+import { style } from '@vanilla-extract/css';
+
+import { sprinkles } from '@styles/sprinkles.css';
+import { COLORS } from '@styles/tokens';
+
+export const wrapper = style({
+  position: 'absolute',
+  top: '52px',
+  right: '-75px',
+});
+
+export const badge = style([
+  sprinkles({
+    typography: '11/Caption/Medium',
+  }),
+  {
+    marginLeft: '4px',
+    backgroundColor: COLORS['Blue/Light'],
+    color: COLORS['Blue/Default'],
+    width: '32px',
+    height: '20px',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    marginTop: '-2px',
+    padding: '3px 6px',
+    borderRadius: '100px',
+  },
+]);
+
+export const iconMediumText = style([
+  sprinkles({
+    typography: '15/Body/Medium',
+  }),
+  {
+    color: COLORS['Grey/400'],
+    marginLeft: '28px',
+  },
+]);
+
+export const icon = style({
+  position: 'absolute',
+  marginTop: '2px',
+});

src/domain/참고하는/components/FolderDialog.tsx

@@ -0,0 +1,51 @@
+import { forwardRef } from 'react';
+
+import { type Folder } from '@api/memoFolder/types';
+import Dialog from '@components/Dialog';
+import Icon from '@components/Icon';
+import * as styles from '@domain/참고하는/components/FolderDialog.css';
+import { useModalStore } from '@stores/modal';
+
+interface FolderDialogProps {
+  memoFolders: Folder[];
+  closeDialog: () => void;
+}
+
+const FolderDialog = forwardRef<HTMLButtonElement, FolderDialogProps>(
+  ({ memoFolders, closeDialog }, ref) => {
+    const { openModal } = useModalStore();
+
+    return (
+      <Dialog
+        className={styles.wrapper}
+        type="medium"
+        closeDialog={closeDialog}
+        ref={ref}
+      >
+        {memoFolders.map(({ id, name }) => {
+          if (name === '기본')
+            return (
+              <Dialog.Button key={id} onClick={() => {}}>
+                OOO님의 폴더<span className={styles.badge}>기본</span>
+              </Dialog.Button>
+            );
+          return (
+            <Dialog.Button key={id} onClick={() => {}}>
+              {name}
+            </Dialog.Button>
+          );
+        })}
+        <Dialog.Button onClick={() => openModal('makeFolder')}>
+          <div className={styles.icon}>
+            <Icon icon="add" width={20} height={20} />
+          </div>
+          <span className={styles.iconMediumText}>새 폴더 만들기</span>
+        </Dialog.Button>
+      </Dialog>
+    );
+  },
+);
+
+FolderDialog.displayName = 'FolderDialog';
+
+export default FolderDialog;

src/domain/참고하는/components/index.tsx

@@ -9,6 +9,7 @@ import {
   type FilterButton,
   type Refer,
 } from '@domain/참고하는/types';
+import useGetMemoFolders from '@queries/useGetMemoFolders';
 
 // - `ASK`  (부탁하기)
 // - `REPORT`  (보고하기)
@@ -129,6 +130,8 @@ const datas: Refer[] = [
 ];
 
 const 참고하는TabContent = () => {
+  const { data: memoFoldersData } = useGetMemoFolders();
+
   const [selectedFilterHeader, setSelectedFilterHeader] =
     useState<Category>('ask');
   const [selectedFilterButton, setSelectedFilterButton] =
@@ -152,7 +155,11 @@ const 참고하는TabContent = () => {
       />
       <ul className={styles.referCardsWrapper}>
         {datas.map((data) => (
-          <참고하는TemplateCard key={data.templateId} data={data} />
+          <참고하는TemplateCard
+            key={data.templateId}
+            data={data}
+            memoFolders={memoFoldersData}
+          />
         ))}
       </ul>
     </div>

src/domain/참고하는/components/참고하는TemplateCard.css.ts

@@ -12,6 +12,7 @@ export const wrapper = style([
     },
   }),
   {
+    position: 'relative',
     padding: '28px 32px 20px',
   },
 ]);

src/domain/참고하는/components/참고하는TemplateCard.tsx

@@ -1,3 +1,6 @@
+import { useRef, useState } from 'react';
+
+import { type Folder } from '@api/memoFolder/types';
 import Badge from '@components/Badge';
 import Button from '@components/Button';
 import Card from '@components/Card';
@@ -9,15 +12,28 @@ import { type Refer } from '@domain/참고하는/types';
 import { getNumToK } from '@domain/참고하는/utils';
 import { COLORS } from '@styles/tokens';
 
+import FolderDialog from './FolderDialog';
+
 interface 참고하는TemplateCardProps {
   data: Refer;
+  memoFolders: Folder[];
 }
 
-const 참고하는TemplateCard = ({ data }: 참고하는TemplateCardProps) => {
+const 참고하는TemplateCard = ({
+  data,
+  memoFolders,
+}: 참고하는TemplateCardProps) => {
   const { category, subCategory, content, copiedCount, savedCount } = data;
 
+  const bookmarkRef = useRef<HTMLButtonElement>(null);
+  const [isShowDialog, setIsShowDialog] = useState(false);
+
+  const closeDialog = () => setIsShowDialog(false);
+
   const categoryNameKr = CATEGORY[category];
 
+  const handleBookmarkClick = () => setIsShowDialog(!isShowDialog);
+
   return (
     <Card className={styles.wrapper}>
       <Card.Menu>
@@ -28,7 +44,7 @@ const 참고하는TemplateCard = ({ data }: 참고하는TemplateCardProps) => {
             color={COLORS['Grey/300']}
           />
         </Button>
-        <Button>
+        <Button onClick={handleBookmarkClick} ref={bookmarkRef}>
           <Icon
             icon="bookmarkRefer"
             className={styles.hover}
@@ -45,6 +61,13 @@ const 참고하는TemplateCard = ({ data }: 참고하는TemplateCardProps) => {
         복사 <span>{getNumToK(copiedCount)}</span> • 저장{' '}
         <span>{getNumToK(savedCount)}</span>
       </Card.Footer>
+      {isShowDialog && (
+        <FolderDialog
+          closeDialog={closeDialog}
+          memoFolders={memoFolders}
+          ref={bookmarkRef}
+        />
+      )}
     </Card>
   );
 };