Cursor AI(커서 AI)로 만든 게시판 웹서비스 - 사용자 프로필 기능 및 Display 명 수정 기능

지난 주 게시판 웹서비스 만들기 - 구글로그인 연동에 이어서 이번에는 기능을 조금 더 확장해 본 경험에 대하여 포스팅합니다.

프로필 기능 및 Display 명 수정 기능

게시판에 글을 쓰기 위해서는 사용자의 프로필이 필요합니다. 그래서 사용자의 프로필을 관리(조회)할 수 있는 프로필 페이지를 추가하고 글 작성자의 정보를 노출할 수 있는 Display 명을 정보구조에 추가하였었습니다. 그리고 Display 명을 변경하도록 기능을 수정하였습니다.

 

사용자 프로필 기능 및 Display 명 수정 기능 - Cursor AI 프롬프트

지난 포스팅에서도 작성하였지만 생성된 md 파일들을 그대로 Cursor AI에 넣고, 아래와 같은 방식으로 진행하면서 바로 사용자 프로필을 추가하고 글 작성자의 Display 명을 수정할 수 있는 기능을 반영하였습니다.

👉 결과물: https://board-app--board-app-7d889.us-east4.hosted.app/

로그인 사용자가 프로필을 클릭하면 프로필 정보를 조회하고 수정할 수 있는 화면을 제공하려고 합니다. 

# 로그인 사용자 프로필 조회 시 조회 항목과 수정 가능 항목
## 조회 항목
### createdAt
#### 예: 2026년 2월 3일 17시 5분 32초 (한국시간)
### displayName
#### 예: (예시 이름)
### email
#### 예: (예시 이메일주소)
### role
#### 예: user
## 수정 가능 항목
### displayName
#### 예: (예시 이름)
#### 10글자 이내로 입력 가능
#### 10글자 이내 입력 가능 힌트 제공
#### 10글자 이상 입력 시 입력 불가

위에 내용을 참고하여 수정사항을 제안해주세요.

 

사용자 프로필 기능 및 Display 명 수정 기능 - Cursor AI 개발 완료

프로필 페이지가 추가되었습니다. 변경사항을 잘 확인합니다. (조회 항목, 수정 가능 항목)

 

사용자 프로필 기능 및 Display 명 수정 기능 - 반영 내용

개발 후 git commmit, git push 를 통해서 배포를 완료한 후에 확인하였습니다.

게시판 조회

"닉네임수정해요" 프로필 조회

"닉네임수정해요" 프로필을 "닉네임바꾸기"로 수정

기존 게시판 글 목록에서도 수정된 닉네임 "닉네임바꾸기"로 수정된 것 확인 완료

 

이슈 발생 후 해결

프로필 생성까지는 한 번에 바로 적용이 되었지만 Display 명을 바꾸는 것은 한 번에 잘 실행이 되지 않았습니다. 그래서 몇 번의 수정이 있었는데, Firestore 보안 규칙에서 게시글 수정은 작성자 본인만 가능하도록 되어 있었습니다. 이번에도 Cursor AI 의 도움을 받아서 에러 핸들링을 개선하고 디버깅 정보를 추가하였습니다. 이래서 점점 개발쪽 공부를 계속하게 될 수 밖에 없게 되네요.

 

약간의 시행착오가 있었지만 무사히 원하는 기능을 완성하였습니다. 생각보다 참 쉽죠잉~!?

이렇게 또 한 발자국 전진하게 되었습니다. 바이브코딩 하이팅!