+
+ );
+};
+
+const UserDataDisplay = ({ userId }: { userId: number }) => {
+ const { data, isPending, isError } = useTanstackFetch
+
+
+
+
+
+ {isVisible && Loading... (User ID: {userId})
;
+ }
+
+ if (isError) {
+ return Error Occurred
;
+ }
+
+ return (
+
+
+ );
+};
diff --git a/week10/src/components/common/Error.tsx b/week10/src/components/common/Error.tsx
new file mode 100644
index 00000000..81da7aa9
--- /dev/null
+++ b/week10/src/components/common/Error.tsx
@@ -0,0 +1,57 @@
+import { motion } from "framer-motion";
+
+interface ErrorProps {
+ error: string | null;
+}
+
+const Error = ({ error }: ErrorProps) => {
+ return (
+ {data?.name}
+{data?.email}
+User ID: {data?.id}
+
+
+
+ );
+}
diff --git a/week10/src/components/common/ModalPortal.tsx b/week10/src/components/common/ModalPortal.tsx
new file mode 100644
index 00000000..c163f453
--- /dev/null
+++ b/week10/src/components/common/ModalPortal.tsx
@@ -0,0 +1,13 @@
+import type { ReactNode } from "react";
+import { createPortal } from "react-dom";
+
+interface ModalPortalProps {
+ children: ReactNode;
+}
+
+export default function ModalPortal({ children }: ModalPortalProps) {
+ const modalRoot = document.getElementById("modal-root") as HTMLElement;
+ if (!modalRoot) return null;
+
+ return createPortal(children, modalRoot);
+}
diff --git a/week10/src/components/common/MovieNavbar.tsx b/week10/src/components/common/MovieNavbar.tsx
new file mode 100644
index 00000000..5083f28e
--- /dev/null
+++ b/week10/src/components/common/MovieNavbar.tsx
@@ -0,0 +1,71 @@
+import { NavLink } from "react-router-dom";
+import type { NavItem } from "../../types/movie";
+import AuthButton from "../AuthButton";
+import { Hamburger } from "../../components/icons/Hamburger";
+import { CiShoppingCart } from "react-icons/ci";
+
+import { useEffect } from "react";
+import { useCartActions, useCartInfo } from "../../store/useCartStore";
+
+const navItems: Record
+
+ );
+};
+
+export default MovieNavbar;
diff --git a/week10/src/components/common/Pending.tsx b/week10/src/components/common/Pending.tsx
new file mode 100644
index 00000000..a7222d15
--- /dev/null
+++ b/week10/src/components/common/Pending.tsx
@@ -0,0 +1,19 @@
+import { motion } from "framer-motion";
+
+const Pending = () => {
+ return (
+ -
+ {/* 햄버거 버튼 클릭 시 사이드바 열림
+ data-hamburger 속성을 활용하여 사이드바 열림 방지 */}
+
+ {/* Record 객체로 매핑해주는 Object.entries() */}
+ {Object.entries(navItems).map(([key, cat]) => (
+
-
+ {/* NavLink의 active 속성을 활용 -> useLocation() 대체 가능 */}
+
(isActive ? "text-green-500" : "")} + > + {cat.label} + +
+ ))}
+
+ {/* 장바구니 페이지로 이동 */}
+
+
+ {cartAmount}
+ {/* 로그인 인증시 바뀌는 냅바 버튼 */}
+
+
+
+ );
+};
+
+export default Pending;
diff --git a/week10/src/components/common/Sidebar.tsx b/week10/src/components/common/Sidebar.tsx
new file mode 100644
index 00000000..fe86b532
--- /dev/null
+++ b/week10/src/components/common/Sidebar.tsx
@@ -0,0 +1,82 @@
+import { useEffect, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useDeleteUser } from "../../hooks/user/useDeleteUser";
+import toast from "react-hot-toast";
+import useLockBodyScroll from "../../hooks/common/sidebar/useLockBodyScroll";
+
+interface SidebarProps {
+ isOpen: boolean;
+ sidebarRef: React.RefObject
+ {buttons.map(({ label, value }) => (
+
+ ))}
+
+ );
+};
diff --git a/week10/src/components/google/GoogleCallback.tsx b/week10/src/components/google/GoogleCallback.tsx
new file mode 100644
index 00000000..9e414a29
--- /dev/null
+++ b/week10/src/components/google/GoogleCallback.tsx
@@ -0,0 +1,28 @@
+import { useEffect } from "react";
+import { useNavigate } from "react-router-dom";
+import { LOCAL_STORAGE_KEY } from "../../constants/key";
+import { useAuth } from "../../hooks/auth/useAuth";
+
+const GoogleLoginRedirect = () => {
+ const navigate = useNavigate();
+ const { setToken } = useAuth();
+
+ useEffect(() => {
+ const params = new URLSearchParams(window.location.search);
+ const accessToken = params.get(LOCAL_STORAGE_KEY.accessToken);
+ const refreshToken = params.get(LOCAL_STORAGE_KEY.refreshToken);
+
+ if (accessToken) {
+ // AuthContext와 localStorage 업데이트
+ setToken(accessToken, refreshToken || undefined);
+ const redirectPath =
+ localStorage.getItem(LOCAL_STORAGE_KEY.redirectPath) ?? "/mypage";
+ localStorage.removeItem(LOCAL_STORAGE_KEY.redirectPath);
+ navigate(redirectPath, { replace: true });
+ }
+ }, [setToken, navigate]);
+
+ return 구글 로그인
;
+};
+
+export default GoogleLoginRedirect;
diff --git a/week10/src/components/google/GoogleLoginButton.tsx b/week10/src/components/google/GoogleLoginButton.tsx
new file mode 100644
index 00000000..e1598594
--- /dev/null
+++ b/week10/src/components/google/GoogleLoginButton.tsx
@@ -0,0 +1,24 @@
+const GoogleLoginButton = () => {
+ const handleGoogleLogin = () => {
+ window.location.href =
+ import.meta.env.VITE_SERVER_API_URL + "/v1/auth/google/login";
+ };
+
+ return (
+ <>
+
+
+ );
+};
+
+export default GoogleLoginButton;
diff --git a/week10/src/components/icons/CheckIcon.tsx b/week10/src/components/icons/CheckIcon.tsx
new file mode 100644
index 00000000..c372bdde
--- /dev/null
+++ b/week10/src/components/icons/CheckIcon.tsx
@@ -0,0 +1,31 @@
+import type { SVGProps } from "react";
+
+export const CheckIcon = ({
+ color = "currentColor",
+ width = 24,
+ height = 24,
+ ...props
+}: SVGProps
+
+ );
+};
+
+export default memo(LpCard);
diff --git a/week10/src/components/lp/LpList.tsx b/week10/src/components/lp/LpList.tsx
new file mode 100644
index 00000000..d57eb698
--- /dev/null
+++ b/week10/src/components/lp/LpList.tsx
@@ -0,0 +1,134 @@
+import { useCallback, useMemo } from "react";
+import LpCard from "./LpCard";
+import { LpCardSkeleton } from "./skeleton/LpCardSkeleton";
+import { Order } from "../../types/common/enum";
+import useGetLpList from "../../hooks/lps/query/useGetLpList";
+import { useOnInView } from "react-intersection-observer";
+import Error from "../common/Error";
+import { useSearchStore } from "../../store/useSearchStore";
+import useDebounce from "../../hooks/common/useDebounce";
+import toast from "react-hot-toast";
+import useThrottle from "../../hooks/common/useThrottle";
+
+const LpList = ({ order }: { order: Order }) => {
+ // 검색어 상태 관리
+ const { search, searchQuery, isSearchOpen, setSearch, setSearchQuery } =
+ useSearchStore();
+ const debouncedSearch = useDebounce(search?.trim() ?? null, 500);
+
+ const {
+ data,
+ fetchNextPage,
+ hasNextPage,
+ isFetching,
+ isFetchingNextPage,
+ isError,
+ error,
+ isPending,
+ } = useGetLpList(order, 20, 0, isSearchOpen ? searchQuery : null);
+
+ // 다음 페이지 로드 스로틀링
+ const throttleFetchNextPage = useThrottle(fetchNextPage, 3_000);
+
+ // 무한 스크롤 추적
+ const trackingRef = useOnInView((inView) => {
+ if (inView && hasNextPage && !isFetchingNextPage) {
+ throttleFetchNextPage?.();
+ }
+ });
+
+ // 검색 핸들러
+ const handleSearch = useCallback(() => {
+ if (!debouncedSearch || debouncedSearch === "") {
+ setSearchQuery(null);
+ toast.error("검색어를 입력해주세요.", {
+ duration: 2000,
+ id: "search-error",
+ });
+ return;
+ }
+ setSearchQuery(debouncedSearch);
+ }, [debouncedSearch, setSearchQuery]);
+
+ // 엔터키 핸들러
+ const handleKeyUp = useCallback(
+ (e: React.KeyboardEvent
+ 
(e.currentTarget.src = "/src/assets/image.png")}
+ width={100}
+ height={100}
+ />
+
+
+
+
+ + {data.title} +
+
+
+ {formattedTime}
+ {/* 좋아요 섹션 */} +
+
+ {likeCount}
+
+ setSearch(e.target.value)}
+ onKeyUp={handleKeyUp}
+ />
+
+
+
+ )}
+ {/* 초기 스켈레톤 표시 */}
+
+ {/* 초기 스켈레톤 표시 */}
+ {showInitialSkeleton && !hasData
+ ? Array.from({ length: 10 }).map((_, index) => (
+
+
+
+ );
+};
+
+export default LpList;
diff --git a/week10/src/components/lp/LpModal.tsx b/week10/src/components/lp/LpModal.tsx
new file mode 100644
index 00000000..40ef05d2
--- /dev/null
+++ b/week10/src/components/lp/LpModal.tsx
@@ -0,0 +1,222 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { XIcon } from "../icons/XIcon";
+import useLockBodyScroll from "../../hooks/common/sidebar/useLockBodyScroll";
+import { useOnClickOutside } from "../../hooks/common/sidebar/useOnClickOutside";
+import usePostLp from "../../hooks/lps/mutation/usePostLp";
+import { uploadImage } from "../../apis/img";
+
+interface LpModalProps {
+ onClose?: () => void;
+ isOpen: boolean;
+}
+
+export function LpModal({ onClose, isOpen }: LpModalProps) {
+ const ModalRef = useRef
+ {/* 모달 카드 */}
+
+ );
+}
diff --git a/week10/src/components/lp/cart/CartDeleteModal.tsx b/week10/src/components/lp/cart/CartDeleteModal.tsx
new file mode 100644
index 00000000..64722ef5
--- /dev/null
+++ b/week10/src/components/lp/cart/CartDeleteModal.tsx
@@ -0,0 +1,49 @@
+import useLockBodyScroll from "../../../hooks/common/sidebar/useLockBodyScroll";
+import { useCartActions } from "../../../store/useCartStore";
+import { useModalActions, useModalInfo } from "../../../store/useModalStore";
+
+const CartDeleteModal = () => {
+ const { clearCart } = useCartActions();
+ const { isOpen } = useModalInfo();
+ const { closeModal } = useModalActions();
+
+ // 모니터 스크롤 방지
+ useLockBodyScroll(isOpen);
+
+ // 장바구니 초기화
+ const handleClearCart = () => {
+ closeModal();
+ clearCart();
+ };
+
+ // 모달 닫기
+ const handleCloseModal = () => {
+ closeModal();
+ };
+
+ if (!isOpen) return null;
+
+ return (
+
+ {/* 닫기 버튼 */}
+
+
+ {/* LP 이미지 영역 */}
+
+
+
+
+
+
+ {/* 입력 폼 영역 */}
+
+ {image && (
+
+
+ 
+
+ )}
+ fileInputRef.current?.click()}
+ className="h-44 w-44 cursor-pointer overflow-hidden rounded-full bg-black shadow-lg"
+ >
+ 
+
+
+
+ {/* LP Name */}
+
+
+ {/* 하단 Add LP 버튼 */}
+
+
+ setLpName(e.target.value)}
+ />
+
+
+ {/* LP Content */}
+
+ setLpContent(e.target.value)}
+ />
+
+
+ {/* LP Tag + Add 버튼 */}
+
+ setLpTagInput(e.target.value)}
+ onKeyUp={handleAddLpTag}
+ />
+
+
+
+ {lpTag.map((tag, i) => (
+
+
+ {tag}
+
+
+ ))}
+
+
+ );
+};
+
+export default CartDeleteModal;
diff --git a/week10/src/components/lp/cart/CartItem.tsx b/week10/src/components/lp/cart/CartItem.tsx
new file mode 100644
index 00000000..c2d4c6db
--- /dev/null
+++ b/week10/src/components/lp/cart/CartItem.tsx
@@ -0,0 +1,60 @@
+import { memo, useCallback } from "react";
+import { useCartActions } from "../../../store/useCartStore";
+import type { CartItem } from "../../../types/lps/cart";
+
+interface CartItemProps {
+ item: CartItem;
+}
+
+function CartItem({ item }: CartItemProps) {
+ const { increase, decrease, remove } = useCartActions();
+
+ const handleIncrease = useCallback(() => {
+ increase(item.id);
+ }, [increase, item.id]);
+
+ const handleDecrease = useCallback(() => {
+ if (item.amount === 1) {
+ remove(item.id);
+ return;
+ }
+ decrease(item.id);
+ }, [decrease, remove, item.id, item.amount]);
+
+ return (
+
+
+ 장바구니를 초기화하시겠습니까?
+
+
+
+
+
+ 
+
+
+
+
+
+ {item.title}
+{item.singer}
+{item.price}원
+ +
+
+ {item.amount}
+
+
+
+
+ );
+}
diff --git a/week10/src/components/lp/detail/EditSection.tsx b/week10/src/components/lp/detail/EditSection.tsx
new file mode 100644
index 00000000..b1b08813
--- /dev/null
+++ b/week10/src/components/lp/detail/EditSection.tsx
@@ -0,0 +1,101 @@
+import { useCallback } from "react";
+
+interface EditSectionProps {
+ title: string;
+ setTitle: (title: string) => void;
+ thumbnail: string;
+ setThumbnail: (thumbnail: string) => void;
+ content: string;
+ setContent: (content: string) => void;
+ tags: string[];
+ setTags: (tags: string[]) => void;
+ tagInput: string;
+ setTagInput: (tagInput: string) => void;
+}
+
+export default function EditSection({
+ title,
+ setTitle,
+ thumbnail,
+ setThumbnail,
+ content,
+ setContent,
+ setTags,
+ tagInput,
+ setTagInput,
+}: EditSectionProps) {
+ // 태그 인풋 변경 시 태그 배열 동기화
+ const handleTagChange = useCallback(
+ (e: React.ChangeEvent-
+ {items.map((item) => (
+
+ 총 결제 금액: {total}원
+
+ {isOpen &&
+
+
+
+
+
+ {/* 설명 인풋 */}
+
+ 
{
+ e.currentTarget.src = "/src/assets/image.png";
+ e.currentTarget.alt = "thumbnail";
+ }}
+ />
+
+
+ setThumbnail(e.target.value)}
+ placeholder="썸네일 이미지 URL"
+ />
+