Merge branch 'develop' into feature-view_product

components/collectionProduct/CollectionList.tsx

@@ -1,9 +1,9 @@
 import styled from '@emotion/styled';
-import { ToyData } from '../../types/toy';
+import { MainToyData } from '../../types/toy';
 import ToyPreview from './ToyPreview';
 
 interface CollectionListProps {
-  toyList: ToyData[];
+  toyList: MainToyData[];
 }
 
 export default function CollectionList(props: CollectionListProps) {
@@ -13,12 +13,12 @@ export default function CollectionList(props: CollectionListProps) {
       {toyList.map(({ image, title, price, month, siteUrl }, idx) => (
         <ToyPreview
           key={idx}
-          src={image}
-          store="그린키드그린키드그린키드그린키드그린키드그린키드그린키드그린키드그린키드그린키드그린키드"
-          title={title}
-          price={price}
-          age="36개월이상"
-          siteUrl={siteUrl}
+          src={toy.image}
+          store={toy.siteName}
+          title={toy.title}
+          price={toy.price}
+          age={toy.month}
+          siteUrl={toy.siteUrl}
         />
       ))}
     </StToyListWrapper>

components/collectionProduct/ToyPreview.tsx

@@ -29,7 +29,9 @@ export default function ToyPreview(props: ToyPreviewProps) {
   return (
     <StToyWrapper onClick={handleToySite}>
       <StImgWrapper>
-        <StToyImg src={src} />
+        <StToyImg
+          src={`https://nori-image.s3.ap-northeast-2.amazonaws.com/${src}`}
+        />
         <StToyMarkWrapper onClick={handleToyMark}>
           <StToyMark />
           {isMark && <StFillToyMark />}

components/collectionProduct/index.ts

@@ -2,4 +2,3 @@ export { default as PriceFilter } from './PriceFilter';
 export { default as PageNavigation } from './PageNavigation';
 export { default as ToyPreview } from './ToyPreview';
 export { default as CollectionList } from './CollectionList';
-

components/community/CommunityList.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 // import { useState } from 'react';
-import ContentCard from './ContentsCard';
+import ContentCard from './ContentCard';
 import { CommunityData } from '../../types/community';
 
 interface CommunityListProps {
@@ -15,6 +15,7 @@ export default function CommunityList(props: CommunityListProps) {
     <StCommunityListWrapper>
       {contentsList.map((content, idx) => (
         <ContentCard
+          id={content.id}
           key={idx}
           category={content.category}
           title={content.title}

components/community/ContentsCard.tsx → components/community/ContentCard.tsx

@@ -1,8 +1,12 @@
 import styled from '@emotion/styled';
 import { IcReply, IcHeart, IcDot } from '../../public/assets/icons';
 import CommunityCategory from './CommunityCategory';
+import Router from 'next/router';
+import { useRouter } from 'next/router';
+import Link from 'next/link';
 
 interface ContentInfoProps {
+  id: string;
   category: string;
   title: string;
   content: string;
@@ -13,15 +17,27 @@ interface ContentInfoProps {
 }
 
 export default function ContentCard(props: ContentInfoProps) {
-  const { category, title, content, userNickname, replyCount, createdAt, img } =
-    props;
+  const {
+    id,
+    category,
+    title,
+    content,
+    userNickname,
+    replyCount,
+    createdAt,
+    img,
+  } = props;
 
   return (
     <StContentsCardWrapper>
       <StContentInfo>
         <CommunityCategory category={category} />
-        <h1>{title}</h1>
-        <p>{content}</p>
+        <StMainInfo
+          onClick={() => Router.push({ pathname: `/community/${id}` })}
+        >
+          <h1>{title}</h1>
+          <p>{content}</p>
+        </StMainInfo>
         <StWriteInfo>
           <span>{userNickname}</span>
           <IcDot />
@@ -41,7 +57,7 @@ export default function ContentCard(props: ContentInfoProps) {
 
 const StContentsCardWrapper = styled.div`
   display: flex;
-  flex-direction: row;
+  /* flex-direction: ; */
 
   margin-bottom: 4.8rem;
   padding-bottom: 4.5rem;
@@ -52,13 +68,17 @@ const StContentsCardWrapper = styled.div`
   border-bottom: 0.1rem solid ${({ theme }) => theme.colors.gray005};
 
   h1 {
+    width: 92.3rem;
     margin-top: 1.6rem;
     margin-bottom: 0.7rem;
 
     ${({ theme }) => theme.fonts.b9_24_medium_150}
+
+    cursor: pointer;
   }
 
   p {
+    width: 72.5rem;
     margin-bottom: 2.7rem;
 
     display: -webkit-box;
@@ -68,21 +88,25 @@ const StContentsCardWrapper = styled.div`
 
     color: ${({ theme }) => theme.colors.gray009};
     ${({ theme }) => theme.fonts.t6_17_regular_140}
+
+    cursor: pointer;
   }
 `;
+const StMainInfo = styled.article``;
 const StContentInfo = styled.section`
-  margin-right: 4.9rem;
+  display: flex;
+  flex-direction: column;
 
-  width: auto;
+  width: 72.5rem;
 `;
 const StContentImg = styled.img`
-  width: 21.6rem;
-  height: 21.6rem;
-
-  object-fit: cover;
+  width: 21.8rem;
+  height: 21.8rem;
 
   border: 0.1rem solid ${({ theme }) => theme.colors.gray005};
   border-radius: 0.5rem;
+
+  object-fit: cover;
 `;
 const StWriteInfo = styled.div`
   display: flex;

components/community/ReplyContent.tsx

@@ -3,26 +3,25 @@ import { IcReplyWriteIcon } from '../../public/assets/icons';
 import { useState } from 'react';
 
 interface ReplyContentProps {
+  author: boolean;
   userNickname?: string;
   content: string;
   createdAt: string;
 }
 
 export default function ReplyContent(props: ReplyContentProps) {
-  const { userNickname, content, createdAt } = props;
-
-  const [isWriter, setIsWriter] = useState(true);
+  const { userNickname, content, createdAt, author } = props;
 
   return (
     <StReplyContentWrapper>
       <StReplyInfo>
         <p>{userNickname}</p>
-        {isWriter && <IcReplyWriteIcon />}
+        {author && <IcReplyWriteIcon />}
       </StReplyInfo>
       <StReplyContents>
         <p>{content}</p>
         <span>
-          {createdAt} · {isWriter ? '삭제' : '신고'}
+          {createdAt} · {author ? '삭제' : '신고'}
         </span>
       </StReplyContents>
     </StReplyContentWrapper>

components/community/Reply.tsx → components/community/ReplyList.tsx

@@ -1,21 +1,71 @@
 import styled from '@emotion/styled';
-import ReplyContent from '../community/ReplyContent';
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
+import { postReply } from '../../core/api/community';
+import {
+  CommunityData,
+  PostCommentBody,
+  ReplyData,
+} from '../../types/community';
+import ReplyContent from './ReplyContent';
+import { useRouter } from 'next/router';
+import { PageNavigation } from '../common/index';
+
+interface ReplyListProps {
+  cid: string;
+  replyList: ReplyData[];
+}
 
-export default function Reply() {
+export default function ReplyList(props: ReplyListProps) {
+  const router = useRouter();
+  const { replyList, cid } = props;
   const [inputColor, setInputColor] = useState<boolean>(false);
   const [replyText, setReplyText] = useState<string>('');
+  const [newReplyInfo, setNewReplyInfo] = useState<PostCommentBody>({
+    boardId: '',
+    content: '',
+  });
+  const [currentPage, setCurrentPage] = useState<number>(1);
+  const [pageReplyList, setPageReplyList] = useState<ReplyData[]>([]);
 
   const handleInputText = (e: React.ChangeEvent<HTMLInputElement>) => {
     setReplyText(e.target.value);
+    setNewReplyInfo({ ...newReplyInfo, content: e.target.value });
   };
 
   const handleInputColor = () => {
     setInputColor(replyText.length !== 0);
   };
 
+  const handleReplyregister = async () => {
+    const { content } = newReplyInfo;
+    if (content === '') {
+      alert('내용을 입력해주세요.');
+      return;
+    }
+
+    const data = await postReply(newReplyInfo);
+    setNewReplyInfo({
+      boardId: `${cid}`,
+      content: replyText,
+    });
+    router.push(`/community/${data.id}`);
+  };
+  const handleCurrentPage = (nextPage: number) => {
+    setCurrentPage(nextPage);
+  };
+
+  useEffect(() => {
+    if (replyList) {
+      setPageReplyList(
+        replyList.filter(
+          (_, idx) => (currentPage - 1) * 10 <= idx && idx < currentPage * 10,
+        ),
+      );
+      window.scrollTo({ top: 750 });
+    }
+  }, [replyList, currentPage]);
   return (
-    <StReplyWrapper>
+    <>
       <StReplyTitle>
         <h1>댓글</h1>
         <p>23</p>
@@ -29,29 +79,33 @@ export default function Reply() {
             onChange={handleInputText}
           />
         </StInputContent>
-        <StInputBtn inputColor={inputColor}>입력</StInputBtn>
+        <StInputBtn inputColor={inputColor} onClick={handleReplyregister}>
+          입력
+        </StInputBtn>
       </StInputForm>
-      <ReplyContent
-        userNickname="희지맘"
-        createdAt="2022.07.13"
-        content="저희는 4개월 때부터 학습용 완구 썼어요!"
-      />
-      <ReplyContent
-        userNickname="희지맘"
-        createdAt="2022.07.13"
-        content="저희는 4개월 때부터 학습용 완구 썼어요!"
-      />
-      <ReplyContent
-        userNickname="희지맘"
-        createdAt="2022.07.13"
-        content="저희는 4개월 때부터 학습용 완구 썼어요!"
-      />
-      <ReplyContent
-        userNickname="희지맘"
-        createdAt="2022.07.13"
-        content="저희는 4개월 때부터 학습용 완구 썼어요!"
-      />
-    </StReplyWrapper>
+      <StReplyWrapper>
+        {pageReplyList.map(
+          ({ author, userNickname, content, createdAt }, idx) => (
+            <ReplyContent
+              key={idx}
+              author={author}
+              userNickname={userNickname}
+              content={content}
+              createdAt={createdAt}
+            />
+          ),
+        )}
+      </StReplyWrapper>
+      <StReplyListNav>
+        {replyList && (
+          <PageNavigation
+            currentPage={currentPage}
+            lastPage={Math.ceil(replyList.length / 10)}
+            handleCurrentPage={handleCurrentPage}
+          />
+        )}
+      </StReplyListNav>
+    </>
   );
 }
 
@@ -60,6 +114,12 @@ const StReplyWrapper = styled.section`
   flex-direction: column;
   justify-content: flex-start;
 `;
+const StReplyListNav = styled.nav`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  flex-direction: column;
+`;
 const StReplyTitle = styled.article`
   display: flex;
   flex-direction: row;

components/community/index.ts

@@ -1,4 +1,5 @@
 export { default as ReplyContent } from './ReplyContent';
 export { default as CommunityList } from './CommunityList';
-export { default as Reply } from './Reply';
 export { default as CommunityFloatingBtn } from './CommunityFloatingBtn';
+export { default as replyList } from './ReplyList';
+export { default as ContentCard } from './ContentCard';

components/landing/main/LandingBottomBanner.tsx

@@ -0,0 +1,27 @@
+import styled from '@emotion/styled';
+import { loading } from '../../common/styled/animation';
+
+export default function LandingBottomBanner() {
+  return (
+    <StLandingWrapper>
+      <div></div>
+    </StLandingWrapper>
+  );
+}
+const StLandingWrapper = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  height: 23.4rem;
+  margin-top: 12rem;
+
+  div {
+    width: 100%;
+    height: 23.4rem;
+
+    background: ${({ theme }) => theme.colors.gray002};
+    animation: ${loading} 2s infinite linear;
+  }
+`;