항해99 9주차 회고

실전프로젝트가 시작된지 3주차에 접어들었다.

매번 회고록을 쓸때마다 느끼지만 시간이 정말 빠르다.

첫주차에는 기획한다고 순식간에 지나갔고, 2주차부터는 슬슬 작업에 들어가서

지금은 어느정도 기능이 구현이 된 상태다.

기획 멘토링과 더불어 기술 멘토링도 받으면서 프로젝트를 만드는데 있어서 도움을 받고 있는데

다행히도 진도가 늦는편이 아니어서 기획단계에서 시간을 많이 쓴 것 같아 조급했던 마음이 조금은 여유로워진 것 같다.

이번주 토요일에는 중간발표회가 예정되어 있어서 발표회 전에 어느정도 기본기능은 구현을 해둘 생각이라 열심히 달려야 할 것 같다. 

 

WIL(Weekly I Learned)

Q. 이번 주차에서 기술적으로 막혔던 부분

 

A. 랜덤 닉네임을 구현하는 부분에서 시간을 많이 잡아먹었던 것 같다. input 박스 안 버튼을 누를때마다 랜덤 닉네임이 바뀐다.

 

<아직 미완성된 프로필 작성 페이지>

<SetProfile.jsx>

import React, { useEffect, useRef, useState } from "react";
import styled from "styled-components";
import { Flex, Input, Text, Textarea, Button, Image, Wrap } from "../elements";
import { history } from "../redux/configureStore";
import { actionCreators as userActions } from "../redux/modules/user";
import { setProfileImage } from "../redux/modules/image";
import { useDispatch, useSelector } from "react-redux";
import ToastMessage from "../shared/ToastMessage";
import { Front, Back } from "../shared/NicknameDummy.js";
import { BsArrowRepeat } from "react-icons/bs";
const Setprofile = () => {
  const dispatch = useDispatch();

  const fileInput = useRef();

  const preview = useSelector((state) => state.image.preview);
  // console.log(preview);

  //랜덤 닉네임 생성
  const randomnickFront = Front;
  const randomnickBack = Back;

  const randomNick =
    randomnickFront[Math.floor(Math.random() * randomnickFront.length)] +
    " " +
    randomnickBack[Math.floor(Math.random() * randomnickBack.length)];
    
  const [nickname, setNickname] = useState("");
  const renameRandom = () => {
    const addNick =
      randomnickFront[Math.floor(Math.random() * randomnickFront.length)] +
      " " +
      randomnickBack[Math.floor(Math.random() * randomnickBack.length)];

    setNickname(addNick);
  };
  console.log(nickname);

  const selectFile = (e) => {
    const reader = new FileReader();
    console.log(reader);
    const file = fileInput.current.files[0];
    console.log(file);
    reader.readAsDataURL(file);
    reader.onloadend = () => {
      dispatch(setProfileImage(reader.result));
    };
  };
  const editUser = () => {
    const file = fileInput.current.files[0];
    console.log(file);

    //새로운 객체 생성
    const formData = new FormData();

    //formData.append(name(키),value(값))
    //값은 문자열로 자동 변환됨. 배열을 넣어도 콤마로 구분한 문자열이 됨. 객체는 넣으면 무시됨

    formData.append("profileImage", file);
    formData.append("nickname", nickname);
    // formData.append("website", website);
    // formData.append("introduce", introduce);

    console.log("formData", formData);

    for (var pair of formData.entries()) {
      console.log(pair[0] + ", " + pair[1]);
    }
    dispatch(userActions.setProfileDB(formData));
  };

  return (
    <>
      <Flex jc="center" margin="2em 0 0 0">
        <h2>ARTILY</h2>
      </Flex>
      <Flex jc="center" margin="0 0 2em 0">
        <p>내 프로필을 만들어주세요!</p>
      </Flex>
      <Wrapprofile>
        <Flex jc="center" margin="50px 0">
          <Image
            alt="profile"
            width="120px"
            height="120px"
            br="60px"
            src={preview ? preview : ""}
          ></Image>

          <ImgBox>
            <label htmlFor="image">🖍</label>
            <input
              type="file"
              id="image"
              ref={fileInput}
              onChange={selectFile}
            />
          </ImgBox>
        </Flex>
      </Wrapprofile>
      <Wrap padding="0 20px 30px 20px">
        <Flex>
          <Text fg="1">닉네임</Text>
          <Input
            icon={<BsArrowRepeat size={28} onClick={renameRandom} />}
            square
            width="100%"
            border="1px solid #d3d3d3"
            br="6px"
            type="text"
            fg="0"
            value={nickname || ""}
            onChange={(e) => setNickname(randomNick)}
          />
        </Flex>
      </Wrap>
      <Button
        width="90%"
        type="submit"
        outline
        margin="20px auto"
        onClick={() => {
          editUser();
          window.alert("프로필이 저장되었습니다!");
          window.confirm("자세한 프로필을 작성해보시겠어요?");
          history.push("/profile/detail");
        }}
      >
        프로필 저장하기
      </Button>
    </>
  );
};

const Wrapprofile = styled.div`
  position: relative;
  margin: auto;
  width: 120px;
`;

const ImgBox = styled.div`
  label {
    position: absolute;
    bottom: 0;
    right: -1em;
    display: inline-block;
    padding: 0.5em 0.75em;
    color: #666;
    font-size: inherit;
    line-height: normal;
    vertical-align: middle;
    background-color: #fdfdfd;
    cursor: pointer;
    border: 1px solid #666;
    border-radius: 50%;
  }
  input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
  }
`;
export default Setprofile;