📌 목적

프로젝트를 하면서, 여러 방식의 Axios 요청이 있었는데 이에 대한 코드를 저장하면서 앞으로 계속 참고하는 식으로 공부하려고 붙임!

📌 코드 및 코드 설명

🤞 메인 코드 - 리스트 GET

const [items, setItems] = useState([]);

  const setBranchSet = () => {
    axios({
      method: 'GET',
      url: 'http://localhost:8080/api/kiosk/home/kiosk-list'
    })
      .then((res) => {
        setItems(res.data)
    })
      .catch((err) => console.log(err))
  }

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

🤞 관련 코드(map)

{
  items.map(item => {
    return <KioskBranchLocation key={item.id} id={item.id} name={item.name} />
  })
}

🤞 메인 코드 - 우산 갯수 변경

  const { id } = useParams()
  const [rentCnt, setRentCnt] = useState(0);
  const [returnCnt, setReturnCnt] = useState(0);

  const BrollyURL = `http://localhost:8080/api/kiosk/home/brolly/${id}`
  axios({
    method: 'GET',
    url: BrollyURL,
  })
  .then((res) => {
    setRentCnt(res.data.brollyCnt)
    setReturnCnt(res.data.emptyCnt)
  })
  .catch((err) => {
    console.log(err)
  })

🤞 관련 코드(props)

<div css={KioskButtons}>
  <KioskRentBtn rentCnt={rentCnt} />
    <KioskRemoveEventListener />
  <KioskReturnBtn returnCnt={returnCnt} />
</div>

🤞 메인 코드 - 이미지 서버 전송

const [loading, setLoading] = useState(false);

const saveImage = () => {
  // 데이터 URL로 그대로 보내기
  const canvas = document.getElementById("$canvas");
  const imgURL = canvas.toDataURL("image/png");

  setLoading(true);

  axios({
    method: 'POST',
    url: 'https://localhost:8080/api/brolly/return',
    data: {
      'brollyName': qrdata,
      'caseId': id,
      'imgData': imgURL
    }
  })
    .then((res) => {
    console.log(res.data.success)
    if (!res.data.success) {
      clearImage();
      setOpen(true);
      setLoading(false);
    }
  })
    .catch((err) => console.log(err));
};

🤞 관련 코드(loading, modal)

<div css={SpinnerDiv}>
  {loading ? <Stack sx={{ zIndex: '990', backgroundColor: 'rgba(255, 255, 255, 0.5)', width: '102vw', height: '102vh', display: 'flex', justifyContent: 'center', alignItems: 'center' }} spacing={5} direction="row">
  <CircularProgress sx={{ color: 'white' }} />
  </Stack> : null}
</div>
<div>
  <Dialog
          sx={{ width: '100vw' }}
          open={open}
          TransitionComponent={Transition}
          keepMounted
          onClose={handleClose}
          aria-describedby="alert-dialog-slide-description"
          >
    <DialogTitle sx={{backgroundColor: '#EEF1FF', fontFamily: 'GangwonEduPowerExtraBoldA'}} fontSize={32} fontWeight={900}>{"우산이 인식되지 않았습니다."}</DialogTitle>
    <DialogContent sx={{backgroundColor: '#EEF1FF'}}>
      <DialogContentText sx={{fontFamily: 'GangwonEduPowerExtraBoldA'}} fontSize={20} fontWeight={700} id="alert-dialog-slide-description">
        우산을 꼭 펼쳐서 촬영해주세요. 우산이 인식되지 않으면 반납 처리가 되지않습니다.
      </DialogContentText>
    </DialogContent>
    <DialogActions sx={{backgroundColor: '#EEF1FF'}}>
      <Button sx={{fontFamily: 'GangwonEduPowerExtraBoldA'}} onClick={handleClose}>닫기</Button>
    </DialogActions>
  </Dialog>
</div>

해당 태그는 MUI 사용

🤞 메인 코드 - 주소

const { id } = useParams()
  const [address, setAddress] = useState('');



  useEffect(() => {
    // 이거 수정해야함
    const getAddress = () => {
      // 키오스크 geo 에서 지점에 해당하는 위도 경도값 받아오기
      // let geoURL = `http://192.168.100.80:8080/api/kiosk/home/kiosk-geo?id=1`
      let geoURL = `https://localhost:8080/api/kiosk/home/kiosk-geo?id=${id}`
      let addressURL = ``;
      axios.get(geoURL)
        .then((res) => {
          return res.data;
        })
        .then((data) => {
          // addressURL = `http://192.168.100.80:8080/api/address/reverse-geo?lat=${data.lat}&lng=${data.lng}`;
          addressURL = `https://localhost:8080/api/address/reverse-geo?lat=${data.lat}&lng=${data.lng}`;
          axios.get(addressURL)
            .then((res) => {
              setAddress(res.data.address_name)
            })
        })
        .catch((err) => console.log(err))
    };
    getAddress();
  }, [id])

🤞 메인 코드 - 주소

const [celsius, setCelsius] = useState(0);
const [windspeed, setWindspeed] = useState(0);
const [imgsrc, setImgsrc] = useState("");
const { id } = useParams();

useEffect(() => {
  const getWeather = () => {
    // 키오스크 geo 에서 지점에 해당하는 위도 경도값 받아오기
    let geoURL = `https://localhost:8080/api/kiosk/home/kiosk-geo?id=${id}`;
    let weatherURL = ``;
    axios
      .get(geoURL)
      .then((res) => {
      return res.data;
    })
      .then((data) => {
      weatherURL = `https://localhost:8080/api/weather/current-weather?lat=${data.lat}&lng=${data.lng}`;
      axios.get(weatherURL).then((res) => {
        setImgsrc(res.data.icon);
        setCelsius(res.data.temp);
        setWindspeed(res.data.wind_speed);
      });
    })
      .catch((err) => console.log(err));
  };

  getWeather();
}, [id]);

🤞 관련 코드(날씨)

<div css={KioskHomeWeatherTextBox}>
  <p className='celsius'>현재 기온 {Math.round(celsius).toFixed(1)}<span>⁰</span></p>
  <p className='windspeed'>풍속 : {windspeed}(m/s)</p>
</div>

🤞 메인 코드 - 영수증

const { isBrolly } = useParams();
const { id } = useParams();
const navigate = useNavigate();
const [isReturn, setIsReturn] = useState(false);
const [kioskName, setKioskName] = useState('');

const location = useLocation();
const queryParams = new URLSearchParams(location.search)
const depositeMoney = Number(queryParams.get('depositeMoney')).toLocaleString('ko-KR');
const period = Number(queryParams.get('period')).toLocaleString('ko-KR');
const price = Number(queryParams.get('price')).toLocaleString('ko-KR');
const refundMoney = Number(queryParams.get('refundMoney')).toLocaleString('ko-KR');

const KioskNameURL = `https://localhost:8080/api/kiosk/home/kiosk-name?id=${id}`
  
useEffect(() => {
  if (isBrolly == 1) {
    setIsReturn(true)
  }
  axios({
    method:'GET',
    url: KioskNameURL,
  })
    .then((res) => setKioskName(res.data))
    .catch((err) => console.log(err))

  const timer = setTimeout(() => {
    navigate(`/kiosk/${id}`);
  }, 30000);

  return () => {
    clearTimeout(timer);
  };
}, [isReturn])

🤞 관련 코드(결제사항)

<div css={KioskReturnReceiptView}>
  <h1>요금 사항</h1>
  <div css={KioskReturnReceipt}>
    <div className='ReceiptTitle'>
      <p className='BranchName'>{kioskName}</p>
    </div>
    <div className='ReceiptTotal'>
      <p className='Payment'>{refundMoney}<span>원</span></p>
    </div>
    <div className='ReceiptDetailView'>
      <div className='FirstHorizon'></div>
      <div className='ReceiptDetail'><span className='FontColorGray'>보증금</span><span>{depositeMoney}원</span></div>
      <div className='ReceiptDetail'><span className='FontColorGray'>이용 기간</span><span>{period}일</span></div>
      <div className='ReceiptDetail'><span className='FontColorGray'>이용 금액</span><span>{price}원</span></div>
      <div className='SecondHorizon'></div>
      <div className='ReceiptDetailRefunds'><span>환급 금액</span><span>{refundMoney}원</span></div>
    </div>
  </div>
</div>

📌 후기

axios 요청에 대한 형식을 익힐 수 있었고, 아직 로그인과 회원가입 등을 할때, headers랑 Token 처리 형식을 아직 경험해보지 못했다. 그래서 이를 경험해보기 위해서 다음 프로젝트에서는 경험해볼 계획이다.