ProfileEditPage 퍼블리싱

오늘은 ProfileEditPage 회원 정보 수정 페이지를 퍼블리싱하였습니다. 

 

별 다른 어려운 점은 없었지만 비밀 번호 찾기를 어떻게 구현해야 할까 고민하다가 비민번호 찾기 버튼을 누르면 팝업을 띄우기로 정하였습니다.

 

비밀번호변경 팝업에서는 비밀번호 찾기 버튼을 누르면 메일로 초기화 된 비밀번호가 전송되는 것으로 해야 할 것 같습니다.

 

또한 현재까지 데이터가 아닌 예를 들어 이미지면 src에 이미지 주소를 직접 기입하였었지만 퍼블리싱 단계가 마무리되고 이제 정말 api통신을 통해서 데이터를 받아와야 할 준비를 하기 위해 Mock폴더를 만들고 users.ts파일에 user들의 정보를 기입하여 받아오는 형식으로 코드를 작성했습니다. 

 

또한 멘토님이 협업에서 추천해주신 spellChecker를 설치해서 사용해 보았습니다.

 

회원 정보 수정

비밀번호 변경 팝업

 

선택된 파일의 이미지를 미리 볼 수 있는 preview 구현

 

- 내일 부터는 전페이지의 디테일 체크를 하고 수요일부터는 반응형 구현에 들어가겠습니다!

 

import React, {useState} from 'react'
import MyPageBanner from '../Common/MyPageBanner'
import styled from 'styled-components'

import ChangePassword from '../Popups/ChangePassword'

import {users} from '../Mock/users'

export default function ProfileEditPage() {
  const {email, password, nickName, myPage} = users[0]

  const [changePassword, setChangePassword] = useState<boolean>(false)
  const [profilePreview, setProfilePreview] = useState<string>(myPage.profile)
  const [profileBackgroundPreview, setProfileBackgroundPreview] = useState<string>(myPage.background)

  const handlePasswordChange = (e: React.MouseEvent) => {
    e.preventDefault()
    setChangePassword(true)
  }

  const handleProfileImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files && e.target.files[0]

    if (file) {
      const reader = new FileReader()

      reader.onload = () => {
        setProfilePreview(reader.result as string)
      }

      reader.readAsDataURL(file)
    }
  }

  const handleProfileBackgroundImageChange = (e: React.ChangeEvent<HTMLInputElement>) => {
    const file = e.target.files && e.target.files[0]

    if (file) {
      const reader = new FileReader()

      reader.onload = () => {
        setProfileBackgroundPreview(reader.result as string)
      }

      reader.readAsDataURL(file)
    }
  }

  const handleEditForm = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    console.log(e)
  }

  return (
    <>
      <MyPageBanner />

      <EditForm onSubmit={handleEditForm} onKeyUp={e => e.key === 'Enter' && e.preventDefault()}>
        <PageTitle>회원정보 수정</PageTitle>
        <Content>
          <Title># 이메일</Title>
          <Input value={email} type='email' readOnly />
        </Content>
        <Content>
          <Title># 비밀번호</Title>
          <Input type='password' required />
          <PassWordChange
            onClick={e => {
              handlePasswordChange(e)
            }}
          >
            *비밀번호 변경
          </PassWordChange>
        </Content>
        <Content>
          <Title># 닉네임</Title>
          <Input value={nickName} type='text' readOnly />
        </Content>
        <Content>
          <Title># 나를 소개하는 한 줄</Title>
          <Input type='text' maxLength={40} placeholder={myPage.ment} />
        </Content>
        <Content>
          <Title># 프로필 이미지</Title>
          <ProfileImgBox>
            <ProfileImg src={profilePreview} alt='ProfileImg' />
            <ImgLabel htmlFor='profileImg'>이미지 선택</ImgLabel>
            <InputImg id='profileImg' type='file' accept='.jpg, .jpeg, .png' onChange={handleProfileImageChange} />
          </ProfileImgBox>
        </Content>
        <Content>
          <Title># 배경 이미지</Title>
          <ProfileImgBox>
            <ProfileBackgroundImg src={profileBackgroundPreview} alt='ProfileBackgroundImg' />
            <ImgLabel htmlFor='profileBackgroundImg'>배경이미지 선택</ImgLabel>
            <InputImg
              id='profileBackgroundImg'
              type='file'
              accept='.jpg, .jpeg, .png'
              onChange={handleProfileBackgroundImageChange}
            />
          </ProfileImgBox>
        </Content>
        <SubmitInput type='submit' value={'작성 완료'} />
      </EditForm>
      <ChangePassword show={changePassword} setChangePassword={setChangePassword} />
    </>
  )
}

const PageTitle = styled.h1`
  font-size: 2rem;
  margin-top: 4rem;
  text-align: center;
`
const EditForm = styled.form`
  width: 92%;
  display: flex;
  flex-direction: column;
  margin: 4rem auto;
  background: rgb(247, 247, 247);
  border-radius: 1rem;
  padding: 0px 2rem 2rem;
  box-sizing: border-box;
`

const Content = styled.div`
  display: flex;
  align-items: center;
  margin-top: 3rem;
`

const Title = styled.h2`
  font-size: 1.5rem;
  margin-right: 2rem;
  width: 15rem;
  text-align: center;
`

const Input = styled.input`
  font-size: 1.3rem;
  width: 27rem;
  border: none;
  padding: 0.8rem 0.8rem 0.8rem 1.3rem;
  border-radius: 1.5rem;
  &:focus {
    outline: none;
  }
`
const PassWordChange = styled.button`
  margin-left: 1rem;
  font-size: 1rem;
  border: none;
  cursor: pointer;
  background: inherit;
  cursor: pointer;

  &:hover {
    color: #1877f2;
  }
`

const ProfileImgBox = styled.div`
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #fff;
  border-radius: 1rem;
`

const ProfileImg = styled.img`
  width: 12rem;
  height: 12rem;
  border-radius: 50%;
  padding: 0.5rem;
`

const ProfileBackgroundImg = styled.img`
  width: 100%;
  height: 25rem;
  border-radius: 1rem;
  padding: 0.3rem;
`

const InputImg = styled.input`
  display: none;
`

const ImgLabel = styled.label`
  cursor: pointer;
  font-size: 1.2rem;
  height: 2rem;
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  border-dasharray: 100px;
  &:hover {
    color: #1877f2;
    background: #fff;
    border-color: #1877fe;
  }
`
const SubmitInput = styled.input`
  margin-top: 5rem;
  margin-left: auto;
  padding: 0.7rem 1.5rem;
  font-size: 1.2rem;
  cursor: pointer;
  color: #fff;
  background: #1877f2;
  border: none;
  border-radius: 0.5rem;
`