add riot container

src/components/UserProfile/index.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import history from '../../utils/browserHistory';
 
 import {
   ProfileBox,
@@ -8,7 +9,8 @@ import {
   FieldBox,
   Field,
   FieldA,
-  Star,
+  FieldLink,
+  Btn,
 } from './style';
 
 type userProfileProps = {
@@ -24,9 +26,9 @@ function UserProfile({ _id, id, nickname }: userProfileProps) {
       </ImageBox>
       <BoxDivider />
       <FieldBox>
-        <FieldA target="_blank" href={`/users/${_id}`}>
+        <FieldLink onClick={() => history.push(`/users/${_id}`)}>
           {id}
-        </FieldA>
+        </FieldLink>
         {nickname ? (
           <FieldA
             target="_blank"
@@ -41,7 +43,14 @@ function UserProfile({ _id, id, nickname }: userProfileProps) {
         <Field>🎙️ : ??</Field>
         <Field>성별 : ??</Field>
       </FieldBox>
-      <Star onClick={() => alert('아직 구현되지 않았습니다.')}>★</Star>
+      <Btn onClick={() => alert('아직 구현되지 않았습니다.')}>★</Btn>
+      <Btn
+        style={{ top: '3px', right: '33px' }}
+        onClick={() => alert('아직 구현되지 않았습니다.')}
+        isChcek
+      >
+        ↻
+      </Btn>
     </ProfileBox>
   );
 }

src/components/UserProfile/style.ts

@@ -1,5 +1,4 @@
 import styled from 'styled-components';
-import {Link} from 'react-router-dom';
 
 export const ProfileBox = styled.div`
   display: flex;
@@ -25,11 +24,11 @@ export const Image = styled.div`
   display: flex;
   justify-content: center;
   align-items: center;
-  
-  background-color: #8429F0;
+
+  background-color: #8429f0;
 
   border-radius: 150px;
-  
+
   width: 100px;
   height: 100px;
 
@@ -39,40 +38,42 @@ export const Image = styled.div`
 export const BoxDivider = styled.div`
   width: 1px;
   height: 80%;
-  
-  background-color: #FFFAFA;
+
+  background-color: #fffafa;
 `;
 
 export const FieldBox = styled.div`
   flex: 1;
 
   display: flex;
   flex-direction: column;
-  align-items: flex-start;  
+  align-items: flex-start;
   padding: 10px;
 `;
 export const Field = styled.div`
   font-size: 16px;
-  color: #FFFAFA;
+  color: #fffafa;
 `;
 export const FieldA = styled.a`
-
   font-size: 18px;
-  color: #FFFAFA;
+  color: #fffafa;
 `;
-export const FieldLink = styled(Link)`
-  font-size: 18px;
+export const FieldLink = styled.div`
+  font-size: 16px;
+  color: #fffafa;
+
+  cursor: pointer;
 `;
 
-export const Star = styled.div<{isChcek?: boolean}>`
+export const Btn = styled.div<{ isChcek?: boolean }>`
   position: absolute;
   top: 2px;
   right: 5px;
 
   font-size: 25px;
 
-  color: ${(props) => (props.isChcek ? "#FEB82E":"#000")};
+  color: ${(props) => (props.isChcek ? '#FEB82E' : '#000')};
   opacity: 0.3;
 
   cursor: pointer;
-`;
+`;

src/container/riot/index.ts

@@ -1,17 +1,16 @@
 import callApi from '../../utils/api';
 
-// [bad]
-
-export type getSummonerRes = {
-  id: string,
-  accountId: string,
-  puuid: string,
-  name: string,
-  profileIconId: number,
-  revisionDate: number,
-  summonerLevel: number
+export type updateLolInfoProps = {
+  result: 1 | -1;
+  idx: string;
+  id: string;
+  nickname: string;
+  profileImageUrl: string;
+  lolTear: string;
+  lolLevel: string;
+  lolLane: string;
+  lolChampion: string;
 };
-export const getSummoner = function(nickname: string) {
-  const url = `https://kr.api.riotgames.com/lol/summoner/v4/summoners/by-name/${nickname}?api_key=${process.env.REACT_APP_RIOT_API_KEY}`;
-  return callApi.get<{}, getSummonerRes>(url);
+export const updateLolInfo = function (idx: string) {
+  return callApi.get<{}, updateLolInfoProps>(`users/lolInfo/${idx}`);
 };

src/container/users/index.ts

@@ -1,6 +1,7 @@
 import callApi from '../../utils/api';
 import callCookie from '../../utils/cookie';
 
+// login
 export type loginReq = {
   id: string;
   password: String;
@@ -21,10 +22,22 @@ export const login = async function (req: loginReq) {
   return res;
 };
 
-export type signupReq = {};
-export type signupRes = {};
-export const signup = function () {};
+// signup
+export type signupReq = {
+  id: string;
+  password: string;
+  nickname: string;
+};
+export type signupRes = {
+  result: 1 | -1;
+  message: string;
+};
+export const signup = async function (req: signupReq) {
+  const res = await callApi.post<signupReq, signupRes>('users/signup', req);
+  return res;
+};
 
+// confirmEmail
 export type confirmEmailRes = {
   result: 1 | -1;
   message: string;
@@ -36,6 +49,7 @@ export const confirmEmail = async function (key: string) {
   return res;
 };
 
+// allget
 export type allgetRes = {
   _id: string;
   id: string;
@@ -47,6 +61,7 @@ export const allget = function () {
   return callApi.get<{}, [allgetRes]>('users/test');
 };
 
+// getByIdx
 export type getByIdxRes = {
   result: 1 | -1;
   idx: string;

src/container/users/verify.ts

@@ -0,0 +1,41 @@
+import { loginReq, signupReq } from '.';
+
+interface signupVerifyProps extends signupReq {
+  rPassword: string;
+}
+export const signupVerify = (req: signupVerifyProps) => {
+  if (req.id && req.password && req.nickname && req.rPassword)
+    return { result: -1, message: '필수 입력칸이 비어있습니다.' };
+  if (
+    !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
+      req.id,
+    )
+  )
+    return { result: -1, message: '이메일 형식이 아닙니다.' };
+  if (
+    !/(?=.*\d{1,50})(?=.*[~`!@#$%&*()-+=]{1,50})(?=.*[a-zA-Z]{1,50}).{8,50}$/.test(
+      req.password,
+    )
+  )
+    return {
+      result: -1,
+      message:
+        '비밀번호는 숫자, 영문, 특수문자를 포함하며, 8자리 이상 이여야 합니다.',
+    };
+  if (req.password !== req.rPassword)
+    return { result: -1, message: '비밀번호 두개가 다릅니다.' };
+
+  return { result: 1, message: '' };
+};
+
+export const loginVerify = (req: loginReq) => {
+  if (req.id && req.password)
+    return { result: -1, message: '필수 입력칸이 비어있습니다.' };
+  if (
+    !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
+      req.id,
+    )
+  )
+    return { result: -1, message: '이메일 형식이 아닙니다.' };
+  return { result: 1, message: '' };
+};

src/pages/ConfirmEmail/style.ts

@@ -44,14 +44,14 @@ export const SlothVideo = styled.video`
 export const Btn = styled.div`
   color: #fff;
   font-size: 20px;
-  
+
   height: 40px;
 
   transition: all 0.2s;
 
   cursor: pointer;
-  
-  &:hover{
+
+  &:hover {
     font-size: 22px;
-  } 
-`;
+  }
+`;

src/pages/Enpty/style.ts

@@ -4,21 +4,20 @@ import Page from '../pageStyle';
 
 export const EnptyPage = styled.div`
   ${Page}
-  
+
   display: flex;
   flex-direction: column;
   justify-content: space-around;
   align-items: center;
 `;
 
-
 export const ErrorCodeText = styled.div`
-  color: #F2A663;
+  color: #f2a663;
   font-size: 30px;
 `;
 
 export const HmmText = styled.div`
-  color: #F2A663;
+  color: #f2a663;
   font-size: 300px;
-  font-weight: bold
+  font-weight: bold;
 `;

src/pages/Login/LoginForm/index.tsx

@@ -11,6 +11,7 @@ import {
 import Illusion from '../../../utils/Illusion';
 
 import { login } from '../../../container/users';
+import { loginVerify } from '../../../container/users/verify';
 
 import callCookie from '../../../utils/cookie';
 import history from '../../../utils/browserHistory';
@@ -47,25 +48,26 @@ const LoginForm = ({ onTyping }: loginFormProps) => {
     target.disabled = true;
     target.classList.add('on');
 
-    const res = await login({ id: email, password });
-
-    if (res?.result === -1) {
-      setLoginField({
-        email: '',
-        password: '',
-      });
-
-      alert('회원이 아닌 이메일이거나, 비밀번호가 틀렸습니다.');
+    const verify = loginVerify({ id: email, password });
+    if (verify.result === -1) {
+      alert(verify.message);
       target.disabled = false;
       target.classList.remove('on');
-
       return;
     }
+    const res = await login({ id: email, password });
 
     setLoginField({
       email: '',
       password: '',
     });
+    target.disabled = false;
+    target.classList.remove('on');
+
+    if (res?.result === -1) {
+      alert('회원이 아닌 이메일이거나, 비밀번호가 틀렸습니다.');
+      return;
+    }
 
     history.push('/main');
   };
@@ -100,10 +102,14 @@ const LoginForm = ({ onTyping }: loginFormProps) => {
       </Container>
       <LinkContainer>
         <Illusion>
-          <SignupLink to="/signup">회원가입</SignupLink>
+          <SignupLink onClick={() => history.push('/signup')}>
+            회원가입
+          </SignupLink>
         </Illusion>
         <Illusion>
-          <FindLink to="/find">아이디 / 비밀번호 찾기</FindLink>
+          <FindLink onClick={() => history.push('/find')}>
+            아이디 / 비밀번호 찾기
+          </FindLink>
         </Illusion>
       </LinkContainer>