Merge pull request #22 from 2023WISCOM/feature/#11-project

style: project 스타일 컴포넌트 수정
2023WISCOM · Oct 5, 2023 · 8f3253d · 8f3253d
2 parents 9a06b3d + 5cecd60
commit 8f3253d
Show file tree

Hide file tree

Showing 2 changed files with 194 additions and 5 deletions.
diff --git a/WISCOM/src/components/Project/ProjectStyle.jsx b/WISCOM/src/components/Project/ProjectStyle.jsx
@@ -9,17 +9,54 @@ export const WorkContainer = styled.div`
   color: #20217d;
   margin-bottom: 11.6rem;
   margin-top: 5.7rem;
+
+  @media (max-width: 1024px) {
+    font-size: 4rem;
+    margin-bottom: 11.6rem;
+    margin-top: 5.7rem;
+  }
+
+  @media (max-width: 426px) {
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+  }
 `;
 
 export const WorkLogo = styled.img`
   border-radius: 320px;
-  margin-left: 20rem;
+  margin-left: 22rem;
   width: 30rem;
   height: 30rem;
+
+  @media (max-width: 1024px) {
+    margin-left: 20rem;
+    width: 25rem;
+    height: 25rem;
+  }
+
+  @media (max-width: 768px) {
+    margin-left: 20rem;
+    margin-right: -10rem;
+    width: 20rem;
+    height: 20rem;
+  }
+
+  @media (max-width: 426px) {
+    flex-direction: column;
+    align-items: center;
+    margin-left: 0;
+    margin-right: 0;
+    margin-bottom: 30px;
+  }
 `;
 
 export const WorkInfoContent = styled.div`
   margin-right: 15rem;
+
+  @media (max-width: 426px) {
+    margin: 0;
+  }
 `;
 
 export const Text = styled.div`
@@ -28,6 +65,14 @@ export const Text = styled.div`
   font-size: ${(props) => props.fs};
   font-weight: 600;
   line-height: normal;
+
+  @media (max-width: 768px) {
+    margin-right: 100px;
+    font-size: 66%;
+  }
+  @media (max-width: 426px) {
+    margin: 0;
+  }
 `;
 
 /*Hashtag 부분*/
@@ -38,21 +83,31 @@ export const HashtagContainer = styled.div`
   padding-left: 5rem;
   padding-right: 5rem;
   font-size: 24px;
+  white-space: nowrap;
+
+  @media (max-width: 768px) {
+    font-size: 18px;
+  }
+
+  @media (max-width: 426px) {
+    margin: 0;
+    padding: 0;
+  }
 `;
 
 export const HashtagUpLine = styled.div`
   display: flex;
   align-items: center;
   margin-top: 10px;
+  margin-left: 40px;
   margin-bottom: 10px;
-  margin-left: 100px;
 `;
 
 export const HashtagDownLine = styled.div`
-  margin-left: 130px;
-  margin-right: 20px;
   display: flex;
   align-items: center;
+  margin-left: 50px;
+  margin-right: 20px;
 `;
 
 export const HashtagGreen = styled.div`
@@ -139,6 +194,18 @@ export const PrjDetail = styled.div`
   color: #20217d;
   font-weight: 700;
   margin-bottom: 9rem;
+
+  @media (max-width: 768px) {
+    font-size: 3rem;
+  }
+
+  @media (max-width: 426px) {
+    font-size: 2rem;
+  }
+
+  @media (max-width: 376px) {
+    font-size: 1.5rem;
+  }
 `;
 
 /*Developer 부분*/
@@ -147,6 +214,15 @@ export const DeveloperContainer = styled.div`
   flex-direction: column;
   padding-left: 5rem;
   padding-right: 5rem;
+
+  @media (max-width: 768px) {
+    padding-left: 0;
+  }
+
+  @media (max-width: 376px) {
+    padding-left: 5rem;
+    padding-right: 5rem;
+  }
 `;
 
 export const DeTitle = styled.div`
@@ -155,36 +231,126 @@ export const DeTitle = styled.div`
   font-weight: 700;
   line-height: normal;
   margin-bottom: 90px;
+
+  @media (max-width: 1024px) {
+    font-size: 50px;
+  }
+
+  @media (max-width: 768px) {
+    font-size: 40px;
+    margin-bottom: 50px;
+  }
+
+  @media (max-width: 426px) {
+    font-size: 20px;
+    margin-bottom: 40px;
+  }
+
+  @media (max-width: 376px) {
+    font-size: 15px;
+    margin-bottom: 20px;
+    margin-left: -2rem;
+  }
 `;
 
 export const UpBox = styled.div`
   display: flex;
   margin-bottom: 100px;
+
+  @media (max-width: 1024px) {
+    margin-right: 800px;
+    margin-bottom: 50px;
+  }
+  @media (max-width: 768px) {
+    margin-bottom: 20px;
+  }
+  @media (max-width: 426px) {
+    margin-bottom: 10px;
+  }
+  @media (max-width: 376px) {
+    margin-bottom: 30px;
+  }
 `;
 export const DownBox = styled.div`
   display: flex;
   flex-direction: row-reverse;
+
+  @media (max-width: 1024px) {
+    margin-left: 750px;
+  }
+  @media (max-width: 768px) {
+    margin-left: 715px;
+  }
+  @media (max-width: 426px) {
+    margin-left: 300px;
+  }
+  @media (max-width: 376px) {
+    margin-left: 250px;
+  }
 `;
 
 /*DeveloperProfile 부분*/
 export const DeveloperProfileContainer = styled.div`
   width: 20rem;
   height: 20rem;
   font-size: 3rem;
+  font-weight: bold;
   color: #20217d;
 
   display: flex;
   flex-direction: column;
   align-items: center;
-  margin-left: 15rem;
+  margin-left: 13rem;
   margin-right: 15rem;
+
+  @media (max-width: 1024px) {
+    margin-left: 5rem;
+    margin-right: 10rem;
+    font-size: 2.5rem;
+  }
+  @media (max-width: 768px) {
+    margin-left: 2rem;
+    margin-right: 15rem;
+    font-size: 2rem;
+  }
+  @media (max-width: 426px) {
+    margin-left: 2rem;
+    margin-right: 3rem;
+    font-size: 15px;
+    width: 10rem;
+    height: 10rem;
+  }
+  @media (max-width: 376px) {
+    margin-left: -2rem;
+    margin-right: 5rem;
+    font-size: 15px;
+    width: 7rem;
+    height: 7rem;
+  }
 `;
 
 export const Background = styled.div`
   width: 300px;
   height: 300px;
 
   background-image: url(${(props) => props.url});
+
+  @media (max-width: 1024px) {
+    width: 250px;
+    height: 250px;
+  }
+  @media (max-width: 768px) {
+    width: 200px;
+    height: 200px;
+  }
+  @media (max-width: 426px) {
+    width: 100px;
+    height: 100px;
+  }
+  @media (max-width: 375px) {
+    width: 100px;
+    height: 100px;
+  }
 `;
 
 export const DeveloperImg = styled.img`
@@ -195,6 +361,25 @@ export const DeveloperImg = styled.img`
   background-image: url(${(props) => props.url});
 
   margin-bottom: 2.5rem;
+
+  @media (max-width: 1024px) {
+    width: 150px;
+    height: 150px;
+  }
+  @media (max-width: 768px) {
+    width: 120px;
+    height: 120px;
+  }
+  @media (max-width: 426px) {
+    width: 70px;
+    height: 70px;
+    margin-bottom: 1rem;
+  }
+  @media (max-width: 375px) {
+    width: 70px;
+    height: 70px;
+    margin-bottom: 1rem;
+  }
 `;
 
 export const Name = styled.div``;

diff --git a/WISCOM/src/page/Project.jsx b/WISCOM/src/page/Project.jsx
@@ -17,4 +17,8 @@ const ProjectWrapper = styled.div`
   display: flex;
   justify-content: center;
   flex-direction: column;
+
+  @media (max-width: 320px) {
+    display: none;
+  }
 `;