Merge pull request #43 from GlowTales/feat/#41

[FEAT] 홈페이지 퍼블리싱

src/components/home/Home.styled.ts

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  width: 90%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 3rem;
+  padding: 3rem;
+`;

src/components/home/Home.tsx

@@ -0,0 +1,20 @@
+import TabBar from "@components/common/tabBar/TabBar";
+import HomeHeader from "./homeHeader/HomeHeader";
+import * as S from "./Home.styled";
+import HomeStatus from "./homeStatus/HomeStatus";
+import HomeRecentTales from "./homeRecentTales/HomeRecentTales";
+
+const Home = () => {
+  return (
+    <>
+      <S.Wrapper>
+        <HomeHeader />
+        <HomeStatus />
+        <HomeRecentTales />
+      </S.Wrapper>
+      <TabBar />
+    </>
+  );
+};
+
+export default Home;

src/components/home/homeHeader/HomeHeader.styled.ts

@@ -0,0 +1,5 @@
+import styled from "styled-components";
+
+export const Img = styled.img`
+  width: 20%;
+`;

src/components/home/homeHeader/HomeHeader.tsx

@@ -0,0 +1,7 @@
+import * as S from "./HomeHeader.styled";
+
+const HomeHeader = () => {
+  return <S.Img src="/fullLogo.png" />;
+};
+
+export default HomeHeader;

src/components/home/homeRecentTales/Card.styled.ts

@@ -0,0 +1,16 @@
+import { CardProps } from "@type/createTale";
+import styled from "styled-components";
+
+export const Card = styled.div<CardProps>`
+  width: 200px;
+  height: ${({ height }) => height}; /* Height is dynamic */
+  background: linear-gradient(
+    to right,
+    ${({ backgroundColor1 }) => backgroundColor1} 10%,
+    ${({ backgroundColor2 }) => backgroundColor2} 10%
+  );
+  border-radius: 8px;
+  margin: 5px;
+  padding: 3rem;
+  box-sizing: border-box;
+`;

src/components/home/homeRecentTales/Card.tsx

@@ -0,0 +1,38 @@
+import * as S from "./Card.styled";
+
+// 색상 쌍 배열
+const colorPairs = [
+  ["#B590FF", "#CBB2FF"],
+  ["#609EFF", "#A5C8FF"],
+  ["#FFC300", "#FFE249"],
+  ["#24E47F", "#93F2C0"],
+];
+
+// 랜덤 색상 쌍 선택 함수
+const getRandomColorPair = () => {
+  const randomIndex = Math.floor(Math.random() * colorPairs.length);
+  return colorPairs[randomIndex];
+};
+
+const Card = () => {
+  // 각 카드의 색상 쌍을 독립적으로 선택하기 위해 Card 컴포넌트 내부에서 색상 쌍을 결정
+  const renderCard = () => {
+    return Array.from({ length: 3 }, (_, index) => {
+      const [backgroundColor1, backgroundColor2] = getRandomColorPair();
+      return (
+        <S.Card
+          key={index}
+          height="230px"
+          backgroundColor1={backgroundColor1}
+          backgroundColor2={backgroundColor2}
+        >
+          <div>ㅇㅇ</div>
+        </S.Card>
+      );
+    });
+  };
+
+  return <>{renderCard()}</>;
+};
+
+export default Card;

src/components/home/homeRecentTales/HomeRecentTales.styled.ts

@@ -0,0 +1,7 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+`;

src/components/home/homeRecentTales/HomeRecentTales.tsx

@@ -0,0 +1,12 @@
+import Card from "./Card";
+import * as S from "./HomeRecentTales.styled";
+
+const HomeRecentTales = () => {
+  return (
+    <S.Wrapper>
+      <Card />
+    </S.Wrapper>
+  );
+};
+
+export default HomeRecentTales;

src/components/home/homeStatus/HomeStatus.styled.ts

@@ -0,0 +1,51 @@
+import styled from "styled-components";
+
+export const Wrapper = styled.div`
+  width: 100%;
+  display: flex;
+  border-radius: 6px;
+  border: 1px solid #e5e5e2;
+`;
+
+export const StatusWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  justify-content: space-between;
+  padding: 1.5rem;
+`;
+
+export const Status = styled.div`
+  width: 40%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  gap: 3rem;
+  padding: 1rem;
+`;
+
+export const TitleWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+`;
+
+export const StatusTitle = styled.div`
+  font-size: 2.5rem;
+  font-weight: 800;
+`;
+
+export const Img = styled.img`
+  width: 50%;
+`;
+
+export const StateWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+export const State = styled.div`
+  font-size: 1.8rem;
+  font-weight: 700;
+  margin-top: 1rem;
+  color: #a3a3a3;
+`;

src/components/home/homeStatus/HomeStatus.tsx

@@ -0,0 +1,28 @@
+import * as S from "./HomeStatus.styled";
+
+const HomeStatus = () => {
+  let n = 1;
+  return (
+    <S.Wrapper>
+      <S.StatusWrapper>
+        <S.Status>
+          <S.TitleWrapper>
+            <S.StatusTitle>글로우테일과 함께하는</S.StatusTitle>
+            <S.StatusTitle>다문화 동화</S.StatusTitle>
+          </S.TitleWrapper>
+          <S.StateWrapper>
+            <S.State>생성한 동화 | {n}개</S.State>
+            <S.State>학습한 동화 | {n}개</S.State>
+            <S.State>학습 횟수 | {n}개</S.State>
+            <S.State>
+              학습 중인 언어 | {n}, {n}
+            </S.State>
+          </S.StateWrapper>
+        </S.Status>
+        <S.Img src="/statusImg.png" />
+      </S.StatusWrapper>
+    </S.Wrapper>
+  );
+};
+
+export default HomeStatus;

src/components/tales/readTale/ReadTale.tsx

@@ -5,15 +5,15 @@ import Dropdown from "@components/common/dropDown/Dropdown";
 import NextBtn from "@components/common/NextBtn";
 import { getTale } from "@apis/createTales";
 import { useLocation } from "react-router-dom";
-import { nationElements } from "@utils/defaultData";
+import { commonLanguageElements } from "@utils/defaultData";
 import { ResponseTaleData } from "@type/createTale";
 import { speakText, toggleSpeech } from "@utils/speechUtil";
 
 const ReadTale = () => {
   const location = useLocation();
   const { response } = location.state || {};
 
-  const [language, setLanguage] = useState<string | number | null>(2);
+  const [language, setLanguage] = useState<string | number | null>(null);
   const [data, setData] = useState<ResponseTaleData>();
   const [selectedIndex, setSelectedIndex] = useState<number | null>(null);
   const [isSpeaking, setIsSpeaking] = useState<boolean>(false);
@@ -40,7 +40,7 @@ const ReadTale = () => {
 
   useEffect(() => {
     const fetchData = async () => {
-      const tale = await getTale(Number(language) || 2, response);
+      const tale = await getTale(Number(language) || 2, response.taleId);
       setData(tale);
     };
     fetchData();
@@ -61,11 +61,13 @@ const ReadTale = () => {
           <>
             <S.ReadTaleHead>
               <S.TitleWrapper>
-                <S.Complete>동화가 완성되었어요!</S.Complete>
+                <S.Complete>
+                  내가 동화를 만든 날 | {response.createdAt}
+                </S.Complete>
                 <S.Title>제목: {data.title}</S.Title>
               </S.TitleWrapper>
               <Dropdown
-                selectList={nationElements}
+                selectList={commonLanguageElements}
                 setter={setLanguage}
                 width="30%"
               />

src/pages/HomePage.tsx

@@ -1,40 +1,7 @@
-import { getStudiedTales, getUnlearnedTales, getWord } from "@apis/home";
-import TabBar from "@components/common/tabBar/TabBar";
+import Home from "@components/home/Home";
 
 const HomePage = () => {
-  const handleBtn1 = async () => {
-    try {
-      const response = getUnlearnedTales(true);
-      console.log(response);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-  const handleBtn2 = async () => {
-    try {
-      const response = getStudiedTales(true);
-      console.log(response);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-  const handleBtn3 = async () => {
-    try {
-      const response = getWord();
-      console.log(response);
-    } catch (error) {
-      console.log(error);
-    }
-  };
-  return (
-    <>
-      <div>홈페이지에용</div>
-      <button onClick={handleBtn1}>미학습 동화조회</button>
-      <button onClick={handleBtn2}>학습 동화조회</button>
-      <button onClick={handleBtn3}>키워드 동화조회</button>
-      <TabBar />
-    </>
-  );
+  return <Home />;
 };
 
 export default HomePage;

src/type/createTale.d.ts

@@ -11,3 +11,9 @@ export interface ResponseTaleData {
   title: string;
   story: string;
 }
+
+export interface CardProps {
+  height: string;
+  backgroundColor1: string;
+  backgroundColor2: string;
+}

src/utils/defaultData.ts

@@ -1,21 +1,17 @@
 import { DropdownElement } from "@type/dropdown";
 import { ColorSet } from "@type/selectList";
 
-export const nationElements: DropdownElement[] = [
+export const commonLanguageElements: DropdownElement[] = [
   {
-    text: "선택해주세요",
-    value: null,
+    imgURL: `/korea.png`,
+    text: "한국어",
+    value: 2,
   },
   {
     imgURL: `/america.png`,
     text: "영어",
     value: 1,
   },
-  {
-    imgURL: `/korea.png`,
-    text: "한국어",
-    value: 2,
-  },
   {
     imgURL: `/japan.png`,
     text: "일본어",
@@ -28,6 +24,14 @@ export const nationElements: DropdownElement[] = [
   },
 ];
 
+export const nationElements: DropdownElement[] = [
+  {
+    text: "선택해주세요",
+    value: null,
+  },
+  ...commonLanguageElements,
+];
+
 export const moodElements: DropdownElement[] = [
   {
     text: "자동",

src/utils/speechUtil.ts

@@ -19,7 +19,7 @@ export const speakText = (
 
   const utterance = new SpeechSynthesisUtterance(text);
   utterance.lang = langCode;
-  utterance.rate = 0.6;
+  utterance.rate = 0.9;
 
   window.speechSynthesis.cancel();