feat :: 외출 급식 체크

Origin/feature/out going meal check function/#90
Team-B1ND · Sep 23, 2024 · 014d1de · 014d1de
2 parents 7b628de + 7e63dcc
commit 014d1de
Show file tree

Hide file tree

Showing 31 changed files with 1,254 additions and 294 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -49,6 +49,7 @@
     "@babel/preset-env": "^7.18.10",
     "@babel/preset-react": "^7.18.6",
     "@babel/preset-typescript": "^7.18.6",
+    "@svgr/webpack": "^8.1.0",
     "@types/gtag.js": "^0.0.11",
     "@types/js-cookie": "^3.0.2",
     "@types/jsonwebtoken": "^8.5.8",
@@ -59,7 +60,7 @@
     "@types/styled-components": "^5.1.26",
     "babel-loader": "^8.2.5",
     "css-loader": "^6.7.1",
-    "dotenv-webpack": "^8.0.1",
+    "dotenv-webpack": "^8.1.0",
     "esbuild-loader": "^2.19.0",
     "fork-ts-checker-webpack-plugin": "^7.2.13",
     "html-webpack-plugin": "^5.5.0",

diff --git a/public/index.html b/public/index.html
@@ -11,5 +11,6 @@
   </head>
   <body>
     <div id="root"></div>
+    <div id="modal"></div>
   </body>
 </html>
diff --git a/src/assets/icons/sign/CloseEye.svg b/src/assets/icons/sign/CloseEye.svg
diff --git a/src/assets/icons/sign/OpenEye.svg b/src/assets/icons/sign/OpenEye.svg
diff --git a/src/components/auth/Login/index.tsx b/src/components/auth/Login/index.tsx
@@ -1,7 +1,8 @@
 import { Dispatch, SetStateAction } from "react";
 import useLogin from "@src/hooks/auth/useLogin";
 import * as S from "./style";
-
+import OpenEye from "@src/assets/icons/sign/OpenEye.svg"
+import CloseEye from "@src/assets/icons/sign/CloseEye.svg"
 import { FiCheck } from "@react-icons/all-files/fi/FiCheck";
 import * as AuthS from "../style";
 
@@ -11,6 +12,8 @@ interface Props {
 
 const Login = ({ setIsLogin }: Props) => {
   const {
+    passwordType,
+    handlePasswordView,
     loginData,
     handleLoginData,
     loginKeep,
@@ -36,8 +39,11 @@ const Login = ({ setIsLogin }: Props) => {
               name="pw"
               value={loginData.pw}
               onChange={handleLoginData}
-              type="password"
+              type={passwordType.type}
             />
+            <AuthS.AuthPasswordBtn>
+              <img src={passwordType.visible ? OpenEye : CloseEye} alt="error" onClick={handlePasswordView} />
+            </AuthS.AuthPasswordBtn>
           </AuthS.AuthInputWrap>
         </S.LoginInputForm>
         <S.LoginKeepWrap>

diff --git a/src/components/auth/Signup/SignupFirst/index.tsx b/src/components/auth/Signup/SignupFirst/index.tsx
@@ -2,19 +2,27 @@ import React from "react";
 import { Signup } from "@src/types/signup/signup.type";
 import { AuthInput, AuthInputTitle, AuthInputWrap } from "../../style";
 import * as SignupS from "../style";
+import * as AuthS from "../../style";
 import * as S from "./style";
 import { FiChevronRight } from "@react-icons/all-files/fi/FiChevronRight";
+import { PasswordParm } from "@src/types/login/login.type";
+import OpenEye from "@src/assets/icons/sign/OpenEye.svg";
+import CloseEye from "@src/assets/icons/sign/CloseEye.svg"
 
 interface Props {
   signupData: Signup;
+  passwordType:PasswordParm;
   handleSignupData: (e: React.ChangeEvent<HTMLInputElement>) => void;
   submitSignupDataFirst: () => void;
+  handlePasswordView:()=>void;
 }
 
 const SignupFirst = ({
   signupData,
+  passwordType,
   handleSignupData,
   submitSignupDataFirst,
+  handlePasswordView
 }: Props) => {
   return (
     <>
@@ -23,7 +31,7 @@ const SignupFirst = ({
           <AuthInputTitle>ID</AuthInputTitle>
           <AuthInput
             name="id"
-            value={signupData.id}
+            value={signupData.id }
             onChange={handleSignupData}
             placeholder="dgsw1234"
           />
@@ -34,29 +42,32 @@ const SignupFirst = ({
             name="pw"
             value={signupData.pw}
             onChange={handleSignupData}
-            type="password"
+            type={passwordType.type}
             placeholder="abcdefg1234"
           />
+            <AuthS.AuthPasswordBtn>
+              <img src={passwordType.visible ? OpenEye : CloseEye} alt="error" onClick={handlePasswordView} />
+            </AuthS.AuthPasswordBtn>
         </AuthInputWrap>
         <AuthInputWrap style={{ height: "auto", minHeight: 56 }}>
           <AuthInputTitle>학번</AuthInputTitle>
           <S.SignupSchoolInputWrap>
             <S.SignupSchoolInput
               name="grade"
-              value={signupData.grade}
+              value={signupData.grade== 0 ? "" : signupData.grade}
               onChange={handleSignupData}
               placeholder="학년"
               type="number"
             />
             <S.SignupSchoolInput
               name="room"
-              value={signupData.room}
+              value={signupData.room==0 ? "" : signupData.room}
               onChange={handleSignupData}
               placeholder="반"
               type="number"
             />
             <S.SignupSchoolInput
-              value={signupData.number}
+              value={signupData.number==0 ? "" : signupData.number}
               onChange={handleSignupData}
               name="number"
               placeholder="번호"

diff --git a/src/components/auth/Signup/SignupSecond/index.tsx b/src/components/auth/Signup/SignupSecond/index.tsx
@@ -1,4 +1,5 @@
 import React, { Dispatch, SetStateAction, useMemo } from "react";
+import { useNavigate, Link } from "react-router-dom";
 import { Signup, SignupAgree } from "@src/types/signup/signup.type";
 import * as SignupS from "../style";
 import { FiChevronLeft } from "@react-icons/all-files/fi/FiChevronLeft";
@@ -27,13 +28,13 @@ const SignupSecond = ({
   handleSignupAgree,
   submitSignupDataSecond,
 }: Props) => {
-  //회원가입쪽과 같은 로직으로, map을 돌리기 위해 object인 agrees를 배열로 만들어 리턴함.
+
   const agreesList = useMemo(() => {
     const { first, second } = agrees;
 
     return [first, second];
   }, [agrees]);
-
+  const navigate = useNavigate();
   return (
     <>
       <SignupS.SignupInputForm style={{ marginBottom: 24 }}>
@@ -82,7 +83,10 @@ const SignupSecond = ({
               {agree.title}
             </S.SignupAgreeInputText>
           </S.SignupAgreeInputWrap>
-          <S.SignupAgreeDetail>상세 내용 보기</S.SignupAgreeDetail>
+
+          <S.SignupAgreeDetail>
+            <Link to={`https://dodam.b1nd.com/detailed-information/${agree.detailInfoLink}`}>상세 내용 보기</Link>
+          </S.SignupAgreeDetail>
         </S.SignupAgreeWrap>
       ))}
       <SignupS.SignupPartButtonWrap>

diff --git a/src/components/auth/Signup/index.tsx b/src/components/auth/Signup/index.tsx
@@ -6,36 +6,32 @@ import SignupFirst from "./SignupFirst";
 import SignupSecond from "./SignupSecond";
 import * as AuthS from "../style";
 
+
 interface Props {
   setIsLogin: Dispatch<SetStateAction<boolean>>;
 }
 
 const Signup = ({ setIsLogin }: Props) => {
   const {
-    section,
-    setSection,
-    signupData,
-    handleSignupData,
-    submitSignupDataFirst,
-    agrees,
-    handleSignupAgree,
-    submitSignupDataSecond,
+   ...sign
   } = useSignup();
 
   const signupComponents: ReactNode[] = [
     <SignupFirst
-      signupData={signupData}
-      handleSignupData={handleSignupData}
-      submitSignupDataFirst={submitSignupDataFirst}
+      signupData={sign.signupData}
+      handleSignupData={sign.handleSignupData}
+      submitSignupDataFirst={sign.submitSignupDataFirst}
+      passwordType={sign.passwordType}
+      handlePasswordView={sign.handlePasswordView}
       key="signupFisrtPart"
     />,
     <SignupSecond
-      setSection={setSection}
-      signupData={signupData}
-      handleSignupData={handleSignupData}
-      agrees={agrees}
-      handleSignupAgree={handleSignupAgree}
-      submitSignupDataSecond={submitSignupDataSecond}
+      setSection={sign.setSection}
+      signupData={sign.signupData}
+      handleSignupData={sign.handleSignupData}
+      agrees={sign.agrees}
+      handleSignupAgree={sign.handleSignupAgree}
+      submitSignupDataSecond={sign.submitSignupDataSecond}
       key="signupSecondPart"
     />,
   ];
@@ -44,7 +40,7 @@ const Signup = ({ setIsLogin }: Props) => {
     <S.SignupContainer>
       <S.SignupWrap>
         {signupComponents.map((component, idx) => {
-          return section === SIGNUP_SECTION_NAME[idx].title && component;
+          return sign.section === SIGNUP_SECTION_NAME[idx].title && component;
           // 회원가입 섹션이 2개가 있는데, 일일이 &&연산자로 하면 코드가 더러울거 같아서 배열에 담아서 map을 돌렸음.
         })}
         <AuthS.AuthOppositePartWrap>

diff --git a/src/components/auth/signup/signupSecond/style.ts b/src/components/auth/signup/signupSecond/style.ts
@@ -52,7 +52,9 @@ export const SignupAgreeDetail = styled.p`
   font-size: 14px;
   color: #7c7c7c;
   cursor: pointer;
-
+  a{
+    color: #7c7c7c;
+  }
   &:hover {
     text-decoration: underline;
   }

diff --git a/src/components/auth/style.ts b/src/components/auth/style.ts
@@ -76,6 +76,7 @@ export const AuthWrap = styled.div`
 `;
 
 export const AuthInputWrap = styled.div`
+  position: relative;
   height: 56px;
   display: flex;
   flex-direction: column;
@@ -105,6 +106,19 @@ export const AuthInput = styled.input`
   }
 `;
 
+export const AuthPasswordBtn = styled.div`
+  position: absolute;
+  right: 10px;
+  bottom: 5px;
+  cursor: pointer;
+  img {
+    width: 100%;
+    height: 100%;
+  }
+  width: 25px;
+  height: 25px;
+`;
+
 export const AuthOppositePartWrap = styled.div`
   display: flex;
   align-items: center;

diff --git a/src/components/common/Modal/index.tsx b/src/components/common/Modal/index.tsx
@@ -0,0 +1,83 @@
+import { ModalProps } from "./type"
+import styled, { CSSObject } from "styled-components";
+
+import { Portal } from "../modalPortal";
+
+const Modal = ({width,
+    height,
+    zIndex,
+    isOpen,
+    close,
+    children,
+    customStyle,}:ModalProps)=>{
+        return(
+            <Portal>
+            {
+                isOpen && (
+
+                    <Background onClick={close} customStyle={customStyle}>
+                        {children}
+                    </Background>
+
+                ) 
+            }
+            </Portal>
+        )
+}
+
+export default Modal;
+
+
+
+ const Background = styled.div<{ customStyle?: CSSObject }>`
+  width: 100%;
+  min-height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+
+  background-color: rgba(0, 0, 0, 0.4);
+  z-index: 3;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  padding: 20px 0;
+  overflow: auto;
+
+  ${({ customStyle }) => customStyle}
+`;
+
+ const ModalHeaderWrap = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+
+  width: 100%;
+  height: 53px;
+
+  border-bottom: 1px solid rgb(221, 221, 221);
+`;
+
+ const Title = styled.h1`
+  font-size: 17px;
+  font-weight: bold;
+`;
+
+// export const CloseIcon = styled(CgClose)`
+//   cursor: pointer;
+//   padding: 5px;
+//   border-radius: 5px;
+
+//   transform: scale(1);
+//   transition: all 0.2s ease-in-out;
+
+//   &:hover {
+//     background-color: #ddd;
+//     transform: scale(0.96);
+//   }
+//   &:active {
+//     background-color: #eee;
+//   }
+// `;
diff --git a/src/components/common/Modal/type.ts b/src/components/common/Modal/type.ts
@@ -0,0 +1,11 @@
+import { CSSObject } from "styled-components";
+
+export interface ModalProps {
+  width?: number;
+  height?: number;
+  zIndex?: number;
+  isOpen: boolean;
+  close: () => void;
+  children: React.ReactNode;
+  customStyle?: CSSObject;
+}
diff --git a/src/components/common/modalPortal/index.tsx b/src/components/common/modalPortal/index.tsx
@@ -0,0 +1,7 @@
+import { ReactNode } from "react";
+import ReactDom from "react-dom";
+
+export const Portal = ({ children }: { children: ReactNode }) => {
+  const element = document.getElementById("modal") as HTMLElement;
+  return ReactDom.createPortal(children, element);
+};