Feat/topic create page

[chaeyoung103]

What is this PR? 🔍

• B topic 생성 페이지를 생성 하였습니다.

🛠️ Issue

• close 토픽 생성 화면 구현 #51
• close A, B 로고 이미지 색상 이상함 #169

Changes 📝

• 전체적인 컴포넌트 생성
• textinput, imageinput 추가

To Reviewers 📢

• 보완할 부분이 있으면 review 남겨주세요

[netlify]

✅ Deploy Preview for offonoff-ab ready!

Name	Link
🔨 Latest commit	5f43c70
🔍 Latest deploy log	https://app.netlify.com/sites/offonoff-ab/deploys/65c473e83180ec0007a93350
😎 Deploy Preview	https://deploy-preview-147--offonoff-ab.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[Jinho1011]

width랑 height 고정한거 content에 따라 크기 변경되도록 수정해주세요

[Jinho1011]

사용되지 않은 imports 구문 삭제하면 좋을 것 같아요

[Jinho1011]

const ImageInputComponent = ({ label, imageUrl, setImageUrl }) => {
  const handleFileChange = (event) => {
    const file = event.target.files?.[0];
    if (!file) return;

    const reader = new FileReader();
    reader.onloadend = () => setImageUrl(reader.result as string);
    reader.readAsDataURL(file);
  };

  return (
    <ImageInputContainer onClick={() => this.ImageInput.click()}>
      {imageUrl && <Image src={imageUrl} alt={`Image ${label}`} />}
      {!imageUrl && (
        <ImageInputDescriptionContainer>
          <Text size={15} weight={500} color={colors.white} align="center">
            이미지
            <br />
            가져오기
          </Text>
        </ImageInputDescriptionContainer>
      )}
      <ImageInputTextContainer>
        <Text size={180} weight={900} color={colors[`${label}_40`]} lineHeight={0.7}>
          {label}
        </Text>
      </ImageInputTextContainer>
      <ImageInput
        ref={(input) => (this.ImageInput = input)}
        type="file"
        accept="image/*"
        onChange={handleFileChange}
      />
    </ImageInputContainer>
  );
};

이렇게 이미지 인풋 컴포넌트를 분리하고

const [images, setImages] = useState({ A: null, B: null });

...

      <Row gap={8} justifyContent="center">
        {['A', 'B'].map((label) => (
          <ImageInputComponent
            key={label}
            label={label}
            imageUrl={images[label]}
            setImageUrl={setImageUrl(label)}
          />
        ))}
      </Row>

중복되는 코드를 개선해보면 어떨까요?

[Jinho1011]

TOPIC_TITLE, A_TOPIC, TOPIC_CATEGORY로 바꾸는게 좋아보여요

[Jinho1011]

width: 100% + space-between이라서 gap 속성이 없어도 될 것 같아요

화면이 좁아졌을 때 줄바꿈이 되는 문제가 발생해서요

[Jinho1011]

TopicCreateTextInput도 마찬가지로 수정 부탁드립니다

[Jinho1011]

LGTM!