Merge branch 'dev' of https://github.com/outsung/Duo-frontend into dev

outsung · Feb 4, 2021 · 78e369c · 78e369c
2 parents a464b65 + 158288e
commit 78e369c
Show file tree

Hide file tree

Showing 27 changed files with 466 additions and 300 deletions.
diff --git a/.github/workflows/dev.yml b/.github/workflows/dev.yml
@@ -24,6 +24,9 @@ jobs:
 
       - name: Install dependencies
         run: npm install --prod --pure-lockfile
+
+      - name: Postinstall
+        run: npm run postinstall
 
       - name: A) Setting homepage in package.json
         run: sed -i 's/#homepage/https:\/\/outsung.github.io\/Duo-frontend\//g' package.json

diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -26,6 +26,9 @@ jobs:
       - name: Install dependencies
         run: npm install --prod --pure-lockfile
 
+      - name: Postinstall
+        run: npm run postinstall
+
       - name: A) Setting homepage in package.json
         run: sed -i 's/#homepage/https:\/\/outsung.github.io\/Duo-frontend\/history\/${{github.event.head_commit.message}}/g' package.json
 

diff --git a/package.json b/package.json
@@ -40,7 +40,9 @@
     "start": "react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "react-spring-issue-1078": "find node_modules -path \\*@react-spring/\\*/package.json -exec sed -i.bak 's/\"sideEffects\": false/\"sideEffects\": true/g' {} +",
+    "postinstall": "npm run react-spring-issue-1078"
   },
   "eslintConfig": {
     "extends": [

diff --git a/public/riot.txt b/public/riot.txt
@@ -0,0 +1 @@
+2f416f95-c322-4411-bbf2-de3e8df0d88d
diff --git a/src/App/Routes/index.tsx b/src/App/Routes/index.tsx
@@ -26,7 +26,7 @@ const Routes = () => (
 
       <AuthRoute exact path="/main" component={Studio} />
 
-      <AuthRoute exact path="/users/:_id" component={Users} />
+      <AuthRoute exact path="/users/:idx" component={Users} />
 
       <Route component={Empty} />
     </Switch>

diff --git a/src/components/Phy/index.tsx b/src/components/Phy/index.tsx
@@ -1,8 +1,6 @@
-import React, { useState, useMemo, useRef, Fragment } from 'react';
+import React, { useMemo, useRef, Fragment } from 'react';
 import * as THREE from 'three';
 import { MeshProps } from 'react-three-fiber';
-import { HTML } from '@react-three/drei';
-import { a, useSpring } from '@react-spring/three';
 
 import {
   useBox,
@@ -54,75 +52,6 @@ export function PhyBox({ color, meshProps, ...props }: phyBoxProps) {
 }
 PhyBox.defaultProps = { meshProps: undefined };
 
-/* BoxInfo */
-export interface phyBoxInfoProps extends BoxProps {
-  color: string;
-  children: React.ReactElement;
-  meshProps?: MeshProps;
-}
-export function PhyBoxInfo({
-  color,
-  children,
-  meshProps,
-  ...props
-}: phyBoxInfoProps) {
-  const [clicked, setClicked] = useState(false);
-  const [hovered, setHover] = useState(false);
-  const [hoveredHTML, setHoveredHTML] = useState(false);
-
-  const [ref] = useBox(() => ({
-    mass: 1,
-    ...props,
-  }));
-  const { args } = props;
-
-  // animation
-  const { spring } = useSpring({
-    spring: Number(clicked),
-    config: { mass: 5, tension: 400, friction: 50, precision: 0.0001 },
-  });
-
-  const scale = spring.to([0, 1], [args[0], args[0] * 2]);
-
-  return (
-    <a.mesh
-      {...meshProps}
-      // scale={
-      //   hovered || hoveredHTML
-      //     ? [args[0] + 0.05, args[1] + 0.05, args[2] + 0.05]
-      //     : [args[0], args[1], args[2]]
-      // }
-      ref={ref}
-      onClick={() => {
-        // ref.current?.position.setY(2);
-        setClicked(!clicked);
-        // api.applyImpulse([5, 0, -5], [0, 0, 0]);
-      }}
-      scale-z={scale}
-      scale-y={scale}
-      scale-x={scale}
-      onPointerOver={() => setHover(true)}
-      onPointerOut={() => setHover(false)}
-    >
-      <boxBufferGeometry />
-      <meshStandardMaterial color={color} />
-      <HTML
-        style={{
-          display: clicked && (hovered || hoveredHTML) ? 'block' : 'none',
-        }}
-      >
-        <div
-          onPointerEnter={() => setHoveredHTML(true)}
-          onPointerLeave={() => setHoveredHTML(false)}
-        >
-          {children}
-        </div>
-      </HTML>
-    </a.mesh>
-  );
-}
-PhyBoxInfo.defaultProps = { meshProps: undefined };
-
 /* Char */
 export interface phyCharProps extends BoxProps {
   char: string;

diff --git a/src/components/UserProfile/index.tsx b/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>
   );
 }

diff --git a/src/components/UserProfile/style.ts b/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;
-`;
+`;
diff --git a/src/container/riot/index.ts b/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 updateLolInfoRes = {
+  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<{}, updateLolInfoRes>(`users/lolInfo/${idx}`);
 };
diff --git a/src/container/users/index.ts b/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,17 +49,23 @@ export const confirmEmail = async function (key: string) {
   return res;
 };
 
+// allget
 export type allgetRes = {
   _id: string;
   id: string;
   nickname: string;
   createdAt: string;
   updatedAt: string;
+  lolChampion: string;
+  lolLevel: string;
+  lolTear: string;
+  lolLane: string;
 };
 export const allget = function () {
   return callApi.get<{}, [allgetRes]>('users/test');
 };
 
+// getByIdx
 export type getByIdxRes = {
   result: 1 | -1;
   idx: string;

diff --git a/src/container/users/verify.ts b/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: '' };
+};