Merge pull request #27 from junction-asia-2023/feat/event

feat(event): make user for event, delete modal footer btn, set previe…

src/features/event/hooks/useEventContainer.tsx

@@ -3,11 +3,13 @@ import { useLayoutEffect, useState } from 'react';
 
 import { titleAtom } from '../../shared/layout/atom';
 import { modalAtom } from '../../shared/modal/atom';
+import { userAtom } from '../../login/atom';
 
 const useEventContainer = () => {
   const [open, setOpen] = useState(false);
   const [, setTitle] = useAtom(titleAtom);
   const [, setModal] = useAtom(modalAtom);
+  const [user] = useAtom(userAtom);
 
   useLayoutEffect(() => {
     setTitle({ back: true, title: 'Event' });
@@ -35,7 +37,7 @@ const useEventContainer = () => {
         description:
           'I missed the opportunity this time, but try to get the prize for the next event.',
       };
-      setModal(Date.now() % 2 === 0 ? next : win);
+      setModal(user.special ? win : next);
     }, 500);
   };
 

src/features/login/constants.ts

@@ -7,4 +7,29 @@ export const DUMMY_USER: DummyUser = {
   password: 'just',
   department: 'Social Dev1',
   position: 'Software Engineer',
+  special: false,
 };
+
+const jobs = ['Developer', 'Designer', 'Entrepreneur'];
+const createTeamUser = () => {
+  const result = [DUMMY_USER];
+  let gift = false;
+  for (let i = 2; i < 55; i++) {
+    if (i === 11 || i === 34 || i === 45) {
+      gift = true;
+    }
+    const user = {
+      name: `Table${i}`,
+      email: `${i}@naver.com`,
+      companyNo: 'JS1234',
+      password: 'just',
+      department: `Social Platform${i}`,
+      position: jobs[Math.floor(Math.random() * 3)],
+      special: gift,
+    };
+    result.push(user);
+    gift = false;
+  }
+  return result;
+};
+export const DUMMY_USERS: DummyUser[] = createTeamUser();

src/features/login/hooks/useLogin.tsx

@@ -4,7 +4,7 @@ import { useNavigate } from 'react-router-dom';
 
 import { setItem } from '../../shared/utils/storage';
 import { DummyUser, InputKey } from '../type';
-import { DUMMY_USER } from '../constants';
+import { DUMMY_USER, DUMMY_USERS } from '../constants';
 import { userAtom } from '../atom';
 import { URL } from '../../shared/constants/url';
 
@@ -18,19 +18,20 @@ const useLogin = () => {
   } = useForm<InputKey>();
   const onSubmit: SubmitHandler<InputKey> = (data) => {
     if (
-      DUMMY_USER.email !== data.email ||
-      DUMMY_USER.password !== data.password
+      DUMMY_USERS.find((user) => user.email === data.email) &&
+      DUMMY_USERS.find((user) => user.password === data.password)
     ) {
-      alert("'No user information'");
-      // TODO: setError 띄웠다가 다시 삭제하는 방법
-      // setError('dataError', { message: 'No user information' });
+      const curUser: DummyUser = {
+        ...DUMMY_USERS.find((user) => user.email === data.email),
+      };
+      delete curUser.password;
+      setUser({ ...curUser });
+      setItem('user', curUser);
+      navigate(URL.home);
+    } else {
+      alert('No user information');
       return;
     }
-    const curUser: DummyUser = { ...DUMMY_USER };
-    delete curUser.password;
-    setUser({ ...curUser });
-    setItem('user', curUser);
-    navigate(URL.home);
   };
 
   const navigate = useNavigate();

src/features/login/type.ts

@@ -6,6 +6,7 @@ export type User = {
   position?: string;
   comment?: string;
   mood?: string;
+  special?: boolean;
 };
 export type DummyUser = User & { password?: string };
 

src/features/preview/style/index.scss

@@ -17,7 +17,8 @@
   }
   &-image-container {
     display: flex;
-    height: 670px;
+    min-height: 400px;
+    max-height: 680px;
     padding: 24px;
     justify-content: center;
     align-items: center;
@@ -73,6 +74,7 @@
 
   &-bottom-text-container {
     display: flex;
+    min-height: 72px;
     flex-direction: column;
     align-items: flex-start;
     align-self: stretch;

src/features/shared/modal/Container.tsx

@@ -67,13 +67,6 @@ const ModalContainer = () => {
               <div className="title">{title}</div>
               <div className="description">{description}</div>
             </div>
-            <div className="footer">
-              {onConfirm && (
-                <button className="button" onClick={handleConfirmClick}>
-                  Download
-                </button>
-              )}
-            </div>
           </>
         )}
       </div>

src/features/shared/modal/modal.scss

@@ -16,10 +16,10 @@
 		flex-direction: column;
 		justify-content: space-between;
 		position: relative;
-
-		max-width: 320px;
+		min-width: 280px;
+    max-width: 320px;
 		height: 70vh;
-		padding: 30px 30px;
+		padding: 16px;
 		margin: 0 auto;
 		border: 1px solid #777;
 		background-color: #fff;