+
+ {/* ── 콘텐츠 ── */}
+ {/* 검색 영역 */}
+
+
+
+
+ {isError && (
+
+ 데이터를 불러오는 중 오류가 발생했습니다.
+
+ )}
+
+
+ {/* 초기 로딩: 상단에 스켈레톤 */}
+ {isPending &&
+
+ {/* 바닥 감지 트리거 (invisible) */}
+
+ bottom trigger
+
+ {/* 마지막 페이지 안내 */}
+ {!hasNextPage && !isPending && lpItems.length > 0 && (
+
+ 모든 LP를 불러왔습니다 🎶
+
+ )}
+
+ {/* 검색 결과 없음 */}
+ {!isPending && lpItems.length === 0 && !isError && (
+
+ 검색 결과가 없습니다.
+
+ )}
+
+
+ {/* ── FAB ── */}
+
{
+ setModal(true)
+ }}
+ className="fixed bottom-8 right-8 w-14 h-14 rounded-full bg-pink-500 hover:bg-pink-400 text-white text-2xl shadow-xl hover:scale-110 transition-transform duration-200 flex items-center justify-center"
+ >
+ +
+
+ {modal && (
+ <>
+
+
setModal(false)}
+ className="absolute inset-0 bg-black/30 backdrop-blur-xs flex items-center justify-center">
+ {/* 여기까지 모달 창 밖에 배경 어둡게 하는 부분 */}
+
+ {/* 이제 흰 모달창 */}
+
+
+ {/* 모달 창 안 내용 */}
+ {/*
*/}
+
+ {/* 닫기 버튼 */}
+
setModal(false)}
+ className="mt-6 ml-90 font-bold text-lg text-black hover:text-gray-500 w-5 h-5">
+ X
+
+ {/* 레코드 이미지 */}
+
+
+
{
+ setLpName(e.target.value)
+ }}
+ placeholder="LP Name" className="rounded-lg mt-10 pl-2 w-100 h-10 text-black border-1" />
+
{
+ setLpContent(e.target.value)
+ }}
+ placeholder="LP Content" className="rounded-lg mt-5 pl-2 w-100 h-10 text-black border-1" />
+
+
+ Add
+
+
+
+
+ {tags.map((tag, index) => (
+
+ #{tag}
+ handleRemoveTag(index)}
+ className="text-zinc-400 hover:text-red-500 font-bold ml-1 text-[10px]"
+ >
+ ✕
+
+
+ ))}
+
+
+
+
+
{
+ if (!lpName.trim()) return alert("LP 이름을 입력해주세요.");
+ if (!lpContent.trim()) return alert("LP 내용을 입력해주세요.");
+ if (tags.length === 0) return alert("태그를 최소 1개 입력해주세요."); // ← 추가
+
+ const formData = new FormData();
+
+ formData.append("title", lpName);
+ formData.append("content", lpContent);
+ formData.append("published", "true");
+
+ if (thumbnailFile) {
+ formData.append("thumbnail", thumbnailFile);
+ }
+
+ tags.forEach((tag) => {
+ formData.append("tags", tag);
+ });
+
+ createLp(
+ {
+ title: lpName,
+ content: lpContent,
+ published: true,
+ thumbnailFile,
+ tags,
+ },
+ {
+ onSuccess: () => {
+ setModal(false);
+ setLpName("");
+ setLpContent("");
+ setThumbnail(null);
+ setThumbnailFile(null);
+ setTags([]);
+ },
+ onError: (error: any) => {
+ console.error("상세 오류:", error.response?.data);
+ alert("LP 생성 실패: " + JSON.stringify(error.response?.data));
+ }
+ }
+ );
+ }}
+
+ className="mt-8 w-80 h-12 rounded-lg bg-blue-600 px-4 py-2 text-sm font-semibold text-white hover:bg-blue-700">
+ Add Lp
+
+
+
+
+
+
+ )
+ }
+
+ );
+}
diff --git a/week08/Seed/seed8/src/pages/LoginPage.tsx b/week08/Seed/seed8/src/pages/LoginPage.tsx
new file mode 100644
index 0000000..16d98f8
--- /dev/null
+++ b/week08/Seed/seed8/src/pages/LoginPage.tsx
@@ -0,0 +1,89 @@
+import { UserSigninInformation, validateSignin } from "../utils/validate";
+import useForm from "../hooks/useForm";
+import { useNavigate } from "react-router-dom";
+import { useAuth } from "../context/AuthContext.tsx";
+import { useEffect } from "react";
+
+
+
+const LoginPage = () => {
+
+ const { login, accessToken } = useAuth();
+ const navigate = useNavigate();
+
+ useEffect(() => {
+ if (accessToken) {
+ navigate("/my");
+ }
+ }, [navigate, accessToken]);
+
+ const { values, errors, touched, getInputProps } =
+ useForm
({
+ initialValue: {
+ email: "",
+ password: "",
+ },
+ validate: validateSignin,
+ });
+
+ const handleSubmit = async () => {
+ await login(values);
+ };
+
+ const handleGoogleLogin = () => {
+ window.location.href = import.meta.env.VITE_APP_URL + "/v1/auth/google/login";
+
+ };
+ //오류가 하나라도 있거나, 입력값이 비어있으면 버튼을 비활성화
+ const isDisabled =
+ Object.values(errors || {}).some((error) => error.length > 0) || //오류가 있으면 true
+ Object.values(values).some((value) => value === ""); //입력값이 비어있으면 True
+
+ const handleBack = () => {
+ navigate(-1);
+ };
+ return
+
+
+ < 로그인
+
+ {/*
*/}
+
+ {errors?.email && touched?.email && (
+
이메일 에러
+ )}
+
+ {errors?.password && touched?.password && (
+
비밀번호 에러
+ )}
+
+ 로그인
+
+
+
+
+
구글 로그인
+
+
+
(
+ PAGINATION_ORDER.desc
+ );
+
+ const [commentInput, setCommentInput] = useState("");
+ const [touched, setTouched] = useState(false);
+
+ // 수정 상태
+ const [isEdit, setIsEdit] = useState(false);
+
+ const [editTitle, setEditTitle] = useState("");
+ const [editContent, setEditContent] = useState("");
+
+ const [thumbnailFile, setThumbnailFile] = useState(null);
+ const { mutate: updateLpMutate } = useUpdateLp(numericLpId);
+ const [previewImage, setPreviewImage] = useState("");
+ const fileInputRef = useRef(null);
+
+
+
+ // LP 상세 조회
+ const { data: lp, isPending: lpPending } = useGetLp(numericLpId);
+
+ // 수정 데이터 초기화
+ useEffect(() => {
+ if (lp?.data && !isEdit) {
+ setEditTitle(lp.data.title);
+ setEditContent(lp.data.content);
+ setPreviewImage(lp.data.thumbnail);
+ }
+ }, [lp, isEdit]);
+
+ // 댓글 무한스크롤
+ const {
+ data: commentsData,
+ isPending: commentsPending,
+ isFetchingNextPage,
+ hasNextPage,
+ fetchNextPage,
+ } = useInfiniteLpComments({
+ lpId: numericLpId,
+ order,
+ limit: 10,
+ });
+
+ // 바닥 감지
+ const { ref: bottomRef, inView } = useInView({
+ threshold: 0,
+ });
+
+ useEffect(() => {
+ if (inView && hasNextPage && !isFetchingNextPage) {
+ fetchNextPage();
+ }
+ }, [
+ inView,
+ hasNextPage,
+ isFetchingNextPage,
+ fetchNextPage,
+ ]);
+
+ // 댓글 목록
+ const comments =
+ commentsData?.pages.flatMap(
+ (page) => page.data.data ?? []
+ ) ?? [];
+
+ // 댓글 유효성
+ const isCommentEmpty =
+ commentInput.trim().length === 0;
+
+ const showError = touched && isCommentEmpty;
+
+ // 댓글 작성
+ const handleSubmitComment = async () => {
+ if (isCommentEmpty) {
+ setTouched(true);
+ return;
+ }
+
+ try {
+ await createComment({
+ lpId: numericLpId,
+ content: commentInput,
+ });
+
+ await queryClient.invalidateQueries({
+ queryKey: ["lpComments", numericLpId, order],
+ });
+
+ setCommentInput("");
+ setTouched(false);
+ } catch (error) {
+ console.error("댓글 작성 실패:", error);
+ }
+ };
+
+ // LP 수정
+ const handleUpdateLp = async () => {
+ try {
+ let imageUrl = previewImage;
+
+ // 새 이미지 선택한 경우 업로드
+ if (thumbnailFile) {
+ imageUrl = await uploadImage(thumbnailFile);
+ }
+
+ updateLpMutate(
+ {
+ lpId: numericLpId,
+ title: editTitle,
+ content: editContent,
+ thumbnail: imageUrl,
+ },
+ {
+ onSuccess: async () => {
+ await queryClient.invalidateQueries({
+ queryKey: ["lp", numericLpId],
+ });
+
+ setIsEdit(false);
+ },
+
+ onError: (error: any) => {
+ console.log(error.response?.data);
+ },
+ }
+ );
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+
+
+ return (
+
+
+ {/* LP 상세 */}
+ {lpPending ? (
+
+ ) : (
+ <>
+ {/* 제목 + 버튼 */}
+
+
+ {isEdit ? (
+
+ {editTitle}
+
+ )}
+
+ {
+ if (isEdit) {
+ handleUpdateLp();
+ } else {
+ setIsEdit(true);
+ }
+ }}
+ >
+ {isEdit ? "저장" : "수정"}
+
+
+
+ 삭제
+
+
+
+ {/* 이미지 */}
+
{
+ if (isEdit) {
+ fileInputRef.current?.click();
+ }
+ }}
+ className="relative w-60 h-60 flex justify-center items-center bg-pink-200 rounded-full mb-6 overflow-hidden cursor-pointer"
+ >
+
+
+ {isEdit && (
+
+ 이미지 수정
+
+ )}
+
+
{
+ if (e.target.files?.[0]) {
+ const file = e.target.files[0];
+
+ setThumbnailFile(file);
+ setPreviewImage(URL.createObjectURL(file));
+ }
+ }}
+ />
+
+
+ {/* 이미지 수정 */}
+ {isEdit && (
+
{
+ if (e.target.files?.[0]) {
+ const file = e.target.files[0];
+
+ setThumbnailFile(file);
+ setPreviewImage(URL.createObjectURL(file));
+ }
+ }}
+ className="mb-4"
+ />
+ )}
+
+ {/* 내용 */}
+ {isEdit ? (
+
+
+
+ {isHovered && (
+ 
+ ) : (
+ No Image
+ )}
+