Merge branch 'main' into fix/deploy

AutoDevLog · Jun 18, 2024 · f69a56a · f69a56a
2 parents 40592cf + a47c448
commit f69a56a
Show file tree

Hide file tree

Showing 8 changed files with 260 additions and 75 deletions.
diff --git 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 (
-    <styles.RoundBox id="roundBox" style={{ ...animationProps, ...style }} onClick = {onclick}>
+    <styles.RoundBox
+      ref={ref}
+      style={{ ...style, ...(alignLeft ? animationPropsLeft : animationPropsRight) }}
+      onClick={onClick}
+      alignLeft={alignLeft}
+    >
       {children}
     </styles.RoundBox>
   );

diff --git 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;
   }
 `;
diff --git a/src/componets/Header/Header.styles.js b/src/componets/Header/Header.styles.js
@@ -30,6 +30,16 @@ export const RoundBox = styled.div`
   background-color: #FFFFFF;
   border-radius: 30px;
   padding: 8px 24px;
+
+  @media (max-width: 425px) {
+    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
@@ -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
@@ -134,12 +134,12 @@ function Home() {
 
               <styles.ButtonContainer>
 
-                <styles.Button
+                <styles.GenerateButton
                   onClick={handleGenerate}
                   disabled={!issue || !inference || !solution}
                 >
                   생성하기
-                </styles.Button>
+                </styles.GenerateButton>
 
               </styles.ButtonContainer>
             </styles.FormColumnContainer>

diff --git 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
@@ -79,12 +79,9 @@ function Main() {
     <styles.Container>
       <Header links={links}/>
       <styles.BodyContainer>
-        <AnimatedTitle title="AUTO" 
-          style={{ color: "white",textAlign: "right"}} trigger={true}/>
-        <AnimatedTitle title="DEVELOPER" 
-          style={{ color: "white",textAlign: "right"}} trigger={true}/>
-        <AnimatedTitle title=".LOG" 
-          style={{ color: "white",textAlign: "left"}} trigger={true}/>
+        <styles.BodyTitleRIGHT>AUTO</styles.BodyTitleRIGHT>
+        <styles.BodyTitleRIGHT>DEVELOPE</styles.BodyTitleRIGHT>
+        <styles.BodyTitleLEFT>.LOG</styles.BodyTitleLEFT>
       </styles.BodyContainer>
       <styles.ColumnContainer>
         <styles.BodyTitle>오늘 하루 당신의 개발일지를 작성하세요</styles.BodyTitle>
@@ -97,7 +94,7 @@ function Main() {
             개발 중에 발생한 이슈는 무엇이었나요?
           </styles.BoxText>
         </AnimatedRoundBox>
-        <AnimatedRoundBox>
+        <AnimatedRoundBox alignLeft = {true}>
           <styles.BoxTitle>
             Inference
           </styles.BoxTitle>
@@ -114,10 +111,7 @@ function Main() {
           </styles.BoxText>
         </AnimatedRoundBox>
       </styles.BoxContainer>
-      </styles.ColumnContainer>
-      <Modal isOpen={isModalOpen} onClose={handleModalClose}>
-      </Modal>
-        <styles.SlidingBox 
+      <styles.SlidingBox 
           isOpen={isSlidingBoxOpen}>
           <styles.CloseButton onClick={handleSlidingBoxClose}>X</styles.CloseButton>
           <styles.FormContainer>
@@ -141,6 +135,9 @@ function Main() {
             <styles.Button onClick={handleLogin}>로그인</styles.Button>
           </styles.FormContainer>
         </styles.SlidingBox>
+      </styles.ColumnContainer>
+      <Modal isOpen={isModalOpen} onClose={handleModalClose}>
+      </Modal>
     </styles.Container>
   );
 }