청소 플랫폼 만들기 (14)

김민준·2023년 8월 30일

TIL-----------------------------내림차순↓

목록 보기

59/111

청소 플랫폼 만들기 (14)

공부하며 느낀 점
참조한 페이지

청소 플랫폼 만들기 (14)

css 파일 불러오기 오류
css파일을 불러오는데 자꾸 브라우저의 콘솔창에서 . 이나 {가지고 되도 않는 걸로 오류가 떴다고 하며 css가 적용되지 않았다.

문제는 css를 불러오는 방식이었다.
<script src="../template/css/user.css"></script>
위와같은 형태로 불러왔는데 아래와 같은 형태로 바꾸니 해결되었다.
<link href="../template/css/user.css" rel="stylesheet" type="text/css" />

modal과 같은 html 요소를 js에 붙이기
프론트에 로그인과 회원가입 기능을 구현해놨는데 쓰지 않을때도 html을 불러오면 좋지 않으므로, js로 불러왔다.

처음에는 회원가입만 있어서 한번에 다 불러왔지만 추후에 로그인을 구현하였기 때문에 둘로 나누었다.

아래는 기본적으로 달라 붙을 모달의 형태이다.

// 모달을 생성하고 초기화하는 함수
function createModal(modalId, modalTitle, modalContent) {
  const modalHtml = `
    <div class="modal fade" id="${modalId}" tabindex="-1" role="dialog" aria-labelledby="${modalId}Label" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="${modalId}Label">${modalTitle}</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                    ${modalContent}
                </div>
            </div>
        </div>
    </div>
  `;

  // 모달을 현재 문서에 추가
  document.body.insertAdjacentHTML('beforeend', modalHtml);
}

${modalContent}이 내가 붙이고 싶은 모달의 위치이다.

아래는 추가로 모달을 붙이는 과정이다.

// 모달이 열릴 때 실행되는 함수
function showModal(modalId, modalTitle, modalContent) {
  // 모달을 생성하고 초기화하는 작업을 수행할 수 있습니다.
  createModal(modalId, modalTitle, modalContent);
}

아래는 로그인 버튼을 눌렀을 경우의 예시이다

// '로그인' 버튼 클릭 시 모달을 열기 위한 이벤트 리스너 추가
document.querySelector('.btn-primary[data-target="#logIn"]').addEventListener('click', function () {
  showModal(
    'logIn',
    '로그인',
    `
    <form>
      <div class="modal-body">
          <div class="input-group">
              <label for="login-email">로그인 이메일　</label>
              <input id="login-email" type="text" placeholder="xxxx@xxxx.com" />
          </div>
          <div class="input-group">
              <label for="login-password">비밀번호　</label>
              <!-- <i class="fa fa-eye fa-lg"></i> -->
              <input type="password" id="login-password" type="email" placeholder="비밀번호" />
          </div>
      </div>
  </form>
  <div class="modal-footer">
      <button id="signup-btn" type="submit" class="btn">Close</button>
      <button type="button" class="btn btn-primary">로그인</button>
  </div>
  `
  );
});