Part of your World

### 에러 노트: 툴팁 오버플로우 문제 해결

#### 문제 설명

툴팁이 테이블 내에 위치하며, 마우스를 오버할 때 툴팁이 테이블 범위 밖으로 표시되지 않는 문제입니다. 이는 툴팁이 표시될 때, 부모 컨테이너나 테이블의 `overflow` 속성 설정에 의해 툴팁이 테이블 영역을 벗어나지 못하는 현상입니다. 이로 인해, 툴팁이 잘리거나 겹쳐서 보여지지 않게 됩니다.

#### 원인

1. 테이블 및 부모 컨테이너에 설정된 `overflow` 속성이 툴팁이 테이블 영역을 벗어나지 못하게 제한하고 있기 때문입니다.
2. 툴팁의 `position` 설정이 제대로 되어 있지만, `overflow: hidden` 속성으로 인해 툴팁이 테이블 외부로 나오지 못합니다.

#### 해결 방법

테이블과 부모 컨테이너의 `overflow` 속성을 수정하여 툴팁이 테이블 범위를 벗어날 수 있도록 설정합니다.

##### 해결 방법:

1. **테이블(`.table.table-hover.disabilityHistory`)에 `overflow: visible` 추가**
    
    - 툴팁이 테이블 영역을 벗어날 수 있도록 `position: relative`와 `overflow: visible` 속성을 적용합니다.
2. **부모 컨테이너(`.wrap-tbl.disabilityHistory`)에 `overflow: visible` 추가**
    
    - 부모 컨테이너가 툴팁을 가리지 않도록 `position: relative`와 `overflow: visible` 속성을 설정합니다.
3. **툴팁 컨테이너와 텍스트 스타일 개선**
    
    - 툴팁이 화면 외부로 나가지 않도록 적절한 `position` 및 `z-index` 값을 설정하여 툴팁이 다른 요소 위에 표시되도록 합니다.

/* 테이블에 스크롤이 생기지 않도록 함 (옵션) */
.table.table-hover.disabilityHistory {
  position: relative; /* 툴팁이 테이블 밖으로 나올 수 있도록 */
  overflow: visible; /* 테이블 범위를 넘어가는 내용은 보이도록 설정 */
}

/* 테이블 부모 컨테이너에서 overflow 설정 */
.wrap-tbl.disabilityHistory {
  position: relative; /* 툴팁이 테이블 밖으로 나올 수 있도록 */
  overflow: visible; /* 테이블 부모 컨테이너가 넘치는 툴팁을 보이게 설정 */
}

/* 툴팁을 감싸는 요소 스타일 */
.tooltip-container {
  position: relative;
  display: inline-block;
  text-align: center;
  vertical-align: middle; /* 이미지를 세로 중앙에 정렬 */
  overflow: visible; /* 툴팁이 테이블 셀을 넘어갈 수 있도록 설정 */
}

/* 툴팁 텍스트 스타일 */
.tooltip-container .tooltip-text {
  visibility: hidden; /* 기본적으로 툴팁 숨김 */
  width: auto; /* 최소 너비 설정 */
  min-width: 300px; /* 최소 너비 제한 */
  background-color: rgba(0, 0, 0, 0.75);
  color: #fff;
  text-align: center;
  border-radius: 5px;
  padding: 10px;
  position: absolute;
  z-index: 9999; /* 툴팁을 다른 요소들 위에 표시 */
  bottom: 50%; /* 툴팁을 요소 위쪽에 표시 */
  left: 50%; /* 툴팁을 가운데로 표시 */
  transform: translateX(-50%); /* 툴팁을 정확히 가운데로 이동 */
  opacity: 0;
  transition: opacity 0.3s; /* 툴팁의 부드러운 전환 효과 */
  white-space: normal;
  word-wrap: break-word;
}

/* 마우스 오버 시 툴팁 보이기 */
.tooltip-container:hover .tooltip-text {
  visibility: visible;
  opacity: 1;
}

<div class="wrap-tbl disabilityHistory">
  <table class="table table-hover disabilityHistory" id="errorHistoryTable">
    <tr>
      <td class="tooltip-container" style="text-align: center;">
        <img src="https://csms.moderntec.kr/image/mouseover.jpeg" style="width: auto; height: 50px;" />
        <span class="tooltip-text" th:text="${er.cntrm}">툴팁 텍스트</span>
      </td>
    </tr>
  </table>
</div>

### 에러 노트: Thymeleaf 템플릿 처리 오류

#### 문제 설명

- **에러 메시지**:
    

    `[THYMELEAF][http-nio-9090-exec-1] Exception processing template 
    "alimTalk/countAlimCenter": Error resolving template [alimTalk/countAlimCenter], 
    template might not exist or might not be accessible by any of the configured 
    Template Resolvers`

    
- **원인**: HTML을 반환하지 않고 결과만 받아야 하는 상황에서 발생한 에러입니다. `Thymeleaf` 템플릿 처리 과정에서 지정한 템플릿을 찾을 수 없거나 접근할 수 없다는 의미입니다.

#### 발생 상황

HTML 대신 JSON만 반환하는 컨트롤러에서 `Thymeleaf` 템플릿을 처리하려고 할 때 발생합니다. 이러한 경우, 불필요한 템플릿 처리를 시도하게 되어 오류가 발생합니다.

#### 해결 방안

- JSON 응답을 반환하려면 `@ResponseBody` 어노테이션을 사용하여 컨트롤러 메소드가 JSON 형식으로 응답하도록 설정해야 합니다.

#### 예시 코드

 @GetMapping("/alimTalk/countAlimCenter")     
 @ResponseBody     public ResponseEntity<MyResponse> getCountAlimCenter() {         
 MyResponse response = new MyResponse();         
 // 결과 설정         
 return ResponseEntity.ok(response);     
 } 
 }`

### 주의사항

- `@RestController`를 사용하면 모든 메소드에 자동으로 `@ResponseBody`가 적용되어 JSON 응답을 쉽게 반환할 수 있다.
- Thymeleaf를 사용할 필요가 없는 상황에서는 꼭 `@ResponseBody`나 `@RestController`를 사용하는 것을 잊지 말기!

#### 문제 설명

- **문제**: JavaScript에서 입력 필드 초기화 후에도 이전 값이 유지되는 문제가 발생.
- **상황**: 입력 값에 대한 예외 처리를 구현한 후, 초기화가 이루어지지 않아 문제가 발생.
- **확인 사항**: 콘솔 로그를 통해 값 변경이 정상적으로 이루어졌음을 확인했으나, `getElementById` 호출 시 이전 값을 읽어오는 현상 발견.

#### 예외 처리 로직

- 입력 값에 따른 예외 처리 필요:
    - **입력 값 > 보유 포인트**
    - **입력 값 < 보유 포인트**
    - **입력 값 = 보유 포인트**

#### 해결 방안

- 이벤트 리스너를 각 입력 필드에 재등록하여 상태를 업데이트함으로써 문제 해결.
- 아래와 같이 입력 필드에 대한 이벤트 리스너를 추가하여 입력 값 변경 시 적절한 함수를 호출하도록 구현함.

document.getElementById("pointDataInput").addEventListener("input", updatePoint); 
document.getElementById("priceData").addEventListener("input", updatePrice); 
document.getElementById("socData").addEventListener("input", updatePrice);   
document.getElementById("stationFee").addEventListener("input", updatePrice);

#### 추가 조치

- 초기화 함수에서 이벤트 리스너를 재등록하는 로직을 추가하여, 초기화 후에도 정상적으로 동작하도록 수정.
- 예를 들어, `clean` 함수에 이벤트 리스너 재등록 로직을 포함.