feat: 동화 읽기 페이지 퍼블리싱

src/components/tales/readTale/ReadTale.styled.ts

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  width: 95%;
+  height: 90%;
+  overflow-y: hidden;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+`;
+
+export const ReadTaleHead = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 2.8rem 0;
+`;
+
+export const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+export const Title = styled.div`
+  font-size: 2.5rem;
+  font-weight: 800;
+`;
+
+export const Complete = styled.div`
+  font-size: 1.7rem;
+  font-weight: 500;
+  color: #f7a300;
+`;
+
+export const TaleWrapper = styled.div`
+  width: 100%;
+  height: 75%;
+  max-height: 75%;
+  overflow-y: scroll;
+  font-size: 1.8rem;
+  margin-bottom: 1rem;
+`;
+
+export const BtnWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+`;

src/components/tales/readTale/ReadTale.tsx

@@ -0,0 +1,57 @@
+import Header from "@components/common/header/Header";
+import * as S from "./ReadTale.styled";
+import Dropdown from "@components/common/dropDown/Dropdown";
+import { nationElements } from "@pages/OnboardingPage";
+import { useState } from "react";
+import NextBtn from "@components/common/NextBtn";
+import LoadingScreen from "@components/common/spinner/LoadingScreen";
+
+const ReadTale = () => {
+  const [result, setResult] = useState<string | number | null>(null);
+  const data = null;
+
+  const onClick = () => {
+    console.log(result);
+  };
+  return (
+    <>
+      <Header text="동화 읽기" />
+      <S.Wrapper>
+        {data ? (
+          <>
+            <S.ReadTaleHead>
+              <S.TitleWrapper>
+                <S.Complete>동화가 완성되었어요!</S.Complete>
+                <S.Title>제목: 사과나무와 작은 동물들</S.Title>
+              </S.TitleWrapper>
+              <Dropdown
+                selectList={nationElements}
+                setter={setResult}
+                width="30%"
+              />
+            </S.ReadTaleHead>
+            <S.TaleWrapper></S.TaleWrapper>
+            <S.BtnWrapper>
+              <NextBtn
+                width="48%"
+                isActive={true}
+                text="음성으로 듣기"
+                handleBtn={onClick}
+              />
+              <NextBtn
+                width="48%"
+                isActive={true}
+                text="학습하기"
+                handleBtn={onClick}
+              />
+            </S.BtnWrapper>
+          </>
+        ) : (
+          <LoadingScreen text="동화" />
+        )}
+      </S.Wrapper>
+    </>
+  );
+};
+
+export default ReadTale;

src/router.tsx

@@ -8,6 +8,7 @@ import KakaoRedirect from "@pages/KakaoRedirect";
 import LearningPage from "@pages/LearningPage";
 import SelectKeywordPage from "@pages/SelectKeywordPage";
 import TaleDetailPage from "@pages/TaleDetailPage";
+import ReadTale from "@components/tales/readTale/ReadTale";
 
 const router = createBrowserRouter([
   {
@@ -46,6 +47,10 @@ const router = createBrowserRouter([
     path: "/taleDetail",
     element: <TaleDetailPage />,
   },
+  {
+    path: "/readTale",
+    element: <ReadTale />,
+  },
 ]);
 
 export default router;