Popup 설명 - Veloighter 제작기

holdOn·2021년 6월 9일

크롬 익스텐션 제작기 - Veloighter

목록 보기

3/4

Poup이란?

팝업 파일은 사용자가 툴바 아이콘을 눌렀을 때 나오는 창에 표시되는 HTML 파일입니다. 스타일 시트를 링크하는 태그와 스크립트 태그를 포함하는 면에서 웹 페이지와 비슷하게 동작합니다. 하지만 웹 페이지와 달리 인라인 자바스크립트는 허용하지 않습니다.

사용자를 추가하는 화면

input 박스에 팔로우 하고싶은 사용자의 이름을 적어서 추가하면 됩니다.
하단에 얼마나 많은 사용자를 팔로우 했는지 알 수 있습니다.

팔로우 추가 화면 코드

class Content extends React.Component<ContentProps, ContentState> {
  constructor(props: ContentProps) {
    super(props);
    this.state = {
      isToggleOn: true,
      id: this.props.storage.getId(),
      userName: '',
      followers: this.props.storage.list(),
    };
  }
  
  handleSubmit(e: React.FormEvent<HTMLFormElement>): void {
    const {id, userName, followers} = this.state;
    e.preventDefault();
    if (userName === '') {
      return;
    }
    for (const follower of followers) {
      if (follower.userName === userName) {
        this.setState({
          userName: '',
        });
        return;
      }
    }
    this.props.storage.add({
      id,
      userName,
    });
    this.props.storage.plusId();
    this.setState({
      id: this.props.storage.getId(),
      userName: '',
      followers: this.props.storage.list(),
    });
  }

  handleChange(e: React.ChangeEvent<HTMLInputElement>): void {
    this.setState({
      userName: e.target.value,
    });
  }

  render(): React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
  > {
    const {isToggleOn, userName, followers} = this.state;
    // CSS 코드
    
    return (
      <div className="wrapper">
        <div className="tab">
          // tab 화면 코드
        </div>
        <div className="content">
          <form
            className="add-user"
            style={isToggleOn === true ? appear : disappear}
            onSubmit={(e): void => this.handleSubmit(e)}
          >
            <input
              type="text"
              placeholder="팔로잉할 사용자를 추가해주세요"
              className="add-user__input"
              value={userName}
              onChange={(e): void => this.handleChange(e)}
            />
            <button className="add-user__button" type="submit">
              사용자 추가
            </button>
        </form>
	// 삭제하는 화면 코드
        <div className="count-users">
          팔로우한 사용자 수:<span>{followers?.length}</span>
        </div>
      </div>
    );
  }
}

코드 설명

handleChange 함수는 input 박스에 있는 텍스트 내용을 감지합니다.
사용자가 사용자 추가 버튼을 누르거나 엔터 키를 눌렀을 경우 handleSubmit 함수가 실행됩니다.
handleSubmit 실행 과정
- 전달받은 사용자 이름 값이 없을 경우 아무것도 반환하지 않고 함수가 종료 됩니다.
- 기존 state에 사용자 이름이 있을 경우 아무것도 반환하지 않고 함수가 종료 됩니다.
- 스토리지에 스토리지에 있는 id와 사용자의 이름을 추가합니다.(사용자 삭제 화면에서 map 메서드를 사용하기 때문에 id 값이 필요합니다.)
- 다음 사용자를 추가할 때 쓸 id 값을 쓰기위해 스토리지에 id 값을 추가합니다.
- state를 스토리지에 있는 id, 팔로우 리스트와 동일화 시킵니다.

사용자를 삭제하는 화면

삭제 버튼을 눌러서 사용자를 삭제합니다.

팔로우 삭제 화면 코드

class Content extends React.Component<ContentProps, ContentState> {
  constructor(props: ContentProps) {
    super(props);
    this.state = {
      isToggleOn: true,
      id: this.props.storage.getId(),
      userName: '',
      followers: this.props.storage.list(),
    };
  }
  
  handleRemove(name: string): void {
    this.props.storage.remove(name);
    this.setState((state) => ({
      followers: state.followers.filter((candidate) => {
        return candidate.userName !== name;
      }),
    }));
  }

  render(): React.DetailedHTMLProps<
    React.HTMLAttributes<HTMLDivElement>,
    HTMLDivElement
  > {
    const {isToggleOn, userName, followers} = this.state;
    // CSS 코드

    return (
      <div className="wrapper">
        <div className="tab">
          // tab 화면 코드
        </div>
        <div className="content">
          // 추가하는 화면 코드
          <div
            className="delete-user"
            style={isToggleOn === false ? appear : disappear}
          >
            <ul
              style={
                followers.length === 0
                  ? {overflowY: 'visible'}
                  : {overflowY: 'scroll'}
              }
            >
              {followers.length === 0 ? (
                <li className="delete-user__no-user">
                  <span>🥺</span>추가한 사용자가 없습니다.
                </li>
              ) : (
                followers.map((follower) => (
                  <li key={follower.id.toString()}>
                    {follower.userName}
                    <button
                      type="button"
                      onClick={(): void => this.handleRemove(follower.userName)}
                    >
                      삭제
                    </button>
                  </li>
                ))
              )}
            </ul>
          </div>
        </div>
        <div className="count-users">
          팔로우한 사용자 수:<span>{followers?.length}</span>
        </div>
      </div>
    );
  }
}

코드 설명

팔로워의 숫자가 0일때와 그렇지 않을때를 나눠서 화면을 만들었습니다.
삭제 버튼을 누르게 되면 handleRemove 함수가 실행됩니다.
handleRemove 실행 과정
- 스토리지에서 사용자를 찾아내 제거합니다.
- filter 함수를 사용해서 삭제된 이름과 일치하지 않는 값들만 포함한 새로운 배열을 만들어서, state에 있는 followers 값에 넣어줍니다.(스토리지와 팔로워 리스트 동일화)