Feat : user modal 구현 loading height 수정 #10

- 톱니바퀴 클릭시 modal창 나오게 구현 - largeMobile 반응형까지 구현 - loadin 페이지 height 100vh로 수정
team-3-in · Feb 4, 2024 · e7ac32c · e7ac32c
1 parent c6ad83e
commit e7ac32c
Show file tree

Hide file tree

Showing 4 changed files with 84 additions and 3 deletions.
diff --git a/frontend/public/img/logout.webp b/frontend/public/img/logout.webp
diff --git a/frontend/public/img/profile.webp b/frontend/public/img/profile.webp
diff --git a/frontend/src/pages/Loading.tsx b/frontend/src/pages/Loading.tsx
@@ -3,7 +3,7 @@ import MoonLoader from 'react-spinners/MoonLoader';
 
 const Wapper = styled.div`
   width: 100%;
-  height: 100%;
+  height: 100vh;
   display: flex;
   flex-direction: column;
   align-items: center;

diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import styled from 'styled-components';
 import { media } from '../style/mediaQuery';
 import { useNavigate } from 'react-router-dom';
@@ -14,6 +14,7 @@ const Wrapper = styled.div`
 `;
 
 const Header = styled.div`
+  position: relative;
   ${media.largeMobile`
     height: 40px;
     padding: 10px;
@@ -66,6 +67,61 @@ const SkillImg = styled.img`
   height: 25px;
 `;
 
+const UserModal = styled.div`
+  ${media.largeMobile`
+    top: 41px;
+    padding: 10px;
+  `}
+  position: absolute;
+  top: 53px;
+  right: 4px;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+  border-radius: 5px;
+  border: 0.5px solid #d3d3d3;
+  background: #fff;
+`;
+
+const ModalBox = styled.div`
+  ${media.largeMobile`
+    gap: 8px;
+    div {
+      font-size: 12px;
+    }
+  `}
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+`;
+
+const ModalIconBox = styled.div<{ color: string }>`
+  ${media.largeMobile`
+    width: 20px;
+    height: 20px;
+  `}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 25px;
+  height: 25px;
+  border-radius: 50%;
+  background-color: ${(props) => props.color};
+`;
+
+const ModalImg = styled.img<{ size: string }>`
+  ${media.largeMobile`
+    width: 12px;
+    height: 12px;
+  `}
+  width: ${(props) => props.size};
+  height: ${(props) => props.size};
+`;
+
 const LetText = styled.p`
   ${media.largeMobile`
     margin-top: 55px;
@@ -183,6 +239,7 @@ const ReportBox = styled.div`
 
 function Main() {
   const navigate = useNavigate();
+  const [openModal, setOpenModal] = useState<boolean>(false);
   return (
     <Wrapper>
       <Header>
@@ -193,12 +250,36 @@ function Main() {
         >
           <HomeImg src={`${process.env.PUBLIC_URL}/img/home.webp`} alt="home" />
         </HomeBtn>
-        <Btn>
+        <Btn onClick={() => setOpenModal((pre) => !pre)}>
           <SkillImg
             src={`${process.env.PUBLIC_URL}/img/skill.webp`}
             alt="skill"
           />
         </Btn>
+        {openModal && (
+          <UserModal>
+            <ModalBox>
+              <ModalIconBox color="#FF2868">
+                <ModalImg
+                  size="15px"
+                  src={`${process.env.PUBLIC_URL}/img/logout.webp`}
+                  alt="connect"
+                />
+              </ModalIconBox>
+              <div>로그아웃</div>
+            </ModalBox>
+            <ModalBox>
+              <ModalIconBox color="#5562EA">
+                <ModalImg
+                  size="15px"
+                  src={`${process.env.PUBLIC_URL}/img/profile.webp`}
+                  alt="connect"
+                />
+              </ModalIconBox>
+              <div>회원정보</div>
+            </ModalBox>
+          </UserModal>
+        )}
       </Header>
       <LetText>Let’s Go</LetText>
       <ProblemBox>