fix: (#55) 이미지 업로드 후 그림 버튼이 렌더링되는 이슈 해결

woowacourse-teams · Jul 18, 2023 · 6003f7b · 6003f7b
1 parent 238af20
commit 6003f7b
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 6 deletions.
diff --git a/...ents/optionList/WritingVoteOptionList/WritingVoteOption/OptionUploadImageButton/index.tsx b/...ents/optionList/WritingVoteOptionList/WritingVoteOption/OptionUploadImageButton/index.tsx
@@ -6,16 +6,18 @@ import * as S from './style';
 
 interface OptionUploadImageButtonProps extends React.InputHTMLAttributes<HTMLInputElement> {
  optionId: number;
+ isImageVisible: boolean;
 }
 
 export default function OptionUploadImageButton({
  optionId,
+ isImageVisible,
  ...rest
 }: OptionUploadImageButtonProps) {
  const id = optionId.toString();
 
  return (
- <S.Container>
+ <S.Container $isVisible={isImageVisible}>
  <S.Label htmlFor={id} aria-label="선택지 이미지 업로드 버튼" title="이미지 업로드">
  <S.Image src={photoIcon} alt="" />
  </S.Label>

diff --git a/...nents/optionList/WritingVoteOptionList/WritingVoteOption/OptionUploadImageButton/style.ts b/...nents/optionList/WritingVoteOptionList/WritingVoteOption/OptionUploadImageButton/style.ts
@@ -2,10 +2,11 @@ import { styled } from 'styled-components';
 
 import { ButtonCssText, IconImage } from '../style';
 
-export const Container = styled.div`
+export const Container = styled.div<{ $isVisible: boolean }>`
  width: 24px;
  height: 24px;
  border-radius: 50%;
+ visibility: ${props => props.$isVisible && 'hidden'};
 `;
 
 export const Label = styled.label`

diff --git a/frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/index.tsx b/frontend/src/components/optionList/WritingVoteOptionList/WritingVoteOption/index.tsx
@@ -23,7 +23,7 @@ export default function WritingVoteOption({
  handleDeleteOptionClick,
  handleRemoveImageClick,
  handleUploadImage,
- imageUrl,
+ imageUrl = '',
 }: WritingVoteOptionProps) {
  const handleTextChange = (event: ChangeEvent<HTMLTextAreaElement>) => {
  const { value } = event.target;
@@ -54,9 +54,12 @@ export default function WritingVoteOption({
  placeholder="내용을 입력해주세요."
  maxLength={MAX_WRITING_LENGTH}
  />
- {!imageUrl && (
- <OptionUploadImageButton optionId={optionId} onChange={handleUploadImage} />
- )}
+
+ <OptionUploadImageButton
+ isImageVisible={imageUrl.length > 0}
+ optionId={optionId}
+ onChange={handleUploadImage}
+ />
  </S.ContentContainer>
  {imageUrl && (
  <S.ImageContainer>