[Feat] 비회원 편지 전송

[yyypearl]

연관 이슈

close #170

개요

비회원 편지 전송 UI

guest 라는 params를 통해 회원/비회원 편지 작성 프로세스를 구분한다. (페이지 내부에서는 isGuest 라는 변수로 관리) accessToken으로 회원/비회원을 구분할 경우, 다음과 같은 문제가 발생하기 때문이다.

1. 토큰이 만료되거나 유효하지 않을 경우 → 이를 식별할 수 없다.
2. 정상 로그인한 회원의 경우도 비회원 편지 작성을 하고자 하는 경우 → 의도한 로직상으로는 고려하지 않아도 되는 경우이나 로그인을 한 유저(토큰을 가진 유저)가 뒤로가기 혹은 url 입력 등 /login 경로로 접속하여 비회원으로 편지 보내기 버튼을 누를 경우에는 토큰이 있더라도 비회원으로 편지 작성이 이루어져야 한다.

비회원 편지 작성 이후 회원가입 시 letterCode를 로컬스토리지에 저장하고 (anonymousSendLetterCode), 만약 닫기 버튼을 누를 경우 삭제한다.

✅ 작업 내용

• 비회원 편지 전송 처리 및 UI 변경
• 회원가입 BottomSheet UI 추가, OauthButton 컴포넌트 shape props 추가 (list)
• 편지 전달 완료 페이지 비회원 나가기 버튼 추가
• 편지 전달 완료 페이지 float 애니메이션 추가
• 비회원 편지 작성 API 연결 (letterCode 발급 위함)
• 파일 업로드 및 편지 공유 여부 확인 API 토큰 유무 관계 없도록 수정
• 회원가입 시 letterCode 전달

🖥 구현 결과

• 비회원 편지 전송 UI
  

• 비회원 편지 전송 후 회원가입 프로세스

20250519_003214.mp4

리뷰 요구사항

• 개요 부분에 비회원 편지 작성을 어떻게 구분할 것인지 이유와 함께 작성했습니다. 읽어보고 다른 방안이나 피드백이 있다면 알려주세요!

📝 기타 사항

_- TODO -> 완료

• 비회원 편지 전송 API (카카오 공유하기를 위한 letterCode 발급용) 연결
• 회원가입 이후 편지 저장 로직 API 연결 (백엔드 구현 방식에 따라 결정될 것 같아요. 편지 정보를 프론트에서 가지고 있다가 회원가입 시에 유저 정보로 저장하는 API를 쏠 수도 있고, letterCode를 회원가입 시에 보내서 그걸 바탕으로 서버에서 저장할 수도 있을 것 같습니다.)
• 이미지 파일 업로드 API 토큰 X 변경 (현재는 토큰이 반드시 필요하여 비회원시 이미지 업로드가 이루어지지 않음)_

- ETC

• 가끔 커밋할 때 어떤 단위로 해야할지 애매하거나 여러 파일에 걸쳐있어서 더 쪼갤 수 있는 작업들을 하나의 커밋으로 올리는 경우 있잖아요! 그럴 때 좀 더 자세한 내용을 기록하지 못해서 아쉬웠는데 이렇게 여러 줄로 commit message를 작성할 수 있더라구요! 어떤 작업을 했는지 직관적으로 보여서 필요에 따라 이렇게 작성해도 좋을 듯합니다.

[github-actions]

🎉 Deploy Preview

https://lettering-5us4rursy-yyypearls-projects.vercel.app
여기에서 배포 결과 확인하기

[github-actions]

🎉 Deploy Preview

https://lettering-dxebi8mkk-yyypearls-projects.vercel.app
여기에서 배포 결과 확인하기

[hyo-4]

float animation 잘 어울린다~ 멋진데🙌

[hyo-4]

guest 라는 param으로 구분하는 거 저도 좋은 것 같습니다~
코드 겹치는 부분도 많고 해서 회원 보내기랑 같은 파일에 넣는 게 맞는 거 같아요
commit 여러줄 적는 거 첨 알았는데 정말 유용한 정보....🙏🥺 맨날 커밋 뭐 적지 고민했는데 이제 밑에 주저리주저리 etc 달아야 ㅎㅎㅎ
편지 저장 로직은 개인적으로 후자가 깔끔하긴 하지만 백엔드가 어렵다면 프론트 측에서 처리해도 좋을 거 같아요~~