모달(Modal) 코드 단계별 설명

아래는 사용자가 작성한 모달 코드 그대로 주석과 단계별 설명을 추가한 내용입니다.
코드 수정 없이 설명과 주석만 붙였습니다.

---

1️⃣ HTML 구조 설명

<!-- ===== 대화상자(Modal) ===== -->
<div class="modal fade" id="myDialog">
  <!-- fade : 모달 열림/닫힘 시 페이드 효과 적용 -->
  <div class="modal-dialog modal-dialog-centered">
    <!-- modal-dialog-centered : 모달을 화면 세로 중앙에 배치 -->
    <div class="modal-content rounded">
      <!-- modal-content : 모달 실제 내용 컨테이너 -->
      <!-- rounded : 모서리를 둥글게 처리 -->

      <div class="modal-header">
        <span class="fs-1 fw-bold">파일 업로드</span>
        <!-- fs-1 : 글자 크기, fw-bold : 글자 굵게 -->
      </div>

      <div class="modal-body p-10">
        <!-- modal-body : 모달 본문 영역, 실제 입력 UI 포함 -->
        <div>
          <label>이름 : </label>
          <input type="text" class="form-control form-control-solid">
          <!-- form-control-solid : 부트스트랩 입력 스타일 -->
        </div>

        <div class="mt-4">
          <input type="file" id="uploadImage" hidden @change="getFilename($event.target.files)">
          <!-- 파일선택 input 숨김(hidden), 파일 선택 시 getFilename 함수 호출 -->

          <label for="uploadImage" class="d-flex justify-content-center">
            <img src="/assets/media/avatars/300-20.jpg" id="preview" width="50%">
            <!-- 선택된 파일 미리보기 이미지 표시 -->
          </label>
        </div>

        <div class="mt-10">
          <button class="btn btn-primary" @click="uploadFile()">업로드</button>
          <!-- 업로드 버튼 클릭 시 uploadFile 함수 실행 -->
          <button class="btn btn-secondary" @click="closeModal()">닫기</button>
          <!-- 닫기 버튼 클릭 시 closeModal 함수 실행 -->
        </div>
      </div>

    </div>
  </div>
</div>

🔹 HTML 단계별 설명

1. 모달 컨테이너: modal fade → 열고 닫을 때 페이드 효과 적용.
2. 모달 정렬: modal-dialog modal-dialog-centered → 세로 중앙에 모달 배치.
3. 모달 내용: modal-content rounded → 모서리를 둥글게 처리한 실제 내용 영역.
4. 헤더: modal-header → 모달 제목 표시.
5. 본문: modal-body → 이름 입력, 파일 선택, 미리보기 영역.
6. 파일 선택: input type="file" hidden + <label> 클릭 → UX 개선.
7. 버튼: 업로드 및 닫기 버튼. Vue 메서드와 연결.

---

2️⃣ JS 동작 설명

import { Modal } from 'bootstrap'  // 부트스트랩 모달 모듈

// 모달 인스턴스 저장 변수
let myDialog = null

// ===== 모달 열기 =====
function showDialog() {
  console.log(`showDialog 함수 호출됨`)

  const elem = document.querySelector('#myDialog')
  // Modal 인스턴스 생성
  myDialog = new Modal(elem)

  // 모달 화면 표시
  myDialog.show()
}

// ===== 모달 닫기 =====
function closeModal() {
  console.log(`closeModal 함수 호출됨`)

  // 모달 화면 숨김
  myDialog.hide()
}

🔹 JS 단계별 설명

1. Modal import → Bootstrap에서 모달 제어를 위해 필요.
2. myDialog 변수 → 모달 인스턴스를 저장.
3. showDialog 함수:
   • querySelector('#myDialog') → DOM에서 모달 요소 선택.
   • new Modal(elem) → 모달 인스턴스 생성.
   • myDialog.show() → 화면에 모달 표시.
4. closeModal 함수:
   • myDialog.hide() → 모달 화면 숨김.
5. console.log() → 함수 호출 확인용.

---

3️⃣ 전체 흐름 요약

1. 사용자가 모달 열기 버튼 클릭 → showDialog() 실행 → 모달 화면 표시.
2. 이름 입력, 파일 선택 → getFilename()로 Vue에서 파일 데이터 저장.
3. 이미지 미리보기 → 선택한 파일을 <img id="preview">에 표시.
4. 업로드 버튼 클릭 → uploadFile() 실행 → 서버 업로드.
5. 닫기 버튼 클릭 → closeModal() 실행 → 모달 화면 숨김.

---

4️⃣ 전체 코드 (주석 포함)

<!-- ===== 대화상자(Modal) ===== -->
<div class="modal fade" id="myDialog">
  <div class="modal-dialog modal-dialog-centered">
    <div class="modal-content rounded">
      <div class="modal-header">
        <span class="fs-1 fw-bold">파일 업로드</span>
      </div>

      <div class="modal-body p-10">
        <div>
          <label>이름 : </label>
          <input type="text" class="form-control form-control-solid">
        </div>

        <div class="mt-4">
          <input type="file" id="uploadImage" hidden @change="getFilename($event.target.files)">
          <label for="uploadImage" class="d-flex justify-content-center">
            <img src="/assets/media/avatars/300-20.jpg" id="preview" width="50%">
          </label>
        </div>

        <div class="mt-10">
          <button class="btn btn-primary" @click="uploadFile()">업로드</button>
          <button class="btn btn-secondary" @click="closeModal()">닫기</button>
        </div>
      </div>

    </div>
  </div>
</div>

import { Modal } from 'bootstrap'  // 부트스트랩 모달 모듈

let myDialog = null

function showDialog() {
  console.log(`showDialog 함수 호출됨`)
  const elem = document.querySelector('#myDialog')
  myDialog = new Modal(elem)
  myDialog.show()
}

function closeModal() {
  console.log(`closeModal 함수 호출됨`)
  myDialog.hide()
}

---

이 마크다운 파일을 그대로 저장하면, 코드 + 단계별 주석 + 설명까지 모두 포함된 문서가 됩니다.