feat: 핵심 단어, 문장 연습 디자인 반영 (#33)

src/components/common/common.styled.ts

@@ -5,7 +5,8 @@ export const CommonWrapper = styled.div`
   flex-direction: column;
   justify-content: space-evenly;
   align-items: center;
-  min-height: 100vh;
+  min-height: 100%;
+  height: fit-content;
   width: 90%;
 `;
 

src/components/common/progressBar/ProgressBar.styeld.ts

@@ -7,7 +7,7 @@ export const ProgressBarWrapper = styled.div`
   height: 14px;
   border-radius: 20px;
   background: #ededed;
-  margin-top: 2rem;
+  margin-top: 3rem;
   position: relative;
   margin-bottom: 2rem;
 `;

src/components/learn/SpeakPractice.tsx

@@ -1,76 +1,36 @@
 import { SpeakPracticeProps } from "@type/learning";
 import { speakText } from "@utils/speechUtil";
-import styled from "styled-components";
+import * as S from "./speakPractice.styled";
 
 const SpeakPractice = ({ data }: { data: SpeakPracticeProps }) => {
   return (
-    <Wrapper>
-      <Title>동화의 핵심 단어에요</Title>
+    <S.Wrapper>
+      <S.Title>동화의 핵심 단어에요</S.Title>
       {data.words.map((w, idx) => (
-        <SpeakBox key={idx}>
-          <SpeakBtn
+        <S.SpeakRowBox key={idx}>
+          <S.SpeakBtn
             src="/speaker.png"
             onClick={() => speakText(w.word, data.languageId)}
           />
-          <WordBox>{w.word}</WordBox>
-          <SubText> {w.mean}</SubText>
-        </SpeakBox>
+          <S.WordBox>{w.word}</S.WordBox>
+          <S.MeanText1> {w.mean}</S.MeanText1>
+        </S.SpeakRowBox>
       ))}
-      <Title>동화의 핵심 문장이에요</Title>
+      <S.Title>동화의 핵심 문장이에요</S.Title>
       {data.sentences.map((s, idx) => (
-        <SpeakBox key={idx}>
-          <SpeakBtn
-            src="/speaker.png"
-            onClick={() => speakText(s.sentence, data.languageId)}
-          />
-          <WordBox>{s.sentence}</WordBox>
-          <SubText> {s.mean}</SubText>
-        </SpeakBox>
+        <S.SpeakColumnBox>
+          <S.SpeakRowBox key={idx}>
+            <S.SpeakBtn
+              src="/speaker.png"
+              onClick={() => speakText(s.sentence, data.languageId)}
+            />
+            <S.WordBox>{s.sentence}</S.WordBox>
+          </S.SpeakRowBox>
+          <S.MeanText2> {s.mean}</S.MeanText2>
+        </S.SpeakColumnBox>
       ))}
-    </Wrapper>
+    </S.Wrapper>
   );
 };
 
 export default SpeakPractice;
-
-const Wrapper = styled.div`
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  gap: 2rem;
-  width: 100%;
-  margin-bottom: 2rem;
-`;
-
-const Title = styled.div`
-  font-size: 2.5rem;
-  font-weight: 700;
-`;
-
-const SpeakBox = styled.div`
-  display: flex;
-  align-items: center;
-  gap: 1.3rem;
-  height: fit-content;
-`;
-
-const SpeakBtn = styled.img`
-  cursor: pointer;
-  width: 2.2rem;
-`;
-
-const WordBox = styled.div`
-  font-size: 2.2rem;
-  font-weight: 700;
-  border: 1px solid #dcdcdc;
-  border-radius: 8px;
-  padding: 1rem 1.5rem;
-  line-height: 3rem;
-`;
-
-const SubText = styled.div`
-  font-size: 2rem;
-  font-weight: 400;
-  color: #808080;
-  margin-left: 4rem;
-`;

src/components/learn/learn.styled.ts

@@ -55,6 +55,9 @@ export const Input = styled.input<{ $isInputValid: string | null }>`
   font-weight: 700;
   font-family: "NanumSquareRound";
   box-sizing: border-box;
+  &:focus {
+    outline: none;
+  }
 `;
 
 export const WordButtonContainer = styled.div`

src/components/learn/speakPractice.styled.ts

@@ -0,0 +1,57 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  gap: 2rem;
+  width: 100%;
+  margin-bottom: 4rem;
+`;
+
+export const Title = styled.div`
+  font-size: 2.5rem;
+  font-weight: 800;
+  margin-top: 3rem;
+`;
+
+export const SpeakRowBox = styled.div`
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  height: fit-content;
+`;
+
+export const SpeakColumnBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  height: fit-content;
+`;
+
+export const SpeakBtn = styled.img`
+  cursor: pointer;
+  width: 2.2rem;
+`;
+
+export const WordBox = styled.div`
+  font-size: 2.2rem;
+  font-weight: 700;
+  border: 1px solid #dcdcdc;
+  border-radius: 8px;
+  padding: 0.8rem 2rem;
+  line-height: 3rem;
+`;
+
+export const MeanText1 = styled.div`
+  font-size: 2rem;
+  font-weight: 400;
+  color: #808080;
+  margin-left: 2rem;
+`;
+export const MeanText2 = styled.div`
+  font-size: 2rem;
+  font-weight: 400;
+  color: #808080;
+  margin-top: 1rem;
+  margin-left: 4rem;
+`;

src/components/onboarding/AgeInput.tsx

@@ -85,4 +85,7 @@ const Input = styled.input`
   left: 0;
   height: 100%;
   background-color: transparent;
+  &:focus {
+    outline: none;
+  }
 `;