From 58edcbd909ebea952a90cded6ba706c42084f808 Mon Sep 17 00:00:00 2001
From: Chaeyeon1 <66813821+Chaeyeon1@users.noreply.github.com>
Date: Thu, 30 Nov 2023 02:42:21 +0900
Subject: [PATCH 1/8] =?UTF-8?q?Github=20=ED=8E=98=EC=9D=B4=EC=A7=80?=
 =?UTF-8?q?=EB=93=A4=20=EA=B5=AC=ED=98=84?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/api/github-api.ts                  | 13 +--
 client/src/api/index.ts                       |  2 +-
 client/src/api/pr-api.ts                      | 14 ++-
 client/src/api/write-api.ts                   |  8 +-
 .../home/[categoryId]/[postId]/page.tsx       | 21 ++++-
 .../[blogName]/prList/[categoryId]/page.tsx   | 56 +++++++-----
 .../components/DND/CreateCategoryModal.tsx    | 85 ++++++++++---------
 client/src/components/DND/DragAndDrop.tsx     | 43 +++++-----
 client/src/components/Github/Github.tsx       | 49 ++++++++---
 client/src/components/Layout/FullLayout.tsx   |  7 +-
 client/src/constant/common.ts                 |  4 +-
 client/src/types/dto.ts                       | 38 ++++++++-
 12 files changed, 225 insertions(+), 115 deletions(-)

diff --git a/client/src/api/github-api.ts b/client/src/api/github-api.ts
index 03f63d8a..a6079640 100644
--- a/client/src/api/github-api.ts
+++ b/client/src/api/github-api.ts
@@ -1,4 +1,4 @@
-import { RepositoryParams } from '@/types/dto';
+import { Repository, RepositoryParams } from '@/types/dto';
 import { defaultInstance } from '.';
 import { useQuery } from '@tanstack/react-query';
 
@@ -9,14 +9,17 @@ export const getRepositoryApi = async () => {
 };
 
 export const useGetRepositoryQuery = () => {
-  const { isLoading, error, data } = useQuery([`repository`], () => getRepositoryApi());
+  const {
+    isLoading,
+    error,
+    data: backendData,
+  } = useQuery([`repository`], () => getRepositoryApi());
+  const data: Repository = backendData;
   return { data, isLoading, error };
 };
 
 export const PostRepository = async (body: RepositoryParams) => {
-  const { data } = await defaultInstance.put('/repository', {
-    body,
-  });
+  const { data } = await defaultInstance.post('/repository', body);
 
   return data;
 };
diff --git a/client/src/api/index.ts b/client/src/api/index.ts
index 837d1b97..1062c263 100644
--- a/client/src/api/index.ts
+++ b/client/src/api/index.ts
@@ -8,7 +8,7 @@ const axiosApi = (url: string, data?: any) => {
   if (typeof window !== 'undefined') {
     token = localStorage.getItem('token');
   }
-  console.log(token);
+
   const instance = axios.create({
     baseURL: url,
     withCredentials: true,
diff --git a/client/src/api/pr-api.ts b/client/src/api/pr-api.ts
index f9411738..9d150011 100644
--- a/client/src/api/pr-api.ts
+++ b/client/src/api/pr-api.ts
@@ -1,4 +1,4 @@
-import { IPRParams } from '@/types/dto';
+import { IPRParams, IPostedPost, IUnPostedPost } from '@/types/dto';
 import { defaultInstance } from '.';
 import { useQuery } from '@tanstack/react-query';
 
@@ -9,7 +9,10 @@ export const getPRApi = async (params: IPRParams) => {
 };
 
 export const useGetPRQuery = (params: IPRParams) => {
-  const { isLoading, error, data } = useQuery([`prList`], () => getPRApi(params));
+  const { isLoading, error, data: backendData } = useQuery([`prList`], () => getPRApi(params));
+
+  const data: IPostedPost = backendData;
+
   return { data, isLoading, error };
 };
 
@@ -20,6 +23,11 @@ export const getPRUnPostedApi = async (params: IPRParams) => {
 };
 
 export const useGetPRUnpostedQuery = (params: IPRParams) => {
-  const { isLoading, error, data } = useQuery([`prUnpostedList`], () => getPRUnPostedApi(params));
+  const {
+    isLoading,
+    error,
+    data: backendData,
+  } = useQuery([`prUnpostedList`], () => getPRUnPostedApi(params));
+  const data: IUnPostedPost = backendData;
   return { data, isLoading, error };
 };
diff --git a/client/src/api/write-api.ts b/client/src/api/write-api.ts
index c95ce054..3083eefd 100644
--- a/client/src/api/write-api.ts
+++ b/client/src/api/write-api.ts
@@ -1,6 +1,6 @@
 import { useQuery } from '@tanstack/react-query';
 import { defaultInstance } from '.';
-import { ITemplateDetailParams, ITemporaryDetailParams } from '@/types/dto';
+import { IRemovePostParams, ITemplateDetailParams, ITemporaryDetailParams } from '@/types/dto';
 
 export const PostWriteApi = async (body: FormData) => {
   const { data } = await defaultInstance.post('/post', body, {
@@ -22,6 +22,12 @@ export const UpdateWriteApi = async (body: FormData) => {
   return data;
 };
 
+export const DeleteWriteApi = async (params: IRemovePostParams) => {
+  const { data } = await defaultInstance.delete('/post', { params });
+
+  return data;
+};
+
 const GetTemplateApi = async () => {
   const { data } = await defaultInstance.get(`/template`);
 
diff --git a/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx b/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
index 726fdd21..c31cbe48 100644
--- a/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
+++ b/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
@@ -44,6 +44,8 @@ import CloseIcon from '@mui/icons-material/Close';
 import Image from 'next/image';
 import FootPrintAnimation from '@/components/FootPrint/FootPrintAnimation';
 import { usegetblogIdQuery } from '@/api/readme-api';
+import { DeleteWriteApi } from '@/api/write-api';
+import { enqueueSnackbar } from 'notistack';
 
 const page = ({ params }: { params: { blogName: string; categoryId: string; postId: string } }) => {
   const { data: blogIdData } = usegetblogIdQuery({ blogUrl: params.blogName });
@@ -131,6 +133,20 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
     setBlogId(blogIdData);
   }, [sidebarData, postData, introduceData, replyData, blogIdData]);
 
+  const deleteWritePrQuery = useMutation(DeleteWriteApi, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['postData']);
+      enqueueSnackbar({ message: '게시글 삭제가 완료되었습니다.', variant: 'success' });
+    },
+    onError: () => {
+      enqueueSnackbar({ message: '에러가 발생하였습니다.', variant: 'error' });
+    },
+  });
+
+  const deletePrPostOnClick = (postId: number) => {
+    deleteWritePrQuery.mutate({ postId });
+  };
+
   //댓글 정렬기준
   const [anchorEl, setAnchorEl] = React.useState<null | HTMLElement>(null);
   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
@@ -139,7 +155,6 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
   const handleClose = () => {
     setAnchorEl(null);
   };
-  
 
   return (
     <Stack>
@@ -190,7 +205,9 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
                   <PageLink href={`/write/update/${params.categoryId}/${params.postId}`}>
                     <Button>수정</Button>
                   </PageLink>
-                  <Button color="error">삭제</Button>
+                  <Button onClick={() => deletePrPostOnClick(Number(params?.postId))} color="error">
+                    삭제
+                  </Button>
                 </Stack>
               </Stack>
             </Stack>
diff --git a/client/src/app/[blogName]/prList/[categoryId]/page.tsx b/client/src/app/[blogName]/prList/[categoryId]/page.tsx
index 0f98a6d1..72381198 100644
--- a/client/src/app/[blogName]/prList/[categoryId]/page.tsx
+++ b/client/src/app/[blogName]/prList/[categoryId]/page.tsx
@@ -11,10 +11,27 @@ import Image from 'next/image';
 import React from 'react';
 import EmptyContent from '../../../../../public/assets/box.png';
 import Complete from '../../../../../public/assets/complete-icon.svg';
+import { useMutation, useQueryClient } from '@tanstack/react-query';
+import { DeleteWriteApi } from '@/api/write-api';
+import { enqueueSnackbar } from 'notistack';
 
 function page({ params }: { params: { categoryId: string } }) {
   const { data: postedData } = useGetPRQuery({ categoryId: Number(params.categoryId) });
   const { data: unPostedData } = useGetPRUnpostedQuery({ categoryId: Number(params.categoryId) });
+  const queryClient = useQueryClient();
+  const deleteWritePrQuery = useMutation(DeleteWriteApi, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['prList']);
+      enqueueSnackbar({ message: 'PR 삭제가 완료되었습니다.', variant: 'success' });
+    },
+    onError: () => {
+      enqueueSnackbar({ message: '에러가 발생하였습니다.', variant: 'error' });
+    },
+  });
+
+  const deletePrPostOnClick = (postId: number) => {
+    deleteWritePrQuery.mutate({ postId });
+  };
 
   return (
     <CenterContent maxWidth="1080px">
@@ -22,9 +39,9 @@ function page({ params }: { params: { categoryId: string } }) {
         작성하지 않은 PR
       </Stack>
       <Stack p={2} direction="row" spacing={4} overflow={'scroll'}>
-        {unPostedData?.map((unPost: { id: number }, i: number) => {
+        {unPostedData?.prUnpostedDtos?.prUnpostedDtos?.map((unPost) => {
           return (
-            <PageLink key={i} href={`/write/pr/${i}`}>
+            <PageLink key={unPost.prId} href={`/write/pr/${unPost.prId}`}>
               <Stack
                 sx={{
                   transition: 'all .35s ease-in-out',
@@ -41,17 +58,6 @@ function page({ params }: { params: { categoryId: string } }) {
                   <Stack color="#000000" fontSize="20px" fontWeight="bold">
                     #77
                   </Stack>
-                  {/* FIXME : 이미지 수정해야함. */}
-                  {/* <img
-                style={{
-                  width: '30px',
-                  height: '30px',
-                  borderRadius: '50%',
-                  cursor: 'pointer',
-                }}
-                src="https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2Foriginals%2Fe4%2F9a%2Ff8%2Fe49af87c36b78490745115cc14b5a80e.gif&type=ff332_332"
-                alt="profileImage"
-              /> */}
                 </Stack>
                 <Stack
                   color="#000000"
@@ -60,7 +66,7 @@ function page({ params }: { params: { categoryId: string } }) {
                   textOverflow="ellipsis"
                   display="inline"
                   whiteSpace="nowrap">
-                  로딩구현 ㅏㅁㅇ나러ㅏㅇㅁㄹ ㄴ아 ㄴㅇ라ㅓ ㄴ ㄹ
+                  {unPost.prTitle}
                 </Stack>
               </Stack>
             </PageLink>
@@ -85,20 +91,24 @@ function page({ params }: { params: { categoryId: string } }) {
       <Stack margin="40px 0px 8px 0px" fontSize="24px">
         작성한 PR 목록
       </Stack>
-      {postedData?.prPostedDtos?.prPostedDtos ||
-      postedData?.prPostedDtos?.prPostedDtos?.length > 0 ? (
-        postedData.prPostedDtos.prPostedDtos?.map((post: { id: number }, i: number) => {
+      {postedData?.prPostedDtos?.prPostedDtos?.length > 0 ? (
+        postedData.prPostedDtos.prPostedDtos?.map((post) => {
           return (
             <List
-              key={i}
+              key={post?.postId}
               width="100%"
-              content={'asdf'}
+              content={post?.prTitle}
               buttonAction={
                 <Stack direction="row">
-                  <Button size="small" color="primary">
-                    수정
-                  </Button>
-                  <Button size="small" color="error">
+                  <PageLink href={`/write/pr/update/${post.postId}`}>
+                    <Button size="small" color="primary">
+                      수정
+                    </Button>
+                  </PageLink>
+                  <Button
+                    onClick={() => deletePrPostOnClick(post.postId)}
+                    size="small"
+                    color="error">
                     삭제
                   </Button>
                 </Stack>
diff --git a/client/src/components/DND/CreateCategoryModal.tsx b/client/src/components/DND/CreateCategoryModal.tsx
index 19ead622..e1dc8743 100644
--- a/client/src/components/DND/CreateCategoryModal.tsx
+++ b/client/src/components/DND/CreateCategoryModal.tsx
@@ -6,15 +6,15 @@ import ModalButton from '../Modal/ModalButton';
 import { ModalType } from '@/types/common';
 import Button from '../Button/Button';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
-import {  PostCategoryApi } from '@/api/category-api';
+import { PostCategoryApi } from '@/api/category-api';
 import CheckIcon from '@mui/icons-material/Check';
 import CloseIcon from '@mui/icons-material/Close';
 
 function CreateCategoryModal({ open, onClose }: ModalType) {
   const queryClient = useQueryClient();
   const [categoryName, setCategoryName] = useState('');
-  const [repositoryUrl, setRepositoryUrl] = useState('');
-  const [isPrCategory, setIsPrCategory] = useState<boolean>(Boolean);
+  const [, setRepositoryUrl] = useState('');
+  const [, setIsPrCategory] = useState<boolean>(Boolean);
   const postCategoryQuery = useMutation(PostCategoryApi, {
     onSuccess() {
       queryClient.invalidateQueries(['guestbook']);
@@ -23,14 +23,13 @@ function CreateCategoryModal({ open, onClose }: ModalType) {
   const postCategoryClick = () => {
     const newCategoryBody = {
       categoryName: categoryName,
-      isPrCategory: isPrCategory,
-      repositoryUrl: repositoryUrl,
+      isPrCategory: false,
+      repositoryUrl: '',
     };
     postCategoryQuery.mutate(newCategoryBody);
     onClose();
   };
 
-
   return (
     <Modal open={open} onClose={onClose}>
       <ModalTitle fontSize="24px" fontWeight="bold">
@@ -38,55 +37,57 @@ function CreateCategoryModal({ open, onClose }: ModalType) {
       </ModalTitle>
       <ModalContent sx={{ '&&.MuiDialogContent-root': { paddingTop: '0px' } }}>
         <Stack width="600px" spacing={5}>
-            <Stack direction="row" alignItems="center" spacing={3}>
-                <Stack fontSize="18px" fontWeight="bold">
-                  카테고리 이름 :
-                </Stack>
-                <TextField variant="standard" onChange={(e) => {
-                    setCategoryName(e.target.value);
-                    }} 
-                />
+          <Stack direction="row" alignItems="center" spacing={3}>
+            <Stack fontSize="18px" fontWeight="bold">
+              카테고리 이름 :
             </Stack>
-          <Stack flexDirection='row' fontSize="18px" fontWeight="bold">
-            깃허브 연동 여부 : 
-                <Stack flexDirection='row' marginLeft='10px'>
-                    <Button
-                      sx={{minWidth: '36px', height: '36px', padding: '0'}}
-                      onClick={() => {
-                        setIsPrCategory(true);
-                      }}
-                      color="success">
-                      <CheckIcon />
-                    </Button>
+            <TextField
+              variant="standard"
+              onChange={(e) => {
+                setCategoryName(e.target.value);
+              }}
+            />
+          </Stack>
+          <Stack flexDirection="row" fontSize="18px" fontWeight="bold">
+            깃허브 연동 여부 :
+            <Stack flexDirection="row" marginLeft="10px">
+              <Button
+                sx={{ minWidth: '36px', height: '36px', padding: '0' }}
+                onClick={() => {
+                  setIsPrCategory(true);
+                }}
+                color="success">
+                <CheckIcon />
+              </Button>
 
-                    <Button
-                      sx={{minWidth: '36px', height: '36px', padding: '0'}}
-                      onClick={() => {
-                        setIsPrCategory(false);
-                      }}
-                      color="error">
-                      <CloseIcon />
-                    </Button>
-                </Stack>
+              <Button
+                sx={{ minWidth: '36px', height: '36px', padding: '0' }}
+                onClick={() => {
+                  setIsPrCategory(false);
+                }}
+                color="error">
+                <CloseIcon />
+              </Button>
+            </Stack>
           </Stack>
           <Stack direction="row" alignItems="center" spacing={3}>
             <Stack fontSize="18px" fontWeight="bold">
               레포지토리 URL :
             </Stack>
-            <TextField variant="standard" onChange={(e) => {
-              setRepositoryUrl(e.target.value);
-            }} />
+            <TextField
+              variant="standard"
+              onChange={(e) => {
+                setRepositoryUrl(e.target.value);
+              }}
+            />
           </Stack>
         </Stack>
       </ModalContent>
       <ModalActions>
-        <ModalButton
-          onClose={onClose}
-          action={{ content: '생성', action: postCategoryClick }}
-        />
+        <ModalButton onClose={onClose} action={{ content: '생성', action: postCategoryClick }} />
       </ModalActions>
     </Modal>
   );
 }
 
-export default CreateCategoryModal;
\ No newline at end of file
+export default CreateCategoryModal;
diff --git a/client/src/components/DND/DragAndDrop.tsx b/client/src/components/DND/DragAndDrop.tsx
index 168eec93..f11724f4 100644
--- a/client/src/components/DND/DragAndDrop.tsx
+++ b/client/src/components/DND/DragAndDrop.tsx
@@ -18,6 +18,7 @@ import CreateCategoryModal from './CreateCategoryModal';
 type Footprint = {
   categoryId: number;
   categoryName: string;
+  isPrCategory: boolean;
   postTitleDtos: {
     postId: number;
     title: string;
@@ -37,7 +38,7 @@ function DragAndDrop({ rightContainer, footprintList, blogName }: DragAndDropPro
   const [createCategoryOpen, setCreateCategoryOpen] = useState(false);
   const [open, setOpen] = useState(false);
   const [categoryId, setCategoryId] = useState(0);
-  const [paramsCategoryId, setParamsCategoryId] = useState(Number)
+  const [paramsCategoryId, setParamsCategoryId] = useState(Number);
 
   const router = useRouter();
   useEffect(() => {
@@ -98,27 +99,28 @@ function DragAndDrop({ rightContainer, footprintList, blogName }: DragAndDropPro
                               </PageLink>
                             </IconButton>
                           </Stack>
-                          {/* FIXME : 레포지토리 연동 여부 받아와야 함 */}
-                          {
-                            <>
-                              <PageLink
-                                onClick={() => {
-                                  setCategoryId(category.categoryId);
-                                }}
-                                href={`${blogName}/prList/${category.categoryId}`}>
-                                <Stack sx={{ cursor: 'pointer' }} pl={4} py={1}>
-                                  PR 연동
-                                </Stack>
-                              </PageLink>
-                              <Stack
-                                onClick={() => setOpen(true)}
-                                sx={{ cursor: 'pointer' }}
-                                pl={4}
-                                py={1}>
+                          {category?.isPrCategory ? (
+                            <PageLink
+                              onClick={() => {
+                                setCategoryId(category.categoryId);
+                              }}
+                              href={`/${blogName}/prList/${category.categoryId}`}>
+                              <Stack sx={{ cursor: 'pointer' }} pl={4} py={1}>
                                 PR 연동
                               </Stack>
-                            </>
-                          }
+                            </PageLink>
+                          ) : (
+                            <Stack
+                              onClick={() => {
+                                setOpen(true);
+                                setCategoryId(category.categoryId);
+                              }}
+                              sx={{ cursor: 'pointer' }}
+                              pl={4}
+                              py={1}>
+                              PR 연동
+                            </Stack>
+                          )}
                           <Stack
                             sx={{
                               padding: '8px',
@@ -174,7 +176,6 @@ function DragAndDrop({ rightContainer, footprintList, blogName }: DragAndDropPro
                     </Droppable>
                   );
                 })}
-                
               </Stack>
               <Droppable droppableId="right-droppable">
                 {(provided) => {
diff --git a/client/src/components/Github/Github.tsx b/client/src/components/Github/Github.tsx
index d1b23fe4..ed38166a 100644
--- a/client/src/components/Github/Github.tsx
+++ b/client/src/components/Github/Github.tsx
@@ -1,10 +1,12 @@
 /* eslint-disable @typescript-eslint/no-explicit-any */
-import React from 'react';
+import React, { useState } from 'react';
 import Modal from '../Modal/Modal';
 import { ModalTitle } from '../Modal/Modal.style';
 import { PostRepository, useGetRepositoryQuery } from '@/api/github-api';
-import { Stack } from '@mui/material';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
+import List from '../List/List';
+import Button from '../Button/Button';
+import { Stack } from '@mui/material';
 
 function Github({
   open,
@@ -17,6 +19,7 @@ function Github({
 }) {
   const queryClient = useQueryClient();
   const { data: datas } = useGetRepositoryQuery();
+  const [clickList, setClickList] = useState<number>(0);
 
   const putAllowFriendIdCreateQuery = useMutation(PostRepository, {
     onSuccess: () => {
@@ -25,17 +28,37 @@ function Github({
   });
   return (
     <Modal open={open} onClose={onClose}>
-      <ModalTitle>Repository 선택</ModalTitle>
-      {/* FIXME : 백엔드 타입 알게 되면 수정해야함 */}
-      {datas?.repository?.map((data: any, i: any) => {
-        return (
-          <Stack
-            onClick={() => putAllowFriendIdCreateQuery.mutate({ category: categoryId, repo: i })}
-            key={i}>
-            {data}
-          </Stack>
-        );
-      })}
+      <Stack pr={2}>
+        <Stack direction="row" alignItems="flex-end" height="100%" justifyContent="space-between">
+          <ModalTitle>Repository 선택</ModalTitle>
+          <Button
+            onClick={() => {
+              putAllowFriendIdCreateQuery.mutate({
+                categoryId,
+                repo: datas?.repository[clickList],
+              });
+            }}
+            size="medium"
+            variant="outlined"
+            color="primary">
+            선택
+          </Button>
+        </Stack>
+        <Stack maxHeight="300px" py={4}>
+          {datas?.repository?.map((repo, i: number) => {
+            return (
+              <List
+                radioProps={{
+                  checked: clickList === i,
+                  onChange: () => setClickList(i),
+                }}
+                content={repo}
+                key={i}
+              />
+            );
+          })}
+        </Stack>
+      </Stack>
     </Modal>
   );
 }
diff --git a/client/src/components/Layout/FullLayout.tsx b/client/src/components/Layout/FullLayout.tsx
index 5bea9168..926535fa 100644
--- a/client/src/components/Layout/FullLayout.tsx
+++ b/client/src/components/Layout/FullLayout.tsx
@@ -3,6 +3,7 @@
 import { Stack } from '@mui/material';
 import { Theme, styled } from '@mui/material/styles';
 import { usePathname } from 'next/navigation';
+import { SnackbarProvider } from 'notistack';
 // import { useAndroidSSR, useIphoneSSR } from '../../../hooks/useRecoilSSR';
 
 type Children = {
@@ -22,5 +23,9 @@ const MainStack = styled(Stack, {
 export default function FullLayout({ children }: Children) {
   const pathname = usePathname();
 
-  return <MainStack pathname={pathname}>{children}</MainStack>;
+  return (
+    <SnackbarProvider>
+      <MainStack pathname={pathname}>{children}</MainStack>
+    </SnackbarProvider>
+  );
 }
diff --git a/client/src/constant/common.ts b/client/src/constant/common.ts
index 4dd1b739..825fb9e7 100644
--- a/client/src/constant/common.ts
+++ b/client/src/constant/common.ts
@@ -15,8 +15,8 @@ export const getCurrentThemeClass = (
 export const API_BASE_URL =
   'http://glogglogglog-env.eba-fuksumx7.ap-northeast-2.elasticbeanstalk.com';
 
-// export const OAUTH2_REDIRECT_URI = 'http://localhost:3000/oauth2/redirect';
-export const OAUTH2_REDIRECT_URI = 'http://15.164.221.35:3000/oauth2/redirect';
+export const OAUTH2_REDIRECT_URI = 'http://localhost:3000/oauth2/redirect';
+// export const OAUTH2_REDIRECT_URI = 'http://15.164.221.35:3000/oauth2/redirect';
 
 export const GITHUB_AUTH_URL =
   API_BASE_URL + '/oauth2/authorization/github?redirect_uri=' + OAUTH2_REDIRECT_URI;
diff --git a/client/src/types/dto.ts b/client/src/types/dto.ts
index e4fa487c..fd0194f9 100644
--- a/client/src/types/dto.ts
+++ b/client/src/types/dto.ts
@@ -139,6 +139,7 @@ export interface ISidebar {
 export interface ISidebarContent {
   categoryId: number;
   categoryName: string;
+  isPrCategory: boolean;
   postTitleDtos: {
     postId: number;
     title: string;
@@ -198,6 +199,11 @@ export interface IPostContent {
   viewsCount?: number;
 }
 
+// 게시글 삭제
+export interface IRemovePostParams {
+  postId: number;
+}
+
 //리드미 get
 export interface IReadMeParams {
   blogId?: number;
@@ -323,9 +329,14 @@ export interface IIntroduce {
   friendCount: number;
 }
 
+// 레포지토리
+export interface Repository {
+  repository: string[];
+}
+
 // 레포지토리 가져오기
 export interface RepositoryParams {
-  category?: number;
+  categoryId?: number;
   repo?: string;
 }
 
@@ -432,3 +443,28 @@ export interface IUserInfo {
 export interface IBlogInfo {
   newBlogName: string;
 }
+
+// pr unposted
+export interface IUnPostedPost {
+  isAuthor: boolean;
+  prUnpostedDtos: {
+    prUnpostedDtos: {
+      prId: number;
+      prNumber: number;
+      prTitle: string;
+    }[];
+  };
+}
+
+// pr posted
+export interface IPostedPost {
+  isAuthor: boolean;
+  prPostedDtos: {
+    prPostedDtos: {
+      postId: number;
+      prId: number;
+      prNumber: number;
+      prTitle: string;
+    }[];
+  };
+}

From 6e216405182bd882c3a9ce9cae5a62ce03e06c60 Mon Sep 17 00:00:00 2001
From: Chaeyeon1 <66813821+Chaeyeon1@users.noreply.github.com>
Date: Thu, 30 Nov 2023 03:51:20 +0900
Subject: [PATCH 2/8] =?UTF-8?q?#163=20=EB=A1=9C=EA=B7=B8=EC=9D=B8=20?=
 =?UTF-8?q?=EC=97=90=EB=9F=AC=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/api/.index.ts.swp                 | Bin 0 -> 12288 bytes
 client/src/api/blog-api.ts                   |  14 ++++---
 client/src/api/category-api.ts               |  40 +++++++++---------
 client/src/api/friend-api.ts                 |  42 +++++++++++--------
 client/src/api/github-api.ts                 |   4 +-
 client/src/api/index.ts                      |  16 +++++++
 client/src/api/introduce-api.ts              |  18 ++++----
 client/src/api/reply-api.ts                  |   4 +-
 client/src/api/userDetail-api.ts             |  24 +++++------
 client/src/app/oauth2/redirect/page.tsx      |   2 +-
 client/src/app/register/page.tsx             |   7 ----
 client/src/components/Header/SettingMenu.tsx |  34 ++++++++++++---
 client/src/components/Layout/Header.tsx      |  24 +++++------
 13 files changed, 137 insertions(+), 92 deletions(-)
 create mode 100644 client/src/api/.index.ts.swp
 delete mode 100644 client/src/app/register/page.tsx

diff --git a/client/src/api/.index.ts.swp b/client/src/api/.index.ts.swp
new file mode 100644
index 0000000000000000000000000000000000000000..2cb62be85c9dfd3e66b16990fcf19d2f702ec91c
GIT binary patch
literal 12288
zcmeI2zmMER6vyXiXb3?d(WH4HNcKr<JGmfG_P9V2P;^oPh!C16BD3D--O+kytnrxJ
zW3!~8rK02?2n9&|3kWKDL`M%5`~&3cAA3S5Na+yhS^8?$&(CkZ@3Y>*+BZ4>;o(iX
zl%7{Oo>S`A^^DIvT<tt~XGhh>=5x)*>}-4WACH?lzv|o~dC$A#m9%uZE+3ow>0b(F
zZ*jc{uFCS#S^g+@%Szkh?D~y&uOnpGhOG8^rYn;fJLOdx>c`fUpb!uOPfFmFy0~|t
z`>CIM=`6kQ{Ou>bQSyX<5D)@FKnMr{As_^VfDrf}5D3+ddVoHj8hW8&-TB)(oXR2u
zgn$qb0zyCt2mv7=1cZPP5CTF#2>b^L=&4d)KBLsdQ!tPJ|7qyqkJC#14*dju1wDie
zbO}<>pU*1w8}uFY1@t+zf$l>E#LzY90`wyEH1rGh_!;^U`T_bL`WE^I`WpHSdKGHD
z>_Kt}0U;m+gn$qb0zyCt2mv7=1pZ|LyZeeLnuk!0vuswn*;WbLk5iuLq-Yj(vs}HF
z>MF6$hdJvyBzq~BSWP}*ZR?=RMT)WKXry>mA&GK_C{4N0O&Jc`44X3@kX{*AU#U!t
zH>`GR&!O>_%#g8<mp0mTrijuso$8=R2qD-nL|2+Hciw!WgK>6D_pY+`?CIroa0|AZ
zdwm{UPTALET6cFJnJ~ZRd5TeNqf3N?Z@AB#=$dc8e`8FIFWX4(d~0ZHIn6!m!11~@
z*rvFWF&#dOyIo-z;mwHd9AUuQ9o-!|*mRo{)f_%(-NoHJ`K{o*o^d+ka2R+QM_r9*
zceu$E6o=!AT|s>{I(u+HQG?0x!dRY0yIoUF&2JY4=OK=F>EJSAC+6>T1xF{_-bEKk
zzZKBI>vizP&geebrYtYVQG{*#p10o(vSYv)Q=dAb_FH&kOqgjOcFHp1x->Q<Q&a0n
z$%*AvNDyIqv-Mu*-c%v!lQQcPJQk(NO-N7#FW<}VAz8Ps`X)vv25CcucT0)@JP*<S
VHo0>*T<SjKl8R7(`Vo7aJ_4dHD_8&k

literal 0
HcmV?d00001

diff --git a/client/src/api/blog-api.ts b/client/src/api/blog-api.ts
index c7bcc65f..8267b9c9 100644
--- a/client/src/api/blog-api.ts
+++ b/client/src/api/blog-api.ts
@@ -1,5 +1,5 @@
 import { IBlog, IChangeBlogName, IPost, ISidebar } from '@/types/dto';
-import { defaultInstance } from '.';
+import { defaultInstance, unAxiosDefaultInstance } from '.';
 import { useQuery } from '@tanstack/react-query';
 
 // 초기 블로그 생성
@@ -44,13 +44,17 @@ export const useGetSidebarQuery = (params: ISidebar) => {
   return { data, isLoading, error };
 };
 
-export const getIsNewBlogApi = async () => {
-  const { data } = await defaultInstance.get('/is/new/blog');
+export const getIsNewBlogApi = async (token?: string | null) => {
+  const { data } = await unAxiosDefaultInstance.get('/is/new/blog', {
+    headers: {
+      Authorization: `Bearer ${token}`,
+    },
+  });
 
   return data;
 };
 
-export const useGetIsNewBlogQuery = () => {
-  const { isLoading, error, data } = useQuery([`isNewBlog`], () => getIsNewBlogApi(), {});
+export const useGetIsNewBlogQuery = (token?: string | null) => {
+  const { isLoading, error, data } = useQuery([`isNewBlog`], () => getIsNewBlogApi(token), {});
   return { data, isLoading, error };
 };
diff --git a/client/src/api/category-api.ts b/client/src/api/category-api.ts
index b7590da8..56d0ab90 100644
--- a/client/src/api/category-api.ts
+++ b/client/src/api/category-api.ts
@@ -1,36 +1,36 @@
-import { ICategoryParams, IDeleteCategory, IPostCategory, IPutCategory } from "@/types/dto";
-import { defaultInstance } from ".";
-import { useQuery } from "@tanstack/react-query";
+import { ICategoryParams, IDeleteCategory, IPostCategory, IPutCategory } from '@/types/dto';
+import { defaultInstance } from '.';
+import { useQuery } from '@tanstack/react-query';
 
 //카테고리 이름/pr연동여부 가져오기
 export const GetCategoryApi = async (params: ICategoryParams) => {
-    const { data } = await defaultInstance.get('/category', { params });
-  
-    return data;
+  const { data } = await defaultInstance.get('/category', { params });
+
+  return data;
 };
-  
-  export const useGetCategoryQuery = (params: ICategoryParams) => {
-    const { isLoading, error, data } = useQuery(['category', params], () => GetCategoryApi(params));
-  
-    return { isLoading, error, data };
+
+export const useGetCategoryQuery = (params: ICategoryParams) => {
+  const { isLoading, error, data } = useQuery(['category', params], () => GetCategoryApi(params));
+
+  return { isLoading, error, data };
 };
 
 //카테고리 생성
 export const PostCategoryApi = async (body: IPostCategory) => {
-    const { data } = await defaultInstance.post('/category', body);
-    return data;
+  const { data } = await defaultInstance.post('/category', body);
+  return data;
 };
 
 //카테고리 이름 수정
 export const PutCategoryApi = async (body: IPutCategory) => {
-    const { data } = await defaultInstance.put('/category', body);
-    return data;
+  const { data } = await defaultInstance.put('/category', body);
+  return data;
 };
 
 //카테고리 삭제
 export const DeleteCategoryApi = async (params: IDeleteCategory) => {
-    const { data } = await defaultInstance.delete('/category', {
-      params,
-    });
-    return data;
-};
\ No newline at end of file
+  const { data } = await defaultInstance.delete('/category', {
+    params,
+  });
+  return data;
+};
diff --git a/client/src/api/friend-api.ts b/client/src/api/friend-api.ts
index f2b2c286..1209d1fe 100644
--- a/client/src/api/friend-api.ts
+++ b/client/src/api/friend-api.ts
@@ -1,4 +1,11 @@
-import { IDeleteFriend, IFriendAllow, IFriendReadParams, IFriendRequest, IFriendSearchParams, IFriendsParams } from '@/types/dto';
+import {
+  IDeleteFriend,
+  IFriendAllow,
+  IFriendReadParams,
+  IFriendRequest,
+  IFriendSearchParams,
+  IFriendsParams,
+} from '@/types/dto';
 import { defaultInstance } from '.';
 import { useQuery } from '@tanstack/react-query';
 
@@ -16,31 +23,30 @@ export const useGetFriendQuery = (params: IFriendsParams) => {
 
 //친구 검색
 export const GetFriendSearchApi = async (params: IFriendSearchParams) => {
-  const {data} = await defaultInstance.get('/search/friend/name', {params});
+  const { data } = await defaultInstance.get('/search/friend/name', { params });
 
   return data;
-}
+};
 
 export const useGetFriendSearchQuery = (params: IFriendSearchParams) => {
-  const {isLoading, error, data } = useQuery(['search', params], () => GetFriendSearchApi(params));
+  const { isLoading, error, data } = useQuery(['search', params], () => GetFriendSearchApi(params));
 
-  return {isLoading, error, data };
-}
+  return { isLoading, error, data };
+};
 
-//친구 요청 
+//친구 요청
 export const PutFriendRequestApi = async (body: IFriendRequest) => {
-  const { data } = await defaultInstance.put(`/friend?userId=${body.userId}`,
-     body,
-    );
+  const { data } = await defaultInstance.put(`/friend?userId=${body.userId}`, body);
 
   return data;
-}
+};
 
 //친구 요청 수락/거절
 export const PutFriendAllowApi = async (body: IFriendAllow) => {
-  const { data } = await defaultInstance.put(`/friend/allow?isAccept=${body.isAccept}&userId=${body.userId}`,
-     body,
-    );
+  const { data } = await defaultInstance.put(
+    `/friend/allow?isAccept=${body.isAccept}&userId=${body.userId}`,
+    body,
+  );
 
   return data;
 };
@@ -56,12 +62,14 @@ export const DeleteFriendApi = async (params: IDeleteFriend) => {
 
 //새 포스트 읽음 유무
 export const GetFriendReadApi = async (params: IFriendReadParams) => {
-  const { data } = await defaultInstance.get('/friend/read', {params});
+  const { data } = await defaultInstance.get('/friend/read', { params });
 
   return data;
 };
 
 export const useGetFriendReadQuery = (params: IFriendReadParams) => {
-  const { isLoading, error, data } = useQuery(['friendRead', params], () => GetFriendReadApi(params));
+  const { isLoading, error, data } = useQuery(['friendRead', params], () =>
+    GetFriendReadApi(params),
+  );
   return { data, isLoading, error };
-};
\ No newline at end of file
+};
diff --git a/client/src/api/github-api.ts b/client/src/api/github-api.ts
index a6079640..669e08fd 100644
--- a/client/src/api/github-api.ts
+++ b/client/src/api/github-api.ts
@@ -19,7 +19,9 @@ export const useGetRepositoryQuery = () => {
 };
 
 export const PostRepository = async (body: RepositoryParams) => {
-  const { data } = await defaultInstance.post('/repository', body);
+  const { data } = await defaultInstance.post(
+    `/repository?categoryId=${body.categoryId}&repo=${body.repo}`,
+  );
 
   return data;
 };
diff --git a/client/src/api/index.ts b/client/src/api/index.ts
index 1062c263..4acbdc59 100644
--- a/client/src/api/index.ts
+++ b/client/src/api/index.ts
@@ -5,6 +5,7 @@ import axios from 'axios';
 // eslint-disable-next-line @typescript-eslint/no-explicit-any
 const axiosApi = (url: string, data?: any) => {
   let token: string | null = '';
+
   if (typeof window !== 'undefined') {
     token = localStorage.getItem('token');
   }
@@ -21,6 +22,21 @@ const axiosApi = (url: string, data?: any) => {
   return instance;
 };
 
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const unAxiosApi = (url: string, data?: any) => {
+  const instance = axios.create({
+    baseURL: url,
+    withCredentials: true,
+    ...data,
+  });
+
+  return instance;
+};
+
 export const defaultInstance = axiosApi(
   'http://glogglogglog-env.eba-fuksumx7.ap-northeast-2.elasticbeanstalk.com',
 );
+
+export const unAxiosDefaultInstance = unAxiosApi(
+  'http://glogglogglog-env.eba-fuksumx7.ap-northeast-2.elasticbeanstalk.com',
+);
diff --git a/client/src/api/introduce-api.ts b/client/src/api/introduce-api.ts
index 4c696094..0f4efcd2 100644
--- a/client/src/api/introduce-api.ts
+++ b/client/src/api/introduce-api.ts
@@ -4,12 +4,12 @@ import { useQuery } from '@tanstack/react-query';
 
 //유저 introducion 가져오기
 export const GetIntroducedApi = async (params: IIntroduceParams) => {
-    const { data } = await defaultInstance.get('/introduce', {params});
-  
-    return data;
-  };
-  
-  export const useGetIntroduceQuery = (params: IIntroduceParams) => {
-    const { isLoading, error, data } = useQuery(['friend', params], () => GetIntroducedApi(params));
-    return { data, isLoading, error };
-  };
\ No newline at end of file
+  const { data } = await defaultInstance.get('/introduce', { params });
+
+  return data;
+};
+
+export const useGetIntroduceQuery = (params: IIntroduceParams) => {
+  const { isLoading, error, data } = useQuery(['friend', params], () => GetIntroducedApi(params));
+  return { data, isLoading, error };
+};
diff --git a/client/src/api/reply-api.ts b/client/src/api/reply-api.ts
index 72009624..ca10687c 100644
--- a/client/src/api/reply-api.ts
+++ b/client/src/api/reply-api.ts
@@ -20,6 +20,6 @@ export const PostReplyApi = async (body: IReply) => {
 };
 
 export const PatchReplyLikeApi = async (params: IPatchReplyLike) => {
-  const {data} = await defaultInstance.patch(`/replies/like/${params.replyId}`, params)
+  const { data } = await defaultInstance.patch(`/replies/like/${params.replyId}`, params);
   return data;
-}
\ No newline at end of file
+};
diff --git a/client/src/api/userDetail-api.ts b/client/src/api/userDetail-api.ts
index 43cc9e47..53c3dc4b 100644
--- a/client/src/api/userDetail-api.ts
+++ b/client/src/api/userDetail-api.ts
@@ -1,14 +1,14 @@
-import { useQuery } from "@tanstack/react-query";
-import { defaultInstance } from ".";
+import { useQuery } from '@tanstack/react-query';
+import { defaultInstance } from '.';
 
 export const GetUserDetailApi = async () => {
-    const {data} = await defaultInstance.get('/user/detail');
-  
-    return data;
-  };
-  
-  export const useGetUserDetailQuery = () => {
-    const {isLoading, error, data } = useQuery(['userDetail'], () => GetUserDetailApi());
-  
-    return {isLoading, error, data };
-  };
\ No newline at end of file
+  const { data } = await defaultInstance.get('/user/detail');
+
+  return data;
+};
+
+export const useGetUserDetailQuery = () => {
+  const { isLoading, error, data } = useQuery(['userDetail'], () => GetUserDetailApi());
+
+  return { isLoading, error, data };
+};
diff --git a/client/src/app/oauth2/redirect/page.tsx b/client/src/app/oauth2/redirect/page.tsx
index df35d14a..004365d1 100644
--- a/client/src/app/oauth2/redirect/page.tsx
+++ b/client/src/app/oauth2/redirect/page.tsx
@@ -17,7 +17,7 @@ const Page = () => {
   const [blogUrl, setBlogUrl] = useState<string>('');
   const [blogName, setBlogName] = useState<string>('');
   const [nickname, setNickname] = useState<string>('');
-  const { data, isLoading } = useGetIsNewBlogQuery();
+  const { data, isLoading } = useGetIsNewBlogQuery(params.get('token'));
 
   const postMakeAccountCreateQuery = useMutation(PostMakeAccountApi, {
     onSuccess: () => router.push('/collect'),
diff --git a/client/src/app/register/page.tsx b/client/src/app/register/page.tsx
deleted file mode 100644
index 7fb5ccb6..00000000
--- a/client/src/app/register/page.tsx
+++ /dev/null
@@ -1,7 +0,0 @@
-import React from 'react';
-
-function page() {
-  return <div>page</div>;
-}
-
-export default page;
diff --git a/client/src/components/Header/SettingMenu.tsx b/client/src/components/Header/SettingMenu.tsx
index 5aa4b0f7..41c249ab 100644
--- a/client/src/components/Header/SettingMenu.tsx
+++ b/client/src/components/Header/SettingMenu.tsx
@@ -1,11 +1,19 @@
+'use client';
+
 import { ModalType } from '@/types/common';
 import { Menu, MenuItem } from '@mui/material';
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import PageLink from '../PageLink/PageLink';
 import FriendModal from '../Layout/HeaderFriendModal/FriendModal';
+import { enqueueSnackbar } from 'notistack';
 
 function SettingMenu({ open, onClose, anchorEl }: ModalType & { anchorEl: null | HTMLElement }) {
   const [friendOpen, setFriendOpen] = useState<boolean>(false);
+  const [token, setToken] = useState<string | null>('');
+
+  useEffect(() => {
+    setToken(localStorage.getItem('token'));
+  }, []);
 
   return (
     <Menu anchorEl={anchorEl} open={open} onClose={onClose}>
@@ -28,16 +36,30 @@ function SettingMenu({ open, onClose, anchorEl }: ModalType & { anchorEl: null |
           스크랩
         </PageLink>
       </MenuItem>
-      <MenuItem onClick={() => localStorage.setItem('token', '')}>Logout</MenuItem>
-      <MenuItem>
+      {token && (
         <PageLink
           href="/login"
           onClick={() => {
-            onClose();
+            enqueueSnackbar({
+              message: '로그아웃이 성공적으로 완료되었습니다.',
+              variant: 'success',
+            });
+            localStorage.setItem('token', '');
           }}>
-          로그인
+          <MenuItem>Logout</MenuItem>
         </PageLink>
-      </MenuItem>
+      )}
+      {!token && (
+        <MenuItem>
+          <PageLink
+            href="/login"
+            onClick={() => {
+              onClose();
+            }}>
+            로그인
+          </PageLink>
+        </MenuItem>
+      )}
       <FriendModal open={friendOpen} onClose={() => setFriendOpen(false)}></FriendModal>
     </Menu>
   );
diff --git a/client/src/components/Layout/Header.tsx b/client/src/components/Layout/Header.tsx
index 141756ac..31da0993 100644
--- a/client/src/components/Layout/Header.tsx
+++ b/client/src/components/Layout/Header.tsx
@@ -19,8 +19,8 @@ export default function Header() {
   const pathname = usePathname();
   const [isSearch, setIsSearch] = useIsSearchSSR();
   const [anchorEl, setAnchorEl] = useState<null | HTMLElement>(null);
-  const {data: userDetailData} = useGetUserDetailQuery()
-  const [userDetail, setUserDetail] = useState<IUserDetail>()
+  const { data: userDetailData } = useGetUserDetailQuery();
+  const [userDetail, setUserDetail] = useState<IUserDetail>();
 
   const toggleUserTheme = () => {
     setUserTheme((prevTheme) => (prevTheme === 'dark' ? 'light' : 'dark'));
@@ -63,15 +63,16 @@ export default function Header() {
         </PageLink>
       </Stack>
       <Stack direction="row" alignItems="center" gap={2}>
-        {isSearch ? (
-          <IconButton sx={{ color: '#ffffff' }} size="medium" onClick={() => setIsSearch(false)}>
-            <Home fontSize="large" />
-          </IconButton>
-        ) : (
-          <IconButton sx={{ color: '#ffffff' }} size="medium" onClick={() => setIsSearch(true)}>
-            <Search fontSize="large" />
-          </IconButton>
-        )}
+        {pathname.includes('/collect') &&
+          (isSearch ? (
+            <IconButton sx={{ color: '#ffffff' }} size="medium" onClick={() => setIsSearch(false)}>
+              <Home fontSize="large" />
+            </IconButton>
+          ) : (
+            <IconButton sx={{ color: '#ffffff' }} size="medium" onClick={() => setIsSearch(true)}>
+              <Search fontSize="large" />
+            </IconButton>
+          ))}
         {userTheme === 'dark' ? (
           <IconButton sx={{ color: '#ffffff' }} onClick={toggleUserTheme}>
             <DarkModeIcon fontSize="large" />
@@ -88,7 +89,6 @@ export default function Header() {
           overflow="hidden"
           sx={{ cursor: 'pointer', backgroundColor: '#ffffff' }}>
           <PageLink href={userDetail?.blogUrl ?? ''}>
-            {/* FIXME : 나중에 src={userDetail?.thumbnail} 로 바꿔야함 */}
             <Image width={40} height={40} alt="profile Image" src={userDetail?.thumbnail ?? ''} />
           </PageLink>
         </Stack>

From 4e5211e9049edc6360171532d876403764293a22 Mon Sep 17 00:00:00 2001
From: Chaeyeon1 <66813821+Chaeyeon1@users.noreply.github.com>
Date: Thu, 30 Nov 2023 04:41:27 +0900
Subject: [PATCH 3/8] =?UTF-8?q?=EB=AA=A8=EC=95=84=EB=B3=B4=EA=B8=B0=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/api/.index.ts.swp                  | Bin 12288 -> 0 bytes
 client/src/api/collect-api.ts                 |  18 +++++
 .../home/[categoryId]/[postId]/page.tsx       |   3 +-
 .../[categoryId]/[postId]/postId.style.tsx    |  71 ++++++++++--------
 .../[blogName]/prList/[categoryId]/page.tsx   |  13 +++-
 client/src/app/collect/CollectPost.tsx        |  14 ++--
 client/src/app/collect/page.tsx               |  27 ++-----
 .../src/app/{[blogName] => }/scrap/page.tsx   |   2 +-
 .../{[blogName] => }/scrap/scrap.style.tsx    |   0
 client/src/app/write/Modal/SaveModal.tsx      |   8 +-
 client/src/components/Header/SettingMenu.tsx  |   2 +-
 .../Layout/HeaderFriendModal/FriendModal.tsx  |   8 +-
 client/src/components/Post/Post.tsx           |   1 -
 client/src/types/dto.ts                       |  11 ++-
 14 files changed, 103 insertions(+), 75 deletions(-)
 delete mode 100644 client/src/api/.index.ts.swp
 rename client/src/app/{[blogName] => }/scrap/page.tsx (96%)
 rename client/src/app/{[blogName] => }/scrap/scrap.style.tsx (100%)

diff --git a/client/src/api/.index.ts.swp b/client/src/api/.index.ts.swp
deleted file mode 100644
index 2cb62be85c9dfd3e66b16990fcf19d2f702ec91c..0000000000000000000000000000000000000000
GIT binary patch
literal 0
HcmV?d00001

literal 12288
zcmeI2zmMER6vyXiXb3?d(WH4HNcKr<JGmfG_P9V2P;^oPh!C16BD3D--O+kytnrxJ
zW3!~8rK02?2n9&|3kWKDL`M%5`~&3cAA3S5Na+yhS^8?$&(CkZ@3Y>*+BZ4>;o(iX
zl%7{Oo>S`A^^DIvT<tt~XGhh>=5x)*>}-4WACH?lzv|o~dC$A#m9%uZE+3ow>0b(F
zZ*jc{uFCS#S^g+@%Szkh?D~y&uOnpGhOG8^rYn;fJLOdx>c`fUpb!uOPfFmFy0~|t
z`>CIM=`6kQ{Ou>bQSyX<5D)@FKnMr{As_^VfDrf}5D3+ddVoHj8hW8&-TB)(oXR2u
zgn$qb0zyCt2mv7=1cZPP5CTF#2>b^L=&4d)KBLsdQ!tPJ|7qyqkJC#14*dju1wDie
zbO}<>pU*1w8}uFY1@t+zf$l>E#LzY90`wyEH1rGh_!;^U`T_bL`WE^I`WpHSdKGHD
z>_Kt}0U;m+gn$qb0zyCt2mv7=1pZ|LyZeeLnuk!0vuswn*;WbLk5iuLq-Yj(vs}HF
z>MF6$hdJvyBzq~BSWP}*ZR?=RMT)WKXry>mA&GK_C{4N0O&Jc`44X3@kX{*AU#U!t
zH>`GR&!O>_%#g8<mp0mTrijuso$8=R2qD-nL|2+Hciw!WgK>6D_pY+`?CIroa0|AZ
zdwm{UPTALET6cFJnJ~ZRd5TeNqf3N?Z@AB#=$dc8e`8FIFWX4(d~0ZHIn6!m!11~@
z*rvFWF&#dOyIo-z;mwHd9AUuQ9o-!|*mRo{)f_%(-NoHJ`K{o*o^d+ka2R+QM_r9*
zceu$E6o=!AT|s>{I(u+HQG?0x!dRY0yIoUF&2JY4=OK=F>EJSAC+6>T1xF{_-bEKk
zzZKBI>vizP&geebrYtYVQG{*#p10o(vSYv)Q=dAb_FH&kOqgjOcFHp1x->Q<Q&a0n
z$%*AvNDyIqv-Mu*-c%v!lQQcPJQk(NO-N7#FW<}VAz8Ps`X)vv25CcucT0)@JP*<S
VHo0>*T<SjKl8R7(`Vo7aJ_4dHD_8&k

diff --git a/client/src/api/collect-api.ts b/client/src/api/collect-api.ts
index 6b20f01a..efd9feab 100644
--- a/client/src/api/collect-api.ts
+++ b/client/src/api/collect-api.ts
@@ -1,6 +1,7 @@
 import {
   ICollect,
   ICollectContent,
+  ISearch,
   ISearchContent,
   ISearchHashtag,
   ISearchTitle,
@@ -25,6 +26,23 @@ export const useGetCollectDataQuery = (params: ICollect) => {
   return { data, isLoading, error };
 };
 
+const GetColletSearchApi = async (params: ISearch) => {
+  const { data } = await defaultInstance.get(`/search`, { params });
+
+  return data;
+};
+
+export const useGetCollectSearchQuery = (params: ISearch) => {
+  const { isLoading, error, data } = useQuery(
+    [`search`, params],
+    () => GetColletSearchApi(params),
+    {
+      enabled: !!params.value,
+    },
+  );
+  return { data, isLoading, error };
+};
+
 const GetColletSearchUserApi = async (params: ISearchUser) => {
   const { data } = await defaultInstance.get(`/search/user`, { params });
 
diff --git a/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx b/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
index c31cbe48..05f26d15 100644
--- a/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
+++ b/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
@@ -161,7 +161,8 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
       <ThumbnailArea>
         <ImageContainer
           imageSrc={
-            'https://search.pstatic.net/sunny/?src=https%3A%2F%2Fi.pinimg.com%2Foriginals%2Fe4%2F9a%2Ff8%2Fe49af87c36b78490745115cc14b5a80e.gif&type=ff332_332'
+            postData?.thumbnail ??
+            'https://s3.console.aws.amazon.com/s3/object/elasticbeanstalk-us-east-1-064991853848?region=us-east-1&prefix=thumbnail/road_sunset_horizon_118582_1920x1080.jpg'
           }
         />
         <BlackContainer paddingTop="64px">
diff --git a/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx b/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx
index 0294dfa5..76fac7cd 100644
--- a/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx
+++ b/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx
@@ -44,7 +44,7 @@ export const ProfileImg = styled(Stack)(({ imageSrc }: { imageSrc: string }) =>
   backgroundImage: `url(${imageSrc})`,
   backgroundRepeat: 'no-repeat',
   borderRadius: '50%',
-}))
+}));
 
 export const PostReply = styled(Stack)({
   height: '100%',
@@ -96,8 +96,8 @@ function RepliesComponent({
   isLiked,
   isEdit,
 }: {
-  userId: number,
-  replyId: number,
+  userId: number;
+  replyId: number;
   profileImage: string;
   nickname: string;
   message: string;
@@ -107,9 +107,9 @@ function RepliesComponent({
 }) {
   const theme = useTheme();
   const queryClient = useQueryClient();
-  
+
   const [IntroduceOpen, setIntroduceOpen] = useState<boolean>(false);
-  const {data: introduceData} = useGetIntroduceQuery({
+  const { data: introduceData } = useGetIntroduceQuery({
     userId: userId,
   });
   const [introduce, setIntroduce] = useState<IIntroduce>();
@@ -117,7 +117,7 @@ function RepliesComponent({
   const [isAccept, setIsAccept] = useState<number>(Number);
   const putAllowFriendIdCreateQuery = useMutation(PutFriendAllowApi, {
     onSuccess: () => {
-      queryClient.invalidateQueries(['friend'])
+      queryClient.invalidateQueries(['friend']);
     },
   });
   const AllowFriendOnClick = () => {
@@ -131,36 +131,38 @@ function RepliesComponent({
 
   const PutFriendRequestQuery = useMutation(PutFriendRequestApi, {
     onSuccess: () => {
-      queryClient.invalidateQueries(['friend'])
+      queryClient.invalidateQueries(['friend']);
     },
   });
   const FriendRequestOnClick = () => {
     const newRequestBody = {
-      userId: userId
+      userId: userId,
     };
     PutFriendRequestQuery.mutate(newRequestBody);
   };
 
   const PatchReplyLikeQuery = useMutation(PatchReplyLikeApi, {
     onSuccess: () => {
-      queryClient.invalidateQueries(['replies'])
+      queryClient.invalidateQueries(['replies']);
     },
   });
   const ReplyLikeOnClick = () => {
     const newReplyLikeBody = {
-      replyId: replyId
+      replyId: replyId,
     };
     PatchReplyLikeQuery.mutate(newReplyLikeBody);
   };
 
   useInsertionEffect(() => {
     setIntroduce(introduceData);
-  }, [introduceData])
+  }, [introduceData]);
 
   return (
     <Stack flexDirection={'column'}>
       <ReplyMainInfo>
-        <Button sx={{ minWidth: '30px', width: '30px', height: '30px', borderRadius: '50%'}} onClick={() => setIntroduceOpen(true)}>
+        <Button
+          sx={{ minWidth: '30px', width: '30px', height: '30px', borderRadius: '50%' }}
+          onClick={() => setIntroduceOpen(true)}>
           <img
             style={{
               width: '35px',
@@ -171,7 +173,7 @@ function RepliesComponent({
             alt="profileImage"
           />
         </Button>
-        
+
         <Stack>
           <Stack>{nickname}</Stack>
           <Stack>{message}</Stack>
@@ -179,17 +181,16 @@ function RepliesComponent({
       </ReplyMainInfo>
       <ReplySubInfo>
         <ReplyLike>
-          {isLiked ? 
-          (<IconButton onClick={ReplyLikeOnClick}>
-            <ThumbUpAltIcon></ThumbUpAltIcon>
-          </IconButton>) : (
+          {isLiked ? (
+            <IconButton onClick={ReplyLikeOnClick}>
+              <ThumbUpAltIcon></ThumbUpAltIcon>
+            </IconButton>
+          ) : (
             <IconButton onClick={ReplyLikeOnClick}>
               <ThumbUpOffAltIcon></ThumbUpOffAltIcon>
-          </IconButton>
+            </IconButton>
           )}
-          <ChangeReply>
-            {isEdit ? <Button>수정하기</Button> : <></>}
-          </ChangeReply>
+          <ChangeReply>{isEdit ? <Button>수정하기</Button> : <></>}</ChangeReply>
           {likesCount}
         </ReplyLike>
       </ReplySubInfo>
@@ -210,7 +211,9 @@ function RepliesComponent({
                   alt="profileImage"
                 />
                 <Stack>
-                  <Stack padding="8px" fontSize='25px'>{introduce?.nickname}</Stack>
+                  <Stack padding="8px" fontSize="25px">
+                    {introduce?.nickname}
+                  </Stack>
                   <Stack direction="row" spacing={2}>
                     <Button size="small" variant="outlined">
                       <PageLink href={`/${introduce?.blogUrl}`}> </PageLink>
@@ -220,17 +223,21 @@ function RepliesComponent({
                 </Stack>
               </Stack>
               <Stack>
-                <Stack fontSize='18px' marginBottom='15px'>친구 {introduce?.friendCount} 명</Stack>
+                <Stack fontSize="18px" marginBottom="15px">
+                  친구 {introduce?.friendCount} 명
+                </Stack>
                 {introduce?.relationship === 'friend' ? (
-                  <Stack color='#00BFFF'>팔로잉</Stack>
+                  <Stack color="#00BFFF">팔로잉</Stack>
                 ) : introduce?.relationship === 'friending' ? (
-                  <Stack marginLeft="10px" fontSize="15px" color="#FFA07A">요청 중</Stack>
+                  <Stack marginLeft="10px" fontSize="15px" color="#FFA07A">
+                    요청 중
+                  </Stack>
                 ) : introduce?.relationship === 'friended' ? (
                   <>
-                    <Stack margin='0 5px 0 10px'>친구 요청</Stack>
+                    <Stack margin="0 5px 0 10px">친구 요청</Stack>
                     <Tooltip title="수락" arrow>
                       <Button
-                        sx={{minWidth: '36px', height: '36px', padding: '0'}}
+                        sx={{ minWidth: '36px', height: '36px', padding: '0' }}
                         onClick={() => {
                           setIsAccept(0);
                           AllowFriendOnClick();
@@ -239,10 +246,10 @@ function RepliesComponent({
                         <CheckIcon />
                       </Button>
                     </Tooltip>
-                      
+
                     <Tooltip title="거절" arrow>
                       <Button
-                        sx={{minWidth: '36px', height: '36px', padding: '0'}}
+                        sx={{ minWidth: '36px', height: '36px', padding: '0' }}
                         onClick={() => {
                           setIsAccept(1);
                           AllowFriendOnClick();
@@ -253,9 +260,9 @@ function RepliesComponent({
                     </Tooltip>
                   </>
                 ) : (
-                <Stack>
-                  <Button onClick={() => FriendRequestOnClick()}>친구 요청</Button>
-                </Stack>
+                  <Stack>
+                    <Button onClick={() => FriendRequestOnClick()}>친구 요청</Button>
+                  </Stack>
                 )}
               </Stack>
             </Stack>
diff --git a/client/src/app/[blogName]/prList/[categoryId]/page.tsx b/client/src/app/[blogName]/prList/[categoryId]/page.tsx
index 72381198..7f533681 100644
--- a/client/src/app/[blogName]/prList/[categoryId]/page.tsx
+++ b/client/src/app/[blogName]/prList/[categoryId]/page.tsx
@@ -8,7 +8,7 @@ import List from '@/components/List/List';
 import PageLink from '@/components/PageLink/PageLink';
 import { Stack } from '@mui/material';
 import Image from 'next/image';
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import EmptyContent from '../../../../../public/assets/box.png';
 import Complete from '../../../../../public/assets/complete-icon.svg';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
@@ -18,6 +18,7 @@ import { enqueueSnackbar } from 'notistack';
 function page({ params }: { params: { categoryId: string } }) {
   const { data: postedData } = useGetPRQuery({ categoryId: Number(params.categoryId) });
   const { data: unPostedData } = useGetPRUnpostedQuery({ categoryId: Number(params.categoryId) });
+  const [unPosted, setUnPosted] = useState(unPostedData);
   const queryClient = useQueryClient();
   const deleteWritePrQuery = useMutation(DeleteWriteApi, {
     onSuccess: () => {
@@ -33,15 +34,21 @@ function page({ params }: { params: { categoryId: string } }) {
     deleteWritePrQuery.mutate({ postId });
   };
 
+  useEffect(() => {
+    setUnPosted(unPostedData);
+  }, [unPostedData]);
+
+  console.log(unPosted);
   return (
     <CenterContent maxWidth="1080px">
       <Stack fontSize="24px" marginBottom="8px">
         작성하지 않은 PR
       </Stack>
       <Stack p={2} direction="row" spacing={4} overflow={'scroll'}>
-        {unPostedData?.prUnpostedDtos?.prUnpostedDtos?.map((unPost) => {
+        {unPosted?.prUnPostedDtos?.prUnPostedDtos?.map((unPost) => {
+          console.log('1', unPost);
           return (
-            <PageLink key={unPost.prId} href={`/write/pr/${unPost.prId}`}>
+            <PageLink key={unPost.prId} href={`/write/pr/${Number(params.categoryId)}`}>
               <Stack
                 sx={{
                   transition: 'all .35s ease-in-out',
diff --git a/client/src/app/collect/CollectPost.tsx b/client/src/app/collect/CollectPost.tsx
index 97380add..31933e39 100644
--- a/client/src/app/collect/CollectPost.tsx
+++ b/client/src/app/collect/CollectPost.tsx
@@ -25,7 +25,7 @@ function CollectPost({ like }: { like: ICollectPost }) {
   return (
     <Post
       key={like.postId}
-      href={`/${like.blogUrl}/home/1/${like.postId}`}
+      href={`/${like.blogUrl}/home/${like.categoryId}/${like.postId}`}
       isCollect={true}
       isPhone={isPhone}
       isTablet={isTablet}
@@ -40,11 +40,13 @@ function CollectPost({ like }: { like: ICollectPost }) {
         <Stack>
           <Image alt="썸네일" fill src={like.thumbnail ?? ''} />
         </Stack>
-        <CostomizeButton>
-          <IconButton size="small">
-            <LockOutlined />
-          </IconButton>
-        </CostomizeButton>
+        {like?.isPrivate && (
+          <CostomizeButton>
+            <IconButton size="small">
+              <LockOutlined />
+            </IconButton>
+          </CostomizeButton>
+        )}
       </Thumbnail>
       <Title>{like.title}</Title>
     </Post>
diff --git a/client/src/app/collect/page.tsx b/client/src/app/collect/page.tsx
index 974b12a5..3ef9e5d8 100644
--- a/client/src/app/collect/page.tsx
+++ b/client/src/app/collect/page.tsx
@@ -5,35 +5,20 @@ import React, { useState } from 'react';
 import CollectArray from './CollectArray';
 import { Search, Star } from '@mui/icons-material';
 import { useIsSearchSSR } from '../../../hooks/useRecoilSSR';
-import {
-  useGetCollectSearchContentQuery,
-  useGetCollectSearchHashtagQuery,
-  useGetCollectSearchTitleQuery,
-  useGetCollectSearchUserQuery,
-} from '@/api/collect-api';
+import { useGetCollectSearchQuery } from '@/api/collect-api';
 import { ICollectPost } from '@/types/dto';
 import PostComponent from '@/components/Post/Post';
-import { PostAreaComponent } from '../[blogName]/scrap/scrap.style';
+import { PostAreaComponent } from '../scrap/scrap.style';
 
 function Collect() {
   const [isSearch] = useIsSearchSSR();
   const [searchText, setSearchText] = useState<string>('');
   const [searchType, setSearchType] = useState<'user' | 'title' | 'hashtag' | 'content'>('user');
 
-  const { data: userData } = useGetCollectSearchUserQuery({ nickname: searchText });
-  const { data: titleData } = useGetCollectSearchTitleQuery({ title: searchText });
-  const { data: hashtagData } = useGetCollectSearchHashtagQuery({ hashtag: searchText });
-  const { data: contentData } = useGetCollectSearchContentQuery({ content: searchText });
-
-  const typeToDataMap = {
-    user: userData,
-    title: titleData,
-    hashtag: hashtagData,
-    content: contentData,
-  };
+  const { data } = useGetCollectSearchQuery({ type: searchType, value: searchText });
 
   return (
-    <Stack mt={8}>
+    <Stack mt={16}>
       {!isSearch ? (
         <Stack padding={'10px 40px'} spacing={4}>
           <Typography color="oppositeColor.main" fontSize="24px">
@@ -79,7 +64,7 @@ function Collect() {
         </Stack>
       )}
       <PostAreaComponent style={{ marginTop: '16px' }}>
-        {typeToDataMap[searchType]?.postPreviewDtos.map((user: ICollectPost) => {
+        {data?.postPreviewDtos.map((user: ICollectPost) => {
           return (
             <PostComponent
               key={user.postId}
@@ -88,7 +73,7 @@ function Collect() {
               likesCount={user.likesCount}
               viewsCount={user.viewsCount}
               Icon={<Star fontSize="small" />}
-              href={`/${user.blogUrl}/home/1/${user.postId}`}
+              href={`/${user.blogUrl}/home/${user.categoryId}/${user.postId}`}
             />
           );
         })}
diff --git a/client/src/app/[blogName]/scrap/page.tsx b/client/src/app/scrap/page.tsx
similarity index 96%
rename from client/src/app/[blogName]/scrap/page.tsx
rename to client/src/app/scrap/page.tsx
index 399cb3c1..5539a05d 100644
--- a/client/src/app/[blogName]/scrap/page.tsx
+++ b/client/src/app/scrap/page.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import React, { useEffect } from 'react';
-import PostComponent from '../../../components/Post/Post';
+import PostComponent from '../../components/Post/Post';
 import { useState } from 'react';
 import { PostAreaComponent, PostPagination, ScrapList } from './scrap.style';
 import CenterContent from '@/components/Layout/CenterContent';
diff --git a/client/src/app/[blogName]/scrap/scrap.style.tsx b/client/src/app/scrap/scrap.style.tsx
similarity index 100%
rename from client/src/app/[blogName]/scrap/scrap.style.tsx
rename to client/src/app/scrap/scrap.style.tsx
diff --git a/client/src/app/write/Modal/SaveModal.tsx b/client/src/app/write/Modal/SaveModal.tsx
index 09468dd3..ad96422a 100644
--- a/client/src/app/write/Modal/SaveModal.tsx
+++ b/client/src/app/write/Modal/SaveModal.tsx
@@ -130,7 +130,7 @@ function SaveModal({
   const postOnClick = () => {
     onClose();
     const formData = createFormData({
-      thumbnail: image,
+      thumbnail: image ?? null,
       postCreateRequest: {
         title: writeProps?.title,
         content: writeProps?.content,
@@ -147,7 +147,7 @@ function SaveModal({
   const postUpdateOnClick = () => {
     onClose();
     const formData = createFormData({
-      thumbnail: image,
+      thumbnail: image ?? null,
       postCreateRequest: {
         title: writeProps?.title,
         content: writeProps?.content,
@@ -166,7 +166,7 @@ function SaveModal({
     onClose();
 
     const formData = createToolFormData({
-      thumbnail: image,
+      thumbnail: image ?? null,
       postBasicDto: {
         title: writeProps?.title ?? '',
         content: writeProps?.content ?? '',
@@ -182,7 +182,7 @@ function SaveModal({
     onClose();
 
     const formData = createToolFormData({
-      thumbnail: image,
+      thumbnail: image ?? null,
       postBasicDto: {
         title: writeProps?.title ?? '',
         content: writeProps?.content ?? '',
diff --git a/client/src/components/Header/SettingMenu.tsx b/client/src/components/Header/SettingMenu.tsx
index 41c249ab..e388e487 100644
--- a/client/src/components/Header/SettingMenu.tsx
+++ b/client/src/components/Header/SettingMenu.tsx
@@ -29,7 +29,7 @@ function SettingMenu({ open, onClose, anchorEl }: ModalType & { anchorEl: null |
       <MenuItem onClick={() => setFriendOpen(true)}>친구</MenuItem>
       <MenuItem>
         <PageLink
-          href="/mypage"
+          href="/scrap"
           onClick={() => {
             onClose();
           }}>
diff --git a/client/src/components/Layout/HeaderFriendModal/FriendModal.tsx b/client/src/components/Layout/HeaderFriendModal/FriendModal.tsx
index a2ae3355..639982ac 100644
--- a/client/src/components/Layout/HeaderFriendModal/FriendModal.tsx
+++ b/client/src/components/Layout/HeaderFriendModal/FriendModal.tsx
@@ -19,8 +19,8 @@ function FriendModal({ open, onClose }: ModalType) {
   const [friend, setFriend] = useState<IFriendsContent>();
   const kindList = ['recentFriend', 'name', 'recentPost'];
   const friendCount = friend?.userSimpleDtos.simpleDtos.length;
-  const {data: userDetailData} = useGetUserDetailQuery()
-  const [userDetail, setUserDetail] = useState<IUserDetail>()
+  const { data: userDetailData } = useGetUserDetailQuery();
+  const [userDetail, setUserDetail] = useState<IUserDetail>();
 
   const [nickname, setNickname] = useState('');
   const { data: searchFriendData } = useGetFriendSearchQuery({
@@ -30,7 +30,7 @@ function FriendModal({ open, onClose }: ModalType) {
   useEffect(() => {
     setFriend(friendData);
     setSearch(searchFriendData);
-    setUserDetail(userDetailData)
+    setUserDetail(userDetailData);
   }, [friendData, searchFriendData, userDetailData]);
 
   //정렬기준
@@ -100,6 +100,7 @@ function FriendModal({ open, onClose }: ModalType) {
                   profileImg={friendInfo.nickname}
                   relationship={friendInfo.relationship}
                   haveNewPost={friendInfo.haveNewPost}
+                  // FIXME : 1 하드코딩
                   recentPostId={`/{blogUrl}/home/1/${friendInfo.recentPostId}`}
                 />
               );
@@ -139,6 +140,7 @@ function FriendModal({ open, onClose }: ModalType) {
                   profileImg={searchInfo.nickname}
                   relationship={searchInfo.relationship}
                   haveNewPost={searchInfo.haveNewPost}
+                  // FIXME : 1 하드코딩
                   recentPostId={`/${userDetail?.blogUrl}/home/1/${searchInfo.recentPostId}`}
                 />
               );
diff --git a/client/src/components/Post/Post.tsx b/client/src/components/Post/Post.tsx
index 994d06af..d4229b0a 100644
--- a/client/src/components/Post/Post.tsx
+++ b/client/src/components/Post/Post.tsx
@@ -21,7 +21,6 @@ function PostComponent({
   const isLaptop = useMediaQuery(theme.breakpoints.down('lg'));
 
   return (
-    // FIXME : Scrap 페이지에선 href 안 되어 있겠네
     <Post href={href ?? ''} isPhone={isPhone} isTablet={isTablet} isLaptop={isLaptop}>
       <Thumbnail>
         <PostPopular>
diff --git a/client/src/types/dto.ts b/client/src/types/dto.ts
index fd0194f9..5e29ad67 100644
--- a/client/src/types/dto.ts
+++ b/client/src/types/dto.ts
@@ -10,6 +10,7 @@ export interface ICollectPost {
   createdAt?: string;
   isPrivate?: boolean;
   likesCount?: number;
+  categoryId?: number;
   postId?: number;
   repliesCount?: number;
   thumbnail?: string | null;
@@ -28,6 +29,12 @@ export interface ISearchUser {
   nickname: string;
 }
 
+// 모아보기 페이지 검색
+export interface ISearch {
+  type: string;
+  value: string;
+}
+
 export interface ISearchTitle {
   title: string;
 }
@@ -447,8 +454,8 @@ export interface IBlogInfo {
 // pr unposted
 export interface IUnPostedPost {
   isAuthor: boolean;
-  prUnpostedDtos: {
-    prUnpostedDtos: {
+  prUnPostedDtos: {
+    prUnPostedDtos: {
       prId: number;
       prNumber: number;
       prTitle: string;

From 5f798b58ddea9b6017677ed63f5758a0a60f6e33 Mon Sep 17 00:00:00 2001
From: Chaeyeon1 <66813821+Chaeyeon1@users.noreply.github.com>
Date: Thu, 30 Nov 2023 05:10:26 +0900
Subject: [PATCH 4/8] =?UTF-8?q?PR=20=EB=A1=9C=EC=A7=81=20=EC=88=98?=
 =?UTF-8?q?=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../src/app/[blogName]/prList/[categoryId]/page.tsx | 13 ++++++-------
 client/src/app/write/Modal/SaveModal.tsx            |  6 +++---
 .../pr/update/[categoryId]/{ => [postId]}/page.tsx  |  6 +++---
 .../app/write/update/[categoryId]/[postId]/page.tsx |  2 +-
 client/src/components/Github/Github.tsx             |  3 +++
 5 files changed, 16 insertions(+), 14 deletions(-)
 rename client/src/app/write/pr/update/[categoryId]/{ => [postId]}/page.tsx (90%)

diff --git a/client/src/app/[blogName]/prList/[categoryId]/page.tsx b/client/src/app/[blogName]/prList/[categoryId]/page.tsx
index 7f533681..3a4a29a6 100644
--- a/client/src/app/[blogName]/prList/[categoryId]/page.tsx
+++ b/client/src/app/[blogName]/prList/[categoryId]/page.tsx
@@ -1,7 +1,6 @@
 'use client';
 
 import { useGetPRQuery, useGetPRUnpostedQuery } from '@/api/pr-api';
-// import { useGetPRQuery } from '@/api/pr-api';
 import Button from '@/components/Button/Button';
 import CenterContent from '@/components/Layout/CenterContent';
 import List from '@/components/List/List';
@@ -17,7 +16,9 @@ import { enqueueSnackbar } from 'notistack';
 
 function page({ params }: { params: { categoryId: string } }) {
   const { data: postedData } = useGetPRQuery({ categoryId: Number(params.categoryId) });
-  const { data: unPostedData } = useGetPRUnpostedQuery({ categoryId: Number(params.categoryId) });
+  const { data: unPostedData } = useGetPRUnpostedQuery({
+    categoryId: Number(params.categoryId),
+  });
   const [unPosted, setUnPosted] = useState(unPostedData);
   const queryClient = useQueryClient();
   const deleteWritePrQuery = useMutation(DeleteWriteApi, {
@@ -38,7 +39,6 @@ function page({ params }: { params: { categoryId: string } }) {
     setUnPosted(unPostedData);
   }, [unPostedData]);
 
-  console.log(unPosted);
   return (
     <CenterContent maxWidth="1080px">
       <Stack fontSize="24px" marginBottom="8px">
@@ -46,9 +46,8 @@ function page({ params }: { params: { categoryId: string } }) {
       </Stack>
       <Stack p={2} direction="row" spacing={4} overflow={'scroll'}>
         {unPosted?.prUnPostedDtos?.prUnPostedDtos?.map((unPost) => {
-          console.log('1', unPost);
           return (
-            <PageLink key={unPost.prId} href={`/write/pr/${Number(params.categoryId)}`}>
+            <PageLink key={unPost.prId} href={`/write/pr/${unPost.prId}`}>
               <Stack
                 sx={{
                   transition: 'all .35s ease-in-out',
@@ -63,7 +62,7 @@ function page({ params }: { params: { categoryId: string } }) {
                 justifyContent="space-around">
                 <Stack direction="row" justifyContent="space-between">
                   <Stack color="#000000" fontSize="20px" fontWeight="bold">
-                    #77
+                    #{unPost.prId}
                   </Stack>
                 </Stack>
                 <Stack
@@ -107,7 +106,7 @@ function page({ params }: { params: { categoryId: string } }) {
               content={post?.prTitle}
               buttonAction={
                 <Stack direction="row">
-                  <PageLink href={`/write/pr/update/${post.postId}`}>
+                  <PageLink href={`/write/pr/update/${Number(params.categoryId)}/${post.postId}`}>
                     <Button size="small" color="primary">
                       수정
                     </Button>
diff --git a/client/src/app/write/Modal/SaveModal.tsx b/client/src/app/write/Modal/SaveModal.tsx
index ad96422a..eabb4773 100644
--- a/client/src/app/write/Modal/SaveModal.tsx
+++ b/client/src/app/write/Modal/SaveModal.tsx
@@ -45,7 +45,7 @@ function SaveModal({
   const [image, setImage] = useState('');
   const [privateMode, setPrivateMode] = useState<'private' | 'public'>('private');
   const queryClient = useQueryClient();
-  const isPrUpdate = pathname.startsWith('/write/pr/update');
+  // const isPrUpdate = pathname.startsWith('/write/pr/update');
   const isPr = pathname.startsWith('/write/pr');
 
   const postWriteCreateQuery = useMutation(PostWriteApi, {
@@ -152,10 +152,10 @@ function SaveModal({
         title: writeProps?.title,
         content: writeProps?.content,
         isPrivate: privateMode === 'private' ? true : false,
-        prId: isPrUpdate ? Number(categoryId) : undefined,
+        // prId: isPrUpdate ? Number(postId) : undefined,
         hashtags: writeProps?.tags,
         categoryId: Number(categoryId),
-        postId,
+        postId: Number(postId),
       },
     });
 
diff --git a/client/src/app/write/pr/update/[categoryId]/page.tsx b/client/src/app/write/pr/update/[categoryId]/[postId]/page.tsx
similarity index 90%
rename from client/src/app/write/pr/update/[categoryId]/page.tsx
rename to client/src/app/write/pr/update/[categoryId]/[postId]/page.tsx
index bbb07cbd..00c98fff 100644
--- a/client/src/app/write/pr/update/[categoryId]/page.tsx
+++ b/client/src/app/write/pr/update/[categoryId]/[postId]/page.tsx
@@ -13,11 +13,11 @@ import {
   useTemplateIdSSR,
   useTemporaryIdSSR,
   useUserThemeSSR,
-} from '../../../../../../hooks/useRecoilSSR';
+} from '../../../../../../../hooks/useRecoilSSR';
 import { WriteProps } from '@/util/useWriteProps';
 import { useGetTemplateDetailQuery, useGetTemporaryDetailQuery } from '@/api/write-api';
 
-const PR = ({ params }: { params: { categoryId: number } }) => {
+const PR = ({ params }: { params: { categoryId: number; postId: number } }) => {
   const [userTheme] = useUserThemeSSR();
   const [title, setTitle] = useState<string>('');
   const [content, setContent] = useState<string | undefined>('');
@@ -73,7 +73,7 @@ const PR = ({ params }: { params: { categoryId: number } }) => {
         <TopButton />
       </ToolBar>
       <MDEditor height="68vh" value={content} onChange={setContent} />
-      <BottomButton categoryId={params.categoryId} writeProps={writeProps} />
+      <BottomButton categoryId={params.categoryId} postId={params.postId} writeProps={writeProps} />
     </Stack>
   );
 };
diff --git a/client/src/app/write/update/[categoryId]/[postId]/page.tsx b/client/src/app/write/update/[categoryId]/[postId]/page.tsx
index a3020645..8f0d6ba5 100644
--- a/client/src/app/write/update/[categoryId]/[postId]/page.tsx
+++ b/client/src/app/write/update/[categoryId]/[postId]/page.tsx
@@ -25,7 +25,7 @@ const Update = ({ params }: { params: { categoryId: number; postId: number } })
   const [tags, setTags] = useState<string[]>([]);
   const [templateId] = useTemplateIdSSR();
   const [temporaryId] = useTemporaryIdSSR();
-  const { data: postData } = useGetPostQuery({ postId: Number(params.postId) });
+  const { data: postData } = useGetPostQuery({ postId: Number(params.categoryId) });
 
   const { data: templateData, refetch: templateRefetch } = useGetTemplateDetailQuery({
     templateId,
diff --git a/client/src/components/Github/Github.tsx b/client/src/components/Github/Github.tsx
index ed38166a..4402ea22 100644
--- a/client/src/components/Github/Github.tsx
+++ b/client/src/components/Github/Github.tsx
@@ -7,6 +7,7 @@ import { useMutation, useQueryClient } from '@tanstack/react-query';
 import List from '../List/List';
 import Button from '../Button/Button';
 import { Stack } from '@mui/material';
+import { enqueueSnackbar } from 'notistack';
 
 function Github({
   open,
@@ -24,6 +25,8 @@ function Github({
   const putAllowFriendIdCreateQuery = useMutation(PostRepository, {
     onSuccess: () => {
       queryClient.invalidateQueries(['repository']);
+      onClose();
+      enqueueSnackbar({ message: 'Repository 연동이 완료되었습니다.', variant: 'success' });
     },
   });
   return (

From 01aaa18ebffe9e888b21f4c4ed16cd2a527d164c Mon Sep 17 00:00:00 2001
From: Chaeyeon1 <66813821+Chaeyeon1@users.noreply.github.com>
Date: Thu, 30 Nov 2023 05:30:42 +0900
Subject: [PATCH 5/8] =?UTF-8?q?=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC=20?=
 =?UTF-8?q?=EC=84=A4=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../components/DND/CategorySettingModal.tsx   | 42 ++++++++++---------
 client/src/components/DND/DragAndDrop.tsx     | 41 +++++++++++++-----
 client/src/components/Layout/Header.tsx       |  2 +-
 3 files changed, 53 insertions(+), 32 deletions(-)

diff --git a/client/src/components/DND/CategorySettingModal.tsx b/client/src/components/DND/CategorySettingModal.tsx
index 08ea0294..83b4eaa4 100644
--- a/client/src/components/DND/CategorySettingModal.tsx
+++ b/client/src/components/DND/CategorySettingModal.tsx
@@ -18,7 +18,7 @@ function CategorySettingModal({ open, categoryId, onClose }: CategorySettingModa
     },
   });
   const deleteClick = () => {
-    deleteCategoryQuery.mutate({ categoryId : categoryId });
+    deleteCategoryQuery.mutate({ categoryId: categoryId });
     onClose();
   };
 
@@ -35,42 +35,44 @@ function CategorySettingModal({ open, categoryId, onClose }: CategorySettingModa
     };
     putCategoryQuery.mutate(newCategoryNameBody);
     onClose();
-  }
+  };
   console.log(`카테고리 ID : ${categoryId}`);
 
   return (
     <Modal open={open} onClose={onClose}>
       <ModalTitle fontSize="24px" fontWeight="bold">
-        카테고리 설정
-        <Button
-          size="small"
-          variant="outlined"
-          color="error"
-          onClick={() => setDeleteDialogOpen(true)}
-          sx={{ width: 'fit-content', marginLeft: 3 }}>
-          카테고리 삭제
-        </Button>
+        <Stack direction="row" spacing={8} mb={6}>
+          <Stack>카테고리 설정</Stack>
+          <Button
+            size="small"
+            variant="outlined"
+            color="error"
+            onClick={() => setDeleteDialogOpen(true)}
+            sx={{ width: 'fit-content', marginLeft: 3 }}>
+            카테고리 삭제
+          </Button>
+        </Stack>
       </ModalTitle>
       <ModalContent sx={{ '&&.MuiDialogContent-root': { paddingTop: '0px' } }}>
         <Stack width="600px" spacing={5}>
-          <Stack fontSize="18px" fontWeight="bold">
+          <Stack fontSize="16px" fontWeight="bold">
             깃허브 연동 여부 : X
           </Stack>
           <Stack direction="row" alignItems="center" spacing={3}>
-            <Stack fontSize="18px" fontWeight="bold">
+            <Stack fontSize="16px" fontWeight="bold">
               카테고리 이름 :
             </Stack>
-            <TextField variant="standard" onChange={(e) => {
-              setNewCategoryName(e.target.value);
-            }} />
+            <TextField
+              variant="standard"
+              onChange={(e) => {
+                setNewCategoryName(e.target.value);
+              }}
+            />
           </Stack>
         </Stack>
       </ModalContent>
       <ModalActions>
-        <ModalButton
-          onClose={onClose}
-          action={{ content: '변경', action: putCategoryNameClick }}
-        />
+        <ModalButton onClose={onClose} action={{ content: '변경', action: putCategoryNameClick }} />
       </ModalActions>
       <Dialog
         open={deleteDialogOpen}
diff --git a/client/src/components/DND/DragAndDrop.tsx b/client/src/components/DND/DragAndDrop.tsx
index f11724f4..ffb92a26 100644
--- a/client/src/components/DND/DragAndDrop.tsx
+++ b/client/src/components/DND/DragAndDrop.tsx
@@ -8,7 +8,7 @@ import { useRouter } from 'next/navigation';
 import Image from 'next/image';
 import FootPrint from '../../../public/assets/yellowFootPrint.png';
 import IconButton from '../Button/IconButton';
-import { ArrowRight, Edit } from '@mui/icons-material';
+import { Add, Edit } from '@mui/icons-material';
 import CategorySettingModal from './CategorySettingModal';
 import PageLink from '../PageLink/PageLink';
 import Github from '../Github/Github';
@@ -82,7 +82,13 @@ function DragAndDrop({ rightContainer, footprintList, blogName }: DragAndDropPro
                             padding="4px 8px"
                             borderRadius="0px 8px">
                             <Stack direction="row" spacing={1}>
-                              <Stack color="#000000">{category.categoryName}</Stack>
+                              <PageLink href={`/${blogName}/home/${category.categoryId}`}>
+                                <Stack
+                                  sx={{ padding: 1, ':hover': { color: 'rgba(0,0,0,0.4)' } }}
+                                  color="#000000">
+                                  {category.categoryName}
+                                </Stack>
+                              </PageLink>
                               <IconButton
                                 onClick={() => {
                                   setCategoryEditOpen(true);
@@ -93,11 +99,13 @@ function DragAndDrop({ rightContainer, footprintList, blogName }: DragAndDropPro
                                 <Edit fontSize="small" />
                               </IconButton>
                             </Stack>
-                            <IconButton sx={{ padding: '0px' }} size="small">
-                              <PageLink href={`/${blogName}/home/${category.categoryId}`}>
-                                <ArrowRight />
+                            <Stack direction="row" alignItems="center" spacing={1}>
+                              <PageLink href={`/write/create/${category.categoryId}`}>
+                                <IconButton sx={{ padding: '0px' }} size="small">
+                                  <Add fontSize="small" />
+                                </IconButton>
                               </PageLink>
-                            </IconButton>
+                            </Stack>
                           </Stack>
                           {category?.isPrCategory ? (
                             <PageLink
@@ -105,8 +113,16 @@ function DragAndDrop({ rightContainer, footprintList, blogName }: DragAndDropPro
                                 setCategoryId(category.categoryId);
                               }}
                               href={`/${blogName}/prList/${category.categoryId}`}>
-                              <Stack sx={{ cursor: 'pointer' }} pl={4} py={1}>
-                                PR 연동
+                              <Stack
+                                height="100%"
+                                alignItems="center"
+                                sx={{
+                                  cursor: 'pointer',
+                                  ':hover': { color: 'rgba(0,0,0,0.4)' },
+                                }}
+                                pl={4}
+                                pt={1}>
+                                PR 연동 보러가기 {'->'}
                               </Stack>
                             </PageLink>
                           ) : (
@@ -115,10 +131,13 @@ function DragAndDrop({ rightContainer, footprintList, blogName }: DragAndDropPro
                                 setOpen(true);
                                 setCategoryId(category.categoryId);
                               }}
-                              sx={{ cursor: 'pointer' }}
+                              sx={{
+                                cursor: 'pointer',
+                                ':hover': { color: 'rgba(0,0,0,0.4)' },
+                              }}
                               pl={4}
-                              py={1}>
-                              PR 연동
+                              pt={1}>
+                              PR 연동 하러가기 {'->'}
                             </Stack>
                           )}
                           <Stack
diff --git a/client/src/components/Layout/Header.tsx b/client/src/components/Layout/Header.tsx
index 31da0993..e7cb6ef1 100644
--- a/client/src/components/Layout/Header.tsx
+++ b/client/src/components/Layout/Header.tsx
@@ -88,7 +88,7 @@ export default function Header() {
           borderRadius="20px"
           overflow="hidden"
           sx={{ cursor: 'pointer', backgroundColor: '#ffffff' }}>
-          <PageLink href={userDetail?.blogUrl ?? ''}>
+          <PageLink href={`/${userDetail?.blogUrl}` ?? ''}>
             <Image width={40} height={40} alt="profile Image" src={userDetail?.thumbnail ?? ''} />
           </PageLink>
         </Stack>

From 592d2c6162d72fc2fb311aa6f83e5fea013b7c9b Mon Sep 17 00:00:00 2001
From: Chaeyeon1 <66813821+Chaeyeon1@users.noreply.github.com>
Date: Thu, 30 Nov 2023 06:13:25 +0900
Subject: [PATCH 6/8] =?UTF-8?q?#163=20=EC=B9=B4=ED=85=8C=EA=B3=A0=EB=A6=AC?=
 =?UTF-8?q?=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 client/src/api/write-api.ts                   |   6 +
 .../home/[categoryId]/[postId]/page.tsx       |  29 ++-
 .../[categoryId]/[postId]/postId.style.tsx    |   3 +-
 client/src/components/DND/DragAndDrop.tsx     | 190 ++++++++++--------
 4 files changed, 137 insertions(+), 91 deletions(-)

diff --git a/client/src/api/write-api.ts b/client/src/api/write-api.ts
index 3083eefd..f68be981 100644
--- a/client/src/api/write-api.ts
+++ b/client/src/api/write-api.ts
@@ -22,6 +22,12 @@ export const UpdateWriteApi = async (body: FormData) => {
   return data;
 };
 
+export const AddLikeApi = async (params: { postId: number }) => {
+  const { data } = await defaultInstance.patch(`/post/like?postId=${params?.postId}`);
+
+  return data;
+};
+
 export const DeleteWriteApi = async (params: IRemovePostParams) => {
   const { data } = await defaultInstance.delete('/post', { params });
 
diff --git a/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx b/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
index 05f26d15..634133cf 100644
--- a/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
+++ b/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
@@ -2,6 +2,7 @@
 import {
   Avatar,
   Box,
+  Chip,
   Icon,
   Menu,
   MenuItem,
@@ -44,8 +45,9 @@ import CloseIcon from '@mui/icons-material/Close';
 import Image from 'next/image';
 import FootPrintAnimation from '@/components/FootPrint/FootPrintAnimation';
 import { usegetblogIdQuery } from '@/api/readme-api';
-import { DeleteWriteApi } from '@/api/write-api';
+import { AddLikeApi, DeleteWriteApi } from '@/api/write-api';
 import { enqueueSnackbar } from 'notistack';
+import ThumbUpIcon from '@mui/icons-material/ThumbUp';
 
 const page = ({ params }: { params: { blogName: string; categoryId: string; postId: string } }) => {
   const { data: blogIdData } = usegetblogIdQuery({ blogUrl: params.blogName });
@@ -83,6 +85,13 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
       queryClient.invalidateQueries(['replies']);
     },
   });
+
+  const patchAddLikeQuery = useMutation(AddLikeApi, {
+    onSuccess: () => {
+      queryClient.invalidateQueries(['post']);
+    },
+  });
+
   const ReplyOnClick = () => {
     const newReplyBody = {
       postId: Number(params.postId),
@@ -221,9 +230,25 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
         rightContainer={
           <Stack width={'100%'} bgcolor={userTheme === 'dark' ? 'transparent' : '#FCFAF1'} p={12}>
             <MDEditor.Markdown source={post?.content} />
-
             {/* 댓글 */}
             <PostReply>
+              <Stack mb={8} spacing={2}>
+                <Stack direction="row" spacing={4} alignItems="center">
+                  <Stack>조회수 : {post?.viewsCount} </Stack>
+                  <Stack direction="row" alignItems="center" spacing={1}>
+                    <Stack>추천수 : {post?.likesCount} </Stack>
+                    <IconButton
+                      onClick={() => patchAddLikeQuery.mutate({ postId: Number(params?.postId) })}>
+                      <ThumbUpIcon color={post?.isLiked ? 'primary' : undefined} />
+                    </IconButton>
+                  </Stack>
+                </Stack>
+                {post?.hashtags?.map((hashtag, i) => {
+                  return (
+                    <Chip color="primary" sx={{ width: 'fit-content' }} key={i} label={hashtag} />
+                  );
+                })}
+              </Stack>
               <ReplyHandle>
                 <Stack flexDirection={'row'}>
                   <Stack>
diff --git a/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx b/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx
index 76fac7cd..910d9075 100644
--- a/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx
+++ b/client/src/app/[blogName]/home/[categoryId]/[postId]/postId.style.tsx
@@ -47,13 +47,14 @@ export const ProfileImg = styled(Stack)(({ imageSrc }: { imageSrc: string }) =>
 }));
 
 export const PostReply = styled(Stack)({
+  marginTop: '60px',
   height: '100%',
   flexDirection: 'column',
 });
 
 export const ReplyHandle = styled(Stack)({
   flexDirection: 'row',
-  marginBottom: '20px',
+  // marginBottom: '20px',
 });
 
 export const ReplyCount = styled(Stack)({});
diff --git a/client/src/components/DND/DragAndDrop.tsx b/client/src/components/DND/DragAndDrop.tsx
index ffb92a26..6cae261a 100644
--- a/client/src/components/DND/DragAndDrop.tsx
+++ b/client/src/components/DND/DragAndDrop.tsx
@@ -1,7 +1,7 @@
 'use client';
 import React, { ReactNode } from 'react';
 import CenterContent from '@/components/Layout/CenterContent';
-import { Stack } from '@mui/material';
+import { Stack, Tooltip } from '@mui/material';
 import { useEffect, useState } from 'react';
 import { DragDropContext, Droppable, Draggable, DropResult } from 'react-beautiful-dnd';
 import { useRouter } from 'next/navigation';
@@ -58,7 +58,13 @@ function DragAndDrop({ rightContainer, footprintList, blogName }: DragAndDropPro
           <CenterContent bgcolor="transparent">
             <Stack gap={8} width="100%" height="100%" direction="row">
               <Stack sx={{ transition: 'all .35s ease-in-out' }} position="relative" gap={8}>
-                <Button onClick={() => setCreateCategoryOpen(true)}>카테고리 생성</Button>
+                <Button
+                  variant="outlined"
+                  fullWidth
+                  onClick={() => setCreateCategoryOpen(true)}
+                  sx={{ marginBottom: '-24px' }}>
+                  카테고리 생성
+                </Button>
                 {footprintList?.map((category) => {
                   return (
                     <Droppable key={category.categoryId} droppableId={String(category.categoryId)}>
@@ -72,9 +78,6 @@ function DragAndDrop({ rightContainer, footprintList, blogName }: DragAndDropPro
                           }}
                           {...provided.droppableProps}
                           ref={provided.innerRef}>
-                          <PageLink href={`/write/create/${category.categoryId}`}>
-                            <Stack sx={{ cursor: 'pointer', width: 'fit-content' }}>글쓰기</Stack>
-                          </PageLink>
                           <Stack
                             direction="row"
                             justifyContent="space-between"
@@ -83,112 +86,123 @@ function DragAndDrop({ rightContainer, footprintList, blogName }: DragAndDropPro
                             borderRadius="0px 8px">
                             <Stack direction="row" spacing={1}>
                               <PageLink href={`/${blogName}/home/${category.categoryId}`}>
-                                <Stack
-                                  sx={{ padding: 1, ':hover': { color: 'rgba(0,0,0,0.4)' } }}
-                                  color="#000000">
-                                  {category.categoryName}
-                                </Stack>
+                                <Tooltip title="카테고리 모아보기" placement="left">
+                                  <Stack
+                                    sx={{ padding: 1, ':hover': { color: 'rgba(0,0,0,0.4)' } }}
+                                    color="#000000">
+                                    {category.categoryName}
+                                  </Stack>
+                                </Tooltip>
                               </PageLink>
-                              <IconButton
+                              <Tooltip
                                 onClick={() => {
                                   setCategoryEditOpen(true);
                                   setParamsCategoryId(category.categoryId);
                                 }}
-                                sx={{ padding: '0px' }}
-                                size="small">
-                                <Edit fontSize="small" />
-                              </IconButton>
+                                title="게시글 수정">
+                                <IconButton sx={{ padding: '0px' }} size="small">
+                                  <Edit fontSize="small" />
+                                </IconButton>
+                              </Tooltip>
                             </Stack>
                             <Stack direction="row" alignItems="center" spacing={1}>
                               <PageLink href={`/write/create/${category.categoryId}`}>
-                                <IconButton sx={{ padding: '0px' }} size="small">
-                                  <Add fontSize="small" />
-                                </IconButton>
+                                <Tooltip title="게시글 작성">
+                                  <IconButton sx={{ padding: '0px' }} size="small">
+                                    <Add fontSize="small" />
+                                  </IconButton>
+                                </Tooltip>
                               </PageLink>
                             </Stack>
                           </Stack>
-                          {category?.isPrCategory ? (
-                            <PageLink
-                              onClick={() => {
-                                setCategoryId(category.categoryId);
-                              }}
-                              href={`/${blogName}/prList/${category.categoryId}`}>
+                          <Stack>
+                            {category?.isPrCategory ? (
+                              <PageLink
+                                onClick={() => {
+                                  setCategoryId(category.categoryId);
+                                }}
+                                href={`/${blogName}/prList/${category.categoryId}`}>
+                                <Stack
+                                  height="100%"
+                                  alignItems="center"
+                                  sx={{
+                                    fontSize: '14px',
+                                    cursor: 'pointer',
+                                    ':hover': { color: 'rgba(0,0,0,0.4)' },
+                                  }}
+                                  pl={4}
+                                  pt={1}>
+                                  PR 연동 보러가기 {'->'}
+                                </Stack>
+                              </PageLink>
+                            ) : (
                               <Stack
-                                height="100%"
-                                alignItems="center"
+                                onClick={() => {
+                                  setOpen(true);
+                                  setCategoryId(category.categoryId);
+                                }}
                                 sx={{
+                                  fontSize: '14px',
                                   cursor: 'pointer',
                                   ':hover': { color: 'rgba(0,0,0,0.4)' },
                                 }}
                                 pl={4}
                                 pt={1}>
-                                PR 연동 보러가기 {'->'}
+                                PR 연동 하러가기 {'->'}
                               </Stack>
-                            </PageLink>
-                          ) : (
+                            )}
+                          </Stack>
+                          {!category?.isPrCategory && (
                             <Stack
-                              onClick={() => {
-                                setOpen(true);
-                                setCategoryId(category.categoryId);
-                              }}
                               sx={{
-                                cursor: 'pointer',
-                                ':hover': { color: 'rgba(0,0,0,0.4)' },
-                              }}
-                              pl={4}
-                              pt={1}>
-                              PR 연동 하러가기 {'->'}
+                                padding: '8px',
+                                borderRadius: '8px',
+                              }}>
+                              {category.postTitleDtos?.map((post) => {
+                                return (
+                                  <Draggable
+                                    key={post.postId}
+                                    draggableId={`${post.postId}`}
+                                    index={post.postId}>
+                                    {(provided) => (
+                                      <Stack
+                                        sx={{
+                                          padding: '4px 8px',
+                                          ':hover': {
+                                            borderRadius: '8px',
+                                            backgroundColor: 'primary.light',
+                                          },
+                                          ':active': {
+                                            backgroundColor: 'transparent',
+                                          },
+                                        }}
+                                        ref={provided.innerRef}
+                                        {...provided.draggableProps}
+                                        {...provided.dragHandleProps}>
+                                        <PageLink
+                                          href={`/${blogName}/home/${category.categoryId}/${post.postId}`}>
+                                          <Stack
+                                            direction="row"
+                                            justifyContent="left"
+                                            alignItems="center"
+                                            width="fit-content"
+                                            gap={2}>
+                                            <Image
+                                              src={FootPrint}
+                                              alt="footPrint"
+                                              width="15"
+                                              height="15"
+                                            />
+                                            <Stack width="101px">{post.title}</Stack>
+                                          </Stack>
+                                        </PageLink>
+                                      </Stack>
+                                    )}
+                                  </Draggable>
+                                );
+                              })}
                             </Stack>
                           )}
-                          <Stack
-                            sx={{
-                              padding: '8px',
-                              borderRadius: '8px',
-                            }}>
-                            {category.postTitleDtos?.map((post) => {
-                              return (
-                                <Draggable
-                                  key={post.postId}
-                                  draggableId={`${post.postId}`}
-                                  index={post.postId}>
-                                  {(provided) => (
-                                    <Stack
-                                      sx={{
-                                        padding: '4px 8px',
-                                        ':hover': {
-                                          borderRadius: '8px',
-                                          backgroundColor: 'primary.light',
-                                        },
-                                        ':active': {
-                                          backgroundColor: 'transparent',
-                                        },
-                                      }}
-                                      ref={provided.innerRef}
-                                      {...provided.draggableProps}
-                                      {...provided.dragHandleProps}>
-                                      <PageLink
-                                        href={`/${blogName}/home/${category.categoryId}/${post.postId}`}>
-                                        <Stack
-                                          direction="row"
-                                          justifyContent="left"
-                                          alignItems="center"
-                                          width="fit-content"
-                                          gap={2}>
-                                          <Image
-                                            src={FootPrint}
-                                            alt="footPrint"
-                                            width="15"
-                                            height="15"
-                                          />
-                                          <Stack width="101px">{post.title}</Stack>
-                                        </Stack>
-                                      </PageLink>
-                                    </Stack>
-                                  )}
-                                </Draggable>
-                              );
-                            })}
-                          </Stack>
                           {provided.placeholder}
                         </div>
                       )}

From 2d21cf6cbc3e2891fb6801aa6ddd29f4b7b9d4f1 Mon Sep 17 00:00:00 2001
From: Chaeyeon1 <66813821+Chaeyeon1@users.noreply.github.com>
Date: Thu, 30 Nov 2023 06:16:42 +0900
Subject: [PATCH 7/8] =?UTF-8?q?UI=20=EB=B3=80=EA=B2=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../home/[categoryId]/[postId]/page.tsx       | 23 ++++++++++---------
 1 file changed, 12 insertions(+), 11 deletions(-)

diff --git a/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx b/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
index 634133cf..5a4046ae 100644
--- a/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
+++ b/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
@@ -51,7 +51,7 @@ import ThumbUpIcon from '@mui/icons-material/ThumbUp';
 
 const page = ({ params }: { params: { blogName: string; categoryId: string; postId: string } }) => {
   const { data: blogIdData } = usegetblogIdQuery({ blogUrl: params.blogName });
-  const [blogId, setBlogId] = useState<IBlogId>();
+  const [, setBlogId] = useState<IBlogId>();
   const { data: sidebarData } = useGetSidebarQuery({ blogId: blogIdData });
   const { data: postData } = useGetPostQuery({ postId: Number(params.postId) });
   const [IntroduceOpen, setIntroduceOpen] = useState<boolean>(false);
@@ -59,8 +59,6 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
   const router = useRouter();
   const theme = useTheme();
 
-  console.log(`useState blogId : ${blogId}`);
-
   //[FIXME: repliese get할 때 body말고 parameter로 바뀌어졌을 때 useState() 바꿔주기]
   const [page, setPage] = useState(0);
   const [order, setOrder] = useState('like');
@@ -234,20 +232,23 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
             <PostReply>
               <Stack mb={8} spacing={2}>
                 <Stack direction="row" spacing={4} alignItems="center">
-                  <Stack>조회수 : {post?.viewsCount} </Stack>
-                  <Stack direction="row" alignItems="center" spacing={1}>
-                    <Stack>추천수 : {post?.likesCount} </Stack>
+                  <Stack fontSize="14px">조회수 : {post?.viewsCount} </Stack>
+                  <Stack direction="row" alignItems="center" spacing={2}>
+                    <Stack fontSize="14px">추천수 : {post?.likesCount} </Stack>
                     <IconButton
+                      size="small"
                       onClick={() => patchAddLikeQuery.mutate({ postId: Number(params?.postId) })}>
                       <ThumbUpIcon color={post?.isLiked ? 'primary' : undefined} />
                     </IconButton>
                   </Stack>
                 </Stack>
-                {post?.hashtags?.map((hashtag, i) => {
-                  return (
-                    <Chip color="primary" sx={{ width: 'fit-content' }} key={i} label={hashtag} />
-                  );
-                })}
+                <Stack direction="row" spacing={2}>
+                  {post?.hashtags?.map((hashtag, i) => {
+                    return (
+                      <Chip color="primary" sx={{ width: 'fit-content' }} key={i} label={hashtag} />
+                    );
+                  })}
+                </Stack>
               </Stack>
               <ReplyHandle>
                 <Stack flexDirection={'row'}>

From 76cd352b376d8e1cd47aa4cd1a9324a4d6723848 Mon Sep 17 00:00:00 2001
From: Chaeyeon1 <66813821+Chaeyeon1@users.noreply.github.com>
Date: Thu, 30 Nov 2023 06:33:35 +0900
Subject: [PATCH 8/8] PRList

---
 .../home/[categoryId]/[postId]/page.tsx       | 19 ++--
 .../[blogName]/prList/[categoryId]/page.tsx   | 79 +++++++----------
 client/src/components/DND/DragAndDrop.tsx     | 86 +++++++++++--------
 3 files changed, 93 insertions(+), 91 deletions(-)

diff --git a/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx b/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
index 5a4046ae..185972e7 100644
--- a/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
+++ b/client/src/app/[blogName]/home/[categoryId]/[postId]/page.tsx
@@ -210,12 +210,18 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
                   <IconButton color="white">
                     <Home fontSize="small" onClick={() => router.push(`/${params.blogName}`)} />
                   </IconButton>
-                  <PageLink href={`/write/update/${params.categoryId}/${params.postId}`}>
-                    <Button>수정</Button>
-                  </PageLink>
-                  <Button onClick={() => deletePrPostOnClick(Number(params?.postId))} color="error">
-                    삭제
-                  </Button>
+                  {post?.isAuthor && (
+                    <>
+                      <PageLink href={`/write/update/${params.categoryId}/${params.postId}`}>
+                        <Button>수정</Button>
+                      </PageLink>
+                      <Button
+                        onClick={() => deletePrPostOnClick(Number(params?.postId))}
+                        color="error">
+                        삭제
+                      </Button>
+                    </>
+                  )}
                 </Stack>
               </Stack>
             </Stack>
@@ -223,6 +229,7 @@ const page = ({ params }: { params: { blogName: string; categoryId: string; post
         </BlackContainer>
       </ThumbnailArea>
       <DragAndDrop
+        post={post}
         blogName={params.blogName}
         footprintList={writeList}
         rightContainer={
diff --git a/client/src/app/[blogName]/prList/[categoryId]/page.tsx b/client/src/app/[blogName]/prList/[categoryId]/page.tsx
index 3a4a29a6..3f262935 100644
--- a/client/src/app/[blogName]/prList/[categoryId]/page.tsx
+++ b/client/src/app/[blogName]/prList/[categoryId]/page.tsx
@@ -9,7 +9,6 @@ import { Stack } from '@mui/material';
 import Image from 'next/image';
 import React, { useEffect, useState } from 'react';
 import EmptyContent from '../../../../../public/assets/box.png';
-import Complete from '../../../../../public/assets/complete-icon.svg';
 import { useMutation, useQueryClient } from '@tanstack/react-query';
 import { DeleteWriteApi } from '@/api/write-api';
 import { enqueueSnackbar } from 'notistack';
@@ -45,54 +44,40 @@ function page({ params }: { params: { categoryId: string } }) {
         작성하지 않은 PR
       </Stack>
       <Stack p={2} direction="row" spacing={4} overflow={'scroll'}>
-        {unPosted?.prUnPostedDtos?.prUnPostedDtos?.map((unPost) => {
-          return (
-            <PageLink key={unPost.prId} href={`/write/pr/${unPost.prId}`}>
-              <Stack
-                sx={{
-                  transition: 'all .35s ease-in-out',
-                  cursor: 'pointer',
-                  ':hover': { transform: 'translateY(-4px)' },
-                }}
-                minWidth="220px"
-                height="124px"
-                bgcolor="primary.main"
-                p={4}
-                borderRadius="8px"
-                justifyContent="space-around">
-                <Stack direction="row" justifyContent="space-between">
-                  <Stack color="#000000" fontSize="20px" fontWeight="bold">
-                    #{unPost.prId}
-                  </Stack>
-                </Stack>
+        {unPosted?.isAuthor &&
+          unPosted?.prUnPostedDtos?.prUnPostedDtos?.map((unPost) => {
+            return (
+              <PageLink key={unPost.prId} href={`/write/pr/${unPost.prId}`}>
                 <Stack
-                  color="#000000"
-                  sx={{ wordBreak: 'break-all' }}
-                  overflow="hidden"
-                  textOverflow="ellipsis"
-                  display="inline"
-                  whiteSpace="nowrap">
-                  {unPost.prTitle}
+                  sx={{
+                    transition: 'all .35s ease-in-out',
+                    cursor: 'pointer',
+                    ':hover': { transform: 'translateY(-4px)' },
+                  }}
+                  minWidth="220px"
+                  height="124px"
+                  bgcolor="primary.main"
+                  p={4}
+                  borderRadius="8px"
+                  justifyContent="space-around">
+                  <Stack direction="row" justifyContent="space-between">
+                    <Stack color="#000000" fontSize="20px" fontWeight="bold">
+                      #{unPost.prId}
+                    </Stack>
+                  </Stack>
+                  <Stack
+                    color="#000000"
+                    sx={{ wordBreak: 'break-all' }}
+                    overflow="hidden"
+                    textOverflow="ellipsis"
+                    display="inline"
+                    whiteSpace="nowrap">
+                    {unPost.prTitle}
+                  </Stack>
                 </Stack>
-              </Stack>
-            </PageLink>
-          );
-        }) ?? (
-          <Stack
-            width="100%"
-            direction="column"
-            spacing={4}
-            justifyContent="center"
-            alignItems="center"
-            height={200}>
-            <Stack width={40} height={40}>
-              <Complete color="#834" />
-            </Stack>
-            <Stack fontSize={'18px'} width="fit-content">
-              모든 PR 글 작성을 완료하셨습니다.
-            </Stack>
-          </Stack>
-        )}
+              </PageLink>
+            );
+          })}
       </Stack>
       <Stack margin="40px 0px 8px 0px" fontSize="24px">
         작성한 PR 목록
diff --git a/client/src/components/DND/DragAndDrop.tsx b/client/src/components/DND/DragAndDrop.tsx
index 6cae261a..7db5d9cd 100644
--- a/client/src/components/DND/DragAndDrop.tsx
+++ b/client/src/components/DND/DragAndDrop.tsx
@@ -14,6 +14,7 @@ import PageLink from '../PageLink/PageLink';
 import Github from '../Github/Github';
 import Button from '../Button/Button';
 import CreateCategoryModal from './CreateCategoryModal';
+import { IPostContent } from '@/types/dto';
 
 type Footprint = {
   categoryId: number;
@@ -30,9 +31,10 @@ interface DragAndDropProps {
   rightContainer: ReactNode;
   footprintList?: Footprint[];
   categoryNumber?: string;
+  post?: IPostContent;
 }
 
-function DragAndDrop({ rightContainer, footprintList, blogName }: DragAndDropProps) {
+function DragAndDrop({ rightContainer, footprintList, blogName, post }: DragAndDropProps) {
   const [isBrowser, setIsBrowser] = useState(false);
   const [categoryEditOpen, setCategoryEditOpen] = useState(false);
   const [createCategoryOpen, setCreateCategoryOpen] = useState(false);
@@ -58,13 +60,15 @@ function DragAndDrop({ rightContainer, footprintList, blogName }: DragAndDropPro
           <CenterContent bgcolor="transparent">
             <Stack gap={8} width="100%" height="100%" direction="row">
               <Stack sx={{ transition: 'all .35s ease-in-out' }} position="relative" gap={8}>
-                <Button
-                  variant="outlined"
-                  fullWidth
-                  onClick={() => setCreateCategoryOpen(true)}
-                  sx={{ marginBottom: '-24px' }}>
-                  카테고리 생성
-                </Button>
+                {post?.isAuthor && (
+                  <Button
+                    variant="outlined"
+                    fullWidth
+                    onClick={() => setCreateCategoryOpen(true)}
+                    sx={{ marginBottom: '-24px' }}>
+                    카테고리 생성
+                  </Button>
+                )}
                 {footprintList?.map((category) => {
                   return (
                     <Droppable key={category.categoryId} droppableId={String(category.categoryId)}>
@@ -94,25 +98,29 @@ function DragAndDrop({ rightContainer, footprintList, blogName }: DragAndDropPro
                                   </Stack>
                                 </Tooltip>
                               </PageLink>
-                              <Tooltip
-                                onClick={() => {
-                                  setCategoryEditOpen(true);
-                                  setParamsCategoryId(category.categoryId);
-                                }}
-                                title="게시글 수정">
-                                <IconButton sx={{ padding: '0px' }} size="small">
-                                  <Edit fontSize="small" />
-                                </IconButton>
-                              </Tooltip>
-                            </Stack>
-                            <Stack direction="row" alignItems="center" spacing={1}>
-                              <PageLink href={`/write/create/${category.categoryId}`}>
-                                <Tooltip title="게시글 작성">
+                              {post?.isAuthor && (
+                                <Tooltip
+                                  onClick={() => {
+                                    setCategoryEditOpen(true);
+                                    setParamsCategoryId(category.categoryId);
+                                  }}
+                                  title="게시글 수정">
                                   <IconButton sx={{ padding: '0px' }} size="small">
-                                    <Add fontSize="small" />
+                                    <Edit fontSize="small" />
                                   </IconButton>
                                 </Tooltip>
-                              </PageLink>
+                              )}
+                            </Stack>
+                            <Stack direction="row" alignItems="center" spacing={1}>
+                              {post?.isAuthor && (
+                                <PageLink href={`/write/create/${category.categoryId}`}>
+                                  <Tooltip title="게시글 작성">
+                                    <IconButton sx={{ padding: '0px' }} size="small">
+                                      <Add fontSize="small" />
+                                    </IconButton>
+                                  </Tooltip>
+                                </PageLink>
+                              )}
                             </Stack>
                           </Stack>
                           <Stack>
@@ -136,20 +144,22 @@ function DragAndDrop({ rightContainer, footprintList, blogName }: DragAndDropPro
                                 </Stack>
                               </PageLink>
                             ) : (
-                              <Stack
-                                onClick={() => {
-                                  setOpen(true);
-                                  setCategoryId(category.categoryId);
-                                }}
-                                sx={{
-                                  fontSize: '14px',
-                                  cursor: 'pointer',
-                                  ':hover': { color: 'rgba(0,0,0,0.4)' },
-                                }}
-                                pl={4}
-                                pt={1}>
-                                PR 연동 하러가기 {'->'}
-                              </Stack>
+                              post?.isAuthor && (
+                                <Stack
+                                  onClick={() => {
+                                    setOpen(true);
+                                    setCategoryId(category.categoryId);
+                                  }}
+                                  sx={{
+                                    fontSize: '14px',
+                                    cursor: 'pointer',
+                                    ':hover': { color: 'rgba(0,0,0,0.4)' },
+                                  }}
+                                  pl={4}
+                                  pt={1}>
+                                  PR 연동 하러가기 {'->'}
+                                </Stack>
+                              )
                             )}
                           </Stack>
                           {!category?.isPrCategory && (