Project. Admin 페이지 프론트단 제작 프로젝트 (250402)

이 HTML 코드는 **관리자 페이지 (Admin Page)**를 만들기 위한 기본적인 구조를 보여주고 있습니다. 각 요소의 역할을 이해하고, 페이지의 흐름에 대해 단계별로 설명을 드리겠습니다.

HTML 문서 분석 및 흐름 설명

1. 문서 기본 설정

<!DOCTYPE html>
<html lang="ko">

<!DOCTYPE html>: HTML5 문서임을 선언합니다. 이는 브라우저가 이 문서를 HTML5 형식으로 해석하도록 만듭니다.
<html lang="ko">: 문서의 언어를 한국어로 설정합니다. 이는 SEO 및 접근성을 고려한 설정입니다.

2. 문서 메타데이터와 외부 리소스 연결

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
  <title>Admin Page</title>
</head>

<meta charset="UTF-8">: 문서의 문자 인코딩을 UTF-8로 설정합니다. 이는 다양한 문자와 기호를 올바르게 표현하기 위해 사용됩니다.
<meta name="viewport" content="width=device-width, initial-scale=1.0">: 모바일 장치에서 페이지가 올바르게 표시되도록 뷰포트를 설정합니다.
: Bootstrap CSS를 외부 CDN에서 불러와서 페이지 스타일을 적용합니다. Bootstrap은 인기 있는 CSS 프레임워크로, 다양한 UI 컴포넌트를 쉽게 사용할 수 있습니다.
<title>Admin Page</title>: 브라우저 탭에 표시될 페이지 제목을 설정합니다.

3. 본문 (Body)

<body>
  <div class="container mt-3">
    <h3 class="mt-5 mb-3">신규 등록 상품</h3>
    <form class="row row-cols-lg-auto g-3 align-items-center">
      <div class="col-12">
        <label class="visually-hidden" for="inlineFormSelectPref">Preference</label>
        <select class="form-select" id="inlineFormSelectPref" name="category_data_table">
          <!-- 셀렉트요소의 name="category_data_table"은 지우거나 변경하면 안돼요 -->
          <!-- 카테고리 셀렉트 코드를 넣어주세요 -->
        </select>
      </div>
      <div class="col-3">
        <!-- input 입력창 코드를 넣어주세요 -->
      </div>
      <div class="col-auto">
        <!-- 조회 버튼 코드를 넣어주세요 -->
      </div>
    </form>

<h3 class="mt-5 mb-3">신규 등록 상품</h3>: 페이지의 제목을 **"신규 등록 상품"**으로 설정합니다.
<form class="row row-cols-lg-auto g-3 align-items-center">: 폼을 그리드 시스템을 이용해 작성하며, 카테고리 선택, 상품명 입력, 조회 버튼을 배치합니다.
- class="form-select": Select 박스를 생성하며, 사용자가 카테고리를 선택할 수 있도록 합니다.
- name="category_data_table": 이 Select 박스를 통해 선택된 카테고리 정보를 서버로 전송할 때 사용되는 name 속성입니다.
이 섹션에서는 상품 카테고리 선택, 상품명 입력, 조회 버튼에 대한 코드 삽입을 안내하는 주석들이 있습니다.

4. 상품 목록 테이블

    <div class="container mt-3">
      <table class="table table-sm">
        <thead>
          <!-- 열의 속성값을 나타내는 코드를 작성해주세요 (예 : 카테고리, 브랜드, 상품명, 가격) -->
        </thead>
        <tbody id="product_data_Table">
          <!-- tbody요소의 id="product_data_Table" 는 지우거나 변경하면 안돼요! -->
          <!-- 제품 데이터가 여기 추가됩니다. -->
        </tbody>
      </table>
    </div>

상품 목록을 보여주는 테이블입니다.
- <thead>에는 테이블의 열 제목을 삽입해야 합니다. 예를 들어, 카테고리, 브랜드, 상품명, 가격 등과 같은 열을 추가할 수 있습니다.
- <tbody id="product_data_Table">: 이 부분은 자바스크립트로 데이터를 동적으로 삽입하는 구역입니다. id="product_data_Table"는 자바스크립트에서 이 부분을 선택하여 데이터를 채우기 위해 사용됩니다.

5. 페이지 네이션

    <!-- 페이지 네이션 코드를 넣어주세요 -->
  </div>

페이지네이션 코드가 여기에 추가될 예정입니다. 예를 들어, 페이지가 여러 개로 나눠져 있을 때 각 페이지를 전환할 수 있는 버튼을 제공할 수 있습니다. 일반적으로 Bootstrap의 Pagination 컴포넌트를 사용하여 구현할 수 있습니다.

6. 스크립트: 데이터 로딩 및 삽입

  <script>
    // 크롤링한 데이터를 아래와 같은 형태의 객체 배열로 가정합니다.
    const product_data = [
      { category: "상의", brand: 'Supreme', product: '슈프림 박스로고 후드티', price: '390,000' },
      { category: "하의", brand: 'DIESEL', product: '디젤 트랙 팬츠', price: '188,000' },
      { category: "신발", brand: 'Nike', product: '에어포스 1', price: '137,000' },
      { category: "패션잡화", brand: 'Music&Goods', product: '빵빵이 키링', price: '29,000' },
    ];

    const product_data_Table = document.getElementById('product_data_Table');

    // 초기 데이터 로딩
    product_data.forEach((item) => {
      const row = product_data_Table.insertRow();
      row.insertCell(0).innerHTML = item.category;
      row.insertCell(1).innerHTML = item.brand;
      row.insertCell(2).innerHTML = item.product;
      row.insertCell(3).innerHTML = item.price;
    });
  </script>

자바스크립트 코드입니다. 이 코드는 데이터를 배열 형태로 정의하고, 이를 HTML 테이블에 동적으로 삽입합니다.
- const product_data = [...]: 상품 정보를 배열로 정의합니다. 각 객체는 상품의 카테고리, 브랜드, 상품명, 가격 정보를 담고 있습니다.
- const product_data_Table = document.getElementById('product_data_Table');: 이 구문은 HTML에서 id="product_data_Table"인 테이블 바디 요소를 자바스크립트로 선택합니다.
- product_data.forEach((item) => {...});: 배열 product_data를 순회하면서 각 상품 데이터를 테이블에 **행(row)**으로 삽입합니다.
  - row.insertCell(0).innerHTML = item.category;: 첫 번째 셀에 상품의 카테고리 값을 삽입합니다.
  - 나머지 셀에도 브랜드, 상품명, 가격 정보를 순차적으로 삽입합니다.

7. Bootstrap JS 추가

  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/js/bootstrap.bundle.min.js"></script>

Bootstrap JS는 페이지에 동적인 요소 (모달, 드롭다운 등)를 추가하기 위해 필요합니다. 이 스크립트는 Bootstrap의 JavaScript 기능을 활용하는데 사용됩니다.

프로젝트 진행 흐름

상품 카테고리 셀렉트 박스:
- 카테고리 정보를 드롭다운 메뉴로 제공하고, 사용자가 선택한 카테고리를 서버에 전송하거나 다른 작업을 진행하도록 할 수 있습니다.
상품 목록 테이블:
- product_data 배열에 있는 데이터를 기반으로 상품 목록 테이블을 동적으로 생성합니다.
- 데이터를 서버에서 가져오는 방식으로 변경하면, 백엔드와 연동하여 실시간으로 데이터를 표시할 수 있습니다.
페이지 네이션:
- 제품이 많을 경우 페이지 네이션을 추가하여, 한 페이지에 표시할 제품 수를 제한하고, 페이지를 넘겨가며 확인할 수 있게 만듭니다.
사용자 인터페이스 개선:
- 필터링, 검색 기능 등을 추가하여 관리자가 특정 제품을 쉽게 찾을 수 있도록 UI를 개선할 수 있습니다.

'프로젝트' 카테고리의 다른 글

16강 미니 프로젝트(사진 공유 웹사이트)_1 (AWS) (0)	2025.04.11
Project. Admin 페이지 프론트단 제작 프로젝트 (250402) (0)	2025.04.02
Mini Project : Mini Project. 회원가입폼만들기 (Javascript :2일차 과제) (0)	2025.04.01
Mini Project : Mini Project. 사용자 정보 입력받기 (Javascript :1일차 과제) (0)	2025.04.01
Mini Project : Mini Project. 사용자 정보 입력받기 (Javascript :1일차 과제)+@ (0)	2025.03.31

HTML 문서 분석 및 흐름 설명

1. 문서 기본 설정

2. 문서 메타데이터와 외부 리소스 연결

3. 본문 (Body)

4. 상품 목록 테이블

5. 페이지 네이션

6. 스크립트: 데이터 로딩 및 삽입

7. Bootstrap JS 추가

프로젝트 진행 흐름

'프로젝트' 카테고리의 다른 글

티스토리툴바