Merge branch 'develop' into fix/deploy

AutoDevLog · Aug 1, 2024 · e7c25ce · e7c25ce
2 parents 44dd26b + f795149
commit e7c25ce
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 43 deletions.
diff --git a/src/pages/home/Home.js b/src/pages/home/Home.js
@@ -35,6 +35,10 @@ const customStyles = {
     marginRight: '-50%',
     transform: 'translate(-50%, -50%)',
     backgroundColor: 'black',
+    /* 외곽선 둥굴게 */
+    borderRadius: '20px',
+    /* shadow 적용 */
+    boxShadow: '0 0 10px rgba(0, 0, 0, 0.7)',
   }
 };
 
@@ -50,11 +54,11 @@ function Home() {
   const [solution, setSolution] = useState('');
   const [result, setResult] = useState('');
   const [title, setTitle] = useState('');
-  const [shortscript, setShortscript] = useState('');
   const [loading, setLoading] = useState(false);
 
   const [sendloading, setSendLoading] = useState(false);
   const [completed, setCompleted] = useState(false);
+  const [postedURL, setPostedURL] = useState('');
 
   const links = [
     {
@@ -68,6 +72,22 @@ function Home() {
       style: {}
     }
   ];
+  /* Test Button */
+  const handleTestGenerate = async () => {
+    setLoading(true);
+  };
+  const handleTestSend = async () => {
+    setSendLoading(true);
+  };
+  /* Test completed */
+  const handleTestCompleted = async () => {
+    setCompleted(true);
+  }
+
+  const handleOpenNewWindow = () => {
+    window.open(postedURL, '_blank', 'noopener,noreferrer');
+  };
+
 
   const handleGenerate = async () => {
     setLoading(true);
@@ -86,7 +106,10 @@ function Home() {
   const handleSend = async () => {
     //console.log(result);
     setSendLoading(true);
-    await postVelog(initVelogPostFormat(title, result));
+    const postedURL = await postVelog(initVelogPostFormat(title, result));
+    /* 전달 받은 url을 postedURL에 저장 */
+    setPostedURL(postedURL);
+    console.log(postedURL);
     setLoading(false);
     setCompleted(true);
   };
@@ -98,6 +121,7 @@ function Home() {
     setSolution('');
     setTitle('');
     setResult('');
+    setPostedURL('');
     setSendLoading(false);
     setCompleted(false);
   };
@@ -149,11 +173,6 @@ function Home() {
               {(!title || !result) && (
                 <styles.WarningText>제목을 입력주세요</styles.WarningText>
               )}
-              <styles.Input
-                type="text"
-                value={title}
-                onChange={(e) => setTitle(e.target.value)} />
-              <styles.FormTitle> 요약글 </styles.FormTitle>
               <styles.Input
                 type="text"
                 value={title}
@@ -172,7 +191,6 @@ function Home() {
           </styles.FormRowContainer>
         </styles.FormContainer>
       </AnimatedContainer>
-
       <Modal
         isOpen={loading}
         onRequestClose={() => setLoading(false)}
@@ -195,7 +213,7 @@ function Home() {
         <styles.ModalContent>
           <styles.ModalTitle>Velog 업로드 중</styles.ModalTitle>
           <styles.ModalText>잠시만 기다려주세요</styles.ModalText>
-          <BeatLoader color="#FFFFFF" loading={loading} size={15} margin={2} />
+          <BeatLoader color="#FFFFFF" loading={sendloading} size={15} margin={2} />
         </styles.ModalContent>
       </Modal>
 
@@ -208,9 +226,13 @@ function Home() {
         <styles.ModalContent>
           <styles.ModalTitle>작성 완료</styles.ModalTitle>
           <styles.ModalText>작성된 글을 Velog업로드를 완료하였습니다.</styles.ModalText>
-          <Link to="/Home">
-            <styles.Button onClick = {handleReset}>다시 작성하기</styles.Button>
-          </Link>
+          <styles.ModalButtonRowContainer>
+            <Link to="/Home">
+              <styles.Button onClick = {handleReset}>다시 작성하기</styles.Button>
+            </Link>
+              <styles.Button onClick = {handleOpenNewWindow}>작성된 글 확인하기</styles.Button>
+          </styles.ModalButtonRowContainer>
+
         </styles.ModalContent>
       </Modal>
     </styles.Container>

diff --git a/src/pages/home/Home.styles.js b/src/pages/home/Home.styles.js
@@ -16,20 +16,19 @@ white-space: pre-line;
 `;
 
 export const FormContainer = styled.div`
-  margin: 5vh 10vh;
+  margin: 5vw 10vh;
 
   @media (max-width: 425px) {
-    margin: 5vh 5vh;
+    margin: 5vw 5vh;
   }
   @media (max-width: 475px) {
-    margin: 2vh 5vw;
+    margin: 2vw 5vw;
   }
 `;
 
 export const FormRowContainer = styled.div`
   display: flex;
   flex-direction: row;
-
   @media (max-width: 1000px) {
     flex-direction: column;
   }
@@ -50,12 +49,12 @@ export const FormColumnContainer = styled.div`
 
 export const FormTitle = styled.h3`
   text-align: left;
-  margin: 2vh 0;
+  margin: 2vw 0;
   color: white;
 
   @media (max-width: 320px) {
     font-size: 1em;
-    margin: 1vh 0;
+    margin: 1vw 0;
   }
 `;
 
@@ -71,10 +70,11 @@ export const FormText = styled.p`
 
 export const ModalTitle = styled.h1`
   text-align: left;
-  margin: 2vh 0;
+  margin: 0.5vh 0;
   color: white;
 `
 export const ModalText = styled.p`
+  margin-bottom: 3vh;
   text-align: left;
   color: white;
 `;
@@ -199,4 +199,14 @@ export const ModalContent = styled.div`
   justify-content: center;
   align-items: center;
   height: 100%;
+  padding: 20px;
 `;
+
+export const ModalButtonRowContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 10px;
+
+  gap: 10px;
+`;
diff --git a/src/pages/main/Main.js b/src/pages/main/Main.js
@@ -81,7 +81,10 @@ function Main() {
       <styles.BodyContainer>
         <styles.BodyTitleRIGHT>AUTO</styles.BodyTitleRIGHT>
         <styles.BodyTitleRIGHT>DEVELOPE</styles.BodyTitleRIGHT>
-        <styles.BodyTitleLEFT>.LOG</styles.BodyTitleLEFT>
+        <styles.RowTitleContainer>
+          <styles.BodyTitleLEFT>.LOG</styles.BodyTitleLEFT>
+          <styles.BodyTitleBlink>|</styles.BodyTitleBlink>
+        </styles.RowTitleContainer>
       </styles.BodyContainer>
       <styles.ColumnContainer>
         <styles.BodyTitle>오늘 하루 당신의 개발일지를 작성하세요</styles.BodyTitle>

diff --git a/src/pages/main/Main.styles.js b/src/pages/main/Main.styles.js
@@ -31,6 +31,19 @@ const slideOut = keyframes`
   }
 `;
 
+const blink = keyframes`
+  0% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+`
+
 export const Container = styled.div`
   font-family: Arial, sans-serif;
   margin: 0 auto;
@@ -107,28 +120,6 @@ export const BodyTitleRIGHT = styled.h1`
 
 `;
 
-export const BodyTitleLEFT = styled.h1`
-  animation: ${slideUp} 0.5s ease-out 0s 1;
-  color: white;
-  text-align: Left;
-  font-size: 12em;
-
-  @media (max-width: 1024px) {
-    font-size: 8em;
-  }
-
-  @media (max-width: 768px) {
-    font-size: 6em;
-  }
-
-  @media (max-width: 425px) {
-    font-size: 4em;
-  }
-  @media (max-width: 375px) {
-    font-size: 3em;
-  }
-`;
-
 export const RowContainer = styled.div`
   justify-content: center;
   margin: 0 5vh;
@@ -361,6 +352,54 @@ export const LogoContainer = styled.div`
       width: 60vw; /* 가로 비율 자동 조정 */
     }
   }
+`;
 
+export const BodyTitleLEFT = styled.h1`
+  animation: ${slideUp} 0.5s ease-out 0s 1;
+  color: white;
+  text-align: left;
+  font-size: 12em;
+  line-height: 1; /* 줄 간격을 1로 설정 */
 
+  @media (max-width: 1024px) {
+    font-size: 8em;
+  }
+
+  @media (max-width: 768px) {
+    font-size: 6em;
+  }
+
+  @media (max-width: 425px) {
+    font-size: 4em;
+  }
+  @media (max-width: 375px) {
+    font-size: 3em;
+  }
+`;
+
+export const BodyTitleBlink = styled.div`
+  animation: ${blink} 1s infinite;
+  color: white;
+  font-size: 12em;
+  line-height: 1; /* 줄 간격을 1로 설정 */
+
+  @media (max-width: 1024px) {
+    font-size: 11em;
+  }
+
+  @media (max-width: 768px) {
+    font-size: 8em;
+  }
+
+  @media (max-width: 425px) {
+    font-size: 6em;
+  }
+  @media (max-width: 375px) {
+    font-size: 4em;
+  }
 `;
+
+export const RowTitleContainer = styled.div`
+  display: flex;
+  align-items: baseline; /* baseline 정렬로 변경 */
+`;
diff --git a/src/services/apis.js b/src/services/apis.js
@@ -114,7 +114,8 @@ export const sendLoginData = async ( data )  => {
 
       if (response.ok) {
         console.log(response);
-        return response.text();
+        const data = await response.json();
+        return data.postUrl
       } else {
         throw new Error('Failed to send data');
       }