[리액트 프로젝트] ArtKey

[리액트 프로젝트] ArtKey

팀프로젝트명 ArtKey

기간 2024. 03. 27 ~ 2024.04.02

주제: 전시 예약 페이지 구현 

팀원 총 4명

 

사용한 기술

-html,css,js,react

사용한 리액트 라이브러리

-라우터,react-icons

 

팀프로젝트명이 ArtKey인 이유는 주제가 전시 예약 페이지 구현이기에 키보드에서 대체라는 의미로 사용하는 alt키와 예술의 의미를 가진 art를 합처서 'alt' 키를 대체하는 역할을 한다는 의미와 함께 예술적인 측면을 갖추고자 아트키라고 프로젝트 명을 
정했습니다. 

 

프로젝트 구조 

 

폴더 구조 

 

src 

• componets

          -Header.jsx

          -Footer.jsx

          -Product.jsx

• page

          -Main.jsx

          -Detail.jsx

          -Reservation.jsx

• providers

         -Flag.jsx

 

 

 

 

 

메인페이지

 

Product 이라는 컴포넌트에 의해 

 

< Product  코드>

import { AdminFlagContext } from "../providers/Flag";
import { Link } from "react-router-dom";
import { useContext } from "react";
import "./Product.css";
export const Product = ({ value, index }) => {
   const { arrays } = useContext(AdminFlagContext)

   const scrollToTop = () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    };

return (
   <div className="main_produce">
      <Link to={value} style={{ textDecoration: 'none' }} onClick={scrollToTop}>
         <div className="list">
            <img src={arrays[index].url[0]} className="imga"></img>
            <div className="listtext">
               <p>{arrays[index].name}</p>
               <p>{arrays[index].period}</p>
            </div>
         </div>
      </Link>
   </div>

);
};

arrays가 글로벌 스테이츠의 정보를 꺼내쓰는 부분이다 

 

 

 

각 전시회의 사진가 이름 개최 기간의 내용을 메인에서 보여진다 이때 각 전시회의 정보들은 

글로벌 스테이츠인 Flag 컴퍼넌트에 담겨 있다 이와 같은 형식으로 담겨있다.

 

Product  컴포넌트를 클릭하면 상세페이지로 넘어가며 상세페이지로 넘어갈때에는 현재 전시회 정보를 담아너 넘긴다.

            {arrays.map((list)=> (
              <Route path={`/${list.id}`} element={<Detail id={list.id} name={list.name} price={list.price} url={list.url} info={list.info} period={list.period} number={list.number} time={list.time} address={list.address} />} />
            ))}

 

상세페이지( Detail)

 

export const Detail =(props)=> {

    const {date,setDate}=useContext(AdminFlagContext)
    const [count,setCount]=useState(0)

 

상속받은 전시회 정보들과 그리고 현재 현재 인원수와 가격 전시회명을 저장하여 예약 페이지로 넘기기 위해 

data라는 글로벌 스테이츠 사용하여 데이터를 저장하였다.

 

예약버튼을 누르면

    const onclick = () => {

        const c = [ ...date ];
        console.log(date)
    
       
        let exists = false;
        for (const key in c) {  //이미 현재 전시회가 예약정보를 저장하는곳에 있다면 인원수만 수정
            if (c[key].id === props.id) {
                exists = true;
                c[key] = { id: props.id, name: props.name, price: props.price, count: count,url:props.url };
                setDate(c);
                alert("예약이 완료되었습니다.")
                break;
            }

            
        }
        const cs= [...date];

        if (!exists) { //예약정보에 현재 전시회가 예약안되어있다면 새로 추가 
  
            cs.push( { id: props.id, name: props.name, price: props.price, count: count,url:props.url})
            setDate(cs);
            alert("예약이 완료되었습니다.")
        }
        
    }

예약이 되어있다면 예약한 key을 찾아서 그 key값에서 사람인원수만 수정하며없다면 새로 추가한다.

 

예약페이지( Reservation)

예약페이지에서는 현재 data에 저장된 값들을 하나하나씩 불러와 목록을 만들며인원수 수정과 목록 삭제 그리고 전체선택 버튼을 만들어서 결제하기전에 최종적으로 결제할것들을 수정할수 있도록 하였다.

 

    // 선택된 상품 삭제
    const handleDeleteSelectedItems = useCallback(() => {
        if (window.confirm("예매를 취소하시겠습니까?")) {
        setDate((prevDate) => {
            return prevDate.filter((_item, index) => !selectedItems.includes(index));
        });
        setSelectedItems([]);
        }
    }, [selectedItems, setDate]);

filter을 이용하여 현재 선택된 목록을 빼고 내용물을 반환할수있다.

 

    // 선택한 상품의 총 금액 계산
    const getTotalPrice = () => {
        let totalPrice = 0;
        selectedItems.forEach((index) => {
            totalPrice += date[index].price * date[index].count;
        });
        return selectedItems.length === 0 ? '0원' : new Intl.NumberFormat().format(totalPrice) + '원';
    };

selectedItems 에 선택한 예약한 상품의 인덱스 번호가 저장되어 있다  그렇기 때문에 안의 값들을 하나씩 돌아서

data[index].price 와 count (사람수)를 곱해서 현재 선택된 상품들만의 최종 가격을 출력할수있다.

 

 

후기

 

처음 해보는 프로젝트이며 한달동안 배운 html,css,js,리액트 만을 이용해서 만든 프로젝트로 아직 깃허브나 협업 프로그램에대한 지식또한 부족하였고 프로젝트를 어떻게 진행하고 얼마만큼 걸리는지에대해서 각자 능력을 제대로 파악을 제대로 하지 못하여 프로젝트 이렇게 기본적인것들으 만드는것에도 시간이 생각 이상으로 많이 필요했던것 같다.

 

다음 프로젝트 하기전까지 협업프로그램 이용방법과 리액트 구조를 짜는 방법에 대해서 좀더 공부해야겠다고 생각한다

 

 

프로젝트 배포 주소 https://aristia0930.github.io/.