[ feat ] 커뮤니티 리스트 mockdata 연결

nori-dongsan · Jul 16, 2022 · d53c873 · d53c873
1 parent cb0bbde
commit d53c873
Show file tree

Hide file tree

Showing 7 changed files with 95 additions and 83 deletions.
diff --git a/components/common/Header.tsx b/components/common/Header.tsx
@@ -18,7 +18,11 @@ export default function Header() {
         </Link>
         <StSearchWrapper>
           <StSearchBar>
-            <input type="text" placeholder="상품명, 스토어명을 검색해보세요!" />
+            <input
+              type="text"
+              maxLength={60}
+              placeholder="상품명, 스토어명을 검색해보세요!"
+            />
             <IcSearchIcon />
           </StSearchBar>
           <StMenu>
@@ -40,7 +44,7 @@ const StHeaderWrapper = styled.header`
   position: sticky;
   top: -3.2rem;
 
-  width: 100%;
+  width: 192rem;
   height: 11.4rem;
 
   background-color: ${({ theme }) => theme.colors.mainGreen};

diff --git a/components/common/WriteHeader.tsx b/components/common/WriteHeader.tsx
@@ -22,7 +22,7 @@ const StWriteHeaderWrapper = styled.section`
   position: sticky;
   top: -3.2em;
 
-  width: 100%;
+  width: 192rem;
   height: 11.4rem;
   padding-top: 4.2rem;
 

diff --git a/components/community/CommunityList.tsx b/components/community/CommunityList.tsx
@@ -1,44 +1,27 @@
 import styled from '@emotion/styled';
-import { IcCommunitySearchIcon } from '../../public/assets/icons';
 import ContentCard from './ContentsCard';
-import Link from 'next/link';
+import { CommunityData } from '../../types/community';
 
-export default function CommunityList() {
+interface CommunityListProps {
+  contentsList: CommunityData[];
+}
+
+export default function CommunityList(props: CommunityListProps) {
+  const { contentsList } = props;
   return (
     <StCommunityListWrapper>
-      <StSearchBar>
-        <input type="text" />
-        <IcCommunitySearchIcon />
-      </StSearchBar>
-      <Link href="/write">
-        <StWriteBtn>글쓰기</StWriteBtn>
-      </Link>
-      <ContentCard
-        category="후기"
-        title="그린키드 미끄럼틀 아이가 좋아하네요"
-        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"
-      />
+      {contentsList.map((content, idx) => (
+        <ContentCard
+          key={idx}
+          category={content.category}
+          title={content.title}
+          content={content.content}
+          userNickname={content.userNickname}
+          createdAt={content.createdAt}
+          replyCount={content.replyCount}
+          img={content.image}
+        />
+      ))}
     </StCommunityListWrapper>
   );
 }
@@ -51,36 +34,3 @@ const StCommunityListWrapper = styled.section`
 
   margin-bottom: 4.8rem;
 `;
-const StSearchBar = styled.div`
-  display: flex;
-  flex-direction: row;
-
-  width: 64.2rem;
-  height: 4.5rem;
-  border-bottom: 0.1rem solid ${({ theme }) => theme.colors.black};
-  margin-bottom: 7.9rem;
-
-  input {
-    width: 60rem;
-    height: 2.5rem;
-
-    font-size: 2.5rem;
-  }
-`;
-const StWriteBtn = styled.a`
-  padding: 0.9rem 2.5rem;
-  margin-bottom: 3.3rem;
-  margin-left: 85%;
-
-  font-style: normal;
-  font-weight: 400;
-  font-size: 2rem;
-  line-height: 2.8rem;
-
-  background-color: #e1ffeb;
-  color: ${({ theme }) => theme.colors.mainDarkgreen};
-  border: 0.2rem solid ${({ theme }) => theme.colors.mainDarkgreen};
-  border-radius: 1rem;
-
-  cursor: pointer;
-`;
diff --git a/components/community/ContentsCard.tsx b/components/community/ContentsCard.tsx
@@ -6,9 +6,9 @@ interface ContentInfoProps {
   category: string;
   title: string;
   content: string;
-  userNickname: string;
-  replyCount: number;
-  createdAt: string;
+  userNickname?: string;
+  replyCount?: number;
+  createdAt?: string;
   img?: string;
 }
 

diff --git a/core/api/communityList.ts b/core/api/communityList.ts
@@ -0,0 +1,10 @@
+import useSWR from 'swr';
+import { baseInstance } from '../axios';
+
+export const useGetCommunityList = (key: string) => {
+  const { data } = useSWR(`/community?sort=${key}`, baseInstance.get);
+
+  return {
+    communityList: data,
+  };
+};
diff --git a/core/axios.ts b/core/axios.ts
@@ -1,10 +1,10 @@
 import axios from 'axios';
 import LocalStorage from './localStorage';
-// const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
+const BASE_URL = process.env.NEXT_PUBLIC_BASE_URL;
 
-// const baseInstance = axios.create({
-//   baseURL: `${BASE_URL}`,
-//   headers: {
-//     'Content-Type': 'application/json',
-//   },
-// });
+export const baseInstance = axios.create({
+  baseURL: `${BASE_URL}`,
+  headers: {
+    'Content-Type': 'application/json',
+  },
+});
diff --git a/pages/community/index.tsx b/pages/community/index.tsx
@@ -1,11 +1,26 @@
 import styled from '@emotion/styled';
 import { CommunityList } from '../../components/community';
+import { IcCommunitySearchIcon } from '../../public/assets/icons';
+import Link from 'next/link';
+import { useState } from 'react';
+import { useGetCommunityList } from '../../core/api/communityList';
+import { CommunityData } from '../../types/community';
 
 export default function community() {
+  const [contentList, setContentList] = useState<CommunityData[]>([]);
+  // const [currentPage, setCurrentPage] = useState<number>();
+
   return (
     <StCommunityWrapper>
       <StCommunityTitle>커뮤니티</StCommunityTitle>
-      <CommunityList />
+      <StSearchBar>
+        <input type="text" />
+        <IcCommunitySearchIcon />
+      </StSearchBar>
+      <Link href="/write">
+        <StWriteBtn>글쓰기</StWriteBtn>
+      </Link>
+      {contentList.map(<CommunityList contentsList={contentList} />)}
     </StCommunityWrapper>
   );
 }
@@ -23,3 +38,36 @@ const StCommunityTitle = styled.h1`
 
   ${({ theme }) => theme.fonts.t1_28_medium_150};
 `;
+const StSearchBar = styled.div`
+  display: flex;
+  flex-direction: row;
+
+  width: 64.2rem;
+  height: 4.5rem;
+  border-bottom: 0.1rem solid ${({ theme }) => theme.colors.black};
+  margin-bottom: 7.9rem;
+
+  input {
+    width: 60rem;
+    height: 2.5rem;
+
+    font-size: 2.5rem;
+  }
+`;
+const StWriteBtn = styled.a`
+  padding: 0.9rem 2.5rem;
+  margin-bottom: 3.3rem;
+  margin-left: 85%;
+
+  font-style: normal;
+  font-weight: 400;
+  font-size: 2rem;
+  line-height: 2.8rem;
+
+  background-color: #e1ffeb;
+  color: ${({ theme }) => theme.colors.mainDarkgreen};
+  border: 0.2rem solid ${({ theme }) => theme.colors.mainDarkgreen};
+  border-radius: 1rem;
+
+  cursor: pointer;
+`;