Merge pull request #95 from dnd-side-project/feat/#72

feat: Snackbar 컴포넌트 구현 및 스토리 작성

src/components/domain/home/dictionary/PopularCommentsList/index.tsx

@@ -39,7 +39,7 @@ export default function PopularCommentsList({
  />
  <CheckboxBottomSheet
  isOpen={bottomSheetType === 'checkbox'}
- type="report"
+ type="commentReport"
  targetId={targetId as number}
  />
  </>

src/components/domain/wordDetail/CommentsList/index.tsx

@@ -10,6 +10,7 @@ import CommentBottomSheet from '@/components/shared/CommentBottomSheet'
 import CommentInput from '../CommentTextarea'
 import { usePathname } from 'next/navigation'
 import CheckboxBottomSheet from '@/components/shared/CheckboxBottomSheet'
+import Snackbar from '@/components/shared/Snackbar'
 
 export default function CommentsList() {
  const pathname = usePathname()
@@ -41,7 +42,7 @@ export default function CommentsList() {
  />
  </div>
  <SortButton
- text={sortType}
+ sortBy={sortType}
  onClick={() => openBottomSheet('filter')}
  />
  </div>
@@ -76,7 +77,6 @@ export default function CommentsList() {
  <FilterBottomSheet
  isOpen={bottomSheetType === 'filter'}
  selected={sortType}
- setSelected={(menu) => setSortType(menu)}
  target="comments"
  />
  <CommentBottomSheet
@@ -87,9 +87,10 @@ export default function CommentsList() {
  />
  <CheckboxBottomSheet
  isOpen={bottomSheetType === 'checkbox'}
- type="report"
+ type="commentReport"
  targetId={targetId as number}
  />
+ <Snackbar />
  </>
  )
 }

src/components/shared/CheckboxBottomSheet/index.tsx

@@ -7,7 +7,7 @@ import Checkbox from '@/components/common/Checkbox'
 
 type BottomSheetProps = {
  isOpen: boolean
- type: 'report'
+ type: 'commentReport'
  targetId?: number
 }
 
@@ -16,7 +16,7 @@ export default function CheckboxBottomSheet({
  type,
  targetId,
 }: BottomSheetProps) {
- const { closeBottomSheet } = useUIStore()
+ const { closeBottomSheet, showSnackbar } = useUIStore()
  const [checked, setChecked] = useState(new Set<number>())
  const { title, description, options, btnText } = CHECKBOX_MENUS[type]
 
@@ -34,6 +34,7 @@ export default function CheckboxBottomSheet({
  console.log('checked list 전송', targetId, checked)
  setChecked(new Set()) // checked 리스트 초기화
  closeBottomSheet()
+ showSnackbar(type)
  }
 
  if (!isOpen) return null

src/components/shared/Snackbar/Snackbar.stories.tsx

@@ -0,0 +1,46 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import Snackbar from '.'
+import useUIStore from '@/store/useUIStore'
+import { SNACKBAR_TYPE } from '@/constants/snackbar'
+
+const meta: Meta<typeof Snackbar> = {
+ title: 'components/Snackbar',
+ component: Snackbar,
+ tags: ['autodocs'],
+}
+
+export default meta
+
+type Story = StoryObj<typeof Snackbar>
+
+export const Default: Story = {
+ render: () => {
+ const { showSnackbar } = useUIStore()
+ const buttons = [
+ { type: 'commentAdd', text: '댓글 등록' },
+ { type: 'commentEdit', text: '댓글 수정' },
+ { type: 'commentDelete', text: '댓글 삭제' },
+ { type: 'commentReport', text: '댓글 신고' },
+ { type: 'commentBlock', text: '댓글 차단' },
+ { type: 'bookmarkAdd', text: '용어 북마크' },
+ ]
+ return (
+ <>
+ <div className="h-48 flex flex-col">
+ <div className="flex gap-2">
+ {buttons.map((button, idx) => (
+ <button
+ key={idx}
+ onClick={() => showSnackbar(button.type as SNACKBAR_TYPE)}
+ className="w-fit p-2 bg-white rounded-lg"
+ >
+ {button.text}
+ </button>
+ ))}
+ </div>
+ <Snackbar />
+ </div>
+ </>
+ )
+ },
+}

src/components/shared/Snackbar/index.tsx

@@ -0,0 +1,31 @@
+'use client'
+import { SNACKBAR } from '@/constants/snackbar'
+import useUIStore from '@/store/useUIStore'
+import { useEffect } from 'react'
+
+export default function Snackbar() {
+ const { snackbarType, showSnackbar } = useUIStore()
+
+ useEffect(() => {
+ showSnackbar(snackbarType)
+ const timer = setTimeout(() => {
+ showSnackbar(null)
+ }, 2500)
+
+ return () => clearTimeout(timer)
+ }, [snackbarType, showSnackbar])
+
+ if (!snackbarType) return null
+ return (
+ <div className="fixed bottom-10 left-1/2 transform -translate-x-1/2 w-full max-w-[430px]">
+ <div className="flex justify-between items-center bg-gray-600 text-center py-4 px-7 rounded-lg mx-4 animate-fade-in">
+ <p className="text-onSurface-300 text-sub2">
+ {SNACKBAR[snackbarType].text}
+ </p>
+ <p className="text-sub3 text-primary-400">
+ {SNACKBAR[snackbarType].actionText}
+ </p>
+ </div>
+ </div>
+ )
+}

src/constants/bottomSheet.ts

@@ -38,7 +38,7 @@ export const COMMENT_MENUS = {
 
 // CheckboxBottomSheet에서 표기할 메뉴 목록
 export const CHECKBOX_MENUS = {
- report: {
+ commentReport: {
  title: '신고하기',
  description: '중복 선택 가능',
  options: [

src/constants/snackbar.ts

@@ -0,0 +1,35 @@
+export type SNACKBAR_TYPE =
+ | 'commentAdd'
+ | 'commentEdit'
+ | 'commentDelete'
+ | 'commentBlock'
+ | 'commentReport'
+ | 'bookmarkAdd'
+
+export const SNACKBAR: Record<
+ SNACKBAR_TYPE,
+ { text: string; actionText?: string }
+> = {
+ commentAdd: {
+ text: '댓글이 등록되었어요',
+ },
+ commentEdit: {
+ text: '댓글이 수정되었어요',
+ },
+ commentDelete: {
+ text: '댓글이 삭제되었어요',
+ },
+
+ commentBlock: {
+ text: '댓글이 차단되었어요',
+ actionText: '실행취소',
+ },
+
+ commentReport: {
+ text: '댓글이 신고되었어요',
+ },
+ bookmarkAdd: {
+ text: '⭐️ 별별 저장소에 등록되었어요',
+ actionText: '저장소 가기',
+ },
+}

src/hooks/useSnackbarAction.tsx

@@ -0,0 +1,19 @@
+import { useRouter } from 'next/navigation'
+
+export default function useSnackbarAction() {
+ const router = useRouter()
+
+ const undoCommentBlock = () => {
+ alert('댓글 차단 실행 취소')
+ }
+
+ const goToBookmark = () => {
+ alert('저장소 보러가기')
+ router.push('/bookmarks')
+ }
+
+ return [
+ { type: 'commentBlock', onClick: undoCommentBlock },
+ { type: 'bookmarkAdd', onClick: goToBookmark },
+ ]
+}

src/hooks/usetBottomSheetAction.tsx

@@ -4,11 +4,12 @@ import useUIStore from '@/store/useUIStore'
 
 // CommentBottom 각 목록마다 다른 액션 처리하기 위한 커스텀 훅
 export default function useBottomSheetAction() {
- const { openBottomSheet, closeBottomSheet } = useUIStore()
+ const { openBottomSheet, closeBottomSheet, showSnackbar } = useUIStore()
  const editComment = () => {
  // 댓글 수정 UI 상태 조작 필요
  alert('댓글 수정')
  closeBottomSheet()
+ showSnackbar('commentEdit')
  }
 
  const deleteComment = () => {

src/store/useUIStore.ts

@@ -1,3 +1,4 @@
+import { SNACKBAR_TYPE } from '@/constants/snackbar'
 import { create } from 'zustand'
 
 type BottomSheetType = {
@@ -11,9 +12,9 @@ type UIStoreType = {
  isModalOpen: boolean
  openModal: () => void
  closeModal: () => void
- toastMessage: string | null
- showToast: (message: string) => void
- hideToast: () => void
+ snackbarType: SNACKBAR_TYPE | null
+ showSnackbar: (type: SNACKBAR_TYPE | null) => void
+ hideSnackbar: () => void
 }
 
 const useUIStore = create<UIStoreType>((set) => ({
@@ -28,10 +29,10 @@ const useUIStore = create<UIStoreType>((set) => ({
  openModal: () => set({ isModalOpen: true }),
  closeModal: () => set({ isModalOpen: false }),
 
- // Toast state
- toastMessage: null,
- showToast: (message: string) => set({ toastMessage: message }),
- hideToast: () => set({ toastMessage: null }),
+ // Snackbar state
+ snackbarType: null,
+ showSnackbar: (type: SNACKBAR_TYPE | null) => set({ snackbarType: type }),
+ hideSnackbar: () => set({ snackbarType: null }),
 }))
 
 export default useUIStore

tailwind.config.ts

@@ -27,6 +27,16 @@ const config: Config = {
  xs: '360px',
  },
  },
+ // snackbar animate
+ keyframes: {
+ 'fade-in': {
+ '0%': { opacity: '0', transform: 'translateY(-5px)' },
+ '100%': { opacity: '1', transform: 'translateY(0)' },
+ },
+ },
+ animation: {
+ 'fade-in': 'fade-in 0.5s ease-out',
+ },
  },
  plugins: [],
 }