🗑トラベリンクを削除する機能を追加

front/src/components/Cards/CardHome.tsx

@@ -1,17 +1,27 @@
-import NextLink from 'next/link'
-import { Avatar, Box, Flex, Heading, Link } from '@chakra-ui/react'
+import { Avatar, Box, Flex, Heading, useDisclosure } from '@chakra-ui/react'
 import { BookmarkType, TravelinkRequestType } from '@/types/db'
 import { format } from 'date-fns'
-import { Button } from '@/components/Buttons'
+import { ModalDeleteTravelknk } from '@/components/Modals'
+import { MenuOpenDeleteTravelink } from '@/components/Menus'
 
 type CardHomeProps = {
   data: BookmarkType | TravelinkRequestType
 }
 
 export const CardHome = ({ data }: CardHomeProps) => {
+  const {
+    isOpen: isOpenDeleteTravelinkModal,
+    onOpen: onOpenDeleteTravelinkModal,
+    onClose: onCloseDeleteTravelinkModal
+  } = useDisclosure()
   return (
-    <NextLink href={`/${data.id}`} key={data.id} passHref>
-      <Link
+    <>
+      <ModalDeleteTravelknk
+        isOpen={isOpenDeleteTravelinkModal}
+        onClose={onCloseDeleteTravelinkModal}
+        id={data.id}
+      />
+      <Box
         display={'block'}
         w={'100%'}
         h={'23.9rem'}
@@ -51,7 +61,7 @@ export const CardHome = ({ data }: CardHomeProps) => {
                 paddingBottom={'1.4rem'}
                 fontSize={'lg'}
               >
-                {data.title}
+                <a href={`/${data.id}`}>{data.title}</a>
               </Heading>
             </Box>
             <Flex alignContent={'baseline'}>
@@ -64,17 +74,12 @@ export const CardHome = ({ data }: CardHomeProps) => {
               </Flex>
             </Flex>
           </Box>
-          <Button mt={'1.6rem'}>
-            <Flex w={'3.6rem'} h={'3.6rem'} align={'center'} justify={'center'}>
-              <Box
-                bgImage={'/images/icons/homeMenu.svg'}
-                w={'2.4rem'}
-                h={'2.4rem'}
-              />
-            </Flex>
-          </Button>
+          {/* TODO: 一番下のCardHomeが＋ボタンで隠れてるのをどうにかする */}
+          <Box marginTop={'1.9rem'} marginRight={'2.1rem'}>
+            <MenuOpenDeleteTravelink onOpen={onOpenDeleteTravelinkModal} />
+          </Box>
         </Flex>
-      </Link>
-    </NextLink>
+      </Box>
+    </>
   )
 }

front/src/components/Icons/IconMenuButton.tsx

@@ -0,0 +1,16 @@
+import { Box } from '@chakra-ui/react'
+
+export const IconMenuButton = ({ ...props }) => {
+  return (
+    <Box {...props}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        className="h-5 w-5"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z" />
+      </svg>
+    </Box>
+  )
+}

front/src/components/Icons/index.ts

@@ -13,3 +13,4 @@ export { IconUser } from '@/components/Icons/IconUser'
 export { IconViewGrid } from '@/components/Icons/IconViewGrid'
 export { IconViewList } from '@/components/Icons/IconViewList'
 export { IconCheck } from '@/components/Icons/IconCheck'
+export { IconMenuButton } from '@/components/Icons/IconMenuButton'

front/src/components/Menus/MenuOpenDeleteTravelink.tsx

@@ -0,0 +1,54 @@
+import {
+  Box,
+  Flex,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuList
+} from '@chakra-ui/react'
+import { IconMenuButton } from '@/components/Icons'
+
+type MenuOpenDeleteTravelinkProps = {
+  onOpen: () => void
+}
+
+export const MenuOpenDeleteTravelink = ({
+  onOpen
+}: MenuOpenDeleteTravelinkProps) => {
+  return (
+    <Menu>
+      <MenuButton>
+        <Flex w={'2.4rem'} h={'2.4rem'} align={'center'} justify={'center'}>
+          <IconMenuButton w={'1.6rem'} h={'1.6rem'} color={'gray'} />
+        </Flex>
+      </MenuButton>
+
+      <MenuList
+        padding={'1.35rem 0 0 2.4rem'}
+        w={'13.9rem'}
+        h={'5.2rem'}
+        borderColor={'#CBD5E0'}
+        borderRadius={'1.5rem'}
+        boxShadow={0}
+      >
+        <MenuItem
+          display={'flex'}
+          padding={0}
+          onClick={() => {
+            onOpen()
+          }}
+        >
+          <Box
+            bgImage={'/images/icons/trash.svg'}
+            w={'1.68rem'}
+            h={'1.68rem'}
+            marginRight={'1.6rem'}
+          />
+          <Box fontSize={'sm'} color={'#FF4D4D'}>
+            削除する
+          </Box>
+        </MenuItem>
+      </MenuList>
+    </Menu>
+  )
+}

front/src/components/Menus/index.ts

@@ -1 +1,2 @@
 export { MenuCardLinkEdit } from '@/components/Menus/MenuCardLinkEdit'
+export { MenuOpenDeleteTravelink } from '@/components/Menus/MenuOpenDeleteTravelink'

front/src/components/Modals/ModalDeleteTravelink.tsx

@@ -0,0 +1,68 @@
+import {
+  Modal,
+  Button,
+  ModalOverlay,
+  ModalContent,
+  ModalHeader,
+  ModalFooter,
+  ModalBody,
+  Text,
+  UnorderedList,
+  ListItem,
+  Box
+} from '@chakra-ui/react'
+import { useDeleteTravelink } from '@/hooks/firestore'
+
+type Props = {
+  isOpen: boolean
+  onClose: () => void
+  id: string
+}
+
+export const ModalDeleteTravelknk = ({ isOpen, onClose, id }: Props) => {
+  const { onClickDeleteTravelink } = useDeleteTravelink()
+  return (
+    <Modal isOpen={isOpen} onClose={onClose}>
+      <ModalOverlay />
+      <ModalContent
+        margin={'auto 0'}
+        width={'90vw'}
+        maxW={'90vw'}
+        height={'auto'}
+        borderRadius={'3rem'}
+        padding={'1.5rem'}
+      >
+        <ModalHeader textAlign={'center'}>トラベリンク削除</ModalHeader>
+        <ModalBody>
+          <Text>削除すると以下の情報がすべて失われます</Text>
+          <Box
+            bgColor={'#f1f1f1'}
+            p={'1rem'}
+            borderRadius={'1rem'}
+            m={'1rem 0'}
+          >
+            <UnorderedList>
+              <ListItem>とらべりんく削除</ListItem>
+            </UnorderedList>
+          </Box>
+        </ModalBody>
+        <ModalFooter>
+          <Button variant={'outline'} size={'md'} mr={3} onClick={onClose}>
+            キャンセル
+          </Button>
+          <Button
+            colorScheme={'alertRed'}
+            size={'md'}
+            w={'5rem'}
+            h={'3rem'}
+            onClick={() => {
+              onClickDeleteTravelink(id)
+            }}
+          >
+            削除
+          </Button>
+        </ModalFooter>
+      </ModalContent>
+    </Modal>
+  )
+}

front/src/components/Modals/index.ts

@@ -1,2 +1,3 @@
 export { ModalQrCode } from '@/components/Modals/ModalQrCode'
 export { ModalSignIn } from '@/components/Modals/ModalSignIn'
+export { ModalDeleteTravelknk } from '@/components/Modals/ModalDeleteTravelink'

front/src/hooks/firestore/index.ts

@@ -8,6 +8,7 @@ export { useGetTravelink } from '@/hooks/firestore/travelink/useGetTravelink'
 export { useGetTravelinkList } from '@/hooks/firestore/travelink/useGetTravelinkList'
 export { useCreateTravelink } from '@/hooks/firestore/travelink/useCreateTravelink'
 export { useUpdateTravelink } from '@/hooks/firestore/travelink/useUpdateTravelink'
+export { useDeleteTravelink } from '@/hooks/firestore/travelink/useDeleteTravelink'
 
 // bookmark
 export { useCreateBookmark } from '@/hooks/firestore/bookmark/useCreateBookmark'

front/src/hooks/firestore/travelink/useDeleteTravelink.ts

@@ -0,0 +1,20 @@
+import { collection, deleteDoc, doc, getFirestore } from 'firebase/firestore'
+import { useRouter } from 'next/router'
+
+export const useDeleteTravelink = () => {
+  const router = useRouter()
+
+  const onClickDeleteTravelink = async (id: string) => {
+    const db = getFirestore()
+
+    const travelinkRef = doc(collection(db, 'travelinks'), id)
+    try {
+      await deleteDoc(travelinkRef)
+    } catch (e) {
+      console.error(e)
+    }
+    // TODO: リロード→ぐるぐるにしてDBから再フェッチ
+    router.reload()
+  }
+  return { onClickDeleteTravelink }
+}

front/src/theme/colors.ts

@@ -9,6 +9,10 @@ export const colors = {
   },
   gray: '#7E7E7E',
   black: '#252525',
+  alertRed: {
+    500: '#F65A5A',
+    600: '#F65A5A'
+  },
   brandPink: {
     50: '#ffdde5',
     100: '#ffccd8',