Skip to content

Commit

Permalink
Feat: 여정 아이템 삭제, 날짜이동 구현
Browse files Browse the repository at this point in the history
  • Loading branch information
@LeHiHo
LeHiHo committed Jan 18, 2024
1 parent 37c3bce commit cdd85a8
Show file tree
Hide file tree
Showing 11 changed files with 341 additions and 129 deletions.
4 changes: 2 additions & 2 deletions src/@types/socket.types.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -121,13 +121,13 @@ interface pubUpdateTransportation {
}

interface pubVisitDate {
tripId: number;
tripId: string;
oldVisitDate: string;
newVisitDate: string;
}

interface pubDeleteItem {
tripId: number;
tripId: string;
visitDate: string;
}

Expand Down
1 change: 1 addition & 0 deletions src/api/socket.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -137,6 +137,7 @@ export const pubDeleteItem = (
destination: `/pub/tripItems/${tripItemId}/deleteItem`,
body: JSON.stringify(pubDeleteItem),
});
console.log(pubDeleteItem);
};

// 멤버 여정 페이지로 입장 이벤트 발생시
Expand Down
12 changes: 6 additions & 6 deletions src/components/DetailSectionTop/DetailAddSchedule.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,21 +38,21 @@ const DetailAddSchedule = () => {
className="h-[52px] w-[52px] flex-shrink-0 flex-grow-0 rounded-lg object-cover"
/>
<div className="relative flex flex-shrink-0 flex-grow-0 flex-col items-start justify-start gap-2">
<p className="w-[270.04px] flex-shrink-0 flex-grow-0 text-left text-base font-bold text-[#1e1e1e]">
<div className="w-[270.04px] flex-shrink-0 flex-grow-0 text-left text-base font-bold text-[#1e1e1e]">
강릉 속초 여행
</p>
<p className="h-[17px] w-[270.04px] flex-shrink-0 flex-grow-0 text-left text-sm font-medium text-[#888]">
</div>
<div className="h-[17px] w-[270.04px] flex-shrink-0 flex-grow-0 text-left text-sm font-medium text-[#888]">
2023.12.20 - 12.22 (3박 4일)
</p>
</div>
</div>
</div>
</div>
</div>
<div className="flex items-start justify-start gap-1">
<div className="relative flex h-10 flex-shrink-0 flex-grow-0 items-center justify-center gap-1 rounded-[168px] border-[1.25px] border-solid border-[#29ddf6] px-8 py-2">
<p className="flex-shrink-0 flex-grow-0 text-left text-sm font-medium text-[#29ddf6]">
<div className="flex-shrink-0 flex-grow-0 text-left text-sm font-medium text-[#29ddf6]">
Day 1
</p>
</div>
</div>
</div>
</Dialog.Description>
Expand Down
215 changes: 119 additions & 96 deletions src/components/Plan/PlanEditItemBox.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,10 +7,13 @@ import {
DropResult,
} from 'react-beautiful-dnd';
import { useState, useEffect } from 'react';
import { pubUpdateTripItem } from '@api/socket';
import { pubUpdateTripItem, pubDeleteItem } from '@api/socket';
import { useContext } from 'react';
import { socketContext } from '@hooks/useSocket';
import { pubUpdateTripItemReq } from '@/@types/service';
import Alert from '@components/common/alert/Alert';
import ToastPopUp from '@components/common/toastpopup/ToastPopUp';
import PlanMoveItem from './PlanMoveItem';

type PlanItemBoxProps = {
item: TripItem[];
Expand All @@ -33,6 +36,12 @@ const PlanEditItemBox = ({

const [items, setItems] = useState(item);
const [newData, setNewData] = useState<pubUpdateTripItemReq | null>(null);
const [selectedItemId, setSelectedItemId] = useState<number | null>(null);
const [toastPopUp, setToastPopUp] = useState({
isPopUp: false,
noun: '',
verb: '',
});

const onDragEnd = (result: DropResult) => {
if (!result.destination) return;
Expand Down Expand Up @@ -60,108 +69,122 @@ const PlanEditItemBox = ({
}
}, [newData]);

console.log(newData);
const handleConfirm = () => {
if (tripId && visitDate && selectedItemId) {
callBackPub(() =>
pubDeleteItem({ tripId: tripId, visitDate: visitDate }, selectedItemId),
);
}
setToastPopUp(() => ({
isPopUp: true,
noun: '여행지',
verb: '삭제',
}));
};

const handleRadioChange = (id: number | null) => {
setSelectedItemId(id);
};

useEffect(() => {
if (toastPopUp.isPopUp) {
const timer = setTimeout(() => {
setToastPopUp(() => ({
isPopUp: false,
noun: '',
verb: '',
}));
}, 2000);
return () => clearTimeout(timer);
}
}, [toastPopUp]);

return (
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppableId">
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
<div className="text-left text-sm font-semibold ">{day}</div>
{items.map((item, index) => (
<Draggable
key={item.tripItemId.toString()}
draggableId={item.tripItemId.toString()}
index={index}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
className="flex">
<div className="relative ml-[5px] mr-[17px] flex h-[87.5px] items-center">
<input
type="radio"
name="options"
className="ml-[2px] mr-[5px] "></input>
</div>
<div className="flex w-full flex-col">
<div className="mb-[8px] flex h-[87.5px] rounded-lg border border-solid border-[#ededed] bg-white">
<img
className="h-[87px] w-[93px] rounded-bl-lg rounded-tl-lg "
src={item.thumbnailUrl}
alt="img"
/>
<div className="flex w-full flex-col p-[10px]">
<div className="flex justify-between text-left text-[14px] font-medium text-black">
{item.name}
<PenIcon size={14} className="cursor-pointer" />
</div>
<div className="mt-[3px] flex h-fit w-fit items-center justify-center gap-2 rounded-[3px] bg-[#ededed] p-[4px] text-center text-[11px] text-black">
{item.category}
</div>
<div className="mt-[15px] text-sm font-bold text-black">
{item.price} 원
<>
{toastPopUp.isPopUp && (
<ToastPopUp noun={toastPopUp.noun} verb={toastPopUp.verb} />
)}
<DragDropContext onDragEnd={onDragEnd}>
<Droppable droppableId="droppableId">
{(provided) => (
<div {...provided.droppableProps} ref={provided.innerRef}>
<div className="text-left text-sm font-semibold ">{day}</div>
{items.map((item, index) => (
<Draggable
key={item.tripItemId.toString()}
draggableId={item.tripItemId.toString()}
index={index}>
{(provided) => (
<div
ref={provided.innerRef}
{...provided.draggableProps}
className="flex">
<div className="relative ml-[5px] mr-[17px] flex h-[87.5px] items-center">
<input
type="radio"
name="options"
className="ml-[2px] mr-[5px]"
onChange={() => handleRadioChange(item.tripItemId)}
checked={selectedItemId === item.tripItemId}></input>
</div>
<div className="flex w-full flex-col">
<div className="mb-[8px] flex h-[87.5px] rounded-lg border border-solid border-[#ededed] bg-white">
<img
className="h-[87px] w-[93px] rounded-bl-lg rounded-tl-lg "
src={item.thumbnailUrl}
alt="img"
/>
<div className="flex w-full flex-col p-[10px]">
<div className="flex justify-between text-left text-[14px] font-medium text-black">
{item.name}
<PenIcon size={14} className="cursor-pointer" />
</div>
<div className="mt-[3px] flex h-fit w-fit items-center justify-center gap-2 rounded-[3px] bg-[#ededed] p-[4px] text-center text-[11px] text-black">
{item.category}
</div>
<div className="mt-[15px] text-sm font-bold text-black">
{item.price} 원
</div>
</div>
</div>
</div>
<div
className="relative ml-[13px] flex h-[87.5px] items-center"
{...provided.dragHandleProps}>
<DragAndDropIcon />
</div>
</div>
<div
className="relative ml-[13px] flex h-[87.5px] items-center"
{...provided.dragHandleProps}>
<DragAndDropIcon />
</div>
</div>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
)}
</Draggable>
))}
{provided.placeholder}
</div>
)}
</Droppable>
</DragDropContext>
<div className="flex w-full justify-center">
<div className="flex h-14">
<Alert
title={'여행지 삭제'}
message={<>선택한 장소를 삭제하시겠습니까?</>}
onConfirm={handleConfirm}
closeOnConfirm={true}
isCheck={selectedItemId}>
<button
type="button"
className="flex w-[206px] items-center justify-center gap-2 bg-gray3 p-2 font-bold text-white">
삭제하기
</button>
</Alert>
<PlanMoveItem
isCheck={selectedItemId}
tripId={tripId}
visitDate={visitDate}
/>
</div>
</div>
</>
);
};

export default PlanEditItemBox;

{
/* <>
<div>
<div className="text-left text-sm font-semibold ">{day}</div>
{item.map((item) => (
<div key={item.tripItemId} className="flex">
<div className="relative ml-[5px] mr-[17px] flex h-[87.5px] items-center">
<input
type="radio"
name="options"
className="ml-[2px] mr-[5px] "></input>
</div>
<div className="flex w-full flex-col">
<div className="mb-[8px] flex h-[87.5px] rounded-lg border border-solid border-[#ededed] bg-white">
<img
className="h-[87px] w-[93px] rounded-bl-lg rounded-tl-lg "
src={item.thumbnailUrl}
alt="img"
/>
<div className="flex w-full flex-col p-[10px]">
<div className="flex justify-between text-left text-[14px] font-medium text-black">
{item.name}
<PenIcon size={14} className="cursor-pointer" />
</div>
<div className="mt-[3px] flex h-fit w-fit items-center justify-center gap-2 rounded-[3px] bg-[#ededed] p-[4px] text-center text-[11px] text-black">
{item.category}
</div>
<div className="mt-[15px] text-sm font-bold text-black">
{item.price} 원
</div>
</div>
</div>
</div>
<div className="relative ml-[13px] flex h-[87.5px] items-center">
<DragAndDropIcon />
</div>
</div>
))}
</div>
</> */
}
14 changes: 2 additions & 12 deletions src/components/Plan/PlanItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,8 +59,6 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {

const transpo = tripItem?.data?.transportation || '';

console.log(tripItem);

return (
<>
{tripPath && <TripMap paths={tripPath.data?.paths || []} />}
Expand Down Expand Up @@ -100,6 +98,7 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
)}

<button
type="button"
onClick={handleEdit}
className="flex h-8 w-[46px] cursor-pointer items-center justify-center gap-2 rounded-lg bg-[#f0f0f0] p-2 text-sm font-medium text-gray4">
{isEdit ? '완료' : '편집'}
Expand All @@ -125,16 +124,7 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
</div>
<div className="mt-[18px]">
{isEdit ? (
<div className="flex w-full justify-center">
<div className="flex h-14">
<div className="flex w-[206px] items-center justify-center gap-2 bg-gray3 p-2 font-bold text-white">
삭제하기
</div>
<div className="flex w-[206px] items-center justify-center gap-2 bg-main2 p-2 font-bold text-white">
날짜 이동
</div>
</div>
</div>
''
) : (
<ButtonWhite
onClick={() => navigate('./place')}
Expand Down
Loading

0 comments on commit cdd85a8

Please sign in to comment.