diff --git a/.github/workflows/admin-deploy.yml b/.github/workflows/admin-deploy.yml index 25b60f29..9f390945 100644 --- a/.github/workflows/admin-deploy.yml +++ b/.github/workflows/admin-deploy.yml @@ -18,7 +18,7 @@ jobs: - name: Create .env file run: | touch .env - echo "${{ secrets.ENV_VARS_ADMIN }}" >> .env + echo "${{ secrets.ENV_VARS_ADMIN }}" >> apps/admin/.env # 도커 메타데이터 가져오기 - name: Get the version id: get_version diff --git a/apps/admin/.gitignore b/apps/admin/.gitignore index a547bf36..3c55f19e 100644 --- a/apps/admin/.gitignore +++ b/apps/admin/.gitignore @@ -22,3 +22,6 @@ dist-ssr *.njsproj *.sln *.sw? + +#dotenv environment +.env \ No newline at end of file diff --git a/apps/admin/index.html b/apps/admin/index.html index d7753d8e..255fcdb6 100644 --- a/apps/admin/index.html +++ b/apps/admin/index.html @@ -18,7 +18,7 @@ diff --git a/apps/admin/package.json b/apps/admin/package.json index cd3ae3e0..04a2a052 100644 --- a/apps/admin/package.json +++ b/apps/admin/package.json @@ -25,6 +25,7 @@ "react-cookie": "^4.1.1", "react-dom": "^18.2.0", "react-error-boundary": "^3.1.4", + "react-qr-reader": "^2.2.1", "react-router-dom": "^6.6.1", "recoil": "^0.7.6", "vite-plugin-svgr": "^2.4.0" @@ -32,6 +33,7 @@ "devDependencies": { "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", + "@types/react-qr-reader": "^2.1.4", "@vitejs/plugin-react": "^3.0.0", "typescript": "^4.9.3", "vite": "^4.0.0" diff --git a/apps/admin/public/vite.svg b/apps/admin/public/vite.svg index e7b8dfb1..ec839e8d 100644 --- a/apps/admin/public/vite.svg +++ b/apps/admin/public/vite.svg @@ -1 +1,37 @@ - \ No newline at end of file + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/apps/admin/src/App.tsx b/apps/admin/src/App.tsx index 12cc9fc3..ecdc13f8 100644 --- a/apps/admin/src/App.tsx +++ b/apps/admin/src/App.tsx @@ -10,8 +10,26 @@ import Refresh from './components/shared/auth/Refresh'; import NewRouter from '@pages/new'; import AdminNoMenuLayout from '@components/shared/layout/AdminNoMenuLayout'; import Home from '@pages/common/Home'; +import { useQueryClient } from '@tanstack/react-query'; +import useApiError from '@lib/hooks/useApiError'; function App() { + const { handleError } = useApiError(); + const queryClient = useQueryClient(); + + queryClient.setDefaultOptions({ + queries: { + onError: (error: any) => { + handleError(error); + }, + }, + mutations: { + onError: (error: any) => { + handleError(error); + }, + }, + }); + return ( }> diff --git a/apps/admin/src/assets/scanner.svg b/apps/admin/src/assets/scanner.svg new file mode 100644 index 00000000..d3b2221c --- /dev/null +++ b/apps/admin/src/assets/scanner.svg @@ -0,0 +1,9 @@ + + + + + + + + + \ No newline at end of file diff --git a/apps/admin/src/components/events/detail/EventDetailInfo.tsx b/apps/admin/src/components/events/detail/EventDetailInfo.tsx index 8d9368c9..3fe75d9d 100644 --- a/apps/admin/src/components/events/detail/EventDetailInfo.tsx +++ b/apps/admin/src/components/events/detail/EventDetailInfo.tsx @@ -27,12 +27,13 @@ interface EventDetailInfoProps { eventId: string; } +let isInitialized = false; + const EventDetailInfo = ({ content, setForm, eventId, }: EventDetailInfoProps) => { - const [curContent, setCurContent] = useState(''); const toolbarItems = [ ['heading', 'bold', 'italic', 'strike'], ['hr', 'quote'], @@ -44,8 +45,10 @@ const EventDetailInfo = ({ const editorRef = useRef(null); useEffect(() => { - setCurContent(content); - if (editorRef.current) editorRef.current!.getInstance().setHTML(content); + if (editorRef.current && !isInitialized && content !== '') { + isInitialized = true; + editorRef.current.getInstance().setHTML(content); + } }, [content]); // presigned 발급 api @@ -103,7 +106,6 @@ const EventDetailInfo = ({ onChange={onChange} placeholder="공연 상세 내용을 입력해주세요." previewStyle="vertical" // 미리보기 스타일 지정 - initialValue={curContent} hideModeSwitch={true} // 모드 바꾸기 스위치 숨기기 여부 previewHighlight={true} height="500px" // 에디터 창 높이 diff --git a/apps/admin/src/components/events/info/Map.tsx b/apps/admin/src/components/events/info/Map.tsx index f76baff8..38d0e3ab 100644 --- a/apps/admin/src/components/events/info/Map.tsx +++ b/apps/admin/src/components/events/info/Map.tsx @@ -1,11 +1,12 @@ -import { Input, ListHeader, Modal, Padding, Spacing } from '@dudoong/ui'; +import { Input, ListHeader, Search, Spacing, TagButton } from '@dudoong/ui'; import { BasicEventRequest } from '@lib/apis/event/eventType'; import useBottomButton from '@lib/hooks/useBottomButton'; import useEvents from '@lib/hooks/useEvents'; import timeFormatter from '@lib/utils/timeFormatter'; -import { SyntheticEvent, useEffect, useState } from 'react'; +import { useEffect, useState } from 'react'; import { Map, MapMarker } from 'react-kakao-maps-sdk'; import ModalSearch from './ModalSearch'; +import useGlobalOverlay from '@lib/hooks/useGlobalOverlay'; interface place { content: string; @@ -18,10 +19,12 @@ interface place { } const MapPage = (props: any) => { + const { openOverlay } = useGlobalOverlay(); const [lat, setLat] = useState(); const [lng, setLng] = useState(); - const [placeName, setPlaceName] = useState(); - const [placeAddress, setPlaceAddress] = useState(); + const [placeName, setPlaceName] = useState(); + const [placeAddress, setPlaceAddress] = useState(); + const [detailAddress, setDetailAddress] = useState(); const [markers, setMarkers] = useState(); const [map, setMap] = useState(); const [address, setAddress] = useState(''); @@ -49,6 +52,8 @@ const MapPage = (props: any) => { lng: Number(props.place.longitude), }, }); + setPlaceName(props.place.placeName); + setDetailAddress(props.place.placeAddress); } }, [props?.place]); @@ -65,13 +70,19 @@ const MapPage = (props: any) => { name: props.name, startAt: timeFormatter(props.startDate, props.startTime), runTime: props.runtime, - placeName: curMarker.content, - placeAddress: curMarker.placeAddress, + placeName: placeName, + placeAddress: detailAddress, longitude: Number(curMarker.position.lng), latitude: Number(curMarker.position.lat), }; console.log(payload); - changeEventMutation.mutate(payload); + changeEventMutation.mutate(payload, { + onSuccess: () => { + openOverlay({ + content: 'saved', + }); + }, + }); } }; @@ -102,10 +113,14 @@ const MapPage = (props: any) => { setAddress(e.target.value); }; + const handleName = (e: any) => { + e.preventDefault(); + }; + const handleMap = () => { if (!map) return; const ps = new kakao.maps.services.Places(); - if (ps) { + if (ps && address !== '') { ps.keywordSearch(address, (data, status, _pagination) => { if (status === kakao.maps.services.Status.OK) { // 검색된 장소 위치를 기준으로 지도 범위를 재설정하기위해 @@ -129,8 +144,6 @@ const MapPage = (props: any) => { ); } setMarkers(markers); - console.log(markers); - console.log(_pagination); setPagination(_pagination); //여기서 lat,lngset해주면될듯? @@ -147,7 +160,6 @@ const MapPage = (props: any) => { setMarker(markers); setLat(Number(markers.position.lat)); setLng(Number(markers.position.lng)); - setPlaceName(markers.content); bounds.extend( new kakao.maps.LatLng( @@ -167,24 +179,47 @@ const MapPage = (props: any) => { <>
setIsOpen(true)} + /> + } > -
+ + setIsOpen(true)} - readOnly + placeholder="공연장 이름을 적어주세요" + value={placeName ? placeName : ''} + onChange={(e: { target: { value: string } }) => + setPlaceName(e.target.value) + } + > + + + setDetailAddress(e.target.value) + } >
{ {arr.map((num) => ( - <> - - - - + + + ))} - - - ); -}; -export default TempOButtonSet; diff --git a/apps/admin/src/components/events/options/apply/OptionDropArea.tsx b/apps/admin/src/components/events/options/apply/OptionDropArea.tsx new file mode 100644 index 00000000..ae0eb6f6 --- /dev/null +++ b/apps/admin/src/components/events/options/apply/OptionDropArea.tsx @@ -0,0 +1,132 @@ +import { Droppable, Draggable } from 'react-beautiful-dnd'; +import styled from '@emotion/styled'; +import { theme, Text, Padding, FlexBox } from '@dudoong/ui'; +import { OptionGroupResponse } from '@lib/apis/option/optionType'; +import { ReactNode } from 'react'; +import { css } from '@emotion/react'; + +interface OptionDropArea { + ticketItemId: number; + optionGroups: OptionGroupResponse[]; + isEditable?: boolean; +} + +const OptionDropArea = ({ + ticketItemId, + optionGroups, + isEditable = true, +}: OptionDropArea) => { + return ( + <> + + {(provided) => ( +
+ {optionGroups.length === 0 ? ( + <> + + + ) : ( + <> + {optionGroups.map( + (item: OptionGroupResponse, index: number) => ( + + {(provided) => ( +
+ +
+ )} + + ), + )} + {provided.placeholder} + + )} +
+ )} + + + ); +}; + +const AppliedOption = ({ + item, + isEditable, +}: { + item: OptionGroupResponse; + isEditable: boolean; +}) => { + const additionalPrice = + item.options.find((option) => option.answer === '예')?.additionalPrice || + '0원'; + return ( + + + + + {item.name} + + + {item.type} {additionalPrice !== '0원' && `· ${additionalPrice}`} + + + + + ); +}; + +const BlankOption = ({ + dropPlaceholder, + isEditable, +}: { + dropPlaceholder: ReactNode; + isEditable: boolean; +}) => { + return ( + + + + {isEditable + ? '추가할 옵션을 드래그 앤 드롭 해주세요.' + : '이미 판매된 티켓의 옵션은 수정할 수 없어요.'} + + + {dropPlaceholder} + + ); +}; + +export default OptionDropArea; + +const RoundWrapper = styled.div<{ isEditable: boolean }>` + border-radius: 10px; + background-color: ${theme.palette.gray_100}; + border: 1px solid ${({ theme }) => theme.palette.gray_200}; + ${({ theme, isEditable }) => + !isEditable && + css` + background-color: ${theme.palette.gray_200}; + `} + height: 100px; + margin-top: 10px; +`; + +const OptionWrapper = styled.div` + border-radius: 10px; + background-color: ${theme.palette.main_100}; + height: auto; + margin-top: 12px; +`; diff --git a/apps/admin/src/components/events/options/apply/OptionItem.tsx b/apps/admin/src/components/events/options/apply/OptionItem.tsx new file mode 100644 index 00000000..38ea1509 --- /dev/null +++ b/apps/admin/src/components/events/options/apply/OptionItem.tsx @@ -0,0 +1,54 @@ +import { useLocation } from 'react-router-dom'; +import { useMutation, useQueryClient } from '@tanstack/react-query'; +import OptionApi from '@lib/apis/option/OptionApi'; +import { FlexBox, ListRow, TagButton, Padding } from '@dudoong/ui'; + +export interface OptionItemProps { + name: string; + subText: string; + OptionGroupId: number; +} + +const OptionItem = ({ name, subText, OptionGroupId }: OptionItemProps) => { + const { pathname } = useLocation(); + const eventId = pathname.split('/')[2]; + const queryClient = useQueryClient(); + const { mutate: optionDeleteMutate } = useMutation( + OptionApi.PATCH_OPTION_DELETE, + { + onSuccess: (data) => { + queryClient.invalidateQueries({ queryKey: ['AllOption', eventId] }); + }, + }, + ); + + const handleRemoveClick = () => { + optionDeleteMutate({ + eventId: eventId, + optionGroupId: OptionGroupId, + }); + }; + + return ( + <> + + + + + + + + ); +}; + +export default OptionItem; diff --git a/apps/admin/src/components/events/options/apply/OptionList.tsx b/apps/admin/src/components/events/options/apply/OptionList.tsx new file mode 100644 index 00000000..af4d367a --- /dev/null +++ b/apps/admin/src/components/events/options/apply/OptionList.tsx @@ -0,0 +1,98 @@ +import { + ListHeader, + theme, + Spacing, + FlexBox, + Text, + Padding, +} from '@dudoong/ui'; +import styled from '@emotion/styled'; +import OptionItem from './OptionItem'; +import { Draggable, Droppable } from 'react-beautiful-dnd'; +import type { OptionGroupResponse } from '@lib/apis/option/optionType'; + +interface OptionListProps { + optionItems: OptionGroupResponse[]; +} + +const OptionList = ({ optionItems }: OptionListProps) => { + console.log(optionItems); + if (!optionItems?.length) { + return ( + +
+ + + + + 옵션을 먼저 생성해주세요! + + +
+ + ); + } else { + return ( + + +
+ + +
+ + + {(provided) => ( +
+ {optionItems?.map((item, index) => ( + + {(provided) => ( +
+ + + + +
+ )} + + ))} + {provided.placeholder} +
+ )} + + + + ); + } +}; + +export default OptionList; + +const Wrapper = styled.div` + & > div { + position: sticky; + position: -webkit-sticky; + margin-top: 44px; + top: 36px; + } +`; + +const OptionItemContainer = styled.div` + width: 400px; + height: auto; + box-sizing: border-box; + background-color: ${theme.palette.white}; + border-radius: 12px; + border: 1px solid ${theme.palette.black}; +`; diff --git a/apps/admin/src/components/events/options/apply/TicketListOption.tsx b/apps/admin/src/components/events/options/apply/TicketListOption.tsx new file mode 100644 index 00000000..352ba867 --- /dev/null +++ b/apps/admin/src/components/events/options/apply/TicketListOption.tsx @@ -0,0 +1,55 @@ +import { ListHeader, Spacing, theme, Text, Divider } from '@dudoong/ui'; +import styled from '@emotion/styled'; +import { useQuery } from '@tanstack/react-query'; +import { useLocation } from 'react-router-dom'; +import OptionDropArea from './OptionDropArea'; +import OptionApi from '@lib/apis/option/OptionApi'; + +const TicketListOption = () => { + const { pathname } = useLocation(); + const eventId = pathname.split('/')[2]; + + const { data, isSuccess } = useQuery(['AppliedTicket', eventId], () => + OptionApi.GET_EVENTS_APPLIEDOPTIONGROUPS(eventId), + ); + + return ( + + {isSuccess && ( + <> + + + + + {data.appliedOptionGroups?.map((item) => ( +
+ + {item.ticketName} + + + + +
+ ))} + + )} + + ); +}; +export default TicketListOption; + +const Wrapper = styled.div``; + +const TicketItem = styled.div` + width: 400px; + height: auto; + box-sizing: border-box; + background-color: ${theme.palette.white}; + border-radius: 12px; + border: 1px solid ${theme.palette.black}; + + padding: 24px 22px; +`; diff --git a/apps/admin/src/components/events/options/apply/index.tsx b/apps/admin/src/components/events/options/apply/index.tsx new file mode 100644 index 00000000..7c95b3e5 --- /dev/null +++ b/apps/admin/src/components/events/options/apply/index.tsx @@ -0,0 +1,92 @@ +import ContentGrid from '@components/shared/layout/ContentGrid'; +import OptionApi from '@lib/apis/option/OptionApi'; +import useGlobalOverlay from '@lib/hooks/useGlobalOverlay'; +import { useMutation, useQuery, useQueryClient } from '@tanstack/react-query'; +import { useEffect } from 'react'; +import { + DragDropContext, + DropResult, + resetServerContext, +} from 'react-beautiful-dnd'; +import { useLocation } from 'react-router-dom'; +import OptionList from './OptionList'; +import TicketListOption from './TicketListOption'; + +const ApplyOption = () => { + const { pathname } = useLocation(); + const eventId = pathname.split('/')[2]; + const queryClient = useQueryClient(); + const { openOverlay, closeOverlay } = useGlobalOverlay(); + const { data, isSuccess } = useQuery(['optionGroups', eventId], () => + OptionApi.GET_ALL_OPTION(eventId), + ); + + const onDragEnd = ({ draggableId, destination }: DropResult) => { + const dragElementId = draggableId; + const isApply = dragElementId.split('-')[0] === 'eventOption'; + + if (isApply && destination) { + const ticketItemId = destination.droppableId; + //옵선 적용 + applyOptionMutate({ + eventId, + ticketItemId, + payload: { optionGroupId: parseInt(dragElementId.split('-')[1]) }, + }); + } else { + //옵션 적용 취소 + const [, ticketItemId, optionGroupId] = dragElementId.split('-'); + openOverlay({ + content: 'cancelOption', + props: { + closeOverlay, + cancelOptionHandler: () => + cancelOptionMutate({ + eventId, + ticketItemId, + payload: { optionGroupId: parseInt(optionGroupId) }, + }), + }, + }); + } + }; + + useEffect(() => { + resetServerContext(); + }, []); + + // 옵션 적용 왼->오 + const { mutate: applyOptionMutate } = useMutation( + OptionApi.PATCH_APPLY_OPTION, + { + onSuccess: (data) => { + queryClient.invalidateQueries({ queryKey: ['AppliedTicket', eventId] }); + }, + }, + ); + //옵션 취소 왼<-오 + const { mutate: cancelOptionMutate } = useMutation( + OptionApi.PATCH_CANCEL_OPTION, + { + onSuccess: (data) => { + queryClient.invalidateQueries({ queryKey: ['AppliedTicket', eventId] }); + closeOverlay(); + }, + }, + ); + + return ( + <> + {isSuccess && ( + onDragEnd(result)}> + + + + + + )} + + ); +}; + +export default ApplyOption; diff --git a/apps/admin/src/components/events/options/create/NewOption.tsx b/apps/admin/src/components/events/options/create/NewOption.tsx new file mode 100644 index 00000000..dc164ffd --- /dev/null +++ b/apps/admin/src/components/events/options/create/NewOption.tsx @@ -0,0 +1,19 @@ +import { Button } from '@dudoong/ui'; +import { useNavigate } from 'react-router-dom'; + +const NewOption = ({ eventId }: { eventId: string }) => { + const navigate = useNavigate(); + + return ( + <> + + + ); +}; +export default NewOption; diff --git a/apps/admin/src/components/events/options/create/OptionPreview.tsx b/apps/admin/src/components/events/options/create/OptionPreview.tsx new file mode 100644 index 00000000..55b763ca --- /dev/null +++ b/apps/admin/src/components/events/options/create/OptionPreview.tsx @@ -0,0 +1,85 @@ +import styled from '@emotion/styled'; +import { + theme, + ListHeader, + Input, + Divider, + Spacing, + FlexBox, + SelectButton, +} from '@dudoong/ui'; +import { OptionItemProps } from '@lib/apis/option/optionType'; +import { useState } from 'react'; + +const OptionPreview = ({ name, description, type }: OptionItemProps) => { + const [answer, setAnswer] = useState('Y'); + const handleClickSelect = (key: 'Y' | 'N') => { + setAnswer(key); + }; + return ( +
+ + + + + + {type === '주관식' ? ( + <> + + + ) : ( + <> + + { + handleClickSelect('Y'); + }} + /> + { + handleClickSelect('N'); + }} + /> + + + )} + +
+ ); +}; + +export default OptionPreview; + +const Wrapper = styled.div` + width: 400px; + height: auto; + box-sizing: border-box; + background-color: ${theme.palette.white}; + border-radius: 12px; + border: 1px solid ${theme.palette.black}; + + padding: 24px 22px; +`; diff --git a/apps/admin/src/components/events/qr/FullQrScreen.tsx b/apps/admin/src/components/events/qr/FullQrScreen.tsx new file mode 100644 index 00000000..faed3b83 --- /dev/null +++ b/apps/admin/src/components/events/qr/FullQrScreen.tsx @@ -0,0 +1,45 @@ +import { FlexBox, ListHeader, Spacing, Button } from '@dudoong/ui'; +import { ReactComponent as Scanner } from '@assets/scanner.svg'; +import styled from '@emotion/styled'; +import { css } from '@emotion/react'; +import QrScanner from '@components/events/qr/QrScanner'; + +const FullQrScreen = ({ + setNewView, +}: { + setNewView: React.Dispatch>; +}) => { + return ( + <> + + + + + { + setNewView((prev: boolean) => { + return !prev; + }); + }} + > + 돌아가기 + + + ); +}; + +export default FullQrScreen; + +const ScannerWrapper = styled(FlexBox)` + position: fixed; + top: calc(50vh - 225px); + left: calc(50vw - 225px); + z-index: 11; +`; + +const CustomButton = styled(Button)` + z-index: 11; + position: fixed; + right: 40px; + bottom: 40px; +`; diff --git a/apps/admin/src/components/events/qr/NormalQrScreen.tsx b/apps/admin/src/components/events/qr/NormalQrScreen.tsx new file mode 100644 index 00000000..80e9f42b --- /dev/null +++ b/apps/admin/src/components/events/qr/NormalQrScreen.tsx @@ -0,0 +1,56 @@ +import { FlexBox, ListHeader, Spacing, Button } from '@dudoong/ui'; +import { ReactComponent as Scanner } from '@assets/scanner.svg'; +import styled from '@emotion/styled'; +import { css } from '@emotion/react'; +import QrScanner from '@components/events/qr/QrScanner'; +import { useState } from 'react'; + +const NormalQrScreen = ({ + setNewView, +}: { + setNewView: React.Dispatch>; +}) => { + return ( + <> + + +
+ + + + +
+ + + + + + + ); +}; + +export default NormalQrScreen; + +const ScannerWrapper = styled(FlexBox)` + position: absolute; + margin: 75px 0px; + width: 100%; + z-index: 50; +`; diff --git a/apps/admin/src/components/events/qr/QrScanner.tsx b/apps/admin/src/components/events/qr/QrScanner.tsx new file mode 100644 index 00000000..5aec6959 --- /dev/null +++ b/apps/admin/src/components/events/qr/QrScanner.tsx @@ -0,0 +1,93 @@ +import styled from '@emotion/styled'; +import { useMutation } from '@tanstack/react-query'; +import EventApi from '@lib/apis/event/EventApi'; +import { IssuedTicket } from '@lib/apis/event/eventType'; +import { useLocation } from 'react-router-dom'; +import useToastify from '@dudoong/ui/src/lib/useToastify'; +import QrReader from 'react-qr-reader'; +import { css } from '@emotion/react'; + +interface QrScannerProps { + newView: boolean; +} + +const QrScanner = ({ newView }: QrScannerProps) => { + const eventId = useLocation().pathname.split('/')[2]; + const { setToast } = useToastify(); + + // 입장 처리 api + const patchEventIssuedTicket = useMutation( + EventApi.PATCH_EVENT_ISSUEDTICKET, + { + onSuccess: (data: IssuedTicket) => { + console.log('PATCH_EVENT_ISSUEDTICKET : ', data); + setToast({ type: 'success', comment: '입장이 완료되었습니다.' }); + }, + }, + ); + + const handleScan = (result: any) => { + if (result) { + console.log('scan ticket : ', result); + patchEventIssuedTicket.mutate({ + eventId: eventId, + uuid: result, + }); + } + }; + + const qrReaderStyle = newView + ? { + position: 'fixed', + top: '0px', + left: '0px', + width: '100vw', + height: '100vh', + zIndex: '10', + } + : { + borderRadius: '12px', + boxShadow: '3px 4px 7px rgba(0, 0, 0, 0.15)', + border: ` 1px solid #000`, + width: '100%', + height: '600px', + padding: '0', + margin: '0', + overflow: 'hidden', + }; + + return ( + {}} + facingMode="user" + style={qrReaderStyle} + newView={newView} + /> + ); +}; + +export default QrScanner; + +interface QrCodeReaderProps { + newView: boolean; +} + +const QrCodeReader = styled(QrReader)` + & > section > div { + border: 0px none !important; + box-shadow: none !important; + } + ${({ newView }) => + newView + ? css` + & > section > video { + height: 100vh !important; + } + & > section { + height: 100vh !important; + } + ` + : null} +`; diff --git a/apps/admin/src/components/events/qr/TempQrButtonSet.tsx b/apps/admin/src/components/events/qr/TempQrButtonSet.tsx deleted file mode 100644 index 30a4b539..00000000 --- a/apps/admin/src/components/events/qr/TempQrButtonSet.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { Button } from '@dudoong/ui'; -import { useNavigate } from 'react-router-dom'; - -const TempQrButtonSet = () => { - const navigate = useNavigate(); - return ( - <> - - - - ); -}; -export default TempQrButtonSet; diff --git a/apps/admin/src/components/events/tickets/newtickets/input/TicketInput.tsx b/apps/admin/src/components/events/tickets/newtickets/input/TicketInput.tsx index f21f595f..be6c7544 100644 --- a/apps/admin/src/components/events/tickets/newtickets/input/TicketInput.tsx +++ b/apps/admin/src/components/events/tickets/newtickets/input/TicketInput.tsx @@ -13,7 +13,7 @@ import { forwardRef } from 'react'; export interface TicketInputProps extends InputProps { title: string; - description: string; + description?: string; placeholder: string; titleTypo?: ListHeaderVariantKey; descriptionTypo?: KeyOfTypo; diff --git a/apps/admin/src/components/hosts/HostsEvents.tsx b/apps/admin/src/components/hosts/events/HostsEvents.tsx similarity index 100% rename from apps/admin/src/components/hosts/HostsEvents.tsx rename to apps/admin/src/components/hosts/events/HostsEvents.tsx diff --git a/apps/admin/src/components/hosts/NoEventPage.tsx b/apps/admin/src/components/hosts/events/NoEventPage.tsx similarity index 100% rename from apps/admin/src/components/hosts/NoEventPage.tsx rename to apps/admin/src/components/hosts/events/NoEventPage.tsx diff --git a/apps/admin/src/components/hosts/info/GridRightElement.tsx b/apps/admin/src/components/hosts/info/GridRightElement.tsx index 2aeb4930..f0f6a6bc 100644 --- a/apps/admin/src/components/hosts/info/GridRightElement.tsx +++ b/apps/admin/src/components/hosts/info/GridRightElement.tsx @@ -1,6 +1,6 @@ import { ListHeader, Spacing, Input, FlexBox } from '@dudoong/ui'; import { InputFormType } from '@pages/hosts/Info'; -import { UseFormRegister, FieldValues } from 'react-hook-form'; +import { UseFormRegister } from 'react-hook-form'; interface GridRightElementProps { register: UseFormRegister; @@ -18,7 +18,8 @@ const GridRightElement = ({ register }: GridRightElementProps) => { {...register('introduce', { required: true, })} - placeholder={'최대 N글자까지 쓸 수 있어요.'} + placeholder={'최대 50글자까지 쓸 수 있어요.'} + maxLength={50} /> diff --git a/apps/admin/src/components/new/events/firstStep/FirstStep.tsx b/apps/admin/src/components/new/events/firstStep/FirstStep.tsx index 90b692e4..8cafdba9 100644 --- a/apps/admin/src/components/new/events/firstStep/FirstStep.tsx +++ b/apps/admin/src/components/new/events/firstStep/FirstStep.tsx @@ -27,7 +27,7 @@ const FirstStep = () => { }} disabled={selectedHostId === null} > - 호스트 만들기 + 다음 ); diff --git a/apps/admin/src/components/new/events/secondStep/SecondStep.tsx b/apps/admin/src/components/new/events/secondStep/SecondStep.tsx index 5c12a2d9..fb8f6e03 100644 --- a/apps/admin/src/components/new/events/secondStep/SecondStep.tsx +++ b/apps/admin/src/components/new/events/secondStep/SecondStep.tsx @@ -9,37 +9,40 @@ import { Button, BorderBox, } from '@dudoong/ui'; -import { useInputs } from '@dudoong/utils'; import styled from '@emotion/styled'; -import TimeButton from './TimeButton'; import type { CreateEventRequest } from '@lib/apis/event/eventType'; -import { useRef } from 'react'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import useEvents from '@lib/hooks/useEvents'; import timeFormatter from '@lib/utils/timeFormatter'; +import { useForm, FormState } from 'react-hook-form'; interface SecondStepProps { hostId: number; } +interface InputType { + name: string; + runTime: number; +} + const SecondStep = ({ hostId }: SecondStepProps) => { - const runTimeRef = useRef(null); - const [runTime, setRunTime] = useState(null); const [startAt, setStartAt] = useState(null); const [startAtTime, setStartAtTime] = useState(null); - const [form, onChange] = useInputs({ - hostId: hostId, - name: '', - startAt: '', - runTime: 0, + const [buttonDisable, setButtonDisable] = useState(true); + const { register, handleSubmit, formState } = useForm({ + mode: 'onChange', }); const { postEventMutation } = useEvents(); - const makeEventHandler = () => { - if (startAt && startAtTime && runTime) { + useEffect(() => { + setButtonDisable(checkDisable(startAt, startAtTime, formState)); + }, [formState.isValid, startAt, startAtTime]); + + const makeEventHandler = (data: InputType) => { + if (startAt && startAtTime) { const payload = { - ...form, - runTime: runTime, + ...data, + hostId: hostId, startAt: timeFormatter(startAt, startAtTime), } as CreateEventRequest; @@ -47,27 +50,6 @@ const SecondStep = ({ hostId }: SecondStepProps) => { } }; - const changeRunTimeHandler = (change: number) => { - if (runTimeRef.current) { - if (change === 0) { - // 초기화 - runTimeRef.current.value = '0'; - setRunTime(0); - } - if (runTimeRef.current.value) { - // 시간 입력이 되어있을 때 - const curValue = Number(runTimeRef.current.value); - runTimeRef.current.value = - curValue + change < 0 ? '0' : `${curValue + change}`; - setRunTime(Number(runTimeRef.current.value)); - } else { - // 시간 입력이 안되어있을 때 - runTimeRef.current.value = change < 0 ? '0' : `${change}`; - setRunTime(Number(runTimeRef.current.value)); - } - } - }; - return ( <> @@ -84,74 +66,50 @@ const SecondStep = ({ hostId }: SecondStepProps) => { padding={[32, 0, 12, 0]} /> - - - + + + + - - - - - - - - - { - setRunTime(Number(e.target.value)); - }} - width={154} - ref={runTimeRef} - /> - { - changeRunTimeHandler(-10); - }} - /> - { - event.preventDefault(); - changeRunTimeHandler(30); - }} - /> - { - changeRunTimeHandler(0); - }} - /> - - + ); @@ -177,20 +135,18 @@ const SubTitle = () => { const checkDisable = ( date: Date | null, time: Date | null, - runTime: number | null, - name: string, + formState: FormState, ) => { - if (!date || !time || !runTime || name === '') return true; + console.log(date, time); + // 미입력 + if (!date || !time || !formState.isValid) return true; + // 날짜가 현재 이전인 경우 + if (date < new Date() && time < new Date()) return true; return false; }; // ---------------------------------------------------------------- -interface PickerWrapperProps { - width: number; -} - -const PickerWrapper = styled(FlexBox)` - width: ${({ width }) => `${width}px`}; +const PickerWrapper = styled(FlexBox)` height: 48px; `; diff --git a/apps/admin/src/components/new/hosts/CreateHost.tsx b/apps/admin/src/components/new/hosts/CreateHost.tsx index 6ac27340..72f3b314 100644 --- a/apps/admin/src/components/new/hosts/CreateHost.tsx +++ b/apps/admin/src/components/new/hosts/CreateHost.tsx @@ -8,7 +8,7 @@ import { } from '@dudoong/ui'; import { useMutation } from '@tanstack/react-query'; import type { CreateHostRequest } from '@lib/apis/host/hostType'; -import { HostContactDes } from '@components/hosts/HostDescription'; +import { HostContactDes } from '@components/new/hosts/HostDescription'; import { useLocation, useNavigate } from 'react-router-dom'; import { useInputs } from '@dudoong/utils'; import HostApi from '@lib/apis/host/HostApi'; @@ -38,9 +38,6 @@ const CreateHost = () => { navigate(`/hosts/${curId}/info`); } }, - onError: () => { - console.log('error'); - }, }); const handleSubmit = (e: React.MouseEvent) => { diff --git a/apps/admin/src/components/hosts/HostDescription.tsx b/apps/admin/src/components/new/hosts/HostDescription.tsx similarity index 100% rename from apps/admin/src/components/hosts/HostDescription.tsx rename to apps/admin/src/components/new/hosts/HostDescription.tsx diff --git a/apps/admin/src/components/shared/layout/Breadcrumb.tsx b/apps/admin/src/components/shared/layout/Breadcrumb.tsx index 8d7f4da1..9bfa88ac 100644 --- a/apps/admin/src/components/shared/layout/Breadcrumb.tsx +++ b/apps/admin/src/components/shared/layout/Breadcrumb.tsx @@ -53,6 +53,9 @@ const Breadcrumb = ({ name }: { name: string }) => { if (urlDetails.length > 3) { newUrl = EVENT_URL_SET[`${urlDetails[2]}new` as EventUrlSetTypeKey]; } + if (urlDetails[2] == 'qr' && urlDetails.length > 3) { + newUrl = 'QR 확인'; + } } else { detailUrl = HOST_URL_SET[urlDetails[2] as HostUrlSetTypeKey]; if (urlDetails.length > 3) { diff --git a/apps/admin/src/components/shared/overlay/GlobalOverlay.tsx b/apps/admin/src/components/shared/overlay/GlobalOverlay.tsx index 45907106..37a72829 100644 --- a/apps/admin/src/components/shared/overlay/GlobalOverlay.tsx +++ b/apps/admin/src/components/shared/overlay/GlobalOverlay.tsx @@ -13,6 +13,8 @@ import Register from './content/Register'; import Saved from './content/Saved'; import SaveTicket from './content/SaveTicket'; import TableViewDetail from './content/TableDetailView'; +import SaveOption from './content/SaveOption'; +import CancelOption from './content/CancelOption'; export type GlobalSheetContentKey = | 'register' @@ -22,15 +24,13 @@ export type GlobalSheetContentKey = | 'paidTicket' | 'approve' | 'saveTicket' + | 'saveOption' | 'tableViewDetail' | 'saved' - | 'invitation'; + | 'invitation' + | 'cancelOption'; -export type GlobalSheetContentType = { - [key in GlobalSheetContentKey]: ReactNode; -}; - -const globalSheetContent = { +const globalSheetContent: Record = { register: Register, deleteEvent: DeleteEvent, postEvent: PostEvent, @@ -38,9 +38,11 @@ const globalSheetContent = { paidTicket: PaidTicket, approve: Approve, saveTicket: SaveTicket, + saveOption: SaveOption, tableViewDetail: TableViewDetail, saved: Saved, invitation: Invitation, + cancelOption: CancelOption, }; const GlobalOverlay = () => { diff --git a/apps/admin/src/components/shared/overlay/content/CancelOption.tsx b/apps/admin/src/components/shared/overlay/content/CancelOption.tsx new file mode 100644 index 00000000..76a7a9f3 --- /dev/null +++ b/apps/admin/src/components/shared/overlay/content/CancelOption.tsx @@ -0,0 +1,65 @@ +import { + Button, + Divider, + FlexBox, + ListHeader, + Spacing, + Text, +} from '@dudoong/ui'; +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +interface CancelOptionProps { + closeOverlay: () => void; + cancelOptionHandler: () => void; +} + +const CancelOption = ({ + closeOverlay, + cancelOptionHandler, +}: CancelOptionProps) => { + return ( + + + + + 티켓이 판매되기 이전에는 다시 적용할 수 있어요.
+ + + + + + + + ); +}; + +export default CancelOption; + +const Wrapper = styled.div` + padding: 15px 35px; + width: 492px; + box-sizing: border-box; +`; diff --git a/apps/admin/src/components/shared/overlay/content/SaveOption.tsx b/apps/admin/src/components/shared/overlay/content/SaveOption.tsx new file mode 100644 index 00000000..cea913d2 --- /dev/null +++ b/apps/admin/src/components/shared/overlay/content/SaveOption.tsx @@ -0,0 +1,54 @@ +import { + Button, + Divider, + FlexBox, + ListHeader, + Spacing, + Text, +} from '@dudoong/ui'; +import { css } from '@emotion/react'; +import styled from '@emotion/styled'; + +interface SaveOptionProps { + closeOverlay: () => void; + saveOptionHandler: () => void; +} + +const SaveOption = ({ saveOptionHandler }: SaveOptionProps) => { + return ( + + + + + 새 옵션이 저장되었어요요. +
+ 저장된 옵션은 옵션 적용 페이지에서 확인할 수 있어요! + + + + + + + ); +}; + +export default SaveOption; + +const Wrapper = styled.div` + padding: 15px 35px; + width: 492px; + box-sizing: border-box; +`; diff --git a/apps/admin/src/lib/apis/event/EventApi.ts b/apps/admin/src/lib/apis/event/EventApi.ts index 0adc3585..43b35d1b 100644 --- a/apps/admin/src/lib/apis/event/EventApi.ts +++ b/apps/admin/src/lib/apis/event/EventApi.ts @@ -13,6 +13,7 @@ import type { ImageUrlResponse, UpdateEventDetailRequest, BasicEventRequest, + IssuedTicket, } from './eventType'; const EventApi = { @@ -102,6 +103,7 @@ const EventApi = { ); return response.data.data; }, + PATCH_EVENT_BASIC: async ( payload: BasicEventRequest, eventId: string, @@ -112,6 +114,19 @@ const EventApi = { ); return response.data.data; }, + + PATCH_EVENT_ISSUEDTICKET: async ({ + uuid, + eventId, + }: { + uuid: string; + eventId: string; + }): Promise => { + const response = await axiosPrivate.patch( + `events/${eventId}/issuedTickets/${uuid}`, + ); + return response.data.data; + }, }; export default EventApi; diff --git a/apps/admin/src/lib/apis/event/eventType.ts b/apps/admin/src/lib/apis/event/eventType.ts index 38cd2826..2a3c6383 100644 --- a/apps/admin/src/lib/apis/event/eventType.ts +++ b/apps/admin/src/lib/apis/event/eventType.ts @@ -121,8 +121,8 @@ export interface BasicEventRequest { name: string; startAt: string; runTime: number; - placeName: string; - placeAddress: string; + placeName: string | undefined; + placeAddress: string | undefined; longitude: number; latitude: number; } @@ -132,3 +132,22 @@ type EventStatusType = 'CLOSED' | 'CALCULATING' | 'OPEN' | 'PREPARING'; export interface UpdateEventStatusRequest { status: EventStatus; } + +export interface IssuedTicket { + issuedTicketId: number; + issuedTicketNo: string; + uuid: string; + ticketName: string; + ticketPrice: string; + createdAt: string; + enteredAt: string; + issuedTicketStatus: IssuedTicketStatusType; + optionPrice: string; + userInfo: { + userId: number; + userName: string; + phoneNumber: string; + }; +} + +type IssuedTicketStatusType = '입장 완료' | '입장 전' | '취소 티켓'; diff --git a/apps/admin/src/lib/apis/option/OptionApi.ts b/apps/admin/src/lib/apis/option/OptionApi.ts new file mode 100644 index 00000000..2953e274 --- /dev/null +++ b/apps/admin/src/lib/apis/option/OptionApi.ts @@ -0,0 +1,103 @@ +import { axiosPrivate } from '../axios'; +import { + ApplyTicketOptionRequest, + CreateTicketOptionRequest, + GetAppliedOptionGroupsResponse, + GetEventOptionsResponse, + GetTicketItemOptionsResponse, + OptionGroupResponse, +} from './optionType'; + +const OptionApi = { + GET_ALL_OPTION: async (eventId: string): Promise => { + const response = await axiosPrivate.get(`events/${eventId}/ticketOptions`); + return response.data.data; + }, + + POST_OPTION: async ({ + eventId, + payload, + }: { + eventId: string; + payload: CreateTicketOptionRequest; + }): Promise => { + console.log(payload); + const response = await axiosPrivate.post( + `events/${eventId}/ticketOptions`, + payload, + ); + return response.data.data; + }, + + PATCH_OPTION_DELETE: async ({ + eventId, + optionGroupId, + }: { + eventId: string; + optionGroupId: number; + }): Promise => { + const response = await axiosPrivate.patch( + `events/${eventId}/ticketOptions/${optionGroupId}`, + ); + return response.data.data; + }, + + GET_TICKET_OPTION: async ({ + eventId, + ticketItemId, + }: { + eventId: string; + ticketItemId: number; + }): Promise => { + const response = await axiosPrivate.get( + `events/${eventId}/ticketItems/${ticketItemId}/options`, + ); + return response.data.data; + }, + + /** + * 옵션 적용 + * @param param0 + */ + PATCH_APPLY_OPTION: async ({ + eventId, + ticketItemId, + payload, + }: { + eventId: string; + ticketItemId: string; + payload: ApplyTicketOptionRequest; + }): Promise => { + const response = await axiosPrivate.patch( + `events/${eventId}/ticketItems/${ticketItemId}/option`, + payload, + ); + return response.data.data; + }, + PATCH_CANCEL_OPTION: async ({ + eventId, + ticketItemId, + payload, + }: { + eventId: string; + ticketItemId: string; + payload: ApplyTicketOptionRequest; + }): Promise => { + const response = await axiosPrivate.patch( + `events/${eventId}/ticketItems/${ticketItemId}/option/cancel`, + payload, + ); + return response.data.data; + }, + + GET_EVENTS_APPLIEDOPTIONGROUPS: async ( + eventId: string, + ): Promise => { + const response = await axiosPrivate.get( + `events/${eventId}/ticketItems/appliedOptionGroups`, + ); + return response.data.data; + }, +}; + +export default OptionApi; diff --git a/apps/admin/src/lib/apis/option/optionType.ts b/apps/admin/src/lib/apis/option/optionType.ts new file mode 100644 index 00000000..da08752a --- /dev/null +++ b/apps/admin/src/lib/apis/option/optionType.ts @@ -0,0 +1,51 @@ +export type OptionGroupType = '객관식' | 'Y/N' | '주관식'; + +export interface CreateTicketOptionRequest { + type: OptionGroupType; + name: string; + description: string; + additionalPrice?: number; +} +export interface ApplyTicketOptionRequest { + optionGroupId: number; +} +/** + * 티켓 상품에 달린 옵션들 + */ +export interface GetTicketItemOptionsResponse { + optionGroups: OptionGroupResponse[]; +} + +export interface OptionGroupResponse { + optionGroupId: number; + type: OptionGroupType; + name: string; + description: string; + options: OptionResponse[]; +} + +export interface OptionResponse { + optionId: number; + answer: string; + additionalPrice: string; +} + +/** + * 이벤트에 속하는 옵션들 + */ +export interface GetEventOptionsResponse { + optionGroups: OptionGroupResponse[]; +} + +/** + * 해당 이벤트에 속하는 티켓상품들에 속하는 옵션들 + */ +export interface GetAppliedOptionGroupsResponse { + appliedOptionGroups: AppliedOptionGroupsResponse[]; +} + +export interface AppliedOptionGroupsResponse { + ticketItemId: number; + ticketName: string; + optionGroups: OptionGroupResponse[]; +} diff --git a/apps/admin/src/lib/apis/order/orderType.ts b/apps/admin/src/lib/apis/order/orderType.ts index dcff6901..b46df793 100644 --- a/apps/admin/src/lib/apis/order/orderType.ts +++ b/apps/admin/src/lib/apis/order/orderType.ts @@ -1,3 +1,5 @@ +import { OptionGroupType } from "../option/optionType"; + export interface GetOrdersRequest { orderStage: 'APPROVE_WAITING' | 'CONFIRMED'; searchType?: 'PHONE' | 'NAME'; @@ -136,4 +138,4 @@ export interface OptionAnswer { answer: string; additionalPrice: string; } -export type OptionGroupType = 'Y/N' | '객관식' | '주관식'; + diff --git a/apps/admin/src/lib/hooks/useApiError.ts b/apps/admin/src/lib/hooks/useApiError.ts new file mode 100644 index 00000000..4244548d --- /dev/null +++ b/apps/admin/src/lib/hooks/useApiError.ts @@ -0,0 +1,42 @@ +import useToastify from '@dudoong/ui/src/lib/useToastify'; +import { useCallback } from 'react'; +import { AxiosError } from 'axios'; +import { useNavigate } from 'react-router-dom'; + +export interface TCustomErrorResponse { + success: boolean; + status: number; + code: string; + reason: string; + timeStamp: string; + path: string; +} + +const useApiError = () => { + const { setToast } = useToastify(); + const navigate = useNavigate(); + + const handleError = useCallback((axiosError: AxiosError) => { + const errorResponse = axiosError.response?.data as TCustomErrorResponse; + const { status, reason } = errorResponse; + switch (status) { + // BadRequestException | ValidationError + case 400: + case 404: + case 500: + setToast({ comment: reason }); + break; + // authentication error + case 401: + case 403: + navigate('/login'); + break; + default: + setToast({ comment: reason }); + break; + } + }, []); + return { handleError } as const; +}; + +export default useApiError; diff --git a/apps/admin/src/lib/hooks/useEvents.ts b/apps/admin/src/lib/hooks/useEvents.ts index 79b4cae8..78be37fd 100644 --- a/apps/admin/src/lib/hooks/useEvents.ts +++ b/apps/admin/src/lib/hooks/useEvents.ts @@ -18,9 +18,6 @@ const useEvents = () => { console.log('postEventMutation : ', data); navigate(`/events/${curId}/info`); }, - onError: () => { - console.log('error'); - }, }); const changeEventMutation = useMutation( @@ -31,9 +28,6 @@ const useEvents = () => { console.log('success'); console.log(data); }, - onError: () => { - console.log('error'); - }, }, ); return { postEventMutation, changeEventMutation }; diff --git a/apps/admin/src/lib/utils/DragAndDrop/dragStartHandler.tsx b/apps/admin/src/lib/utils/DragAndDrop/dragStartHandler.tsx new file mode 100644 index 00000000..752e5f81 --- /dev/null +++ b/apps/admin/src/lib/utils/DragAndDrop/dragStartHandler.tsx @@ -0,0 +1,3 @@ +export const handleDragStart = async (initial: { draggableId: string }) => { + const restoreItemArray: string[] = []; +}; diff --git a/apps/admin/src/lib/utils/DragAndDrop/onDragEndApply.tsx b/apps/admin/src/lib/utils/DragAndDrop/onDragEndApply.tsx new file mode 100644 index 00000000..c379f111 --- /dev/null +++ b/apps/admin/src/lib/utils/DragAndDrop/onDragEndApply.tsx @@ -0,0 +1,9 @@ +import { useRecoilTransaction_UNSTABLE } from 'recoil'; + +export const onDragEndApply = (result: any) => { + console.log(result); + if (!result.destination) return; + const { source, destination } = result; + + if (source.droppableId !== destination.droppableId) return; +}; diff --git a/apps/admin/src/lib/utils/DragAndDrop/onDragEndDelete.tsx b/apps/admin/src/lib/utils/DragAndDrop/onDragEndDelete.tsx new file mode 100644 index 00000000..e69de29b diff --git a/apps/admin/src/pages/events/Detail.tsx b/apps/admin/src/pages/events/Detail.tsx index daaa6b99..a4e7bad8 100644 --- a/apps/admin/src/pages/events/Detail.tsx +++ b/apps/admin/src/pages/events/Detail.tsx @@ -71,13 +71,19 @@ const Detail = () => { uploadImageToS3(); } // 호스트 정보 post - patchEventDetailMutation.mutate({ - eventId: eventId, - payload: { ...form, posterImageKey: imageInfo.key }, - }); - openOverlay({ - content: 'saved', - }); + patchEventDetailMutation.mutate( + { + eventId: eventId, + payload: { ...form, posterImageKey: imageInfo.key }, + }, + { + onSuccess: () => { + openOverlay({ + content: 'saved', + }); + }, + }, + ); }; useEffect(() => { diff --git a/apps/admin/src/pages/events/Qr.tsx b/apps/admin/src/pages/events/Qr.tsx index ab555db6..11e7a7fc 100644 --- a/apps/admin/src/pages/events/Qr.tsx +++ b/apps/admin/src/pages/events/Qr.tsx @@ -1,10 +1,13 @@ -import TempQrButtonSet from '@components/events/qr/TempQrButtonSet'; +import { useState } from 'react'; +import NormalQrScreen from '@components/events/qr/NormalQrScreen'; +import FullQrScreen from '@components/events/qr/FullQrScreen'; const Qr = () => { - return ( - <> - - + const [newView, setNewView] = useState(false); + return newView ? ( + + ) : ( + ); }; export default Qr; diff --git a/apps/admin/src/pages/events/options/NewOptions.tsx b/apps/admin/src/pages/events/options/NewOptions.tsx index 2ed770b3..3c5a89cf 100644 --- a/apps/admin/src/pages/events/options/NewOptions.tsx +++ b/apps/admin/src/pages/events/options/NewOptions.tsx @@ -1,4 +1,220 @@ +import { + Spacing, + ListHeader, + FlexBox, + Text, + Input, + SelectButton, +} from '@dudoong/ui'; +import ContentGrid from '@components/shared/layout/ContentGrid'; +import OptionPreview from '@components/events/options/create/OptionPreview'; +import useGlobalOverlay from '@lib/hooks/useGlobalOverlay'; +import { useForm } from 'react-hook-form'; +import useBottomButton from '@lib/hooks/useBottomButton'; +import { useState, useEffect } from 'react'; +import { useNavigate, useLocation } from 'react-router-dom'; +import { useMutation } from '@tanstack/react-query'; +import OptionApi from '@lib/apis/option/OptionApi'; +import { AllOptionResponse } from '@lib/apis/option/optionType'; +import { OptionGroupType } from '@lib/apis/option/optionType'; +import { Controller } from 'react-hook-form'; + const NewOptions = () => { - return
뉴옵션
; + const navigate = useNavigate(); + const [optionType, setOptionType] = useState(); + const { pathname } = useLocation(); + const eventId = pathname.split('/')[2]; + const [optionName, setOptionName] = useState(''); + const [optionDescrip, setOptionDescrip] = useState(''); + const { register, handleSubmit, control, formState } = useForm({ + mode: 'onChange', + }); + const { openOverlay, closeOverlay } = useGlobalOverlay(); + const { setButtonInfo, hideButtons } = useBottomButton({ + type: 'save', + isActive: true, + }); + + //티켓 생성 api + const postOptionCreationMutation = useMutation(OptionApi.POST_OPTION, { + onSuccess: (data: AllOptionResponse) => { + console.log('POST_OPTION: ', data); + openOverlay({ + content: 'saveOption', + props: { + saveOptionHandler: () => { + navigate(`/events/${eventId}/options`); + closeOverlay(); + hideButtons(); + }, + }, + }); + }, + }); + + const onSubmit = (data: any) => { + console.log(data); + postOptionCreationMutation.mutate({ + eventId: eventId, + payload: { + ...data, + }, + }); + }; + + const onError = (error: any) => { + console.log('error', error); + }; + + //제출 버튼 상태 조절 + useEffect(() => { + formState.isValid + ? setButtonInfo({ + firstDisable: false, + firstHandler: handleSubmit(onSubmit, onError), + }) + : setButtonInfo({ + firstDisable: true, + firstHandler: () => {}, + }); + }, [formState.isValid]); + + return ( +
+ + + + 티켓에 옵션을 부여해 설문을 받거나 + + + 부가 상품을 추가할 수 있어요. + + + } + /> + + + + + setOptionName(e.target.value), + })} + /> + + + setOptionDescrip(e.target.value), + })} + /> + + + ( + + { + setOptionType('주관식'); + onChange('주관식'); + }} + /> + { + setOptionType('Y/N'); + onChange('Y/N'); + }} + /> + + )} + /> + +
+ {optionType === 'Y/N' ? ( + <> + + + + ) : ( +
+ )} +
+ + + +
+ ); }; export default NewOptions; diff --git a/apps/admin/src/pages/events/options/Options.tsx b/apps/admin/src/pages/events/options/Options.tsx index 8dcaa220..bc939cd1 100644 --- a/apps/admin/src/pages/events/options/Options.tsx +++ b/apps/admin/src/pages/events/options/Options.tsx @@ -1,4 +1,42 @@ +import { Spacing, ListHeader, FlexBox, Text } from '@dudoong/ui'; +import { useLocation } from 'react-router-dom'; +import ContentGrid from '@components/shared/layout/ContentGrid'; +import { useQuery } from '@tanstack/react-query'; +import OptionApi from '@lib/apis/option/OptionApi'; +import NewOption from '@components/events/options/create/NewOption'; +import ApplyOption from '@components/events/options/apply'; + const Options = () => { - return
옵션
; + const { pathname } = useLocation(); + const eventId = pathname.split('/')[2]; + + return ( + <> + + + + 티켓을 구매하기 전 설문 응답을 위해 옵션을 각 티켓으로 + + + 드래그 앤 드롭 해보세요. 옵션의 답변은 필수입니다. + + + } + /> + + + + + + + + + + ); }; export default Options; diff --git a/apps/admin/src/pages/hosts/Events.tsx b/apps/admin/src/pages/hosts/Events.tsx index e71641f8..1d71c601 100644 --- a/apps/admin/src/pages/hosts/Events.tsx +++ b/apps/admin/src/pages/hosts/Events.tsx @@ -1,4 +1,4 @@ -import HostsEvents from '@components/hosts/HostsEvents'; +import HostsEvents from '@components/hosts/events/HostsEvents'; import { ListHeader, Spacing } from '@dudoong/ui'; const Events = () => { diff --git a/apps/admin/src/pages/hosts/Info.tsx b/apps/admin/src/pages/hosts/Info.tsx index 99e75605..13192bc8 100644 --- a/apps/admin/src/pages/hosts/Info.tsx +++ b/apps/admin/src/pages/hosts/Info.tsx @@ -16,6 +16,7 @@ import usePresignedUrl from '@lib/hooks/usePresignedUrl'; import { queryClient } from '../../main'; import { useForm, FormState, FieldValues } from 'react-hook-form'; import getKeyFromUrl from '@lib/utils/getKeyFromUrl'; +import useGlobalOverlay from '@lib/hooks/useGlobalOverlay'; export type InputFormType = Pick< UpdateHostRequest, @@ -24,6 +25,7 @@ export type InputFormType = Pick< const Info = () => { const hostId = useLocation().pathname.split('/')[2]; + const { openOverlay } = useGlobalOverlay(); const { imageInfo, setImageInfo, uploadImageToS3 } = usePresignedUrl( 'host', hostId, @@ -77,10 +79,19 @@ const Info = () => { uploadImageToS3(); } // 호스트 정보 post - postEventMutation.mutate({ - hostId: hostId, - payload: { ...data, profileImageKey: imageInfo.key }, - }); + postEventMutation.mutate( + { + hostId: hostId, + payload: { ...data, profileImageKey: imageInfo.key }, + }, + { + onSuccess: () => { + openOverlay({ + content: 'saved', + }); + }, + }, + ); console.log('click button', data, imageInfo); }; useEffect(() => { diff --git a/apps/admin/src/pages/hosts/Slack.tsx b/apps/admin/src/pages/hosts/Slack.tsx index 41249c24..6244d64e 100644 --- a/apps/admin/src/pages/hosts/Slack.tsx +++ b/apps/admin/src/pages/hosts/Slack.tsx @@ -14,9 +14,6 @@ const Slack = () => { onSuccess: () => { console.log('success'); }, - onError: () => { - console.log('error'); - }, }); const handleSlack = (e: React.FormEvent) => { diff --git a/apps/admin/vite.config.ts b/apps/admin/vite.config.ts index a3dcac4a..e5648bf4 100644 --- a/apps/admin/vite.config.ts +++ b/apps/admin/vite.config.ts @@ -1,6 +1,7 @@ import { defineConfig } from 'vite'; import react from '@vitejs/plugin-react'; import svgr from 'vite-plugin-svgr'; +import VitePluginHtmlEnv from 'vite-plugin-html-env'; // https://vitejs.dev/config/ export default defineConfig({ @@ -12,6 +13,8 @@ export default defineConfig({ plugins: ['@emotion/babel-plugin'], }, }), + VitePluginHtmlEnv(), + VitePluginHtmlEnv({ compiler: true }), ], resolve: { alias: [ diff --git a/apps/ticket/pages/history/mycoupon.ts b/apps/ticket/pages/history/mycoupon.ts new file mode 100644 index 00000000..2413974d --- /dev/null +++ b/apps/ticket/pages/history/mycoupon.ts @@ -0,0 +1 @@ +export { default } from '@components/mypage/MyCoupon'; diff --git a/apps/ticket/public/favicon.ico b/apps/ticket/public/favicon.ico index 718d6fea..6f645977 100644 Binary files a/apps/ticket/public/favicon.ico and b/apps/ticket/public/favicon.ico differ diff --git a/apps/ticket/src/assets/chevron.svg b/apps/ticket/src/assets/chevron.svg new file mode 100644 index 00000000..de97bfd2 --- /dev/null +++ b/apps/ticket/src/assets/chevron.svg @@ -0,0 +1,3 @@ + + + diff --git a/apps/ticket/src/components/book/Order.tsx b/apps/ticket/src/components/book/Order.tsx index 9e2007bc..118b3eab 100644 --- a/apps/ticket/src/components/book/Order.tsx +++ b/apps/ticket/src/components/book/Order.tsx @@ -27,7 +27,7 @@ import { css } from '@emotion/react'; import SelectPayMethod from './blocks/order/SelectPayMethod'; import useOverlay from '@lib/hooks/useOverlay'; import OverlayBox from '@components/shared/overlay/OverlayBox'; -import AccountInfo from './blocks/order/AccountInfo'; +import AccountInfoSection from './blocks/order/AccountInfoSection'; import { useState } from 'react'; const Order = ({ data }: { data: AddCartResponse }) => { @@ -35,7 +35,8 @@ const Order = ({ data }: { data: AddCartResponse }) => { const [coupon] = useState(null); const isDudoong = data.ticketPayType === '두둥티켓'; - const { instance } = useTossPayments(data.totalPrice, isDudoong); + const isNeedTossPayment = data.ticketPayType === '유료티켓'; + const { instance } = useTossPayments(data.totalPrice, isNeedTossPayment); const { orderMutate } = useOrderMutation(instance); const skipSelectOption = data.items[0].answers.length === 0; const { isOpen, openOverlay, closeOverlay } = useOverlay(); @@ -61,7 +62,7 @@ const Order = ({ data }: { data: AddCartResponse }) => { {/* 헤더 */} {/* 티켓옵션 프리뷰 */} @@ -85,7 +86,7 @@ const Order = ({ data }: { data: AddCartResponse }) => { )} @@ -120,8 +121,8 @@ const Order = ({ data }: { data: AddCartResponse }) => { - diff --git a/apps/ticket/src/components/book/blocks/order/AccountInfo.tsx b/apps/ticket/src/components/book/blocks/order/AccountInfoSection.tsx similarity index 70% rename from apps/ticket/src/components/book/blocks/order/AccountInfo.tsx rename to apps/ticket/src/components/book/blocks/order/AccountInfoSection.tsx index 194d4103..1261f659 100644 --- a/apps/ticket/src/components/book/blocks/order/AccountInfo.tsx +++ b/apps/ticket/src/components/book/blocks/order/AccountInfoSection.tsx @@ -7,22 +7,25 @@ import { RoundBlock, TagButton, } from '@dudoong/ui'; +import useToastify from '@dudoong/ui/src/lib/useToastify'; +import { AccountInfo } from '@lib/apis/cart/cartType'; import useOrderMutation from './useOrderMutation'; -const AccountInfo = ({ - accountNumber, +const AccountInfoSection = ({ + accountInfo, orderPayload, }: { - accountNumber?: string; + accountInfo: AccountInfo; orderPayload: { couponId: null; cartId: number }; }) => { - const [bank, account] = accountNumber?.split(' ') || ['', '']; const { dudoongMutate } = useOrderMutation(); + const { setToast } = useToastify(); const handleDudoongOrder = () => { dudoongMutate(orderPayload); }; const handleCopyAccount = () => { - navigator.clipboard.writeText(account); + navigator.clipboard.writeText(accountInfo?.accountNumber); + setToast({ comment: '계좌번호가 복사되었어요!' }); }; return ( @@ -31,8 +34,8 @@ const AccountInfo = ({ ); }; -export default AccountInfo; +export default AccountInfoSection; diff --git a/apps/ticket/src/components/book/blocks/order/BookHeader.tsx b/apps/ticket/src/components/book/blocks/order/BookHeader.tsx index beccc64b..1ccc7171 100644 --- a/apps/ticket/src/components/book/blocks/order/BookHeader.tsx +++ b/apps/ticket/src/components/book/blocks/order/BookHeader.tsx @@ -17,9 +17,8 @@ const BookHeader = ({ title, description }: BookHeaderProps) => { size={'listHeader_20'} description={ - {description[0]} + {description[0]}{' '} - {' '} {description[1]} 총 {description[2]}매 diff --git a/apps/ticket/src/components/book/blocks/order/Info.tsx b/apps/ticket/src/components/book/blocks/order/Info.tsx index 43ccb7a4..ad15c683 100644 --- a/apps/ticket/src/components/book/blocks/order/Info.tsx +++ b/apps/ticket/src/components/book/blocks/order/Info.tsx @@ -24,6 +24,7 @@ const Info = () => { } title={'유의사항'} + contentHeight={166} /> { } + contentHeight={243} title={'환불규정'} /> diff --git a/apps/ticket/src/components/book/blocks/order/SelectPayMethod.tsx b/apps/ticket/src/components/book/blocks/order/SelectPayMethod.tsx index 330553d6..cba49d39 100644 --- a/apps/ticket/src/components/book/blocks/order/SelectPayMethod.tsx +++ b/apps/ticket/src/components/book/blocks/order/SelectPayMethod.tsx @@ -1,6 +1,8 @@ import TextListRow from '@components/shared/TextListRow'; import { FlexBox, SyncLoader, TagButton } from '@dudoong/ui'; +import useToastify from '@dudoong/ui/src/lib/useToastify'; import { css } from '@emotion/react'; +import { AccountInfo } from '@lib/apis/cart/cartType'; import type { PaymentWidgetInstance } from '@tosspayments/payment-widget-sdk'; const SelectPayMethod = ({ @@ -10,30 +12,32 @@ const SelectPayMethod = ({ }: { instance: PaymentWidgetInstance | null; isDudoong: boolean; - account?: string; + account?: AccountInfo; }) => { - const [bank, number] = account?.split(' ') || ['', '']; + const { setToast } = useToastify(); const handleCopyAccount = () => { - navigator.clipboard.writeText(number || ''); + navigator.clipboard.writeText(account?.accountNumber || ''); + setToast({ comment: '계좌번호가 복사되었어요!' }); }; if (isDudoong) { return ( <> - + } - css={css` - padding-top: 0px; - `} + css={css``} /> ); diff --git a/apps/ticket/src/components/book/blocks/order/useTossPayments.tsx b/apps/ticket/src/components/book/blocks/order/useTossPayments.tsx index fe2a740b..73c7e1c4 100644 --- a/apps/ticket/src/components/book/blocks/order/useTossPayments.tsx +++ b/apps/ticket/src/components/book/blocks/order/useTossPayments.tsx @@ -12,7 +12,7 @@ export interface TossPaymentWidgets { const useTossPayments = ( totalPrice: string, - isDuddong: boolean, + isNeedTossPayment: boolean, ): TossPaymentWidgets => { const [widgetInstance, setWidgetInstance] = useState(null); @@ -25,7 +25,7 @@ const useTossPayments = ( }; useEffect(() => { - if (!isDuddong) { + if (isNeedTossPayment) { if (!widgetInstance) { initWidget(); } else { diff --git a/apps/ticket/src/components/events/blocks/PC/Summary.tsx b/apps/ticket/src/components/events/blocks/PC/Summary.tsx index 67fe4f56..9e4898c5 100644 --- a/apps/ticket/src/components/events/blocks/PC/Summary.tsx +++ b/apps/ticket/src/components/events/blocks/PC/Summary.tsx @@ -1,16 +1,12 @@ import { EventDetailResponse, parseDate } from '@dudoong/utils'; import styled from '@emotion/styled'; -import Image from 'next/image'; const Summary = ({ detail }: { detail: EventDetailResponse }) => { return ( - {detail.name} + + {detail.name} +
@@ -58,6 +54,18 @@ const Wrapper = styled.div` padding-top: 20px; margin-top: 12px; border-top: 2px solid black; + + img { + object-fit: cover; + } +`; + +const Poster = styled.div` + img { + width: 204px; + height: 287px; + object-fit: cover; + } `; const Content = styled.div` diff --git a/apps/ticket/src/components/home/Home.tsx b/apps/ticket/src/components/home/Home.tsx index 4d5a515c..eaf0fe7e 100644 --- a/apps/ticket/src/components/home/Home.tsx +++ b/apps/ticket/src/components/home/Home.tsx @@ -45,10 +45,7 @@ const Home = () => { /> } /> - - {/* */} - {infiniteListElement} - + {infiniteListElement}
diff --git a/apps/ticket/src/components/home/blocks/EventLink.tsx b/apps/ticket/src/components/home/blocks/EventLink.tsx index afe336cf..d4db573b 100644 --- a/apps/ticket/src/components/home/blocks/EventLink.tsx +++ b/apps/ticket/src/components/home/blocks/EventLink.tsx @@ -1,37 +1,56 @@ import { Text } from '@dudoong/ui'; +import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { EventResponse } from '@lib/apis/events/eventType'; -import Image from 'next/image'; import Link from 'next/link'; const EventLink = (props: EventResponse) => { return ( - - - + + + + + {props.startAt} - + {props.name} - + ); }; export default EventLink; -const Wrapper = styled(Link)` - .poster { +const Poster = styled.div` + position: relative; + padding-top: 141.4%; + overflow: hidden; + img { + position: absolute; + top: 0; + left: 0; + right: 0; + bottom: 0; width: 100%; - height: auto; + height: 100%; background: ${({ theme }) => theme.palette.gray_300}; border-radius: 12px; margin-bottom: 10px; + object-fit: cover; } `; diff --git a/apps/ticket/src/components/mypage/Detail/DetailEventInfo.tsx b/apps/ticket/src/components/mypage/Detail/DetailEventInfo.tsx new file mode 100644 index 00000000..e5d2b1df --- /dev/null +++ b/apps/ticket/src/components/mypage/Detail/DetailEventInfo.tsx @@ -0,0 +1,33 @@ +import { FlexBox, ListRow, Padding, Text } from '@dudoong/ui'; +import { parseDate } from '@dudoong/utils'; +import { eventProfile } from '@lib/apis/order/orderType'; +import Image from 'next/image'; + +const DetailEventInfo = ({ event }: { event: eventProfile }) => { + const parsedTime = parseDate(event.startAt); + + return ( + + + 포스터 이미지 + + {`${parsedTime[0]} ${parsedTime[1]}`} +
+ {event.placeName} + + } + /> + + + ); +}; + +export default DetailEventInfo; diff --git a/apps/ticket/src/components/mypage/Detail/InfoItem.tsx b/apps/ticket/src/components/mypage/Detail/InfoItem.tsx new file mode 100644 index 00000000..081574ed --- /dev/null +++ b/apps/ticket/src/components/mypage/Detail/InfoItem.tsx @@ -0,0 +1,40 @@ +import { KeyOfPalette, KeyOfTypo, ListRow, Text, theme } from '@dudoong/ui'; +import { css } from '@emotion/react'; + +interface InfoItem { + item: string; + value?: string; + color?: KeyOfPalette; + typo?: KeyOfTypo; +} + +const InfoItem = ({ + item, + value, + color = 'gray_500', + typo = 'P_Text_16_R', +}: InfoItem) => { + return ( + + {value} + + } + css={ + value + ? css` + padding: 12px 24px 12px 24px; + ` + : css` + border-bottom: 1px solid ${theme.palette.gray_200}; + ` + } + /> + ); +}; + +export default InfoItem; diff --git a/apps/ticket/src/components/mypage/Detail/OrderedTicket.tsx b/apps/ticket/src/components/mypage/Detail/OrderedTicket.tsx new file mode 100644 index 00000000..24dac8c7 --- /dev/null +++ b/apps/ticket/src/components/mypage/Detail/OrderedTicket.tsx @@ -0,0 +1,58 @@ +import { Accordion, ListRow, Tag, theme } from '@dudoong/ui'; +import { parseDate } from '@dudoong/utils'; +import { css } from '@emotion/react'; +import { OptionAnswer } from '@lib/apis/cart/cartType'; +import { OrderLineTicketResponse } from '@lib/apis/order/orderType'; +import InfoItem from './InfoItem'; + +const OrderedTicket = ({ ticket }: { ticket: OrderLineTicketResponse }) => { + return ( +
+ {ticket.answers.length ? ( + + } + contentHeight={600} // 주관식 설문 글자 제한 있으면 계산해서... + content={ticket.answers.map((answer: OptionAnswer, index) => ( + + ))} + /> + ) : ( + + )} + + + + +
+ ); +}; + +export default OrderedTicket; diff --git a/apps/ticket/src/components/mypage/Detail/PaymentInfo.tsx b/apps/ticket/src/components/mypage/Detail/PaymentInfo.tsx new file mode 100644 index 00000000..e7457f5b --- /dev/null +++ b/apps/ticket/src/components/mypage/Detail/PaymentInfo.tsx @@ -0,0 +1,24 @@ +import { ListHeader } from '@dudoong/ui'; +import { OrderPaymentResponse } from '@lib/apis/order/orderType'; +import InfoItem from './InfoItem'; + +const PaymentInfo = ({ payment }: { payment: OrderPaymentResponse }) => { + return ( + <> + + + + + + + + + ); +}; + +export default PaymentInfo; diff --git a/apps/ticket/src/components/mypage/Detail/RefundInfo.tsx b/apps/ticket/src/components/mypage/Detail/RefundInfo.tsx new file mode 100644 index 00000000..9b7efee0 --- /dev/null +++ b/apps/ticket/src/components/mypage/Detail/RefundInfo.tsx @@ -0,0 +1,133 @@ +import OverlayBox from '@components/shared/overlay/OverlayBox'; +import { + Button, + ButtonSet, + FlexBox, + ListHeader, + Padding, + Spacing, + theme, +} from '@dudoong/ui'; +import useToastify from '@dudoong/ui/src/lib/useToastify'; +import { parseDate } from '@dudoong/utils'; + +import styled from '@emotion/styled'; +import { OrderApi } from '@lib/apis/order/OrderApi'; +import { RefundInfo } from '@lib/apis/order/orderType'; +import useOverlay from '@lib/hooks/useOverlay'; +import { useMutation } from '@tanstack/react-query'; +import { useRouter } from 'next/router'; +import InfoItem from './InfoItem'; + +const RefundInfo = ({ refund }: { refund: RefundInfo }) => { + const { isOpen, openOverlay, closeOverlay } = useOverlay(); + const { + query: { orderId }, + push, + } = useRouter(); + const { setToast } = useToastify(); + const ticketRefundMutation = useMutation(OrderApi.POST_REFUND, { + onSuccess: () => { + push('/history'); + setToast({ comment: '티켓이 정상적으로 취소되었습니다.' }); + closeOverlay(); + }, + + onError: (error: any) => { + const comment = error.response.data.reason; + setToast({ comment: comment }); + closeOverlay(); + }, + }); + + return ( + + + + +
    +
  • 취소기한 이전까지 수수료 없이 환불 가능합니다.
    • +
  • 공연 입장확인이 된 티켓이 있을경우 환불이 불가합니다.
    • +
  • 환불 방법 : 티켓 예매 상세내역 {'>'} 예매취소
    • +
  • + 환불 금액 : 당사에서는 주문에 대해 즉시 취소를 하고, 취소 금액에 + 대한 입금은 카드사 영업일 기준 4~5일이 소요될 수 있습니다. +
    • +
+ + + + + + + + + + + typeof orderId === 'string' ? ( + ticketRefundMutation.mutate(orderId) + ) : ( + <> + ) + } + /> + + + ); +}; + +export default RefundInfo; + +const Wrapper = styled.div` + background-color: ${theme.palette.gray_100}; + ul { + margin-top: 8px; + margin-left: 24px; + list-style: disc; + ${({ theme }) => theme.typo.P_Text_14_R} + color :${({ theme }) => theme.palette.gray_400}; + } +`; + +const RefundConfirmation = ({ + onDismiss, + onCancel, +}: { + onDismiss: () => void; + onCancel: () => void; +}) => { + return ( + + + + + + + + ); +}; diff --git a/apps/ticket/src/components/mypage/Detail/TicketsInfo.tsx b/apps/ticket/src/components/mypage/Detail/TicketsInfo.tsx new file mode 100644 index 00000000..63968a9a --- /dev/null +++ b/apps/ticket/src/components/mypage/Detail/TicketsInfo.tsx @@ -0,0 +1,44 @@ +import { ListHeader, Spacing } from '@dudoong/ui'; +import { OrderLineTicketResponse } from '@lib/apis/order/orderType'; +import { Pagination } from 'swiper'; +import { Swiper, SwiperSlide } from 'swiper/react'; +import 'swiper/css'; +import 'swiper/css/pagination'; + +import OrderedTicket from './OrderedTicket'; + +const TicketsInfo = ({ tickets }: { tickets: OrderLineTicketResponse[] }) => { + const pagination = { + clickable: true, + renderBullet: (_index: number, className: string) => { + return ''; + }, + }; + + const swiperParams = { + centeredSlides: true, + + modules: [Pagination], + pagination: pagination, + + initialSlide: 0, + }; + + return ( + <> + + + {tickets.map((ticket: OrderLineTicketResponse, idx: number) => { + return ( + + + + + ); + })} + + + ); +}; + +export default TicketsInfo; diff --git a/apps/ticket/src/components/mypage/History.tsx b/apps/ticket/src/components/mypage/History.tsx index cc95470b..ce436059 100644 --- a/apps/ticket/src/components/mypage/History.tsx +++ b/apps/ticket/src/components/mypage/History.tsx @@ -1,11 +1,20 @@ +import Main from '@components/shared/Layout/Main'; import DDHead from '@components/shared/Layout/NextHead'; +import { NavBar } from '@dudoong/ui'; +import { useRouter } from 'next/router'; +import { useRef } from 'react'; +import OrderList from './OrderList'; const History = () => { + const ref = useRef(null); + const router = useRouter(); + return ( - <> +
-
예매내역
- + router.back()} /> + +
); }; export default History; diff --git a/apps/ticket/src/components/mypage/MyCoupon.tsx b/apps/ticket/src/components/mypage/MyCoupon.tsx new file mode 100644 index 00000000..30044d5c --- /dev/null +++ b/apps/ticket/src/components/mypage/MyCoupon.tsx @@ -0,0 +1,23 @@ +import Main from '@components/shared/Layout/Main'; +import DDHead from '@components/shared/Layout/NextHead'; +import { MenuBar, NavBar } from '@dudoong/ui'; +import { useRouter } from 'next/router'; +import { useState } from 'react'; + +const MyCoupon = () => { + const [menu, setMenu] = useState(0); + const router = useRouter(); + return ( +
+ + router.back()} /> + +
+ ); +}; + +export default MyCoupon; diff --git a/apps/ticket/src/components/mypage/NoData.tsx b/apps/ticket/src/components/mypage/NoData.tsx new file mode 100644 index 00000000..8b8bb569 --- /dev/null +++ b/apps/ticket/src/components/mypage/NoData.tsx @@ -0,0 +1,19 @@ +import DoongDoong from '@assets/doongdoong.svg'; +import { FlexBox, Spacing, Text } from '@dudoong/ui'; +import { useScreenHeight } from '@dudoong/utils'; + +const NoData = ({ text }: { text: string }) => { + useScreenHeight(); + + return ( + + + + + {text} + + + ); +}; + +export default NoData; diff --git a/apps/ticket/src/components/mypage/OrderDetail.tsx b/apps/ticket/src/components/mypage/OrderDetail.tsx index 8e95e0c8..b25ca5f7 100644 --- a/apps/ticket/src/components/mypage/OrderDetail.tsx +++ b/apps/ticket/src/components/mypage/OrderDetail.tsx @@ -1,11 +1,43 @@ +import Main from '@components/shared/Layout/Main'; import DDHead from '@components/shared/Layout/NextHead'; +import { Divider, NavBar } from '@dudoong/ui'; +import { OrderApi } from '@lib/apis/order/OrderApi'; +import { useQuery } from '@tanstack/react-query'; +import { useRouter } from 'next/router'; +import DetailEventInfo from './Detail/DetailEventInfo'; +import Tickets from './Detail/TicketsInfo'; +import PaymentInfo from './Detail/PaymentInfo'; +import CancelTicket from './Detail/RefundInfo'; +import TicketsInfo from './Detail/TicketsInfo'; +import RefundInfo from './Detail/RefundInfo'; const OrderDetail = () => { + const { + query: { orderId }, + back, + } = useRouter(); + + const { data } = useQuery(['orderDetail', orderId], () => + OrderApi.GET_ORDERS_DETAIL(orderId as string), + ); + return ( - <> +
-
예매 상세내역
- + back()} /> + {data ? ( + <> + + + + + + + + ) : ( + <> + )} +
); }; diff --git a/apps/ticket/src/components/mypage/OrderItem.tsx b/apps/ticket/src/components/mypage/OrderItem.tsx new file mode 100644 index 00000000..4f2476f7 --- /dev/null +++ b/apps/ticket/src/components/mypage/OrderItem.tsx @@ -0,0 +1,100 @@ +import { + FlexBox, + ListHeader, + ListRow, + Spacing, + Tag, + TagColorKey, + Text, + theme, +} from '@dudoong/ui'; +import styled from '@emotion/styled'; +import { OrderListResponse, StageType } from '@lib/apis/order/orderType'; + +import Image from 'next/image'; +import { useRouter } from 'next/router'; + +type TagColorType = { + [key in StageType]: TagColorKey; +}; + +const TAG_COLOR: TagColorType = { + 승인대기: 'red', + 입장완료: 'main', + 관람예정: 'main', + 입장중: 'main', + 취소됨: 'mono', +}; + +const OrderItem = (prop: OrderListResponse) => { + const router = useRouter(); + return ( + router.push(`/ticket/${prop.orderUuid}`)}> + + + + + + {prop.eventProfile.name} + + + + + + ); +}; + +export default OrderItem; + +const Wrapper = styled.div` + background-color: ${theme.palette.white}; + border-radius: 12px; + border: 1px solid ${theme.palette.black}; + + width: 100%; + max-width: 440px; + height: 166px; + + overflow: hidden; + + display: flex; + justify-content: space-between; + + cursor: pointer; + + .poster { + width: 120px; + height: 100%; + + object-fit: cover; + } +`; + +const ContentWrapper = styled.div` + padding: 15px 15px 10px 15px; + width: 100%; + + display: flex; + flex-direction: column; + align-items: flex-start; + justify-content: space-between; + gap: 5px; + + .title { + word-break: break-all; + word-wrap: break-word; + white-space: -moz-pre-wrap; + white-space: pre-wrap; + } +`; diff --git a/apps/ticket/src/components/mypage/OrderList.tsx b/apps/ticket/src/components/mypage/OrderList.tsx new file mode 100644 index 00000000..1ceedf34 --- /dev/null +++ b/apps/ticket/src/components/mypage/OrderList.tsx @@ -0,0 +1,62 @@ +import { MenuBar, Spacing } from '@dudoong/ui'; +import { useInfiniteQueries } from '@dudoong/utils'; +import styled from '@emotion/styled'; +import { OrderApi } from '@lib/apis/order/OrderApi'; +import { OrderListResponse } from '@lib/apis/order/orderType'; +import { ForwardedRef, forwardRef, HTMLAttributes, useState } from 'react'; +import NoData from './NoData'; +import OrderItem from './OrderItem'; + +const OrderList = ( + props: HTMLAttributes, + ref: ForwardedRef, +) => { + const [menu, setMenu] = useState(0); + const { infiniteListElement, isEmpty } = + useInfiniteQueries( + ['orderDetail', menu], + ({ pageParam = 0 }) => + OrderApi.GET_ORDERS( + { + pageParam, + }, + menu === 0, + ), + OrderItem, + ); + + return ( + <> + + + {isEmpty && ( + <> + + + + )} + {infiniteListElement} + + ); +}; + +const Wrapper = styled.div` + display: flex; + flex-direction: column; + align-items: center; + gap: 20px; + + padding: 20px 24px 20px 24px; + + box-sizing: border-box; +`; + +export default forwardRef(OrderList); diff --git a/apps/ticket/src/components/mypage/Ticket/QrSheetContainer.tsx b/apps/ticket/src/components/mypage/Ticket/QrSheetContainer.tsx index ce93d8d7..57e78946 100644 --- a/apps/ticket/src/components/mypage/Ticket/QrSheetContainer.tsx +++ b/apps/ticket/src/components/mypage/Ticket/QrSheetContainer.tsx @@ -1,4 +1,5 @@ import { Text } from '@dudoong/ui'; +import useToastify from '@dudoong/ui/src/lib/useToastify'; import styled from '@emotion/styled'; import { IssuedTicketInfo, @@ -7,6 +8,7 @@ import { import { TicketApi } from '@lib/apis/ticket/TicketApi'; import { useQuery } from '@tanstack/react-query'; import dynamic from 'next/dynamic'; +import { useEffect } from 'react'; const GRADIENT_COLOR: Record = { '입장 전': ['#6B36DC', '#92F5CE'], @@ -22,6 +24,14 @@ const QrSheetContainer = ({ ticket }: { ticket: IssuedTicketInfo }) => { { refetchInterval: 1000 }, ); + const { setToast } = useToastify(); + + useEffect(() => { + if (ticket.issuedTicketStatus === '입장 완료') { + setToast({ comment: '입장이 완료되었어요!' }); + } + }, [data?.issuedTicketInfo.issuedTicketStatus, ticket.issuedTicketStatus]); + return ( diff --git a/apps/ticket/src/components/mypage/Ticket/TicketItem.tsx b/apps/ticket/src/components/mypage/Ticket/TicketItem.tsx index 5542274d..e585f848 100644 --- a/apps/ticket/src/components/mypage/Ticket/TicketItem.tsx +++ b/apps/ticket/src/components/mypage/Ticket/TicketItem.tsx @@ -7,9 +7,15 @@ import Link from 'next/link'; import { BottomSheet } from 'react-spring-bottom-sheet'; import QrSheetContainer from './QrSheetContainer'; -const TicketItem = ({ ticket }: { ticket: IssuedTicketInfo }) => { +const TicketItem = ({ + ticket, + orderUuid, +}: { + ticket: IssuedTicketInfo; + orderUuid: string; +}) => { const { isOpen, openOverlay, closeOverlay } = useOverlay(); - + console.log(ticket); return ( @@ -18,7 +24,7 @@ const TicketItem = ({ ticket }: { ticket: IssuedTicketInfo }) => { - + diff --git a/apps/ticket/src/components/mypage/Ticket/TicketList.tsx b/apps/ticket/src/components/mypage/Ticket/TicketList.tsx index a401cb1f..3296ffb8 100644 --- a/apps/ticket/src/components/mypage/Ticket/TicketList.tsx +++ b/apps/ticket/src/components/mypage/Ticket/TicketList.tsx @@ -5,7 +5,13 @@ import 'swiper/css'; import 'swiper/css/pagination'; import TicketItem from './TicketItem'; -const TicketList = ({ tickets }: { tickets: IssuedTicketInfo[] }) => { +const TicketList = ({ + tickets, + orderUuid, +}: { + tickets: IssuedTicketInfo[]; + orderUuid: string; +}) => { console.log(tickets); const pagination = { clickable: true, @@ -32,7 +38,7 @@ const TicketList = ({ tickets }: { tickets: IssuedTicketInfo[] }) => { {tickets.map((ticket: IssuedTicketInfo, idx: number) => { return ( - + ); })} diff --git a/apps/ticket/src/components/mypage/Ticket/index.tsx b/apps/ticket/src/components/mypage/Ticket/index.tsx index e36aa89e..0ac7dfbd 100644 --- a/apps/ticket/src/components/mypage/Ticket/index.tsx +++ b/apps/ticket/src/components/mypage/Ticket/index.tsx @@ -1,5 +1,6 @@ import Main from '@components/shared/Layout/Main'; import DDHead from '@components/shared/Layout/NextHead'; +import Shortcuts from '@components/shared/Shortcuts'; import { Divider, ListHeader, NavBar, Spacing, SyncLoader } from '@dudoong/ui'; import { parseDate } from '@dudoong/utils'; import styled from '@emotion/styled'; @@ -7,6 +8,7 @@ import { OrderApi } from '@lib/apis/order/OrderApi'; import { useQuery } from '@tanstack/react-query'; import Image from 'next/image'; import { useRouter } from 'next/router'; + import TicketList from './TicketList'; const Ticket = () => { @@ -41,9 +43,21 @@ const Ticket = () => { parseDate(data.eventProfile.startAt)[1] }\n${data.eventProfile.placeName}`} /> - + + + + + + ) : ( diff --git a/apps/ticket/src/components/mypage/index.tsx b/apps/ticket/src/components/mypage/index.tsx index bef6436f..63f0d70e 100644 --- a/apps/ticket/src/components/mypage/index.tsx +++ b/apps/ticket/src/components/mypage/index.tsx @@ -1,17 +1,72 @@ -import { Divider, ListHeader, Padding, Profile } from '@dudoong/ui'; +import { + Divider, + FlexBox, + ListHeader, + NavBar, + Padding, + Profile, + Spacing, +} from '@dudoong/ui'; import DDHead from '@components/shared/Layout/NextHead'; +import { authState } from '@store/auth'; +import { useRecoilValue, useResetRecoilState } from 'recoil'; +import OrderItem from './OrderItem'; +import { OrderApi } from '@lib/apis/order/OrderApi'; +import Shortcuts from '@components/shared/Shortcuts'; +import Main from '@components/shared/Layout/Main'; +import { useQuery } from '@tanstack/react-query'; +import { useRouter } from 'next/router'; +import { resetCrendentials } from '@lib/utils/setCredentials'; +import { removeCookies } from 'cookies-next'; const Mypage = () => { + const { userProfile } = useRecoilValue(authState); + const resetAuthState = useResetRecoilState(authState); + const router = useRouter(); + + const { data } = useQuery(['recentOrderDetail'], () => + OrderApi.GET_RECENT_ORDER(), + ); + return ( - <> +
+ router.back()} /> - + + + + {data ? : <>} + + - + + + + + + + { + resetAuthState(); + resetCrendentials(); + removeCookies('refreshToken'); + router.push('/home'); + }} + /> + + + +
); }; diff --git a/apps/ticket/src/components/shared/Layout/HeaderLayout.tsx b/apps/ticket/src/components/shared/Layout/HeaderLayout.tsx index f5c4f4c3..f778b8eb 100644 --- a/apps/ticket/src/components/shared/Layout/HeaderLayout.tsx +++ b/apps/ticket/src/components/shared/Layout/HeaderLayout.tsx @@ -10,6 +10,7 @@ import { useResetRecoilState } from 'recoil'; import { authState } from '@store/auth'; import { removeCookies } from 'cookies-next'; import { resetCrendentials } from '@lib/utils/setCredentials'; +import useToastify from '@dudoong/ui/src/lib/useToastify'; export interface HeaderLayoutProps { children: ReactNode; name?: string; @@ -24,6 +25,7 @@ export const HeaderLayout = ({ handleLogin, }: HeaderLayoutProps) => { const { push } = useRouter(); + const { Toast } = useToastify(); const resetAuthState = useResetRecoilState(authState); const profileOption: PopupOptions[] = [ { @@ -73,6 +75,7 @@ export const HeaderLayout = ({
{children}
 + ); }; diff --git a/apps/ticket/src/components/shared/Shortcuts.tsx b/apps/ticket/src/components/shared/Shortcuts.tsx new file mode 100644 index 00000000..eeff04e8 --- /dev/null +++ b/apps/ticket/src/components/shared/Shortcuts.tsx @@ -0,0 +1,41 @@ +import { KeyOfPalette, ListRow } from '@dudoong/ui'; +import Chevron from '@assets/chevron.svg'; +import { useRouter } from 'next/router'; +import styled from '@emotion/styled'; + +interface ShortcutsProps { + text: string; + textColor?: KeyOfPalette; + url?: string; + onClick?: () => void; +} + +const Shortcuts = ({ + text, + textColor = 'gray_500', + url, + onClick, +}: ShortcutsProps) => { + const router = useRouter(); + return ( + } + onClick={url ? () => router.push(`${url}`) : onClick} + /> + ); +}; + +export default Shortcuts; + +const StyledListRow = styled(ListRow)` + cursor: pointer; + + transform: scale(1); + transition: all 0.1s ease-out; + + :active { + transform: scale(0.99); + } +`; diff --git a/apps/ticket/src/lib/apis/cart/cartType.ts b/apps/ticket/src/lib/apis/cart/cartType.ts index 7832b2ca..2f5272a3 100644 --- a/apps/ticket/src/lib/apis/cart/cartType.ts +++ b/apps/ticket/src/lib/apis/cart/cartType.ts @@ -1,3 +1,4 @@ +import { eventProfile } from '../order/orderType'; import { ApproveType, PayType } from '../ticket/ticketType'; export interface AddCartRequest { @@ -25,9 +26,15 @@ export interface AddCartResponse { isNeedPayment: boolean; approveType: ApproveType; ticketPayType: PayType; - accountNumber?: string; + accountInfo: AccountInfo; + eventProfile: eventProfile; } +export interface AccountInfo { + bankName: string; + accountNumber: string; + accountHolder: string; +} export interface CartItemResponse { name: string; answers: OptionAnswer[]; diff --git a/apps/ticket/src/lib/apis/order/OrderApi.ts b/apps/ticket/src/lib/apis/order/OrderApi.ts index 1313109f..7dd8ab20 100644 --- a/apps/ticket/src/lib/apis/order/OrderApi.ts +++ b/apps/ticket/src/lib/apis/order/OrderApi.ts @@ -1,8 +1,10 @@ +import { InfiniteRequest, InfiniteResponse } from '@dudoong/utils'; import { axiosPrivate } from '../axios'; import type { ConfirmOrderRequest, CreateOrderRequest, CreateOrderResponse, + OrderListResponse, OrderResponse, OrderTicketResponse, } from './orderType'; @@ -24,11 +26,31 @@ export const OrderApi = { ); return response.data.data; }, - + GET_ORDERS: async ( + { pageParam, size = 10, sort = 'asc' }: InfiniteRequest, + isShowing: boolean, + ): Promise> => { + const response = await axiosPrivate.get( + `/orders/?showing=${isShowing}&page=${pageParam}&size=${size}&sort=${sort}`, + ); + return response.data.data; + }, + GET_RECENT_ORDER: async (): Promise => { + const response = await axiosPrivate.get(`/orders/recent`); + return response.data.data; + }, + GET_ORDERS_DETAIL: async (order_uuid: string): Promise => { + const response = await axiosPrivate.get(`orders/${order_uuid}/`); + return response.data.data; + }, GET_ORDERS_TICKETS: async ( order_uuid: string, ): Promise => { const response = await axiosPrivate.get(`orders/${order_uuid}/tickets`); return response.data.data; }, + POST_REFUND: async (order_uuid: string): Promise => { + const response = await axiosPrivate.post(`orders/${order_uuid}/refund`); + return response.data.data; + }, }; diff --git a/apps/ticket/src/lib/apis/order/orderType.ts b/apps/ticket/src/lib/apis/order/orderType.ts index b526c348..9542fda2 100644 --- a/apps/ticket/src/lib/apis/order/orderType.ts +++ b/apps/ticket/src/lib/apis/order/orderType.ts @@ -31,13 +31,12 @@ export interface ConfirmOrderRequest { */ export interface OrderResponse { paymentInfo: OrderPaymentResponse; - tickets: OrderLineTicketResponse; + tickets: OrderLineTicketResponse[]; refundInfo: RefundInfo; eventProfile: EventProfile; orderUuid: string; orderId: number; orderMethod: OrderMethod; - approveType: ApproveType; } /** @@ -65,16 +64,16 @@ export interface OrderLineTicketResponse { userName: string; orderLinePrice: string; purchaseQuantity: number; - answers: OptionAnswer; + answers: OptionAnswer[]; eachOptionPrice: string; } /** * 예매취소 정보 */ -interface RefundInfo { +export interface RefundInfo { endAt: string; - available: boolean; + availAble: boolean; } /** @@ -104,6 +103,27 @@ export type OrderStatus = | ' 취소된 결제' | ' 결제 실패'; +export type StageType = + | '승인대기' + | '입장완료' + | '관람예정' + | '입장중' + | '취소됨'; + +/** + * 예매 목록 + * OrderBiefElement + */ +export interface OrderListResponse { + refundInfo: RefundInfo; + eventProfile: EventProfile; + orderUuid: string; + orderNo: string; + stage: StageType; + orderStatus: OrderStatus; + itemName: string; + totalQuantity: number; +} /** * 결제 아이디로 티켓 조회 */ @@ -111,6 +131,8 @@ export type OrderStatus = export interface OrderTicketResponse { tickets: IssuedTicketInfo[]; eventProfile: EventProfile; + orderUuid: string; + orderNo: string; } export interface IssuedTicketInfo { @@ -144,3 +166,5 @@ export interface eventProfile { } export type IssuedTicketStatus = '입장 완료' | '입장 전' | '취소 티켓'; + +export type OrderMethodType = '승인 방식' | '결제 방식'; diff --git a/package.json b/package.json index 3b1b07db..e854f352 100644 --- a/package.json +++ b/package.json @@ -27,6 +27,7 @@ "@types/eslint": "^8", "@types/node": "^18.11.16", "@types/react": "^18.0.26", + "@types/react-beautiful-dnd": "^13", "@typescript-eslint/eslint-plugin": "latest", "@typescript-eslint/parser": "latest", "eslint": "^8.30.0", @@ -50,9 +51,11 @@ "@emotion/styled": "^11.10.5", "@tanstack/react-query": "^4.24.9", "@tanstack/react-query-devtools": "^4.24.9", + "react-beautiful-dnd": "^13.1.1", "react-drag-drop-files": "^2.3.8", "react-hook-form": "^7.43.1", "react-kakao-maps-sdk": "^1.1.6", - "use-debounce": "^9.0.3" + "use-debounce": "^9.0.3", + "vite-plugin-html-env": "^1.2.7" } } diff --git a/shared/ui/src/components/Tag/index.tsx b/shared/ui/src/components/Tag/index.tsx index a97e662e..116c928a 100644 --- a/shared/ui/src/components/Tag/index.tsx +++ b/shared/ui/src/components/Tag/index.tsx @@ -2,7 +2,8 @@ import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { KeyOfPalette, KeyOfTypo } from '../../theme'; -type TagColorKey = 'main' | 'mono' | 'red'; +export type TagColorKey = 'main' | 'mono' | 'red'; + type TagColorType = { [key in TagColorKey]: { background: KeyOfPalette; diff --git a/shared/ui/src/components/Toast/index.tsx b/shared/ui/src/components/Toast/index.tsx index 4c456a2e..0a8f1bf0 100644 --- a/shared/ui/src/components/Toast/index.tsx +++ b/shared/ui/src/components/Toast/index.tsx @@ -6,10 +6,10 @@ const Toast = () => { return ( ); diff --git a/shared/ui/src/theme/global.ts b/shared/ui/src/theme/global.ts index 9a9a96fa..148f8e6a 100644 --- a/shared/ui/src/theme/global.ts +++ b/shared/ui/src/theme/global.ts @@ -96,7 +96,7 @@ export const globalStyle = css` } } - ::-webkit-scrollbar-thumb { + /* ::-webkit-scrollbar-thumb { border: solid transparent; background-clip: padding-box; border-radius: 7px; @@ -107,7 +107,7 @@ export const globalStyle = css` } ::-webkit-scrollbar { width: 14px; - } + } */ :root { --main-width: 600px; diff --git a/yarn.lock b/yarn.lock index ca2f04b9..876c12ab 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1714,6 +1714,15 @@ __metadata: languageName: node linkType: hard +"@babel/runtime@npm:^7.15.4, @babel/runtime@npm:^7.9.2": + version: 7.21.0 + resolution: "@babel/runtime@npm:7.21.0" + dependencies: + regenerator-runtime: ^0.13.11 + checksum: 7b33e25bfa9e0e1b9e8828bb61b2d32bdd46b41b07ba7cb43319ad08efc6fda8eb89445193e67d6541814627df0ca59122c0ea795e412b99c5183a0540d338ab + languageName: node + linkType: hard + "@babel/runtime@npm:~7.5.4": version: 7.5.5 resolution: "@babel/runtime@npm:7.5.5" @@ -5410,7 +5419,7 @@ __metadata: languageName: node linkType: hard -"@types/hoist-non-react-statics@npm:^3.0.1": +"@types/hoist-non-react-statics@npm:^3.0.1, @types/hoist-non-react-statics@npm:^3.3.0": version: 3.3.1 resolution: "@types/hoist-non-react-statics@npm:3.3.1" dependencies: @@ -5620,6 +5629,15 @@ __metadata: languageName: node linkType: hard +"@types/react-beautiful-dnd@npm:^13": + version: 13.1.3 + resolution: "@types/react-beautiful-dnd@npm:13.1.3" + dependencies: + "@types/react": "*" + checksum: e09860672c15666ee3d3acfad3dfc2ebd8fceb29b5468e12b7543af74d0e19f2eb9c4be187adb33c5d6816f47b0db958a8c0160b15826b92f6df1e8e3e34657a + languageName: node + linkType: hard + "@types/react-datepicker@npm:^4.8.0": version: 4.8.0 resolution: "@types/react-datepicker@npm:4.8.0" @@ -5650,6 +5668,27 @@ __metadata: languageName: node linkType: hard +"@types/react-qr-reader@npm:^2.1.4": + version: 2.1.4 + resolution: "@types/react-qr-reader@npm:2.1.4" + dependencies: + "@types/react": "*" + checksum: aa2bb2f703bb826c5d2e8f15d45e42db48091b41b026d00709e6002214e348811b4ec80f121192fca292e8bfdcb047bfa0b3bd59e355e5ab1bc7e011232f2c3e + languageName: node + linkType: hard + +"@types/react-redux@npm:^7.1.20": + version: 7.1.25 + resolution: "@types/react-redux@npm:7.1.25" + dependencies: + "@types/hoist-non-react-statics": ^3.3.0 + "@types/react": "*" + hoist-non-react-statics: ^3.3.0 + redux: ^4.0.0 + checksum: a61ec25cbf8bb3720850402d3c49493fcff4afb73ad447d161460b5d4c600c984ad48708e8564d2fd32052eaa3c3b3f655c5b300ce813429637cce9e5958329f + languageName: node + linkType: hard + "@types/react@npm:*, @types/react@npm:18.0.26, @types/react@npm:^18.0.26": version: 18.0.26 resolution: "@types/react@npm:18.0.26" @@ -6297,12 +6336,14 @@ __metadata: "@toast-ui/react-editor": ^3.2.2 "@types/react": ^18.0.26 "@types/react-dom": ^18.0.9 + "@types/react-qr-reader": ^2.1.4 "@vitejs/plugin-react": ^3.0.0 antd: ^5.2.2 react: ^18.2.0 react-cookie: ^4.1.1 react-dom: ^18.2.0 react-error-boundary: ^3.1.4 + react-qr-reader: ^2.2.1 react-router-dom: ^6.6.1 recoil: ^0.7.6 typescript: ^4.9.3 @@ -8446,6 +8487,15 @@ __metadata: languageName: node linkType: hard +"css-box-model@npm:^1.2.0": + version: 1.2.1 + resolution: "css-box-model@npm:1.2.1" + dependencies: + tiny-invariant: ^1.0.6 + checksum: 4d113f26fed6b9150e2c314502d00dabe06f12ae43a01a7e9b6e57f3de49b4281dbb0dc46a1158a7349618f8f34d9250af57cb43d7337e9485e73e6b821e470e + languageName: node + linkType: hard + "css-color-keywords@npm:^1.0.0": version: 1.0.0 resolution: "css-color-keywords@npm:1.0.0" @@ -9314,6 +9364,7 @@ __metadata: "@types/eslint": ^8 "@types/node": ^18.11.16 "@types/react": ^18.0.26 + "@types/react-beautiful-dnd": ^13 "@typescript-eslint/eslint-plugin": latest "@typescript-eslint/parser": latest eslint: ^8.30.0 @@ -9324,11 +9375,13 @@ __metadata: lint-staged: ^13.1.0 next-intercept-stdout: ^1.0.1 prettier: ^2.8.1 + react-beautiful-dnd: ^13.1.1 react-drag-drop-files: ^2.3.8 react-hook-form: ^7.43.1 react-kakao-maps-sdk: ^1.1.6 typescript: ^4.9.4 use-debounce: ^9.0.3 + vite-plugin-html-env: ^1.2.7 languageName: unknown linkType: soft @@ -11407,7 +11460,7 @@ __metadata: languageName: node linkType: hard -"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1": +"hoist-non-react-statics@npm:^3.0.0, hoist-non-react-statics@npm:^3.3.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2": version: 3.3.2 resolution: "hoist-non-react-statics@npm:3.3.2" dependencies: @@ -13466,6 +13519,13 @@ __metadata: languageName: node linkType: hard +"jsqr@npm:^1.2.0": + version: 1.4.0 + resolution: "jsqr@npm:1.4.0" + checksum: 7c572971f90c42772e30d152bde63b84edf1164bde80c53942e6b2068ea31caf00ad704aa46cacc9e71645f52dbeddebc6e84ba15e883c678ee93cde690de339 + languageName: node + linkType: hard + "jsx-ast-utils@npm:^2.4.1 || ^3.0.0, jsx-ast-utils@npm:^3.3.2": version: 3.3.3 resolution: "jsx-ast-utils@npm:3.3.3" @@ -14115,6 +14175,13 @@ __metadata: languageName: node linkType: hard +"memoize-one@npm:^5.1.1": + version: 5.2.1 + resolution: "memoize-one@npm:5.2.1" + checksum: a3cba7b824ebcf24cdfcd234aa7f86f3ad6394b8d9be4c96ff756dafb8b51c7f71320785fbc2304f1af48a0467cbbd2a409efc9333025700ed523f254cb52e3d + languageName: node + linkType: hard + "memoizerific@npm:^1.11.0, memoizerific@npm:^1.11.3": version: 1.11.3 resolution: "memoizerific@npm:1.11.3" @@ -16941,6 +17008,13 @@ __metadata: languageName: node linkType: hard +"raf-schd@npm:^4.0.2": + version: 4.0.3 + resolution: "raf-schd@npm:4.0.3" + checksum: 45514041c5ad31fa96aef3bb3c572a843b92da2f2cd1cb4a47c9ad58e48761d3a4126e18daa32b2bfa0bc2551a42d8f324a0e40e536cb656969929602b4e8b58 + languageName: node + linkType: hard + "raf@npm:^3.4.1": version: 3.4.1 resolution: "raf@npm:3.4.1" @@ -17568,6 +17642,24 @@ __metadata: languageName: node linkType: hard +"react-beautiful-dnd@npm:^13.1.1": + version: 13.1.1 + resolution: "react-beautiful-dnd@npm:13.1.1" + dependencies: + "@babel/runtime": ^7.9.2 + css-box-model: ^1.2.0 + memoize-one: ^5.1.1 + raf-schd: ^4.0.2 + react-redux: ^7.2.0 + redux: ^4.0.4 + use-memo-one: ^1.1.1 + peerDependencies: + react: ^16.8.5 || ^17.0.0 || ^18.0.0 + react-dom: ^16.8.5 || ^17.0.0 || ^18.0.0 + checksum: 5f90f7c0ab77a14dfcd496cbd94bbde457612f380c6fc815f3bba7b52effd75132948fcaa661a902a184bb1e6ae5896dcf5b0c77c4ddf809a2c65288f3eed5a7 + languageName: node + linkType: hard + "react-bootstrap-icons@npm:^1.10.2": version: 1.10.2 resolution: "react-bootstrap-icons@npm:1.10.2" @@ -17765,7 +17857,7 @@ __metadata: languageName: node linkType: hard -"react-is@npm:17.0.2, react-is@npm:^17.0.1": +"react-is@npm:17.0.2, react-is@npm:^17.0.1, react-is@npm:^17.0.2": version: 17.0.2 resolution: "react-is@npm:17.0.2" checksum: 9d6d111d8990dc98bc5402c1266a808b0459b5d54830bbea24c12d908b536df7883f268a7868cfaedde3dd9d4e0d574db456f84d2e6df9c4526f99bb4b5344d8 @@ -17829,6 +17921,41 @@ __metadata: languageName: node linkType: hard +"react-qr-reader@npm:^2.2.1": + version: 2.2.1 + resolution: "react-qr-reader@npm:2.2.1" + dependencies: + jsqr: ^1.2.0 + prop-types: ^15.7.2 + webrtc-adapter: ^7.2.1 + peerDependencies: + react: ~16 + react-dom: ~16 + checksum: a6e997fdd9106dc06efd5df979c49174cf5da97ced9dd1212ebe084fc6c346d2b8a636c6e710668bde32ced28a54e0a4a99e843101062fc3ca99cb90287473cb + languageName: node + linkType: hard + +"react-redux@npm:^7.2.0": + version: 7.2.9 + resolution: "react-redux@npm:7.2.9" + dependencies: + "@babel/runtime": ^7.15.4 + "@types/react-redux": ^7.1.20 + hoist-non-react-statics: ^3.3.2 + loose-envify: ^1.4.0 + prop-types: ^15.7.2 + react-is: ^17.0.2 + peerDependencies: + react: ^16.8.3 || ^17 || ^18 + peerDependenciesMeta: + react-dom: + optional: true + react-native: + optional: true + checksum: 369a2bdcf87915659af9e5c55abfd9f52a84e43e0d12dcc108ed17dbe6933558b7b7fc12caa9c10c1a10a8be7df89454b6c96989d8573fedec1a772c94a1f145 + languageName: node + linkType: hard + "react-refresh@npm:^0.11.0": version: 0.11.0 resolution: "react-refresh@npm:0.11.0" @@ -18151,6 +18278,15 @@ __metadata: languageName: node linkType: hard +"redux@npm:^4.0.0, redux@npm:^4.0.4": + version: 4.2.1 + resolution: "redux@npm:4.2.1" + dependencies: + "@babel/runtime": ^7.9.2 + checksum: f63b9060c3a1d930ae775252bb6e579b42415aee7a23c4114e21a0b4ba7ec12f0ec76936c00f546893f06e139819f0e2855e0d55ebfce34ca9c026241a6950dd + languageName: node + linkType: hard + "regenerate-unicode-properties@npm:^10.1.0": version: 10.1.0 resolution: "regenerate-unicode-properties@npm:10.1.0" @@ -18657,6 +18793,15 @@ __metadata: languageName: node linkType: hard +"rtcpeerconnection-shim@npm:^1.2.15": + version: 1.2.15 + resolution: "rtcpeerconnection-shim@npm:1.2.15" + dependencies: + sdp: ^2.6.0 + checksum: 42a733d8e3846b7e7e3c33b6d5cddec95659ceb39d3f990f0a4437e6d719ed717237fea02352d4a18d86c825a1493eaeb481cc835267d2288b0ce43582b97f46 + languageName: node + linkType: hard + "run-parallel@npm:^1.1.9": version: 1.2.0 resolution: "run-parallel@npm:1.2.0" @@ -18853,6 +18998,13 @@ __metadata: languageName: node linkType: hard +"sdp@npm:^2.12.0, sdp@npm:^2.6.0": + version: 2.12.0 + resolution: "sdp@npm:2.12.0" + checksum: 5deb20ac50a1aeb4dd5ff2e506c22d1674222c21f08ae97105c9552ae979e90ddc42b8526f2c3dcacfeebc45c7b2e6b6b4254ae2cf335263bf3ddf2ad9b8ec76 + languageName: node + linkType: hard + "select-hose@npm:^2.0.0": version: 2.0.0 resolution: "select-hose@npm:2.0.0" @@ -20285,6 +20437,13 @@ __metadata: languageName: unknown linkType: soft +"tiny-invariant@npm:^1.0.6": + version: 1.3.1 + resolution: "tiny-invariant@npm:1.3.1" + checksum: 872dbd1ff20a21303a2fd20ce3a15602cfa7fcf9b228bd694a52e2938224313b5385a1078cb667ed7375d1612194feaca81c4ecbe93121ca1baebe344de4f84c + languageName: node + linkType: hard + "tmpl@npm:1.0.5": version: 1.0.5 resolution: "tmpl@npm:1.0.5" @@ -20943,6 +21102,15 @@ __metadata: languageName: node linkType: hard +"use-memo-one@npm:^1.1.1": + version: 1.1.3 + resolution: "use-memo-one@npm:1.1.3" + peerDependencies: + react: ^16.8.0 || ^17.0.0 || ^18.0.0 + checksum: 8f08eba26d69406b61bb4b8dacdd5a92bd6aef5b53d346dfe87954f7330ee10ecabc937cc7854635155d46053828e85c10b5a5aff7a04720e6a97b9f42999bac + languageName: node + linkType: hard + "use-subscription@npm:^1.3.0": version: 1.8.0 resolution: "use-subscription@npm:1.8.0" @@ -21106,6 +21274,15 @@ __metadata: languageName: node linkType: hard +"vite-plugin-html-env@npm:^1.2.7": + version: 1.2.7 + resolution: "vite-plugin-html-env@npm:1.2.7" + peerDependencies: + vite: "*" + checksum: 5e40ca5285c9164448aa7f2b4f8dda12365b833649211f086495bad98bda08d69d09855c00991226186a7844e9ed579384e13ca6edd4e9c666556d6941c44e2f + languageName: node + linkType: hard + "vite-plugin-svgr@npm:^2.4.0": version: 2.4.0 resolution: "vite-plugin-svgr@npm:2.4.0" @@ -21465,6 +21642,16 @@ __metadata: languageName: node linkType: hard +"webrtc-adapter@npm:^7.2.1": + version: 7.7.1 + resolution: "webrtc-adapter@npm:7.7.1" + dependencies: + rtcpeerconnection-shim: ^1.2.15 + sdp: ^2.12.0 + checksum: 16534a721794bf375753b031e538f5c1ce84df3a272085069bbce7fa1b085e5a2d33b92096256a6fdacdf6f9e30f8543e2478a293ccf5a3849bc7143b10b38d3 + languageName: node + linkType: hard + "websocket-driver@npm:>=0.5.1, websocket-driver@npm:^0.7.4": version: 0.7.4 resolution: "websocket-driver@npm:0.7.4"