[test-deploy] 모집 - 유저기능 테스트 배포 (#1324)

* [Feat]토너먼트 페이지 메뉴얼 추가#1232 (#1235) * [style] 경기 규칙 버튼 스타일#1232 * [feat] 토너먼트 경기 설명용 모달 추가 #1232 * [fieat] 새로운 모달 타입 추가 #1232 * [Style] 위치 수정 #1232 --------- Co-authored-by: Junho Jeon <junhjeon@c1r1s5.42seoul.kr> Co-authored-by: Clearsu <clearwater1219@gmail.com> Co-authored-by: Jincheol Park <67998022+Clearsu@users.noreply.github.com> Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> * [Others] 토너먼트 점수 입력 혹은 경기 종료 후 경기 진행 상황 업데이트 #1210 (#1236) * [Feat] 새로고침 버튼 추가 #1210 * [Feat] 새로고침 버튼 추가 #1210 * [Refactor] 리액트 아이콘 대신 HTML 문자 엔티티 사용 #1210 * [Fix] LIVE 상태인 토너먼트 모두 표시 #1239 (#1240) * [Feat] Layout 코드 구조 수정 * [Feat] 지원하기 버튼 추가 * [Feat] useCheckRecruit 훅 추가 * [Design] 지원하기 버튼 디자인 수정 * [Fix] mock api, useCheckRecruit 훅 수정 * [Feat] 모집 페이지 레이아웃 설정 * [Design] 레이아웃 수정 * [Chore] lottie-react 설치 * [Design] 메인 페이지 헤더 디자인 적용 * [Feat] 모집 기간 아님 페이지 추가 * [Feat] 홈으로 돌아가기 버튼 추가 * [Chore] mock data 수정 * [Chore] 주석 수정 * [Chore] useCheckRecruit 수정 * [Feat] 공고페이지 레이아웃 구성 #1246 * [style] type이름 수정 #1246 * [style] 폴더구조 수정 #1246 * [Feat] 무한스크롤 제네릭 함수로 수정 * feat: 테스트용 recruit 페이지 추가 * feat: recruit - ApplicationForm 컴포넌트 기본 내용만 추가(작업중) * [feat] 테스트용 recruit 페이지 삭제 * [test] recruit detail mock api 추가 * [test] recruit mock api 수정 * [Feat] recruit detail 타입 추가 * [mod] recruit detail 관련 타입명 수정 * [Feat] 유저 페이지 레이아웃 구성 (#1255) * [Feat] Layout 코드 구조 수정 * [Feat] 지원하기 버튼 추가 * [Feat] useCheckRecruit 훅 추가 * [Design] 지원하기 버튼 디자인 수정 * [Fix] mock api, useCheckRecruit 훅 수정 * [Feat] 모집 페이지 레이아웃 설정 * [Design] 레이아웃 수정 * [Chore] lottie-react 설치 * [Design] 메인 페이지 헤더 디자인 적용 * [Feat] 모집 기간 아님 페이지 추가 * [Feat] 홈으로 돌아가기 버튼 추가 * [Chore] mock data 수정 * [Chore] 주석 수정 * [Chore] useCheckRecruit 수정 * [style] application form scss 추가 * [mod] recruit detail mock api 수정 * [feat] applicationForm 컴포넌트 기본 레이아웃 * [feat] recruit/application 페이지 추가 * [feat] userRecruitDetail 훅 추가 * [feat] checklist 요소 인터페이스 추가 * [Feat] 제목 수정용 테이블 정의 #1256 * [Feat] 스타일 추가 #1256 * [Feat] setPage props 추가 #1256 * [Fix] 타입 수정 #1256 * [Feat] page state 추가 #1256 * [Feat] 제목 수이블 타입 추가 #1256 * 파일명 수정을 위한 삭제 * [Fix] lint에 맞지 않는 파일 수정 #1256 * [Fix] quill 새로고침 css 꺠짐 해결 #1256 * [Feat] 질문지 항목 작성 #1256 * [Feat] useRecruitmentEditInfo 커스텀 훅 추가 #12556 * [style] mock api연걸 * Rename detailRecruitUserList.tsx to DetailRecruitUserList.tsx * Rename notificationResults.tsx to NotificationResults.tsx * [Feat] inputType 바꾸기 기능 추가 #1256 * [Fix] 바뀐 SINGLE_CHECK MULTI_CHECK 수정 #1256 * [style] recruit 리팩토링 #1246 * [fix] notificationResults error 처리 #1246 * [Feat] MUI 컴포넌트 추가 #1256 * [Feat] 삭제 버튼 추가 #1256 * [Fix] IQuestionForm의 inputType 수정 * [Fix] useRecruitDetail - refetchOnWindowFocus false 설정 * [Feat] mock api 페이지네이션 추가 * [refactor] 구조 개선 #1256 * [Feat] DragAndDrop Question 순서 변경 #1256 * [Fix] 질문 유형 드롭다운 스타일 수정 #1256 * [Feat] useCheckRecruit의 staleTime 추가 * [Chore] recruitmentListData 타입 추가 * [Feat] useInfiniteRecruitList 훅 추가 * [Feat] RecruitList 컴포넌트 템플릿 적용 * [Feat] RecruitListItem 추가 * [Refact] StickyHeader 컴포넌트 분리 * [Refact] 불필요한 div 제거 * [Feat] recruitmentQuestionTypes 추가 * [Feat] recoil modalType selector - recruitment 추가 * [Fix] qeustion null case 중간 return 추가 #1256 * [Feat] modalTypes - recruitment 관련 타입 추가 * [Refact] 불필요한 div 삭제 * [Chore] id => recruitId 변수명 변경 * [Feat] ModalProvider - recruitment 추가 * [Feat] RecruitmentModal 추가 * [Feat] recruitment - ApplyModal 추가 * [Feat] ApplicationForm - 지원하기 기능 추가 * [Design] noRecruit 레이아웃 수정 * [Fix] makeEmptyQuestion 함수 수정 #1256 * [Design] 메인페이지 StickyHeader 적용 * [Design] applicationContainer 제거 공통 레이아웃 디자인 적용을 위함 * [Design] stickyHeader z-index 적용 * [Feat] RecruitListItem 디자인 적용 * [Fix] observer 버그 수정 * [Chore] 주석 정리 * [Design] 공고 목록 버튼 디자인 수정 * [Feat] recruit 결과 안내 메시지 템플릿 작성 버튼 * [Test] mock api 수정, application 테스트 버튼 수정 * [Style] ApplyModal 스타일 적용 * [Style] ApplicationForm 스타일 수정 * [Test] recruitDetail 테스트 api 수정 * [Test] recruitDetail 필요없는 부분 삭제 * [Feat] 42GG로 돌아가기 버튼 추가 * [Feat] 모집 메인 페이지 라우팅 설정 * [Chore] mock 데이터 추가 및 수정 * [Feat] useRecruitDetail 훅 적용 * [Refact] quillViewer mixin 적용 * [Chore] mock 데이터 수정 * [Design] 페이지 헤더 디자인 추가 * [Design] 페이지 헤더 StickyHeader로 변경 * [Refact] DynamicQuill 추가 * [Chore] mock 데이터 추가 * [Feat] 모집 content quillViewer 적용 * [Feat] 지원하기 버튼 추가 * [Feat] MyRecruitment 템플릿 추가 * [Design] pageSubTitle margin 제거 * [Feat] collapse list 추가 * [Fix] IApplicationAnswer quesionsId -> questionsId 타입 이름 변경 * [Fix, Refactor] Application 폼 useRef 배열 에러 수정, div => Grid, Box, Paper mui 컴포넌트로 수정 * [Refactor] ApplyModal - 기존 모달 방식에서 mui dialog 모달로 변경 * [Test] apply post mock api 수정 * [Refactor] snackbar => mui snackBar로 변경 * [Style] ApplyModal 스타일 수정 * [Chore] 기존 recruitment modal 사용에 필요했던 부분 삭제 * [Feat] ApplicationForm - 빈 문항 있을 시 스낵바 alert 추가 * [Chore] IRefs - 타입 파일로 이동 * [Refactor] ApplicationForm, ApplictionQuestions - 컴포넌트 분리 * [Fix] 기존 JSX 상태 리터럴 입 상태로 변경 #1256 * [Feat] 공고 수정, 생성 버튼 추가 #1256 * [Fix] ApplicationForm - 오타, 문구 수정, 유효하지 않은 요청 snackbar 추가 * [Feat] recruit 메시지 템플릿 작성 컴포넌트 구현 * [Feat] 템플릿 등록 mockApi 연결 * [Fix] ApplicationForm - 올바르지 않은 요청 에러 수정 * [Feat] ApplyModal - 제출하기 후 모달 닫기 추가 * [Chore] 주석 삭제 * [Style] ApplyModal - 색상 팔레트 secondary 추가, DialogTitle,Content로 변경, css 수정 * [Style] admin-button cursor pointer 추가 * [Feat] dateToString에 fillZero 추기 * [Design] 지원하기 버튼 중앙정렬로 변경 * [Feat] 내용 없을 시 경고 문구 추가 * [Chore] template message type 이름 수정 * [Feat] 템플릿 수정 모달로 변경 * [Fix] recruit merge 후 일부 수정 * [refactor] prop 개선 #1256 * [Feat, Refactor] 확인, 수정, 기능(작업중) / ref => state로 변경(작업중) * [Fix] ApplyModal - Dialog => Moadl로 변경 * [Fix] mock api conflict 수정 * [Fix] mock api conflict 수정 * [style] MUI 컴포넌트로 스타일 변경 #1256 * [Feat] 지원 결과 확인 mock api 추가 * [Fix] property name error 수정 * [style] 버튼 스타일 수정 #1256 * [style] 불러오기 버튼 좌우길이 수정 #1256 * [Feat] CollapseListItem 추가 * [Feat] recruitmentResult 타입 추가 * [Fix] NaN 요청 제거 * [Feat] useGetRecruitResult 훅 추가 * [Feat] MyApplicationInfo 추가 * [Feat] MyRecruitStatus 추가 * [Feat] CollapseListItem 기본 펼침상태로 변경 * [Feat] RecruitStepper 추가 * [Design] Step 아이콘 변경 * [Design] 간격 추가 * [Design] StyledLabel 수정 * [Fix] color 적용이 안되던 문제 해결 * [Chore] import 경로 절대경로로 변경 * [Feat, Refactor] ApplicationForm - input값 관리 ref => state로 변경 / 컴포넌트 분리 및 util 로직 분리 / applicationForm 폴더 분리 * [Refactor] 유저응답 관련 타입 형식 및 이름 변경 * [Feat] 유저 응답 recoil 상태 추가 * [Feat] useRecruitDetailUser - useQuery 키값 추가 * [Feat] ApplyModal - props 값 중 answerList recoilValue 로 변경 * [Test] mock api 수정 * [Chore] 파일 경로 변경 * [Feat] refMap 타입 추가 * [Refactor] 매개변수 형식 props로 변경 * [Refactor] 제출하기 버튼 분리 * [Chore] 주석 추가 * [Chore] applicationFormUtils 파일 utils 폴더로 이동 * [Feat] ApplicationFormHeader 추가 * [Feat] alert, modal 리코일 추가, useRef refMap 선언 위치 변경 * [Chore] applicantId 추가 * [Feat] 지원한 경우 지원하기 버튼 비활성화 * [Feat] useGetRecruitResult에 지원 결과가 없는 응답 추가 * [Chore] mock api 데이터 변경 - 지원 상태 추가 - applicationId 추가 * [Feat] 지원 상태 타입 수정 * [Chore] applicantId 를 applicationId로 수정 * [Refact] 상태 판단 조건 수정 * [Feat] applicationAnswer 기본값 만드는 함수 추가 * [Feat] recoil - modalState, applicationInfo, invalidInput 추가 * [Feat] Apply, Cancel 모달 관련 스탕리 recruitModal로 통합 * [Chore] 사용하지 않는 formRefs 삭제 * [Feat] Apply, CancelModal - Cancel 모달 추가, Apply 모달 수정 * [Feat] recoil State 추가에 맞춰서 기존 state들 수정 * [Refactor] applicationForm 아이템 컴포넌트 파일 분리 * [Refactor] applicationSnackBar 분리 * [Feat] 기존 recruitment 공고에 지원서 페이지 연결 * [Test] mock api 수정 * [Chore] type 일부 수정 recoil 일부 수정 * [Feat] applicatoinFooter 추가 * [Test] mock api 수정 * [Feat] application 페이지 렌더 시 alert false 추가 * [Feat] 안쓰는 recoil 상태 제거 * [Feat] modal 페이지 이동 전 sleep 추가, props => router 쿼리 값으로 대체 * [Style] stickyFooter padding-left 제거, 주석 제거 * [Chore] 빈 태그 제거 * [Refactor] snackbar layout으로 이동 * [Feat] 지원서 지원/ 확인수정 페이지 분리 * [Chore] 안쓰는 recoil 상태들 삭제 * [Feat] tsconfig - formData iterator 사용을 위한 컴파일 옵션 추가 * [Refactor] loading, nodata 컴포넌트 분리 * [Refactor] header, footer 컴포넌트 분리 * [Fix] Application state 관리 => form 형식으로 제출방식 변경, 폼 데이터 관련 훅들 상위 페이지 컴포넌트로 이동, FormItem 중간 컴포넌트 삭제 * [Fix] Apply => ApplyEdit 이름 변경, 모달 내 버튼 작동방식 수정 * [Fix] 기존 상태관리 다루는 함수 삭제, 폼데이터 다루는 함수 추가 * [Fix] 사용하지 않는 recoil 삭제, modal 상태 수정 * [Fix] 기존 useRecruitDetail, useRecruitDetailUser 인자 수정 * [Feat] useUserApplicationForm 훅 추가 * [Feat] 내 지원서 페이지 추가, 기존 ApplicationForm 컴포넌트 내에서 불러오던 훅들 해당페이지에서 호출하는 방식으로 변경 * [Fix] 기존 공고 컴포넌트, 페이지 변경사항에 맞춰 수정 * [Test] mock api 긴 문자열 추가 * [Style] Paper 컴포넌트 elevation 옵션 설정 * [Fix] 기존 유저 텍스트 값 수정 문제로 value state 추가 * [Style] 지원서 전반적인 스타일 수정 * [Feat] formRefs의 ref들을 문항을 감싸는 div 태그의 ref로 변경 및 스크롤 방식 추가 * [Refactor] recoil interface 이동, refMap 타입 수정 * [Feat] 지원, 수정인 경우 스택바 색깔 다르게 수정 * [Refactor] recoil modalstate, setmodalState 하나로 합침 * [Test] mock api 긴문자열 테스트 추가 * [Fix] 체크 항목 줄바꿈 안되는 문제 수정 * [Chore] 사용하지 않는 useRecoilValue import문에서 삭제 --------- Co-authored-by: joonho0410 <76806109+joonho0410@users.noreply.github.com> Co-authored-by: Junho Jeon <junhjeon@c1r1s5.42seoul.kr> Co-authored-by: Clearsu <clearwater1219@gmail.com> Co-authored-by: Jincheol Park <67998022+Clearsu@users.noreply.github.com> Co-authored-by: Junho jeon <junhjeon@Junhoui-MacBookAir.local> Co-authored-by: Sangmin Park <sangminpark@Sangminui-MacBookPro.local> Co-authored-by: PHJoon <phj9503@gmail.com> Co-authored-by: kimjaehyuk <jhkim0097@gmail.com> Co-authored-by: greatSweetMango <93255519+greatSweetMango@users.noreply.github.com> Co-authored-by: hyungjpa <100325940+PHJoon@users.noreply.github.com> Co-authored-by: parksangmin1543 <103469291+parksangmin1543@users.noreply.github.com> Co-authored-by: hyobb109 <hyobb109@gmail.com> Co-authored-by: hyobicho <105159293+hyobb109@users.noreply.github.com>
42organization · Mar 25, 2024 · 1e1a45a · 1e1a45a
1 parent 4cadc96
commit 1e1a45a
Show file tree

Hide file tree

Showing 108 changed files with 4,949 additions and 236 deletions.
diff --git a/components/DynamicQuill.tsx b/components/DynamicQuill.tsx
@@ -0,0 +1,10 @@
+// dynamic import로 Quill 불러오는 컴포넌트
+import dynamic from 'next/dynamic';
+
+// TODO : 로딩 컴포넌트 구체화 필요함.
+const DynamicQuill = dynamic(() => import('react-quill'), {
+  ssr: false,
+  loading: () => <p>Loading ...</p>,
+});
+
+export default DynamicQuill;
diff --git a/components/Layout/Layout.tsx b/components/Layout/Layout.tsx
@@ -1,6 +1,5 @@
 import { useRouter } from 'next/router';
 import { useRecoilValue } from 'recoil';
-import { colorModeState } from 'utils/recoil/colorMode';
 import { openCurrentMatchState } from 'utils/recoil/match';
 import AdminReject from 'components/admin/AdminReject';
 import AdminLayout from 'components/admin/Layout';
@@ -10,7 +9,7 @@ import Header from 'components/Layout/Header';
 import HeaderStateContext from 'components/Layout/HeaderContext';
 import MainPageProfile from 'components/Layout/MainPageProfile';
 import Megaphone from 'components/Layout/MegaPhone';
-import StyledButton from 'components/UI/StyledButton';
+import RecruitLayout from 'components/recruit/RecruitLayout';
 import Statistics from 'pages/statistics';
 import useAnnouncementCheck from 'hooks/Layout/useAnnouncementCheck';
 import useGetUserSeason from 'hooks/Layout/useGetUserSeason';
@@ -19,16 +18,16 @@ import useSetAfterGameModal from 'hooks/Layout/useSetAfterGameModal';
 import { useUser } from 'hooks/Layout/useUser';
 import useAxiosResponse from 'hooks/useAxiosResponse';
 import styles from 'styles/Layout/Layout.module.scss';
+import PlayButton from './PlayButton';
+import UserLayout from './UserLayout';
 
 type AppLayoutProps = {
   children: React.ReactNode;
 };
 
 export default function AppLayout({ children }: AppLayoutProps) {
   const user = useUser();
-  const colorMode = useRecoilValue(colorModeState);
   const presentPath = useRouter().asPath;
-  const router = useRouter();
   const openCurrentMatch = useRecoilValue(openCurrentMatchState);
 
   useAxiosResponse();
@@ -37,58 +36,38 @@ export default function AppLayout({ children }: AppLayoutProps) {
   useLiveCheck(presentPath);
   useAnnouncementCheck(presentPath);
 
-  const onClickMatch = () => {
-    router.replace('/');
-    router.push(`/match`);
-  };
+  if (!user || !user.intraId) return null;
 
-  if (!user) return null;
+  if (presentPath.includes('/admin')) {
+    if (!user.isAdmin) return <AdminReject />;
+    return <AdminLayout>{children}</AdminLayout>;
+  }
 
-  return presentPath.includes('/admin') ? (
-    user.isAdmin ? (
-      <AdminLayout>{children}</AdminLayout>
-    ) : (
-      <AdminReject />
-    )
-  ) : (
-    <div className={styles.appContainer}>
-      <div
-        className={`${styles.background} ${
-          colorMode ? styles[colorMode.toLowerCase()] : styles.basic
-        } `}
-      >
-        <div>
-          {presentPath === '/statistics' && user.isAdmin ? (
-            <Statistics />
-          ) : (
-            user.intraId && (
-              <>
-                <HeaderStateContext>
-                  <Header />
-                </HeaderStateContext>
-                {presentPath !== '/match' &&
-                  presentPath !== '/manual' &&
-                  presentPath !== '/store' && (
-                    <div className={styles.buttonContainer}>
-                      <div className={styles.buttonWrapper}>
-                        <StyledButton onClick={onClickMatch} width={'5.5rem'}>
-                          Play
-                        </StyledButton>
-                      </div>
-                    </div>
-                  )}
-                <div className={styles.topInfo}>
-                  <Megaphone />
-                  {openCurrentMatch && <CurrentMatch />}
-                  {presentPath === '/' && <MainPageProfile />}
-                </div>
-                {children}
-                <Footer />
-              </>
-            )
-          )}
-        </div>
+  if (presentPath.includes('/recruit')) {
+    return <RecruitLayout>{children}</RecruitLayout>;
+  }
+
+  // NOTE : 외부 툴을 사용해보고 외부 툴로 대체가 가능하다면 삭제 예정
+  if (presentPath === '/statistics' && user.isAdmin)
+    return (
+      <UserLayout>
+        <Statistics />
+      </UserLayout>
+    );
+
+  return (
+    <UserLayout>
+      <HeaderStateContext>
+        <Header />
+      </HeaderStateContext>
+      <PlayButton />
+      <div className={styles.topInfo}>
+        <Megaphone />
+        {openCurrentMatch && <CurrentMatch />}
+        {presentPath === '/' && <MainPageProfile />}
       </div>
-    </div>
+      {children}
+      <Footer />
+    </UserLayout>
   );
 }
diff --git a/components/Layout/MenuBar/MenuBarElement.tsx b/components/Layout/MenuBar/MenuBarElement.tsx
@@ -14,10 +14,12 @@ import CurrentMatchEmoji from 'public/image/menu_currentMatch.svg';
 import HallOfFameEmoji from 'public/image/menu_halloffame.svg';
 import ManualEmoji from 'public/image/menu_manual.svg';
 import RankingEmoji from 'public/image/menu_ranking.svg';
+import RecruitEmoji from 'public/image/menu_recruit.svg';
 import ReportEmoji from 'public/image/menu_report.svg';
 import SignOutEmoji from 'public/image/menu_signOut.svg';
 import StatisticsEmoji from 'public/image/menu_statistics.svg';
 import { useUser } from 'hooks/Layout/useUser';
+import useCheckRecruit from 'hooks/recruit/useCheckRecruit';
 import useAxiosGet from 'hooks/useAxiosGet';
 import styles from 'styles/Layout/MenuBar.module.scss';
 
@@ -69,10 +71,20 @@ const MenuItem = ({ itemName, onClick }: menuItemProps) => {
       name: '관리자',
       svg: <AdminEmoji />,
     },
+    Recruit: {
+      name: '지원하기',
+      svg: <RecruitEmoji />,
+    },
   };
   return (
     <div className={styles.menuItem} onClick={onClick}>
-      <div className={styles.imageWrapper}>{menuList[itemName].svg}</div>
+      <div
+        className={
+          itemName === 'Recruit' ? styles.recruit : styles.imageWrapper
+        }
+      >
+        {menuList[itemName].svg}
+      </div>
       <div className={styles.menuText}>{menuList[itemName].name}</div>
     </div>
   );
@@ -89,6 +101,7 @@ const MenuLink = ({ link, onClick, itemName }: MenuLinkProps) => {
 export const MainMenu = () => {
   const HeaderState = useContext<HeaderContextState | null>(HeaderContext);
   const setModal = useSetRecoilState<Modal>(modalState);
+  const { isRecruiting } = useCheckRecruit();
 
   const getAnnouncementHandler = useAxiosGet<any>({
     url: '/pingpong/announcement',
@@ -106,6 +119,13 @@ export const MainMenu = () => {
 
   return (
     <nav className={styles.mainMenu}>
+      {isRecruiting && (
+        <MenuLink
+          link='/recruit'
+          itemName='Recruit'
+          onClick={HeaderState?.resetOpenMenuBarState}
+        />
+      )}
       <MenuLink
         link='/store'
         itemName='Store'

diff --git a/components/Layout/PlayButton.tsx b/components/Layout/PlayButton.tsx
@@ -0,0 +1,31 @@
+import { useRouter } from 'next/router';
+import StyledButton from 'components/UI/StyledButton';
+import styles from 'styles/Layout/Layout.module.scss';
+
+const PlayButton = () => {
+  const presentPath = useRouter().asPath;
+  const router = useRouter();
+
+  const onClickMatch = () => {
+    router.replace('/');
+    router.push(`/match`);
+  };
+
+  if (
+    presentPath === '/match' ||
+    presentPath === '/manual' ||
+    presentPath === '/store'
+  )
+    return null;
+  return (
+    <div className={styles.buttonContainer}>
+      <div className={styles.buttonWrapper}>
+        <StyledButton onClick={onClickMatch} width={'5.5rem'}>
+          Play
+        </StyledButton>
+      </div>
+    </div>
+  );
+};
+
+export default PlayButton;
diff --git a/components/Layout/UserLayout.tsx b/components/Layout/UserLayout.tsx
@@ -0,0 +1,24 @@
+import { useRecoilValue } from 'recoil';
+import { colorModeState } from 'utils/recoil/colorMode';
+import styles from 'styles/Layout/Layout.module.scss';
+
+const UserLayout = ({ children }: { children: React.ReactNode }) => {
+  const colorMode = useRecoilValue(colorModeState);
+
+  return (
+    <div className={styles.appContainer}>
+      <div
+        className={`${styles.background} ${
+          colorMode ? styles[colorMode.toLowerCase()] : styles.basic
+        } `}
+      >
+        <div>
+          {/* TODO : 상위 div 컴포넌트 필요한지 다시 확인해보기 */}
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default UserLayout;
diff --git a/components/UI/DraggableList.tsx b/components/UI/DraggableList.tsx
@@ -0,0 +1,57 @@
+import * as React from 'react';
+import {
+  DragDropContext,
+  Droppable,
+  OnDragEndResponder,
+  Draggable,
+} from 'react-beautiful-dnd';
+import { ListItem, ListItemAvatar, makeStyles } from '@mui/material';
+import styles from 'styles/UI/DraggableList.module.scss';
+
+export type DraggableListProps = {
+  children: React.ReactNode[];
+  onDragEnd: OnDragEndResponder;
+};
+
+const DraggableList = React.memo(
+  ({ onDragEnd, children }: DraggableListProps) => {
+    return (
+      <DragDropContext onDragEnd={onDragEnd}>
+        <Droppable droppableId='droppable-list'>
+          {(provided) => (
+            <div
+              ref={provided.innerRef}
+              {...provided.droppableProps}
+              style={{ width: '100%' }}
+            >
+              {children.map((item, index) => (
+                <Draggable
+                  draggableId={`item-${index}`}
+                  index={index}
+                  key={index}
+                >
+                  {(provided, snapshot) => (
+                    <ListItem
+                      ref={provided.innerRef}
+                      {...provided.draggableProps}
+                      {...provided.dragHandleProps}
+                      className={
+                        snapshot.isDragging ? styles.draggingListItem : ''
+                      }
+                    >
+                      {item}
+                    </ListItem>
+                  )}
+                </Draggable>
+              ))}
+              {provided.placeholder}
+            </div>
+          )}
+        </Droppable>
+      </DragDropContext>
+    );
+  }
+);
+
+DraggableList.displayName = 'DraggableList';
+export default DraggableList;
diff --git a/components/admin/SideNav.tsx b/components/admin/SideNav.tsx
@@ -9,7 +9,13 @@ import {
 } from 'react-icons/gr';
 import { IoGameControllerOutline, IoReceiptOutline } from 'react-icons/io5';
 import { MdOutlineMessage } from 'react-icons/md';
-import { TbCalendarTime, TbCoin, TbPaperBag, TbTrophy } from 'react-icons/tb';
+import {
+  TbCalendarTime,
+  TbCoin,
+  TbPaperBag,
+  TbTrophy,
+  TbWallet,
+} from 'react-icons/tb';
 import SideNavContent from 'components/admin/SideNavContent';
 import styles from 'styles/admin/SideNav.module.scss';
 
@@ -121,6 +127,14 @@ export default function SideNav() {
       >
         <TbTrophy className={styles.logo} />
       </SideNavContent>
+
+      <SideNavContent
+        url={'/recruitments'}
+        menuName={'공고 관리'}
+        currentPath={currentPath}
+      >
+        <TbWallet className={styles.logo} />
+      </SideNavContent>
     </div>
   );
 }
diff --git a/components/admin/announcement/AnnounceEdit.tsx b/components/admin/announcement/AnnounceEdit.tsx
@@ -1,19 +1,14 @@
-import dynamic from 'next/dynamic';
 import { useEffect, useState } from 'react';
 import { useSetRecoilState } from 'recoil';
 import { QUILL_EDIT_MODULES, QUILL_FORMATS } from 'types/quillTypes';
 import { instanceInManage, instance } from 'utils/axios';
 import { toastState } from 'utils/recoil/toast';
+import DynamicQuill from 'components/DynamicQuill';
 import { useUser } from 'hooks/Layout/useUser';
 import styles from 'styles/admin/announcement/AnnounceEdit.module.scss';
 import 'react-quill/dist/quill.snow.css';
 import 'react-quill/dist/quill.bubble.css';
 
-const Quill = dynamic(() => import('react-quill'), {
-  ssr: false,
-  loading: () => <p>Loading ...</p>,
-});
-
 export default function AnnounceEdit() {
   const user = useUser();
   const setSnackbar = useSetRecoilState(toastState);
@@ -92,7 +87,7 @@ export default function AnnounceEdit() {
         {content ? (
           <div className={styles.announceModalContainer}>
             <div className={styles.modalTitle}>Notice!</div>
-            <Quill
+            <DynamicQuill
               className={styles.quillViewer}
               readOnly={true}
               formats={QUILL_FORMATS}
@@ -116,7 +111,7 @@ export default function AnnounceEdit() {
         )}
       </div>
       <div className={styles.editorContainer}>
-        <Quill
+        <DynamicQuill
           className={styles.quillEditor}
           modules={QUILL_EDIT_MODULES}
           formats={QUILL_FORMATS}