Skip to content

Commit

Permalink
Merge pull request #279 from WePlanPlans/dev
Browse files Browse the repository at this point in the history
Fix: 글자수제한 19->16, 이런점이좋았어요 세로가운데정렬 적용
  • Loading branch information
LeHiHo authored Jan 26, 2024
2 parents cfb4260 + 8c4dfb2 commit 169e90f
Show file tree
Hide file tree
Showing 13 changed files with 92 additions and 66 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@
"path": "^0.12.7",
"react": "^18.2.0",
"react-beautiful-dnd": "^13.1.1",
"react-device-detect": "^2.2.3",
"react-dom": "^18.2.0",
"react-hook-form": "^7.49.2",
"react-icons": "^5.0.1",
Expand Down
18 changes: 18 additions & 0 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

1 change: 1 addition & 0 deletions src/api/socket.ts
Original file line number Diff line number Diff line change
Expand Up @@ -125,6 +125,7 @@ export const pubUpdateTransportation = (
destination: `/pub/trips/${tripId}/updateTransportation`,
body: JSON.stringify(pubUpdateTransportation),
});
console.log('펍실행');
};

// 여행 아이템 방문 날짜 변경 이벤트 발생시
Expand Down
2 changes: 1 addition & 1 deletion src/components/DetailSectionBottom/DetailReviewStats.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -25,7 +25,7 @@ const DetailReviewStats = () => {
backgroundColor: getColor(data.keywordCount),
}}
/>
<div className="absolute left-[14.5px] top-[12.23px] flex w-[90%] items-center justify-start">
<div className="absolute left-[14.5px] top-[12.23px] flex h-[16px] w-[90%] items-center justify-start">
<div className="flex flex-grow items-start justify-start gap-2.5">
<p>{getEmoji(data.content)}</p>
<p className="font-bold text-gray6">{data.content}</p>
Expand Down
4 changes: 2 additions & 2 deletions src/components/DetailSectionTop/DetailAddSchedule.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -265,9 +265,9 @@ const DetailAddSchedule = () => {
title={'로그인'}
message={
<>
새로운 여행 생성 시 로그인이 필요합니다.
여정에 추가하려면 로그인이 필요해요.
<br />
로그인 하시겠습니까?
로그인하러 가볼까요?
</>
}
onConfirm={() => handleNavigate('/login')}>
Expand Down
8 changes: 4 additions & 4 deletions src/components/MyTrip/MyTripIngItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -16,26 +16,26 @@ const MyTripIngItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
<div
className="relative flex h-16 w-full cursor-pointer items-center rounded-2xl border border-solid border-cyan-400 bg-cyan-400 px-3"
onClick={() => navigate(`/trip/${tripId}`)}>
<div className="flex">
<div className="flex items-center">
<div>
<img
className="h-10 min-h-10 w-10 rounded-3xl object-cover"
src={tripThumbnailUrl}
alt="여행지 이미지"
/>
</div>
<div className="absolute right-3 top-[20px] inline-flex h-[22px] w-[54px] items-center justify-center gap-[8px] rounded-2xl border border-solid border-cyan-400 bg-white px-[8px] py-[10px] pt-[13px]">
<div className="absolute right-3 top-[20px] inline-flex h-[22px] w-[54px] items-center justify-center gap-[8px] rounded-2xl border border-solid border-cyan-400 bg-white px-[8px] py-[10px] pt-[10px]">
<span className="text-xs font-semibold text-cyan-400">
{tripStatus}
</span>
</div>
<div className="ml-[15px] flex max-w-[300px] flex-col items-start justify-between gap-[15px] ">
<div className="mt-[6px]">
<div className="mt-[3px]">
<div className="w-56 truncate text-[15px] font-bold text-white ">
{tripName}
</div>

<div className="mt-[4px] text-xs font-semibold text-white">
<div className="mb-[5px] text-xs font-semibold text-white">
{startDate.replace(/-/g, '.')} -{' '}
{endDate.replace(/-/g, '.').split('2024.')}{' '}
{tripDuration === '0박 1일' ? null : ` (${tripDuration})`}
Expand Down
6 changes: 3 additions & 3 deletions src/components/MyTrip/MyTripItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -64,8 +64,8 @@ const MyTripItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
alt="여행지 이미지"
/>
</div>
<div className="ml-[10px] flex w-full flex-col items-start justify-between ">
<div className="mt-[1px] ">
<div className="ml-[10px] mt-[-2px] flex w-full flex-col items-start justify-between ">
<div>
<div className="truncate text-[15px] text-base font-bold text-stone-900">
{tripName}
</div>
Expand All @@ -76,7 +76,7 @@ const MyTripItem: React.FC<MyTripItemProps> = ({ myTripList }) => {
</div>
</div>

<div className="mb-[5px] flex text-xs font-normal text-zinc-500">
<div className="flex pt-[2px] text-xs font-normal text-zinc-500">
<UserIcon size={13} fill="#888" color="none" />
<span>{numberOfTripMember}명과 공유중</span>
</div>
Expand Down
29 changes: 11 additions & 18 deletions src/components/Plan/PlanEditItemBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
Draggable,
DropResult,
} from 'react-beautiful-dnd';
import { useState, useEffect } from 'react';
import { useState, useEffect, useCallback } from 'react';
import { pubUpdateTripItem, pubDeleteItem } from '@api/socket';
import { pubUpdateTripItemReq } from '@/@types/service';
import Alert from '@components/common/alert/Alert';
Expand Down Expand Up @@ -35,14 +35,20 @@ const PlanEditItemBox = ({

const [, setIsEdit] = useRecoilState(isEditState);
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 debouncedPubUpdateTripItem = useCallback(
debounce((newData: pubUpdateTripItemReq, tripId: string) => {
pubUpdateTripItem(newData, tripId);
}, 3000),
[],
);

const onDragEnd = (result: DropResult) => {
if (!result.destination) return;
const reorderedItems = Array.from(items);
Expand All @@ -55,22 +61,9 @@ const PlanEditItemBox = ({
seqNum: index + 1,
}));

setNewData({
visitDate: visitDate,
tripItemOrder,
});
debouncedPubUpdateTripItem({ visitDate: visitDate, tripItemOrder }, tripId);
};

const debouncedPubUpdateTripItem = debounce((newData, tripId) => {
pubUpdateTripItem(newData, tripId);
}, 1000);

useEffect(() => {
if (newData && tripId) {
debouncedPubUpdateTripItem(newData, tripId);
}
}, [newData]);

const handleConfirm = () => {
if (tripId && visitDate && selectedItemId) {
pubDeleteItem({ tripId: tripId, visitDate: visitDate }, selectedItemId);
Expand Down Expand Up @@ -140,8 +133,8 @@ const PlanEditItemBox = ({
/>
<div className="flex h-[88px] w-full flex-col px-[10px] py-[8px]">
<div className="flex text-left text-[14px] font-medium text-black">
{item.name.length > 17
? item.name.slice(0, 17) + '...'
{item.name.length > 16
? item.name.slice(0, 16) + '...'
: item.name}
</div>
<div className="mb-[11px] mt-[4px] flex h-[16px] w-fit items-center justify-center rounded-[3px] bg-[#ededed] px-[4px] py-[8px] text-center text-[11px] text-black">
Expand Down
44 changes: 25 additions & 19 deletions src/components/Plan/PlanItem.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,14 @@ import { useNavigate } from 'react-router-dom';
import TripMap from './TripMap';
import PlanItemBox from './PlanItemBox';
import PlanEditItemBox from './PlanEditItemBox';
import { useContext, useEffect } from 'react';
import { useContext, useEffect, useCallback } from 'react';
import { socketContext } from '@hooks/useSocket';
import { useRecoilState, useRecoilValue } from 'recoil';
import { visitDateState, isEditState } from '@recoil/socket';
import { pubGetPathAndItems, pubUpdateTransportation } from '@api/socket';
import { tapState } from '@recoil/plan';
import { useGetTripsAuthority } from '@hooks/useGetTripsAuthority';
import { debounce } from 'lodash';

type PlanItemProps = {
date: string;
Expand Down Expand Up @@ -40,24 +41,23 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
setIsEdit((prev) => !prev);
};

const handleTranspo = (
transportation: 'CAR' | 'PUBLIC_TRANSPORTATION',
date: string,
tripId: string,
) => {
if (transportation !== transpo) {
pubUpdateTransportation(
{
visitDate: date,
transportation: transportation,
},
tripId,
);
}
};

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

const debouncedHandleTranspo = useCallback(
debounce((transportation, date, tripId) => {
if (transportation !== transpo) {
pubUpdateTransportation(
{
visitDate: date,
transportation: transportation,
},
tripId,
);
}
}, 1000),
[transpo],
);

return (
<>
{tripPath && <TripMap paths={tripPath.data?.paths || []} />}
Expand All @@ -67,7 +67,9 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
) : (
<div className="flex items-center justify-center">
<div
onClick={() => handleTranspo('CAR', date || '', tripId || '')}
onClick={() =>
debouncedHandleTranspo('CAR', date || '', tripId || '')
}
className="flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-l-md border border-solid border-gray3">
<CarIcon
size={19}
Expand All @@ -76,7 +78,11 @@ const PlanItem: React.FC<PlanItemProps> = ({ date, day }) => {
</div>
<div
onClick={() =>
handleTranspo('PUBLIC_TRANSPORTATION', date || '', tripId || '')
debouncedHandleTranspo(
'PUBLIC_TRANSPORTATION',
date || '',
tripId || '',
)
}
className="pointer-cursor -ml-[1px] flex h-[32px] w-[32px] cursor-pointer items-center justify-center rounded-r-md border border-solid border-gray3">
<BusIcon
Expand Down
4 changes: 2 additions & 2 deletions src/components/Plan/PlanItemBox.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -84,8 +84,8 @@ const PlanItemBox = ({
/>
<div className="flex h-[88px] w-full flex-col px-[10px] py-[8px]">
<div className="text-left text-[14px] font-medium text-black">
{item.name.length > 19
? item.name.slice(0, 19) + '...'
{item.name.length > 16
? item.name.slice(0, 16) + '...'
: item.name}
</div>
<div className="mb-[11px] mt-[4px] flex h-[16px] w-fit items-center justify-center rounded-[3px] bg-[#ededed] px-[4px] py-[8px] text-center text-[11px] text-black">
Expand Down
7 changes: 6 additions & 1 deletion src/components/Plan/PlanSectionTop.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import PlanSchedule from './PlanSchedule';
import PlanCursor from './PlanCursor';
import PlanOtherCursor from './PlanOtherCursor';
import ScrollTopButton from '@components/common/scrollTopButton/ScrollTopButton';
import { isMobile } from 'react-device-detect';

const PlanSectionTop = () => {
const navigate = useNavigate();
Expand Down Expand Up @@ -82,7 +83,11 @@ const PlanSectionTop = () => {
}, [isEnter]);
return (
<div className="cursor-area min-h-screen" ref={cursorAreaRef}>
<PlanCursor props={cursorAreaRef} />
{!isMobile && (
<>
<PlanCursor props={cursorAreaRef} />
</>
)}
<PlanOtherCursor />
<BackBox
showBack={true}
Expand Down
Loading

0 comments on commit 169e90f

Please sign in to comment.