🎨 Style: Modal 스타일 파일 정리 (#204)

[Style] Modal 스타일 파일 정리
FRONTENDSCHOOL5 · Jul 17, 2023 · e5b2229 · e5b2229
2 parents c3fe405 + 28494fb
commit e5b2229
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 62 deletions.
diff --git a/src/components/common/Modal/IconPostModal.jsx b/src/components/common/Modal/IconPostModal.jsx
@@ -6,6 +6,7 @@ import LogOut from '../Alert/LogOut';
 import { useNavigate } from 'react-router-dom';
 import { deletePost } from '../../../utils/Apis';
 import { tokenAtom } from '../../../atoms/UserAtom';
+import {Container, ButtonContainer} from '../Modal/IconPostModalStyle'
 
 const IconPostModal = ({ topText, btmText, accountName, data, key, setIsPostDeleted,
 comment, onClick }) => {
@@ -71,37 +72,17 @@ comment, onClick }) => {
 
   return (
     <>
-        <div>
-          <Separator />
-          <ModalButtons>
+        <Container>
+          <ButtonContainer>
             <button onClick={deleteClick}>{topText}</button>
             <button onClick={modifyClick}>{btmText}</button>
-          </ModalButtons>
-        </div>
+          </ButtonContainer>
+        </Container>
         {showAlert && <Alert message={alertMessage} setIsPostDeleted={setIsPostDeleted}
 onClose={handleAlertClose} done={alertDone} text={topText.replace("하기","")} />}
         {showLogOut && <LogOut message={alertMessage} onClose={handleLogOutClose} done={alertDone}/>}
     </>
   );
 };
 
-export default IconPostModal;
-
-const Separator = styled.div`
-  width: 5rem;
-  height: 0.4rem;
-  background: ${({ theme }) => theme.colors.borderColor};
-  margin: 1.6rem 17rem;
-  border-radius: 0.5rem;
-`;
-
-const ModalButtons = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: 2rem;
-  button{
-    text-align: left;
-    font-size: 14px;
-    padding: 1.3rem 0rem 1.4rem 2.6rem;
-  }
-`;
+export default IconPostModal;
diff --git a/src/components/common/Modal/IconPostModalStyle.jsx b/src/components/common/Modal/IconPostModalStyle.jsx
@@ -0,0 +1,22 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+`
+
+export const ButtonContainer = styled.div`
+&:before{
+  content: "";
+  width: 5rem;
+  height: 0.4rem;
+  background: ${({ theme }) => theme.colors.borderColor};
+  margin: 1.6rem 17rem;
+  border-radius: 0.5rem;
+}
+  display: flex;
+  flex-direction: column;
+  button{
+    text-align: left;
+    font-size: 14px;
+    padding: 1.3rem 0rem 1.4rem 2.6rem;
+  }
+`;
diff --git a/src/components/common/Modal/PostModal.jsx b/src/components/common/Modal/PostModal.jsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
-import styled from 'styled-components';
 import Alert from '../Alert/Alert';
+import {Container, ButtonContainer} from '../Modal/PostModalStyle'
 
 const PostModal = ({ text }) => {
   const [showAlert, setShowAlert] = useState(false);
@@ -25,46 +25,14 @@ const PostModal = ({ text }) => {
 
   return (
     <>
-        <div>
-          <ModalContent>
-            <Separator />
-            <ModalButtons>
+          <Container>
+            <ButtonContainer>
               <button onClick={handleClick}>{text}</button>
-            </ModalButtons>
-          </ModalContent>
-        </div>
+            </ButtonContainer>
+          </Container>
       {showAlert && <Alert message={alertMessage} onClose={handleAlertClose} done={alertDone}/>}
     </>
   );
 };
 
 export default PostModal;
-
-const ModalContent = styled.div`
-  width: 39rem;
-  height: 9.2rem;
-  background-color: ${({ theme }) => theme.colors.whiteText};
-  border-top-left-radius: 0.8rem;
-  border-top-right-radius: 0.8rem;
-`;
-
-const Separator = styled.div`
-  width: 5rem;
-  height: 0.4rem;
-  background: ${({ theme }) => theme.colors.borderColor};
-  margin: 1.6rem 17rem;
-  border-radius: 0.5rem;
-`;
-
-const ModalButtons = styled.div`
-  display: flex;
-  flex-direction: column;
-  margin-top: 2rem;
-  button{
-    text-align: left;
-    font-size: ${({ theme }) => theme.fontSize.medium};
-    padding: 1.3rem 0rem 1.4rem 2.6rem;
-  }
-`;
-
-
diff --git a/src/components/common/Modal/PostModalStyle.jsx b/src/components/common/Modal/PostModalStyle.jsx
@@ -0,0 +1,25 @@
+import styled from 'styled-components';
+
+export const Container = styled.div`
+`;
+
+export const ButtonContainer = styled.div`
+&:before{
+  content:"";
+  width: 5rem;
+  height: 0.4rem;
+  background: ${({ theme }) => theme.colors.borderColor};
+  margin: 0 17rem;
+  border-radius: 0.5rem;
+}
+  display: flex;
+  flex-direction: column;
+  margin-top: 2rem;
+  button{
+    text-align: left;
+    font-size: ${({ theme }) => theme.fontSize.medium};
+    padding: 1.3rem 2rem 2rem 2.6rem;
+  }
+`;
+
+