CreateMessagePage

디자인

모바일

태블릿

PC

실제 구현 코드

const CreateMessagePage = () => {
  const [isError, setIsError] = useState(false);
  const [inputNameValue, setInputNameValue] = useState("");
  const [isSingleImgClicked, setIsSingleImgClicked] = useState(false);
  const [singleUrl, setSingleUrl] = useState("");
  const [isDefaultImgClicked, setIsDefaultImgClicked] = useState(true);
  const [selectedRelationValue, setSelectedRelationValue] = useState(
    RELATIONSHIP[0]
  );
  const [selectedFontValue, setSelectedFontValue] = useState(FONT_SELECT[0]);
  const [text, setText] = useState("");
  const [isDisabled, setIsDisabled] = useState(true);
  const [isEditorEmpty, setIsEditorEmpty] = useState(true);
  const navigate = useNavigate();
  const { id } = useParams();

  function handleInputChange(e) {
    e.preventDefault();
    setInputNameValue(e.target.value);
    setIsError(false);
  }

  function blurHandler(e) {
    if (inputNameValue === "") {
      setIsError(true);
    }
  }

  function handleSingleImgClick(e, url) {
    e.preventDefault();

    if (e.target.src === url) {
      setSingleUrl(url);
      setIsSingleImgClicked(true);
      setIsDefaultImgClicked(false);
    }
  }

  function handleDefaultImgClick(e) {
    e.preventDefault();
    setIsDefaultImgClicked(true);
    setIsSingleImgClicked(false);
    setSingleUrl("");
  }

  function getSelectedValue(innerText) {
    setSelectedRelationValue(innerText);
  }

  function getFontSelectedValue(innerText) {
    setSelectedFontValue(innerText);
  }

  function onChangeContents(contents) {
    setText(contents);
    if (contents === "<p><br></p>") {
      setIsEditorEmpty(true);
    } else {
      setIsEditorEmpty(false);
    }
  }

  useEffect(() => {
    if (inputNameValue !== "" && !isEditorEmpty) {
      setIsDisabled(false);
    } else if (inputNameValue === "" || isEditorEmpty) {
      setIsDisabled(true);
    }
  }, [inputNameValue, isEditorEmpty]);

  const message = {
    sender: inputNameValue,
    relationship: selectedRelationValue,
    content: text,
    font: selectedFontValue,
    profileImageURL: singleUrl !== "" ? singleUrl : defaultImageUrl,
  };

  const { fetch } = useRequest({
    skip: true,
    options: {
      url: `recipients/${id}/messages/`,
      method: "post",
      headers: { "Content-Type": "application/json" },
      data: message,
    },
  });

  async function handleCreatePostClick(e) {
    e.preventDefault();
    const { error: fetchedError } = await fetch();
    if (fetchedError === undefined) {
      alert(
        "롤링 페이퍼에 메시지가 성공적으로 작성되었습니다! 페이지를 이동합니다."
      );
      navigate(`/post/${id}`);
    } else {
      alert("서버 오류로 메시지 작성에 실패했습니다..");
    }
  }

  return (
    <>
      <Helmet>
        <title>메세지 생성 - Rolling</title>
      </Helmet>
      <NavBar showButton={false} />
      <S.CreateMessagePageDiv>
        <S.Section>
          <S.H1>From.</S.H1>
          <Input
            isError={isError}
            placeholder="이름을 입력해 주세요."
            errorMessage="값을 입력해 주세요."
            inputValue={inputNameValue}
            onChange={(e) => handleInputChange(e)}
            onBlur={(e) => blurHandler(e)}
          />
        </S.Section>
        <S.Section>
          <S.H1>프로필 이미지</S.H1>
          <S.ImgDiv>
            <S.ChosenImgDiv>
              <S.DefaultImage
                src={isSingleImgClicked ? singleUrl : DefaultProfile}
              />
            </S.ChosenImgDiv>
            <S.Div>
              <S.H2>프로필 이미지를 선택해주세요!</S.H2>
              <S.ImgContainer>
                <S.SingleImageButton>
                  <S.SingleImage
                    src={defaultImageUrl}
                    onClick={(e) => handleDefaultImgClick(e)}
                  />
                </S.SingleImageButton>
                {imageUrls.map((url) => {
                  return (
                    <S.SingleImageButton
                      key={url}
                      onClick={(e) => handleSingleImgClick(e, url)}
                    >
                      <S.SingleImage src={url} />
                    </S.SingleImageButton>
                  );
                })}
              </S.ImgContainer>
            </S.Div>
          </S.ImgDiv>
        </S.Section>
        <S.Section>
          <S.H1>상대와의 관계</S.H1>
          <Dropdown
            options={RELATIONSHIP}
            getSelectedValue={getSelectedValue}
          />
        </S.Section>
        <S.Section>
          <S.H1>내용을 입력해 주세요</S.H1>
          <TextEditor onChangeContents={onChangeContents} />
        </S.Section>
        <S.Section>
          <S.H1>폰트 선택</S.H1>
          <Dropdown
            options={FONT_SELECT}
            getSelectedValue={getFontSelectedValue}
          />
        </S.Section>
        <S.Section>
          <Button
            size="lg"
            onClick={(e) => handleCreatePostClick(e)}
            disabled={isDisabled}
          >
            생성하기
          </Button>
        </S.Section>
      </S.CreateMessagePageDiv>
    </>
  );
};

설명