6/3 TIL

TIL: 이미지 저장 버튼 스타일링 및 입력 폼 추가

오늘은 React 프로젝트에서 이미지 저장 버튼을 스타일드 컴포넌트로 지정하고, 입력 폼을 추가하는 작업을 진행했습니다. 주된 작업 내용은 다음과 같습니다.

1. 스타일드 컴포넌트로 이미지 저장 버튼 지정

먼저, 이미지 저장 버튼을 스타일드 컴포넌트로 변경했습니다. 이를 통해 버튼의 스타일을 보다 쉽게 관리할 수 있게 되었습니다.

import styled from 'styled-components';

// 스타일드 컴포넌트로 저장 버튼 생성
const SaveButton = styled.button`
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;

  &:hover {
    background-color: #45a049;
  }
`;

function App() {
  return (
    <div>
      {/* 저장 버튼 사용 */}
      <SaveButton>이미지 저장</SaveButton>
    </div>
  );
}

export default App;

2. 입력 폼 추가

그 다음, 사용자로부터 이미지를 업로드 받고 설명을 입력받을 수 있는 입력 폼을 추가했습니다. 이를 위해 input과 textarea 요소를 사용했습니다.

import React, { useState } from 'react';
import styled from 'styled-components';

const SaveButton = styled.button`
  background-color: #4CAF50; /* Green */
  border: none;
  color: white;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
  border-radius: 4px;

  &:hover {
    background-color: #45a049;
  }
`;

const Input = styled.input`
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
`;

const TextArea = styled.textarea`
  margin: 10px 0;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  width: 100%;
  height: 100px;
`;

function App() {
  const [image, setImage] = useState(null);
  const [description, setDescription] = useState('');

  const handleImageChange = (e) => {
    setImage(e.target.files[0]);
  };

  const handleDescriptionChange = (e) => {
    setDescription(e.target.value);
  };

  const handleSave = () => {
    // 이미지와 설명을 저장하는 로직 추가
    console.log('이미지:', image);
    console.log('설명:', description);
  };

  return (
    <div>
      <Input type="file" onChange={handleImageChange} />
      <TextArea 
        placeholder="설명을 입력하세요..."
        value={description}
        onChange={handleDescriptionChange} 
      />
      <SaveButton onClick={handleSave}>이미지 저장</SaveButton>
    </div>
  );
}

export default App;

배운 점

• Styled Components를 사용하여 버튼 스타일을 쉽게 관리할 수 있었습니다.
• 입력 폼을 추가하여 사용자로부터 이미지를 업로드 받고 설명을 입력받을 수 있게 되었습니다.
• React의 useState를 사용하여 입력된 데이터를 상태로 관리하는 방법을 익혔습니다.