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 navigate = useNavigate();
  const [userName, setUserName] = useState<string>("");

  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", // ngrok cors 에러
        },
      })

      .then((res) => {
        setLikelist(res.data.data);
        setTotalLength(res.data.data.length);
      })
      .catch((err) => console.log(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((error) => console.log(error));
  };
  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", // ngrok cors 에러
          },
        },
      )
      .then((res) => navigate("/cart"))
      .catch((err) => console.log(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>
                <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>
              </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";
import Modal from "@layout/Header/Logoutmodal";

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 realOrderList = orderlist;

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

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

  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.log(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 = () => {
    console.log("a");
    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.log(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={pageNumber}
              setCurrentPage={setPageNumber}
              itemsPerPage={5}
              totalData={filterlist.length}
            ></Pagination>
          </PigStyled>
        </OrderContainer>
      </TotalStyled>
    </>
  );
};

export default OrderPage;

map

import React, { useEffect } from "react";

declare global {
  interface Window {
    kakao: any;
    closeOverlay: () => void;
  }
}
interface Shopitem {
  address: string;
  choice: boolean;
  comment: string;
  lat: number;
  lng: number;
  marketId: number;
  name: string;
  phone: string;
  workTime: string;
}
interface ShopProps {
  shoplist: Shopitem[];
  setSelect: React.Dispatch<React.SetStateAction<Shopitem | null>>;
}

const MapComponent = ({ shoplist, setSelect }: ShopProps) => {
  useEffect(() => {
    const container = document.getElementById("map");
    const options = {
      center: new window.kakao.maps.LatLng(37.32569664033685, 127.10734442799804), //죽전역
      level: 8,
    };
    const map = new window.kakao.maps.Map(container, options);

    //사용자 현재위치 정보
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function (position) {
        const lat = position.coords.latitude,
          lon = position.coords.longitude;

        const locPosition = new window.kakao.maps.LatLng(lat, lon),
          message = "<div>현재위치</div>";

        displayMarker(locPosition, message);
      });
    } else {
      const locPosition = new window.kakao.maps.LatLng(37.57022168346011, 126.98314742271637), //종각역
        message = "<div>여기아니에요</div>";

      displayMarker(locPosition, message);
    }

    function displayMarker(locPosition: any, message: any) {
      const marker = new window.kakao.maps.Marker({
        map: map,
        position: locPosition,
      });
      const iwContent = message,
        iwRemoveable = true;

      const infowindow = new window.kakao.maps.InfoWindow({
        content: iwContent,
        removable: iwRemoveable,
      });
      infowindow.open(map, marker);
      map.setCenter(locPosition);
    }

    shoplist.forEach((el: any) => {
      const marker = new window.kakao.maps.Marker({
        map: map,
        position: new window.kakao.maps.LatLng(el.lat, el.lng),
        data: el.data,
      });

      const content =
        '<div className="overlayContainer" style="background-color: red;">' +
        `<div style="color: black;" >${el.name}</div>` +
        `<div className="shopPhone">${el.phone}</div>` +
        "</div>";

      const customOverlay = new window.kakao.maps.CustomOverlay({
        content: content,
        position: new window.kakao.maps.LatLng(el.lat, el.lng),
      });

      window.kakao.maps.event.addListener(marker, "mouseover", () => {
        customOverlay.setMap(map);
      });

      window.kakao.maps.event.addListener(marker, "mouseout", () => {
        customOverlay.setMap(null);
      });
      window.kakao.maps.event.addListener(marker, "click", () => {
        setSelect(el);
      });
    });
  }, [shoplist]);

  return <div id="map" style={{ width: "800px", height: "500px" }}></div>;
};

export default MapComponent;

place

import React, { useState, useEffect, lazy, Suspense } from "react";
import { useNavigate, useLocation } from "react-router-dom";
import axios from "axios";
import styled from "styled-components";
import { ButtonDark } from "@components/Common/Button";
import { useDispatch } from "react-redux";
import { setMarker } from "../redux/slice/store";
const MapComponent = lazy(() => import("./Map"));

const TotalStyled = styled.section`
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #f7f7f7;
`;
const PlaceContainer = styled.div`
  /* border: 5px solid black; */
  width: 100vw;
  height: 100vh;
  max-width: 1250px;
  margin-top: 150px; //호버됬을때가 150이래서 일단 150으로 설정함.
  display: flex;
  flex-direction: column;
`;

//지도부분
const MapBodyStyled = styled.div`
  display: flex;
  flex-direction: column;
  flex-grow: 6.5;
  justify-content: center;
  align-items: center;
`;

//지도제목
const MapArticleStyled = styled.div`
  border: 3px solid #dedede;
  margin-bottom: 80px;
  font-size: 18px;
  width: 300px;
  height: 50px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  line-height: 25px;
  font-weight: 600;
`;

const MapBottomStyled = styled.div`
  flex-grow: 1;
  display: flex;
  flex-grow: 3.5;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px;
`;

interface Shopitem {
  address: string;
  choice: boolean;
  comment: string;
  lat: number;
  lng: number;
  marketId: number;
  name: string;
  phone: string;
  workTime: string;
}

const Place = () => {
  const dispatch = useDispatch();
  const [shoplist, setShoplist] = useState<Shopitem[]>([]);
  const navigate = useNavigate();
  const [select, setSelect] = useState<Shopitem | null>(null);
  const location = useLocation();
  const items = location.state ? location.state.items : [];

  const King = async () => {
    await axios
      .get(`${process.env.REACT_APP_API_URL}/marts`, {
        headers: {
          "Content-Type": "application/json",
          Authorization: localStorage.getItem("authToken"),
          "ngrok-skip-browser-warning": "69420", // ngrok cors 에러
        },
      })
      .then((res) => {
        setShoplist(res.data.content);
      })
      .catch((err) => console.log(err));
  };
  useEffect(() => {
    King();
  }, []);

  const handleSelect = () => {
    dispatch(setMarker(select));
    navigate("/payment", { state: { items: items } });
  };

  return (
    <>
      <TotalStyled>
        <PlaceContainer>
          <MapBodyStyled>
            <MapArticleStyled>
              픽업 매장을 선택하세요.
              {select?.name === null ? null : <p>{select?.name}</p>}
            </MapArticleStyled>
            <Suspense fallback={<div>loading</div>}>
              <MapComponent shoplist={shoplist} setSelect={setSelect} />
            </Suspense>
          </MapBodyStyled>
          <MapBottomStyled>
            <ButtonDark width="350px" height="50%" onClick={handleSelect}>
              선택
            </ButtonDark>
          </MapBottomStyled>
        </PlaceContainer>
      </TotalStyled>
    </>
  );
};

export default Place;

store

import { createSlice, configureStore } from "@reduxjs/toolkit";

const loginState = createSlice({
  name: "login",
  initialState: {
    token: null,
    isLogin: false,
  },
  reducers: {
    setToken: (state, action) => {
      state.token = action.payload;
    },
    setLogout: (state) => {
      state.token = null;
      state.isLogin = false;
      localStorage.removeItem("authToken");
      localStorage.removeItem("isLogin");
      localStorage.removeItem("refresh");
      localStorage.removeItem("memberId");
    },
  },
});

const markerState = createSlice({
  name: "markerState",
  initialState: {
    address: "",
    choice: false,
    comment: "",
    lat: 1,
    lng: 1,
    marketId: 1,
    name: "",
    phone: "",
    workTime: "",
  },
  reducers: {
    setMarker: (state, action) => {
      return action.payload;
    },
  },
});

const dateState = createSlice({
  name: "dateState",
  initialState: {
    Date: new Date().toISOString(),
  },
  reducers: {
    setDate: (state, action) => {
      state.Date = action.payload;
    },
  },
});

export const { setToken, setLogout } = loginState.actions;
export const { setMarker } = markerState.actions;
export const { setDate } = dateState.actions;

export default configureStore({
  reducer: {
    loginState: loginState.reducer,
    markerState: markerState.reducer,
    dateState: dateState.reducer,
  },
});

app

import styled from "styled-components";
import { Route, Routes } from "react-router-dom";

//Pages
import Home from "@pages/Home";
import Cart from "@pages/Cart";
import Place from "@pages/Place";
import Alcohol from "@pages/Alcohol";
import HelpCenter from "@pages/HelpCenter";
import AlcoholDetail from "@pages/AlcoholDetail";
import Login from "@Loginpages/Login";
import FindEmail from "@Loginpages/FindEmail";
import FindPassword from "@Loginpages/FindPassword";
import SignupInput from "@Signuppages/SignupInput";
import SignupSelection from "@Signuppages/SignupSelection";
import SignupTerm from "@Signuppages/SignupTerm";
import LikePage from "@pages/Mypage/LikeListPage";
import OrderPage from "@pages/Mypage/OrderListPage";
import ChangeInfoPage from "@pages/Mypage/ChangeInfoPage";
import Payment from "@Paymentpages/Payment";
import PaymentConfirm from "@Paymentpages/PaymentConfirm";
import FailPage from "@Paymentpages/Fail";
import Checkout from "@Paymentpages/Checkout";
import CheckoutChang from "@pages/Payment/CheckoutChang";
import ChatComponent from "@components/Chat/ChatComponent";
import Layout from "@layout/index";
import ReviewEdit from "@pages/ReviewEdit";

const BodyContainer = styled.div`
  min-height: 100vh;
  ${({ theme }) => theme.common.flexCol};
`;

const App = () => {
  return (
    <BodyContainer>
      <Layout>
        <Routes>
          <Route path="/" element={<Home />} />
          <Route path="/alcohol" element={<Alcohol />} />
          <Route path="/alcohol/detail/:id" element={<AlcoholDetail />} />
          <Route path="/review/edit/:id" element={<ReviewEdit />} />
          <Route path="/cart/" element={<Cart />} />
          <Route path="/login" element={<Login />} />
          <Route path="/signup/term" element={<SignupTerm />} />
          <Route path="/mypage/likepage" element={<LikePage />} />
          <Route path="/mypage/orderpage" element={<OrderPage />} />
          <Route path="/mypage/changeinfo" element={<ChangeInfoPage />} />
          <Route path="/payment" element={<Payment />} />
          <Route path="/checkout" element={<Checkout />} />
          <Route path="/checkoutChang" element={<CheckoutChang />} />
          <Route path="/paymentconfirm" element={<PaymentConfirm />} />
          <Route path="/fail" element={<FailPage />} />
          <Route path="/place" element={<Place />} />
          <Route path="/helpcenter" element={<HelpCenter />} />
          <Route path="/signup" element={<SignupSelection />} />
          <Route path="/signup/input" element={<SignupInput />} />
          <Route path="/findemail/" element={<FindEmail />} />
          <Route path="/findpassword" element={<FindPassword />} />
        </Routes>
        <ChatComponent />
      </Layout>
    </BodyContainer>
  );
};

export default App;