Merge branch 'community_list/#63' into community_list_mock/#47

components/common/Header.tsx

@@ -96,6 +96,10 @@ const StSearchBar = styled.div`
   background: ${({ theme }) => theme.colors.white_opacity_14};
   border-radius: 0.8rem;
 
+  & > svg {
+    cursor: pointer;
+  }
+
   input {
     height: 2.2rem;
     width: 22rem;

components/community/CommunityFloatingBtn.tsx

@@ -0,0 +1,40 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import Link from 'next/link';
+import { IcWriteBtn, IcTopBtn } from '../../public/assets/icons';
+
+export default function CommunityFloatingBtn() {
+  const handleTopScroll = () => {
+    if (!window.scrollY) return;
+
+    window.scrollTo({
+      top: 0,
+      behavior: 'smooth',
+    });
+  };
+  return (
+    <StCommunityFloatingBtnWrapper>
+      <Link href="/write">
+        <IcWriteBtn />
+      </Link>
+      <IcTopBtn onClick={handleTopScroll} />
+    </StCommunityFloatingBtnWrapper>
+  );
+}
+
+const StCommunityFloatingBtnWrapper = styled.section`
+  display: flex;
+  flex-direction: column;
+  row-gap: 2.4rem;
+  align-items: cetner;
+  position: sticky;
+  top: 43rem;
+
+  height: 30rem;
+  margin-top: 8.8rem;
+  margin-left: 3.4rem;
+
+  & > svg {
+    cursor: pointer;
+  }
+`;

components/community/CommunityList.tsx

@@ -1,13 +1,19 @@
 import styled from '@emotion/styled';
+// import { useState } from 'react';
+import { IcCommunitySearchIcon } from '../../public/assets/icons';
 import ContentCard from './ContentsCard';
 import { CommunityData } from '../../types/community';
+import CommunityFloatingBtn from './CommunityFloatingBtn';
 
 interface CommunityListProps {
   contentsList: CommunityData[];
 }
 
 export default function CommunityList(props: CommunityListProps) {
   const { contentsList } = props;
+export default function CommunityList() {
+  // const [category, setCategory] = useState<string>('모든 글');
+
   return (
     <StCommunityListWrapper>
       {contentsList.map((content, idx) => (
@@ -22,6 +28,42 @@ export default function CommunityList(props: CommunityListProps) {
           img={content.image}
         />
       ))}
+      <StSearchBar>
+        <input type="text" placeholder="궁금한 장난감 정보를 검색해보세요:)" />
+        <IcCommunitySearchIcon />
+      </StSearchBar>
+      <StMainArticle>
+        <StFloatingBlock />
+        <StContentCardList>
+          <ContentCard
+            category="후기"
+            title="3살 아가를 위한 쏘서 제품 추천!"
+            content="군인 또는 군무원이 아닌 국민은 대한민국의 영역안에서는 중대한 군사상 기밀·초병·초소·유독음식물공급·포로·군용물에 관한 죄중 법률이 정한 경우와 비상계엄이 선포된 경우를 제외하고는 군사법원의 재판을 받지 아니한다. 선거에 관한 경비는 법률이 정하는 경우....경우와 비상계엄이 선포된 경우를 제외하고는 군사법원의 재판을 받지 아니한다. 선거에 관한 경비는 법률이 정하는 경우...."
+            userNickname="예현맘"
+            createdAt="2022.07.12"
+            replyCount={12}
+            img="https://www.littlebaby.co.kr:14019/shop/data/goods/1632018070797m0.jpg"
+          />
+          <ContentCard
+            category="정보공유"
+            title="역시 그린키드 미끄럼틀이 가성비 좋네요"
+            content="군인 또는 군무원이 아닌 국민은 대한민국의 영역안에서는 중대한 군사상 기밀·초병·초소·유독음식물공급·포로·군용물에 관한 죄중 법률이 정한 경우와 비상계엄이 선포된 경우를 제외하고는 군사법원의 재판을 받지 아니한다. 선거에 관한 경비는 법률이 정하는 경우....경우와 비상계엄이 선포된 경우를 제외하고는 군사법원의 재판을 받지 아니한다. 선거에 관한 경비는 법률이 정하는 경우...."
+            userNickname="예현맘"
+            createdAt="2022.07.12"
+            replyCount={127}
+          />
+          <ContentCard
+            category="질문"
+            title="그린키드 미끄럼틀 아이가 좋아하네요"
+            content="군인 또는 군무원이 아닌 국민은 대한민국의 영역안에서는 중대한 군사상 기밀·초병·초소·유독음식물공급·포로·군용물에 관한 죄중 법률이 정한 경우와 비상계엄이 선포된 경우를 제외하고는 군사법원의 재판을 받지 아니한다. 선거에 관한 경비는 법률이 정하는 경우....경우와 비상계엄이 선포된 경우를 제외하고는 군사법원의 재판을 받지 아니한다. 선거에 관한 경비는 법률이 정하는 경우...."
+            userNickname="예현맘"
+            createdAt="2022.07.12"
+            replyCount={3}
+            img="https://www.littlebaby.co.kr:14019/shop/data/goods/1632018070797m0.jpg"
+          />
+        </StContentCardList>
+        <CommunityFloatingBtn />
+      </StMainArticle>
     </StCommunityListWrapper>
   );
 }
@@ -34,3 +76,45 @@ const StCommunityListWrapper = styled.section`
 
   margin-bottom: 4.8rem;
 `;
+
+  width: 57.6rem;
+  height: 4.5rem;
+  border-bottom: 0.2rem solid ${({ theme }) => theme.colors.gray008};
+  margin-bottom: 7.9rem;
+
+  input {
+    margin-left: 0.9rem;
+
+    width: 60rem;
+    height: 3.3rem;
+
+    font-size: 2.5rem;
+
+    color: ${({ theme }) => theme.colors.gray006};
+    ${({ theme }) => theme.fonts.b10_22_regular_150}
+
+    &::placeholder {
+      font-family: Pretandard;
+      color: ${({ theme }) => theme.colors.gray006};
+      ${({ theme }) => theme.fonts.b10_22_regular_150}
+    }
+
+    :focus::placeholder {
+      opacity: 0;
+    }
+  }
+  & > svg {
+    margin-right: 0.9rem;
+
+    cursor: pointer;
+  }
+`;
+const StMainArticle = styled.article`
+  display: flex;
+`;
+
+const StFloatingBlock = styled.div`
+  width: 9rem;
+`;
+
+const StContentCardList = styled.div``;

components/community/ContentsCard.tsx

@@ -1,6 +1,6 @@
 import styled from '@emotion/styled';
 import { useState } from 'react';
-import { IcComment, IcHeart } from '../../public/assets/icons';
+import { IcReply, IcHeart } from '../../public/assets/icons';
 
 interface ContentInfoProps {
   category: string;
@@ -33,11 +33,13 @@ export default function ContentCard(props: ContentInfoProps) {
           <span>{createdAt}</span>
         </StWriteInfo>
         <StReplyInfo>
-          <IcComment />
+          {/* <IcHeart />
+          <span>12</span> */}
+          <IcReply />
           <span>{replyCount}</span>
         </StReplyInfo>
       </StContentInfo>
-      {img === undefined ? <></> : <StContentImg src={img} alt="리뷰 사진" />};
+      {img === undefined ? <></> : <StContentImg src={img} alt="리뷰 사진" />}
     </StContentsCardWrapper>
   );
 }
@@ -49,18 +51,20 @@ const StContentsCardWrapper = styled.div`
   margin-bottom: 4.8rem;
   padding-bottom: 4.5rem;
 
-  width: 120rem;
+  width: 97.6rem;
   height: auto;
 
   border-bottom: 0.1rem solid #d6d6d6;
 
   h1 {
-    margin-bottom: 1.1rem;
+    margin-bottom: 0.7rem;
 
     font-style: normal;
     font-weight: 500;
     font-size: 2.3rem;
     line-height: 3.3rem;
+
+    ${({ theme }) => theme.fonts.b9_24_medium_150}
   }
 
   p {
@@ -70,6 +74,14 @@ const StContentsCardWrapper = styled.div`
     font-weight: 400;
     font-size: 1.6rem;
     line-height: 2.9rem;
+
+    display: -webkit-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical;
+    overflow: hidden;
+
+    color: ${({ theme }) => theme.colors.gray009};
+    ${({ theme }) => theme.fonts.t6_17_regular_140}
   }
 `;
 const StContentInfo = styled.section`
@@ -82,10 +94,10 @@ const StCategory = styled.div`
   justify-content: center;
   align-items: center;
 
-  width: 10.2rem;
-  height: 3.2rem;
+  width: 7.6rem;
+  height: 2.6rem;
 
-  margin-bottom: 2.6rem;
+  margin-bottom: 1.6rem;
 
   border-radius: 4.5rem;
 
@@ -95,19 +107,24 @@ const StCategory = styled.div`
   line-height: 2.6rem;
 
   color: ${({ theme }) => theme.colors.white};
+  ${({ theme }) => theme.fonts.b5_14_medium_140}
 `;
 const StCategoryReview = styled(StCategory)`
   background-color: ${({ theme }) => theme.colors.mainGreen};
 `;
 const StCategoryQuestion = styled(StCategory)`
-  background-color: ${({ theme }) => theme.colors.black};
+  color: ${({ theme }) => theme.colors.gray009};
+  background-color: ${({ theme }) => theme.colors.subYellow};
 `;
 const StCategoryInfo = styled(StCategory)`
   background-color: ${({ theme }) => theme.colors.mainDarkgreen};
 `;
 const StContentImg = styled.img`
-  width: 26rem;
-  height: 25.5rem;
+  width: 21.6rem;
+  height: 21.6rem;
+
+  border: 0.1rem solid ${({ theme }) => theme.colors.gray005};
+  border-radius: 0.5rem;
 `;
 const StWriteInfo = styled.div`
   margin-bottom: 1.2rem;
@@ -119,13 +136,19 @@ const StWriteInfo = styled.div`
     font-weight: 500;
     font-size: 1.7rem;
     line-height: 2.5rem;
+
+    color: ${({ theme }) => theme.colors.gray008};
+    ${({ theme }) => theme.fonts.b4_15_semibold_146}
   }
 
   span:last-child {
     font-style: normal;
     font-weight: 350;
     font-size: 1.7rem;
     line-height: 2.5rem;
+
+    color: ${({ theme }) => theme.colors.gray008};
+    ${({ theme }) => theme.fonts.b4_15_regular_146};
   }
 `;
 const StReplyInfo = styled.div`
@@ -140,5 +163,8 @@ const StReplyInfo = styled.div`
     font-weight: 400;
     font-size: 1.76rem;
     line-height: 2.5rem;
+
+    color: ${({ theme }) => theme.colors.gray008};
+    ${({ theme }) => theme.fonts.b4_15_medium_140};
   }
 `;

components/community/index.ts

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

public/assets/icons/index.ts

@@ -10,6 +10,8 @@ export { default as IcToyMark } from './toyMark.svg';
 export { default as IcFillToyMark } from './fillToyMark.svg';
 export { default as IcMenu } from './menuIcon.svg';
 export { default as IcCommunitySearchIcon } from './communitySearchIcon.svg';
-export { default as IcComment } from './commentIcon.svg';
+export { default as IcReply } from './replyIcon.svg';
 export { default as IcHeart } from './heartIcon.svg';
 export { default as IcWriteHeaderLogo } from './writeHeaderIcon.svg';
+export { default as IcWriteBtn } from './writeBtnIcon.svg';
+export { default as IcTopBtn } from './topBtnIcon.svg';