diff --git a/package.json b/package.json index c962cb80..b572eba0 100644 --- a/package.json +++ b/package.json @@ -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", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index abcef86b..95225e8f 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -74,6 +74,9 @@ dependencies: react-beautiful-dnd: specifier: ^13.1.1 version: 13.1.1(react-dom@18.2.0)(react@18.2.0) + react-device-detect: + specifier: ^2.2.3 + version: 2.2.3(react-dom@18.2.0)(react@18.2.0) react-dom: specifier: ^18.2.0 version: 18.2.0(react@18.2.0) @@ -5139,6 +5142,17 @@ packages: - react-native dev: false + /react-device-detect@2.2.3(react-dom@18.2.0)(react@18.2.0): + resolution: {integrity: sha512-buYY3qrCnQVlIFHrC5UcUoAj7iANs/+srdkwsnNjI7anr3Tt7UY6MqNxtMLlr0tMBied0O49UZVK8XKs3ZIiPw==} + peerDependencies: + react: '>= 0.14.0' + react-dom: '>= 0.14.0' + dependencies: + react: 18.2.0 + react-dom: 18.2.0(react@18.2.0) + ua-parser-js: 1.0.37 + dev: false + /react-dom@18.2.0(react@18.2.0): resolution: {integrity: sha512-6IMTriUmvsjHUjNtEDudZfuDQUoWXVxKHhlEGSk81n4YFS+r/Kl99wXiwlVXtPBtJenozv2P+hxDsw9eA7Xo6g==} peerDependencies: @@ -5900,6 +5914,10 @@ packages: engines: {node: '>=14.17'} hasBin: true + /ua-parser-js@1.0.37: + resolution: {integrity: sha512-bhTyI94tZofjo+Dn8SN6Zv8nBDvyXTymAdM3LDI/0IboIUwTu1rEhW7v2TfiVsoYWgkQ4kOVqnI8APUFbIQIFQ==} + dev: false + /undici-types@5.26.5: resolution: {integrity: sha512-JlCMO+ehdEIKqlFxk6IfVoAUVmgz7cU7zD/h9XZ0qzeosSHmUJVOzSQvvYSYWXkFXC+IfLKSIffhv0sVZup6pA==} dev: false diff --git a/src/api/socket.ts b/src/api/socket.ts index 2f22446e..978ae336 100644 --- a/src/api/socket.ts +++ b/src/api/socket.ts @@ -125,6 +125,7 @@ export const pubUpdateTransportation = ( destination: `/pub/trips/${tripId}/updateTransportation`, body: JSON.stringify(pubUpdateTransportation), }); + console.log('펍실행'); }; // 여행 아이템 방문 날짜 변경 이벤트 발생시 diff --git a/src/components/DetailSectionBottom/DetailReviewStats.tsx b/src/components/DetailSectionBottom/DetailReviewStats.tsx index 7a2342b4..ade45a12 100644 --- a/src/components/DetailSectionBottom/DetailReviewStats.tsx +++ b/src/components/DetailSectionBottom/DetailReviewStats.tsx @@ -25,7 +25,7 @@ const DetailReviewStats = () => { backgroundColor: getColor(data.keywordCount), }} /> -
+

{getEmoji(data.content)}

{data.content}

diff --git a/src/components/DetailSectionTop/DetailAddSchedule.tsx b/src/components/DetailSectionTop/DetailAddSchedule.tsx index 0b39bba6..e976a48c 100644 --- a/src/components/DetailSectionTop/DetailAddSchedule.tsx +++ b/src/components/DetailSectionTop/DetailAddSchedule.tsx @@ -265,9 +265,9 @@ const DetailAddSchedule = () => { title={'로그인'} message={ <> - 새로운 여행 생성 시 로그인이 필요합니다. + 여정에 추가하려면 로그인이 필요해요.
- 로그인 하시겠습니까? + 로그인하러 가볼까요? } onConfirm={() => handleNavigate('/login')}> diff --git a/src/components/MyTrip/MyTripIngItem.tsx b/src/components/MyTrip/MyTripIngItem.tsx index e054b93f..3ff6392c 100644 --- a/src/components/MyTrip/MyTripIngItem.tsx +++ b/src/components/MyTrip/MyTripIngItem.tsx @@ -16,7 +16,7 @@ const MyTripIngItem: React.FC = ({ myTripList }) => {
navigate(`/trip/${tripId}`)}> -
+
= ({ myTripList }) => { alt="여행지 이미지" />
-
+
{tripStatus}
-
+
{tripName}
-
+
{startDate.replace(/-/g, '.')} -{' '} {endDate.replace(/-/g, '.').split('2024.')}{' '} {tripDuration === '0박 1일' ? null : ` (${tripDuration})`} diff --git a/src/components/MyTrip/MyTripItem.tsx b/src/components/MyTrip/MyTripItem.tsx index 7776541d..b5878161 100644 --- a/src/components/MyTrip/MyTripItem.tsx +++ b/src/components/MyTrip/MyTripItem.tsx @@ -64,8 +64,8 @@ const MyTripItem: React.FC = ({ myTripList }) => { alt="여행지 이미지" />
-
-
+
+
{tripName}
@@ -76,7 +76,7 @@ const MyTripItem: React.FC = ({ myTripList }) => {
-
+
{numberOfTripMember}명과 공유중
diff --git a/src/components/Plan/PlanEditItemBox.tsx b/src/components/Plan/PlanEditItemBox.tsx index 48230566..a52064b0 100644 --- a/src/components/Plan/PlanEditItemBox.tsx +++ b/src/components/Plan/PlanEditItemBox.tsx @@ -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'; @@ -35,7 +35,6 @@ const PlanEditItemBox = ({ const [, setIsEdit] = useRecoilState(isEditState); const [items, setItems] = useState(item); - const [newData, setNewData] = useState(null); const [selectedItemId, setSelectedItemId] = useState(null); const [toastPopUp, setToastPopUp] = useState({ isPopUp: false, @@ -43,6 +42,13 @@ const PlanEditItemBox = ({ 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); @@ -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); @@ -140,8 +133,8 @@ const PlanEditItemBox = ({ />
- {item.name.length > 17 - ? item.name.slice(0, 17) + '...' + {item.name.length > 16 + ? item.name.slice(0, 16) + '...' : item.name}
diff --git a/src/components/Plan/PlanItem.tsx b/src/components/Plan/PlanItem.tsx index 5ce5b3bb..ebe35ae5 100644 --- a/src/components/Plan/PlanItem.tsx +++ b/src/components/Plan/PlanItem.tsx @@ -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; @@ -40,24 +41,23 @@ const PlanItem: React.FC = ({ 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 && } @@ -67,7 +67,9 @@ const PlanItem: React.FC = ({ date, day }) => { ) : (
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"> = ({ date, day }) => {
- 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">
- {item.name.length > 19 - ? item.name.slice(0, 19) + '...' + {item.name.length > 16 + ? item.name.slice(0, 16) + '...' : item.name}
diff --git a/src/components/Plan/PlanSectionTop.tsx b/src/components/Plan/PlanSectionTop.tsx index 00d23134..afe01e17 100644 --- a/src/components/Plan/PlanSectionTop.tsx +++ b/src/components/Plan/PlanSectionTop.tsx @@ -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(); @@ -82,7 +83,11 @@ const PlanSectionTop = () => { }, [isEnter]); return (
- + {!isMobile && ( + <> + + + )} { navigate('/'); window.scrollTo({ top: 0, left: 0, behavior: 'smooth' }); }} - className="cursor-pointer flex-col items-center justify-center px-2"> + className="w-[53.12px] cursor-pointer flex-col items-center justify-center px-2">
-

+

홈

@@ -53,7 +53,7 @@ const Nav = () => { {isLoggedIn ? (
navigate('/mytrip')} - className="cursor-pointer flex-col items-center justify-center px-2"> + className="cursor-pointe w-[53.12px] flex-col items-center justify-center px-2">
{isActive('/mytrip') ? ( @@ -61,8 +61,8 @@ const Nav = () => { )}
-

- 일정 +

+ 여정

) : ( @@ -76,15 +76,15 @@ const Nav = () => { } onConfirm={handleConfirm}> -
+
-

- 일정 +

+ 여정

@@ -93,14 +93,14 @@ const Nav = () => { {isLoggedIn ? (
navigate('/wishlist')} - className="cursor-pointer flex-col items-center justify-center px-2"> + className="w-[53.12px] cursor-pointer flex-col items-center justify-center px-2">
-

+

관심목록

@@ -115,14 +115,14 @@ const Nav = () => { } onConfirm={handleConfirm}> -
+
-

+

관심목록

@@ -131,14 +131,14 @@ const Nav = () => {
navigate('/mypage')} - className="cursor-pointer flex-col items-center justify-center px-1"> + className="w-[53.12px] cursor-pointer flex-col items-center justify-center px-1 pt-[1px]">
-

+

내정보

diff --git a/src/components/common/tab/Tab.tsx b/src/components/common/tab/Tab.tsx index c75d14f2..7d012b00 100644 --- a/src/components/common/tab/Tab.tsx +++ b/src/components/common/tab/Tab.tsx @@ -29,14 +29,16 @@ const Tab = ({ lists, contents }: TabProps) => { defaultValue="tab0" onValueChange={handleTabChange}> {lists.map((list, index) => { return ( {list}