-
충전 갯수
+
충전 갯수
-
{amount ? amount.toLocaleString() : 0}개 /
-
+
{amount ? amount.toLocaleString() : 0}개 /
+
{amount ? (amount * 100).toLocaleString() : 0}원
@@ -168,32 +186,30 @@ export default function ChargeModal({
type="submit"
aria-busy={isWaitingPayment}
disabled={isWaitingPayment}
- className="w-full rounded-lg bg-color-blue-300 py-4 text-lg font-semibold text-white hover:bg-color-blue-200"
+ className="semibold w-full rounded-lg bg-color-blue-300 py-4 text-lg text-white hover:bg-color-blue-200"
>
충전하기
- {paymentStatus.status === "FAILED" && (
-
+ {(paymentStatus.status === "FAILED" || paymentStatus.status === "PAID") && (
+
+
+
+ {paymentStatus.status === "FAILED" ? "결제 실패" : "결제 성공"}
+
+
+ {paymentStatus.status === "FAILED" ? paymentStatus.message : "결제에 성공했습니다."}
+
+
+
+
)}
-
);
diff --git a/src/components/Gnb/NavBar.tsx b/src/components/Gnb/NavBar.tsx
index 98573598..686a801f 100644
--- a/src/components/Gnb/NavBar.tsx
+++ b/src/components/Gnb/NavBar.tsx
@@ -19,6 +19,7 @@ import avatarImages from "@/utils/formatImage";
import { useRef } from "react";
import useRealTimeNotification from "@/stores/useRealTimeNotification";
import ChargeModal from "./ChargeModal";
+import { getAccessToken } from "@/utils/tokenUtils";
interface LinkItem {
href: string;
@@ -26,16 +27,27 @@ interface LinkItem {
group?: string;
}
+enum NavigationPath {
+ FINDING_MAKER = "/finding-maker",
+ PLAN_REQUEST = "/plan-request",
+ MY_TRIP_MANAGE = "/mytrip-manage/ongoing-plan",
+ RECEIVE = "/receive",
+ MANAGE_QUO = "/managequo",
+ LOGIN = "/login",
+ CHATTING = "/chatting",
+ LANDING = "/",
+}
+
const linkItems: Record<"guest" | "DREAMER" | "MAKER", LinkItem[]> = {
- guest: [{ href: "/finding-maker", label: "Maker 찾기" }],
+ guest: [{ href: NavigationPath.FINDING_MAKER, label: "Maker 찾기" }],
DREAMER: [
- { href: "/plan-request", label: "여행 요청" },
- { href: "/finding-maker", label: "Maker 찾기" },
- { href: "/mytrip-manage/ongoing-plan", label: "내 여행 관리", group: "mytrip-manage" },
+ { href: NavigationPath.PLAN_REQUEST, label: "여행 요청" },
+ { href: NavigationPath.FINDING_MAKER, label: "Maker 찾기" },
+ { href: NavigationPath.MY_TRIP_MANAGE, label: "내 여행 관리", group: "mytrip-manage" },
],
MAKER: [
- { href: "/receive", label: "받은 요청", group: "receive" },
- { href: "/managequo", label: "내 견적 관리", group: "managequo" },
+ { href: NavigationPath.RECEIVE, label: "받은 요청", group: "receive" },
+ { href: NavigationPath.MANAGE_QUO, label: "내 견적 관리", group: "managequo" },
],
};
@@ -45,7 +57,8 @@ const getNotification = () => {
};
const NavBar = () => {
- const { isLoggedIn, nickName, role, coconut, setLogin } = useAuthStore();
+ const { isLoggedIn, nickName, role, coconut, setCoconut, email, phoneNumber, setLogin } =
+ useAuthStore();
const [isOpenSidebar, setIsOpenSidebar] = useState
(false);
const [isOpenNotification, setIsOpenNotification] = useState(false);
const [isOpenUserMenu, setIsOpenUserMenu] = useState(false);
@@ -82,9 +95,9 @@ const NavBar = () => {
const isLinkActive = (link: LinkItem): boolean => {
switch (link.group) {
case "receive":
- return ["/receive", "/all-receive-plan"].includes(router.pathname);
+ return [NavigationPath.RECEIVE, "/all-receive-plan"].includes(router.pathname);
case "managequo":
- return ["/managequo", "/rejectlist"].includes(router.pathname);
+ return [NavigationPath.MANAGE_QUO, "/reject-list"].includes(router.pathname);
case "mytrip-manage":
return router.pathname.startsWith("/mytrip-manage/");
default:
@@ -136,8 +149,7 @@ const NavBar = () => {
}, [isLoggedIn, notificationData]);
useEffect(() => {
- const accessToken = localStorage.getItem("accessToken");
-
+ const accessToken = getAccessToken();
if (accessToken) {
const fetchUserInfo = async () => {
try {
@@ -147,7 +159,10 @@ const NavBar = () => {
setUserInfo(userData);
const avatarImage = avatarImages.find((avatar) => avatar.key === profileData.image);
setUserImage(avatarImage ? avatarImage.src : user_img.src);
- setLogin(userData.nickName, userData.role, userData.coconut,userData.email,userData.phoneNumber);
+ setLogin(nickName, role, coconut, email, phoneNumber);
+ if (userData.coconut !== coconut) {
+ handleCoconutChange(userData.coconut);
+ }
} catch (error) {
console.error(error);
}
@@ -155,7 +170,7 @@ const NavBar = () => {
fetchUserInfo();
}
- }, [setLogin]);
+ }, [setLogin, coconut]);
useEffect(() => {
const handleOutsideClick = (event: MouseEvent) => {
@@ -190,13 +205,18 @@ const NavBar = () => {
};
}, [isOpenUserMenu, isOpenNotification, isOpenSidebar]);
+ const handleCoconutChange = (newCoconut: number) => {
+ setCoconut(newCoconut);
+ };
+
const hasUnreadNotifications = notificationData.some((notification) => !notification.isRead);
+ const hasNotifications = realTimeNotifications.length > 0;
return (
-
+
-
-
+
+
@@ -208,10 +228,10 @@ const NavBar = () => {
<>
-
{coconut}p
+
{coconut}개
-
+
{
) : (
<>
-
+
@@ -294,28 +314,35 @@ const NavBar = () => {
{/* 사이드바 */}
- {isOpenSidebar && (
-
-
-
- setIsOpenSidebar(false)}
- />
-
-
-
+
+
+
+ setIsOpenSidebar(false)}
+ />
+
+
- )}
+
{/* 실시간 알림 */}
- {realTimeNotifications.length > 0 && (
+ {hasNotifications && (
{realTimeNotifications.map((notification) => (
{
return tripTypeMap[tripType] || "알 수 없는 여행 타입";
};
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
const getNotificationMessage = (event: string, payload: any) => {
switch (event) {
case "ARRIVE_REQUEST":
@@ -115,8 +114,10 @@ export default function Notification({ closeModal }: { closeModal: () => void })
patchNotiMutation.mutate(notificationId);
};
+ const hasNotification = !isLoading && initialNotificationData.length > 0;
+
useEffect(() => {
- if (!isLoading && initialNotificationData.length > 0) {
+ if (hasNotification) {
setNotificationData(initialNotificationData);
}
}, [isLoading, initialNotificationData]);
@@ -145,25 +146,28 @@ export default function Notification({ closeModal }: { closeModal: () => void })
className={`max-h-[300px] overflow-y-auto ${notificationData.length >= 4 ? "h-[300px]" : ""}`}
>
- {notificationData.map((notification, index) => (
-
-
- handleRead(notification.id)}
- className={`cursor-pointer pt-4 ${notification.isRead ? "bg-[#f1f1f1]" : "bg-color-gray-50"}`}
- >
-
- {getNotificationMessage(notification.event, notification.payload)}
-
-
- {formatRelativeTime(notification.createdAt)}
-
+ {notificationData
+ .slice()
+ .reverse()
+ .map((notification, index) => (
+
+
- handleRead(notification.id)}
+ className={`cursor-pointer pt-4 ${notification.isRead ? "bg-[#f1f1f1]" : "bg-color-gray-50"}`}
+ >
+
+ {getNotificationMessage(notification.event, notification.payload)}
+
+
+ {formatRelativeTime(notification.createdAt)}
+
- {index < notificationData.length - 1 && (
-
- )}
-
-
+
)}
diff --git a/src/components/Gnb/UserMenu.tsx b/src/components/Gnb/UserMenu.tsx
index b46ed8db..e8c82fc3 100644
--- a/src/components/Gnb/UserMenu.tsx
+++ b/src/components/Gnb/UserMenu.tsx
@@ -1,7 +1,7 @@
import useAuthStore from "@/stores/useAuthStore";
import Link from "next/link";
import { useRouter } from "next/router";
-
+import { removeAccessToken } from "@/utils/tokenUtils";
export interface UserMenuProps {
userId: string;
@@ -15,6 +15,13 @@ interface MenuItem {
onClick?: () => void;
}
+enum NavigationPath {
+ DREAMER_PROFILE = "/profile/dreamer/edit/",
+ FOLLOW_MAKER = "/follow-maker",
+ COMPLETED_TRIP_REVIEWS = "/myreview-manage/completed-trip",
+ MAKER_PROFILE = "/profile/maker/mypage/",
+}
+
export default function UserMenu({ userId, closeMenu, onChargeClick }: UserMenuProps) {
const { nickName, role, setLogout } = useAuthStore();
const router = useRouter();
@@ -23,16 +30,18 @@ export default function UserMenu({ userId, closeMenu, onChargeClick }: UserMenuP
const menuItems: Record
= {
DREAMER: [
- { href: userId ? `/profile/dreamer/edit/${userId}` : "", label: "프로필 수정" },
- { href: "/follow-maker", label: "찜한 Maker" },
- { href: "/myreview-manage/completed-trip", label: "여행 리뷰" },
+ { href: userId ? `${NavigationPath.DREAMER_PROFILE}${userId}` : "", label: "프로필 수정" },
+ { href: NavigationPath.FOLLOW_MAKER, label: "찜한 Maker" },
+ { href: NavigationPath.COMPLETED_TRIP_REVIEWS, label: "여행 리뷰" },
{
- href: "#",
+ href: "",
label: "코코넛 충전",
onClick: onChargeClick,
},
],
- MAKER: [{ href: userId ? `/profile/maker/mypage/${userId}` : "", label: "마이페이지" }],
+ MAKER: [
+ { href: userId ? `${NavigationPath.MAKER_PROFILE}${userId}` : "", label: "마이페이지" },
+ ],
};
const renderMenus = () => {
@@ -56,9 +65,9 @@ export default function UserMenu({ userId, closeMenu, onChargeClick }: UserMenuP
};
const handleLogout = () => {
- localStorage.removeItem("accessToken");
- router.reload();
+ removeAccessToken();
setLogout();
+ router.push("/login");
};
return (
diff --git a/src/components/Landing/FeatureCard.tsx b/src/components/Landing/FeatureCard.tsx
new file mode 100644
index 00000000..7fcca4a5
--- /dev/null
+++ b/src/components/Landing/FeatureCard.tsx
@@ -0,0 +1,25 @@
+import Image, { StaticImageData } from "next/image";
+
+interface FeatureCardProps {
+ imageUrl: string | StaticImageData;
+ title: string;
+ description: string;
+}
+
+export default function FeatureCard({ imageUrl, title, description }: FeatureCardProps) {
+ return (
+
+
+
+
+
{title}
+
{description}
+
+
+ {featureData.map((feature, index) => (
+
+
+
+ ))}
+
+
+
+
+
+ 시간이 없어도 괜찮아요
+
+
+
+ 당신을 대신해 여행하고,
+
+ 특별한 순간들을 공유해드립니다
+
+
+
+ 🛬 사용자 이용현황 🛬
+
+
+
+ {/* 지도 */}
+
+
+ {geoData && (
+
+ {({ geographies }) =>
+ geographies.map((geo) => (
+
+ ))
+ }
+
+ )}
+ {markers.map(({ name, coordinates }) => (
+ handleMarkerClick(name)}
+ >
+
+ {name}
+
+
+
+ ))}
+
+
+
+ {/* 통계 */}
+
+ {selectedRegion ? (
+ <>
+
+
+ {regionNames[selectedRegion.name]} 통계
+
+
+
+
+
+
+
총 서비스 수: {selectedRegion.totalCount}
+ {selectedRegion.totalCount === 0 ? (
+
+
+ 통계 자료가 없습니다!
+
+ 여러분의 꿈을 추가해 보세요! 🚀
+
+
+ ) : (
+
+
+ {selectedRegion.details.map((entry, index) => (
+ |
+ ))}
+
+
+
+ )}
+
마커를 클릭하면 해당 지역 통계를 볼 수 있습니다.
+
+ ) : (
+
마커를 클릭하면 해당 지역 통계를 볼 수 있습니다.
+ )}
+
+
-
+
+
-
-
-
-
-
+
+     ...etc
+
+
+
+
+## 💁 구성원
+
+| 양가현 | 김은효 | 방신철 | 현준배 |
+| :--------------------------------------------------------------: | :---------------------------------------------------------: | :--------------------------------------------------------------: | :---------------------------------------------------------: |
+|