refactor: seriesDetailPage 리팩토링 및 관련 컴포넌트 추가, 댓글 컴포넌트 props 수정

src/components/organisms/article/ArticleList/index.jsx

@@ -3,39 +3,49 @@ import styled from '@emotion/styled';
 import PropTypes from 'prop-types';
 import theme from '@styles/theme';
 import { Link } from 'react-router-dom';
-import { NoData } from '@molecules';
+import { NoData, ContentAddLink } from '@molecules';
+import { SectionContainer } from '@templates';
 
-const ArticleList = ({ seriesId, list, ...props }) => (
-  <ArticleListContainer {...props}>
-    {list.length ? (
-      list.map(item => (
-        <Link
-          to={`/series/${seriesId}/article/${item.articleId}`}
-          key={item.articleId}
-        >
-          <Article>
-            <div>{item.round}</div>
-            <div className="title">{item.title}</div>
-            <div>{item.date}</div>
-          </Article>
-        </Link>
-      ))
-    ) : (
-      <NoData>
-        해당하는 연재 목록이 없습니다. 연재 시작일을 확인해주세요.
-      </NoData>
-    )}
-  </ArticleListContainer>
+const ArticleList = ({ isMine, seriesId, list, ...props }) => (
+  <SectionContainer title="연재 목록">
+    {isMine ? (
+      <ContentAddLink url={`/series/${seriesId}/article/write`}>
+        새 아티클 작성하기
+      </ContentAddLink>
+    ) : null}
+    <ArticleListContainer {...props}>
+      {list.length ? (
+        list.map(item => (
+          <Link
+            to={`/series/${seriesId}/article/${item.articleId}`}
+            key={item.articleId}
+          >
+            <Article>
+              <div>{item.round}</div>
+              <div className="title">{item.title}</div>
+              <div>{item.date}</div>
+            </Article>
+          </Link>
+        ))
+      ) : (
+        <NoData>
+          해당하는 연재 목록이 없습니다. 연재 시작일을 확인해주세요.
+        </NoData>
+      )}
+    </ArticleListContainer>
+  </SectionContainer>
 );
 
 ArticleList.defaultProps = {
   seriesId: 0,
   list: [],
+  isMine: false,
 };
 
 ArticleList.propTypes = {
   seriesId: PropTypes.number,
   list: PropTypes.array,
+  isMine: PropTypes.bool,
 };
 
 export default ArticleList;

src/components/organisms/comment/CommentList/index.jsx

@@ -6,10 +6,16 @@ import { theme } from '@styles';
 import { useParams } from 'react-router-dom';
 import { useUser } from '@contexts/UserProvider';
 import Swal from 'sweetalert2';
+import {
+  postSeriesComment,
+  getSeriesComment,
+  putSeriesComment,
+  deleteSeriesComment,
+} from '@apis/series';
 import CommentItem from '../CommentItem';
 import CommentForm from '../CommentForm';
 
-const CommentList = ({ API }) => {
+const CommentList = () => {
   const { id } = useParams();
   const [commentList, setCommentList] = useState([]);
   const [postMoreTarget, setPostMoreTarget] = useState({
@@ -40,7 +46,7 @@ const CommentList = ({ API }) => {
   };
 
   const getCommentList = async () => {
-    const { data } = await API.read({
+    const { data } = await getSeriesComment({
       seriesId: id,
       size: 100,
       lastId: null,
@@ -82,7 +88,7 @@ const CommentList = ({ API }) => {
   };
 
   const createComment = async (comment, parentId) => {
-    const { data } = await API.create({
+    const { data } = await postSeriesComment({
       comment,
       seriesId: id,
       parentId,
@@ -96,7 +102,7 @@ const CommentList = ({ API }) => {
   };
 
   const updateComment = async updateParams => {
-    const { data } = await API.update(updateParams);
+    const { data } = await putSeriesComment(updateParams);
 
     if (data) {
       return true;
@@ -105,7 +111,7 @@ const CommentList = ({ API }) => {
   };
 
   const deleteComment = async commentId => {
-    const { status } = await API.delete(commentId);
+    const { status } = await deleteSeriesComment(commentId);
 
     if (status === 200) {
       return true;
@@ -253,14 +259,6 @@ const CommentList = ({ API }) => {
   );
 };
 
-CommentList.defaultProps = {
-  API: {},
-};
-
-CommentList.propTypes = {
-  API: PropTypes.objectOf(PropTypes.func),
-};
-
 export default CommentList;
 
 const CommentContainer = styled.div`

src/components/organisms/index.jsx

@@ -1,7 +1,8 @@
 export { default as ArticleList } from './article/ArticleList';
 export { default as CardList } from './general/CardList';
 export { default as CardSlider } from './general/CardSlider';
-export { default as DetailBody } from './series/DetailBody';
+export { default as DetailContent } from './series/DetailContent';
+export { default as DetailInfo } from './series/DetailInfo';
 export { default as Header } from './general/Header';
 export { default as HottestList } from './general/HottestList';
 export { default as UserList } from './user/UserList';

src/components/organisms/series/DetailBody/index.jsx → src/components/organisms/series/DetailContent/index.jsx

@@ -7,7 +7,7 @@ import { Button, Image } from '@atom';
 import { SeriesLikeToggle } from '@molecules';
 import replaceEnter from '@utils/replaceEnter';
 
-const DetailBody = ({
+const DetailContent = ({
   previousRoot,
   previousRootText,
   parentId,
@@ -72,7 +72,7 @@ const DetailBody = ({
   </div>
 );
 
-DetailBody.defaultProps = {
+DetailContent.defaultProps = {
   previousRoot: '',
   previousRootText: '',
   parentId: -1,
@@ -87,7 +87,7 @@ DetailBody.defaultProps = {
   isLiked: false,
 };
 
-DetailBody.propTypes = {
+DetailContent.propTypes = {
   previousRoot: PropTypes.string,
   previousRootText: PropTypes.string,
   parentId: PropTypes.number,
@@ -102,7 +102,7 @@ DetailBody.propTypes = {
   isLiked: PropTypes.bool,
 };
 
-export default DetailBody;
+export default DetailContent;
 
 const DetailRoot = styled.div`
   font-size: ${theme.font.small};

src/components/organisms/series/DetailInfo/index.jsx

@@ -0,0 +1,128 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from '@emotion/styled';
+import { theme, mixin } from '@styles';
+import { Button } from '@atom';
+import convertDay from '@utils/convertDay';
+import { Link } from 'react-router-dom';
+
+const DetailInfo = ({ subscribe, series, upload, isMine }) => (
+  <SeriesInfo>
+    <div>작품 정보</div>
+    <SeriesInfoSection>
+      <div className="seriesInfoBlock">
+        <div>모집일</div>
+        <div>
+          {subscribe.startDate} ~ {subscribe.endDate}
+        </div>
+      </div>
+      <div className="seriesInfoBlock">
+        <div>구독료</div>
+        <div>{series.price} 원</div>
+      </div>
+      <div className="seriesInfoBlock">
+        <div>연재 일</div>
+        <div>
+          {series.startDate} ~ {series.endDate}
+        </div>
+      </div>
+      <div className="seriesInfoBlock">
+        <div>연재 주기</div>
+        <div>
+          {convertDay(upload.date).join(', ')}
+          &nbsp;{upload.time} 시
+        </div>
+      </div>
+      <div className="seriesInfoBlock">
+        <div>총 회차</div>
+        <div>{series.articleCount} 회</div>
+      </div>
+    </SeriesInfoSection>
+    {sessionStorage.getItem('authorization') && !isMine ? (
+      <Link to={`/purchase/${series.id}`}>
+        <SeriesInfoSection>
+          <Button
+            className="seriesPurchase"
+            width="100%"
+            height="2.8125rem"
+            margin={0}
+          >
+            결제하기
+          </Button>
+        </SeriesInfoSection>
+      </Link>
+    ) : null}
+  </SeriesInfo>
+);
+
+DetailInfo.defaultProps = {
+  subscribe: {},
+  series: {},
+  upload: {},
+  isMine: false,
+};
+
+DetailInfo.propTypes = {
+  subscribe: PropTypes.object,
+  series: PropTypes.object,
+  upload: PropTypes.object,
+  isMine: PropTypes.bool,
+};
+
+export default DetailInfo;
+
+const SeriesInfo = styled.div`
+  width: 100%;
+  height: auto;
+  padding: 2rem 1.5rem;
+  background-color: #ffffff;
+  border-radius: 0.625rem;
+  box-shadow: ${theme.style.boxShadow};
+`;
+
+const SeriesInfoSection = styled.div`
+  display: flex;
+  flex-wrap: wrap;
+
+  .seriesInfoBlock {
+    display: flex;
+    padding-left: 0.625rem;
+    margin: 0.125rem 0;
+    margin-right: 0.625rem;
+    border-left: 2px solid ${theme.color.grey};
+
+    > div:nth-of-type(1) {
+      margin-right: 0.625rem;
+      font-weight: 700;
+      margin-bottom: 0.5rem;
+      color: ${theme.color.main};
+    }
+
+    > div:nth-of-type(2) {
+    }
+
+    &:last-of-type {
+      margin-bottom: 0;
+    }
+  }
+
+  .seriesPurchase {
+    margin-top: 1.5rem;
+  }
+`;
+
+const ArticleSection = styled.div`
+  margin-top: 4rem;
+
+  .articleSectionHeader {
+    display: flex;
+    justify-content: space-between;
+
+    > *:nth-of-type(2) {
+      display: flex;
+      flex-grow: 1;
+      justify-content: flex-end;
+      align-items: center;
+    }
+  }
+`;