Merge branch 'add/orderDetailPage' into develop

potato-club · Feb 21, 2023 · e7c043a · e7c043a
2 parents 6d78373 + e4fb66b
commit e7c043a
Show file tree

Hide file tree

Showing 11 changed files with 401 additions and 69 deletions.
diff --git a/pages/orderDetail.tsx b/pages/orderDetail.tsx
@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import { DetailTop } from "../src/components/orderDetailPage/DetailTop";
+import { DetailContnets } from "../src/components/orderDetailPage/DetailContents";
+import { DetailBottm } from "../src/components/orderDetailPage/Detailbottom";
+
+export default function OrderDetail() {
+  return (
+    <Wrapper>
+      <DetailTop />
+      <DetailContnets />
+      <DetailBottm></DetailBottm>
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  width: 1024px;
+  height: 1800px;
+  padding: 0 12px;
+`;
diff --git a/pages/orderReview.tsx b/pages/orderReview.tsx
@@ -10,8 +10,6 @@ export default function OrderReview() {
   // "period": "6",
   // "progress": 100
 
-  console.log(orderData.data);
-
   return (
     <Wrapper>
       <ReviewTop />

diff --git a/src/assets/data2.json b/src/assets/data2.json
@@ -0,0 +1,28 @@
+{
+  "data1" :
+  {
+    "id": 1,
+    "title": "1번 웹사이트",
+    "purpose": "상품 판매",
+    "startDate": "2023/02/18",
+    "endDate": "2023/02/19",
+    "progress": "ongoing"
+  },
+  "data2" : 
+  {
+  "id": 1,
+  "title": "1번 웹사이트",
+  "purpose": "상품 판매",
+  "startDate": "2023/02/18",
+  "endDate": "2023/02/19",
+  "progress": "finished",
+  "additional": {
+    "page" : true,
+    "login" : true,
+    "db" : false
+  },
+  "starRating": 4,
+  "like" : 131
+  }
+}
+
diff --git a/src/assets/img/detail/check.png b/src/assets/img/detail/check.png
diff --git a/src/assets/img/detail/heart.png b/src/assets/img/detail/heart.png
diff --git a/src/components/orderDetailPage/DetailContents.tsx b/src/components/orderDetailPage/DetailContents.tsx
@@ -0,0 +1,206 @@
+import styled from "styled-components";
+import detailData from "../../assets/data2.json";
+import Image from "next/image";
+import checkIcon from "../../assets/img/detail/check.png";
+
+export const DetailContnets = () => {
+  // data1 완료되지 않은 발주
+  // data2 완료된 발주
+  // "data2" :
+  // {
+  // "id": 1,
+  // "title": "1번 웹사이트",
+  // "purpose": "상품 판매",
+  // "startDate": "2023/02/18",
+  // "endDate": "2023/02/19",
+  // "progress": "finished",
+  // "additional": {
+  //   "page" : true,
+  //   "login" : true,
+  //   "db" : false
+  // },
+  // "starRating": 4,
+  // "like" : 131
+  // }
+
+  const title = detailData.data2.title;
+  const purpose = detailData.data2.purpose;
+  const startDate = detailData.data2.startDate;
+  const endDate = detailData.data2.endDate;
+  const progress = detailData.data2.progress;
+  const additional = detailData.data2.additional;
+  const starRating = detailData.data2.starRating;
+  const like = detailData.data2.like;
+
+  return (
+    <WrapperContents>
+      <OrderTitleDiv>
+        <OrderTitleH2>{title}</OrderTitleH2>
+      </OrderTitleDiv>
+      <OrderInfoDiv data={""}>
+        <InfoLabelDiv>
+          <OrderInfoP>목적</OrderInfoP>
+        </InfoLabelDiv>
+        <InfoDataDiv1>
+          <OrderInfoP>{purpose}</OrderInfoP>
+        </InfoDataDiv1>
+      </OrderInfoDiv>
+      <OrderInfoDiv data={""}>
+        <InfoLabelDiv>
+          <OrderInfoP>제작기간</OrderInfoP>
+        </InfoLabelDiv>
+        <InfoDataDiv2>
+          <DataLabelDiv>
+            <OrderInfoP>시작일</OrderInfoP>
+          </DataLabelDiv>
+          <OrderInfoP>{startDate}</OrderInfoP>
+        </InfoDataDiv2>
+        <InfoDataDiv2>
+          <DataLabelDiv>
+            <OrderInfoP>종료일</OrderInfoP>
+          </DataLabelDiv>
+          <OrderInfoP>{endDate}</OrderInfoP>
+        </InfoDataDiv2>
+      </OrderInfoDiv>
+      <OrderInfoDiv data={progress}>
+        <InfoLabelDiv>
+          <OrderInfoP>추가 옵션</OrderInfoP>
+        </InfoLabelDiv>
+        <InfoDataDiv3>
+          <DataLabelDiv>
+            <OrderInfoP>페이지 추가</OrderInfoP>
+          </DataLabelDiv>
+          <CheckBoxDiv>
+            <CheckImgDiv additional={additional.page}>
+              <Image src={checkIcon} alt="icon" width={16} height={16}></Image>
+            </CheckImgDiv>
+          </CheckBoxDiv>
+        </InfoDataDiv3>
+        <InfoDataDiv3>
+          <DataLabelDiv>
+            <OrderInfoP>로그인 기능</OrderInfoP>
+          </DataLabelDiv>
+          <CheckBoxDiv>
+            <CheckImgDiv additional={additional.login}>
+              <Image src={checkIcon} alt="icon" width={16} height={16}></Image>
+            </CheckImgDiv>
+          </CheckBoxDiv>
+        </InfoDataDiv3>
+        <InfoDataDiv3>
+          <DataLabelDiv>
+            <OrderInfoP>DB</OrderInfoP>
+          </DataLabelDiv>
+          <CheckBoxDiv>
+            <CheckImgDiv additional={additional.db}>
+              <Image src={checkIcon} alt="icon" width={16} height={16}></Image>
+            </CheckImgDiv>
+          </CheckBoxDiv>
+        </InfoDataDiv3>
+      </OrderInfoDiv>
+      <OrderInfoDiv data={progress}>
+        <InfoLabelDiv>
+          <OrderInfoP>별점</OrderInfoP>
+        </InfoLabelDiv>
+        <InfoDataDiv1></InfoDataDiv1>
+      </OrderInfoDiv>
+      <OrderInfoDiv data={""}>
+        <PreviewLabelDiv>
+          <OrderInfoP>웹페이지 미리보기</OrderInfoP>
+        </PreviewLabelDiv>
+      </OrderInfoDiv>
+    </WrapperContents>
+  );
+};
+
+const WrapperContents = styled.div`
+  width: 100%;
+  height: 1200px;
+  position: relative;
+  border-bottom: 1px solid black;
+  padding-bottom: 50px;
+`;
+
+const OrderTitleDiv = styled.div`
+  width: 100%;
+  height: 70px;
+  border-top: 1px solid black;
+  padding-left: 21px;
+`;
+
+const OrderTitleH2 = styled.h2`
+  font-size: 27px;
+  line-height: 70px;
+`;
+
+const OrderInfoDiv = styled.div<{ data: String }>`
+  display: ${(props) => (props.data === "ongoing" ? "none" : "")};
+  width: 100%;
+  height: 50px;
+  border-top: 1px solid black;
+`;
+
+const InfoLabelDiv = styled.div`
+  height: 50px;
+  width: 195px;
+  padding-left: 23px;
+  border-right: 1px solid black;
+  float: left;
+`;
+
+const PreviewLabelDiv = styled.div`
+  height: 50px;
+  width: 195px;
+  padding-left: 23px;
+  float: left;
+`;
+
+const InfoDataDiv1 = styled.div`
+  padding-left: 25px;
+  height: 50px;
+  width: 600px;
+  border-right: 1px solid black;
+  float: left;
+`;
+
+const InfoDataDiv2 = styled.div`
+  height: 50px;
+  width: 300px;
+  border-right: 1px solid black;
+  float: left;
+`;
+
+const InfoDataDiv3 = styled.div`
+  height: 50px;
+  width: 200px;
+  border-right: 1px solid black;
+  float: left;
+  display: flex;
+  align-items: center;
+`;
+
+const DataLabelDiv = styled.div`
+  height: 50px;
+  width: 150px;
+  text-align: center;
+  float: left;
+`;
+
+const OrderInfoP = styled.p`
+  font-size: 20px;
+  line-height: 50px;
+`;
+
+const CheckBoxDiv = styled.div`
+  width: 25px;
+  height: 25px;
+  border: 1px solid black;
+`;
+
+const CheckImgDiv = styled.div<{ additional: Boolean }>`
+  visibility: ${(props) => (props.additional === false ? "hidden" : "")};
+  width: 23px;
+  height: 23px;
+  display: flex;
+  align-items: center;
+  padding: 0 0;
+`;
diff --git a/src/components/orderDetailPage/DetailTop.tsx b/src/components/orderDetailPage/DetailTop.tsx
@@ -0,0 +1,20 @@
+import styled from "styled-components";
+import { Title } from "./Title";
+
+export const DetailTop = () => {
+  const PAGETITLE = "발주 상세";
+  const EXPLAIN = "발주의 상세 정보를 확인하고 평가해보세요";
+  return (
+    <WrapperTop>
+      <Title pageTitle={PAGETITLE} explain={EXPLAIN} />
+    </WrapperTop>
+  );
+};
+
+const WrapperTop = styled.div`
+  display: flex;
+  width: 100%;
+  height: 277px;
+  padding-top: 40px;
+  position: relative;
+`;
diff --git a/src/components/orderDetailPage/Detailbottom.tsx b/src/components/orderDetailPage/Detailbottom.tsx
@@ -0,0 +1,58 @@
+import styled from "styled-components";
+import detailData from "../../assets/data2.json";
+import Image from "next/image";
+import heartIcon from "../../assets/img/detail/heart.png";
+
+export const DetailBottm = () => {
+  const like = detailData.data2.like;
+  return (
+    <BottomWrapper>
+      <LikeButton>
+        좋아요
+        <LikeButtonP>
+          <ImageContainer>
+            <Image src={heartIcon} alt="icon" width={23} height={23}></Image>
+          </ImageContainer>
+          {like}
+        </LikeButtonP>
+      </LikeButton>
+      <ListButton>목록</ListButton>
+    </BottomWrapper>
+  );
+};
+
+const BottomWrapper = styled.div`
+  position: relative;
+  height: 323px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+`;
+
+const ListButton = styled.button`
+  position: absolute;
+  right: 64px;
+  width: 100px;
+  height: 40px;
+  border-radius: 7px;
+  font-size: 20px;
+  border: 1px solid black;
+`;
+
+const LikeButton = styled.button`
+  width: 150px;
+  height: 80px;
+  border-radius: 10px;
+  border: 1px solid black;
+  margin: 0 auto;
+  font-size: 23px;
+`;
+
+const LikeButtonP = styled.p`
+  line-height: 23px;
+`;
+
+const ImageContainer = styled.div`
+  display: inline-block;
+  vertical-align: middle;
+`;