added AccountMenu

outsung · Feb 14, 2021 · 86fb344 · 86fb344
1 parent 6009c2b
commit 86fb344
Show file tree

Hide file tree

Showing 6 changed files with 154 additions and 52 deletions.
diff --git a/src/components/Phy/index.tsx b/src/components/Phy/index.tsx
@@ -14,19 +14,21 @@ import fontJSON from './Do Hyeon_Regular.js';
 
 /* Plane */
 export interface phyPlaneProps extends PlaneProps {
+  color?: string;
   meshProps?: MeshProps;
 }
-export function PhyPlane({ meshProps, ...props }: phyPlaneProps) {
+export function PhyPlane({ color, meshProps, ...props }: phyPlaneProps) {
   const [ref] = usePlane(() => ({ ...props }));
 
   return (
     <mesh {...meshProps} ref={ref}>
       <planeBufferGeometry />
-      <meshStandardMaterial />
+      <shadowMaterial attach="material" transparent opacity={0.4} />
+      {/* <meshStandardMaterial color={color} /> */}
     </mesh>
   );
 }
-PhyPlane.defaultProps = { meshProps: undefined };
+PhyPlane.defaultProps = { color: undefined, meshProps: undefined };
 
 /* Box */
 export interface phyBoxProps extends BoxProps {

diff --git a/src/container/users/index.ts b/src/container/users/index.ts
@@ -78,6 +78,26 @@ export const getByIdx = function (_id: string) {
   return callApi.get<{}, getByIdxRes>(`users/idx/${_id}`);
 };
 
+// getByJwt
+export type getByJwtRes = {
+  result: 1 | -1;
+  _id: string;
+  id: string;
+
+  age: number;
+  gender: 'male' | 'female' | 'Private';
+
+  nickname: string;
+  lolTear: string;
+  lolLevel: string;
+  lolLane: string;
+  lolChampion: string;
+  lolRefreshTime: Date;
+};
+export const getByJwt = function () {
+  return callApi.get<{}, getByJwtRes>(`users`);
+};
+
 // updateLolInfo
 export type updateLolInfoRes = {
   result: 1 | -1;

diff --git a/src/pages/Studio/CameraAnimation.tsx b/src/pages/Studio/CameraAnimation.tsx
@@ -3,23 +3,28 @@ import { useFrame } from 'react-three-fiber';
 import { useSpring } from '@react-spring/three';
 
 type cameraAnimationProps = {
+  mypageClicked: boolean;
   optionClicked: boolean;
   boxClicked: string | undefined;
 };
 
-function CameraAnimation({ optionClicked, boxClicked }: cameraAnimationProps) {
-  const { option, box } = useSpring({
-    option: optionClicked ? [-12] : [0],
-    box: boxClicked ? [12] : [0],
+function CameraAnimation({
+  mypageClicked,
+  optionClicked,
+  boxClicked,
+}: cameraAnimationProps) {
+  const { postionX, postionY } = useSpring({
+    postionX: optionClicked ? [-12] : [0],
+    postionY: mypageClicked ? [-5] : [boxClicked ? 12 : 0],
     config: { mass: 10, tension: 1000, friction: 300, precision: 0.00001 },
   });
 
   useFrame((state) => {
-    const [postionX] = option.get();
-    const [postionY] = box.get();
+    const [x] = postionX.get();
+    const [y] = postionY.get();
 
-    state.camera.position.x = postionX + -5;
-    state.camera.position.y = postionY + 3;
+    state.camera.position.x = x + -5;
+    state.camera.position.y = y + 3;
   });
 
   return <></>;

diff --git a/src/pages/Studio/index.tsx b/src/pages/Studio/index.tsx
@@ -13,19 +13,29 @@ import CameraAnimation from './CameraAnimation';
 
 // import Controls from '../../utils/Controls';
 import Loader from '../../components/Loader';
+import history from '../../utils/browserHistory';
 
 import UserProfile from '../../components/UserProfile';
 
 import {
   StudioPage,
+  AccountMenuBox,
+  AccountMenuImage,
+  AccountMenuDivider,
+  AccountMenuItem,
   WaitingBnt,
   OptionBtn,
   OptionLabel,
   UserInfoBox,
 } from './style';
 
 // @api
-import { allget, allgetRes, updateLolInfo } from '../../container/users';
+import {
+  allget,
+  allgetRes,
+  getByJwt,
+  updateLolInfo,
+} from '../../container/users';
 
 function getRandomArbitrary(min: number, max: number) {
   return Math.random() * (max - min) + min;
@@ -37,16 +47,19 @@ const serverUrl =
   'https://duo-serverrr.herokuapp.com' || 'http://localhost:5000';
 
 function Studio() {
+  const [mypageClicked, setMypageClicked] = useState(false);
   const [optionClicked, setOptionClicked] = useState(false);
   const [clicked, setClicked] = useState<string>();
   const [users, setUsers] = useState<allgetRes[]>();
+  const [me, setMe] = useState<allgetRes>();
   const [onlineUsersIdx, setOnlineUsersIdx] = useState<string[]>();
   const clickedUserRef = useRef<allgetRes>();
 
   const [favorites, setFavorites] = useState<string[]>([]);
 
   const init = async function () {
     setUsers(await allget());
+    setMe(await getByJwt());
     setFavorites(['6016b61e3974c70017436583']);
   };
 
@@ -80,18 +93,33 @@ function Studio() {
 
   return (
     <StudioPage>
+      <AccountMenuBox className={mypageClicked ? 'mypage' : ''}>
+        <AccountMenuImage onClick={() => alert(JSON.stringify(me))} />
+        <AccountMenuDivider id="divider" />
+        <AccountMenuItem id="logout" onClick={() => history.push('/login')}>
+          로그아웃
+        </AccountMenuItem>
+        <AccountMenuItem
+          id="mypage"
+          onClick={() => setMypageClicked(!mypageClicked)}
+        >
+          마이페이지
+        </AccountMenuItem>
+      </AccountMenuBox>
       <WaitingBnt
-        className={`${optionClicked ? 'left' : ''} ${clicked ? 'down' : ''}`}
+        className={`${optionClicked ? 'left' : ''} ${
+          clicked || mypageClicked ? 'down' : ''
+        }`}
       >
-        Next +4
+        매칭 시작
         <OptionBtn
           className={optionClicked ? 'on' : ''}
           onClick={() => setOptionClicked(!optionClicked)}
         >
           ⛶<OptionLabel>매칭 설정</OptionLabel>
         </OptionBtn>
       </WaitingBnt>
-      <UserInfoBox className={clicked ? 'on' : ''}>
+      <UserInfoBox className={clicked && !mypageClicked ? 'on' : ''}>
         {clickedUserRef.current ? (
           <>
             <div>{clickedUserRef.current.id}</div>
@@ -112,7 +140,11 @@ function Studio() {
       >
         <fog attach="fog" args={['white', 0, 40]} />
 
-        <CameraAnimation optionClicked={optionClicked} boxClicked={clicked} />
+        <CameraAnimation
+          mypageClicked={mypageClicked}
+          optionClicked={optionClicked}
+          boxClicked={clicked}
+        />
 
         {/* 조명 */}
         <ambientLight intensity={0.4} />
@@ -220,8 +252,8 @@ function Studio() {
           </mesh>
         </Suspense>
 
-        {/* <Controls />
-        <gridHelper /> */}
+        {/* <Controls /> */}
+        <gridHelper />
       </Canvas>
     </StudioPage>
   );

diff --git a/src/pages/Studio/style.ts b/src/pages/Studio/style.ts
@@ -166,3 +166,78 @@ export const UserInfoBox = styled.div`
     height: calc(100vh - 14vh);
   }
 `;
+
+export const AccountMenuBox = styled.div`
+  position: absolute;
+  top: 2.5vh;
+  right: 0.8vw;
+
+  display: flex;
+  flex-direction: row-reverse;
+  align-items: center;
+
+  width: 400px;
+  height: 60px;
+
+  z-index: 1;
+
+  &.mypage {
+    & > div {
+      transform: scale(0);
+    }
+    & > #divider {
+      margin-right: -25px;
+
+      width: 3px;
+
+      transform: scale(1);
+    }
+    & > #mypage {
+      margin-right: -80px;
+
+      font-size: 35px;
+
+      transform: scale(1);
+      &:hover {
+        color: #000;
+      }
+    }
+  }
+`;
+export const AccountMenuImage = styled.div`
+  border-radius: 100px;
+
+  width: 50px;
+  height: 50px;
+
+  background-color: #8429f0;
+
+  transition: all 0.5s;
+
+  cursor: pointer;
+`;
+export const AccountMenuDivider = styled.div`
+  margin: 0px 15px;
+
+  width: 1px;
+  height: 70%;
+
+  background-color: black;
+
+  transition: all 0.5s;
+`;
+export const AccountMenuItem = styled.div`
+  margin-left: 10px;
+
+  color: #000;
+  font-size: 19px;
+  font-weight: bold;
+
+  transition: all 0.5s;
+
+  cursor: pointer;
+
+  &:hover {
+    color: #611eb3;
+  }
+`;
diff --git a/src/pages/Users/index.tsx b/src/pages/Users/index.tsx
@@ -1,44 +1,12 @@
-import React, { useEffect, useMemo, useState } from 'react';
-import { useParams } from 'react-router-dom';
-
-// / import { getByIdx, getByIdxRes } from '../../container/users';
-import { updateLolInfo, updateLolInfoRes } from '../../container/riot';
+import React from 'react';
 
 // import UserProfile from '../../components/UserProfile';
 
 function Users() {
   // const [user, setUser] = useState<getByIdxRes>();
-  const [user, setUser] = useState<updateLolInfoRes>();
-  const { idx } = useParams<{ idx: string }>();
-
-  const init = useMemo(
-    () => async () => {
-      // setUser(await getByIdx(_id));
-      setUser(await updateLolInfo(idx));
-    },
-    [idx],
-  );
-
-  useEffect(() => {
-    init();
-  }, [init]);
-
   return (
     <>
-      {user ? (
-        <>
-          <div>idx: {user.idx}</div>
-          <div>id: {user.id}</div>
-          <div>nickname: {user.nickname}</div>
-          <div>profileImageUrl: {user.profileImageUrl}</div>
-          <div> lolTear: {user.lolTear}</div>
-          <div>lolLevel: {user.lolLevel}</div>
-          <div> lolLane: {user.lolLane}</div>
-          <div> lolChampion: {user.lolChampion}</div>
-        </>
-      ) : (
-        <div>{idx} : 유저 페이지 입니다.</div>
-      )}
+      <div>유저 페이지 입니다.</div>
     </>
   );
 }