feat: response ui

AutoDevLog · Jun 7, 2024 · 01d524c · 01d524c
1 parent 6aa2503
commit 01d524c
Show file tree

Hide file tree

Showing 5 changed files with 152 additions and 16 deletions.
diff --git a/src/componets/Animated/AnimatedRoundBox/AnimatedRoundBox.styles.js b/src/componets/Animated/AnimatedRoundBox/AnimatedRoundBox.styles.js
@@ -8,4 +8,26 @@ export const RoundBox = styled(animated.div)`
  width: 30vh;
  border-radius: 10px;
  padding: 30px;
+
+ @media (max-width: 1024px) {
+ width: 30vh;
+ }
+
+ @media (max-width: 768px) {
+ width: 80vh;
+ margin:0 auto;
+ }
+
+ @media (max-width: 425px) {
+ width: 30vh;
+ margin:0 auto;
+ }
+ @media (max-width: 375px) {
+ width: 25vh;
+ margin: 0 auto;
+ }
+ @media (max-width: 320px) {
+ width: 20vh;
+ margin: 0 auto;
+ }
 `;
diff --git a/src/componets/Animated/AnimatedTitle/AnimatedTitle.styles.js b/src/componets/Animated/AnimatedTitle/AnimatedTitle.styles.js
@@ -3,6 +3,34 @@ import { animated } from 'react-spring';
 
 export const AnimatedTitle = styled(animated.h1)`
  text-align: center;
- font-size: 1em;
- color: #333;
-`;
+ font-size: 10em;
+ color: white;
+ padding: 10px 0px;
+ margin:0;
+
+ @media (max-width: 1024px) {
+ font-size: 8em;
+ }
+
+ @media (max-width: 768px) {
+ font-size: 5em;
+ padding: 0px 0px;
+ margin:0;
+ }
+ 
+ @media (max-width: 425px) {
+ font-size: 6vh;
+ padding: 0px 0px;
+ margin:0;
+ }
+ @media (max-width: 375px) {
+ font-size: 5vh;
+ padding: 0px 0px;
+ margin:0;
+ }
+ @media (max-width: 320px) {
+ font-size: 5vh;
+ padding: 0px 0px;
+ margin:0;
+ }
+`;
diff --git a/src/componets/Header/Header.styles.js b/src/componets/Header/Header.styles.js
@@ -12,7 +12,7 @@ export const HeaderRowContainer = styled.div`
  justify-content: space-between;
  align-items: center;
  background-color: #000000;
- margin: 0 10vh 0 5vh;
+ margin: 0 20px 0 20px;
  max-width: 100%;
 `;
 

diff --git a/src/pages/main/Main.js b/src/pages/main/Main.js
@@ -85,14 +85,14 @@ function Main() {
  <Header links={links}/>
  <styles.BodyContainer>
  <AnimatedTitle title="AUTO" 
- style={{ padding: "10px", paddingBottom: "0px",margin:"0px", fontSize: "10em", color: "white",textAlign: "right"}} trigger={true}/>
+ style={{ color: "white",textAlign: "right"}} trigger={true}/>
  <AnimatedTitle title="DEVELOPER" 
- style={{ padding: "10px", paddingBottom: "0px",margin:"0px", fontSize: "10em", color: "white",textAlign: "right"}} trigger={true}/>
+ style={{ color: "white",textAlign: "right"}} trigger={true}/>
  <AnimatedTitle title=".LOG" 
- style={{ padding: "0 10px", margin:"0px", fontSize: "10em", color: "white",textAlign: "left"}} trigger={true}/>
+ style={{ color: "white",textAlign: "left"}} trigger={true}/>
  </styles.BodyContainer>
  <styles.ColumnContainer>
- <AnimatedTitle title="오늘 하루 당신의 개발일지를 작성하세요" style={{ paddingTop: "1em", fontSize: "5vh", color: "white", textAlign:"center" }} trigger={true} />
+ <styles.BodyTitle>오늘 하루 당신의 개발일지를 작성하세요</styles.BodyTitle>
  <styles.BoxContainer>
  <AnimatedRoundBox>
  <styles.BoxTitle>
@@ -115,7 +115,7 @@ function Main() {
  Solution
  </styles.BoxTitle>
  <styles.BoxText>
- 최종적으로 해결한 방법은?
+ 최종적으로 해결한 방법은 무엇이었나요?
  </styles.BoxText>
  </AnimatedRoundBox>
  </styles.BoxContainer>

diff --git a/src/pages/main/Main.styles.js b/src/pages/main/Main.styles.js
@@ -27,6 +27,48 @@ export const Container = styled.div`
 
 export const BodyContainer = styled.div`
  background-color: black;
+ padding: 20px;
+
+ @media (max-width: 768px) {
+ padding: 10vh;
+ }
+
+ @media (max-width: 425px) {
+ padding: 5vh;
+ }
+ @media (max-width: 425px) {
+ padding: 5vh;
+}
+ @media (max-width: 375px) {
+ padding: 5vh;
+ }
+ @media (max-width: 320px) {
+ padding: 2vh;
+ }
+`;
+
+export const BodyTitle = styled.h1`
+ color: white;
+ text-align: center;
+ padding: 10px;
+
+ @media (max-width: 1024px) {
+ font-size: 15vh;
+ }
+
+ @media (max-width: 768px) {
+ font-size: 5vh;
+ }
+
+ @media (max-width: 425px) {
+ font-size: 4vh;
+ }
+ @media (max-width: 375px) {
+ font-size: 3vh;
+ }
+ @media (max-width: 320px) {
+ font-size: 3vh;
+ }
 `;
 
 export const RowContainer = styled.div`
@@ -42,20 +84,57 @@ export const ColumnContainer = styled.div`
  display: flex;
  flex-direction: column;
  padding: 10vh;
+
+ @media (max-width: 768px) {
+ padding: 6vh;
+ }
+ 
+ @media (max-width: 425px) {
+ padding: 6vh;
+ }
+ @media (max-width: 375px) {
+ padding: 4vh;
+ }
+ @media (max-width: 320px) {
+ padding: 2vh;
+ }
 `
 
 export const BoxContainer = styled.div`
  justify-content: space-around;
- padding: 10vh;
+ margin-top: 100px;
+ padding: 0px;
  display: flex;
  flex-direction: row;
  
  gap: 10px;
+
+ @media (max-width: 768px) {
+ flex-direction: column;
+ gap: 20px;
+ }
+ @media (max-width: 425px) {
+ margin-top: 50px;
+ }
 `;
 
 export const BoxTitle3 = styled.h3`
  text-align: center;
  font-size: 4vh;
+
+ @media (max-width: 768px) {
+ font-size: 15vh;
+ }
+
+ @media (max-width: 425px) {
+ font-size: 10vh;
+ }
+ @media (max-width: 375px) {
+ font-size: 8vh;
+ }
+ @media (max-width: 320px) {
+ font-size: 6vh;
+ }
 `;
 
 export const BoxTitle = styled.h1`
@@ -67,6 +146,19 @@ export const BoxText = styled.p`
  margin: 0 0 5vh 0;
  font-size: 2vh;
  text-align: left;
+
+ @media (max-width: 768px) {
+ font-size: 4vh;
+ text-align: center;
+ }
+ @media (max-width: 425px) {
+ font-size: 3vh;
+ text-align: center;
+ }
+ @media (max-width: 375px) {
+ font-size: 2vh;
+ text-align: center;
+ }
 `;
 
 export const SlidingBox = styled.div`
@@ -148,9 +240,3 @@ export const LogoContainer = styled.div`
  width: auto; /* 가로 비율 자동 조정 */
  }
 `;
-
-export const AnimatedTitle = styled.h1`
-@media (max-width: 1110px) {
- font-size: 10px;
-}
-`