orderReview 퍼블리싱1

orderReview 퍼블리싱 진행

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 (
+    <Wrapper>
+      <ReviewTop />
+      <ReviewContnets />
+      <ReviewBottm />
+    </Wrapper>
+  );
+}
+
+const Wrapper = styled.div`
+  width: 1024px;
+  height: 1800px;
+  padding: 0 12px;
+`;

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
+      }
+    ]
+  }

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 (
+    <PagenationDiv>
+      <ArrowImgDiv arrow={"left"} pageNumState={pageNumState}>
+        <ArrowA onClick={prevPageButton}>
+          <Image src={arrowIcon} alt="arrowIcon" width={36} height={36}></Image>
+        </ArrowA>
+      </ArrowImgDiv>
+      <PageNumberDiv>
+        <PageNumberP>{pageNumState}</PageNumberP>
+      </PageNumberDiv>
+      <ArrowImgDiv arrow={"right"} pageNumState={pageNumState}>
+        <ArrowA onClick={nextPageButton}>
+          <Image src={arrowIcon} alt="arrowIcon" width={36} height={36}></Image>
+        </ArrowA>
+      </ArrowImgDiv>
+    </PagenationDiv>
+  );
+};
+
+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;
+`;

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 (
+    <BottomWrapper>
+      <Pagenation />
+    </BottomWrapper>
+  );
+};
+
+const BottomWrapper = styled.div`
+  height: 323px;
+  width: 100%;
+  display: flex;
+  align-items: center;
+`;

src/components/orderReviewPage/ReviewContents.tsx

@@ -0,0 +1,48 @@
+import styled from "styled-components";
+
+export const ReviewContnets = () => {
+  return (
+    <WrapperContents>
+      <ContentDiv>
+        <PreviewImg />
+        <OrderTitleH2>#4 웹사이트 제목</OrderTitleH2>
+        <OrderInfoP>사용 목적 : </OrderInfoP>
+        <OrderInfoP>제작 기간 : </OrderInfoP>
+        <OrderInfoP>진행도(%) : </OrderInfoP>
+      </ContentDiv>
+    </WrapperContents>
+  );
+};
+
+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;
+`;

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<String>("selectButton1");
+  const [myOrderButtonState, setMyOrderButtonState] = useState<Boolean>(false);
+
+  const onGoingOrderButton = () => {
+    setButtonState("selectButton1");
+  };
+  const finishedOrderButton = () => {
+    setButtonState("selectButton2");
+  };
+  const myOrderButton = () => {
+    if (myOrderButtonState === false) {
+      setMyOrderButtonState(true);
+    } else {
+      setMyOrderButtonState(false);
+    }
+  };
+
+  return (
+    <WrapperTop>
+      <TitleDiv>
+        <TitleTopDiv>
+          <ImgDiv>
+            <Image
+              src={reviewIcon}
+              alt="reviewIcon"
+              width={30}
+              height={30}
+            ></Image>
+          </ImgDiv>
+          <TitleH2>발주 현황 및 후기</TitleH2>
+        </TitleTopDiv>
+        <TitleBottomDiv>
+          <TitleP>발주 현황을 확인하고 완료된 발주에 평가를 남겨보세요</TitleP>
+        </TitleBottomDiv>
+      </TitleDiv>
+      <ButtonDiv>
+        <Button1 onClick={onGoingOrderButton} buttonState={buttonState}>
+          진행중
+        </Button1>
+        <Button2 onClick={finishedOrderButton} buttonState={buttonState}>
+          완료
+        </Button2>
+        <Button3
+          onClick={myOrderButton}
+          myOrderButtonState={myOrderButtonState}
+        >
+          내 발주
+        </Button3>
+      </ButtonDiv>
+    </WrapperTop>
+  );
+};
+
+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" : "")};
+`;

src/types/images.d.ts

@@ -0,0 +1,3 @@
+declare module "*.png";
+declare module "*.jpg";
+declare module "*.jpeg";

tsconfig.json

@@ -16,5 +16,6 @@
     "incremental": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules"],
+  "typeRoots": ["src/types"]
 }