Style : modal 컴포넌트 폴더정리 #10

- modal 컴포넌트를 따로 폴더를 만들어서 정리했습니다
team-3-in · Feb 6, 2024 · a0fa5de · sheepdog13 · Feb 6, 2024 · a0fa5de
1 parent 1cdc46c
commit a0fa5de
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 118 deletions.
diff --git a/frontend/src/components/Main/UserModal.tsx b/frontend/src/components/Main/UserModal.tsx
@@ -0,0 +1,102 @@
+import React from 'react';
+import styled from 'styled-components';
+import { media } from '../../style/mediaQuery';
+
+const Wapper = styled.div`
+  ${media.smallMobile`
+    top: 36px;
+    padding: 10px;
+  `}
+  ${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;
+  p {
+    display: flex;
+  }
+`;
+
+const ModalBox = styled.div`
+  ${media.largeMobile`
+    gap: 8px;
+    p {
+      font-size: 12px;
+    }
+  `}
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  gap: 10px;
+`;
+
+const ModalIconBox = styled.div<{ color: string }>`
+  ${media.smallMobile`
+    width: 18px;
+    height: 18px;
+  `}
+  ${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.smallMobile`
+    width: 10px;
+    height: 10px;
+  `}
+  ${media.largeMobile`
+    width: 12px;
+    height: 12px;
+  `}
+  width: ${(props) => props.size};
+  height: ${(props) => props.size};
+`;
+
+function UserModal() {
+  return (
+    <Wapper>
+      <ModalBox>
+        <ModalIconBox color="#FF2868">
+          <ModalImg
+            size="15px"
+            src={`${process.env.PUBLIC_URL}/img/logout.webp`}
+            alt="connect"
+          />
+        </ModalIconBox>
+        <p>로그아웃</p>
+      </ModalBox>
+      <ModalBox>
+        <ModalIconBox color="#5562EA">
+          <ModalImg
+            size="15px"
+            src={`${process.env.PUBLIC_URL}/img/profile.webp`}
+            alt="connect"
+          />
+        </ModalIconBox>
+        <p>회원정보</p>
+      </ModalBox>
+    </Wapper>
+  );
+}
+
+export default UserModal;
diff --git a/frontend/src/pages/Main.tsx b/frontend/src/pages/Main.tsx
@@ -2,6 +2,8 @@ import React, { useState } from 'react';
 import styled from 'styled-components';
 import { media } from '../style/mediaQuery';
 import { useNavigate } from 'react-router-dom';
+import UserModal from '../components/Main/UserModal';
+import NavigationBar from '../components/common/NavigationBar';
 
 const Wrapper = styled.div`
   ${media.smallMobile`
@@ -90,76 +92,6 @@ const SkillImg = styled.img`
   height: 25px;
 `;
 
-const UserModal = styled.div`
-  ${media.smallMobile`
-    top: 36px;
-    padding: 10px;
-  `}
-  ${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;
-  p {
-    display: flex;
-  }
-`;
-
-const ModalBox = styled.div`
-  ${media.largeMobile`
-    gap: 8px;
-    p {
-      font-size: 12px;
-    }
-  `}
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  gap: 10px;
-`;
-
-const ModalIconBox = styled.div<{ color: string }>`
-  ${media.smallMobile`
-    width: 18px;
-    height: 18px;
-  `}
-  ${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.smallMobile`
-    width: 10px;
-    height: 10px;
-  `}
-  ${media.largeMobile`
-    width: 12px;
-    height: 12px;
-  `}
-  width: ${(props) => props.size};
-  height: ${(props) => props.size};
-`;
-
 const LetText = styled.h2`
   ${media.smallMobile`
     font-size: 40px;
@@ -276,30 +208,6 @@ const Arrow = styled.p`
   font-weight: 500;
 `;
 
-const ReportBox = styled.div`
-  ${media.smallMobile`
-    width: 200px;
-    height: 50px;
-    border-radius: 8px;
-  `}
-  ${media.largeMobile`
-    width: 300px;
-    height: 50px;
-    border-radius: 10px;
-    margin-bottom: 0px;
-  `}
-  display:flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: space-between;
-  padding: 15px;
-  width: 400px;
-  height: 64px;
-  border-radius: 20px;
-  background: #fff;
-  box-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.25);
-`;
-
 function Main() {
   const navigate = useNavigate();
   const [openModal, setOpenModal] = useState<boolean>(false);
@@ -319,30 +227,7 @@ function Main() {
             alt="skill"
           />
         </Btn>
-        {openModal && (
-          <UserModal>
-            <ModalBox>
-              <ModalIconBox color="#FF2868">
-                <ModalImg
-                  size="15px"
-                  src={`${process.env.PUBLIC_URL}/img/logout.webp`}
-                  alt="connect"
-                />
-              </ModalIconBox>
-              <p>로그아웃</p>
-            </ModalBox>
-            <ModalBox>
-              <ModalIconBox color="#5562EA">
-                <ModalImg
-                  size="15px"
-                  src={`${process.env.PUBLIC_URL}/img/profile.webp`}
-                  alt="connect"
-                />
-              </ModalIconBox>
-              <p>회원정보</p>
-            </ModalBox>
-          </UserModal>
-        )}
+        {openModal && <UserModal />}
       </Header>
       <LetText>Let’s Go</LetText>
       <ProblemBox>