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 0000000..905ce7f Binary files /dev/null and b/src/assets/img/review/arrow.png differ diff --git a/src/assets/img/review/review.png b/src/assets/img/review/review.png new file mode 100644 index 0000000..b2f7f16 Binary files /dev/null and b/src/assets/img/review/review.png differ diff --git a/src/components/orderReviewPage/Pagenation.tsx b/src/components/orderReviewPage/Pagenation.tsx new file mode 100644 index 0000000..8abbba4 --- /dev/null +++ b/src/components/orderReviewPage/Pagenation.tsx @@ -0,0 +1,66 @@ +import styled from "styled-components"; +import Image from "next/image"; +import arrowIcon from "../../assets/img/review/arrow.png"; +import { useState } from "react"; + +export const Pagenation = () => { + 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"] }