diff --git a/components/SnackBar.tsx b/components/SnackBar.tsx new file mode 100644 index 0000000..f6252d8 --- /dev/null +++ b/components/SnackBar.tsx @@ -0,0 +1,50 @@ +interface SnackBarProps { + state: 'fail' | 'success' | 'info' | 'null'; +} + +// state props styles object +const stateConfig = { + fail: { + style: + 'bg-red-50 border-red-100 fixed left-1/2 transform -translate-x-1/2 top-[120px] mx-auto mo:bottom-[80px] mo:top-auto w-[384px] mo:w-[328px] whitespace-nowrap', + text: '다른 친구가 편집하고 있어요. 나중에 다시 시도해 주세요.', + icon: '/icon/icon-fail.svg', + textStyle: 'text-red-100 text-14sb mo:text-12sb', + }, + success: { + style: + 'bg-green-100 border-green-200 fixed left-1/2 transform -translate-x-1/2 top-[120px] mx-auto mo:bottom-[80px] mo:top-auto w-[247px] mo:w-[210px] whitespace-nowrap', + text: '내 위키 링크가 복사되었습니다.', + icon: '/icon/icon-success.svg', + textStyle: 'text-green-300 text-14sb mo:text-12sb', + }, + info: { + style: 'bg-background border-white', + text: '앞 사람의 편집이 끝나면 위키 참여가 가능합니다.', + icon: '/icon/icon-info.svg', + textStyle: 'text-gray-500 text-14 mo:text-12', + }, + null: { + style: 'hidden', + text: '', + icon: '', + textStyle: '', + }, +}; + +/** + * SnackBar 컴포넌트 + * @param {SnackBarProps} { state } - state: 'fail' | 'success' | 'info' | 'null' + */ +export default function SnackBar({ state }: SnackBarProps) { + const { style, text, icon, textStyle } = stateConfig[state]; + + return ( +
+ {icon && snackbar icon} +

{text}

+
+ ); +} diff --git a/pages/test/index.tsx b/pages/test/index.tsx index 79585f4..aac1243 100644 --- a/pages/test/index.tsx +++ b/pages/test/index.tsx @@ -1,10 +1,29 @@ +import { useState } from 'react'; + import Button from '@/components/Button'; import LinkBar from '@/components/LinkBar'; +import SnackBar from '@/components/SnackBar'; export default function Test() { const commonCellClass = 'border-r border-gray-300'; const commonRowClass = 'flex flex-wrap items-end gap-2'; + // ----snackBar(start)---- + const [snackState, setSnackState] = useState< + 'fail' | 'success' | 'info' | 'null' + >('null'); + + const handleSuccess = () => { + setSnackState('success'); + setTimeout(() => setSnackState('null'), 1500); + }; + + const handleFail = () => { + setSnackState('fail'); + setTimeout(() => setSnackState('null'), 1500); + }; + // ----snackBar(end)---- + return (
@@ -33,7 +52,16 @@ export default function Test() { - + + + + +
SnackBar + + + + {snackState !== 'null' && } +
LinkBar diff --git a/public/icon/icon-fail.svg b/public/icon/icon-fail.svg new file mode 100644 index 0000000..da6cf53 --- /dev/null +++ b/public/icon/icon-fail.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icon/icon-info.svg b/public/icon/icon-info.svg new file mode 100644 index 0000000..5d32e64 --- /dev/null +++ b/public/icon/icon-info.svg @@ -0,0 +1,3 @@ + + + diff --git a/public/icon/icon-success.svg b/public/icon/icon-success.svg new file mode 100644 index 0000000..4258230 --- /dev/null +++ b/public/icon/icon-success.svg @@ -0,0 +1,3 @@ + + +