[FEAT] 서비스 오픈 대비 유지보수 배포 1차 (개발)

index.html

@@ -4,10 +4,12 @@
     <meta charset="UTF-8" />
     <link rel="icon" href="/favicon-96x96.png" />
     <meta name="description" content="중앙대학교 소프트웨어학부 학생회 홈페이지입니다. 공지사항, 학년별 게시판, 동아리 가입, 사물함 신청 등의 기능을 제공하여 소프트웨어 학생들의 불편함을 개선합니다.">
-    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=5,viewport-fit=cover" />
+    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,viewport-fit=cover" />
     <meta name="theme-color" content="#000000" />
     <meta name="apple-mobile-web-app-capable" content="yes" />
     <meta name="mobile-web-app-capable" content="yes" />
+    <meta name="color-scheme" content="light only"/>
+    <meta name="supported-color-schemes" content="light"/>
     <link rel="apple-touch-icon" href="/logo192.png" />
     <link rel="manifest" href="/manifest.json" />
     <link rel="stylesheet preload" as="style" href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap" />

src/@types/circle.d.ts

@@ -1,5 +1,5 @@
 declare namespace Circle {
-  export type Status = 'AWAIT' | 'DROP' | 'LEAVE' | 'MEMBER' | 'REJECT';
+  export type Status = 'AWAIT' | 'DROP' | 'LEAVE' | 'MEMBER' | 'REJECT' | 'LEAVE_N_DROP';
 
   export interface CreateRequestDto {
     mainImage: string;

src/@types/user.d.ts

@@ -8,7 +8,7 @@ declare namespace User {
     name: string;
     profileImage: string;
     role: Role;
-    state: 'ACTIVE' | 'INACTIVE';
+    state: 'ACTIVE' | 'INACTIVE' | 'DROP' | 'INACTIVE_N_DROP';
     studentId: string;
   }
 
@@ -25,8 +25,6 @@ declare namespace User {
     | 'LEADER_ALUMNI'
     | 'COMMON'
     | 'PROFESSOR'
-    | 'PRESIDENT_N_LEADER_CIRCLE'
-    | 'VICE_PRESIDENT_N_LEADER_CIRCLE'
     | 'COUNCIL_N_LEADER_CIRCLE'
     | 'LEADER_1_N_LEADER_CIRCLE'
     | 'LEADER_2_N_LEADER_CIRCLE'
@@ -56,6 +54,7 @@ declare namespace User {
     //#71 추가
     userState: UserDto['state'];
   }
+
   export interface FindAllAdmissionsResponseDto {
     content: AdmissionUserDto[];
     last: boolean;
@@ -129,6 +128,7 @@ declare namespace User {
   // findPrivilegedUsers
   export interface FindPrivilegedUsersResponseDto {
     presidentUsers: UserDto | null;
+    vicePresidentUsers: UserDto | null;
     councilUsers: UserDto[];
     leaderGradeUsers: UserDto[];
     leaderCircleUsers: UserDto[];
@@ -137,6 +137,7 @@ declare namespace User {
 
   export interface FindPrivilegedUsersResponse {
     presidentUsers: Model.User | null;
+    vicePresidentUsers: Model.User | null;
     councilUsers: Model.User[];
     leaderGradeUsers: Model.User[];
     leaderCircleUsers: Model.User[];
@@ -193,6 +194,11 @@ declare namespace User {
     email: string;
   }
 
+  export interface SignOutRequestDto {
+    accessToken: string;
+    refreshToken: string;
+  }
+
   // ==
 
   export interface FindPostsResponse {

src/components/StyledPost.tsx

@@ -38,6 +38,14 @@ export const PostProfileImage = styled.div`
   }
 `;
 
+export const PostCouncilProfileImage = styled(PostProfileImage)`
+  border: 2px solid #312ed7;
+`;
+
+export const PostStudentLeaderProfileImage = styled(PostProfileImage)`
+  border: 2px solid #ff9100;
+`;
+
 export const PostAuthorNameCSS = css`
   flex: 1 1 0;
 

src/configs/axios.ts

@@ -13,6 +13,7 @@ export const API = axios.create({
 export const setAccess = (token: string): unknown =>
   (API.defaults.headers['Authorization'] = token);
 export const resetAccess = (): unknown => delete API.defaults.headers['Authorization'];
+export const getAccess = (): string => `${API.defaults.headers['Authorization']}`;
 
 //Refresh
 const storageRefreshKey = 'CAUCSE_JWT_REFRESH';
@@ -50,20 +51,19 @@ API.interceptors.response.use(
         if (location.pathname !== PAGE_URL.SignIn) location.href = PAGE_URL.SignIn;
       } else if (data.errorCode === '4105') {
         const {
-          data: { accessToken, refreshToken },
+          data: { accessToken },
         } = (await API.put(`/api/v1/users/token/update`, {
           refreshToken: getRefresh(),
         })) as AxiosResponse<{
           accessToken: string;
-          refreshToken: string;
         }>;
 
         setAccess(accessToken);
-        removeRefresh();
-        storeRefresh(isStored, refreshToken);
 
         config.headers['Authorization'] = accessToken;
         return API.request(config);
+      } else if (data.errorCode === '4107') {
+        location.href = PAGE_URL.NoPermission;
       }
 
       return Promise.reject({

src/configs/path.ts

@@ -4,6 +4,8 @@ export enum PAGE_URL {
   SignUp = '/auth/signup',
   FindPassword = '/auth/findPassword',
   Admission = '/auth/admission',
+  UseTerms = '/auth/useTerms',
+  NoPermission = '/auth/noPermission',
 
   Home = '/home',
 
@@ -38,6 +40,7 @@ export enum PAGE_URL {
   SettingRoleLeaderCircle = '/setting/role/leader-circle',
   SettingRoleAlumni = '/setting/role/alumni',
   SettingRoleDelegation = '/setting/role/delegation',
+  SettingRoleVicePresident = '/setting/role/vice-president',
   // SettingCircleBoards = '/setting/circle/boards',
 
   // 내가 쓴 글, 댓글

src/pages/auth/AuthPageSwitch.tsx

@@ -2,8 +2,10 @@ import { Route, Switch } from 'react-router-dom';
 
 import { Admission } from './admission';
 import { FindPassword } from './findPassword';
+import { NoPermission } from './NoPermission';
 import { SignIn } from './signIn';
 import { SignUp } from './signUp';
+import { UseTerms } from './useTerms';
 
 import { PAGE_URL } from '@/configs/path';
 
@@ -12,6 +14,8 @@ export const AuthPageSwitch: React.FC = () => (
     <Route path={PAGE_URL.SignIn} component={SignIn} />
     <Route path={PAGE_URL.Admission} component={Admission} />
     <Route path={PAGE_URL.SignUp} component={SignUp} />
+    <Route path={PAGE_URL.UseTerms} component={UseTerms} />
     <Route path={PAGE_URL.FindPassword} component={FindPassword} />
+    <Route path={PAGE_URL.NoPermission} component={NoPermission} />
   </Switch>
 );

src/pages/auth/NoPermission/NoPermissionPage.tsx

@@ -0,0 +1,20 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+
+import { PageUiStoreImpl } from './NoPermissionPageUiStore';
+
+import { BodyScreen, Header, PageBody, PageStoreHOC } from '@/components';
+import { PAGE_URL } from '@/configs/path';
+
+const NoPermissionPage: React.FC = observer(() => {
+  return (
+    <>
+      <Header withBack={PAGE_URL.Home} title="경고" />
+      <PageBody>
+        <BodyScreen>접근 권한이 없습니다.</BodyScreen>
+      </PageBody>
+    </>
+  );
+});
+
+export default PageStoreHOC(<NoPermissionPage />, { store: PageUiStoreImpl });

src/pages/auth/NoPermission/NoPermissionPageUiStore.ts

@@ -0,0 +1,9 @@
+import { makeAutoObservable } from 'mobx';
+
+export class NoPermissionPageUiStore {
+  constructor() {
+    makeAutoObservable(this, {}, { autoBind: true });
+  }
+}
+
+export const PageUiStoreImpl = new NoPermissionPageUiStore();

src/pages/auth/NoPermission/index.ts

@@ -0,0 +1 @@
+export { default as NoPermission } from './NoPermissionPage';

src/pages/auth/findPassword/FindPasswordPage.tsx

@@ -47,7 +47,7 @@ const FindPasswordPage: React.FC = observer(() => {
 
   return (
     <>
-      <Header title="비밀번호 재발급" withBack={PAGE_URL.Board} />
+      <Header title="비밀번호 재발급" withBack={PAGE_URL.SignIn} />
       <PageBody>
         {isSubmitting ? (
           <Loading />

src/pages/auth/signUp/SignUpPage.tsx

@@ -42,7 +42,7 @@ const SignUpPage: React.FC = observer(() => {
     const { success, message } = (await signUp(body)) as unknown as StoreAPI;
 
     if (success) {
-      replace(PAGE_URL.SignIn);
+      replace(PAGE_URL.UseTerms);
       alert({ message: '회원가입 되었습니다. 로그인 후 학부인증을 진행하세요.' });
     } else if (message) {
       alert({ message });

src/pages/auth/useTerms/UseTermsPage.tsx

@@ -0,0 +1,36 @@
+import { observer } from 'mobx-react-lite';
+import React from 'react';
+import { useHistory, generatePath } from 'react-router-dom';
+
+import { PageUiStoreImpl } from './UseTermsPageUiStore';
+
+import { BodyScreen, Header, PageBody, PageFooter, PageStoreHOC, NavButton } from '@/components';
+import { PAGE_URL } from '@/configs/path';
+import { useRootStore } from '@/stores/RootStore';
+
+const UseTermsPage: React.FC = observer(() => {
+  const { replace, push } = useHistory();
+  const {
+    auth: { isSignIn },
+  } = useRootStore();
+
+  const onSubmit = () => {
+    if (!isSignIn) replace(PAGE_URL.SignIn);
+    else push(generatePath(PAGE_URL.Setting));
+  };
+
+  return (
+    <>
+      <Header title="이용 약관" />
+      <PageBody>
+        <BodyScreen>어쩌고 저쩌고</BodyScreen>
+      </PageBody>
+
+      <PageFooter>
+        <NavButton onClick={onSubmit}>위 약관을 모두 확인했습니다.</NavButton>
+      </PageFooter>
+    </>
+  );
+});
+
+export default PageStoreHOC(<UseTermsPage />, { store: PageUiStoreImpl });

src/pages/auth/useTerms/UseTermsPageUiStore.ts

@@ -0,0 +1,9 @@
+import { makeAutoObservable } from 'mobx';
+
+export class UseTermsPageUiStore {
+  constructor() {
+    makeAutoObservable(this, {}, { autoBind: true });
+  }
+}
+
+export const PageUiStoreImpl = new UseTermsPageUiStore();

src/pages/auth/useTerms/index.ts

@@ -0,0 +1 @@
+export { default as UseTerms } from './UseTermsPage';

src/pages/board/boardCreate/BoardCreatePage.tsx

@@ -70,6 +70,7 @@ const BoardCreatePage: React.FC = observer(() => {
           'LEADER_2',
           'LEADER_3',
           'LEADER_4',
+          'COUNCIL',
           'COMMON',
         ];
         body.circleId =
@@ -78,7 +79,7 @@ const BoardCreatePage: React.FC = observer(() => {
     } else {
       //학생회장 혹은 관리자가 동아리 게시판을 생성하는 경우
       if (data.category === '공지 게시판') {
-        body.createRoleList = ['ADMIN', 'VICE_PRESIDENT', 'PRESIDENT'];
+        body.createRoleList = ['ADMIN', 'VICE_PRESIDENT', 'PRESIDENT', 'COUNCIL'];
       } else if (data.category === '자유 게시판') {
         body.createRoleList = [
           'ADMIN',
@@ -89,6 +90,7 @@ const BoardCreatePage: React.FC = observer(() => {
           'LEADER_2',
           'LEADER_3',
           'LEADER_4',
+          'COUNCIL',
           'COMMON',
         ];
       }
@@ -102,7 +104,7 @@ const BoardCreatePage: React.FC = observer(() => {
 
   useEffect(() => {
     fetch();
-    if (me?.isCircleLeader && !(me.isAdmin || me.isPresident))
+    if (me?.isCircleLeader && !(me.isAdmin || me.isPresidents))
       setValue('circleName', me.circleNames![0]);
   }, []);
 
@@ -144,7 +146,9 @@ const BoardCreatePage: React.FC = observer(() => {
               label="게시판 생성 동아리"
               control={control}
               required
-              options={me.isAdmin || me.isPresident ? ['전체', ...me.circleNames!] : me.circleNames}
+              options={
+                me.isAdmin || me.isPresidents ? ['전체', ...me.circleNames!] : me.circleNames
+              }
             />
           ) : null}
         </BodyScreen>

src/pages/board/boardList/components/BoardCreateButton.tsx

@@ -15,7 +15,7 @@ export const BoardCreateButton: React.FC = observer(() => {
 
   return (
     <>
-      {me && (me.isAdmin || me.isCircleLeader || me.isPresident) ? (
+      {me && (me.isAdmin || me.isCircleLeader || me.isPresidents) ? (
         <Wrapper to={generatePath(PAGE_URL.BoardCreate)}>
           <Icon fontSize="large" />
         </Wrapper>

src/pages/board/boardList/components/BoardListItem.tsx

@@ -29,7 +29,7 @@ export const BoardListItem: React.FC<{ model: Model.Board }> = observer(({ model
         <StyledLink to={generatePath(PAGE_URL.PostList, { boardId: model.id })}>
           {model.name}
         </StyledLink>
-        {me?.isPresident ||
+        {me?.isPresidents ||
         me?.isAdmin ||
         (me?.isCircleLeader &&
           model.circleId &&

src/pages/board/boardList/components/DeleteBoardModal/DeleteBoardModal.tsx

@@ -27,7 +27,7 @@ export const DeleteBoardModal: React.FC = observer(() => {
     if (success) {
       fetch();
       alert({
-        message: `${target.name} 동아리가 삭제되었습니다.`,
+        message: `${target.name} 가 삭제되었습니다.`,
       });
     } else if (message) alert({ message });
     close();
@@ -40,8 +40,8 @@ export const DeleteBoardModal: React.FC = observer(() => {
           <strong>{target && target.name ? target.name : ''}</strong> 동아리 삭제
         </ModalAlertTitle>
         <ModalAlertMessage center>
-          정말로 <strong>{target && target.name ? target.name : ''}</strong> 동아리를
-          삭제하시겠습니까? <br />
+          정말로 <strong>{target && target.name ? target.name : ''}</strong> 를 삭제하시겠습니까?{' '}
+          <br />
           삭제된 데이터는 복구되지 않습니다.
         </ModalAlertMessage>
         <ModalFooter>

src/pages/board/postDetail/components/CommentMenu/CommentMenuContainer.tsx

@@ -57,13 +57,13 @@ export const CommentMenuContainer: React.FC = observer(() => {
             답글 달기
           </ModalMenuButton>
         ) : null}
-        {target?.updatable ? (
+        {/* target?.updatable ? (
           <ModalMenuButton
             onClick={handleSetState(isReplyComment, InputState.EDIT, params, target)}
           >
             댓글 수정
           </ModalMenuButton>
-        ) : null}
+        ) : null */}
         {target?.deletable ? (
           <ModalMenuButton onClick={handleOpenDeleteModal(target)}>댓글 삭제</ModalMenuButton>
         ) : null}

src/pages/board/postDetail/styled.ts

@@ -5,4 +5,9 @@ export const PostContent = styled.p`
   height: auto;
   font-size: 14px;
   line-height: 1.5;
+
+  > img {
+    width: 100%;
+    height: 100%;
+  }
 `;

src/pages/board/postList/PostListPage.tsx

@@ -13,7 +13,7 @@ import { usePageUiStore } from '@/hooks';
 
 const PostListPage: React.FC = observer(() => {
   const { boardId } = useParams<PostParams>();
-  const { boardName, posts, hasMore, page, isFetched, fetchAll, reset } =
+  const { boardName, posts, hasMore, page, isFetched, fetchAll, reset, writable } =
     usePageUiStore<PageUiStore.PostList>();
 
   const timer = useRef<NodeJS.Timeout>();
@@ -32,7 +32,7 @@ const PostListPage: React.FC = observer(() => {
 
   return (
     <>
-      <Header title={boardName} withBack RightComponent={<PostCreateButton />} />
+      <Header title={boardName} withBack RightComponent={writable ? <PostCreateButton /> : null} />
       <PageBody>
         {!isFetched ? (
           <PageSkeleton />