Skip to content

Conversation

@mimizae
Copy link
Collaborator

@mimizae mimizae commented Feb 24, 2025

주요 작업 내용

  • 유저 회원가입 시, 이용약관 동의 후의 취향 선택 UI를 구현했습니다.
  • 회의 내용을 바탕으로, 취향 선택에 이용될 스타일 이미지들을 AI로 생성해 사용하려 했으나... 불쾌한 골짜기의 산을 넘을 수 없어 임시 방편으로 구글링한 사진들로 대체했습니다... (Pm님도 알고 계십니다...) 또, 이미지들은 public 폴더에 style 폴더를 만들어 그곳에 배치했습니다. (이것 어떻게 생각하시나요.)
  • 회원가입 시, 유저의 취향에 대한 정보를 추가적으로 받음에 따라 유저 정보 수정, 유저 정보 조회, jwt를 이용한 유저 정보 조회 등의 dto에 userStyleTags을 추가했습니다.
  • styleImages를 배열 형태의 상수로 만들어 무작위 순서로 배치하고 이를 순회하며 각 스타일 이미지를 동적으로 렌더링했습니다. 이는 util 폴더에 배치하고 import 해서 사용했습니다. (이것 어떻게 생각하시나용.)
  • 다른 OTT나 옷 쇼핑몰 웹 사이트를 참고해 마우스 호버 시 이미지들이 확대 및 축소되는 효과를 주어 좀 더 생동감 있게 만들었습니다.

기타 작업 내용

  • 이용약관 동의 화면에서 문구들을 가리키는 커서 모양을 포인터로 변경했습니다.
  • 앞서 dto 수정으로 인한 빌드 오류 수정을 위해 프로필 수정 페이지에서 setUserStyletags 상태를 만들어 userInfo에서 userStyleTags 배열을 받아와 해당 상태를 업데이트 했습니다. 그 후, handleSave()에서 userStyletags 포함하여 저장하게 했습니다. 참고 부탁드립니닷.

코드 리뷰 포인트

  • 일단 디자인이 없어서 문구부터 전부 제 마음대로 했는데 디자인적인 면에서 피드백 마음껏 해 주시길 부탁드립니닷!!!!!!!!

작업 화면

  • 영상을 찍어서 올리고 싶었는데 왜 안 올라가는 것일까요 😭😭😭

@mimizae mimizae added the feat New feature label Feb 24, 2025
@mimizae mimizae requested a review from gustn99 February 24, 2025 14:02
@mimizae mimizae self-assigned this Feb 24, 2025
@mimizae mimizae requested a review from lalaurrel February 24, 2025 14:13
Copy link
Collaborator

@lalaurrel lalaurrel left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생하셨습니다 미미재양 🫧

style: { mobile: 'title3-bold', tablet: 'title2-bold', desktop: 'title1-bold' },
}}
>
스타일을 선택해주세요!
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

${nickname}님의 OOTD를 선택해주세요! 는 어떠한지!!!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그 의미는 오늘의 옷 차림을 선택해 달라는 의미이니 OOTD 보다는 ${nickname}님의 취향을 알려주세요! 이런 걸로 수정할까요? 이런 부분에 있어서는 약간? 기획... 이라는 느낌이 드니... PM과 파트장님의 의견도 필요합니닷 헤헤 @gustn99 @happbob

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

후자로 갑시다

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

수정했습니다~!

style: { mobile: 'caption1-medium', tablet: 'body2-medium', desktop: 'body1-medium' },
}}
>
OODD가 당신의 취향을 분석하여 맞춤 스타일을 추천해 드릴게요.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

자신이 고른 옷 스타일과 유사한 이성을 추천해주는건가요?!
이것도 자신의 스타일 태그를 선택하는 페이지랑 자신이 원하는 이성의 스타일을 선택하는 페이지를 세분화해두면 나중에 홈에 띄울 때나 추천해줄 때 더 수월하고
유저 입장에서도 자기가 원하는 스타일을 직접 선택하고 추천받을 수 있어서 좋을 것 같다는 생각!

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

네넹 스트릿, 페미닌 등을 골랐으면 해당 스타일의 게시글을 가진 이성을 추천해주는 거라 이해했습니당
근데 자신의 스타일 태그를 회원가입 때 선택하는 건 좋은 의견인 것 같아요!!! 현재는 그냥 게시글의 태그를 바탕으로 남의 스타일을 분석해서 추천해 주는 건데 게시글의 스타일이 너무 중구난방일 수도 있으니 😅 @happbob

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

좋은 의견입니다. 다만 스타일 태그를 회원가입 때 선택할 때 그 스타일이 어떤 느낌인지 모르는 상황이 있을 수 있어 지금과 같은 기획을 한것이니 해당 리스트 카테고리를 보여주는 기준에 대한 정책을 개선시키는 방향이 좋을 듯합니다.

Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

그럼 이건 다음 스프린트나 목요일 회의에서 정하나요?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

이건 백로그로 등록 시켜두고 스프린트 회의때 얘기해보죠

Copy link
Collaborator

@gustn99 gustn99 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

깔끔하네요 고생하셨습니다~!

Comment on lines +49 to +70
const handleSubmitBtnClick = async () => {
const selectedCategories = Object.keys(clickedImages)
.filter((id) => clickedImages[Number(id)]) // 클릭된 이미지만 필터링
.map((id) => styleImages.find((img) => img.id === Number(id))?.category) // category 값 가져오기
.filter((category): category is string => !!category); // undefined 제거

const requestData: Partial<PatchUserInfoRequest> = {
userStyletags: selectedCategories,
};
console.log(requestData);

try {
const data = await patchUserInfoApi(requestData, currentUserId);
console.log(data);
navigate('/');
} catch (error) {
console.error('API 요청 실패:', error);
setModalMessage('스타일 선택 중 오류가 발생했습니다.');
console.log(requestData);
setIsModalOpen(true);
}
};
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

requestData에서 userStyletags 외에 다른 데이터가 포함될 여지가 없다면 Pick을 사용하는 편이 타입 안정성 측면에서 더 좋을 것 같기는 합니다!

@gustn99 gustn99 merged commit 7729d62 into dev Feb 27, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

feat New feature

Projects

None yet

Development

Successfully merging this pull request may close these issues.

5 participants