orderDetail 페이지 퍼블리싱

orderDetail 페이지 퍼블리싱 진행
potato-club · Feb 21, 2023 · e4fb66b · e4fb66b
1 parent 02eceb7
commit e4fb66b
Show file tree

Hide file tree

Showing 9 changed files with 281 additions and 126 deletions.
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
@@ -1,26 +1,112 @@
 import styled from "styled-components";
-import { Pagenation } from "../orderReviewPage/Pagenation";
+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>웹사이트 제목1</OrderTitleH2>
+        <OrderTitleH2>{title}</OrderTitleH2>
       </OrderTitleDiv>
-      <OrderInfoDiv>
+      <OrderInfoDiv data={""}>
         <InfoLabelDiv>
           <OrderInfoP>목적</OrderInfoP>
         </InfoLabelDiv>
+        <InfoDataDiv1>
+          <OrderInfoP>{purpose}</OrderInfoP>
+        </InfoDataDiv1>
       </OrderInfoDiv>
-      <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>
+      <OrderInfoDiv data={progress}>
         <InfoLabelDiv>
-          <OrderInfoP>웹페이지 미리보기</OrderInfoP>
+          <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>
   );
@@ -46,7 +132,8 @@ const OrderTitleH2 = styled.h2`
   line-height: 70px;
 `;
 
-const OrderInfoDiv = styled.div`
+const OrderInfoDiv = styled.div<{ data: String }>`
+  display: ${(props) => (props.data === "ongoing" ? "none" : "")};
   width: 100%;
   height: 50px;
   border-top: 1px solid black;
@@ -56,9 +143,64 @@ 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
@@ -1,28 +1,12 @@
 import styled from "styled-components";
-import Image from "next/image";
-import { customColor } from "../customColor";
-import reviewIcon from "../../assets/img/review/review.png";
-import { useState } from "react";
+import { Title } from "./Title";
 
 export const DetailTop = () => {
+  const PAGETITLE = "발주 상세";
+  const EXPLAIN = "발주의 상세 정보를 확인하고 평가해보세요";
   return (
     <WrapperTop>
-      <TitleDiv>
-        <TitleTopDiv>
-          <ImgDiv>
-            <Image
-              src={reviewIcon}
-              alt="reviewIcon"
-              width={30}
-              height={30}
-            ></Image>
-          </ImgDiv>
-          <TitleH2>발주 상세</TitleH2>
-        </TitleTopDiv>
-        <TitleBottomDiv>
-          <TitleP>발주의 상세 정보를 확인하고 평가해보세요</TitleP>
-        </TitleBottomDiv>
-      </TitleDiv>
+      <Title pageTitle={PAGETITLE} explain={EXPLAIN} />
     </WrapperTop>
   );
 };
@@ -34,36 +18,3 @@ const WrapperTop = styled.div`
   padding-top: 40px;
   position: relative;
 `;
-
-const TitleDiv = styled.div`
-  width: 432px;
-  height: 74px;
-  margin-left: 41px;
-`;
-
-const TitleTopDiv = styled.div`
-  width: 100%;
-  height: 30px;
-`;
-
-const TitleBottomDiv = styled.div`
-  width: 100%;
-  height: 44px;
-  padding-left: 26px;
-`;
-
-const ImgDiv = styled.div`
-  display: block;
-  float: left;
-  margin-right: 9px;
-`;
-
-const TitleH2 = styled.h2`
-  font-size: 24px;
-`;
-
-const TitleP = styled.p`
-  margin-top: 15px;
-  font-size: 18px;
-  color: ${customColor.gray};
-`;
diff --git a/src/components/orderDetailPage/Detailbottom.tsx b/src/components/orderDetailPage/Detailbottom.tsx
@@ -1,8 +1,21 @@
 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>
   );
@@ -25,3 +38,21 @@ const ListButton = styled.button`
   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;
+`;