[상세 페이지] 추천 작품 리스트 컴포넌트 추가

src/components/Detail/EpisodeList.js

@@ -8,7 +8,7 @@ import EpisodeItem from "./EpisodeItem";
 
 const EpisodeList = ({ imageUrl, episodes }) => {
   return (
-    <EpisodeWrapper>
+    <EpisodeListWrapper>
       {/* 상단의 버튼 */}
       <TopBtnSection>
         {/* 선택 구매 버튼 */}
@@ -38,13 +38,13 @@ const EpisodeList = ({ imageUrl, episodes }) => {
           />
         );
       })}
-    </EpisodeWrapper>
+    </EpisodeListWrapper>
   );
 };
 
 export default EpisodeList;
 
-const EpisodeWrapper = styled.div`
+const EpisodeListWrapper = styled.div`
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -62,6 +62,8 @@ const TopBtnSection = styled.div`
   justify-content: space-between;
 
   width: 327px;
+  margin-top: 16px;
+  margin-bottom: 22px;
 `;
 
 // 선택 구매 버튼
@@ -70,7 +72,7 @@ const BuyBtn = styled.span`
   align-items: center;
 
   width: 78px;
-  height: 40px;
+  height: 14px;
 `;
 
 // 선택 구매 버튼 텍스트
@@ -96,7 +98,7 @@ const SortBtn = styled.span`
   justify-content: space-between;
   align-items: center;
   width: 93px;
-  height: 40px;
+  height: 14px;
 `;
 
 // 최신순 정렬 버튼 (클릭된 버튼)

src/components/Detail/RecommendItem.js

@@ -0,0 +1,52 @@
+import styled from "styled-components";
+
+const RecommentItem = ({ genre, title, downloadCount }) => {
+  return (
+    <ItemWrapper>
+      <ItemImg />
+      <ItemTitle>{title}</ItemTitle>
+      <ItemInfo>
+        {genre}·{downloadCount / 1000}만
+      </ItemInfo>
+    </ItemWrapper>
+  );
+};
+
+export default RecommentItem;
+
+const ItemWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+
+  width: 92px;
+  height: 202px;
+`;
+
+const ItemImg = styled.div`
+  width: 100%;
+  height: 136px;
+
+  background-color: #d9d9d9;
+  border-radius: 3px;
+`;
+
+const ItemTitle = styled.span`
+  width: 100%;
+  height: 38px;
+  margin-top: 16px;
+
+  font-family: "Noto Sans KR Regular";
+  font-size: 12px;
+  text-align: start;
+`;
+
+const ItemInfo = styled.span`
+  width: 100%;
+  height: 15px;
+  margin-top: 8px;
+
+  font-family: "Noto Sans KR Regular";
+  font-size: 11px;
+  color: #949494;
+  text-align: start;
+`;

src/components/Detail/RecommendList.js

@@ -0,0 +1,49 @@
+import styled from "styled-components";
+import "react-responsive-carousel/lib/styles/carousel.min.css";
+import { Carousel } from "react-responsive-carousel";
+
+// components
+import RecommendItem from "./RecommendItem";
+
+const RecommendList = ({ text, works }) => {
+  return (
+    <Wrapper>
+      <Title>{text}</Title>
+
+      <Carousel
+        showStatus={false}
+        showArrows={false}
+        showIndicators={false}
+        showThumbs={false}
+        centerMode={true}
+        centerSlidePercentage={100 / 3.5}
+      >
+        {/* 추천 작품 컴포넌트*/}
+        {works &&
+          works.map(item => {
+            return (
+              <RecommendItem
+                key={item.title}
+                genre={item.genre}
+                title={item.title}
+                downloadCount={item.downloadCount}
+              />
+            );
+          })}
+      </Carousel>
+    </Wrapper>
+  );
+};
+
+export default RecommendList;
+
+const Wrapper = styled.div`
+  width: 100%;
+  margin: 10.5px 0px 32px 32px;
+`;
+
+const Title = styled.div`
+  font-family: "Noto Sans KR Medium";
+  font-size: 16px;
+  margin-bottom: 16px;
+`;

src/pages/DetailPage.js

@@ -8,6 +8,8 @@ import moreview from "../assets/icon/Detail/moreview.png";
 import DetailNavBar from "../components/Detail/DetailNavBar";
 import ContentInfo from "../components/Detail/ContentInfo";
 import EpisodeList from "../components/Detail/EpisodeList";
+import RecommendList from "../components/Detail/RecommendList";
+import Footer from "../components/Footer/Footer";
 
 // 커버 이미지 임의로 넣어두었습니다.
 const DetailPage = () => {
@@ -113,7 +115,7 @@ const DetailPage = () => {
       <CoverBackground />
       <DetailNavBar />
 
-      <ContentWrapper>
+      <MainWrapper>
         <ContentInfo details={details} />
 
         <EpisodeList imageUrl={details[0]?.imageUrl} episodes={episodes} />
@@ -123,8 +125,10 @@ const DetailPage = () => {
           </MoreEpisodeBtnText>
           <MoreEpisodeBtnImg src={moreview} />
         </MoreEpisodeBtn>
-      </ContentWrapper>
-      <FirstViewBtn>무료로 첫화보기</FirstViewBtn>
+        <FirstViewBtn>무료로 첫화보기</FirstViewBtn>
+      </MainWrapper>
+
+      <Footer />
     </Div>
   );
 };
@@ -147,7 +151,7 @@ const CoverBackground = styled.div`
   height: 210px;
 `;
 
-const ContentWrapper = styled.div`
+const MainWrapper = styled.div`
   position: relative;
   top: -214px;
 
@@ -185,9 +189,10 @@ const MoreEpisodeBtnImg = styled.img`
 
 const FirstViewBtn = styled.button`
   position: fixed;
+  z-index: 1;
   left: 50%;
   transform: translate(-50%, -50%);
-  bottom: 100px;
+  bottom: 27px;
 
   width: 280px;
   height: 46px;