-
Notifications
You must be signed in to change notification settings - Fork 3
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: 커피챗 상세 더보기 버튼 구현 * feat: 커피챗 상세 삭제 구현 * chore: 불필요 코드 삭제 * feat: 타이틀 스타일 변경 * fix: 깃 충돌 해결 * chore: 수정 삭제 스타일 수정
- Loading branch information
1 parent
e505106
commit 05189ce
Showing
7 changed files
with
278 additions
and
35 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| import { z } from 'zod'; | ||
|
|
||
| import { createEndpoint } from '@/api/typedAxios'; | ||
|
|
||
| export const deleteCoffeechat = createEndpoint({ | ||
| request: () => ({ | ||
| method: 'DELETE', | ||
| url: `api/v1/members/coffeechat/details`, | ||
| }), | ||
| serverResponseScheme: z.unknown(), | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
232 changes: 232 additions & 0 deletions
232
src/components/coffeechat/detail/SeemoreSelect/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,232 @@ | ||
| import styled from '@emotion/styled'; | ||
| import * as Dialog from '@radix-ui/react-dialog'; | ||
| import * as DropdownMenu from '@radix-ui/react-dropdown-menu'; | ||
| import { colors } from '@sopt-makers/colors'; | ||
| import { fonts } from '@sopt-makers/fonts'; | ||
| import { IconDotsVertical, IconEdit, IconTrash } from '@sopt-makers/icons'; | ||
| import { DialogOptionType, useDialog, useToast } from '@sopt-makers/ui'; | ||
| import { useMutation, useQueryClient } from '@tanstack/react-query'; | ||
| import dynamic from 'next/dynamic'; | ||
| import { useRouter } from 'next/router'; | ||
| import { playgroundLink } from 'playground-common/export'; | ||
| import { useState } from 'react'; | ||
|
|
||
| import { deleteCoffeechat } from '@/api/endpoint/coffeechat/deleteCoffeechat'; | ||
| import Responsive from '@/components/common/Responsive'; | ||
| import { MOBILE_MEDIA_QUERY } from '@/styles/mediaQuery'; | ||
|
|
||
| const DropdownPortal = dynamic<DropdownMenu.DropdownMenuPortalProps>( | ||
| () => import('@radix-ui/react-dropdown-menu').then((r) => r.DropdownMenuPortal), | ||
| { | ||
| ssr: false, | ||
| }, | ||
| ); | ||
|
|
||
| const DialogPortal = dynamic<Dialog.DialogPortalProps>( | ||
| () => import('@radix-ui/react-dialog').then((r) => r.DialogPortal), | ||
| { | ||
| ssr: false, | ||
| }, | ||
| ); | ||
|
|
||
| interface SeemoreSelectProp { | ||
| memberId: string; | ||
| } | ||
|
|
||
| interface SeemoreContentProps { | ||
| onEdit: () => void; | ||
| onDelete: () => void; | ||
| } | ||
|
|
||
| export default function SeemoreSelect({ memberId }: SeemoreSelectProp) { | ||
| const router = useRouter(); | ||
| const queryClient = useQueryClient(); | ||
| const { open: toastOpen } = useToast(); | ||
| const { open } = useDialog(); | ||
| const option: DialogOptionType = { | ||
| title: '커피챗을 삭제하시겠습니까?', | ||
| description: '새 커피챗을 다시 열 수 있지만, 작성했던 내용은 저장되지 않아요.', | ||
| type: 'danger', | ||
| typeOptions: { | ||
| cancelButtonText: '취소', | ||
| approveButtonText: '삭제하기', | ||
| buttonFunction: () => handleDelete(), | ||
| }, | ||
| }; | ||
|
|
||
| const { mutate, isPending } = useMutation({ | ||
| mutationFn: () => deleteCoffeechat.request(), | ||
| }); | ||
|
|
||
| const onEdit = () => { | ||
| router.push(playgroundLink.coffeechatEdit(memberId)); | ||
| }; | ||
|
|
||
| const handleDelete = () => { | ||
| mutate(undefined, { | ||
| onSuccess: async () => { | ||
| // TODO: 연결 | ||
| // logSubmitEvent(''); | ||
| // queryClient.invalidateQueries('') | ||
| toastOpen({ icon: 'success', content: '커피챗이 삭제되었어요. 다음에 또 만나요!' }); | ||
| await router.push(playgroundLink.coffeechat()); | ||
| }, | ||
| }); | ||
| }; | ||
|
|
||
| const onDelete = () => { | ||
| open(option); | ||
| }; | ||
|
|
||
| return ( | ||
| <> | ||
| <Responsive only='desktop'> | ||
| <DropdownSeemore onEdit={onEdit} onDelete={onDelete} /> | ||
| </Responsive> | ||
| <Responsive only='mobile'> | ||
| <BottomSheetSeemore onEdit={onEdit} onDelete={onDelete} /> | ||
| </Responsive> | ||
| </> | ||
| ); | ||
| } | ||
|
|
||
| const DropdownSeemore = ({ onEdit, onDelete }: SeemoreContentProps) => { | ||
| const [open, setOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <DropdownMenu.Root open={open} onOpenChange={setOpen} modal={false}> | ||
| <DropdownMenu.Trigger asChild> | ||
| <DotsVerticalIcon /> | ||
| </DropdownMenu.Trigger> | ||
| <DropdownPortal> | ||
| <DropdownMenu.Content sideOffset={10} align='end' side='bottom' asChild> | ||
| <StyledContent> | ||
| <StyledItem onClick={onEdit}> | ||
| <EditIcon /> | ||
| <>수정</> | ||
| </StyledItem> | ||
| <StyledItem onClick={onDelete} isTrash> | ||
| <TrashIcon /> | ||
| <>삭제</> | ||
| </StyledItem> | ||
| </StyledContent> | ||
| </DropdownMenu.Content> | ||
| </DropdownPortal> | ||
| </DropdownMenu.Root> | ||
| ); | ||
| }; | ||
|
|
||
| const BottomSheetSeemore = ({ onEdit, onDelete }: SeemoreContentProps) => { | ||
| const [open, setOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <Dialog.Root open={open} onOpenChange={setOpen} modal={false}> | ||
| <Dialog.Trigger asChild> | ||
| <DotsVerticalIcon /> | ||
| </Dialog.Trigger> | ||
| <DialogPortal> | ||
| <Dialog.Overlay asChild> | ||
| <Overlay /> | ||
| </Dialog.Overlay> | ||
| <Dialog.Content asChild> | ||
| <StyledContent> | ||
| <StyledContentItem | ||
| onClick={() => { | ||
| setOpen(false); | ||
| onEdit(); | ||
| }} | ||
| > | ||
| <EditIcon /> | ||
| <>수정</> | ||
| </StyledContentItem> | ||
| <StyledContentItem | ||
| onClick={() => { | ||
| setOpen(false); | ||
| onDelete(); | ||
| }} | ||
| isTrash | ||
| > | ||
| <TrashIcon /> | ||
| <>삭제</> | ||
| </StyledContentItem> | ||
| </StyledContent> | ||
| </Dialog.Content> | ||
| </DialogPortal> | ||
| </Dialog.Root> | ||
| ); | ||
| }; | ||
|
|
||
| const Overlay = styled.div` | ||
| position: fixed; | ||
| inset: 0; | ||
| z-index: 101; | ||
| background-color: rgb(0 0 0 / 70%); | ||
| animation: overlay-show 0.3s cubic-bezier(0.16, 1, 0.3, 1); | ||
| @keyframes overlay-show { | ||
| from { | ||
| opacity: 0; | ||
| } | ||
| to { | ||
| opacity: 1; | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| const StyledContent = styled.div` | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 6px; | ||
| border-radius: 13px; | ||
| background-color: ${colors.gray800}; | ||
| padding: 8px; | ||
| @media ${MOBILE_MEDIA_QUERY} { | ||
| position: fixed; | ||
| right: 16px; | ||
| bottom: 42px; | ||
| left: 16px; | ||
| z-index: 102; | ||
| border-radius: 20px; | ||
| padding: 12px 8px; | ||
| width: calc(100% - 32px); | ||
| } | ||
| `; | ||
|
|
||
| const StyledItem = styled(DropdownMenu.Item)<{ isTrash?: boolean }>` | ||
| display: flex; | ||
| gap: 10px; | ||
| align-items: center; | ||
| padding: 8px 12px; | ||
| color: ${({ isTrash }) => isTrash && colors.red400}; | ||
| ${fonts.BODY_16_M}; | ||
| `; | ||
|
|
||
| const StyledContentItem = styled.div<{ isTrash?: boolean }>` | ||
| display: flex; | ||
| gap: 10px; | ||
| align-items: center; | ||
| padding: 10px; | ||
| color: ${({ isTrash }) => isTrash && colors.red400}; | ||
| ${fonts.BODY_14_M}; | ||
| `; | ||
|
|
||
| const EditIcon = styled(IconEdit)` | ||
| width: 16px; | ||
| height: 16px; | ||
| `; | ||
|
|
||
| const TrashIcon = styled(IconTrash)` | ||
| width: 16px; | ||
| height: 16px; | ||
| color: ${colors.red400}; | ||
| `; | ||
|
|
||
| const DotsVerticalIcon = styled(IconDotsVertical)` | ||
| margin-top: 12px; | ||
| cursor: pointer; | ||
| width: 24px; | ||
| height: 24px; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.