diglog-project · typhoon0678 · Mar 8, 2025 · Mar 6, 2025 · Mar 6, 2025 · Mar 6, 2025
diff --git a/src/common/apis/post.tsx b/src/common/apis/post.tsx
@@ -1,12 +1,15 @@
 import axiosApi from "./AxiosApi.tsx";
-import {PostListRequest, PostRequest, PostSearchRequest, PostUpdateRequest} from "../types/post.tsx";
+import {PostFolderRequest, PostListRequest, PostRequest, PostSearchRequest, PostUpdateRequest} from "../types/post.tsx";
 import {postListRequestToParameter, postListSearchRequestToParameter} from "../util/url.tsx";
 
 export const createPost = async (postRequest: PostRequest) =>
     await axiosApi.post("/post", postRequest);
 
 export const updatePost = async (postUpdateRequest: PostUpdateRequest) =>
-    await axiosApi.patch(`/post`, postUpdateRequest);
+    await axiosApi.patch("/post", postUpdateRequest);
+
+export const updatePostFolder = async (postFolderRequest: PostFolderRequest) =>
+    await axiosApi.patch("/post/folder", postFolderRequest);
 
 export const deletePost = async (id: string) =>
     await axiosApi.patch(`/post/delete/${id}`);

diff --git a/src/common/types/blog.tsx b/src/common/types/blog.tsx
@@ -75,7 +75,7 @@ export const toFolderRequestList = (folderTypeList: FolderType[]) => {
 
 export interface PostListMemberRequest {
     username: string,
-    folderId: string | null,
+    folderIds: string[] | null,
     page: number,
     size: number,
 }
diff --git a/src/common/types/post.tsx b/src/common/types/post.tsx
@@ -3,6 +3,7 @@ import {PageResponse} from "./common.tsx";
 export interface PostRequest {
     title: string,
     content: string,
+    folderId: string | null,
     tagNames: string[],
     urls: string[],
 }
@@ -11,6 +12,7 @@ export interface PostUpdateRequest {
     id: string,
     title: string,
     content: string,
+    folderId: string | null,
     tagNames: string[],
     urls: string[],
 }
@@ -41,12 +43,22 @@ export interface PostResponse {
     title: string;
     content: string;
     username: string;
+    folder?: PostFolderResponse;
     tags: TagResponse[];
     createdAt: Date;
 }
 
+export interface PostFolderResponse {
+    id: string;
+    title: string;
+}
+
 export interface TagResponse {
     id: string;
     name: string;
 }
 
+export interface PostFolderRequest {
+    postIds: string[],
+    folderId: string | null,
+}
diff --git a/src/common/util/url.tsx b/src/common/util/url.tsx
@@ -22,10 +22,14 @@ export const commentListRequestToParameter = (commentListRequest: CommentListReq
 export const postListMemberRequestToParameter = (postListMemberRequest: PostListMemberRequest) => {
     let query = `?username=${postListMemberRequest.username}&page=${postListMemberRequest.page}&size=${postListMemberRequest.size}`;
 
-    if (postListMemberRequest.folderId) {
-        query += `&folderId=${postListMemberRequest.folderId}`;
+    if (!postListMemberRequest.folderIds) {
+        return query;
     }
 
+    postListMemberRequest.folderIds.forEach((folderId: string) => {
+        query += `&folderIds=${folderId}`;
+    });
+
     return query;
 }
 

diff --git a/src/components/common/Header.tsx b/src/components/common/Header.tsx
@@ -95,7 +95,7 @@ function Header() {
                                           className="w-full block px-4 py-2 text-gray-700 hover:bg-gray-100">
                                         게시글 작성
                                     </Link>
-                                    <Link to={`/blog/${loginState.username}`}
+                                    <Link to={`/blog/${loginState.username}?folder=`}
                                           className="w-full block px-4 py-2 text-gray-700 hover:bg-gray-100">
                                         내 블로그
                                     </Link>

diff --git a/src/components/folder/FolderSelectBox.tsx b/src/components/folder/FolderSelectBox.tsx
@@ -6,8 +6,8 @@ import {getFolderTitle} from "../../common/util/string.tsx";
 function FolderSelectBox({folders, depth = 0, selectedFolder, targetFolder, setTargetFolder, center}: {
     folders: FolderType[],
     depth?: number,
-    selectedFolder?: FolderType,
-    targetFolder: FolderType,
+    selectedFolder?: FolderType | null,
+    targetFolder: FolderType | null,
     setTargetFolder: (folder: FolderType) => void,
     center?: boolean,
 }) {
@@ -36,7 +36,7 @@ function FolderSelectBox({folders, depth = 0, selectedFolder, targetFolder, setT
             <button
                 className="w-full flex justify-between items-center gap-x-2 px-4 py-2 border border-gray-200 hover:bg-gray-50 hover:cursor-pointer"
                 onClick={handleFolderOpen}>
-                {targetFolder.title === "" ? "폴더 선택" : targetFolder.title}
+                {targetFolder ? targetFolder.title : "폴더 선택"}
                 <MdOutlineArrowDropDown/>
             </button>
             <div
@@ -58,7 +58,7 @@ function FolderSelectBox({folders, depth = 0, selectedFolder, targetFolder, setT
 function FolderSelectCard({folder, depth, selectedFolder, setTargetFolder, setFolderOpen}: {
     folder: FolderType,
     depth: number,
-    selectedFolder?: FolderType,
+    selectedFolder?: FolderType | null,
     setTargetFolder: (folder: FolderType) => void,
     setFolderOpen: (open: boolean) => void,
 }) {

diff --git a/src/components/post/TagCard.tsx b/src/components/post/TagCard.tsx
@@ -1,11 +1,11 @@
 import {TagResponse} from "../../common/types/post.tsx";
 
-function TagCard({tag, onClick}: { tag: TagResponse, onClick: (tagName: string) => void }) {
+function TagCard({tag, onClick}: { tag: TagResponse, onClick: () => void }) {
     return (
         <button
             className="border border-lime-50 shadow text-lime-700 rounded-4xl px-4 py-2 font-semibold text-sm
                transform transition-all hover:bg-lime-50 hover:text-lime-500 hover:cursor-pointer"
-            onClick={() => onClick(tag.name)}>
+            onClick={onClick}>
             {tag.name}
         </button>
     );

diff --git a/src/pages/blog/BlogPage.tsx b/src/pages/blog/BlogPage.tsx
@@ -115,6 +115,26 @@ function BlogPage() {
         setSelectedTagList([...selectedTagList, selectTag]);
     }
 
+    const handleSelectedFolder = (folder: FolderType) => {
+        setSelectedFolder(folder);
+        setPage(0);
+    }
+
+    const getSelectedFolders = (folder: FolderType | null) => {
+        if (!folder) {
+            return [];
+        }
+
+        const folderIds = [folder.id];
+
+        if (folder.subFolders.length > 0) {
+            folder.subFolders.forEach((subFolder: FolderType) => {
+                folderIds.push(...getSelectedFolders(subFolder));
+            });
+        }
+        return folderIds;
+    }
+
     useEffect(() => {
         // todo: 내 게시글 불러오기 api
         console.log(page, setPageInfo.toString());
@@ -133,6 +153,8 @@ function BlogPage() {
 
     useEffect(() => {
         navigate(`/blog/${username}?folder=${selectedFolder?.id || ""}`);
+        setPage(-1);
+        setPage(0);
     }, [selectedFolder]);
 
     useEffect(() => {
@@ -157,19 +179,26 @@ function BlogPage() {
                 setMember(res.data);
             })
             .catch(error => alert(error.response.data.message));
+    }, [username]);
+
+    useEffect(() => {
+        if (username === undefined) {
+            return;
+        }
 
         getMemberPosts({
             username: username,
-            folderId: null,
+            folderIds: getSelectedFolders(selectedFolder),
             page: page,
             size: pageInfo.size,
         })
             .then((res) => {
+                console.log(res.data.page);
                 setPosts(res.data.content);
                 setPageInfo(res.data.page);
             })
             .catch(error => error.response.data.message);
-    }, [username, page]);
+    }, [page, selectedFolder, username]);
 
     return (
         <BasicLayout>
@@ -202,7 +231,7 @@ function BlogPage() {
                             username={username}
                             profileUrl={member.profileUrl}
                             addTag={addTag}
-                            setSelectedFolder={setSelectedFolder}/>
+                            setSelectedFolder={handleSelectedFolder}/>
                     </div>
                 </div>
             </div>
@@ -218,7 +247,7 @@ function BlogPage() {
                     username={username}
                     profileUrl={member.profileUrl}
                     addTag={addTag}
-                    setSelectedFolder={setSelectedFolder}
+                    setSelectedFolder={handleSelectedFolder}
                     bgColor={"bg-gray-50"}
                     side={true}/>
             </div>

diff --git a/src/pages/post/PostPage.tsx b/src/pages/post/PostPage.tsx
@@ -45,10 +45,6 @@ function PostPage() {
             return;
         }
 
-        if (!confirm("댓글을 등록하시겠습니까?")) {
-            return;
-        }
-
         if (parentCommentId !== null) {
             parentCommentId = findParentCommentId(comments, parentCommentId);
         }
@@ -83,10 +79,6 @@ function PostPage() {
         return null;
     }
     const handleUpdateComment = (content: string, taggedUsername: string | null, originalComment: CommentType | null) => {
-        if (!confirm("댓글을 수정하시겠습니까?")) {
-            return;
-        }
-
         if (!originalComment) {
             alert("업데이트 할 댓글이 존재하지 않습니다.");
             return;
@@ -189,11 +181,15 @@ function PostPage() {
                 <div className="flex flex-col gap-y-8">
                     <div className="flex justify-between items-center">
                         <div className="flex-1 flex justify-center items-center gap-x-4">
-                            <Link to={`/blog/${post.username}`} className="text-xs">Home</Link>
-                            <div className="text-xs">{` > `}</div>
-                            <Link to={`/blog/${post.username}?folder=폴더`} className="text-xs">폴더</Link>
-                            <div>{` > `}</div>
-                            <div className="text-xs text-gray-600 max-w-96 md:max-w-192 break-words">{post.title}</div>
+                            <Link to={`/blog/${post.username}`} className="text-xs">
+                                Home
+                            </Link>
+                            {post.folder &&
+                                <div className="flex gap-x-4">
+                                    <div className="text-xs">{` > `}</div>
+                                    <Link to={`/blog/${post.username}?folder=${post.folder.id}`}
+                                          className="text-xs">{post.folder.title}</Link>
+                                </div>}
                         </div>
                     </div>
                     <div className="flex flex-row w-full justify-center text-center items-center gap-4">
@@ -211,7 +207,7 @@ function PostPage() {
                     <div className="flex flex-wrap justify-center items-center gap-4">
                         {post.tags.map(tag =>
                             <TagCard key={tag.id} tag={tag} onClick={() => {
-                                navigate(`/search?word=${tag.name}&option=태그`)
+                                navigate(`/search?keyword=${tag.name}&option=TAG&sort=createdAt&isDescending=true&tab=post`)
                             }}/>)}
                     </div>
                 </div>

diff --git a/src/pages/post/WritePage.tsx b/src/pages/post/WritePage.tsx
@@ -40,7 +40,7 @@ function WritePage() {
     });
     const [showTag, setShowTag] = useState(false);
 
-    const [targetFolder, setTargetFolder] = useState<FolderType>({id: crypto.randomUUID(), title: "", subFolders: []});
+    const [targetFolder, setTargetFolder] = useState<FolderType | null>(null);
     const [uploadCount, setUploadCount] = useState(0);
     const [exitPage, setExitPage] = useState(false);
 
@@ -59,11 +59,22 @@ function WritePage() {
         setPost({...post, tags: [...post.tags, post.inputTag], inputTag: ""});
     }
 
+    const getFolderId = (targetFolder: FolderType) => {
+        if (!targetFolder || targetFolder.id === "empty") {
+            return null;
+        }
+
+        return targetFolder.id;
+    }
     const handleSubmit = () => {
         if (uploadCount > 0) {
             alert("업로드 중인 이미지가 있습니다. 잠시만 기다려주세요.");
             return;
         }
+        if (!targetFolder) {
+            alert("폴더를 선택해주세요.");
+            return;
+        }
 
         setLoading(true);
 
@@ -72,13 +83,14 @@ function WritePage() {
         createPost({
             title: post.title,
             content: post.content,
+            folderId: getFolderId(targetFolder),
             tagNames: post.tags,
             urls: urls,
         })
             .then(() => {
                 alert("작성되었습니다.");
                 setExitPage(true);
-                navigate(`/blog/${loginState.username}`);
+                navigate(`/blog/${loginState.username}?folder=`);
             })
             .catch((error) => alert(error.response.data.message))
             .finally(() => setLoading(false));
@@ -89,8 +101,12 @@ function WritePage() {
             alert("업로드 중인 이미지가 있습니다. 잠시만 기다려주세요.");
             return;
         }
-
+        if (!targetFolder) {
+            alert("폴더를 선택해주세요.");
+            return;
+        }
         if (!id) return;
+
         setLoading(true);
 
         const urls: string[] = getImgUrls(post.content);
@@ -99,13 +115,14 @@ function WritePage() {
             id: id,
             title: post.title,
             content: post.content,
+            folderId: getFolderId(targetFolder),
             tagNames: post.tags,
             urls: urls,
         })
             .then(() => {
                 alert("수정되었습니다.");
                 setExitPage(true);
-                navigate(`/blog/${loginState.username}`);
+                navigate(`/blog/${loginState.username}?folder=`);
             })
             .catch((error) => alert(error.response.data.message))
             .finally(() => setLoading(false));
@@ -119,7 +136,7 @@ function WritePage() {
         deletePost(id)
             .then(() => {
                 alert("삭제되었습니다.");
-                navigate(`/blog/${loginState.username}`);
+                navigate(`/blog/${loginState.username}?folder=`);
             })
             .catch((error) => alert(error.response.data.message));
     }
@@ -151,6 +168,11 @@ function WritePage() {
     }, []);
 
     const folderData: FolderType[] = [
+        {
+            id: "empty",
+            title: "폴더 없음",
+            subFolders: [],
+        },
         {
             id: crypto.randomUUID(),
             title: faker.lorem.words(),
@@ -226,6 +248,11 @@ function WritePage() {
                     content: res.data.content,
                     tags: sortByName(res.data.tags.map((tag: TagResponse) => tag.name)),
                 });
+                setTargetFolder({
+                    id: res.data.folder.id,
+                    title: res.data.folder.title,
+                    subFolders: [],
+                });
             })
             .catch((error) => alert(error.response.data.message));