From 16344a32cf785eca6b1129f19d27b0062a1fbb71 Mon Sep 17 00:00:00 2001 From: DevDAN09 Date: Tue, 18 Jun 2024 15:28:55 +0900 Subject: [PATCH 1/2] fix: responsive main page --- .../AnimatedRoundBox/AnimatedRoundBox.js | 56 ++++---- .../AnimatedRoundBox.styles.js | 18 ++- src/componets/Header/Header.styles.js | 5 + src/pages/main/Main.js | 11 +- src/pages/main/Main.styles.js | 124 ++++++++++++++---- 5 files changed, 152 insertions(+), 62 deletions(-) diff --git a/src/componets/Animated/AnimatedRoundBox/AnimatedRoundBox.js b/src/componets/Animated/AnimatedRoundBox/AnimatedRoundBox.js index 4edd48b..09e0d91 100644 --- a/src/componets/Animated/AnimatedRoundBox/AnimatedRoundBox.js +++ b/src/componets/Animated/AnimatedRoundBox/AnimatedRoundBox.js @@ -1,43 +1,47 @@ -import React, { useEffect, useState } from 'react'; +import React, { useEffect, useState, useRef } from 'react'; import { useSpring, animated } from 'react-spring'; import * as styles from './AnimatedRoundBox.styles'; -const AnimatedRoundBox = ({ children, trigger, style, onclick}) => { +const AnimatedRoundBox = ({ children, trigger, style, onClick, alignLeft }) => { const [isVisible, setIsVisible] = useState(false); + const ref = useRef(null); - const animationProps = useSpring({ + const animationPropsRight = useSpring({ transform: isVisible ? 'translateX(0)' : 'translateX(100%)', opacity: isVisible ? 1 : 0, }); + const animationPropsLeft = useSpring({ + transform: isVisible ? 'translateX(0)' : 'translateX(-100%)', + opacity: isVisible ? 1 : 0, + }); + useEffect(() => { - const handleScroll = () => { - const element = document.getElementById('roundBox'); - if (element) { - const rect = element.getBoundingClientRect(); - const windowHeight = window.innerHeight || document.documentElement.clientHeight; - - if (rect.top <= windowHeight && rect.bottom >= 0) { - setIsVisible(true); - } else { - setIsVisible(false); - } - } - }; + const observer = new IntersectionObserver( + ([entry]) => { + setIsVisible(entry.isIntersecting); + }, + { threshold: 0.1 } + ); - if (trigger) { - window.addEventListener('scroll', handleScroll); - handleScroll(); // Initial check - return () => { - window.removeEventListener('scroll', handleScroll); - }; - } else { - setIsVisible(true); + if (ref.current) { + observer.observe(ref.current); } - }, [trigger]); + + return () => { + if (ref.current) { + observer.unobserve(ref.current); + } + }; + }, []); return ( - + {children} ); diff --git a/src/componets/Animated/AnimatedRoundBox/AnimatedRoundBox.styles.js b/src/componets/Animated/AnimatedRoundBox/AnimatedRoundBox.styles.js index 518a1e7..d885081 100644 --- a/src/componets/Animated/AnimatedRoundBox/AnimatedRoundBox.styles.js +++ b/src/componets/Animated/AnimatedRoundBox/AnimatedRoundBox.styles.js @@ -5,29 +5,35 @@ export const RoundBox = styled(animated.div)` display: flex; flex-direction: column; background-color: #f0f0f0; - width: 30vh; + width: 80vh; border-radius: 10px; padding: 30px; + margin-bottom: 20px; + margin-left: ${props => props.alignLeft ? '0' : 'auto'}; @media (max-width: 1024px) { - width: 30vh; + width: 80vh; + margin-left: ${props => props.alignLeft ? '0' : 'auto'}; + margin-right: ${props => props.alignLeft ? 'auto' : '0'}; } @media (max-width: 768px) { width: 80vh; - margin:0 auto; + margin: auto; + margin-left: ${props => props.alignLeft ? '0' : 'auto'}; + margin-right: ${props => props.alignLeft ? 'auto' : '0'}; } @media (max-width: 425px) { - width: 30vh; + width: 35vh; margin:0 auto; } @media (max-width: 375px) { - width: 25vh; + width: 30vh; margin: 0 auto; } @media (max-width: 320px) { - width: 20vh; + width: 25vh; margin: 0 auto; } `; \ No newline at end of file diff --git a/src/componets/Header/Header.styles.js b/src/componets/Header/Header.styles.js index 89a9e28..aaf2160 100644 --- a/src/componets/Header/Header.styles.js +++ b/src/componets/Header/Header.styles.js @@ -30,6 +30,11 @@ export const RoundBox = styled.div` background-color: #FFFFFF; border-radius: 30px; padding: 8px 24px; + + @media (max-width: 425px) { + padding: 8px 16px; + font-size: 12px; + } `; export const HeaderButtonContainer = styled.div` diff --git a/src/pages/main/Main.js b/src/pages/main/Main.js index b2c4bcd..d514f83 100644 --- a/src/pages/main/Main.js +++ b/src/pages/main/Main.js @@ -84,12 +84,9 @@ function Main() {
- - - + AUTO + DEVELOPE + .LOG 오늘 하루 당신의 개발일지를 작성하세요 @@ -102,7 +99,7 @@ function Main() { 개발 중에 발생한 이슈는 무엇이었나요? - + Inference diff --git a/src/pages/main/Main.styles.js b/src/pages/main/Main.styles.js index 37119b9..174739c 100644 --- a/src/pages/main/Main.styles.js +++ b/src/pages/main/Main.styles.js @@ -1,11 +1,24 @@ import styled, { keyframes, css } from "styled-components"; +const slideUp = keyframes` + from { + transform: translateY(100%); + opactiy: 0; + } + to { + transform: translateY(0); + opacity: 1; + } +`; + const slideIn = keyframes` from { transform: translateX(100%); + opactiy: 0; } to { transform: translateX(0); + opacity: 1; } `; @@ -27,33 +40,33 @@ export const Container = styled.div` export const BodyContainer = styled.div` background-color: black; - padding: 20px; + padding: 5px 100px; @media (max-width: 768px) { - padding: 10vh; + padding: 1vh 10vh; } @media (max-width: 425px) { - padding: 5vh; + padding: 0.5vh 5vh; } - @media (max-width: 425px) { - padding: 5vh; + @media (max-width: 420px) { + padding: 0.5vh 5vh; } @media (max-width: 375px) { - padding: 5vh; + padding: 0.3vh 5vh; } @media (max-width: 320px) { - padding: 2vh; + padding: 0.2vh 5vh; } `; export const BodyTitle = styled.h1` color: white; text-align: center; - padding: 10px; + font-size: 12vh; @media (max-width: 1024px) { - font-size: 15vh; + font-size: 8vh; } @media (max-width: 768px) { @@ -61,13 +74,63 @@ export const BodyTitle = styled.h1` } @media (max-width: 425px) { - font-size: 4vh; + font-size: 3vh; } @media (max-width: 375px) { font-size: 3vh; } @media (max-width: 320px) { - font-size: 3vh; + font-size: 2.5vh; + } +`; + +export const BodyTitleRIGHT = styled.h1` + animation: ${slideUp} 0.5s ease-out 0s 1; + color: white; + text-align: Right; + font-size: 25vh; + + @media (max-width: 1024px) { + font-size: 18vh; + } + + @media (max-width: 768px) { + font-size: 15vh; + } + + @media (max-width: 425px) { + font-size: 7.5vh; + } + @media (max-width: 375px) { + font-size: 7vh; + } + @media (max-width: 320px) { + font-size: 5vh; + } +`; + +export const BodyTitleLEFT = styled.h1` + animation: ${slideUp} 0.5s ease-out 0s 1; + color: white; + text-align: Left; + font-size: 25vh; + + @media (max-width: 1024px) { + font-size: 18vh; + } + + @media (max-width: 768px) { + font-size: 15vh; + } + + @media (max-width: 425px) { + font-size: 7.5vh; + } + @media (max-width: 375px) { + font-size: 7vh; + } + @media (max-width: 320px) { + font-size: 5vh; } `; @@ -80,23 +143,23 @@ export const RowContainer = styled.div` export const ColumnContainer = styled.div` justify-content: center; - margin: 0 5vh; + margin: 0 30px; display: flex; flex-direction: column; - padding: 10vh; + padding: 10px 60px; @media (max-width: 768px) { padding: 6vh; } @media (max-width: 425px) { - padding: 6vh; + padding: 1vh 3vh; } @media (max-width: 375px) { - padding: 4vh; + padding: 0.8vh 1vh; } @media (max-width: 320px) { - padding: 2vh; + padding: 0.8vh 0.5vh; } ` @@ -105,9 +168,9 @@ export const BoxContainer = styled.div` margin-top: 100px; padding: 0px; display: flex; - flex-direction: row; + flex-direction: column; - gap: 10px; + gap: 5px; @media (max-width: 768px) { flex-direction: column; @@ -138,25 +201,40 @@ export const BoxTitle3 = styled.h3` `; export const BoxTitle = styled.h1` - font-size: 4vh; + font-size: 6vh; text-align: center; + + @media (max-width: 768px) { + font-size: 6vh; + } + + @media (max-width: 425px) { + font-size: 5vh; + } + @media (max-width: 375px) { + font-size: 5vh; + } + @media (max-width: 320px) { + font-size: 4vh; + } + `; export const BoxText = styled.p` margin: 0 0 5vh 0; - font-size: 2vh; - text-align: left; + font-size: 4vh; + text-align: center; @media (max-width: 768px) { font-size: 4vh; text-align: center; } @media (max-width: 425px) { - font-size: 3vh; + font-size: 3.5vh; text-align: center; } @media (max-width: 375px) { - font-size: 2vh; + font-size: 3vh; text-align: center; } `; From a47c448c9acdda4935d2164db770e113e14b7dd0 Mon Sep 17 00:00:00 2001 From: DevDAN09 Date: Tue, 18 Jun 2024 16:06:41 +0900 Subject: [PATCH 2/2] fix: Velog, Home page change Responsable --- src/componets/Header/Header.styles.js | 5 ++ src/pages/VelogPage/VelogPage.styles.js | 25 ++++++++++ src/pages/home/Home.js | 4 +- src/pages/home/Home.styles.js | 62 ++++++++++++++++++++++++- src/pages/main/Main.js | 8 ++-- src/pages/main/Main.styles.js | 17 +++++-- 6 files changed, 108 insertions(+), 13 deletions(-) diff --git a/src/componets/Header/Header.styles.js b/src/componets/Header/Header.styles.js index aaf2160..ea74e48 100644 --- a/src/componets/Header/Header.styles.js +++ b/src/componets/Header/Header.styles.js @@ -35,6 +35,11 @@ export const RoundBox = styled.div` padding: 8px 16px; font-size: 12px; } + + @media (max-width: 320px) { + padding: 8px 16px; + font-size: 8px; + } `; export const HeaderButtonContainer = styled.div` diff --git a/src/pages/VelogPage/VelogPage.styles.js b/src/pages/VelogPage/VelogPage.styles.js index c2c07ae..483e3a9 100644 --- a/src/pages/VelogPage/VelogPage.styles.js +++ b/src/pages/VelogPage/VelogPage.styles.js @@ -24,10 +24,21 @@ export const FormContainer = styled.div` flex-direction: column; /* 수직 정렬 */ justify-content: center; align-items: center; + + @media (max-width: 425px) { + padding: 20px 10px; + } + @media (max-width: 375px) { + margin: 10px; + } `; export const FormTitle = styled.h1` text-align: left; + + @media (max-width: 425px) { + Font-size: 3vh; + } `; export const FormText = styled.p` @@ -48,6 +59,20 @@ export const Input = styled.input` border: 0.3px solid #aaa; /* 포커스 시 테두리 색상 변경 (선택 사항) */ /* background-color: #ddd; 포커스 시 배경색 변경 (선택 사항) */ } + @media (max-width: 425px) { + width: 45vh; + margin: 5px 20px; + } + + @media (max-width: 425px) { + width: 35vh; + margin: 5px 20px; + } + + @media (max-width: 425px) { + width: 30vh; + margin: 5px 20px; + } `; export const ErrorText = styled.p` color: red; diff --git a/src/pages/home/Home.js b/src/pages/home/Home.js index 7e5e5be..0b3e9d1 100644 --- a/src/pages/home/Home.js +++ b/src/pages/home/Home.js @@ -134,12 +134,12 @@ function Home() { - 생성하기 - + diff --git a/src/pages/home/Home.styles.js b/src/pages/home/Home.styles.js index 76c0b16..5e195d8 100644 --- a/src/pages/home/Home.styles.js +++ b/src/pages/home/Home.styles.js @@ -18,6 +18,9 @@ white-space: pre-line; export const FormContainer = styled.div` margin: 5vh 10vh; + @media (max-width: 425px) { + margin: 5vh 5vh; + } `; export const FormRowContainer = styled.div` @@ -46,12 +49,21 @@ export const FormTitle = styled.h3` text-align: left; margin: 2vh 0; color: white; + + @media (max-width: 320px) { + font-size: 2vh; + margin: 1vh 0; + } `; export const FormText = styled.p` text-align: left; margin: 0vh 0; color: white; + + @media (max-width: 320px) { + font-size: 1.5vh; + } `; export const ModalTitle = styled.h1` @@ -68,7 +80,6 @@ export const Input = styled.input` width: 100%; background-color: #EFEFEF; padding: 10px; - margin: 2px 0; border-radius: 15px; border: 0.3px solid #ccc; box-sizing: border-box; @@ -83,6 +94,35 @@ export const ButtonContainer = styled.div` display: flex; justify-content: flex-end; margin-top: 10px; + + @media (max-width: 375px) { + justify-content: center; + } +`; + +export const GenerateButton = styled.button` + padding: 10px 20px; + border-radius: 4px; + border: none; + background-color: white; + color: black; + cursor: pointer; + font-weight: bold; + border: 0.3px solid #ccc; + + &:hover { + background-color: #EDF1F5; + } + + @media (max-width: 768px) { + padding: 10px 40px; + } + + @media (max-width: 375px) { + margin-top: 10px; + margin-bottom: 20px; + padding: 10px 100px; + } `; export const Button = styled.button` @@ -94,17 +134,35 @@ export const Button = styled.button` cursor: pointer; font-weight: bold; border: 0.3px solid #ccc; - margin-left: 10px; &:hover { background-color: #EDF1F5; } + + @media (max-width: 768px) { + padding: 10px 40px; + } + + @media (max-width: 375px) { + margin-top: 10px; + margin-bottom: 20px; + padding: 10px auto; + } + @media (max-width: 320px) { + margin-top: 10px; + margin-bottom: 20px; + padding: 10px 20px; + } `; export const WarningText = styled.p` text-align: left; color: red; margin-top: -5px; + + @media (max-width: 320px) { + font-size: 1.5vh; + } `; export const ResultBox = styled.div` diff --git a/src/pages/main/Main.js b/src/pages/main/Main.js index d514f83..c467689 100644 --- a/src/pages/main/Main.js +++ b/src/pages/main/Main.js @@ -116,10 +116,7 @@ function Main() { - - - - X @@ -143,6 +140,9 @@ function Main() { 로그인 + + + ); } diff --git a/src/pages/main/Main.styles.js b/src/pages/main/Main.styles.js index 174739c..82f78a7 100644 --- a/src/pages/main/Main.styles.js +++ b/src/pages/main/Main.styles.js @@ -243,15 +243,22 @@ export const SlidingBox = styled.div` position: fixed; top: 0; right: 0; - width: 60vh; + width: 100%; + max-width: 400px; height: 100%; background-color: white; - box-shadow: -2px 0 5px rgba(0,0,0,0.5); - border-radius: 10px 0 0 10px; - z-index: 1000; - animation: ${props => props.isOpen ? css`${slideIn} 0.3s forwards` : css`${slideOut} 0.3s forwards`}; + box-shadow: -2px 0 5px rgba(0, 0, 0, 0.5); + transform: translateX(100%); + transition: transform 0.3s ease-in-out; + + ${(props) => + props.isOpen && + css` + transform: translateX(0); + `} `; + export const ButtonContainer = styled.div` margin-right: 5vh; display: flex;