Skip to content

Commit

Permalink
Merge pull request #216 from Hanbang-NeungYo-Baeksook/develop
Browse files Browse the repository at this point in the history 
[Design] 🍀디자인 오류 수정 & 방문 알림
  • Loading branch information
@hhbb0081
hhbb0081 authored Dec 28, 2024
2 parents 2d7e538 + 4d604dd commit ffda599
Show file tree
Hide file tree
Showing 30 changed files with 427 additions and 433 deletions.
1 change: 1 addition & 0 deletions src/api/customer/inquires.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,6 +29,7 @@ export type GetInquiryDetailRequest = {
};

export type GetInquiryDetailResponce = InquiryData & {
waiting_amount: number;
customer_name: string;
tags: string[];
};
Expand Down
Binary file added src/assets/images/LoadingBasic.gif
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion src/components/Admin/Call/ListOfCallInquiry.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ function ListOfCallInquiry({
>
<div className='flex items-center space-x-2'>
<span className='ml-5 mr-5 font-medium text-gray-700'>
{currentPage - 1 + index + 1}
{(currentPage - 1) * 5 + index + 1}
</span>
<span className='font-semibold text-gray-800'>
{content.length <= 15
Expand Down
242 changes: 132 additions & 110 deletions src/components/Admin/Inquiry/InquiryList.tsx
View file
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -37,15 +38,14 @@ function InquiryList({
const [expandedItem, setExpandedItem] = useState<string | null>(null);
const navigate = useNavigate();

if (!inquiries)
if (!inquiries || !totalItems)
return (
<>
<Skeleton />
</>
);

const MIN_ID = Math.min(...inquiries.map(({ inquiry_num }) => inquiry_num));
console.log(MIN_ID);
const formattedInquiries = inquiries?.map(
({
inquiry_id,
Expand Down Expand Up @@ -89,120 +89,142 @@ function InquiryList({
/>
</div>

<Accordion type='single' collapsible>
{formattedInquiries
.sort((a, b) => a.inquiry_num - b.inquiry_num)
.map(
({
id,
inquiry_num,
status,
category,
tags,
customer_name,
time,
content,
}) => (
<AccordionItem key={id} value={id}>
<div className='font-inter flex items-center justify-between py-4 font-normal leading-normal'>
<div className='flex items-center space-x-2'>
<span className='ml-5 mr-5 font-medium text-gray-700'>
{inquiry_num}
<span className='text-[0.75rem]'>번</span>
</span>
<span className='pr-2 font-semibold text-gray-800'>
{content.length <= 15
? content
: `${content.substring(0, 15)}...`}
</span>
<Badge
variant='lightSolid'
className={`font-inter h-[1.8rem] w-auto justify-center rounded-full px-4 py-0.5 text-[0.8rem] font-normal leading-normal ${
status === 'PENDING'
? 'bg-teal-50 text-teal-600'
: 'bg-gray-200 text-gray-600'
}`}
>
{category}
</Badge>
{totalItems > 0 ? (
<Accordion type='single' collapsible>
{formattedInquiries
.sort((a, b) => a.inquiry_num - b.inquiry_num)
.map(
({
id,
inquiry_num,
status,
category,
tags,
customer_name,
time,
content,
}) => (
<AccordionItem key={id} value={id}>
<div
className={cn(
'font-inter flex items-center justify-between py-4 font-normal leading-normal',
status === 'PENDING' && MIN_ID === inquiry_num
? 'bg-[#FAFAFA]'
: 'bg-white'
)}
>
<div className='ml-5 flex flex-col items-start space-y-1'>
{status === 'PENDING' && MIN_ID === inquiry_num && (
<span className='text-[0.875rem] text-red-400'>
가장 최신 답변입니다. 먼저 답변해주세요.
</span>
)}
<div className='flex items-center space-x-2'>
<span className='mr-5 font-medium text-gray-700'>
{inquiry_num}
<span className='text-[0.75rem]'>번</span>
</span>
<span className='pr-2 font-semibold text-gray-800'>
{content.length <= 15
? content
: `${content.substring(0, 15)}...`}
</span>
<Badge
variant='lightSolid'
className={`font-inter h-[1.8rem] w-auto justify-center rounded-full px-4 py-0.5 text-[0.8rem] font-normal leading-normal ${
status === 'PENDING'
? 'bg-teal-50 text-teal-600'
: 'bg-gray-200 text-gray-600'
}`}
>
{category}
</Badge>
</div>
</div>
{status === 'REGISTRATIONCOMPLETE' ? (
<span
className='mr-6 flex cursor-pointer items-center pb-[1.05rem] pt-[1rem] text-sm font-medium text-black'
onClick={() => navigate(`/admin/online/inquiry/${id}`)}
>
상세보기
<img
src={rightArrow}
alt='Go'
className='ml-0 inline-block'
/>
</span>
) : (
<AccordionTrigger
className='mr-5 flex items-center text-[0.875rem] font-normal text-black'
onClick={() =>
setExpandedItem(expandedItem === id ? null : id)
}
>
{expandedItem === id ? '접기' : '펼쳐보기'}
</AccordionTrigger>
)}
</div>
{status === 'REGISTRATIONCOMPLETE' ? (
<span
className='mr-6 flex cursor-pointer items-center pb-[1.05rem] pt-[1rem] text-sm font-medium text-black'
onClick={() => navigate(`/admin/online/inquiry/${id}`)}
>
상세보기
<img
src={rightArrow}
alt='Go'
className='ml-0 inline-block'
/>
</span>
) : (
<AccordionTrigger
className='mr-5 flex items-center text-[0.875rem] font-normal text-black'
onClick={() =>
setExpandedItem(expandedItem === id ? null : id)
}
>
{expandedItem === id ? '접기' : '펼쳐보기'}
</AccordionTrigger>
)}
</div>
<AccordionContent className='-mb-4 mt-0 bg-gray-50'>
<div className='relative mt-2 rounded-md border-t p-4'>
{/* 상단 영역 */}
<div className='mb-1 flex items-center justify-between'>
<p className='font-semibold text-gray-800'>
{Array.isArray(tags) &&
tags.map((tag, idx) => (
<Badge
key={idx}
variant='lightSolid'
className={`mr-2 h-[1.8rem] w-auto justify-center rounded-full bg-gray-500 px-3 py-0.5 text-sm font-medium text-white`}
<AccordionContent className='-mb-4 mt-0 bg-gray-50'>
<div className='relative mt-2 rounded-md border-t p-4'>
{/* 상단 영역 */}
<div className='mb-1 flex items-center justify-between'>
<p className='font-semibold text-gray-800'>
{Array.isArray(tags) &&
tags.map((tag, idx) => (
<Badge
key={idx}
variant='lightSolid'
className={`mr-2 h-[1.8rem] w-auto justify-center rounded-full bg-gray-500 px-3 py-0.5 text-sm font-medium text-white`}
>
{'#' + tag}
</Badge>
))}
</p>

{status === 'PENDING' &&
(MIN_ID === inquiry_num ? (
<Button
variant='default'
className='font-inter h-[2.8rem] w-[9rem] rounded-full bg-main px-4 py-1 align-middle text-base font-extrabold text-white'
onClick={() =>
navigate('/admin/online/inquiry/register/' + id)
}
>
답변하기
</Button>
) : (
<Button
variant='default'
className='font-inter h-[2.8rem] w-fit rounded-full bg-gray-200 px-4 py-1 align-middle text-base font-extrabold text-gray-500'
disabled
>
{'#' + tag}
</Badge>
가장 최신 답변부터 답변해주세요.
</Button>
))}
</p>
</div>

{status === 'PENDING' &&
(MIN_ID === inquiry_num ? (
<Button
variant='default'
className='font-inter h-[2.8rem] w-[9rem] rounded-full bg-main px-4 py-1 align-middle text-base font-extrabold text-white'
onClick={() =>
navigate('/admin/online/inquiry/register/' + id)
}
>
답변하기
</Button>
) : (
<Button
variant='default'
className='font-inter h-[2.8rem] w-[9rem] rounded-full bg-gray-200 px-4 py-1 align-middle text-base font-extrabold text-gray-300'
disabled
>
답변하기
</Button>
))}
</div>

{/* 본문 내용 */}
<p className='mt-2 text-left text-[1.1rem] font-medium leading-normal text-gray-700'>
{content}
</p>
{/* 본문 내용 */}
<p className='mt-2 text-left text-[1.1rem] font-medium leading-normal text-gray-700'>
{content}
</p>

{/* 하단 정보 (오른쪽 정렬) */}
<div className='absolute bottom-4 right-4 text-right text-[0.95rem] font-medium text-gray-400'>
{customer_name} · {time} · {category}
{/* 하단 정보 (오른쪽 정렬) */}
<div className='absolute bottom-4 right-4 text-right text-[0.95rem] font-medium text-gray-400'>
{customer_name} · {time} · {category}
</div>
</div>
</div>
</AccordionContent>
</AccordionItem>
)
)}
</Accordion>
</AccordionContent>
</AccordionItem>
)
)}
</Accordion>
) : (
<div className='mt-36'>
<span className='text-2xl font-bold text-lightGrey'>
등록된 1:1 문의가 없습니다.
</span>
</div>
)}
</div>
);
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/Admin/main/CallContainer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();

Expand Down
2 changes: 1 addition & 1 deletion src/components/Admin/main/WaitingBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,7 +36,7 @@ function WaitingBox({
<div className='flex items-center justify-between'>
<span className='text-[0.875rem]'>{content}</span>
<span className='text-[0.75rem]'>
{dayjs(resTime).format('MM월 DD일 HH시 MM분')}
{dayjs(resTime).format('MM월 DD일 HH시 mm분')}
</span>
</div>
</div>
Expand Down
48 changes: 21 additions & 27 deletions src/components/BottomSheet/BottomSheet.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 {
Expand All @@ -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,
Expand All @@ -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 (
<div className='z-10 flex items-center space-x-4'>
<Skeleton className='h-12 w-12 rounded-full bg-[#F2F2F2]' />
<div className='w-full space-y-2'>
<Skeleton className='h-4 w-full bg-[#F2F2F2]' />
<Skeleton className='h-4 w-[80%] bg-[#F2F2F2]' />
</div>
</div>
);
return <LoadingBasic />;
}

const selectedBranchList: BranchData[] =
Expand All @@ -108,28 +114,16 @@ 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];
const endHour = endTime.split(':')[0];
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(
Expand Down
Loading

0 comments on commit ffda599

Please sign in to comment.