게시판 페이지 제작 #4

likelionDigimon · Aug 2, 2023 · 2d006ab · 2d006ab
1 parent 7646ea3
commit 2d006ab
Show file tree

Hide file tree

Showing 5 changed files with 376 additions and 50 deletions.
diff --git a/public/img/myback1.png b/public/img/myback1.png
diff --git a/src/component/emotion/component.js b/src/component/emotion/component.js
@@ -1,4 +1,7 @@
 /** @jsxImportSource @emotion/react */
+import { css } from "@emotion/react";
+import React, { ReactNode } from "react";
+import theme from "../../styles/theme";
 import styled from "@emotion/styled";
 
 const StyledProjectBox = styled.div`
@@ -53,7 +56,7 @@ const StyledText = styled.p`
   letter-spacing: -0.48px;
 `;
 
-const ProjectBox = ({ title, content }) => {
+export const ProjectBox = ({ title, content }) => {
   return (
     <StyledProjectBox title={title} content={content}>
       <img
@@ -73,4 +76,44 @@ const ProjectBox = ({ title, content }) => {
   );
 };
 
-export { ProjectBox };
+export const IndexContainer = styled.div`
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  width: 1920px;
+  height: 100vh;
+`;
+export const Rowplace = ({ children }) => (
+  <div
+    css={css`
+      display: flex;
+      flex-direction: row;
+    `}
+  >
+    {children}
+  </div>
+);
+
+const SvgWithMargin = () => {
+  return (
+    <div style={{ marginTop: "60px" }}>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="192"
+        height="192"
+        viewBox="0 0 192 192"
+        fill="none"
+      >
+        <path
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M176 96C176 140.182 140.182 176 96 176C51.8172 176 16 140.182 16 96C16 51.8172 51.8172 16 96 16C140.182 16 176 51.8172 176 96ZM120 72C120 85.2552 109.255 96 96 96C82.7448 96 72 85.2552 72 72C72 58.7452 82.7448 48 96 48C109.255 48 120 58.7452 120 72ZM96 164C110.272 164 123.518 159.603 134.455 152.09C139.286 148.771 141.35 142.45 138.542 137.306C132.72 126.642 120.722 120 95.9992 120C71.2775 120 59.2798 126.642 53.4571 137.306C50.6484 142.45 52.7128 148.77 57.5437 152.089C68.4814 159.602 81.7272 164 96 164Z"
+          fill="white"
+        />
+      </svg>
+    </div>
+  );
+};
+
+export default SvgWithMargin;
diff --git a/src/component/project/mypage/component.js b/src/component/project/mypage/component.js
@@ -1,23 +1,67 @@
 import styled from "@emotion/styled";
 import theme from "../../../styles/theme";
 
-export const IndexContainer = styled.div`
+export const BackgroundContainer = styled.div`
   background-color: #fff;
   display: flex;
-  justify-content: center;
-  align-content: center;
+  width: 1920px;
+  height: 100vh;
+  flex-direction: column;
+  overflow-y: auto;
+`;
+export const Title = styled.div`
+  color: #000;
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Inter;
+  font-size: 36px;
+  font-style: normal;
+  font-weight: 600;
+  line-height: 1.2; /* 55.556% */
+  border-left: 5px black solid;
+  padding-left: 20px;
+  margin-left: 147px;
+  margin-top: 20px;
+  display: inline-flex;
 `;
-
 export const InnerContainer = styled.div`
-  margin-top: 100px;
-  width: 804px;
-  height: 701px;
+  width: 1606px;
+  height: 805px;
   flex-shrink: 0;
   display: flex;
-  border-radius: 30px;
-  background: #76c56f;
+  border-radius: 15px;
+  background: #f8f9e3;
+  flex-direction: row;
+  margin: 147px;
+  margin-top: 50px;
 `;
 
+export const LeftContainer = styled.div`
+  width: 25%;
+  height: 1005px;
+  margin: 0px;
+  border-radius: 15px 0 0 15px;
+  background: #76c56f;
+  padding: 66px;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  justify-items: center;
+  align-items: center;
+  color: #fff;
+  text-align: center;
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Inter;
+  ${theme.textVariants.body1}
+`;
+export const RightContainer = styled.div`
+  width: auto;
+  height: 1005px;
+>>>>>>> Stashed changes
+  flex-shrink: 0;
+  margin: 0px;
+  background: #f8f9e3;
+  flex-direction: column;
+`;
 export const Head = styled.div`
   display: flex;
   justify-content: space-between;
@@ -35,3 +79,114 @@ export const BodyTitle = styled.div`
 export const SelectBoxWrapper = styled.div`
   margin-right: 1rem;
 `;
+export const CustomRightContainer = styled(RightContainer)`
+  display: flex;
+  width: 75%;
+`;
+
+export const TopSection = styled.div`
+  flex: 7;
+  display: flex;
+  flex-direction: column;
+  padding: 0px 218px;
+`;
+
+export const BottomSection = styled.div`
+  flex: 3;
+  width: 100%;
+  background-color: #f8f911;
+`;
+
+export const ContentWrapper = styled.div`
+  background-color: #f8f911;
+  height: 100%;
+`;
+
+export const SideContent = styled.div`
+  height: 100%;
+  width: 100%;
+  background-image: url("/img/myback1.png");
+  background-size: cover;
+  background-repeat: no-repeat;
+  background-position: center center;
+  padding: 0px;
+  text-align: center;
+  color: #fff;
+  text-align: center;
+  font-feature-settings: "clig" off, "liga" off;
+  text-shadow: 0px 4px 4px 0px rgba(0, 0, 0, 0.3);
+  font-family: 210 OmniGothic;
+  ${theme.textVariants.body1}
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+`;
+
+export const Pagebox = styled.div`
+  height: 100%;
+  margin-right: 136px;
+  display: flex;
+  flex-direction: column;
+  color: #276322;
+  text-align: center;
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Inter;
+  margin-bottom: 0px;
+  ${theme.textVariants.body2_bold}
+`;
+export const SvgWithMargin = styled.div``;
+
+export const PageboxText = styled.div`
+  color: #000;
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Inter;
+  ${theme.textVariants.body4_bold}
+`;
+export const Mytitle = styled.p`
+  margin-top: 148px;
+  margin-bottom: 68px;
+  ${theme.textVariants.body3_bold}
+  color: #2f6c29;
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Inter;
+`;
+
+export const Usertitle = styled.p`
+  margin: 0px;
+  margin-top: 65px;
+  ${theme.textVariants.body3_bold}
+  color: #FFF;
+  text-align: center;
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Inter;
+`;
+export const Mybutton = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50px;
+  background: #fff;
+  color: #266f1f;
+  text-align: center;
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 500;
+  width: 201px;
+  height: 50px;
+  margin: 20px auto;
+  text-align: center;
+`;
+
+export const MyLoge = styled.div`
+  color: #fff;
+  text-align: center;
+  font-feature-settings: "clig" off, "liga" off;
+  text-shadow: 0px 4px 4px 0px rgba(38, 51, 36, 0.54);
+  font-family: 210 OmniGothic;
+  font-size: 64px;
+  font-style: normal;
+  font-weight: 900;
+`;