+
+ )}
+
+ );
+}
\ No newline at end of file
diff --git a/week8/m1/src/constants/key.ts b/week8/m1/src/constants/key.ts
new file mode 100644
index 00000000..36f080f2
--- /dev/null
+++ b/week8/m1/src/constants/key.ts
@@ -0,0 +1,18 @@
+export const LOCAL_STORAGE_KEY = {
+ 'ACCESS_TOKEN': 'accessToken',
+ 'REFRESH_TOKEN': 'refreshToken',
+ 'USER_ID': 'userId',
+}
+
+export const QUERY_KEY = {
+ lps: 'lps',
+}
+
+export const NAV_ITEMS = [
+ { icon: "💿", label: "전체 LP" },
+ { icon: "⭐", label: "즐겨찾기" },
+ { icon: "🕒", label: "최근 재생" },
+ { icon: "🎸", label: "장르별" },
+ { icon: "📅", label: "연도별" },
+ { icon: "🔍", label: "찾기" },
+];
\ No newline at end of file
diff --git a/week8/m1/src/context/AuthContext.tsx b/week8/m1/src/context/AuthContext.tsx
new file mode 100644
index 00000000..2b7290dc
--- /dev/null
+++ b/week8/m1/src/context/AuthContext.tsx
@@ -0,0 +1,112 @@
+import { postSignin } from "../apis/auth";
+import { LOCAL_STORAGE_KEY } from "../constants/key";
+import { useLocalStorage } from "../hooks/useLocalStorage";
+import { type ReqSignInDto } from "../types/auth";
+import { postLogout, deleteAccount as deleteAccountApi } from "../apis/auth";
+import { createContext, useState, useContext, type PropsWithChildren } from "react";
+
+interface AuthContextType {
+ isAuthenticated: boolean;
+ accessToken: string | null;
+ refreshToken: string | null;
+ userId: number | null;
+ login: (signInData: ReqSignInDto) => Promise
+
+
+ ⚠️
+
+
+ {withdrawMutation.isError && (
+ + 정말 탈퇴하시겠습니까? +
++ 탈퇴 시 모든 데이터가 삭제되며 복구할 수 없습니다. +
++ 탈퇴 처리 중 오류가 발생했습니다. +
+ )} + +
+
+
+
+
+
+
+ {/* 헤더 */}
+
+
+ {/* 사이드바 */}
+ setSidebarOpen(false)} />
+
+ {/* 페이지 콘텐츠 */}
+
+
+
+
+
+ );
+}
\ No newline at end of file
diff --git a/week8/m1/src/layouts/PrivateLayout.tsx b/week8/m1/src/layouts/PrivateLayout.tsx
new file mode 100644
index 00000000..519b919c
--- /dev/null
+++ b/week8/m1/src/layouts/PrivateLayout.tsx
@@ -0,0 +1,56 @@
+import { Outlet, useNavigate, Navigate } from "react-router-dom";
+import { useAuth } from "../context/AuthContext";
+import { getMyInfo } from "../apis/auth";
+import { useState, useEffect } from "react";
+import type { ResMyInfoDto } from "../types/auth";
+
+const PrivateLayout = () => {
+ const navigate = useNavigate();
+ const {accessToken, logout} = useAuth();
+
+ const handleLogout = async () => {
+ await logout();
+ navigate("/");
+ }
+
+ const [data, setData] = useState
+
+
+
+
+ )
+}
+
+export default PrivateLayout;
\ No newline at end of file
diff --git a/week8/m1/src/main.tsx b/week8/m1/src/main.tsx
new file mode 100644
index 00000000..bef5202a
--- /dev/null
+++ b/week8/m1/src/main.tsx
@@ -0,0 +1,10 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+
+createRoot(document.getElementById('root')!).render(
+
+ 구글 로그인 리다이렉트 페이지
+
+ );
+}
+export default GoogleLoginRedirect;
\ No newline at end of file
diff --git a/week8/m1/src/pages/Home.tsx b/week8/m1/src/pages/Home.tsx
new file mode 100644
index 00000000..85095824
--- /dev/null
+++ b/week8/m1/src/pages/Home.tsx
@@ -0,0 +1,575 @@
+import { useState, useEffect, useRef, useCallback } from "react";
+import { useNavigate } from "react-router-dom";
+import { useInfiniteQuery, useMutation, useQueryClient } from "@tanstack/react-query";
+import axios from "axios";
+import { postLp, uploadImage } from "../apis/lp";
+import type { ReqCreateLpDto } from "../types/lp";
+import { useDebounce } from "../hooks/useDebounce";
+
+interface Tag { id: number; name: string; }
+interface Likes { id: number; userId: number; }
+interface Lp {
+ id: number; title: string; content: string; thumbnail: string;
+ published: boolean; authorId: number; createdAt: Date; updatedAt: Date;
+ tags: Tag[]; likes: Likes[];
+}
+
+interface LpPage {
+ data: Lp[];
+ nextCursor: number | null;
+}
+
+type SortOrder = "newest" | "oldest";
+
+const fileToBase64 = (file: File): Promise
+ {Array.from({ length: count }).map((_, i) =>
+);
+
+const GridError = ({ onRetry }: { onRetry: () => void }) => (
+
+ 💿
+
+);
+
+// ── LP 카드 ────────────────────────────────────────────
+const LpCard = ({ lp, onClick }: { lp: Lp; onClick: () => void }) => {
+ const [hovered, setHovered] = useState(false);
+
+ return (
+ 데이터를 불러오지 못했습니다.
+ + setHovered(true)}
+ onMouseLeave={() => setHovered(false)}
+ onClick={onClick}
+ >
+ {lp.thumbnail ? (
+ 
+ ) : (
+
+ );
+};
+// ── LP 작성 모달 ───────────────────────────────────────
+interface CreateLpModalProps {
+ onClose: () => void;
+}
+
+const CreateLpModal = ({ onClose }: CreateLpModalProps) => {
+ const queryClient = useQueryClient();
+
+ const [title, setTitle] = useState("");
+ const [content, setContent] = useState("");
+ const [published, setPublished] = useState(true);
+ const [thumbnailFile, setThumbnailFile] = useState
+
+ )}
+
+
+
+
+
+ {!lp.published && hovered && (
+ 미발행
+ )}
+ {hovered && (
+
+ ❤️ {lp.likes.length}
+
+ )}
+
+
+
+ {lp.title}
+{lp.content}
+ {lp.tags.length > 0 && ( +
+ {lp.tags.slice(0, 3).map((tag) => (
+
+ #{tag.name}
+
+ ))}
+ {lp.tags.length > 3 && (
+
+ +{lp.tags.length - 3}
+
+ )}
+
+ )}
+ + {new Date(lp.createdAt).toLocaleDateString("ko-KR", { year: "numeric", month: "short", day: "numeric" })} +
+
+
+ {/* 헤더 */}
+
+
+
+ {/* 썸네일 */}
+ 새 LP 추가
+ +
+
+ {thumbnailPreview && (
+ 
+ )}
+
+
+
+ {/* 제목 */}
+
+
+ setTitle(e.target.value)}
+ placeholder="LP 제목을 입력하세요"
+ className="w-full rounded-lg border px-3 py-2 text-sm outline-none transition-colors"
+ style={{ borderColor: "#e0e9f8", color: "#1e738a" }} // 기본 테두리와 텍스트 색상
+ onFocus={(e) => ((e.currentTarget as HTMLElement).style.borderColor = "#3bf6f0")} // 포커스 시 테두리 색상 변경
+ onBlur={(e) => ((e.currentTarget as HTMLElement).style.borderColor = "#e0e9f8")}
+ />
+
+
+ {/* 내용 */}
+
+
+