diff --git "a/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/FolderDialog.css.ts" "b/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/FolderDialog.css.ts" new file mode 100644 index 00000000..0bbe2260 --- /dev/null +++ "b/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/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', +}); diff --git "a/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/FolderDialog.tsx" "b/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/FolderDialog.tsx" new file mode 100644 index 00000000..50c7037f --- /dev/null +++ "b/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/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( + ({ memoFolders, closeDialog }, ref) => { + const { openModal } = useModalStore(); + + return ( + + {memoFolders.map(({ id, name }) => { + if (name === '기본') + return ( + {}}> + OOO님의 폴더기본 + + ); + return ( + {}}> + {name} + + ); + })} + openModal('makeFolder')}> +
+ +
+ 새 폴더 만들기 +
+
+ ); + }, +); + +FolderDialog.displayName = 'FolderDialog'; + +export default FolderDialog; diff --git "a/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/index.tsx" "b/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/index.tsx" index 01799512..73d18db8 100644 --- "a/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/index.tsx" +++ "b/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/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('ask'); const [selectedFilterButton, setSelectedFilterButton] = @@ -152,7 +155,11 @@ const 참고하는TabContent = () => { /> diff --git "a/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/\354\260\270\352\263\240\355\225\230\353\212\224TemplateCard.css.ts" "b/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/\354\260\270\352\263\240\355\225\230\353\212\224TemplateCard.css.ts" index bfbcda57..94f93f03 100644 --- "a/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/\354\260\270\352\263\240\355\225\230\353\212\224TemplateCard.css.ts" +++ "b/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/\354\260\270\352\263\240\355\225\230\353\212\224TemplateCard.css.ts" @@ -12,6 +12,7 @@ export const wrapper = style([ }, }), { + position: 'relative', padding: '28px 32px 20px', }, ]); diff --git "a/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/\354\260\270\352\263\240\355\225\230\353\212\224TemplateCard.tsx" "b/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/\354\260\270\352\263\240\355\225\230\353\212\224TemplateCard.tsx" index 77981935..beecb79a 100644 --- "a/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/\354\260\270\352\263\240\355\225\230\353\212\224TemplateCard.tsx" +++ "b/src/domain/\354\260\270\352\263\240\355\225\230\353\212\224/components/\354\260\270\352\263\240\355\225\230\353\212\224TemplateCard.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(null); + const [isShowDialog, setIsShowDialog] = useState(false); + + const closeDialog = () => setIsShowDialog(false); + const categoryNameKr = CATEGORY[category]; + const handleBookmarkClick = () => setIsShowDialog(!isShowDialog); + return ( @@ -28,7 +44,7 @@ const 참고하는TemplateCard = ({ data }: 참고하는TemplateCardProps) => { color={COLORS['Grey/300']} /> -