나혼자 미슐랭 개발일지 #5 – 마이페이지 및 프로필 수정 기능 구현

범위: 사용자 정보 관련 백엔드 확장, 마이페이지 UI 구성, 프로필 수정 페이지 제작, API 연동

 

이전 개발일지(#4)까지는 리뷰 작성 및 리스트 기능 구현에 집중했다면,
이번에는 사용자 개인화 경험을 위한 "마이페이지"와 "프로필 수정" 기능을 새롭게 구축하였습니다.
이를 위해 백엔드와 프론트 모두 구조적 확장이 필요했고,
유저 데이터 모델 자체를 개선하여 더 많은 정보를 다룰 수 있도록 개선하였습니다.

 

 

1. 사용자 정보 모델 확장

🔸 Entity 변경 (User.java)

기존 User Entity는 로그인/회원가입 기반 정보만 있어 프로필 정보를 표현하기엔 한계가 있습니다.

이에 따라 아래 필드를 추가하였다.

profileImage	String	사용자 아바타 or 이미지 URL
region	String	활동 지역 (예: 서울 마포구)
introduction	String	자기 소개 (최대 35자 제한 고려)

⚠️ ddl-auto=update 설정으로 엔티티 수정 시 DB 자동 반영되도록 설정되어 있음!

 

 

 

2. 백엔드 API 확장 및 수정

🔸 DTO 수정

 

UserResponse.java

private String profileImage;
private String region;
private String introduction;

 

🔸 서비스 수정 (UserServiceImpl.java)

updateUser()에서 기존에 없던 3개 필드를 포함해 갱신되도록 수정:

user = User.builder()
        .id(user.getId())
        .username(request.getUsername())
        .email(request.getEmail())
        .password(request.getPassword())
        .profileImage(request.getProfileImage())
        .region(request.getRegion())
        .introduction(request.getIntroduction())
        .created(user.getCreated())
        .deleted(user.isDeleted())
        .build();

 

 

 

 

 3. 마이페이지 UI 개발 (MyPage.jsx)

주요 화면 구성

• 사용자 프로필 이미지 (이모지 대체)
• 닉네임 옆에 활동 지역 표기 testAccount01 | 서울 마포구
• 총 작성 리뷰 수: 내 맛집 11
• 최신 리뷰 3건만 최근 내가 간 곳에 표시
• 우측 상단의 프로필 수정 버튼으로 수정 페이지 이동

백엔드 연동

• GET /api/users/5 → 사용자 정보 불러오기
• GET /api/reviews/user/5?page=0&size=3 → 최신 리뷰 3개 로딩
• 총 리뷰 수는 totalCount 필드로 응답받음

useEffect(() => {
  const fetchUserInfo = async () => {
    try {
      const res = await axios.get(`/api/users/${userId}`);
      setUserInfo(res.data);
    } catch (err) {
      console.error("유저 정보 불러오기 실패:", err);
    }
  };

 

 

 

4. 프로필 수정 페이지 개발 (EditProfilePage.jsx)

 

구현 요소

• 입력 필드 구성: 닉네임, 자기소개(최대 35자), 활동지역
• 프로필 이미지 영역은 현재 이모지로 대체, 추후 업로드 기능 예정
• 저장 버튼 클릭 시 PUT /api/users/5로 사용자 정보 업데이트

GET / PUT API 연동

• 진입 시 기존 유저 정보 GET으로 세팅
• 저장 시 PUT 요청 전송

await axios.put("/api/users/5", {
    username: nickname,
    password: "1234",               // 임시 값
    email: "test01@google.com",      // 임시 값
    profileImage: "",
    introduction,
    region
});

 현재 구조 이슈

• UserRequest에서 @NotBlank 조건이 있어 email/password 미입력 시 에러 발생
• 추후 ProfileUpdateRequest로 분리 필요

 

구현 결과

• 유저 정보를 실시간으로 조회/갱신할 수 있는 개인화 UI 구현 완료
• 불필요한 하드코딩("희범박") 제거 → DB 기반 실시간 사용자 데이터 사용
• 마이페이지에 사용자 지역 정보 추가로 개인화 강화
• 저장 후 마이페이지로 redirect 되며 변경사항 즉시 반영됨

 

 

다음 할 일

• 로그인 / 회원가입 구현 → JWT 기반 인증 처리
• 리뷰 수정 / 삭제 기능
• 음식점 상세 페이지 제작 (지도 연동 포함)
• 유저 통계 페이지 (카테고리 비율, 평균 평점 등)