From 7225cc2f055deb9c0dd8f09fcb8285105a6b15a2 Mon Sep 17 00:00:00 2001 From: Joonhyung Choi Date: Mon, 13 Feb 2023 05:08:22 +0900 Subject: [PATCH] =?UTF-8?q?orderReview=20=ED=8D=BC=EB=B8=94=EB=A6=AC?= =?UTF-8?q?=EC=8B=B11?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit orderReview 퍼블리싱 진행 --- pages/orderReview.tsx | 28 ++++ src/assets/data.json | 39 +++++ src/assets/img/review/arrow.png | Bin 0 -> 313 bytes src/assets/img/review/review.png | Bin 0 -> 1551 bytes src/components/orderReviewPage/Pagenation.tsx | 66 ++++++++ .../orderReviewPage/ReviewBottom.tsx | 20 +++ .../orderReviewPage/ReviewContents.tsx | 48 ++++++ src/components/orderReviewPage/ReviewTop.tsx | 142 ++++++++++++++++++ src/types/images.d.ts | 3 + tsconfig.json | 3 +- 10 files changed, 348 insertions(+), 1 deletion(-) create mode 100644 pages/orderReview.tsx create mode 100644 src/assets/data.json create mode 100644 src/assets/img/review/arrow.png create mode 100644 src/assets/img/review/review.png create mode 100644 src/components/orderReviewPage/Pagenation.tsx create mode 100644 src/components/orderReviewPage/ReviewBottom.tsx create mode 100644 src/components/orderReviewPage/ReviewContents.tsx create mode 100644 src/components/orderReviewPage/ReviewTop.tsx create mode 100644 src/types/images.d.ts diff --git a/pages/orderReview.tsx b/pages/orderReview.tsx new file mode 100644 index 0000000..9ec218d --- /dev/null +++ b/pages/orderReview.tsx @@ -0,0 +1,28 @@ +import styled from "styled-components"; +import orderData from "../src/assets/data.json"; +import { ReviewTop } from "../src/components/orderReviewPage/ReviewTop"; +import { ReviewContnets } from "../src/components/orderReviewPage/ReviewContents"; +import { ReviewBottm } from "../src/components/orderReviewPage/ReviewBottom"; +export default function OrderReview() { + // "id": 1, + // "title": "1번 웹사이트", + // "purpose": "상품 판매", + // "period": "6", + // "progress": 100 + + console.log(orderData.data); + + return ( + + + + + + ); +} + +const Wrapper = styled.div` + width: 1024px; + height: 1800px; + padding: 0 12px; +`; diff --git a/src/assets/data.json b/src/assets/data.json new file mode 100644 index 0000000..1704c4a --- /dev/null +++ b/src/assets/data.json @@ -0,0 +1,39 @@ +{ + "data" : [ + { + "id": 1, + "title": "1번 웹사이트", + "purpose": "상품 판매", + "period": "6", + "progress": 100 + }, + { + "id": 2, + "title": "2번 웹사이트", + "purpose": "회사 소개", + "period": "3", + "progress": 70 + }, + { + "id": 3, + "title": "3번 웹사이트", + "purpose": "상품 판매", + "period": "4", + "progress": 60 + }, + { + "id": 4, + "title": "4번 웹사이트", + "purpose": "제품 홍보", + "period": "1", + "progress": 20 + }, + { + "id": 5, + "title": "5번 웹사이트", + "purpose": "상품 판매", + "period": "10", + "progress": 40 + } + ] + } \ No newline at end of file diff --git a/src/assets/img/review/arrow.png b/src/assets/img/review/arrow.png new file mode 100644 index 0000000000000000000000000000000000000000..905ce7f821256b1fe179041d19777c259361d6b1 GIT binary patch literal 313 zcmeAS@N?(olHy`uVBq!ia0vp^3LwnE1|*BCs=fdzmSQK*5Dp-y;YjHK@;M7UB8!3a z8xUr!)F|8wWJs2{MwA5SrERJ6_0#W5tJ z_3d@rJSImThllziA~B3yRZgx)YafLCnZt1F4r8CgB&|iRkC+?|DlAaQ*|=LQNvHSD z+3MsdzgBhVYf!b{lBM|mmZq^qp#`k z54L?Pr1|1G>l}9HS^QCHyuV3bFX~kCDfvLA*;97En4%k~;8LT~ipq@n3hZmg<1g;;NdWhMHSNc4?0cO;%-dqOi0<7f`{;z>H=?+ek?S^4bg=guvzBC zE3sH;q*nH};QE3wWugm@W^m*u+==~4v^@nkVs!@li?s1dq_GQLYhkz#Hw#_4D#qek z{Mf>mC74i_(Q$aAg~8{9U#U~oXQiBBIYp%J?9Y7--U=xNtT8=Qd+5x?qtLR+sx zvvR>@0n( z>KE1)nHVkn!fD-p&oaF(nMuMfGUof2!YtB~>ryJ{!=a_STt52=tIk*qH?>mU1HYsw z59Mf|mvh9Y$luW2O!5AR(!e}F(s)EXmWS&L)o+G&7nYji8!8&;`s*_qJ_3gcV@Vd) z3S&-x#`0O&11oF)*3&O+xPE9%S@e`^wYR79yt>CFRC{n>f;m{!q`?uq%u>CEYehu$@jeRh?{=owV zx6)SZo5R=??VS!?l*3jYCJSc;jrJa|FSIgJU`YXEXA1B0)<}J6@&oSjUvI2}#Syz} z2L5w;ieuMQ=uoG*OgzRJ2~JE=D$)anE3cKjy&t` z686xIY${-24Bk~N2atyz9EZPi>c#dl;}h{i!y*lEit2-hBXM#8z37;hw)iNrDCy*& zS(>dxd>dLMx$(Y`_p6#O@IhIXb>U}&(^y3k3V#cms%zyt56H?kVRl*||NEaxmoPXq zHb87@%)&;@Z_A?&lZelcBjNC~6cVh6JfGQVM}~?-NGmn6ui=sQs+>d^y<^NydH%m5 z5eC87+W-6l^_?YTVDcP@WRvjm$>4z~ET6 zH&d7sQ5cX94W2EAJJ%Q-$GTQZX;)@;;A`PF$Vee}dE?VoN(r8gC=ST4xUd?3OC=FL z#%lEc`7Fv~@Nz`CUS1R~9Sm1468HP!tQG7e+!Slp2z|mwQ?W$LP|_`aO=gRn_mUFa zqxlu}9m3N2ZX8mI`|Z&!yyr1L7Z$B_j<6_dwPV|kcZ3hCj#d2oq#`6jw_ls$+h(<# zXi=vQz*9Iaht5V}$Ji?jNPWT}TIT)0slti&xtd?Pnk#&a*%qU4sW6we>J7t59&9)8 zMke4E>358WlRT*WZTi1V5LR2uhe4pRcmDFK0*^5Z_u+G`XN@Xli!j?vpBl8p? zpMQ*yaq1QZsByyiLz!K2op7G90 { + const [pageNumState, setPageNumState] = useState(1); + const prevPageButton = () => { + setPageNumState(pageNumState - 1); + }; + + const nextPageButton = () => { + setPageNumState(pageNumState + 1); + }; + + return ( + + + + arrowIcon + + + + {pageNumState} + + + + arrowIcon + + + + ); +}; + +const PagenationDiv = styled.div` + height: 36px; + width: 155px; + margin: 0 auto; +`; + +const ArrowImgDiv = styled.div<{ arrow: String; pageNumState: Number }>` + width: 36px; + height: 100%; + float: left; + transform: ${(props) => (props.arrow === "right" ? "rotate(180deg)" : "")}; + cursor: pointer; + visibility: ${(props) => + props.arrow === "left" && props.pageNumState === 1 ? "hidden" : ""}; +`; + +const ArrowA = styled.a``; + +const PageNumberDiv = styled.div` + width: 83px; + height: 100%; + float: left; +`; + +const PageNumberP = styled.p` + display: block; + width: 100%; + height: 100%; + text-align: center; + font-size: 30px; + line-height: 36px; +`; diff --git a/src/components/orderReviewPage/ReviewBottom.tsx b/src/components/orderReviewPage/ReviewBottom.tsx new file mode 100644 index 0000000..68f4419 --- /dev/null +++ b/src/components/orderReviewPage/ReviewBottom.tsx @@ -0,0 +1,20 @@ +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 = () => { + return ( + + + + ); +}; + +const BottomWrapper = styled.div` + height: 323px; + width: 100%; + display: flex; + align-items: center; +`; diff --git a/src/components/orderReviewPage/ReviewContents.tsx b/src/components/orderReviewPage/ReviewContents.tsx new file mode 100644 index 0000000..1b8068a --- /dev/null +++ b/src/components/orderReviewPage/ReviewContents.tsx @@ -0,0 +1,48 @@ +import styled from "styled-components"; + +export const ReviewContnets = () => { + return ( + + + + #4 웹사이트 제목 + 사용 목적 : + 제작 기간 : + 진행도(%) : + + + ); +}; + +const WrapperContents = styled.div` + display: flex; + width: 100%; + height: 1200px; + position: relative; +`; + +const ContentDiv = styled.div` + width: 100%; + height: 300px; + border-top: 1px solid black; + border-bottom: 1px solid black; + padding: 50px 0 50px 50px; +`; + +const PreviewImg = styled.div` + width: 147px; + height: 200px; + background-color: #9c9090; + margin-right: 34px; + float: left; +`; + +const OrderTitleH2 = styled.h2` + font-size: 27px; + line-height: 50px; +`; + +const OrderInfoP = styled.p` + font-size: 20px; + line-height: 50px; +`; diff --git a/src/components/orderReviewPage/ReviewTop.tsx b/src/components/orderReviewPage/ReviewTop.tsx new file mode 100644 index 0000000..c928b37 --- /dev/null +++ b/src/components/orderReviewPage/ReviewTop.tsx @@ -0,0 +1,142 @@ +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 ReviewTop = () => { + const [buttonState, setButtonState] = useState("selectButton1"); + const [myOrderButtonState, setMyOrderButtonState] = useState(false); + + const onGoingOrderButton = () => { + setButtonState("selectButton1"); + }; + const finishedOrderButton = () => { + setButtonState("selectButton2"); + }; + const myOrderButton = () => { + if (myOrderButtonState === false) { + setMyOrderButtonState(true); + } else { + setMyOrderButtonState(false); + } + }; + + 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}; +`; + +const ButtonDiv = styled.div` + position: absolute; + width: 300px; + height: 60px; + border: 1px solid black; + border-radius: 7px; + bottom: 15px; + right: 0; +`; + +const Button1 = styled.button<{ buttonState: String }>` + width: 99px; + height: 60px; + font-size: 20px; + border-right: 1px solid black; + border-top-left-radius: 7px; + border-bottom-left-radius: 7px; + background-color: ${(props) => + props.buttonState === "selectButton1" ? "black" : ""}; + color: ${(props) => (props.buttonState === "selectButton1" ? "white" : "")}; +`; + +const Button2 = styled.button<{ buttonState: String }>` + width: 99px; + height: 60px; + font-size: 20px; + border-right: 1px solid black; + background-color: ${(props) => + props.buttonState === "selectButton2" ? "black" : ""}; + color: ${(props) => (props.buttonState === "selectButton2" ? "white" : "")}; +`; + +const Button3 = styled.button<{ myOrderButtonState: Boolean }>` + 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" : "")}; +`; diff --git a/src/types/images.d.ts b/src/types/images.d.ts new file mode 100644 index 0000000..d2526b8 --- /dev/null +++ b/src/types/images.d.ts @@ -0,0 +1,3 @@ +declare module "*.png"; +declare module "*.jpg"; +declare module "*.jpeg"; diff --git a/tsconfig.json b/tsconfig.json index 99710e8..ec8e218 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -16,5 +16,6 @@ "incremental": true }, "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], - "exclude": ["node_modules"] + "exclude": ["node_modules"], + "typeRoots": ["src/types"] }