[Thymeleaf] 타임리프에서 핸드폰 번호 형식 변환하기

Develop

[Thymeleaf] 타임리프에서 핸드폰 번호 형식 변환하기

issuemaker99 2025. 3. 13. 11:36

728x90

1. 개요

Spring Boot에서 Thymeleaf를 사용하여 화면을 구성할 때, 사용자 핸드폰 번호를 01012345678 형식으로 저장한 후 화면에 010-1234-5678처럼 변환하여 출력하는 방법을 알아보겠습니다.

한국의 핸드폰 번호는 다음과 같은 패턴을 따릅니다:

맨 앞자리(3자리): 010, 011, 016 등
가운데 자리(3~4자리): 123, 1234
마지막 자리(4자리): 5678

이를 고려하여 타임리프에서 쉽게 변환하는 방법을 구현해 보겠습니다.

2. 타임리프에서 핸드폰 번호 변환하는 방법

타임리프에서 문자열을 변환하기 위해서는 #strings 유틸리티 또는 커스텀 유틸리티 함수를 사용할 수 있습니다.

2.1 타임리프 내장 유틸리티 사용 (#strings)

#strings.substring을 이용하여 핸드폰 번호를 변환할 수 있습니다.

<p th:text="${#strings.substring(phoneNumber, 0, 3) + '-' + #strings.substring(phoneNumber, 3, phoneNumber.length() - 4) + '-' + #strings.substring(phoneNumber, phoneNumber.length() - 4)}"></p>

이 방식은 전화번호 길이에 따라 유연하게 대처하기 어려울 수 있습니다. 따라서, 보다 확장성이 좋은 방법으로 커스텀 유틸리티 함수를 사용해 보겠습니다.

2.2 유틸리티 메서드 활용

스프링 부트에서 핸드폰 번호를 변환하는 메서드를 만든 후, 타임리프에서 이를 호출하도록 설정할 수 있습니다.

2.2.1 핸드폰 번호 포맷 변환 유틸리티 클래스

import org.springframework.stereotype.Component;

@Component
public class PhoneNumberFormatter {
    public String formatPhoneNumber(String phoneNumber) {
        if (phoneNumber == null || phoneNumber.length() < 10 || phoneNumber.length() > 11) {
            return phoneNumber; // 유효하지 않은 번호 그대로 반환
        }
        
        String first = phoneNumber.substring(0, 3);
        String middle;
        String last = phoneNumber.substring(phoneNumber.length() - 4);
        
        if (phoneNumber.length() == 10) {
            middle = phoneNumber.substring(3, 6); // 3자리
        } else {
            middle = phoneNumber.substring(3, 7); // 4자리
        }
        
        return first + "-" + middle + "-" + last;
    }
}

2.2.2 타임리프에서 유틸리티 메서드 사용

이제 PhoneNumberFormatter 클래스를 타임리프에서 사용할 수 있도록 컨트롤러에서 모델에 추가해 줍니다.

import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;

@Controller
public class PhoneController {
    private final PhoneNumberFormatter formatter;

    public PhoneController(PhoneNumberFormatter formatter) {
        this.formatter = formatter;
    }

    @GetMapping("/phone")
    public String showPhoneNumber(Model model) {
        String rawPhoneNumber = "01012345678";
        model.addAttribute("formattedPhone", formatter.formatPhoneNumber(rawPhoneNumber));
        return "phone"; // phone.html 템플릿을 렌더링
    }
}

2.2.3 타임리프 템플릿 (phone.html)

<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <title>핸드폰 번호 포맷팅</title>
</head>
<body>
    <p>핸드폰 번호: <span th:text="${formattedPhone}"></span></p>
</body>
</html>

이 글에서는 타임리프에서 핸드폰 번호를 010-1234-5678과 같은 형식으로 변환하는 방법을 알아보았습니다.

**내장 유틸리티 #strings**를 사용하여 간단한 변환 가능
커스텀 유틸리티 클래스를 활용하여 보다 확장성 있고 유지보수하기 쉬운 코드 작성 가능

LIST