[week7/mission] Tag 추가 삭제 및 LP 게시글 생성 기능 추가

Author: OCJune

Juno/Week7/Week7_Mission1/src/App.tsx

@@ -14,8 +14,6 @@ import NotFoundPage from "./pages/NotFoundPage";
 import ProtectedLayout from "./layouts/ProtectedLayout";
 import GoogleLoginRedirectPage from "./pages/GoogleLoginRedirectPage";
 import { QueryClient, QueryClientProvider } from "@tanstack/react-query";
-import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
-import CreateLpPage from "./pages/CreateLpPage";
 import LpDetailPage from "./pages/LpDetailPage";
 
 // 1. 홈페이지
@@ -65,10 +63,6 @@ const protectedRoutes: RouteObject[] = [
         path: "my",
         element: <MyPage />,
       },
-      {
-        path: "createLp",
-        element: <CreateLpPage />,
-      },
     ],
   },
 ];

Juno/Week7/Week7_Mission1/src/apis/lp.ts

@@ -1,9 +1,11 @@
 import type { PaginationDto } from "../types/common";
 import type {
   RequestLpCommentsDto,
+  RequestLpDto,
   ResponseLikeLpDto,
   ResponseLpCommentsDto,
   ResponseLpDetailDto,
+  ResponseLpDto,
   ResponseLpListDto,
 } from "../types/lp";
 import { axiosInstance } from "./axios";
@@ -48,3 +50,11 @@ export const deleteLike = async (lpId: number): Promise<ResponseLikeLpDto> => {
 
   return data;
 };
+
+export const postLp = async (
+  requestLpDto: RequestLpDto
+): Promise<ResponseLpDto> => {
+  const { data } = await axiosInstance.post("v1/lps", requestLpDto);
+
+  return data;
+};

Juno/Week7/Week7_Mission1/src/components/LpModal.tsx

@@ -1,4 +1,7 @@
 import { useState } from "react";
+import TagCard from "./TagCard";
+import type { Tag } from "../types/lp";
+import usePostLp from "../hooks/mutations/usePostLp";
 
 interface LpModalProps {
   isOpen: boolean;
@@ -9,6 +12,31 @@ interface LpModalProps {
 const LpModal = ({ isOpen, onClose, toggle }: LpModalProps) => {
   const [name, setName] = useState("");
   const [content, setContent] = useState("");
+  const [thumnailFile, setThumnailFile] = useState<File | null>(null);
+  const [tagName, setTagName] = useState<string>("");
+  const [tags, setTags] = useState<Tag[]>([]);
+
+  const { mutate } = usePostLp();
+
+  const handlePostLp = () => {
+    mutate({
+      title: name,
+      content: content,
+      thumbnail: thumnailFile?.name, // 파일 경로를 파일 이름으로 대체
+      tags: tags.map((tag) => tag.name),
+      published: true,
+    });
+    onClose();
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0] || null;
+    setThumnailFile(file);
+  };
+
+  const deleteTag = (idToDelete: number) => {
+    setTags((prev) => prev.filter((tag) => tag.id !== idToDelete));
+  };
 
   return (
     <>
@@ -19,7 +47,7 @@ const LpModal = ({ isOpen, onClose, toggle }: LpModalProps) => {
         onClick={onClose}
       ></div>
       <div
-        className={`fixed inset-x-1/4 inset-y-1/6 rounded-2xl flex flex-col items-center space-y-4 box-border px-4 py-2 bg-gray-50 shadow-2xl z-40 ${
+        className={`fixed inset-x-1/4 inset-y-24 rounded-2xl flex flex-col items-center space-y-4 box-border px-4 py-2 bg-gray-50 shadow-2xl z-40 ${
           isOpen ? "opacity-100" : "opacity-0 pointer-events-none"
         }`}
       >
@@ -36,24 +64,60 @@ const LpModal = ({ isOpen, onClose, toggle }: LpModalProps) => {
           htmlFor="upload-lp-image"
           className="w-40 h-40 rounded-full bg-gray-500"
         ></label>
-        <input type="file" className="hidden" id="upload-lp-image" />
+        <input
+          type="file"
+          className="hidden"
+          id="upload-lp-image"
+          onChange={handleFileChange}
+          accept="image/*"
+        />
         <input
           type="text"
           onChange={(e) => setName(e.target.value)}
           value={name}
           placeholder="Lp Name"
-          className="pl-4 py-2 w-full border border-gray-950 rounded-xl"
+          className="pl-4 py-2 w-full border border-gray-950 rounded-lg"
         />
         <input
           type="text"
           value={content}
           onChange={(e) => setContent(e.target.value)}
           placeholder="Lp Content"
-          className="pl-4 py-2 w-full border border-gray-950 rounded-xl"
+          className="pl-4 py-2 w-full border border-gray-950 rounded-lg"
         />
+        <div className="flex w-full space-x-2">
+          <input
+            type="text"
+            value={tagName}
+            onChange={(e) => setTagName(e.target.value)}
+            placeholder="Lp Tag"
+            className="pl-4 py-2 w-full border border-gray-950 rounded-lg"
+          />
+          <button
+            disabled={tagName.length === 0}
+            className="cursor-pointer py-2 px-4 bg-gray-950 text-gray-50 rounded-lg disabled:bg-gray-400 disabled:cursor-not-allowed"
+            onClick={() => {
+              setTags((prev) => [...prev, { name: tagName, id: Date.now() }]);
+              setTagName("");
+            }}
+          >
+            Add
+          </button>
+        </div>
+        <div className="flex w-full space-x-2 overflow-x-scroll">
+          {tags.map((tag) => (
+            <TagCard
+              name={tag.name}
+              id={tag.id}
+              onDelete={deleteTag}
+              key={tag.id}
+            />
+          ))}
+        </div>
         <button
           disabled={name.length === 0 || content.length === 0}
-          className="cursor-pointer py-2 w-full bg-gray-950 text-gray-50 rounded-xl disabled:bg-gray-400 disabled:cursor-not-allowed"
+          className="cursor-pointer py-2 w-full bg-gray-950 text-gray-50 rounded-lg disabled:bg-gray-400 disabled:cursor-not-allowed"
+          onClick={handlePostLp}
         >
           Add Lp
         </button>

Juno/Week7/Week7_Mission1/src/components/TagCard.tsx

@@ -0,0 +1,22 @@
+interface TagProps {
+  name: string;
+  id: number;
+  onDelete: (id: number) => void;
+}
+
+const TagCard = ({ name, id, onDelete }: TagProps) => {
+  const handleDelete = () => {
+    onDelete(id);
+  };
+
+  return (
+    <div className="flex space-x-2 py-1 px-2 items-center justify-center border border-gray-950 rounded-lg">
+      <span>{name}</span>
+      <button onClick={handleDelete} className="cursor-pointer">
+        x
+      </button>
+    </div>
+  );
+};
+
+export default TagCard;

Juno/Week7/Week7_Mission1/src/hooks/mutations/usePostLp.ts

@@ -0,0 +1,17 @@
+import { useMutation } from "@tanstack/react-query";
+import { postLp } from "../../apis/lp";
+import { queryClient } from "../../App";
+import { QUERY_KEY } from "../../constants/key";
+
+const usePostLp = () => {
+  return useMutation({
+    mutationFn: postLp,
+    onSuccess: (data) => {
+      queryClient.invalidateQueries({
+        queryKey: [QUERY_KEY.lps, data.data.id],
+      });
+    },
+  });
+};
+
+export default usePostLp;

Juno/Week7/Week7_Mission1/src/layouts/ProtectedLayout.tsx

@@ -2,11 +2,14 @@ import { Navigate, Outlet } from "react-router-dom";
 import { useAuth } from "../context/AuthContext";
 import Header from "../components/Header";
 import Navbar from "../components/Navbar";
-import FloatingModalButton from "../components/FloatingLpModalButton";
 import useToggle from "../hooks/useToggle";
 
 function ProtectedLayout() {
-  const { isOpen, toggle, close } = useToggle();
+  const {
+    isOpen: isNavbarOpen,
+    toggle: toggleNavbar,
+    close: closeNavbar,
+  } = useToggle();
 
   const { accessToken } = useAuth();
 
@@ -18,12 +21,13 @@ function ProtectedLayout() {
 
   return (
     <div className="min-h-screen w-full flex flex-col bg-gray-50">
-      <Header toggleNavbar={toggle} />
+      <Header toggleNavbar={toggleNavbar} />
       <div className="flex flex-1">
-        <Navbar isOpen={isOpen} onClose={close} />
+        <Navbar isOpen={isNavbarOpen} onClose={closeNavbar} />
         <main className="relative flex-1 mt-15">
-          <Outlet />
-          <FloatingModalButton />
+          <div className="p-6">
+            <Outlet />
+          </div>
         </main>
       </div>
     </div>

Juno/Week7/Week7_Mission1/src/types/lp.ts

@@ -74,3 +74,22 @@ export type ResponseLikeLpDto = CommonResponse<{
   userId: number;
   lpId: number;
 }>;
+
+export type RequestLpDto = {
+  title: string;
+  content: string;
+  thumbnail?: string;
+  tags: string[];
+  published: boolean;
+};
+
+export type ResponseLpDto = CommonResponse<{
+  id: number;
+  title: string;
+  content: string;
+  thumnail: string;
+  published: boolean;
+  authorId: number;
+  updatedAt: string;
+  createdAt: string;
+}>;