Merge pull request #65 from Kusitms-29th-ASAP/docs/#64

[Docs] 가정학습 Dummy Data

src/app/study/home/layout.tsx

@@ -0,0 +1,20 @@
+"use client";
+
+import Reviews from "@/components/study/review/Reviews";
+import Tabbar from "@/components/common/Tabbar";
+import { useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+
+const Layout = (props: any) => {
+  const category = useSelector((state: RootState) => state.category.value);
+
+  return (
+    <>
+      {props.children}
+      <Reviews category={category} />
+      <Tabbar />
+    </>
+  );
+};
+
+export default Layout;

src/app/study/page.tsx → src/app/study/home/page.tsx

@@ -1,9 +1,7 @@
 "use client";
 
-import Tabbar from "@/components/common/Tabbar";
 import Topbar from "@/components/common/Topbar";
 import Banner from "@/components/study/Banner";
-import Reviews from "@/components/study/review/Reviews";
 import Subjects from "@/components/study/subject/Subjects";
 import styled from "styled-components";
 
@@ -15,8 +13,6 @@ const Study = () => {
         <Banner />
         <Subjects />
       </Container>
-      <Reviews />
-      <Tabbar />
     </>
   );
 };

src/components/study/detail/Content.tsx

@@ -1,24 +1,58 @@
 import styled from "styled-components";
 import EditorNote from "./EditorNote";
 import Image from "next/image";
-
-const TEXT1 = `지난 겨울방학동안 3학년 과학 교과서에 있는 실험들을 직접 집에서 했어요!`;
-const TEXT2 = `과학교사 엄마라는 특권은 누려야되지 않겠냐며 미리 받아온 교과서를 뒤적이다 중학생들과 함께해도 재미있는 오호 만들과학교사 엄마라는 특권은 누려야되지 않겠냐며 미리 받아온 교과서를 뒤적이다 중학생들과 함께해도 재미있는\n\n 오호 만들과학교사 엄마라는 특권은 누려야되지 않겠냐며 미리 받아온 교과서를 뒤적이다 중학생들과 함께해도 재미있는 오호 만들과학교사 엄마라는 특권은 누려야되지 않겠냐며 미리 받아온 교과서를 뒤적이다 중학생들과 함께해도 재미있는 오호 만들과학교사 엄마라는 특권은 누려야되지 않겠냐며 미리 받아온 교과서를 뒤적이다 중학생들과 함께해도 재미있는 오호 만들`;
+import { usePathname } from "next/navigation";
+import { ReviewData } from "@/data/reviewData";
 
 const Content = () => {
+  const pathname = usePathname();
+  const id = pathname.split("/").pop();
+  const review = ReviewData.find((review) => review.id === Number(id));
+
   return (
     <Container>
-      <EditorNote />
-      <Text>{TEXT1}</Text>
-      <ImageBox>
-        <Image
-          src="/assets/study/study.svg"
-          alt="study"
-          layout="fill"
-          objectFit="contain"
-        />
-      </ImageBox>
-      <Text>{TEXT2}</Text>
+      {review && (
+        <>
+          <EditorNote editorNote={review.editorNote ? review.editorNote : ""} />
+          {review.text1 && <Text>{review.text1}</Text>}
+          {review.image1 && (
+            <ImageBox>
+              <Image
+                src={review.image1}
+                alt="study"
+                layout="fill"
+                objectFit="contain"
+              />
+            </ImageBox>
+          )}
+
+          {review.text2 && <Text>{review.text2}</Text>}
+          {review.image2 && (
+            <ImageBox>
+              <Image
+                src={review.image2}
+                alt="study"
+                layout="fill"
+                objectFit="contain"
+              />
+            </ImageBox>
+          )}
+
+          {review.text3 && <Text>{review.text3}</Text>}
+          {review.image3 && (
+            <ImageBox>
+              <Image
+                src={review.image3}
+                alt="study"
+                layout="fill"
+                objectFit="contain"
+              />
+            </ImageBox>
+          )}
+
+          {review.text4 && <Text>{review.text4}</Text>}
+        </>
+      )}
     </Container>
   );
 };

src/components/study/detail/EditorNote.tsx

@@ -1,12 +1,16 @@
 import styled from "styled-components";
 
-const CONTEXT = `겨울 방학동안 아이와 함께 집에서 실험한 엄마표\n 과학교실입니다! 재밌게 봐주세용`;
+interface EditorNoteProps {
+  editorNote: string;
+}
+
+const EditorNote = (props: EditorNoteProps) => {
+  const { editorNote } = props;
 
-const EditorNote = () => {
   return (
     <Container>
       <Title>에디터의 노트</Title>
-      <Context>{CONTEXT}</Context>
+      <Context>{editorNote}</Context>
     </Container>
   );
 };

src/components/study/review/Reviews.tsx

@@ -3,12 +3,20 @@ import ReviewContent from "./ReviewContent";
 import ReviewTitle from "./ReviewTitle";
 import { ReviewData } from "@/data/reviewData";
 
-const Reviews = () => {
+interface ReviewsProps {
+  category: number;
+}
+
+const Reviews = (category: ReviewsProps) => {
+  const FilterReviewData = ReviewData.filter(
+    (review) => review.category === category.category
+  );
+
   return (
     <Container>
       <ReviewTitle />
       <ReviewContentBox>
-        {ReviewData.map((review) => (
+        {FilterReviewData.map((review) => (
           <ReviewContent
             key={review.id}
             id={review.id}
@@ -31,6 +39,9 @@ const Container = styled.div`
   gap: 12px;
   background: ${({ theme }) => theme.colors.b80};
   padding: 24px 20px;
+
+  width: 100%;
+  height: 100%;
 `;
 
 const ReviewContentBox = styled.div`

src/components/study/subject/Subjects.tsx

@@ -1,13 +1,16 @@
 import { SubjectData } from "@/data/subjectData";
 import SubjectContent from "./SubjectContent";
 import styled from "styled-components";
-import { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { RootState } from "@/redux/store";
+import { setCategory } from "@/redux/slices/categorySlice";
 
 const Subjects = () => {
-  const [selectedId, setSelectedId] = useState(0);
+  const category = useSelector((state: RootState) => state.category.value);
+  const dispatch = useDispatch();
 
   const handleSubjectSelect = (id: number) => {
-    setSelectedId(id);
+    dispatch(setCategory(id));
   };
 
   return (
@@ -17,7 +20,7 @@ const Subjects = () => {
           key={subject.id}
           id={subject.id}
           title={subject.title}
-          isSelected={selectedId === subject.id}
+          isSelected={category === subject.id}
           onSelect={handleSubjectSelect}
         />
       ))}

src/data/commonData.ts

@@ -1,8 +1,12 @@
 export const tabs = [
-    { path: "/home", icon: "ic_home", label: "홈" },
-    { path: "/school", icon: "ic_edu", label: "학교 생활" },
-    { path: "/news/school", subPath: "/news/eduOffice", icon: "ic_class", label: "소식" },
-    { path: "/study", icon: "ic_study", label: "가정학습" },
-    { path: "/mypage", icon: "ic_mypage", label: "마이페이지" },
-  ];
-
+  { path: "/home", icon: "ic_home", label: "홈" },
+  { path: "/school", icon: "ic_edu", label: "학교 생활" },
+  {
+    path: "/news/school",
+    subPath: "/news/eduOffice",
+    icon: "ic_class",
+    label: "소식",
+  },
+  { path: "/study/home", icon: "ic_study", label: "가정학습" },
+  { path: "/mypage", icon: "ic_mypage", label: "마이페이지" },
+];