과제(아이디어스)

2021-04-14 ~ 2021-04-21

일주일동안의 과제가 있었고, 1주일이라는 시간이 주어졌다.
카드와 텍스트박스 만들기였고, 카드 안에는 별점매기는 기능도 추가였다. 아주 디테일한 내용이 적혀있는 것이 아니었어서 최대한 내가 할 수 있는 부분까지 구현해보았다.

카드는 이미지와 내용만 있는 카드, 이미지,내용,별점까지 다 들어가있는 카드, 가로로 되어있는 카드 등을 구현하는 것이었고, 텍스트박스는 읽기전용, 비활성화, 입력텍스트박스 세가지로 구현해야했다.

React-hooks를 사용해 만들기로 결정했다. 컴포넌트로 나누어 만들면 조금 더 쉽다고 판단했다. 카드와 텍스트박스 컴포넌트를 만들고, 별점컴포넌트와 카드 안의 이미지와 글내용이 들어가있는 컴포넌트를 따로 만들어서 사용했다. 별점컴포넌트는 마우스가 hover 되었을때, 마우스에 따라 색이 변하게 했고, 클릭하면 별점이 매겨지도록 했다. 유투브를 열심히 찾아보며 만들었다. 그리고 텍스트박스는 글자수가 50이 넘어가면 클릭이 되지 않도록 하고, 글자수 count가 보이게 만들었다. 맞게 만들었는지는 모르겠지만, 비활성화와 읽기전용은 textarea 태그 안에 disabled와 readOnly를 적으면 자동으로 설정이 되는 것 같아 태그안에 넣었다.

css를 들어가면서 컴포넌트로 따로 만든 이유가 무색하게 각각 classname을 바꾸어 넣어주는 불상사가 발생했다. 여러버전의 카드를 만들 때, 하나의 카드안에 컴포넌트를 쉽게 만들 수 있도록 했어야했는데 그러지 못해 번거로운 작업을 거쳐야했고, css를 각각 다 따로 주었어야했다. 다음부터는 모든 것을 생각한 후에, 컴포넌트를 나누어 만들어야겠다는 생각을 했다.

[카드컴포넌트]

import React from 'react';
import Rating from './Rating';
import '../css/Card.css';
import image from '../img/image.jpg';

function Card() {
  return (
    <>
      <div className="outline">
        <img className="img" src={image} />
        <section className="card-info">
          <p className="card-label">Card Label</p>
          <p className="card-title">Card Title</p>
          <p className="wrap">
            <span className="highlight">Hilight</span>
            <span className="crossout">Crossout</span>
          </p>
        </section>
        <div className="ratingwrap">
          <Rating />
          <p className="ratingtext">
            Lorem Ipsum is simply dummy text of the printing and typesetting
            industry.
          </p>
        </div>
      </div>
    </>
  );
}

export default Card;

[별점컴포넌트]

import React, { useState } from 'react';
import { FaStar } from 'react-icons/fa';
import '../css/Rating.css';

function Rating() {
  const [rating, setRating] = useState(null);
  const [hover, setHover] = useState(null);

  return (
    <div className="line">
      {[...Array(5)].map((star, i) => {
        const ratingValue = i + 1;

        return (
          <label className="label">
            <input
              type="radio"
              name="rating"
              className="rate"
              value={ratingValue}
              onClick={() => setRating(ratingValue)}
            />
            <FaStar
              size={20}
              className="star"
              color={ratingValue <= (hover || rating) ? '#ffcc00' : '#f2f2f2'}
              onMouseEnter={() => setHover(ratingValue)}
              onMouseLeave={() => setHover(null)}
            />
          </label>
        );
      })}
    </div>
  );
}

export default Rating;

[텍스트박스 컴포넌트]

import React, { useState } from 'react';
import Rating from './Rating';
import '../css/Textarea.css';

function Textarea() {
  const [isSave, setIsSave] = useState(false);
  const [count, setCount] = useState(50);
  const maxLength = 50;
  const a = document.getElementById('wrapstyle');
  const handleSave = () => {
    setIsSave(!isSave);
  };
  console.log(a);
  return (
    <>
      <div className="t-outline">
        {count === 50 || isSave === true ? (
          <div className="textarea">
            <div className="t-wrap">
              <textarea
                className="before"
                onChange={(e) => {
                  setCount(maxLength - e.target.value.length);
                  setIsSave(false);
                }}
                placeholder="입력해주세요"
                maxLength="49"
              ></textarea>
              <div className="remainchars">{count}</div>
            </div>
          </div>
        ) : (
          <div className="textarea">
            <div id="wrapstyle" className="t-wrap">
              <textarea
                className="after"
                onChange={(e) => setCount(maxLength - e.target.value.length)}
                placeholder="입력해주세요"
                maxLength="49"
              ></textarea>
              <div className="remainchars">{count}</div>
            </div>
            <input
              value="save"
              type="button"
              className="btn"
              onClick={handleSave}
            ></input>
          </div>
        )}
        <textarea className="disabled" id="text" disabled>
          비활성화입니다!
        </textarea>
        <textarea className="readonly" id="text" readOnly>
          읽기전용입니다!
        </textarea>
      </div>
    </>
  );
}

export default Textarea;