Feature main

package.json

@@ -3,12 +3,16 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@emotion/react": "^11.11.1",
+    "@emotion/styled": "^11.11.0",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-router-dom": "^6.14.2",
     "react-scripts": "5.0.1",
+    "styled-components": "^6.0.5",
     "web-vitals": "^2.1.4"
   },
   "scripts": {

src/App.js

@@ -1,10 +1,40 @@
-import logo from './logo.svg';
-import './App.css';
+import { BrowserRouter, Route, Routes } from "react-router-dom";
+import Header from "./component/project/header/header";  // 헤더 컴포넌트를 불러옵니다.
+import Main from "./component/project/main/main";
+import Mypage from "./component/project/mypage/mypage";
+import Signin from "./component/project/signin/signin";
+import Signup from "./component/project/signup/signup";
+import Proboard from "./component/project/proboard/proboard";
+import QuestionBoard from "./component/project/questionboard/questionboard";
+import AIWriting from "./component/project/writing/aiwriting/aiwriting";
+import Questiondetail from "./component/project/questionboard/questiondetail";
+import GenralWriting from "./component/project/writing/generalwriting";
+import SellDetail from "./component/project/sellboard/selldetail/selldetail";
+import ProDetail from "./component/project/proboard/prodetail/prodetail";
+import CommunityDetail from "./component/project/community/communitydetail/communitydetail";
+
+import "./App.css";
 
 function App() {
   return (
     <div>
-
+      <BrowserRouter>
+        <Header />
+        <Routes>
+          <Route path="/" element={<Main />} />
+          <Route path="/mypage" element={<Mypage />} />
+          <Route path="/signin" element={<Signin />} />
+          <Route path="/signup" element={<Signup />} />
+          <Route path="/proboard" element={<Proboard />} />
+          <Route path="/questionboard" element={<QuestionBoard />}/>
+          <Route path="/questiondetail" element={<Questiondetail />}/>
+          <Route path="/generalwriting" element={<GenralWriting />}/>
+          <Route path="/aiwriting" element={<AIWriting />}/>
+          <Route path="/selldetail" element={<SellDetail/>}/>
+          <Route path="/prodetail" element={<ProDetail/>}/>
+          <Route path="/communitydetail" element={<CommunityDetail/>}/>
+        </Routes>
+      </BrowserRouter>
     </div>
   );
 }

src/component/emotion/component.js

@@ -0,0 +1,76 @@
+/** @jsxImportSource @emotion/react */
+import styled from "@emotion/styled";
+
+const StyledProjectBox = styled.div`
+  display: flex;
+  flex-direction: column;
+  margin: 0 auto;
+  color: #ffffff;
+  padding: 1.6rem 2.1rem;
+  width: 37rem;
+  height: 39.5rem;
+  background: #212121;
+  border-radius: 1.9rem;
+  margin: 0;
+`;
+const StyledProjectTag = styled.div`
+  display: flex;
+  flex-direction: row;
+`;
+const StyledTag = styled.div`
+  border-radius: 0.5rem;
+  background: #4f85e8;
+  padding: 0.6rem 1rem;
+  margin: 0 0.9rem 0.9rem 0;
+  color: #fff;
+  font-family: Pretendard;
+  font-size: 1.4rem;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: -0.42px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+`;
+const StyledTitle = styled.h2`
+  color: #fff;
+  font-family: Pretendard;
+  font-size: 1.5625em;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  letter-spacing: -0.75px;
+  margin-bottom: 0.625em;
+`;
+const StyledText = styled.p`
+  color: #fff;
+  font-family: Pretendard;
+  font-size: 1em;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  letter-spacing: -0.48px;
+`;
+
+const ProjectBox = ({ title, content }) => {
+  return (
+    <StyledProjectBox title={title} content={content}>
+      <img
+        src="https://i.ibb.co/yktPkxP/image-5.png"
+        alt="Project"
+        className="project-image"
+        style={{
+          width: "20.5625em",
+          height: "14.0625em",
+          borderRadius: "0.625em",
+          marginBottom: "1em",
+        }}
+      />
+      <StyledTitle>{title}</StyledTitle>
+      <StyledText>{content}</StyledText>
+    </StyledProjectBox>
+  );
+};
+
+export { ProjectBox };

src/component/project/agrboard/component.js

@@ -0,0 +1,40 @@
+import styled from "@emotion/styled";
+
+export const IndexContainer = styled.div`
+  background-color: #fff;
+  display: flex;
+  justify-content: center;
+  align-content: center;
+  margin-top: 3 00px;
+`;
+
+export const InnerContainer = styled.div`
+  margin-top: 50px;
+  width: 1404px;
+  height: 701px;
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  border-radius: 30px;
+  justify-content: center;
+  padding: 64px;
+`;
+export const SignButton = styled.div`
+  width: 636px;
+  height: 77px;
+  flex-shrink: 0;
+  border-radius: 59px;
+  background: #3a6e67;
+  color: #fff;
+  text-align: center;
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Inter;
+  font-size: 24px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin-top: 30px;
+`;

src/component/project/agrboard/proboard.js

@@ -0,0 +1,55 @@
+import React from "react";
+import styled from "@emotion/styled";
+import { IndexContainer, InnerContainer, SignButton } from "./component";
+const Proboard = () => {
+  const Inner = styled.div`
+    width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-between;
+    margin-top: 300px;
+  `;
+  const SignupInput = styled.input`
+    color: #000;
+    width: 294px;
+    height: 388px;
+    border-radius: 10px;
+    border: 0px;
+    padding: 20px;
+    font-feature-settings: "clig" off, "liga" off;
+    font-family: Inter;
+    font-size: 20px;
+    font-style: normal;
+    font-weight: 600;
+    line-height: 20px;
+    margin-bottom: 16px;
+    background: #d9d9d9;
+    ::placeholder {
+      color: lightgray;
+      font-size: 20px;
+      font-style: normal;
+      font-weight: 700;
+    }
+  `;
+  return (
+    <>
+      <IndexContainer>
+        <InnerContainer>
+          <h1>판매자 게시판</h1>
+          <Inner>
+            <SignupInput placeholder="사용할 아이디를 입력하세요" />
+            <SignupInput placeholder="사용할 비밀번호를 입력하세요" />
+            <SignupInput placeholder="이름을 입력하세요" />
+            <SignupInput placeholder="휴대폰 번호를 입력하세요" />
+            <SignupInput placeholder="사용할 아이디를 입력하세요" />
+            <SignupInput placeholder="사용할 비밀번호를 입력하세요" />
+            <SignupInput placeholder="이름을 입력하세요" />
+            <SignupInput placeholder="휴대폰 번호를 입력하세요" />
+          </Inner>
+        </InnerContainer>
+      </IndexContainer>
+    </>
+  );
+};
+
+export default Proboard;

src/component/project/community/communitydetail/communitydetail.js

@@ -0,0 +1,73 @@
+import React from "react";
+import { CommentCount, CommentCountNum, ContentBox, IndexContainer,
+     InfoCount, InfoText, InfoTextSpan, Line, ProfileImg, Title,
+     Content, ViewCount, ViewCountNum, WriterInfo, WriterProfile, CountInfoLogo, Likelogo, CommentTitle, CommentBox, CommentProfile, CommentProfileImg, CommentWriter, Comment, LikecountSpan, Commentlogo, CommentCountSpan } from './component';
+
+
+function CommunityDetail() {
+    return (
+        <IndexContainer>
+            <ContentBox>
+                <Title>이번에 처음으로 스마트 스토어에서 판매 시작</Title>
+                <Line/>
+                <WriterInfo>
+                    <WriterProfile>
+                        <ProfileImg/>
+                        <InfoText>
+                            뽀빠이 농장
+                            <br/>
+                            <InfoTextSpan>
+                                공급자 회원
+                            </InfoTextSpan>
+                            </InfoText>
+                    </WriterProfile>
+                    <InfoCount>
+                        <ViewCount>
+                            조회수
+                            <ViewCountNum>9</ViewCountNum>
+                        </ViewCount>
+                        <CommentCount>
+                            댓글
+                            <CommentCountNum>2</CommentCountNum>
+                        </CommentCount>
+                    </InfoCount>
+                </WriterInfo>
+                <Line />
+                <Content>
+                팜투마켓 이용해서 착한 마켓이랑 매칭 되어 처음으로 스마트 스토어에서 농산물을 판매했습니다. 처음에는 컴퓨터로 등록하는 거 자체가 너무 어려워서 하기 힘들었는데 인공지능이 도와주니까 순식간에 등록이 가능했어요. 판매자분이 친절하게 먼저 연락 주셔서 편하게 판매가 가능했습니다. 다들 이용해보세요.
+                </Content>
+                <CountInfoLogo>
+                    <Likelogo/>
+                    <LikecountSpan>9</LikecountSpan>
+                    <Commentlogo/>
+                    <CommentCountSpan>2</CommentCountSpan>
+                </CountInfoLogo>
+                <Line />
+                <CommentTitle>댓글</CommentTitle>
+                <CommentBox>
+                    <CommentProfile>
+                        <CommentProfileImg/>
+                        <CommentWriter>팜투게더</CommentWriter>
+                    </CommentProfile>
+                    <Comment>
+                        스마트 스토어 첫 판매 축하드립니다!
+                    </Comment>
+                </CommentBox>
+                <Line />
+                <CommentBox>
+                    <CommentProfile>
+                        <CommentProfileImg/>
+                        <CommentWriter>착한마켓</CommentWriter>
+                    </CommentProfile>
+                    <Comment>
+                        덕분에 성공적으로 판매 완료 되었습니다. 감사합니다!
+                    </Comment>
+                </CommentBox>
+                <Line />
+            </ContentBox>
+        </IndexContainer>
+        );
+    }
+
+    export default CommunityDetail;
+