feat: 캡처 방지 이미지 추가 및 router 연결 (#111)

src/PageRouter.tsx

@@ -13,6 +13,7 @@ import * as Switch from './pages';
 import { PAGE_URL } from '@/configs/path';
 
 const HomePage = lazy(() => import('./pages/home/HomePage'));
+const EventPage = lazy(() => import('./pages/home/event/EventPage'));
 
 export const PageRouter: React.FC = () => (
   <Suspense fallback={<Loading />}>
@@ -26,6 +27,7 @@ export const PageRouter: React.FC = () => (
 
         <AuthRouter>
           <Route path={PAGE_URL.Home} component={HomePage} />
+          <Route path={PAGE_URL.Event} component={EventPage} />
           <Route path={PAGE_URL.Locker} component={Switch.LockerPage} />
           <Route path={PAGE_URL.Circle} component={Switch.CirclePage} />
           <Route path={PAGE_URL.Board} component={Switch.BoardPage} />

src/configs/path.ts

@@ -8,6 +8,7 @@ export enum PAGE_URL {
   NoPermission = '/auth/noPermission',
 
   Home = '/home',
+  Event = '/event',
 
   // 동아리
   Circle = '/circle',

src/pages/home/event/EventPage.tsx

@@ -53,125 +53,13 @@ const EventPage: React.FC = observer(() => {
     if (isDuplicatedEmail) trigger('email');
   }, [isDuplicatedEmail]);
 
-  useAuthRedirect();
-
   return (
     <>
-      <Header withBack title="회원가입" mini RightComponent={null} />
+      <Header withBack title="간식 배부 행사 신청하기" mini RightComponent={null} />
       <PageBody>
         <BodyScreen>
+          <PreventionImg src="/images/empty.png" alt="Empty list logo" />
           <br />
-          <Input
-            name="email"
-            label="이메일"
-            placeholder="이메일 형식에 맞게 입력하세요."
-            required
-            control={control}
-            rules={{
-              required: '이메일를 입력해주세요.',
-              validate: value => {
-                // 이메일 유효성 검사는 진행했고,
-                if (isDuplicatedEmail === true) {
-                  // 검사했던 이메일과 지금 입력된 이메일이 같은 경우 에러
-                  if (chekedEmail === value) return '중복된 이메일입니다.';
-                  else return true;
-                }
-                return true;
-              },
-              pattern: {
-                value: emailReg,
-                message: '이메일 형식에 맞게 입력하세요.',
-              },
-            }}
-          />
-          {errors.email ? <ErrorMessage>{errors.email?.message}</ErrorMessage> : null}
-
-          <PasswordInput
-            name="password"
-            label="비밀번호"
-            placeholder="8자리 이상, 영어/숫자/특수문자 조합"
-            required
-            control={control}
-            rules={{
-              required: '비밀번호를 입력해주세요.',
-              pattern: {
-                value: passwordReg,
-                message: '8자리 이상의 비밀번호를 입력하세요.<br/>(영어 + 숫자 + 특수문자)',
-              },
-            }}
-          />
-          {errors.password ? (
-            <ErrorMessage dangerouslySetInnerHTML={{ __html: errors.password?.message }} />
-          ) : null}
-
-          <PasswordInput
-            name="passwordConfirm"
-            label="비밀번호 확인"
-            placeholder="지정한 비밀번호를 다시 입력하세요."
-            required
-            control={control}
-            rules={{
-              required: '비밀번호를 입력해주세요.',
-              validate: value => value === password || '비밀번호가 일치하지 않습니다.',
-            }}
-          />
-          {errors.passwordConfirm ? (
-            <ErrorMessage>{errors.passwordConfirm?.message}</ErrorMessage>
-          ) : null}
-
-          <Input
-            name="name"
-            label="이름"
-            placeholder="실명이 아닌 경우 승인이 거절될 수 있습니다."
-            required
-            control={control}
-            rules={{ required: '이름을 입력해주세요.' }}
-          />
-          {errors.name ? <ErrorMessage>{errors.name?.message}</ErrorMessage> : null}
-
-          <Input
-            name="admissionYear"
-            type="number"
-            label="입학년도"
-            placeholder="입학년도 4자리를 입력하세요. (ex.2020)"
-            required
-            control={control}
-            rules={{
-              required: '입학년도를 입력해주세요.',
-              minLength: {
-                value: 4,
-                message: '4자리 입학년도를 입력해주세요.',
-              },
-              maxLength: {
-                value: 4,
-                message: '4자리 입학년도를 입력해주세요.',
-              },
-            }}
-          />
-          {errors.admissionYear ? (
-            <ErrorMessage>{errors.admissionYear?.message}</ErrorMessage>
-          ) : null}
-
-          <Input
-            name="studentId"
-            type="number"
-            label="학번"
-            placeholder="8자리 학번을 입력하세요. (ex.20201234)"
-            required
-            control={control}
-            rules={{
-              required: '학번을 입력해주세요.',
-              minLength: {
-                value: 8,
-                message: '8자리 입학년도를 입력해주세요.',
-              },
-              maxLength: {
-                value: 8,
-                message: '8자리 입학년도를 입력해주세요.',
-              },
-            }}
-          />
-          {errors.studentId ? <ErrorMessage>{errors.studentId?.message}</ErrorMessage> : null}
         </BodyScreen>
       </PageBody>
       <PageFooter>
@@ -186,11 +74,22 @@ const EventPage: React.FC = observer(() => {
   );
 });
 
-export const Message = styled.div`
+const Message = styled.div`
   text-align: right;
   color: #ff7473;
   font-size: 12px;
   line-height: 21px;
 `;
 
+const PreventionImg = styled.img`
+  width: 200px;
+  animation: rotate_image 6s linear infinite;
+  transform-origin: 50% 50%;
+  @keyframes rotate_image {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+`;
+
 export default PageStoreHOC(<EventPage />, { store: PageUiStoreImpl });

src/pages/home/event/EventPageUiStore.ts

@@ -29,4 +29,4 @@ export class EventPageUiStore {
   }
 }
 
-export const PageUiStoreImpl = new SignUpPageUiStore();
+export const PageUiStoreImpl = new EventPageUiStore();