fix: 접근 권한 페이지 UI 수정, 게시글 수정 메뉴 수정 (#87)

CAUCSE · Mar 7, 2024 · 387a6c3 · 387a6c3
1 parent c34fe93
commit 387a6c3
Show file tree

Hide file tree

Showing 6 changed files with 46 additions and 19 deletions.
diff --git a/src/pages/auth/NoPermission/NoPermissionPage.tsx b/src/pages/auth/NoPermission/NoPermissionPage.tsx
@@ -1,3 +1,4 @@
+import styled from '@emotion/styled';
 import { observer } from 'mobx-react-lite';
 import React from 'react';
 
@@ -9,12 +10,30 @@ import { PAGE_URL } from '@/configs/path';
 const NoPermissionPage: React.FC = observer(() => {
   return (
     <>
-      <Header withBack={PAGE_URL.Home} title="경고" />
+      <Header withBack={PAGE_URL.Home} title="접근 불가" />
       <PageBody>
-        <BodyScreen>접근 권한이 없습니다.</BodyScreen>
+        <Wrapper>
+          <img src="/images/empty.png" alt="Empty list logo" />
+          <br />
+          권한이 없습니다.
+        </Wrapper>
       </PageBody>
     </>
   );
 });
 
+const Wrapper = styled.div`
+  margin: 160px 0 10px;
+  font-size: 17px;
+  //font-weight: bolder;
+  color: gray;
+  line-height: 12px;
+  text-align: center;
+
+  > img {
+    margin-bottom: 10px;
+    width: 100px;
+  }
+`;
+
 export default PageStoreHOC(<NoPermissionPage />, { store: PageUiStoreImpl });
diff --git a/src/pages/board/postDetail/components/PostDetailMenu.tsx b/src/pages/board/postDetail/components/PostDetailMenu.tsx
@@ -30,8 +30,8 @@ export const PostDetailMenu: React.FC = observer(() => {
         <MoreVertIcon />
       </HeaderIconButton>
       <Menu anchorEl={anchorEl} open={open} onClose={handleClose}>
-        <MenuItem onClick={handleEdit}>게시글 수정</MenuItem>
-        <MenuItem onClick={handleDelete}>게시글 삭제</MenuItem>
+        {post.updatable ? <MenuItem onClick={handleEdit}>게시글 수정</MenuItem> : null}
+        {post.deletable ? <MenuItem onClick={handleDelete}>게시글 삭제</MenuItem> : null}
       </Menu>
     </>
   ) : null;

diff --git a/src/pages/board/postDetail/styled.ts b/src/pages/board/postDetail/styled.ts
@@ -6,7 +6,7 @@ export const PostContent = styled.p`
   font-size: 14px;
   line-height: 1.5;
 
-  > img {
+  > p {
     width: 100%;
     height: 100%;
   }

diff --git a/src/pages/board/postEditor/PostEditorPageUiStore.ts b/src/pages/board/postEditor/PostEditorPageUiStore.ts
@@ -41,7 +41,7 @@ export class PostEditorPageUiStore {
     try {
       this.post = (yield Repo.create(body)) as Model.Post;
 
-      return this.post;
+      return { post: this.post };
     } catch (error) {
       return error;
     } finally {

diff --git a/src/pages/board/postEditor/components/TitleInputHeader.tsx b/src/pages/board/postEditor/components/TitleInputHeader.tsx
@@ -8,6 +8,7 @@ import { BackButton, Header, SubmitButton, TitleInput } from '../styled';
 import { Breadcrumb } from '@/components';
 import { PAGE_URL, PostParams } from '@/configs/path';
 import { usePageUiStore } from '@/hooks';
+import { useRootStore } from '@/stores';
 
 export const TitleInputHeader: React.FC = observer(() => {
   const isEdit = !!useRouteMatch(PAGE_URL.PostEdit);
@@ -17,19 +18,31 @@ export const TitleInputHeader: React.FC = observer(() => {
   const { post, boardName, submitDisabled, edit, create } =
     usePageUiStore<PageUiStore.PostEditor>();
   const { register, setValue, handleSubmit } = useFormContext();
+  const {
+    ui: { alert },
+  } = useRootStore();
 
   const onSubmit = useCallback(
     async data => {
       let curPostId = postId;
 
-      if (isEdit) await edit(postId, data);
-      else {
-        const post = (await create({ ...data, boardId })) as unknown as Model.Post;
-        curPostId = post.id;
+      if (isEdit) {
+        await edit(postId, data);
+        if (state?.prevDetail) goBack();
+        else replace(generatePath(PAGE_URL.PostDetail, { boardId, postId: curPostId }));
+      } else {
+        const { post, message } = (await create({ ...data, boardId })) as unknown as {
+          post?: Model.Post;
+          message?: string;
+        };
+        if (post) {
+          curPostId = post.id;
+          if (state?.prevDetail) goBack();
+          else replace(generatePath(PAGE_URL.PostDetail, { boardId, postId: curPostId }));
+        } else if (message) {
+          alert({ message });
+        }
       }
-
-      if (state?.prevDetail) goBack();
-      else replace(generatePath(PAGE_URL.PostDetail, { boardId, postId: curPostId }));
     },
     [postId, replace, state],
   );

diff --git a/src/pages/setting/roleLeaderCircle/SettingRoleLeaderCirclePage.tsx b/src/pages/setting/roleLeaderCircle/SettingRoleLeaderCirclePage.tsx
@@ -52,12 +52,7 @@ const SettingRoleLeaderCirclePage: React.FC = observer(() => {
 
   return (
     <>
-      <Header
-        mini
-        title="동아리장 변경"
-        withBack={PAGE_URL.SettingRoleManagement}
-        RightComponent={null}
-      />
+      <Header mini title="동아리장 변경" withBack={PAGE_URL.Setting} RightComponent={null} />
       <PageBody>
         <BodyScreen>
           <H2>위임할 권한</H2>