Merge pull request #141 from YAPP-Github/dev

Release 0.1.5
YAPP-Github · Jul 20, 2022 · e316878 · e316878
2 parents 344b481 + 855aa18
commit e316878
Show file tree

Hide file tree

Showing 27 changed files with 606 additions and 262 deletions.
diff --git a/src/atoms/userState.tsx b/src/atoms/userState.tsx
@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+import Cookies from 'js-cookie';
+import { atom, useRecoilState } from 'recoil';
+
+const isLoginData = atom<boolean>({
+  key: 'loginState',
+  default: false,
+});
+
+const useLoginState = () => {
+  const [isLogin, setLogin] = useRecoilState<boolean>(isLoginData);
+
+  useEffect(() => {
+    const hasAccessToken = Boolean(Cookies.get('AccessToken'));
+    setLogin(hasAccessToken);
+  }, []);
+
+  return {
+    isLogin,
+  };
+};
+
+export { useLoginState };
diff --git a/src/components/authMail/AuthCodeForm.tsx b/src/components/authMail/AuthCodeForm.tsx
@@ -1,9 +1,10 @@
 import React, { useEffect } from 'react';
-import { Input } from '@/components/base';
+import { Input, Modal } from '@/components/base';
 import { InputsWrapper, StyledButton, ErrorMessage } from '@/pages/AuthMail';
 import useForm, { InitialValues } from '@/hooks/common/useForm';
 import useCountdown from '@/hooks/common/useCountdown';
 import styled from 'styled-components';
+import { useToggle } from '@/hooks/common';
 
 interface AuthCodeFormProps {
   email: string;
@@ -12,6 +13,7 @@ interface AuthCodeFormProps {
 
 const AuthCodeForm = ({ email, onCheckAuthCode }: AuthCodeFormProps) => {
   const { minutes, seconds, setTarget } = useCountdown(0);
+  const [isErrorModal, onToggleErrorModal] = useToggle();
   const { values, errors, handleSubmit, handleChange } = useForm({
     initialValues: {
       email,
@@ -22,7 +24,7 @@ const AuthCodeForm = ({ email, onCheckAuthCode }: AuthCodeFormProps) => {
         console.log('try submit authCode');
         onCheckAuthCode(values.authCode);
       } catch (e) {
-        console.error('Modal 띄워야 할 듯');
+        onToggleErrorModal();
       }
     },
     validate: () => {
@@ -45,18 +47,33 @@ const AuthCodeForm = ({ email, onCheckAuthCode }: AuthCodeFormProps) => {
   }, [email]);
 
   return (
-    <form onSubmit={handleSubmit}>
-      <InputsWrapper>
-        <Input isFocus={!!email} name="authCode" placeholder="인증번호" maxLength={8} onChange={handleChange} />
-        {errors.email && <ErrorMessage>{errors.email}</ErrorMessage>}
-        <StyledButton disabled={!!errors.authCode}>확인</StyledButton>
-        {email && (
-          <CountDownWrapper>
-            {minutes}:{seconds}
-          </CountDownWrapper>
-        )}
-      </InputsWrapper>
-    </form>
+    <>
+      <form onSubmit={handleSubmit}>
+        <InputsWrapper>
+          <Input isFocus={!!email} name="authCode" placeholder="인증번호" maxLength={8} onChange={handleChange} />
+          {errors.email && <ErrorMessage>{errors.email}</ErrorMessage>}
+          <StyledButton disabled={!!errors.authCode}>확인</StyledButton>
+          {email && (
+            <CountDownWrapper>
+              {minutes}:{seconds}
+            </CountDownWrapper>
+          )}
+        </InputsWrapper>
+      </form>
+      {isErrorModal && (
+        <Modal
+          width={200}
+          height={140}
+          bottonName="확인"
+          title="알림"
+          text="에러가 발생했습니다😭 다시한번 시도해 주세요!"
+          onToggleModal={onToggleErrorModal}
+          onClick={() => {
+            void 0;
+          }}
+        />
+      )}
+    </>
   );
 };
 

diff --git a/src/components/authMail/EmailForm.tsx b/src/components/authMail/EmailForm.tsx
@@ -1,28 +1,29 @@
 import React, { useState } from 'react';
-import { Input } from '@/components/base';
+import { Input, Modal } from '@/components/base';
 import { InputsWrapper, StyledButton, ErrorMessage } from '@/pages/AuthMail';
 import useForm, { InitialValues } from '@/hooks/common/useForm';
 import { checkForm } from '@/utils/validations';
+import { useToggle } from '@/hooks/common';
 
 interface EmailFormProps {
   onSubmitAuthCode: (email: string) => void;
 }
 
 const EmailForm = ({ onSubmitAuthCode }: EmailFormProps) => {
   const [onFocus, setFocus] = useState(true);
+  const [isErrorModal, onToggleErrorModal] = useToggle();
   const { values, errors, handleSubmit, handleChange } = useForm({
     initialValues: {
       email: '',
     },
     onSubmit: async () => {
       try {
         if (values.email) {
-          console.log('try');
           onSubmitAuthCode(values.email);
           setFocus(false);
         }
       } catch (e) {
-        console.error('Modal 띄워야 할 듯');
+        onToggleErrorModal();
       }
     },
     validate: ({ email }) => {
@@ -37,13 +38,28 @@ const EmailForm = ({ onSubmitAuthCode }: EmailFormProps) => {
   });
 
   return (
-    <form onSubmit={handleSubmit}>
-      <InputsWrapper>
-        <Input isFocus={onFocus} name="email" placeholder="이메일" maxLength={50} onChange={handleChange} />
-        {errors.email && <ErrorMessage>{errors.email}</ErrorMessage>}
-        <StyledButton disabled={!!errors.email}>인증번호 보내기</StyledButton>
-      </InputsWrapper>
-    </form>
+    <>
+      <form onSubmit={handleSubmit}>
+        <InputsWrapper>
+          <Input isFocus={onFocus} name="email" placeholder="이메일" maxLength={50} onChange={handleChange} />
+          {errors.email && <ErrorMessage>{errors.email}</ErrorMessage>}
+          <StyledButton disabled={!!errors.email}>인증번호 보내기</StyledButton>
+        </InputsWrapper>
+      </form>
+      {isErrorModal && (
+        <Modal
+          width={200}
+          height={140}
+          bottonName="확인"
+          title="알림"
+          text="에러가 발생했습니다😭 다시한번 시도해 주세요!"
+          onToggleModal={onToggleErrorModal}
+          onClick={() => {
+            void 0;
+          }}
+        />
+      )}
+    </>
   );
 };
 

diff --git a/src/components/domain/landing/LandingContainer.tsx b/src/components/domain/landing/LandingContainer.tsx
@@ -1,42 +1,27 @@
+import React from 'react';
 import { StringLogo, RadiousLogo } from '@/assets/img';
 import { Button, Modal } from '@/components/base';
 import useToggle from '@/hooks/common/useToggle';
 import { palette } from '@/lib/styles/palette';
-import React, { useState } from 'react';
 import styled from 'styled-components';
 import { useNavigate } from 'react-router-dom';
+import { useLoginState } from '@/atoms/userState';
 
 function LandingContainer() {
-  /**
-   * 로그인 되었는지 안되었는지는 나중에 리코일에서 꺼내기
-   */
-  const [isLogin, setIsLogin] = useState(false); // FIXME: 임시 콘텐츠 연결을 위한 처리
   const [isModal, onToggleModal] = useToggle();
   const navigate = useNavigate();
+  const { isLogin } = useLoginState();
 
   const handleKakaoLoginClick = () => {
     const clientId = import.meta.env.VITE_KAKAO_JAVASCRIPT_KEY;
     const redirectUri = encodeURI(`${window.location.origin}/oauth/kakao`);
     const loginUrl = import.meta.env.VITE_KAKAO_OPEN_URL.replace('{clientId}', clientId).replace('{redirectUri}', redirectUri);
     window.location.href = loginUrl;
-
-    // console.log(code);
   };
 
   return (
     <Container>
       <MainIconBox>
-        <LandingBtn
-          size="medium"
-          fontWeight={700}
-          fullWidth
-          variant={'kakao'}
-          onClick={() => {
-            setIsLogin((prev) => !prev);
-          }}
-        >
-          테스트용 로그인 토글버튼
-        </LandingBtn>
         <Icon src={RadiousLogo} />
         <MainNameStyled src={StringLogo} alt="외딴썸" />
         <TextStyled>유학생을 위한 미팅/소개팅</TextStyled>
@@ -47,6 +32,9 @@ function LandingContainer() {
           <LandingBtn size="medium" fontWeight={700} fullWidth variant={'kakao'} onClick={handleKakaoLoginClick}>
             카카오 로그인
           </LandingBtn>
+          <Button size="medium" fontWeight={700} fullWidth onClick={() => navigate('/test-login')}>
+            일반 로그인
+          </Button>
         </BtnBox>
       ) : (
         <BtnBox>
@@ -62,7 +50,7 @@ function LandingContainer() {
           >
             시작하기
           </LandingBtn>
-          <LandingBtn size="medium" fontWeight={700} fullWidth variant={'grayBlack'} onClick={() => setIsLogin((prev) => !prev)}>
+          <LandingBtn size="medium" fontWeight={700} fullWidth variant={'grayBlack'} onClick={() => console.log('응답 수정')}>
             응답 수정하기
           </LandingBtn>
         </BtnBox>

diff --git a/src/components/domain/matching/KakaoCopyBox.tsx b/src/components/domain/matching/KakaoCopyBox.tsx
@@ -16,7 +16,7 @@ function KakaoCopyBox({ kakaoId }: CopyBoxPorps) {
     try {
       onToggleModal();
       await navigator.clipboard.writeText(text);
-    } catch (error) {
+    } catch (e) {
       onToggleErrorModal();
     }
   };

diff --git a/src/components/domain/matching/WaitingBox.tsx b/src/components/domain/matching/WaitingBox.tsx
@@ -7,7 +7,7 @@ function WaitingBox() {
     <>
       <MatchingImg src={Waiting} alt="매칭 대기 이미지" />
       <StringEle>
-        <strong>매칭은 매일밤 11시에 이루어집니다.</strong>
+        매칭은 <strong>매일밤 11시</strong>에 이루어집니다.
         <br />
         매칭이 되면 카톡과 이메일로 링크를 보내드릴게요.
       </StringEle>