Merge pull request #12 from KUSITMS-27-chilling/feat/add-suggest/yeonsu

Feat/add suggest/yeonsu

src/components/Commu/CommuBest.styled.ts

@@ -0,0 +1,82 @@
+import styled from "styled-components";
+
+export const CommuBestBox = styled.div`
+position: relative;
+  width: 212px;
+  height: 132px;
+  border: 3px solid #767676;
+  border-radius: 10px;
+`
+export const Best = styled.div`
+    position: relative;
+  width: 38px;
+  height: 18px;
+  margin-top: 16px;
+  margin-left: 18px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #535353;
+`
+export const Text = styled.div`
+    position: relative;
+    width: 170px;
+     height: 50px;
+     border: 3px solid #767676;
+     margin-top: 9px;
+    margin-left: 18px;
+
+`
+
+//내가 남긴 후기 글 박스
+export const CommuBestBox1 = styled.div`
+position: relative;
+  width: 212px;
+  height: 132px;
+  border: 3px solid #59C7C8;
+  border-radius: 10px;
+`
+export const Title = styled.div`
+    position: relative;
+  width: 176px;
+  height: 18px;
+  margin-top: 16px;
+  margin-left: 18px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #000000;
+`
+export const Text1 = styled.div`
+    position: relative;
+  width: 38px;
+  height: 18px;
+  margin-top: 16px;
+  margin-left: 18px;
+  font-size: 15px;
+  font-weight: 700;
+  color: #535353;
+`
+//버튼 컴포넌트
+// export const CommuPostButton = styled.div`
+//     position: relative;
+//   width: 920px;
+//   height: 46px;
+//   font-size: 15px;
+//   font-weight: 700;
+//   color: #535353;
+
+//`
+export const Stylebutton = styled.button`
+    position: relative;
+  width: 920px;
+  height: 46px;
+  border: 2px solid #CBCBCB;
+  border-radius: 20px;
+  font-size: 18px;
+  font-weight: 600;
+  color: #535353;
+  background: none;
+  .Write{
+    margin-right: 13px;
+  }
+
+`

src/components/Commu/CommuBest.tsx

@@ -0,0 +1,45 @@
+import React ,{useState,useEffect}from 'react'
+import axios from 'axios';
+import {
+    CommuBestBox,
+    Best,
+    Text
+
+} from './CommuBest.styled'
+
+
+interface IData {
+    id: number;
+    title: string;
+    body: string;
+  }
+
+function CommuBest() {
+
+    const [data, setData] = useState<IData[]>([]);
+
+    useEffect(() => {
+        axios.get('')
+          .then(response => {
+            setData(response.data);
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      }, []);
+
+  return (
+    <div>
+      <CommuBestBox>
+      {data.map(item => (
+        <div key={item.id}>
+           <Best>BEST</Best>
+           <Text>{item.body}</Text>
+        </div>
+      ))}
+      </CommuBestBox>
+    </div>
+  )
+}
+
+export default CommuBest

src/components/Commu/CommuMyPost.tsx

@@ -0,0 +1,46 @@
+import React ,{useState,useEffect}from 'react'
+import axios from 'axios';
+import {
+    CommuBestBox1,
+    Title,
+    Text1
+
+} from './CommuBest.styled'
+
+
+interface IData {
+    id: number;
+    title: string;
+    day: string;
+  }
+
+function CommuBest() {
+
+    const [data, setData] = useState<IData[]>([]);
+
+    useEffect(() => {
+        axios.get('')
+          .then(response => {
+            setData(response.data);
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      }, []);
+
+  return (
+    <div>
+      <CommuBestBox1>
+      {data.map(item => (
+        <div key={item.id}>
+           {/* <Title>{item.title}</Title> */}
+           <Title>가나다라마바사</Title>
+           <Text1>{item.day}</Text1>
+        </div>
+      ))}
+      </CommuBestBox1>
+    </div>
+  )
+}
+
+export default CommuBest

src/components/Commu/CommuPostBtn.tsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { useNavigate } from 'react-router-dom';
+import {
+    Stylebutton
+
+} from './CommuBest.styled'
+import Write from '../../assets/Write.png'
+
+function CommuPostBtn() {
+    const navigate = useNavigate();
+
+    const goMypage =()=>{ //일단은 마이페이지로 해놓았음
+        navigate("/mypage");
+      }
+  return (
+    <div>
+              <Stylebutton onClick={goMypage}>
+              <img className="Write" alt="1" src={Write} />
+                나의 배움에 대해 작성해보세요!
+              </Stylebutton>
+
+    </div>
+  )
+}
+
+export default CommuPostBtn

src/pages/Commu/CommunityPage.styled.ts

@@ -0,0 +1,43 @@
+import styled from "styled-components";
+export const MainHeader = styled.div`
+  position: relative;
+  width: 100%;
+  height: 60px;
+  background-color: white;
+  border: 1px solid red;
+
+`
+export const MainBody_Tapbar = styled.div`
+  position: relative;
+  width: 100%;
+  height: 57px;
+  background-color: white;
+  border: 1px solid red;
+
+  .MainBody_Tapbar_In{
+    position: absolute;
+    width: 600px;
+    height: 44px;
+    border: 1px solid red;
+    margin-left: 112px;
+    margin-top: 13px;
+  }
+  .MainBody_Tapbar_In > button{
+    width: 135px;
+    height: 44px;
+    background-color:transparent;
+    border: none;
+    font-size: 20px;
+    font-weight: 600;
+    color: #B0B0B0;
+    Letter-spacing: -5%;
+  }
+`
+export const MainBanner = styled.div`
+  position: relative;
+  width: 100%;
+  height: 240px;
+  background-color: #91C8CA;
+  border: 1px solid red;
+
+`

src/pages/Commu/CommunityPage.tsx

@@ -1,9 +1,52 @@
 import React from 'react'
+import { useNavigate } from 'react-router-dom';
+import { 
+  MainBanner,
+  MainBody_Tapbar
+} from "./CommunityPage.styled"
 
+import Header from '../../components/Header/Header';
+import CommuBest from '../../components/Commu/CommuBest'
+import CommuMyPost from '../../components/Commu/CommuMyPost'
+import CommuPostBtn from '../../components/Commu/CommuPostBtn';
 function CommunityPage() {
+
+  const navigate = useNavigate();
+  const goLogin =()=>{
+      navigate("/login");
+  }
+  const goMain =()=>{ //모아보기
+      navigate("/");
+    }
+  const goSuggest =()=>{ //제안할래요
+      navigate("/suggest");
+    }
+  const goCommu =()=>{ //커뮤니티
+      navigate("/commu");
+    }
+  const goMypage =()=>{ //마이페이지
+      navigate("/mypage");
+    }
   return (
     <div>
-      커뮤니티 입니다
+      <>
+      <Header>
+      </Header>
+      <MainBody_Tapbar>
+      <div className='MainBody_Tapbar_In'>
+        <button onClick={goMain}>모아보기</button>
+        <button onClick={goSuggest}>제안할래요</button>
+        <button onClick={goCommu}>커뮤니티</button>
+        <button onClick={goMypage}>마이페이지</button>
+      </div>
+      </MainBody_Tapbar>
+      <MainBanner>
+        배너
+      </MainBanner>
+      {/* <CommuBest/> */}
+      {/* <CommuMyPost/> */}
+      {/* <CommuPostBtn/> */}
+      </>
     </div>
   )
 }