diff --git a/src/api/customer/inquires.ts b/src/api/customer/inquires.ts index 1b6d08b..18f06af 100644 --- a/src/api/customer/inquires.ts +++ b/src/api/customer/inquires.ts @@ -29,6 +29,7 @@ export type GetInquiryDetailRequest = { }; export type GetInquiryDetailResponce = InquiryData & { + waiting_amount: number; customer_name: string; tags: string[]; }; diff --git a/src/assets/images/LoadingBasic.gif b/src/assets/images/LoadingBasic.gif new file mode 100644 index 0000000..2580f8b Binary files /dev/null and b/src/assets/images/LoadingBasic.gif differ diff --git a/src/components/Admin/Call/ListOfCallInquiry.tsx b/src/components/Admin/Call/ListOfCallInquiry.tsx index b2522c9..074e34c 100644 --- a/src/components/Admin/Call/ListOfCallInquiry.tsx +++ b/src/components/Admin/Call/ListOfCallInquiry.tsx @@ -34,7 +34,7 @@ function ListOfCallInquiry({ >
- {currentPage - 1 + index + 1} + {(currentPage - 1) * 5 + index + 1} {content.length <= 15 diff --git a/src/components/Admin/Inquiry/InquiryList.tsx b/src/components/Admin/Inquiry/InquiryList.tsx index 8f4a693..83e2456 100644 --- a/src/components/Admin/Inquiry/InquiryList.tsx +++ b/src/components/Admin/Inquiry/InquiryList.tsx @@ -1,4 +1,5 @@ import { Skeleton } from '@/components/ui/skeleton'; +import { cn } from '@/lib/utils'; import { Category } from '@/types/enum'; import { AdminInquiryData } from '@/types/inquiry'; import { formatElapsedTime } from '@/utils/timeUtil'; @@ -37,7 +38,7 @@ function InquiryList({ const [expandedItem, setExpandedItem] = useState(null); const navigate = useNavigate(); - if (!inquiries) + if (!inquiries || !totalItems) return ( <> @@ -45,7 +46,6 @@ function InquiryList({ ); const MIN_ID = Math.min(...inquiries.map(({ inquiry_num }) => inquiry_num)); - console.log(MIN_ID); const formattedInquiries = inquiries?.map( ({ inquiry_id, @@ -89,120 +89,142 @@ function InquiryList({ />
- - {formattedInquiries - .sort((a, b) => a.inquiry_num - b.inquiry_num) - .map( - ({ - id, - inquiry_num, - status, - category, - tags, - customer_name, - time, - content, - }) => ( - -
-
- - {inquiry_num} - 번 - - - {content.length <= 15 - ? content - : `${content.substring(0, 15)}...`} - - - {category} - + {totalItems > 0 ? ( + + {formattedInquiries + .sort((a, b) => a.inquiry_num - b.inquiry_num) + .map( + ({ + id, + inquiry_num, + status, + category, + tags, + customer_name, + time, + content, + }) => ( + +
+
+ {status === 'PENDING' && MIN_ID === inquiry_num && ( + + 가장 최신 답변입니다. 먼저 답변해주세요. + + )} +
+ + {inquiry_num} + 번 + + + {content.length <= 15 + ? content + : `${content.substring(0, 15)}...`} + + + {category} + +
+
+ {status === 'REGISTRATIONCOMPLETE' ? ( + navigate(`/admin/online/inquiry/${id}`)} + > + 상세보기 + Go + + ) : ( + + setExpandedItem(expandedItem === id ? null : id) + } + > + {expandedItem === id ? '접기' : '펼쳐보기'} + + )}
- {status === 'REGISTRATIONCOMPLETE' ? ( - navigate(`/admin/online/inquiry/${id}`)} - > - 상세보기 - Go - - ) : ( - - setExpandedItem(expandedItem === id ? null : id) - } - > - {expandedItem === id ? '접기' : '펼쳐보기'} - - )} -
- -
- {/* 상단 영역 */} -
-

- {Array.isArray(tags) && - tags.map((tag, idx) => ( - +

+ {/* 상단 영역 */} +
+

+ {Array.isArray(tags) && + tags.map((tag, idx) => ( + + {'#' + tag} + + ))} +

+ + {status === 'PENDING' && + (MIN_ID === inquiry_num ? ( + + ) : ( + ))} -

+
- {status === 'PENDING' && - (MIN_ID === inquiry_num ? ( - - ) : ( - - ))} -
- - {/* 본문 내용 */} -

- {content} -

+ {/* 본문 내용 */} +

+ {content} +

- {/* 하단 정보 (오른쪽 정렬) */} -
- {customer_name} · {time} · {category} + {/* 하단 정보 (오른쪽 정렬) */} +
+ {customer_name} · {time} · {category} +
-
- - - ) - )} - + + + ) + )} + + ) : ( +
+ + 등록된 1:1 문의가 없습니다. + +
+ )}
); } diff --git a/src/components/Admin/main/CallContainer.tsx b/src/components/Admin/main/CallContainer.tsx index b5746e1..b7ca711 100644 --- a/src/components/Admin/main/CallContainer.tsx +++ b/src/components/Admin/main/CallContainer.tsx @@ -25,7 +25,7 @@ function CallContainer() { const { data: waits, refetch } = useGetCallWaitListQuery({ date: dateValue && dayjs(dateValue).format('YYYY-MM-DD'), - time: timeValue && timeValue?.split('~')[0], + time: timeValue !== '전체 시간대' ? timeValue?.split('~')[0] : undefined, }); const { mutate: patchStart } = usePatchCallProgress(); diff --git a/src/components/Admin/main/WaitingBox.tsx b/src/components/Admin/main/WaitingBox.tsx index a7c6e8d..0ed1ba3 100644 --- a/src/components/Admin/main/WaitingBox.tsx +++ b/src/components/Admin/main/WaitingBox.tsx @@ -36,7 +36,7 @@ function WaitingBox({
{content} - {dayjs(resTime).format('MM월 DD일 HH시 MM분')} + {dayjs(resTime).format('MM월 DD일 HH시 mm분')}
diff --git a/src/components/BottomSheet/BottomSheet.tsx b/src/components/BottomSheet/BottomSheet.tsx index a5a9827..ba88231 100644 --- a/src/components/BottomSheet/BottomSheet.tsx +++ b/src/components/BottomSheet/BottomSheet.tsx @@ -37,7 +37,7 @@ import { useQueryClient } from '@tanstack/react-query'; import dayjs from 'dayjs'; import { useAtom, useAtomValue } from 'jotai'; import { List, MapPin } from 'lucide-react'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import BranchCard from '../Map/BranchCard'; import RecBranch from '../Map/RecBranch'; import { Badge } from '../ui/badge'; @@ -49,7 +49,7 @@ import { SelectValue, } from '../ui/select'; import { Separator } from '../ui/separator'; -import { Skeleton } from '../ui/skeleton'; +import LoadingBasic from '../Loading'; export function BottomSheet() { const { @@ -67,7 +67,7 @@ export function BottomSheet() { const sectionType = useAtomValue(sectionTypeAtom); const queryClient = useQueryClient(); - const [isSpinning, setIsSpinning] = useState(false); + const [isSpinning, setIsSpinning] = useState(true); const { data: branchList, @@ -82,16 +82,22 @@ export function BottomSheet() { const [now, setNow] = useState(Date.now()); + // 새로고침 버튼 클릭 시 + const handleRefresh = () => { + setIsSpinning(true); + refetch(); + queryClient.invalidateQueries({ + queryKey: [QUERY_KEYS.BRANCH_RECOMMEND], + }); + setNow(Date.now()); + + setTimeout(() => setIsSpinning(false), 500); + }; + // eslint-disable-next-line react-hooks/exhaustive-deps + useEffect(() => handleRefresh, []); + if (isLoading || !branchList) { - return ( -
- -
- - -
-
- ); + return ; } const selectedBranchList: BranchData[] = @@ -108,9 +114,9 @@ export function BottomSheet() { const isOpen = (business_hours: string) => { const date = new Date(Date.now()); - if (date.getDay() === 0 || date.getDay() === 6) { - return false; - } + // if (date.getDay() === 0 || date.getDay() === 6) { + // return false; + // } // 주말로직 const [startTime, endTime] = business_hours.split('~'); const startHour = startTime.split(':')[0]; @@ -118,18 +124,6 @@ export function BottomSheet() { return date.getHours() >= +startHour && date.getHours() < +endHour; }; - // 새로고침 버튼 클릭 시 - const handleRefresh = () => { - setIsSpinning(true); - refetch(); - queryClient.invalidateQueries({ - queryKey: [QUERY_KEYS.BRANCH_RECOMMEND], - }); - setNow(Date.now()); - - setTimeout(() => setIsSpinning(false), 500); - }; - const handleDetailPage = (branchId: number) => { toggleOpen(); const targetBranch = selectedBranchList.find( diff --git a/src/components/Direction/BottomFloatingBox/BranchInfo.tsx b/src/components/Direction/BottomFloatingBox/BranchInfo.tsx index 6dffedc..7087ee4 100644 --- a/src/components/Direction/BottomFloatingBox/BranchInfo.tsx +++ b/src/components/Direction/BottomFloatingBox/BranchInfo.tsx @@ -1,18 +1,18 @@ import { ReactComponent as Hyperlink } from '@/assets/icons/hyperlink.svg'; +import LoadingBasic from '@/components/Loading'; +import { WaitingInfo } from '@/components/Map/BranchCard'; +import { Badge } from '@/components/ui/badge'; import { DirectionButton } from '@/components/ui/direction'; import { Separator } from '@/components/ui/separator'; import { Toaster } from '@/components/ui/toaster'; +import { useMap } from '@/hooks/map-context'; +import useGetBranchDetail from '@/hooks/query/customer/useGetBranchDetail'; import { useToast } from '@/hooks/use-toast'; import { showToast } from '@/pages'; +import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { FloatingType } from '.'; -import { useMap } from '@/hooks/map-context'; -import { useState } from 'react'; import { ChangeToggle } from './ChangeToggle'; -import useGetBranchDetail from '@/hooks/query/customer/useGetBranchDetail'; -import { WaitingInfo } from '@/components/Map/BranchCard'; -import { Badge } from '@/components/ui/badge'; -import { Skeleton } from '@/components/ui/skeleton'; export default function BranchInfo({ type, @@ -33,15 +33,7 @@ export default function BranchInfo({ }); if (isLoading || !targetBranch) { - return ( -
- -
- - -
-
- ); + return ; } const { @@ -94,13 +86,13 @@ export default function BranchInfo({ <>
-
-
+
+
-
+
{topName} diff --git a/src/components/Direction/BottomFloatingBox/ReservationButton.tsx b/src/components/Direction/BottomFloatingBox/ReservationButton.tsx index 19d53bf..c295b50 100644 --- a/src/components/Direction/BottomFloatingBox/ReservationButton.tsx +++ b/src/components/Direction/BottomFloatingBox/ReservationButton.tsx @@ -4,7 +4,7 @@ import Modalbutton from '../Modal'; import useGetBranchDetail from '@/hooks/query/customer/useGetBranchDetail'; import { useMap } from '@/hooks/map-context'; import useDeleteVisit from '@/hooks/query/customer/useDeleteVisit'; -import { Skeleton } from '@/components/ui/skeleton'; +import LoadingBasic from '@/components/Loading'; export default function ReservationButton({ branchId }: { branchId: number }) { const { getCurrentLatitude, getCurrentLongitude } = useMap(); @@ -20,15 +20,7 @@ export default function ReservationButton({ branchId }: { branchId: number }) { const navigate = useNavigate(); if (isLoading || !branch) { - return ( -
-
- - - -
-
- ); + return ; } const { reserved, visit_id } = branch; diff --git a/src/components/Direction/TopSheet/DepartureArrivalAddress.tsx b/src/components/Direction/TopSheet/DepartureArrivalAddress.tsx index 5e4e603..cd757c6 100644 --- a/src/components/Direction/TopSheet/DepartureArrivalAddress.tsx +++ b/src/components/Direction/TopSheet/DepartureArrivalAddress.tsx @@ -1,5 +1,5 @@ +import LoadingBasic from '@/components/Loading'; import { Separator } from '@/components/ui/separator'; -import { Skeleton } from '@/components/ui/skeleton'; import { useMap } from '@/hooks/map-context'; import useGetBranchDetail from '@/hooks/query/customer/useGetBranchDetail'; @@ -17,15 +17,7 @@ export default function DepartureArrivalAddress({ }); if (isLoading || !branch) { - return ( -
- -
- - -
-
- ); + return ; } return ( diff --git a/src/components/Header/ReservationDetailHeader.tsx b/src/components/Header/ReservationDetailHeader.tsx index 65800f0..99f68ab 100644 --- a/src/components/Header/ReservationDetailHeader.tsx +++ b/src/components/Header/ReservationDetailHeader.tsx @@ -1,15 +1,54 @@ +import { ReactComponent as Refresh } from '@/assets/icons/refresh.svg'; +import { cn } from '@/lib/utils'; +import { useQueryClient } from '@tanstack/react-query'; +import dayjs from 'dayjs'; +import { useEffect, useState } from 'react'; import { CloseButton } from '../ui/close'; -import { ReactComponent as Refresh } from '@/assets/icons/reservation/refresh2.svg'; function ReservationDetailHeader({ reservationType, }: { reservationType: 'visit' | 'call' | 'inquiry'; }) { + const [now, setNow] = useState(Date.now()); + const [isSpinning, setIsSpinning] = useState(true); + const queryClient = useQueryClient(); + + const handleRefresh = () => { + setIsSpinning(true); + queryClient.invalidateQueries({ + queryKey: [`${reservationType}-detail`], + }); + setNow(Date.now()); + + setTimeout(() => setIsSpinning(false), 500); + }; + + // eslint-disable-next-line react-hooks/exhaustive-deps + useEffect(() => handleRefresh, []); + return ( -
- - +
+
+
+
+ +
+ + {dayjs(now).format('HH:mm')} + +
+ + +
); } diff --git a/src/components/Loading/index.tsx b/src/components/Loading/index.tsx new file mode 100644 index 0000000..b0070fd --- /dev/null +++ b/src/components/Loading/index.tsx @@ -0,0 +1,17 @@ +import loadingBasic from '@/assets/images/LoadingBasic.gif'; + +export default function LoadingBasic() { + return ( +
+ Loading + +
+ 잠시만 기다려주세요. +
+
+ ); +} diff --git a/src/components/Map/RecBranch.tsx b/src/components/Map/RecBranch.tsx index 295cdcb..814a4d6 100644 --- a/src/components/Map/RecBranch.tsx +++ b/src/components/Map/RecBranch.tsx @@ -5,6 +5,8 @@ import { ReactComponent as PedestrainIcon } from '@/assets/icons/pedestrain.svg' import { ReactComponent as PedestrainWhiteIcon } from '@/assets/icons/pedestrainWhite.svg'; import { useMap } from '@/hooks/map-context'; import useGetBranchRecommendList from '@/hooks/query/customer/useGetBranchRecommendList'; +import { sectionTypeAtom } from '@/stores'; +import { useAtom } from 'jotai'; import { useState } from 'react'; import { Badge } from '../ui/badge'; import { @@ -16,8 +18,6 @@ import { } from '../ui/select'; import { Skeleton } from '../ui/skeleton'; import RecBranchBox from './RecBranchBox'; -import { useAtom } from 'jotai'; -import { sectionTypeAtom } from '@/stores'; function RecBranch() { const [transportType, setTransportType] = useState('WALK'); @@ -112,7 +112,7 @@ function RecBranch() { Array.from({ length: 3 }).map((_, index) => (
  • diff --git a/src/components/Map/RecBranchBox.tsx b/src/components/Map/RecBranchBox.tsx index e20b731..6e95f86 100644 --- a/src/components/Map/RecBranchBox.tsx +++ b/src/components/Map/RecBranchBox.tsx @@ -23,12 +23,12 @@ function RecBranchBox({ {location} -
    +
    거리 {distance}m
    -
    - 예상 대시 시간 +
    + 예상 대기 시간 {waitingTime}분
    diff --git a/src/hooks/query/admin/useGetCallWaitList.ts b/src/hooks/query/admin/useGetCallWaitList.ts index 1ab7a73..3f00a2d 100644 --- a/src/hooks/query/admin/useGetCallWaitList.ts +++ b/src/hooks/query/admin/useGetCallWaitList.ts @@ -12,6 +12,7 @@ const useGetCallWaitList = ({ return useQuery({ queryKey: [ADMIN_QUERY_KEYS.CALL_WAIT_LIST, { date, time }], queryFn: () => getCallWaitList({ date, time }), + enabled: !!date, }); }; diff --git a/src/hooks/useRouter.tsx b/src/hooks/useRouter.tsx index 5181f58..cd91be1 100644 --- a/src/hooks/useRouter.tsx +++ b/src/hooks/useRouter.tsx @@ -1,10 +1,13 @@ -import { createBrowserRouter } from 'react-router-dom'; import { MainLayout, MapLayout, RegisterLayout, SignUpLayout, } from '@/components/Layout'; +import AdminAuthRequiredLayout from '@/components/Layout/AdminAuthRequiredLayout'; +import AuthRequiredLayout from '@/components/Layout/AuthRequiredLayout'; +import MypageLayout from '@/components/Layout/MypageLayout'; +import ReservationLayout from '@/components/Layout/ReservationLayout'; import { AdminMainPage, AdminMyPage, @@ -27,21 +30,18 @@ import { ReservationVisitPage, SignUpPage, } from '@/pages'; -import AdminAuthRequiredLayout from '@/components/Layout/AdminAuthRequiredLayout'; -import AuthRequiredLayout from '@/components/Layout/AuthRequiredLayout'; -import MypageLayout from '@/components/Layout/MypageLayout'; -import ReservationLayout from '@/components/Layout/ReservationLayout'; -import SignInPage from '@/pages/Signin'; import AdminSignInPage from '@/pages/Admin/Login'; -import NotFound from '@/pages/NotFound'; +import VisitPage from '@/pages/Admin/offline'; import CallPage from '@/pages/Admin/online/Call'; import { CallAnswerDetail } from '@/pages/Admin/online/Call/Detail'; -import { AnswerInput } from '@/pages/Admin/online/Inquiry/Answer/Input'; import { AnswerDetail } from '@/pages/Admin/online/Inquiry/Answer/Detail'; -import AdminCustomerDetailPage from '@/pages/Admin/online/customer/detail'; +import { AnswerInput } from '@/pages/Admin/online/Inquiry/Answer/Input'; import AdminCustomerPage from '@/pages/Admin/online/customer'; -import VisitPage from '@/pages/Admin/offline'; +import AdminCustomerDetailPage from '@/pages/Admin/online/customer/detail'; import Mypage from '@/pages/Mypage'; +import NotFound from '@/pages/NotFound'; +import SignInPage from '@/pages/Signin'; +import { createBrowserRouter } from 'react-router-dom'; export const useRouter = () => createBrowserRouter([ { diff --git a/src/pages/Admin/Login/index.tsx b/src/pages/Admin/Login/index.tsx index 447c34b..7fb0491 100644 --- a/src/pages/Admin/Login/index.tsx +++ b/src/pages/Admin/Login/index.tsx @@ -50,8 +50,8 @@ export default function AdminSignInPage() { const isDisabled = !id || !password; return ( -
    -
    +
    +
    - -
    - - -
    -
    - ); + return ; } // 검색 diff --git a/src/pages/Admin/online/Inquiry/Answer/Detail/index.tsx b/src/pages/Admin/online/Inquiry/Answer/Detail/index.tsx index 37b45d6..c17411d 100644 --- a/src/pages/Admin/online/Inquiry/Answer/Detail/index.tsx +++ b/src/pages/Admin/online/Inquiry/Answer/Detail/index.tsx @@ -1,7 +1,7 @@ import arrowLeft from '@/assets/icons/arrow_left.svg'; import CustomerInfo from '@/components/Admin/Inquiry/DetailCustomerInfo'; +import LoadingBasic from '@/components/Loading'; import { Badge } from '@/components/ui/badge'; -import { Skeleton } from '@/components/ui/skeleton'; import useGetInquiryDetail from '@/hooks/query/admin/useGetInquiryDetail'; import { format } from 'date-fns'; import dayjs from 'dayjs'; @@ -13,15 +13,7 @@ export function AnswerDetail() { const { data: inquiryData, isLoading } = useGetInquiryDetail(+(id ?? 1)); if (isLoading || !inquiryData) { - return ( -
    - -
    - - -
    -
    - ); + return ; } const { diff --git a/src/pages/Admin/online/Inquiry/Answer/Input/index.tsx b/src/pages/Admin/online/Inquiry/Answer/Input/index.tsx index 0ccf6d9..1fb6b76 100644 --- a/src/pages/Admin/online/Inquiry/Answer/Input/index.tsx +++ b/src/pages/Admin/online/Inquiry/Answer/Input/index.tsx @@ -1,7 +1,7 @@ import DetailCustomerInfo from '@/components/Admin/Inquiry/DetailCustomerInfo'; +import LoadingBasic from '@/components/Loading'; import { Badge } from '@/components/ui/badge'; import { Button } from '@/components/ui/button'; -import { Skeleton } from '@/components/ui/skeleton'; import { Textarea } from '@/components/ui/textarea'; import { ADMIN_ROUTE } from '@/constants/route'; import useGetInquiryDetail from '@/hooks/query/admin/useGetInquiryDetail'; @@ -21,15 +21,7 @@ export function AnswerInput() { const { mutate: postReply } = usePostInquiryReply(); if (isLoading || !inquiryData) { - return ( -
    - -
    - - -
    -
    - ); + return ; } const { diff --git a/src/pages/Admin/online/Inquiry/index.tsx b/src/pages/Admin/online/Inquiry/index.tsx index ad33ad3..f1db788 100644 --- a/src/pages/Admin/online/Inquiry/index.tsx +++ b/src/pages/Admin/online/Inquiry/index.tsx @@ -1,7 +1,7 @@ import InquiryList from '@/components/Admin/Inquiry/InquiryList'; import ReplyState from '@/components/Admin/Inquiry/ReplyState'; import ListPagination from '@/components/Admin/ListPagination'; -import { Skeleton } from '@/components/ui/skeleton'; +import LoadingBasic from '@/components/Loading'; import useGetInquiryList from '@/hooks/query/admin/useGetInquiryList'; import { Category, InquiryStatus } from '@/types/enum'; import { ActiveTab } from '@/types/inquiry'; @@ -23,15 +23,7 @@ export function InquiryPage() { }); if (isLoading || !inquiries) { - return ( -
    - -
    - - -
    -
    - ); + return ; } const onPrev = () => { @@ -49,7 +41,7 @@ export function InquiryPage() { return (
    -
    +
    - {inquiries?.data.length > 0 ? ( - - ) : ( -
    - - 등록된 1:1 문의가 없습니다. - -
    - )} +
    {inquiries?.data.length > 0 && ( diff --git a/src/pages/BranchDetail/index.tsx b/src/pages/BranchDetail/index.tsx index 21fba35..3c90194 100644 --- a/src/pages/BranchDetail/index.tsx +++ b/src/pages/BranchDetail/index.tsx @@ -18,7 +18,7 @@ import { Badge } from '@/components/ui/badge'; import { Coord } from '@/stores'; import getMyLocation from '@/hooks/useMyLocation'; import ReservationButton from '@/components/Direction/BottomFloatingBox/ReservationButton'; -import { Skeleton } from '@/components/ui/skeleton'; +import LoadingBasic from '@/components/Loading'; export function BranchDetailPage() { const navigate = useNavigate(); @@ -38,15 +38,7 @@ export function BranchDetailPage() { }); if (isLoading || !branch) { - return ( -
    - -
    - - -
    -
    - ); + return ; } const { diff --git a/src/pages/Main/MyCard.tsx b/src/pages/Main/MyCard.tsx index 490cdf3..926ad36 100644 --- a/src/pages/Main/MyCard.tsx +++ b/src/pages/Main/MyCard.tsx @@ -1,6 +1,6 @@ -import { Button } from '@/components/ui/button'; import { ReactComponent as CallReservationIcon } from '@/assets/icons/call_reservation.svg'; import { ReactComponent as InquiryReservationIcon } from '@/assets/icons/inquiry_reservation.svg'; +import { Button } from '@/components/ui/button'; type Props = { title: string; contents: string[]; @@ -21,9 +21,11 @@ export default function MyCard({ title, contents, onClick }: Props) {
    {contents.length > 1 ? ( -
    +
    {contents.map((content, idx) => ( - {content} + + {content} + ))}
    ) : ( diff --git a/src/pages/Main/index.tsx b/src/pages/Main/index.tsx index 0ac63b8..9298ff3 100644 --- a/src/pages/Main/index.tsx +++ b/src/pages/Main/index.tsx @@ -1,17 +1,18 @@ -import { ReactComponent as HanaAvengers } from '@/assets/images/hanaAvengers.svg'; import { ReactComponent as StarGgonge } from '@/assets/icons/StarGgonge.svg'; +import { ReactComponent as HanaAvengers } from '@/assets/images/hanaAvengers.svg'; import Map from '@/assets/images/map.png'; -import { useNavigate } from 'react-router-dom'; -import MyCard from './MyCard'; +import LoadingBasic from '@/components/Loading'; import { Toaster } from '@/components/ui/toaster'; import useGetCustomerDetail from '@/hooks/query/customer/useGetCustomerDetail'; +import { useNavigate } from 'react-router-dom'; +import MyCard from './MyCard'; export function MainPage() { const navigate = useNavigate(); const { data: customer, isLoading } = useGetCustomerDetail(); if (isLoading || !customer) { - return <>Loading...; + return ; } return ( @@ -50,12 +51,18 @@ export function MainPage() {
    navigate('/register/call')} /> navigate('/register/inquiry')} />
    diff --git a/src/pages/Mypage/index.tsx b/src/pages/Mypage/index.tsx index fe9e3e8..98da66b 100644 --- a/src/pages/Mypage/index.tsx +++ b/src/pages/Mypage/index.tsx @@ -1,5 +1,4 @@ import { Separator } from '@/components/ui/separator'; -import { Skeleton } from '@/components/ui/skeleton'; import { MYPAGECONSTANTS } from '@/constants/mypage'; import useGetCustomerDetail from '@/hooks/query/customer/useGetCustomerDetail'; import React from 'react'; @@ -8,6 +7,7 @@ import { showToast } from '../Register/Call'; import { toast } from '@/hooks/use-toast'; import { AccessTokenNames } from '@/api/Api'; import { CUSTOMER_ROUTE } from '@/constants/route'; +import LoadingBasic from '@/components/Loading'; function Mypage() { const navigate = useNavigate(); @@ -15,14 +15,7 @@ function Mypage() { const { data: customerDetail, isLoading } = useGetCustomerDetail(); if (isLoading || !customerDetail) { - return ( -
    -
    - - -
    -
    - ); + return ; } const { diff --git a/src/pages/ReservationDetail/Call/index.tsx b/src/pages/ReservationDetail/Call/index.tsx index 77988b5..ec1151e 100644 --- a/src/pages/ReservationDetail/Call/index.tsx +++ b/src/pages/ReservationDetail/Call/index.tsx @@ -1,5 +1,6 @@ import Modalbutton from '@/components/Direction/Modal'; import ReservationDetailHeader from '@/components/Header/ReservationDetailHeader'; +import LoadingBasic from '@/components/Loading'; import Nav from '@/components/Nav/Nav'; import { Separator } from '@/components/ui/separator'; import useDeleteCall from '@/hooks/query/customer/useDeleteCall'; @@ -7,7 +8,6 @@ import useGetCallDetail from '@/hooks/query/customer/useGetCallDetail'; import '@/index.css'; import { useParams } from 'react-router-dom'; import ReservationDetailInquiryTags from '../ReservationDetailInquiryTags'; -import { Skeleton } from '@/components/ui/skeleton'; export function ReservationDetailCallPage() { const { callId } = useParams<{ callId: string }>(); @@ -18,15 +18,7 @@ export function ReservationDetailCallPage() { const { mutate: deleteCall } = useDeleteCall(); if (isLoading || !call) { - return ( -
    - -
    - - -
    -
    - ); + return ; } const { @@ -59,9 +51,9 @@ export function ReservationDetailCallPage() { return ( <> -
    - -
    + +
    +
    @@ -93,7 +85,7 @@ export function ReservationDetailCallPage() {
    -
    +
    @@ -109,7 +101,7 @@ export function ReservationDetailCallPage() {
    -
    +
    {status === '대기중' && ( - -
    - - -
    -
    - ); + return ; } - const { inquiry_num, customer_name, content, tags, category, status } = - inquiry; + const { + inquiry_num, + // customer_name, + content, + tags, + category, + status, + waiting_amount, + } = inquiry; return ( <> -
    - -
    -
    -
    -
    -
    - {inquiry_num} - 번 -
    -
    -
    -
    -
    이름
    -
    - {customer_name} -
    -
    - -
    -
    - 상담 종류 -
    -
    - {category} -
    -
    -
    -
    + +
    +
    +
    +
    + 현재 대기 중인 인원은{' '} + + {waiting_amount} + + 명 입니다. +
    +
    + {inquiry_num} + 번 +
    +
    +
    - - - {/*
    - {date} {time} -
    */} -
    - {content} -
    + {category} +
    + + +
    + {content}
    +
    -
    - {status === '답변 대기중' && ( - - deleteInquiry({ inquiry_id: +(inquiryId ?? -1) }) - } - /> - )} - - -
    + /> + )} + +
    diff --git a/src/pages/ReservationDetail/InquiryDetail/index.tsx b/src/pages/ReservationDetail/InquiryDetail/index.tsx index 2c30335..7a9b690 100644 --- a/src/pages/ReservationDetail/InquiryDetail/index.tsx +++ b/src/pages/ReservationDetail/InquiryDetail/index.tsx @@ -1,11 +1,11 @@ -import { useParams } from 'react-router-dom'; +import waitingAnswer from '@/assets/images/waitingAnswer.svg'; import Header from '@/components/Header/Header'; +import LoadingBasic from '@/components/Loading'; import Nav from '@/components/Nav/Nav'; -import waitingAnswer from '@/assets/images/waitingAnswer.svg'; -import ReservationDetailInquiryTags from '../ReservationDetailInquiryTags'; import { Separator } from '@/components/ui/separator'; import useGetInquiryReply from '@/hooks/query/customer/useGetInquiryReply'; -import { Skeleton } from '@/components/ui/skeleton'; +import { useParams } from 'react-router-dom'; +import ReservationDetailInquiryTags from '../ReservationDetailInquiryTags'; export function InquiryDetailPage() { const { id: inquiryId } = useParams<{ id: string }>(); @@ -14,15 +14,7 @@ export function InquiryDetailPage() { }); if (isLoading || !response) { - return ( -
    - -
    - - -
    -
    - ); + return ; } const { content, status, reply } = response; @@ -32,19 +24,22 @@ export function InquiryDetailPage() { <>
    -
    -
    +
    +
    + 문의 내용 -
    {content}
    +
    {content}
    {status === '답변완료' ? ( -
    - -
    {reply}
    +
    + +
    + {reply} +
    ) : ( -
    +
    Waiting for answer
    상담사가 고객님의 문의를 처리 중입니다. diff --git a/src/pages/ReservationDetail/Visit/index.tsx b/src/pages/ReservationDetail/Visit/index.tsx index 98ec29d..bad093b 100644 --- a/src/pages/ReservationDetail/Visit/index.tsx +++ b/src/pages/ReservationDetail/Visit/index.tsx @@ -2,9 +2,10 @@ import { ReactComponent as Check } from '@/assets/icons/reservation/check.svg'; import AnimationCheck from '@/assets/images/animationCheck.gif'; import Modalbutton from '@/components/Direction/Modal'; import ReservationDetailHeader from '@/components/Header/ReservationDetailHeader'; +import LoadingBasic from '@/components/Loading'; import Nav from '@/components/Nav/Nav'; import { DirectionButton } from '@/components/ui/direction'; -import { Skeleton } from '@/components/ui/skeleton'; +import { Toaster } from '@/components/ui/toaster'; import useDeleteVisit from '@/hooks/query/customer/useDeleteVisit'; import useGetVisitDetail from '@/hooks/query/customer/useGetVisitDetail'; import { useToast } from '@/hooks/use-toast'; @@ -12,7 +13,7 @@ import getMyLocation from '@/hooks/useMyLocation'; import '@/index.css'; import { showToast } from '@/pages/Register/Call'; import { Coord } from '@/stores'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; export function ReservationDetailVisitPage() { const { toast } = useToast(); @@ -33,16 +34,14 @@ export function ReservationDetailVisitPage() { const { mutate: deleteVisit } = useDeleteVisit(); + useEffect(() => { + if (visit?.waiting_amount === 1) { + showToast(toast, '곧 고객님의 상담이 시작됩니다. 대기해주세요'); + } + }, []); + if (isLoading || !visit) { - return ( -
    - -
    - - -
    -
    - ); + return ; } const { @@ -73,9 +72,9 @@ export function ReservationDetailVisitPage() { }, 1000); return ( <> -
    - -
    + +
    +
    {load ? ( @@ -92,17 +91,33 @@ export function ReservationDetailVisitPage() { 번호표 발급 완료
    - 1시간 이내 미방문 시
    - 예약이 취소될 수 있습니다. + 순번이 지나가면 예약이 취소됩니다.
    -
    - 현재 대기 번호는{' '} - - {currentNum} - - 번 입니다. -
    + {waitAmount > 0 ? ( +
    + 현재 대기 번호는{' '} + + {currentNum} + + 번 입니다. +
    + ) : ( +
    + 고객님의 상담 차례입니다. +
    + + 상담 차례가 지나가버렸다면? + + navigate('/register/visit/' + branchId)} + > + 재예약하기 + +
    +
    + )}
    {visitNum} 번 @@ -113,7 +128,7 @@ export function ReservationDetailVisitPage() {
    -
    +

    대기정보

    @@ -134,7 +149,7 @@ export function ReservationDetailVisitPage() {
    -
    +