[GGFE-194] 랜덤아이템 뽑기 애니메이션

[hyobb109]

📌 개요

• 프로필 이미지띠, 배경 모달 뽑기 애니메이션

💻 작업사항

• 뽑기 버튼 클릭시 뽑기 애니메이션을 볼 수 있습니다
• 이미지띠는 PlayerImage 컴포넌트를 활용했고, 배경색은 색상과 색상 이름만 볼 수 있도록 했습니다. 색상이름은 현재 임의로 정했습니다.
• api 응답으로 뽑은 색상을 받아서 preview를 볼 수 있습니다
• 공 튀기고 꽃가루 날리는 애니메이션을 추가했습니다

[parksangmin1543]

와 수고많으셨습니다. 애니메이션이 이쁘네요. 이후에 애니메이션이 더 추가되는 걸까요?

[PHJoon]

애니메이션 확인했습니다!! 공 잘 튀고 미리보기 자연스럽게 보여주는 효과도 예쁘네요!! 고생하셨습니다!! 👍👍

[hyobb109]

꽃가루 추가하고 다시 올리겠습니다!

[PHJoon]

꽃가루 애니메이션 대박이네요! 완전 예쁩니다! 고생하셨습니다!!

[yoouyeon]

컨페티 추가하니까 훨씬 뽑기 느낌나고 좋은 것 같네여 👍👍 수고하셨습니다!!! 😆

[yoouyeon]

여기 맵의 구성요소들이 모두 string으로 되어 있는데, 나중에 변경되거나 하면 꼬일 수 있을 것 같아서 요런 식으로 앞에 key랑 value 모두 string 리터럴 타입으로 바꾸는게 더 안전할 것 같아요!

Suggested change

	const colorList = new Map([
	['BASIC', 'BASIC'],
	['COLOR1', 'TRANQUIL'],
	['COLOR2', 'BLUE GREEN'],
	['COLOR3', 'MIDNIGHT'],
	['COLOR4', 'ORANGE'],
	['COLOR5', 'GRASS GREEN'],
	['COLOR6', 'LEMON BLUE'],
	['COLOR7', 'DRACULA'],
	['COLOR8', 'MINT GREEN'],
	['COLOR9', 'STEEL GRAY'],
	['COLOR10', 'BLOOD RED'],
	['COLOR11', 'BLUE SKY'],
	['COLOR12', 'OCEAN BLUE'],
	['COLOR13', 'PINK BLUE'],
	['COLOR14', 'SUNSET PINK'],
	['COLOR15', 'DARK NAVY'],
	['COLOR16', 'ORANGE GREEN'],
	]);
	type colors = 'BASIC' | 'COLOR1' | 'COLOR2' | 'COLOR3' | 'COLOR4' | 'COLOR5' | 'COLOR6' | 'COLOR7' | 'COLOR8' | 'COLOR9' | 'COLOR10' | 'COLOR11' | 'COLOR12' | 'COLOR13' | 'COLOR14' | 'COLOR15' | 'COLOR16';
	type backgrounds = 'BASIC' | 'TRANQUIL' | 'BLUE GREEN' | 'MIDNIGHT' | 'ORANGE' | 'GRASS GREEN' | 'LEMON BLUE' | 'DRACULA' | 'MINT GREEN' | 'STEEL GRAY' | 'BLOOD RED' | 'BLUE SKY' | 'OCEAN BLUE' | 'PINK BLUE' | 'SUNSET PINK' | 'DARK NAVY' | 'ORANGE GREEN';
	const colorList: Map<colors, backgrounds> = new Map([
	['BASIC', 'BASIC'],
	['COLOR1', 'TRANQUIL'],
	['COLOR2', 'BLUE GREEN'],
	['COLOR3', 'MIDNIGHT'],
	['COLOR4', 'ORANGE'],
	['COLOR5', 'GRASS GREEN'],
	['COLOR6', 'LEMON BLUE'],
	['COLOR7', 'DRACULA'],
	['COLOR8', 'MINT GREEN'],
	['COLOR9', 'STEEL GRAY'],
	['COLOR10', 'BLOOD RED'],
	['COLOR11', 'BLUE SKY'],
	['COLOR12', 'OCEAN BLUE'],
	['COLOR13', 'PINK BLUE'],
	['COLOR14', 'SUNSET PINK'],
	['COLOR15', 'DARK NAVY'],
	['COLOR16', 'ORANGE GREEN'],
	]);

[yoouyeon]

제 화면에서는 Confetti 가 미리보기 컴포넌트보다 살짝 아래에 있는 것 같은데 혹시 의도하신 건지 궁금합니닷..

[hyobb109]

컨페티 터지는 위치는 공의 위치로 설정해두었어요!

[yoouyeon]

만약에 'BASIC', 'COLOR1' 이런 값들을 타입으로 관리하게 된다면 https://stackoverflow.com/questions/44497388/typescript-array-to-string-literal-type
요런 식으로 배열로 먼저 만든 다음에 → 타입으로 바꾸어서 쓰는 방법도 있네요!
colorList 배열 자주 쓰이는 것 같은데 배열 선언해두고 import해서 쓰는것도 편할 것 같아요 😆

[hyobb109]

확장성 면에서 이렇게 사용하는 것이 더 편할 것 같네요! 감사합니다👍