[♻️ Refactor] user 코드 개선 - ("use client" 버전)

[aahreum]

👀 작업 개요

• next.js app-router로 프로젝트 세팅해서 작업했습니다!
• 중급 프로젝트 때 사용했던 api 주소 그대로 사용했습니다. (taskify)
• 토큰 검증 로직..은 어떻게 해야할 지 감이 안잡혀서 userData를 가져올 때 어떻게 코드를 분리해야하는가?에 초점을 맞춰서 작업했습니다.
• 간단하게 로컬스토리지에 토큰 있다고 가정하고 작업했는데, 이렇게 하면 ssr을 살릴수가 없어서 이 부분은 조금 더 고민해보고 다시 개선 PR 올리겠습니다!

🔥 주요 변경 사항

• DDD 구조로 폴더를 구성해보았습니다. (작업 과정 중에 헷갈렸던 부분은 README에 추가로 정리해두었습니다)

1. 레이어 구조 분리 (Clean Architecture)

아래와 같이 user 도메인을 application / domain / infrastructure / ui로 재구성했습니다.

📦features
 ┗ 📂user
    ┣ 📂application        // 유스케이스 정의
    ┣ 📂domain             // 비즈니스 규칙 (향후 확장 대비)
    ┣ 📂infrastructure     // API, storage, DTO 등 기술 의존 코드
    ┗ 📂ui                 // React 훅 및 UI

2. Infrastructure Layer 분리

✔ user.api.ts

기존 페이지 안에 있던 API 호출을 인프라 계층으로 이동

export const getUserData = async (): Promise<UserDto> => {
  const res = await api.get<UserDto>("/users/me");
  return res.data;
};

✔ user.dto.ts

서버 응답 모델(DTO)을 별도 파일로 분리

✔ tokenStorage.ts

localStorage 직접 접근을 UI에서 제거하고 인프라 계층으로 이동

3. Application Layer 생성 (Use Case)

application layer의 역할을 아직 잘 이해를 못 한 것 같긴 합니다..
UI가 applicationLayer만 호출해야해서 연결하는 역할로 getUserData 함수를 실행하는 함수를 추가했습니다.

export async function getUserProfile() {
  return await getUserData();
}

4. UI Layer에서 데이터 패칭 로직 제거

useUserProfile 훅을 만들어 UI 레이어에서 데이터 패칭을 담당하던 로직을 이 훅에서 관리하도록 변경했습니다.

const { user, error } = useUserProfile();

테스트 결과

accessToken 없을 때 (/not-found로 이동)

accessToken 있을 때

[looks32]

어떻게든 리뷰해보려고 몇번을 읽어보았는데
변화하는 것들이 너무 많고 기존의 것을 가져오시다보니
이전의 히스토리도 엮여있는 게 있고
구체적으로 어떤것이 변화하였는지 표기로도 알 수 없어서
흐름이 이해가 가지 않아서 리뷰하기 어려울 것 같습니다.

내일 자세한 얘기를 들으면 더 좋을 것 같습니다!

고생 많으셨습니다!