From 02eceb738a91a23ca53981b10f77ee5acc0099a8 Mon Sep 17 00:00:00 2001 From: Joonhyung Choi Date: Mon, 13 Feb 2023 19:38:46 +0900 Subject: [PATCH 1/2] =?UTF-8?q?orderDetailPage=20=ED=8D=BC=EB=B8=94?= =?UTF-8?q?=EB=A6=AC=EC=8B=B11?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit orderDetailPage 퍼블리싱 진행 --- pages/orderDetail.tsx | 20 ++++++ .../orderDetailPage/DetailContents.tsx | 64 +++++++++++++++++ src/components/orderDetailPage/DetailTop.tsx | 69 +++++++++++++++++++ .../orderDetailPage/Detailbottom.tsx | 27 ++++++++ .../orderReviewPage/ReviewBottom.tsx | 3 - 5 files changed, 180 insertions(+), 3 deletions(-) create mode 100644 pages/orderDetail.tsx create mode 100644 src/components/orderDetailPage/DetailContents.tsx create mode 100644 src/components/orderDetailPage/DetailTop.tsx create mode 100644 src/components/orderDetailPage/Detailbottom.tsx diff --git a/pages/orderDetail.tsx b/pages/orderDetail.tsx new file mode 100644 index 0000000..3fc978c --- /dev/null +++ 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 ( + + + + + + ); +} + +const Wrapper = styled.div` + width: 1024px; + height: 1800px; + padding: 0 12px; +`; diff --git a/src/components/orderDetailPage/DetailContents.tsx b/src/components/orderDetailPage/DetailContents.tsx new file mode 100644 index 0000000..90ea064 --- /dev/null +++ b/src/components/orderDetailPage/DetailContents.tsx @@ -0,0 +1,64 @@ +import styled from "styled-components"; +import { Pagenation } from "../orderReviewPage/Pagenation"; + +export const DetailContnets = () => { + return ( + + + 웹사이트 제목1 + + + + 목적 + + + + + 제작기간 + + + + + 웹페이지 미리보기 + + + + ); +}; + +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` + width: 100%; + height: 50px; + border-top: 1px solid black; +`; + +const InfoLabelDiv = styled.div` + height: 50px; + width: 195px; + padding-left: 23px; +`; + +const OrderInfoP = styled.p` + font-size: 20px; + line-height: 50px; +`; diff --git a/src/components/orderDetailPage/DetailTop.tsx b/src/components/orderDetailPage/DetailTop.tsx new file mode 100644 index 0000000..405d45e --- /dev/null +++ b/src/components/orderDetailPage/DetailTop.tsx @@ -0,0 +1,69 @@ +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"; + +export const DetailTop = () => { + return ( + + + + + reviewIcon + + 발주 상세 + + + 발주의 상세 정보를 확인하고 평가해보세요 + + + + ); +}; + +const WrapperTop = styled.div` + display: flex; + width: 100%; + height: 277px; + 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 new file mode 100644 index 0000000..22a1484 --- /dev/null +++ b/src/components/orderDetailPage/Detailbottom.tsx @@ -0,0 +1,27 @@ +import styled from "styled-components"; + +export const DetailBottm = () => { + return ( + + 목록 + + ); +}; + +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; +`; diff --git a/src/components/orderReviewPage/ReviewBottom.tsx b/src/components/orderReviewPage/ReviewBottom.tsx index 68f4419..192759a 100644 --- a/src/components/orderReviewPage/ReviewBottom.tsx +++ b/src/components/orderReviewPage/ReviewBottom.tsx @@ -1,7 +1,4 @@ import styled from "styled-components"; -import Image from "next/image"; -import arrowIcon from "../../assets/img/review/arrow.png"; -import { useState } from "react"; import { Pagenation } from "./Pagenation"; export const ReviewBottm = () => { From e4fb66b4ad627554190ec92d4311808f2eca7b13 Mon Sep 17 00:00:00 2001 From: Joonhyung Choi Date: Wed, 22 Feb 2023 04:28:48 +0900 Subject: [PATCH 2/2] =?UTF-8?q?orderDetail=20=ED=8E=98=EC=9D=B4=EC=A7=80?= =?UTF-8?q?=20=ED=8D=BC=EB=B8=94=EB=A6=AC=EC=8B=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit orderDetail 페이지 퍼블리싱 진행 --- pages/orderReview.tsx | 2 - src/assets/data2.json | 28 ++++ src/assets/img/detail/check.png | Bin 0 -> 433 bytes src/assets/img/detail/heart.png | Bin 0 -> 397 bytes .../orderDetailPage/DetailContents.tsx | 156 +++++++++++++++++- src/components/orderDetailPage/DetailTop.tsx | 57 +------ .../orderDetailPage/Detailbottom.tsx | 31 ++++ src/components/orderDetailPage/Title.tsx | 59 +++++++ src/components/orderReviewPage/ReviewTop.tsx | 74 ++------- 9 files changed, 281 insertions(+), 126 deletions(-) create mode 100644 src/assets/data2.json create mode 100644 src/assets/img/detail/check.png create mode 100644 src/assets/img/detail/heart.png create mode 100644 src/components/orderDetailPage/Title.tsx diff --git a/pages/orderReview.tsx b/pages/orderReview.tsx index 9ec218d..fdc9926 100644 --- 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 ( diff --git a/src/assets/data2.json b/src/assets/data2.json new file mode 100644 index 0000000..0816056 --- /dev/null +++ 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 new file mode 100644 index 0000000000000000000000000000000000000000..5e8413bbdd716be4921ecf84588abbf14e7f5c3f GIT binary patch literal 433 zcmeAS@N?(olHy`uVBq!ia0vp^5+KaM1|%Pp+x`GjEX7WqAsj$Z!;#Vf2?- zjUdc;OxLp)$dD{?jVKAuPb(=;EJ|f4FE7{2%*!rLPAo{(%P&fw{mw>;fq_xa)5S5w zqx0;Q{o1aHGRHq&-)rt_bZ1kC1dqyWqZ>ZuhLR%P^$i!5W=CpvAC-T=C-#$>M=U4E zNK-S_LF8@$&-Xbp%U|DnU6uFq%H@@xYxckY{_4sUe+v!Ee<;W;h7Z| z^MLE_!iTXIPAxMpd|>*PRAFf%vn}a|@-OGZ;mH*(PcM9^tU2-_xUv7QNnG*|X*H)q z#|z(QXPQZyKH0FYs_pcv{3{B1K_9ZemU%DM* Y>ZQWtulAmv1PopVPgg&ebxsLQ0M0nH!2kdN literal 0 HcmV?d00001 diff --git a/src/assets/img/detail/heart.png b/src/assets/img/detail/heart.png new file mode 100644 index 0000000000000000000000000000000000000000..3ca27f9a857066e8151959203c7ed8b57e13473b GIT binary patch literal 397 zcmV;80doF{P)k%7P_Xv$FTHLB4=Yq^u{OM3j{UWovH$on1Ls)5P1L$jMlWu$ilg*FbNIjows4OM zhA0*U+1bQA6&vN$fvwoVT{LdTUcyZDOu`A)zjMisS;p~W1nfNBAIc*a=9U>3V*feB$D{eLhIMo$Tvgk_wf_zQCpXE>C~Q4gN5 z=4-g>DG1xIpu1ii#Vh7>%nNa5Bmy(c;P2pd3#`*>0KbaGT raV=z^hO5|XAa7ws^u_vE2wVf7&1pjdR+Y^v00000NkvXXu0mjfA@HPv literal 0 HcmV?d00001 diff --git a/src/components/orderDetailPage/DetailContents.tsx b/src/components/orderDetailPage/DetailContents.tsx index 90ea064..da926e7 100644 --- 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 ( - 웹사이트 제목1 + {title} - + 목적 + + {purpose} + - + 제작기간 + + + 시작일 + + {startDate} + + + + 종료일 + + {endDate} + - + - 웹페이지 미리보기 + 추가 옵션 + + + + 페이지 추가 + + + + icon + + + + + + 로그인 기능 + + + + icon + + + + + + DB + + + + icon + + + + + + + 별점 + + + + + 웹페이지 미리보기 + ); @@ -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 index 405d45e..b307104 100644 --- 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 ( - - - - reviewIcon - - 발주 상세 - - - 발주의 상세 정보를 확인하고 평가해보세요 - - + </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 index 22a1484..381ac13 100644 --- 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; +`; diff --git a/src/components/orderDetailPage/Title.tsx b/src/components/orderDetailPage/Title.tsx new file mode 100644 index 0000000..bd1f9f5 --- /dev/null +++ b/src/components/orderDetailPage/Title.tsx @@ -0,0 +1,59 @@ +import styled from "styled-components"; +import Image from "next/image"; +import { customColor } from "../customColor"; +import reviewIcon from "../../assets/img/review/review.png"; + +export const Title = ({ + pageTitle, + explain, +}: { + pageTitle: string; + explain: string; +}) => { + return ( + <TitleDiv> + <TitleTopDiv> + <ImgDiv> + <Image src={reviewIcon} alt="icon" width={30} height={30}></Image> + </ImgDiv> + <TitleH2>{pageTitle}</TitleH2> + </TitleTopDiv> + <TitleBottomDiv> + <TitleP>{explain}</TitleP> + </TitleBottomDiv> + </TitleDiv> + ); +}; + +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/orderReviewPage/ReviewTop.tsx b/src/components/orderReviewPage/ReviewTop.tsx index c928b37..f6b5e0c 100644 --- a/src/components/orderReviewPage/ReviewTop.tsx +++ b/src/components/orderReviewPage/ReviewTop.tsx @@ -1,10 +1,10 @@ import styled from "styled-components"; -import Image from "next/image"; -import { customColor } from "../customColor"; -import reviewIcon from "../../assets/img/review/review.png"; +import { Title } from "../orderDetailPage/Title"; import { useState } from "react"; export const ReviewTop = () => { + const PAGETITLE = "발주 현황 및 후기"; + const EXPLAIN = "발주 현황을 확인하고 완료된 발주에 평가를 남겨보세요"; const [buttonState, setButtonState] = useState<String>("selectButton1"); const [myOrderButtonState, setMyOrderButtonState] = useState<Boolean>(false); @@ -15,31 +15,12 @@ export const ReviewTop = () => { setButtonState("selectButton2"); }; const myOrderButton = () => { - if (myOrderButtonState === false) { - setMyOrderButtonState(true); - } else { - setMyOrderButtonState(false); - } + setButtonState("selectButton3"); }; 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} /> <ButtonDiv> <Button1 onClick={onGoingOrderButton} buttonState={buttonState}> 진행중 @@ -47,10 +28,7 @@ export const ReviewTop = () => { <Button2 onClick={finishedOrderButton} buttonState={buttonState}> 완료 </Button2> - <Button3 - onClick={myOrderButton} - myOrderButtonState={myOrderButtonState} - > + <Button3 onClick={myOrderButton} buttonState={buttonState}> 내 발주 </Button3> </ButtonDiv> @@ -66,39 +44,6 @@ const WrapperTop = styled.div` 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}; -`; - const ButtonDiv = styled.div` position: absolute; width: 300px; @@ -131,12 +76,13 @@ const Button2 = styled.button<{ buttonState: String }>` color: ${(props) => (props.buttonState === "selectButton2" ? "white" : "")}; `; -const Button3 = styled.button<{ myOrderButtonState: Boolean }>` +const Button3 = styled.button<{ buttonState: String }>` width: 100px; height: 60px; font-size: 20px; border-top-right-radius: 7px; border-bottom-right-radius: 7px; - background-color: ${(props) => (props.myOrderButtonState ? "black" : "")}; - color: ${(props) => (props.myOrderButtonState ? "white" : "")}; + background-color: ${(props) => + props.buttonState === "selectButton3" ? "black" : ""}; + color: ${(props) => (props.buttonState === "selectButton3" ? "white" : "")}; `;