클릭한 색이나 이미지가 적용되게 하기

클릭한 color가 적용되게 하려면

const [selectedColor, setSelectedColor] = useState('');

const handleColorClick = (color) => {
	setSelectedColor(color);
};

{/*적용될 곳*/}
<WhiteLetterContainer style={{ backgroundImage: selectedColor ? 'none' : 'url("/images/더흰편지지.svg")', backgroundColor: selectedColor }}>
</WhiteLetterContainer>

{/*적용할 선택지들*/}
<Letter style={{ backgroundColor: '#EECFD4' }} onClick={() => handleColorClick('#EECFD4')} alt='편지지'>
</Letter>
<Letter style={{ backgroundColor: '#7CB8C0' }} onClick={() => handleColorClick('#7CB8C0')} alt='편지지'>
</Letter>
<Letter style={{ backgroundColor: '#6E4C4D' }} onClick={() => handleColorClick('#6E4C4D')} alt='편지지'>
</Letter>

클릭한 image가 적용되게 하려면

//적용할 선택지들의 css
const StampDesign = styled.div`
  background-image: ${({ url }) => `url(${url})`};
  background-size: cover;
  width: 115px;
  height: 153.33333px;
`;

const [selectedImage, setSelectedImage] = useState('');

const handleImageClick = (image) => {
  setSelectedImage(image);
};

//적용 될 곳
<Stamp style={{ backgroundImage: selectedImage ? `url(${selectedImage})` : 'url("/images/우표2.svg")' }}>
</Stamp>


<ThreeStampContainer>
  <StampDesign url="/images/우표디자인1.svg" onClick={() => handleImageClick('/images/우표디자인1.svg')} alt='우표'>
  </StampDesign>
  <StampDesign url="/images/우표디자인2.svg" onClick={() => handleImageClick('/images/우표디자인2.svg')} alt='우표'>
  </StampDesign>
  <StampDesign url="/images/우표디자인3.svg" onClick={() => handleImageClick('/images/우표디자인3.svg')} alt='우표'>
  </StampDesign>
</ThreeStampContainer>