0524 뜯어고치기 직전 코드

likelistpage

import React, { useState, useEffect } from "react";
import { useNavigate } from "react-router-dom";
import styled from "styled-components";
import axios from "axios";
import { MdOutlineKeyboardArrowRight } from "react-icons/md";
import { ButtonDark } from "@components/Common/Button";
import Pagination from "@components/AlcoholPage/Pagination";
import PriceDisplay from "@components/Common/PriceDisplay";

//components
interface Likeitem {
  titleKor: string;
  price: number;
  quantity: number;
  capacity: number;
  reviewRating: number;
  itemId: number;
  checked: boolean;
  profile: string;
}

const TotalStyled = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f7f7;
`;
const PageTitle = styled.div`
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 30px;
  height: 100px;
`;

const LikepageContainer = styled.div`
  width: 100vw;
  height: 100vh;
  max-width: 1250px;
  margin-top: 150px;
  display: flex;
  flex-direction: column;
`;

//누구누구님 등급써있는부분
const LikepageHeadStyled = styled.div`
  border: 3px solid #dedede;
  font-size: 18px;
  color: #181818;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100px;
  padding-left: 10px;
  font-weight: 600;
`;

//찜리스트 나오는 부분
const LikepageMainStyled = styled.div`
  > * {
    font-size: 18px;
  }
`;
const HeadTable = styled.div`
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding-bottom: 10px;
  padding-left: 10px;
  font-weight: 600;
  line-height: 25px;
`;
const TotalTableStyled = styled.div`
  border: 3px solid #dedede;
  flex-grow: 1;
`;
const StyledTable = styled.table`
  font-size: 18px;
  width: 1240px;
  height: 300px;
`;

const StyledTh = styled.th`
  padding: 8px;
`;

const StyledTd = styled.td`
  padding: 8px;
  text-align: center;
  vertical-align: middle;

  .button-container {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  > img {
    width: 50%;
    height: 80px;
    cursor: pointer;
  }
  :nth-child(2) {
    cursor: pointer;
  }
`;

//맨밑 페이지네이션부분
const PigStyled = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-bottom: 10px;
`;

const LikePage = () => {
  const [likelist, setLikelist] = useState<Likeitem[]>([]);
  const [totalLength, setTotalLength] = useState<number>(0);
  const [currentPage, setCurrentPage] = useState<number>(1);
  const [userName, setUserName] = useState<string>("");
  const navigate = useNavigate();

  const totalPages = Math.ceil(totalLength / 5);
  const paginationData = likelist.slice(5 * (currentPage - 1), 5 * currentPage);

  const LikeGetHandle = () => {
    const access_token = `Bearer ${localStorage.getItem("authToken")}`;
    axios
      .get(`${process.env.REACT_APP_API_URL}/members/favorite`, {
        headers: {
          "Content-Type": "application/json",
          Authorization: access_token,
          "ngrok-skip-browser-warning": "69420",
        },
      })
      .then((res) => {
        setLikelist(res.data.data);
        setTotalLength(res.data.data.length);
      })
      .catch((err) => console.error(err));
  };

  useEffect(() => {
    LikeGetHandle();
  }, []);

  const handleDeleteBtn = (itemId: number) => {
    const access_token = `Bearer ${localStorage.getItem("authToken")}`;
    axios
      .delete(`${process.env.REACT_APP_API_URL}/items/${itemId}/favorite`, {
        headers: {
          "Content-Type": "application/json",
          Authorization: access_token,
          "ngrok-skip-browser-warning": "69420",
        },
      })
      .then((res) => {
        LikeGetHandle();
      })
      .catch((err) => console.error(err));
  };

  const handleDetailBtn = (itemId: number) => {
    navigate(`/alcohol/detail/${itemId}`);
  };

  const handleCartBtn = (itemId: number) => {
    const access_token = `Bearer ${localStorage.getItem("authToken")}`;
    axios
      .post(
        `${process.env.REACT_APP_API_URL}/cart`,
        {
          itemId: itemId,
          quantity: 1,
        },
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: access_token,
            "ngrok-skip-browser-warning": "69420",
          },
        },
      )
      .then((res) => navigate("/cart"))
      .catch((err) => console.error(err));
  };

  useEffect(() => {
    const access_token = `Bearer ${localStorage.getItem("authToken")}`;
    axios
      .get(`${process.env.REACT_APP_API_URL}/members`, {
        headers: {
          "Content-Type": "application/json",
          Authorization: access_token,
          "ngrok-skip-browser-warning": "69420",
        },
      })
      .then((res) => setUserName(res.data.data.displayName))
      .catch((err) => console.error(err));
  }, []);

  return (
    <>
      <TotalStyled>
        <LikepageContainer>
          <PageTitle>
            <div>My Page</div>
            <MdOutlineKeyboardArrowRight size="20px" />
            <div>찜리스트</div>
          </PageTitle>
          <LikepageHeadStyled>
            <p>{userName}님의 등급은 Green입니다.</p>
          </LikepageHeadStyled>
          <LikepageMainStyled>
            <HeadTable>
              <p>찜리스트</p>
              <p>총 {likelist.length}건</p>
            </HeadTable>
            <TotalTableStyled>
              <StyledTable>
                <thead>
                  <tr>
                    <StyledTh></StyledTh>
                    <StyledTh>상품 목록</StyledTh>
                    <StyledTh>가 격(원)</StyledTh>
                    <StyledTh></StyledTh>
                    <StyledTh></StyledTh>
                  </tr>
                </thead>
                {paginationData.length !== 0 ? (
                  <tbody>
                    {paginationData.map((el: Likeitem, idx: number) => {
                      return (
                        <tr key={idx}>
                          <StyledTd>
                            <img src={el.profile} onClick={() => handleDetailBtn(el.itemId)} />
                          </StyledTd>
                          <StyledTd onClick={() => handleDetailBtn(el.itemId)}>{el.titleKor}</StyledTd>
                          <StyledTd>
                            <PriceDisplay price={el.price} />
                          </StyledTd>
                          <StyledTd>
                            <div className="button-container">
                              <ButtonDark
                                width="100px"
                                height="50%"
                                onClick={() => {
                                  handleCartBtn(el.itemId);
                                }}
                              >
                                장바구니
                              </ButtonDark>
                            </div>
                          </StyledTd>
                          <StyledTd>
                            <div className="button-container">
                              <ButtonDark
                                width="100px"
                                height="50%"
                                onClick={() => {
                                  handleDeleteBtn(el.itemId);
                                }}
                              >
                                삭제
                              </ButtonDark>
                            </div>
                          </StyledTd>
                        </tr>
                      );
                    })}
                  </tbody>
                ) : (
                  <div>찜리스트가 없습니다.</div>
                )}
              </StyledTable>
            </TotalTableStyled>
          </LikepageMainStyled>
          <PigStyled>
            <Pagination
              currentPage={currentPage}
              setCurrentPage={setCurrentPage}
              itemsPerPage={5}
              totalData={likelist.length}
            />
          </PigStyled>
        </LikepageContainer>
      </TotalStyled>
    </>
  );
};

export default LikePage;

orderlistpage

import React, { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";
import axios from "axios";
import styled from "styled-components";
import { MdOutlineKeyboardArrowRight } from "react-icons/md";
import { ButtonDark } from "@components/Common/Button";
import Pagination from "@components/AlcoholPage/Pagination";

interface Orderitem {
  orderId: number;
  orderStatus: string;
  orderedAt: string;
  pickupDate: string;
  titleKor: string;
  quantity: number;
  itemId: number;
}

interface OrderTableProps {
  orderlist: Orderitem[];
}

interface ReveiwUpdateProps {
  itemId: number;
}

const TotalStyled = styled.div`
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f7f7;
`;

const OrderContainer = styled.div`
  width: 100vw;
  height: 100vh;
  max-width: 1250px;
  margin-top: 150px;
  display: flex;
  flex-direction: column;
`;

const PageTitle = styled.div`
  height: 100px;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-right: 30px;
`;

const OrderpageHeadStyled = styled.div`
  border: 2px solid #dedede;
  font-size: 18px;
  display: flex;
  flex-direction: row;
  align-items: center;
  padding-left: 10px;
  height: 100px;
  color: #181818;
  font-weight: 600;
`;

const OrderpageMainStyled = styled.div`
  height: 100px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  font-size: 18px;
  font-weight: 600;
  padding-bottom: 10px;
  padding-left: 10px;
  line-height: 25px;
`;

const PeriodStyled = styled.div`
  border: 2px solid #dedede;
  height: 120px;
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  padding-left: 170px;
  padding-right: 170px;
  > * {
    margin-left: 20px;
  }
  > input {
    height: 30px;
    width: 250px;
  }
  > p {
    font-weight: 600;
  }
`;

const OrderlistStyled = styled.div`
  border: 2px solid #dedede;
  margin-top: 10px;
  margin-bottom: 10px;
  flex-grow: 1;
  > p {
    font-weight: 600;
    padding-left: 10px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
`;

const StyledTable = styled.table`
  width: 1240px;
  height: 500px;
  font-size: 18px;
`;

const StyledTh = styled.th`
  padding: 8px;
  font-weight: 600;
`;

const StyledTd = styled.td`
  padding: 8px;
  text-align: center;
  vertical-align: middle;
  .button-container {
    display: flex;
    justify-content: center;
    width: 100%;
  }
  :nth-child(3) {
    cursor: pointer;
  }
`;

const PigStyled = styled.div`
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-bottom: 10px;
`;

const OrderTable = ({ orderlist }: OrderTableProps) => {
  const navigate = useNavigate();

  const handleDetailBtn = (itemId: number) => {
    navigate(`/alcohol/detail/${itemId}`);
  };

  //후기연결
  const ReviewWindow = (itemId: number) => {
    const reviewCreate: ReveiwUpdateProps = {
      itemId,
    };
    navigate(`/review/edit/${itemId}`, {
      state: { reviewCreate },
    });
  };
  const realOrderList = orderlist;

  const OrderPatchHandle = (orderId: number) => {
    const access_token = `Bearer ${localStorage.getItem("authToken")}`;
    axios
      .patch(
        `${process.env.REACT_APP_API_URL}/order/${orderId}/cancel`,
        {},
        {
          headers: {
            "Content-Type": "application/json",
            Authorization: access_token,
            "ngrok-skip-browser-warning": "69420",
          },
        },
      )
      .then((res) => {
        window.location.reload();
      })
      .catch((err) => console.error(err));
  };

  return (
    <>
      <StyledTable>
        <thead>
          <tr>
            <StyledTh>주문날짜</StyledTh>
            <StyledTh>픽업날짜</StyledTh>
            <StyledTh>구매목록</StyledTh>
            <StyledTh>수량(개)</StyledTh>
            <StyledTh>상태</StyledTh>
            <StyledTh>주문취소</StyledTh>
            <StyledTh>후기작성</StyledTh>
          </tr>
        </thead>
        <tbody>
          {orderlist.map((el: Orderitem, idx: number) => {
            return (
              <tr key={idx}>
                <StyledTd>{el.orderedAt}</StyledTd>
                <StyledTd>{el.pickupDate}</StyledTd>
                <StyledTd onClick={() => handleDetailBtn(el.itemId)}>{el.titleKor}</StyledTd>
                <StyledTd>{el.quantity}</StyledTd>
                <StyledTd>{el.orderStatus}</StyledTd>
                <StyledTd>
                  {el.orderStatus === "픽업 완료" || el.orderStatus === "주문 취소" ? null : (
                    <div className="button-container">
                      <ButtonDark
                        width="100px"
                        height="50%"
                        onClick={() => {
                          OrderPatchHandle(el.orderId);
                        }}
                        disabled={el.orderStatus === "픽업 완료" || el.orderStatus === "주문 취소"}
                      >
                        취소
                      </ButtonDark>
                    </div>
                  )}
                </StyledTd>
                <StyledTd>
                  {el.orderStatus !== "픽업 완료" ? null : (
                    <div className="button-container">
                      <ButtonDark
                        width="100px"
                        height="50%"
                        onClick={() => ReviewWindow(el.itemId)}
                        disabled={el.orderStatus !== "픽업 완료"}
                      >
                        후기
                      </ButtonDark>
                    </div>
                  )}
                </StyledTd>
              </tr>
            );
          })}
        </tbody>
      </StyledTable>
    </>
  );
};
const OrderPage = () => {
  const [orderlist, setOrderlist] = useState<Orderitem[]>([]);
  const [totalLength, setTotalLength] = useState<number>(0); //페이지네이션관련
  const [currentPage, setCurrentPage] = useState<number>(1); //페이지네이션관련
  const [choiceFronDay, setChoiceFronDay] = useState<string>(""); //조회할때 선택하는 날짜앞부분
  const [choiceBackDay, setChoiceBackDay] = useState<string>(""); //조회할때 선택하는 날짜뒷부분
  const [filterlist, setFilterlist] = useState<Orderitem[]>([]); //정신없는 데이터를 새로 다듬은것.
  const [userName, setUserName] = useState<string>("");
  const [pageNumber, setPageNumber] = useState<number>(1);
  //페이지네이션관련
  const totalPg = Math.ceil(totalLength / 5);
  const pageData = filterlist.slice(5 * (currentPage - 1), 5 * currentPage);
  //조회버튼관련
  const Search = () => {
    const newData = orderlist.slice();
    const first = new Date(choiceFronDay);
    const second = new Date(choiceBackDay);
    setFilterlist(newData.filter((el) => new Date(el.orderedAt) >= first && new Date(el.orderedAt) <= second));
    setPageNumber(1);
  };

  useEffect(() => {
    const access_token = `Bearer ${localStorage.getItem("authToken")}`;
    axios
      .get(`${process.env.REACT_APP_API_URL}/members/orders`, {
        headers: {
          "Content-Type": "application/json",
          Authorization: access_token,
          "ngrok-skip-browser-warning": "69420",
        },
      })
      .then((res) => {
        const data = res.data.data.slice().sort((a: any, b: any) => +new Date(b.orderedAt) - +new Date(a.orderedAt));
        const newData = [];
        for (let i = 0; i < data.length; i++) {
          for (let j = 0; j < data[i].itemOrders.length; j++) {
            const singleData = data[i].itemOrders[j];
            singleData["orderedAt"] = data[i].orderedAt;
            singleData["orderStatus"] = data[i].orderStatus;
            singleData["pickupDate"] = data[i].pickupDate;
            singleData["orderId"] = data[i].orderId;
            newData.push(singleData);
          }
        }
        setOrderlist(newData);
        setFilterlist(newData);
      })
      .catch((err) => console.error(err));

    axios
      .get(`${process.env.REACT_APP_API_URL}/members`, {
        headers: {
          "Content-Type": "application/json",
          Authorization: access_token,
          "ngrok-skip-browser-warning": "69420",
        },
      })
      .then((res) => setUserName(res.data.data.displayName))
      .catch((err) => console.error(err));
  }, []);

  return (
    <>
      <TotalStyled>
        <OrderContainer>
          <PageTitle>
            <div>My Page</div>
            <MdOutlineKeyboardArrowRight size="20px" />
            <div>주문내역</div>
          </PageTitle>
          <OrderpageHeadStyled>
            <p>{userName}님의 등급은 Green입니다.</p>
          </OrderpageHeadStyled>
          <OrderpageMainStyled>
            <p>주문내역</p>
            <p>총 {filterlist.length}건</p>
          </OrderpageMainStyled>
          <PeriodStyled>
            <p>주문기간조회</p>
            <input type="date" className="FrontInput" onChange={(e) => setChoiceFronDay(e.target.value)}></input>
            <p>~</p>
            <input type="date" className="BackInput" onChange={(e) => setChoiceBackDay(e.target.value)}></input>
            <ButtonDark width="120px" height="70%" onClick={Search}>
              조 회
            </ButtonDark>
          </PeriodStyled>
          <OrderlistStyled>
            {filterlist.length !== 0 ? <OrderTable orderlist={pageData}></OrderTable> : <div>주문내역이 없습니다.</div>}
          </OrderlistStyled>
          <PigStyled>
            <Pagination
              currentPage={currentPage}
              setCurrentPage={setCurrentPage}
              itemsPerPage={5}
              totalData={filterlist.length}
            ></Pagination>
          </PigStyled>
        </OrderContainer>
      </TotalStyled>
    </>
  );
};

export default OrderPage;