25-03-06

📌 Daily Report

https://github.com/ssginc-be/DOKI/issues/38

📌 프로젝트 상황

운영자 -> 이용자 측의 SSE 토스트 UI가 얼추 끝났다.

그런데 문제가 생겼다.

생긴게 영 마음에 들지 않는다 🤨

애니메이션은 맛있지만 도메인 생각하면 너무 통통 튀는것 같음.

📌 스크립트 로딩 순서 고려하기

StoreController.java

// 비회원이거나 로그인한 이용자 (null 체크가 맨 위에 있어야 함)
if (role == null || role.equals("MEMBER")) {
    ...
    model.addAttribute("memberCode", code);

    return "index"; // 팝업스토어 목록 페이지로 이동
}

index.html은 layout-member.html을 레이아웃으로 사용하고 있는데,

layout-member.js에서 접근하는 memberCode가 undefined운데피네로 찍히지 않으려면, 후자와 같이 스크립트 로딩 순서를 조정해야 한다.

📌 의외로 근본 있는 replaceChild

놀랍게도 레퍼런스에 의거하면, replaceChild는 (dest, src) 형식의 근본을 따르고 있었다.

다시 말해 newNode가 2번째 인자로 들어간다는 뜻이다.

// 토스트 뷰 컨트롤
function showAlarmToast(message, dateTime) {
    // parent div (toast box)
    const notiToastBoxDiv = document.getElementById('noti-toast-box');

    // old div
    const notiToastDataDiv = document.getElementById('noti-toast-data');
    const notiToastDatetimeDiv = document.getElementById('noti-toast-datetime');

    // new div
    const newDataDiv = document.createElement("div");
    newDataDiv.classList.add('noti-toast-data');
    newDataDiv.appendChild(document.createTextNode(message));

    const newDatetimeDiv = document.createElement("div");
    newDatetimeDiv.classList.add('noti-toast-datetime');
    newDatetimeDiv.appendChild(document.createTextNode(dateTime));

    // div 교체
    notiToastBoxDiv.replaceChild(notiToastDataDiv, newDataDiv); // error
    notiToastBoxDiv.replaceChild(notiToastDatetimeDiv, newDatetimeDiv); // error

    // 토스트 박스 보여주기
    notiToastBoxDiv.classList.add("active");

    // 5초 후 토스트 박스 숨기기
    setTimeout(() =>{
        notiToastBoxDiv.classList.remove("active");
    }, 5000)
}

근데 결국엔 replaceWith라는 더 모던한 방식이 있어서 이를 채택했다.

그리고 새 노드에 id 지정하는거 까먹어서 (-> 최초 replace 이후 getElementById 호출시 터짐)

해당 코드도 추가했다.

// 토스트 뷰 컨트롤
function showAlarmToast(message, dateTime) {
    console.log('show toast'); // logging
    // parent div (toast box)
    const notiToastBoxDiv = document.getElementById('noti-toast-box');

    // old div
    const notiToastDataDiv = document.getElementById('noti-toast-data');
    const notiToastDatetimeDiv = document.getElementById('noti-toast-datetime');

    // new div
    const newDataDiv = document.createElement("div");
    newDataDiv.classList.add('noti-toast-data');
    newDataDiv.id = 'noti-toast-data';
    newDataDiv.appendChild(document.createTextNode(message));

    const newDatetimeDiv = document.createElement("div");
    newDatetimeDiv.classList.add('noti-toast-datetime');
    newDatetimeDiv.id = 'noti-toast-datetime';
    newDatetimeDiv.appendChild(document.createTextNode(dateTime));

    // div 교체
    notiToastDataDiv.replaceWith(newDataDiv);
    notiToastDatetimeDiv.replaceWith(newDatetimeDiv);

    // 토스트 박스 보여주기
    notiToastBoxDiv.classList.add("active");

    // 5초 후 토스트 박스 숨기기
    setTimeout(() =>{
        console.log('hide toast'); // logging
        notiToastBoxDiv.classList.remove("active");
    }, 5000)
}

📌 타임리프 동적 class 추가

해당 방법으로 가능하다고 한다.

📌 눈물나는 th border-radius 적용하기

table에 지정한 border-collapse: collapse; 속성과 radius 속성이 충돌한다더라.

box-shadow와 선택자 노가다로 겨우 해결했는데

겨우 해결한게 스타일링이어서 현타가 왔다. CSS 표준이 많이 발전하길 바람...

❌ 응 안먹히는 코드

table {
    width: 100%;
    border-collapse: collapse;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
    margin-bottom: 48px;
}

✔️ 먹히는 코드

th {
    font-family: "Pretendard", sans-serif;
    color: #6C6C71;
    background-color: #FCFCFC;
    font-weight: 600;
    font-size: 13px;
    padding: 13px 16px;
    text-align: left;
}
th:first-child {
    border-top-left-radius: 6px;
    box-shadow: 0 0 0 1px #E2E2E9;
}
th:last-child {
    border-top-right-radius: 6px;
    box-shadow: 0 0 0 1px #E2E2E9;
}
th:not(:last-child) {
    border-right: 1px solid #E2E2E9;
}
th:not(:first-child):not(:last-child) {
    box-shadow: 0 -1px 0 #E2E2E9, 0 1px 0 #E2E2E9;
}