🔗 프로필 조회와 단축어 기능 구현기 – 데이터 구조와 정렬까지

이번에는 두 가지 기능을 새롭게 추가했다:

• 다른 사용자의 프로필을 간편하게 확인할 수 있는 FollowProfile
• 자주 쓰는 문장을 등록하고 한글 자음 기준으로 정렬해서 볼 수 있는 Shortcut 기능
• 단순히 UI만 구성한 게 아니라, 실제 API 연동부터 정렬 로직, 상태 저장까지 꽤 다양한 개념을 함께 다뤘다.

👀 FollowProfile: 다른 유저의 프로필을 팝업으로 보여주기

팔로잉한 유저를 눌렀을 때, 해당 유저의 프로필 정보를 팝업 형식으로 불러오는 컴포넌트를 만들었다. 핵심은 다음과 같은 흐름이다:

1. 📦 데이터 요청 흐름

const profileWing = GetProfileByUserIDGameIDWing(userId, MAPLEGAMEID);
const profileResponse = await shootingStar.launch<ProfileData>(profileWing);

Wing으로 API 요청 정보를 구성하고, ShootingStar로 실제 요청을 보낸다

받은 데이터는 ProfileData 타입으로 구조화되어 들어온다

2. 📐 받아온 데이터를 가공해서 UI에 표시

1. 프로필 이름, 갱신일, 대표 캐릭터의 레벨, 전투력, 유니온 등을 추출

2. getImagePathFromProfile 유틸 함수로 캐릭터 이미지 결정

3. formatPower()로 전투력 숫자를 억, 천만 단위로 포맷팅

3. 💡 팝업 디자인과 애니메이션

• Popup은 화면 하단에 고정된 형태로 뜨도록 position: fixed

• 슬라이드 업/다운 애니메이션은 transform: translateY()와 transition으로 제어

✍️ Shortcut: 단축어 저장 + 한글 자음 정렬

📥 단축어 등록 흐름

사용자가 입력한 문구(input)와 단축어(output)을 저장하고 싶었기 때문에,
기존의 프로필 정보에 shortcut_words 배열을 추가해서 저장했다.

const updatedShortcuts = [
  ...(myProfile.shortcut_words || []),
  { input: text, output: shortcut }
];

await updateMyProfile({ shortcut_words: updatedShortcuts });

• 이 작업은 AddShortcutContainer.tsx에서 처리되며, 저장 버튼 클릭 시 실행됨

• 서버에는 updateMyProfile 유틸함수를 재활용해서 전송

📖 단축어 정렬 로직: 한글 초성 기준

const getHangulInitial = (char) => {
  const initialLetters = ["ㄱ", "ㄲ", "ㄴ", ...];
  const code = char.charCodeAt(0);

  if (code >= 0xAC00 && code <= 0xD7A3) {
    const index = Math.floor((code - 0xAC00) / 588);
    return initialLetters[index];
  }
  return char;
};

한글 음절은 유니코드 상에서 초성/중성/종성으로 조합되어 있고,

초성 하나의 단위는 588개의 블록마다 반복되기 때문에 Math.floor((code - 0xAC00) / 588)로 초성을 계산함

이 방식으로 단축어들을 ㄱ ~ ㅎ 순서로 그룹화 가능함

📑 그룹화된 렌더링 구조

const groupedShortcuts = shortcutList.reduce((acc, shortcut) => {
  const firstChar = getHangulInitial(shortcut.output[0]);
  if (!acc[firstChar]) acc[firstChar] = [];
  acc[firstChar].push(shortcut);
  return acc;
}, {});

단축어 출력값의 첫 글자를 기준으로 초성을 구분하고,

그 초성을 키로 해서 묶어 렌더링할 수 있도록 구성

📱 UI 구성

그룹 이름(초성)을 크게 보여주고,

각 단축어는 좌측에 output, 우측에 input으로 보여주는 시각적 구성

🔍 기술적 포인트 요약

기능						기술 포인트

FollowProfile			Wing + ShootingStar 조합으로 유저 데이터 요청 팝업 애니메이션 구현 (translateY + transition)

Shortcut 등록			기존 프로필 구조 재사용 (updateMyProfile로 저장)

정렬						유니코드 기반 초성 추출 알고리즘으로 ㄱ~ㅎ 정렬 구현

🔜 다음 목표: 기능 확장 방향

💬 Shortcut → 채팅 입력에 자동 적용 예정

현재는 단축어 목록만 확인 가능한 상태지만,

향후에는 채팅 입력란에서 단축어를 자동으로 확장하거나,

단축어 추천 기능처럼 연결해서 실시간 치환 기능을 넣는 걸 목표로 하고 있다

예: "ㄱㅅ" 입력 시 자동으로 "감사합니다"로 변환되도록 구현 예정

🔁 FollowProfile → 프로필 페이지로 이동 가능

현재 FollowProfile은 팝업으로 정보를 보여주는 데에 그치지만,

유저 이름을 클릭하면 해당 유저의 전체 프로필 화면으로 라우팅 되도록 구현되어 있다

onClick={() => navigate(`/trade-profile?userID=${userId}&title=${nickname}`)}

이렇게 하면 팝업에서 전체 페이지로 자연스럽게 연결되는 UX 흐름이 완성된다

✅ 회고

FollowProfile은 UI/UX 측면에서 사용자 정보 접근성을 향상시켰고,

Shortcut은 실사용자가 자주 쓰는 문장을 빠르게 등록하고 확인할 수 있도록 하는 실제 유용한 기능이었다

특히 한글 정렬을 구현하면서 유니코드의 구조를 직접 다뤄본 게 큰 학습이었고, 단순히 정렬 함수가 아닌 한국어에 특화된 사용자 경험을 어떻게 제공할 수 있을지 고민하는 계기가 되었다.

단순한 기능 하나에도 API 설계, 상태 처리, 텍스트 분해 알고리즘까지 다양한 기술이 스며든다는 걸 다시 체감한 작업이었다.