Merge branch 'Feature_Buttons_Update' into develop

team-tadak · Nov 13, 2022 · fec59dc · fec59dc
2 parents 6721a79 + 4ab819a
commit fec59dc
Show file tree

Hide file tree

Showing 13 changed files with 72 additions and 24 deletions.
diff --git a/public/index.html b/public/index.html
@@ -25,6 +25,7 @@
       Learn how to configure a non-root public URL by running `npm run build`.
     -->
     <link rel="preload" href="./images/main_image.png" as="image" />
+    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/static/pretendard-dynamic-subset.css" />
     <title>타닥 :: 코딩으로 타자연습!</title>
   </head>
   <body>

diff --git a/src/components/Syntax/index.js b/src/components/Syntax/index.js
@@ -1,4 +1,5 @@
 import styled from "@emotion/styled";
+import { Link } from "react-router-dom";
 
 export const SyntaxSelectContainer = styled.div`
   width: 280px;
@@ -89,7 +90,10 @@ export const SyntaxStartButton = styled.button`
 // summary="파이썬에서 재사용을 위한 함수를 배웁니다! 함수는 프로그래밍 언어에서 핵심적입니다!"
 // />
 
-function SyntaxSelectComponent({ example, title, level, summary }) {
+function SyntaxSelectComponent({ language, example, title, level, summary }) {
+
+  const linkURL = "/" + language + "/" + level;
+
   var stars = [];
   for (var i = 0; i < 5; i++) {
     if (i < level) {
@@ -108,7 +112,10 @@ function SyntaxSelectComponent({ example, title, level, summary }) {
         <SyntaxLevel>{stars}</SyntaxLevel>
       </SyntaxTitleBox>
       <SyntaxSummary>{summary}</SyntaxSummary>
-      <SyntaxStartButton onClick={() => {}}>시작하기!</SyntaxStartButton>
+      <Link to={linkURL}>
+        <SyntaxStartButton>시작하기!</SyntaxStartButton>
+      </Link>  
+
     </SyntaxSelectContainer>
   );
 }

diff --git a/src/components/TypeInput/index.js b/src/components/TypeInput/index.js
@@ -31,7 +31,7 @@ function parseNewline(paragraph) {
   return newLineIndices;
 }
 
-const TEST_STRING_INDEX = 1;
+const TEST_STRING_INDEX = 5;
 const TEST_STRING = MOCKUP_STRING[TEST_STRING_INDEX];
 
 function TypeInput({ timePassed, setCurrentKPM, currentKPM, setIsPlaying }) {

diff --git a/src/components/common/Button/index.js b/src/components/common/Button/index.js
@@ -29,10 +29,6 @@ const StyledButton = styled.button`
   padding: 16px 12px 16px 16px;
   column-gap: 7px;
 
-  // position: absolute;
-  width: 129px;
-  height: 56px;
-
   background: #FFFFFF;
   border-radius: 10px;
   cursor:pointer;

diff --git a/src/constants/paragraphs.js b/src/constants/paragraphs.js
diff --git a/src/pages/LanguageSelect/style.js b/src/pages/LanguageSelect/style.js
@@ -19,9 +19,20 @@ export const LanguageSelectContainer = styled.div`
 
 export const LanguageSelectTitle = styled.div`
     flex: 1 1 0;
-    font-style: bold;
-    font-size:40px;
-    margin: 20px;
+    // font-style: bold;
+    // font-size:40px;
+    // margin: 20px;
+    // font-weight: 700;
+    // font-size: 32px;
+    // line-height: 38px;
+    // margin-top: 24px;
+    // margin-bottom: 40px;
+    // text-align: center;
+    width: 100%;
+    font-size: 32px;
+    font-weight: bold;
+    padding: 24px;
+    text-align: center;
 `
 
 export const LanguageCardList = styled.div`

diff --git a/src/pages/Login/index.js b/src/pages/Login/index.js
@@ -2,11 +2,12 @@ import React from "react";
 import { useCallback } from "react";
 import { serverAxios } from "utils/commonAxios";
 import { mutate } from "swr";
-import { ButtonDiv, LoginTitle, ToRegister, ToRegisterParagraph } from "./style";
+import { ButtonDiv, LoginForm, LoginTitle, ToRegister, ToRegisterParagraph } from "./style";
 import InputEmail from "components/common/Inputs/InputEmail";
 import InputPassword from "components/common/Inputs/InputPassword";
 import Button from "components/common/Button";
 import { useNavigate } from "react-router-dom";
+import { Link } from "react-router-dom";
 
 function Login() {
   const navigate = useNavigate();
@@ -51,15 +52,15 @@ function Login() {
   return (
     <>
       <LoginTitle>로그인하기</LoginTitle>
-      <form onSubmit={handleSubmit}>
+      <LoginForm onSubmit={handleSubmit}>
         <InputEmail></InputEmail>
         <InputPassword></InputPassword>
         <Button type="submit">로그인</Button>
-      </form>
+      </LoginForm>
       <ButtonDiv>
         <ToRegisterParagraph>
           <ToRegister>
-            <a href="./register">회원가입</a>
+            <Link to="/register">회원가입</Link>
           </ToRegister>
           하러 가기
         </ToRegisterParagraph>

diff --git a/src/pages/Login/style.js b/src/pages/Login/style.js
@@ -26,6 +26,13 @@ export const ToRegisterParagraph = styled.p`
 
 `;
 
+export const LoginForm = styled.form`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    
+`;
+
 export const ToRegister = styled.span`
     text-decoration: underline;
 `;
diff --git a/src/pages/Main/index.js b/src/pages/Main/index.js
@@ -18,6 +18,7 @@ import { defaultFadeInUpVariants, staggerOne } from "styles/motions";
 import { css } from "@emotion/react";
 import InputUserName from "components/common/Inputs/InputUserName";
 import DropdownComponent from "components/Dropdown";
+import { Link } from "react-router-dom";
 
 function Main() {
   const [gender, setSelected] = useState(undefined);
@@ -55,12 +56,14 @@ function Main() {
             </InputWrapper>
             <InputWrapper>
               <LabelBox> <wbr /> </LabelBox>
-              <Button
-                css={css` margin: 9px 0;`}
-                onClick={handleSubmit}
-              >
-                시작하기!
-              </Button>
+              <Link to="/languageselect">
+                <Button
+                  css={css` margin: 9px 0;`}
+                  onClick={handleSubmit}
+                >
+                  시작하기!
+                </Button>
+              </Link>
             </InputWrapper>
           </MainPageInputContainer>
         </MainPageContentSection>

diff --git a/src/pages/Register/index.js b/src/pages/Register/index.js
@@ -4,8 +4,9 @@ import InputPasswordAndCheck from "components/common/Inputs/InputPasswordAndChec
 import InputUserName from "components/common/Inputs/InputUserName";
 import React from "react";
 import { useCallback } from "react";
+import { Link } from "react-router-dom";
 import { serverAxios } from "utils/commonAxios";
-import { ButtonDiv, RegisterInformation, RegisterTitle, ToLogin, ToLoginParagraph } from "./style";
+import { ButtonDiv, RegisterForm, RegisterInformation, RegisterTitle, ToLogin, ToLoginParagraph } from "./style";
 
 function Register() {
   const handleSubmit = useCallback((e) => {
@@ -42,17 +43,17 @@ function Register() {
         회원으로 플레이해서 다른 사용자들과 누가 더 빠른지 겨뤄보세요! <br></br>
         나의 기록도 저장할 수 있답니다!
       </RegisterInformation>
-      <form onSubmit={handleSubmit}>
+      <RegisterForm onSubmit={handleSubmit}>
         <InputEmail></InputEmail>
         <InputPasswordAndCheck></InputPasswordAndCheck>
         <InputUserName></InputUserName>
         <Button type="submit">시작하기!</Button>
-      </form>
+      </RegisterForm>
       <ButtonDiv>
         <ToLoginParagraph>
           계정이 이미 있으세요?{" "}
           <ToLogin>
-            <a href="./login">로그인</a>
+            <Link to="/login">로그인</Link>
           </ToLogin>
           하러 가기
         </ToLoginParagraph>

diff --git a/src/pages/Register/style.js b/src/pages/Register/style.js
@@ -34,6 +34,13 @@ export const ToLoginParagraph = styled.p`
 
 `;
 
+export const RegisterForm = styled.form`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    
+`;
+
 export const ToLogin = styled.span`
     text-decoration: underline;
 `;
diff --git a/src/pages/SyntaxSelect/index.js b/src/pages/SyntaxSelect/index.js
@@ -49,6 +49,7 @@ function SyntaxSelect({ language }) {
             {SYNTAXES[selectedlanguage].map((element) => (
               <SyntaxItem>
                 <SyntaxSelectComponent
+                  language = {language}
                   example={element.example}
                   title={element.title}
                   level={element.level}

diff --git a/src/styles/GlobalStyles.js b/src/styles/GlobalStyles.js
@@ -1,5 +1,6 @@
 import { css, Global, useTheme } from "@emotion/react";
 import { resetAnchorStyle } from "styles/utils/anchor";
+import { defaultFadeInSlideToRightVariants } from "./motions/motions";
 import { resetCSS } from "./reset";
 
 export const globalStyles = (theme, isOpen) => css`
@@ -34,6 +35,11 @@ export const globalStyles = (theme, isOpen) => css`
   a {
     ${resetAnchorStyle}
   }
+  
+  input, button {
+    font-family: inherit;
+  }
+
 `;
 
 const GlobalStyles = () => {