Readme 수정

pknu-wap · Nov 30, 2023 · c8e2b1b · c8e2b1b
1 parent cd458dd
commit c8e2b1b
Show file tree

Hide file tree

Showing 4 changed files with 33 additions and 23 deletions.
diff --git a/client/src/app/[blogName]/page.tsx b/client/src/app/[blogName]/page.tsx
@@ -17,7 +17,7 @@ const Home = ({ params }: { params: { blogName: string } }) => {
 
   const { data: sidebarData } = useGetSidebarQuery({ blogId: blogIdData });
   const { data: readMeData } = useGetReadMeQuery({ blogId: blogIdData });
-  const [readMe, setReadMe] = useState('');
+  const [readMe, setReadMe] = useState<{ blogName: string; content: string; isMe: boolean }>();
   const router = useRouter();
 
   useEffect(() => {
@@ -31,21 +31,26 @@ const Home = ({ params }: { params: { blogName: string } }) => {
         blogName={params.blogName}
         footprintList={writeList}
         rightContainer={
-          <Stack alignItems="flex-end" spacing={2}>
-            <Button
-              onClick={() => router.push(`/write/readme/${params.blogName}`)}
-              sx={{ width: 'fit-content' }}
-              variant="contained">
-              수정
-            </Button>
+          <Stack spacing={3}>
+            <Stack direction="row" alignItems="center" justifyContent="space-between">
+              <Stack sx={{ fontSize: '24px' }}>{readMe?.blogName}</Stack>
+              {readMe?.isMe && (
+                <Button
+                  onClick={() => router.push(`/write/readme/${params.blogName}`)}
+                  sx={{ width: 'fit-content' }}
+                  variant="contained">
+                  수정
+                </Button>
+              )}
+            </Stack>
             <Stack
               boxShadow="2px 2px 5px rgba(0, 0, 0, 0.1)"
               p={8}
               width="100%"
               margin="auto"
               minHeight="80vh"
               overflow={'scroll'}>
-              <MDEditor.Markdown source={readMe} />
+              <MDEditor.Markdown source={readMe?.content} />
             </Stack>
           </Stack>
         }

diff --git a/client/src/app/globals.css b/client/src/app/globals.css
@@ -30,6 +30,11 @@ html {
 .wmde-markdown h1 {
   border-bottom: transparent !important;
 }
+
+.wmde-markdown p {
+  color: #000;
+  border-bottom: transparent !important;
+}
 .wmde-markdown h2 {
   border-bottom: transparent !important;
 }

diff --git a/client/src/components/DND/CategorySettingModal.tsx b/client/src/components/DND/CategorySettingModal.tsx
@@ -20,8 +20,8 @@ function CategorySettingModal({ open, categoryId, onClose }: CategorySettingModa
     },
     onError() {
       enqueueSnackbar({ message: '카테고리가 삭제되지 않았습니다', variant: 'error' });
-    }
-    });
+    },
+  });
   const deleteClick = () => {
     deleteCategoryQuery.mutate({ categoryId: categoryId });
     onClose();
@@ -59,16 +59,15 @@ function CategorySettingModal({ open, categoryId, onClose }: CategorySettingModa
         </Stack>
       </ModalTitle>
       <ModalContent sx={{ '&&.MuiDialogContent-root': { paddingTop: '0px' } }}>
-        <Stack width="600px" spacing={5}>
-          <Stack fontSize="16px" fontWeight="bold">
-            깃허브 연동 여부 : X
-          </Stack>
-          <Stack direction="row" alignItems="center" spacing={3}>
+        <Stack mt={4} width="600px" spacing={5}>
+          <Stack direction="row" alignItems="center" spacing={8}>
             <Stack fontSize="16px" fontWeight="bold">
-              카테고리 이름 :
+              카테고리 이름
             </Stack>
             <TextField
-              variant="standard"
+              sx={{ width: '350px' }}
+              variant="outlined"
+              size="small"
               onChange={(e) => {
                 setNewCategoryName(e.target.value);
               }}

diff --git a/client/src/components/DND/CreateCategoryModal.tsx b/client/src/components/DND/CreateCategoryModal.tsx
@@ -32,17 +32,18 @@ function CreateCategoryModal({ open, onClose }: ModalType) {
 
   return (
     <Modal open={open} onClose={onClose}>
-      <ModalTitle fontSize="24px" fontWeight="bold">
+      <ModalTitle mb={8} fontSize="24px" fontWeight="bold">
         카테고리 생성
       </ModalTitle>
       <ModalContent sx={{ '&&.MuiDialogContent-root': { paddingTop: '0px' } }}>
-        <Stack width="600px" spacing={5}>
-          <Stack direction="row" alignItems="center" spacing={3}>
+        <Stack spacing={5}>
+          <Stack direction="row" alignItems="center" spacing={8}>
             <Stack fontSize="18px" fontWeight="bold">
-              카테고리 이름 :
+              카테고리 이름
             </Stack>
             <TextField
-              variant="standard"
+              variant="outlined"
+              size="small"
               onChange={(e) => {
                 setCategoryName(e.target.value);
               }}