src - pages - thema-load - ThemaLoadList.tsx 생성
ThemaLoadList.tsx
// ThemaLoadList.tsx : rfce
// 공공 데이터 포털 : 부산 테마거리 전체 조회
import { Pagination } from "@mui/material";
import React, { useEffect, useState } from "react";
import TitleCom from "../../../components/common/TitleCom";
import IThemaLoad from './../../../types/shop/IThemaLoad';
import ThemaLoadService from "../../../services/shop/ThemaLoadService";
function ThemaLoadList() {
// todo: 변수 정의
// themaLoad 배열 변수
const [themaLoad, setThemaLoad] = useState<Array<IThemaLoad>>([]);
// todo: 공통 변수 : page(현재페이지번호), count(총페이지건수), pageSize(3,6,9 배열)
const [page, setPage] = useState<number>(1);
const [count, setCount] = useState<number>(1);
const [pageSize, setPageSize] = useState<number>(3); // 1페이지당개수
// todo: 공통 pageSizes : 배열 (셀렉트 박스 사용)
const pageSizes = [3, 6, 9];
// todo: 함수 정의
useEffect(() => {
retrieveThemaLoad(); // 전체 조회
}, [page, pageSize]);
// 전체조회 함수
const retrieveThemaLoad = () => {
ThemaLoadService.getAll(page -1, pageSize) // 벡엔드 전체조회요청
.then((response: any)=>{
// todo : 공공 API 결과 값 저장
// todo : totalCount(총건수), data(결과값배열)
// todo : perPage(1페이지당개수)
// todo : 총페이지수 = Math.ceil(totalCount / perPage)
const { data, perPage, totalCount } = response.data;
// 총페이지 수
const totalPages = Math.ceil(totalCount / perPage);
setThemaLoad(data);
setCount(totalPages);
console.log("response", response.data);
})
.catch((e: Error)=>{
// 벡엔드 실패시 실행됨
console.log(e);
})
};
// todo: handlePageSizeChange(공통) : pageSize 값 변경시 실행되는 함수
// select 태그 수동 바인딩 : 화면값 -> 변수에 저장
const handlePageSizeChange = (event: any) => {
setPageSize(event.target.value); // 1페이지당 개수저장(3,6,9)
setPage(1); // 현재페이지번호 : 1로 강제설정
}
// todo: Pagination 수동 바인딩(공통)
// 페이지 번호를 누르면 => page 변수에 값 저장
const handlePageChange = (event:any, value:number) => {
// value == 화면의 페이지번호
setPage(value);
}
return (
// 여기
<>
{/* 제목 start */}
<TitleCom title="ThemaLoad List" />
{/* 제목 end */}
{/* paging 시작 */}
<div className="mt-3">
{"Items per Page: "}
<select onChange={handlePageSizeChange} value={pageSize}>
{pageSizes.map((size) => (
<option key={size} value={size}>
{size}
</option>
))}
</select>
<Pagination
className="my-3"
count={count}
page={page}
siblingCount={1}
boundaryCount={1}
variant="outlined"
shape="rounded"
onChange={handlePageChange}
/>
</div>
{/* paging 끝 */}
{/* table start */}
<div className="col-md-12">
{/* table start */}
<table className="table">
<thead className="table-light">
<tr className="text-center">
<th scope="col">식당(ID)</th>
<th scope="col">식당명</th>
<th scope="col">지역명</th>
<th scope="col">식당이미지(ID)</th>
<th scope="col">식당이미지(URL)</th>
<th scope="col">Actions</th>
</tr>
</thead>
<tbody>
{themaLoad &&
themaLoad.map((data, index) => (
<tr key={index} className="text-center">
<td>{data["식당(ID)"]}</td>
<td>{data["식당명"]}</td>
<td>{data["지역명"]}</td>
<td>{data["식당이미지(ID)"]}</td>
<td>
<img
src={data["식당이미지(URL)"]}
width="50vw"
height="30vh"
/>{" "}
</td>
</tr>
))}
</tbody>
</table>
{/* table end */}
</div>
{/* table end */}
</>
);
}
export default ThemaLoadList;
app.tsx
import React from "react";
// app css import
import "./assets/css/app.css";
import HeaderCom from "./components/common/HeaderCom";
import { Route, Routes } from "react-router-dom";
import Home from "./pages/Home";
import Login from "./pages/auth/Login";
import Register from "./pages/auth/Register";
import ForgotPassword from "./pages/auth/ForgotPassword";
import NotFound from "./pages/common/NotFound";
import DeptList from "./pages/basic/dept/DeptList";
import EmpList from "./pages/basic/emp/EmpList";
import AddDept from "./pages/basic/dept/AddDept";
import AddEmp from "./pages/basic/emp/AddEmp";
import Dept from "./pages/basic/dept/Dept";
import Emp from "./pages/basic/emp/Emp";
import QnaList from "./pages/basic/qna/QnaList";
import CustomerList from "./pages/basic/customer/CustomerList";
import AddQna from "./pages/basic/qna/AddQna";
import AddCustomer from "./pages/basic/customer/AddCustomer";
import Qna from "./pages/basic/qna/Qna";
import Customer from "./pages/basic/customer/Customer";
import FaqList from "./pages/normal/faq/FaqList";
import CinemaFaqList from "./pages/normal/cinema/CinemaFaqList";
import AddFaq from "./pages/normal/faq/AddFaq";
import AddCinemaFaq from "./pages/normal/cinema/AddCinemaFaq";
import Faq from "./pages/normal/faq/Faq";
import CinemaFaq from "./pages/normal/cinema/CinemaFaq";
import ReplyBoardList from "./pages/normal/reply-board/ReplyBoardList";
import ThreadBoardList from "./pages/normal/thread-board/ThreadBoardList";
import AddReplyBoard from "./pages/normal/reply-board/AddReplyBoard";
import AddThreadBoard from "./pages/normal/thread-board/AddThreadBoard";
import ReplyBoard from "./pages/normal/reply-board/ReplyBoard";
import ThreadBoard from "./pages/normal/thread-board/ThreadBoard";
import CodeCategoryList from "./pages/admin/CodeCategoryList";
import AddCodeCategory from "./pages/admin/AddCodeCategory";
import CodeList from "./pages/admin/CodeList";
import AddCode from "./pages/admin/AddCode";
import Code from "./pages/admin/Code";
import SimpleProductList from "./pages/shop/simple-product/SimpleProductList";
import ProductList from "./pages/shop/product/ProductList";
import AddSimpleProduct from "./pages/shop/simple-product/AddSimpleProduct";
import SimpleProduct from "./pages/shop/simple-product/SimpleProduct";
import SimpleCart from "./pages/shop/simple-product/SimpleCart";
import AddProduct from "./pages/shop/product/AddProduct";
import Product from "./pages/shop/product/Product";
import SimpleCartList from "./pages/shop/simple-product/SimpleCartList";
import CinemaList from "./pages/shop/cinema/CinemaList";
import Cinema from "./pages/shop/cinema/Cinema";
import ThemaLoadList from "./pages/shop/thema-load/ThemaLoadList";
import FileDbList from "./pages/advanced/FileDbList";
function App() {
return (
<div className="App">
<HeaderCom />
{/* <!-- 구분 막대 시작 --> */}
<div className="gutter text-center text-muted fade-in-box">
<div>클론 코딩 예제 사이트에 오신 것을 환영합니다.</div>
</div>
{/* <!-- 구분 막대 끝 --> */}
<div id="content-wrapper">
{/* 라우터 정의 시작 */}
<Routes>
{/* login */}
<Route path="/" element={<Home />} />
<Route path="/login" element={<Login />} />
<Route path="/register" element={<Register />} />
<Route path="/forgot-password" element={<ForgotPassword />} />
{/* dept */}
<Route path="/dept" element={<DeptList />} />
<Route path="/add-dept" element={<AddDept />} />
<Route path="/dept/:dno" element={<Dept />} />
{/* emp(연습) */}
<Route path="/emp" element={<EmpList />} />
<Route path="/add-emp" element={<AddEmp />} />
<Route path="/emp/:eno" element={<Emp />} />
{/* qna */}
<Route path="/qna" element={<QnaList />} />
<Route path="/add-qna" element={<AddQna />} />
<Route path="/qna/:qno" element={<Qna />} />
{/* customer */}
<Route path="/customer" element={<CustomerList />} />
<Route path="/add-customer" element={<AddCustomer />} />
<Route path="/customer/:cid" element={<Customer />} />
{/* faq */}
<Route path="/faq" element={<FaqList />} />
<Route path="/add-faq" element={<AddFaq />} />
<Route path="/faq/:no" element={<Faq />} />
{/* cinema faq */}
<Route path="/cinema-faq" element={<CinemaFaqList />} />
<Route path="/add-cinema-faq" element={<AddCinemaFaq />} />
<Route path="/cinema-faq/:cfno" element={<CinemaFaq />} />
{/* reply-board */}
<Route path="/reply-board" element={<ReplyBoardList />} />
<Route path="/add-reply-board" element={<AddReplyBoard />} />
{/* 정리 : boardParent = 0 이면 부모글을 클릭 */}
{/* 정리 : boardParent = 0 아니면 자식글을 클릭 */}
<Route
path="/reply-board/bid/:bid/boardParent/:boardParent"
element={<ReplyBoard />}
/>
{/* thread-board */}
<Route path="/thread-board" element={<ThreadBoardList />} />
<Route path="/add-thread-board" element={<AddThreadBoard />} />
<Route
path="/thread-board/tid/:tid/tparent/:tparent"
element={<ThreadBoard />}
/>
{/* codeCategory(대분류 공통코드(부모)) */}
<Route path="/code-category" element={<CodeCategoryList />} />
<Route path="/add-code-category" element={<AddCodeCategory />} />
{/* code(소분류 공통코드(자식)) */}
<Route path="/code" element={<CodeList />} />
<Route path="/add-code" element={<AddCode />} />
<Route path="/code/:codeId" element={<Code />} />
{/* simple-product */}
<Route path="/simple-product" element={<SimpleProductList />} />
<Route path="/add-simple-product" element={<AddSimpleProduct />} />
<Route path="/simple-product/:spno" element={<SimpleProduct />} />
{/* 장바구니 상세 */}
<Route path="/simple-cart/:spno" element={<SimpleCart />} />
{/* 장바구니 전체 조회 */}
<Route path="/simple-cart" element={<SimpleCartList />} />
{/* product(연습) */}
<Route path="/product" element={<ProductList />} />
<Route path="/add-product" element={<AddProduct />} />
<Route path="/product/:pno" element={<Product />} />
{/* cinema */}
{/* 박스오피스 순위 전체조회 */}
<Route path="/cinema" element={<CinemaList />} />
{/* 영화 상세조회 */}
<Route path="/cinema/:movieCd" element={<Cinema />} />
{/* 부산 테마길( busan thema load ) */}
<Route path="/thema-load" element={<ThemaLoadList />} />
{/* 파일 업로드 */}
<Route path="/fileDb" element={<FileDbList />} />
{/* NotFound */}
<Route path="*" element={<NotFound />} />
</Routes>
{/* 라우터 정의 끝 */}
</div>
</div>
);
}
export default App;
공공데이터 포털 회원가입
부산관광공사_음식테마거리 음식점 이미지정보 검색
활용 신청
src - types - shop - IThemaLoad.ts 생성
IThemaLoad.ts
// IThemaLoad.ts : rfce
export default interface IThemaLoad {
"식당(ID)": number; // 식당 ID
"식당명": string; // 식당명
"지역명": string; // 식당명
"식당이미지(ID)": number; // 식당이미지(ID)
"식당이미지(URL)": string; // 식당이미지(URL)
}
src - services -shop - ThemaLoadService.ts 생성
ThemaLoadService.ts
// ThemaLoadService.ts : 공공 데이터 포털 API 함수
import axios from "axios";
import IThemaLoad from './../../types/shop/IThemaLoad';
// 공공 데이터 포털 : 부산 테마거리 음식점 기본 주소
// 인증키 변수
let apiKey = "JYF5IjHIFxh5YyspCWG8zcRMgGfWLsqno9aGODy8haDoXpFUe7FqKgp2LwtlRcxjkbMcbZ06ejs5oUj1DO389A%3D%3D";
// 전체 조회
// page : 현재페이지번호,
// perPage : 1페이지당 개수
const getAll = (page: number, perPage:number) => {
// url 조합 : 기본주소 + 추가주소 + 변수명(쿼리스트링)
let url = `${baseUrl}/15096718/v1/uddi:0a31f303-432c-4993-97d2-81537862521b?page=${page}&perPage=${perPage}&serviceKey=${apiKey}`;
console.log(url);
return axios.get<Array<IThemaLoad>>(url);
}
const ThemaLoadService = {
getAll,
};
export default ThemaLoadService;
결과
'SI' 카테고리의 다른 글
[SI]영화진흥위원회 오픈 api 사용하여 데이터(영화순위, 영화명, 개봉일, 누적관객수, 상영관수, 영화 정보) 불러오기 (0) | 2023.11.10 |
---|---|
[SI] 벡엔드 (02_SimpleDMS_Page) 반응형 게시판 (0) | 2023.10.31 |
[SI] 프론트엔드 (02_SimpleDMS_Page) 반응형 게시판 (0) | 2023.10.27 |
[SI] 벡엔드 (02_SimpleDMS_Page) 페이지 기능 추가 (0) | 2023.10.23 |
[SI] 프론트엔드 (02_SimpleDMS_Page) 페이지 기능 추가 (0) | 2023.10.20 |