Merge branch 'develop' of https://github.com/FRONTENDSCHOOL5/final-17…

…-breath-connect into develop
FRONTENDSCHOOL5 · Nov 17, 2023 · f2edc59 · f2edc59
2 parents fd269d7 + 4c9fceb
commit f2edc59
Show file tree

Hide file tree

Showing 10 changed files with 263 additions and 292 deletions.
diff --git a/.prettierrc.json → .prettierrc b/.prettierrc.json → .prettierrc
diff --git a/src/assets/sprite/spriteSheet.svg b/src/assets/sprite/spriteSheet.svg
diff --git a/src/components/Profile/ProfileForm.jsx b/src/components/Profile/ProfileForm.jsx
@@ -1,13 +1,15 @@
 import React from 'react';
 import Input from '../common/Input/Input';
 import Button from '../common/Button/Button';
+import ProfileImage from './ProfileImage';
 import { useFieldController } from '../../hook/useFieldController';
 import { useForm } from 'react-hook-form';
 import { PATTERN, MESSAGE } from '../../constants/validation';
+import useImageUpload from '../../hook/useImageUpload';
 
-const ProfileForm = ({ accountname, isError, message, handleInputImage, userEmail, userPassword, signup }) => {
+const ProfileForm = ({ accountname, isError, message, userEmail, userPassword, signup }) => {
 
-  const { control, getValues, setValue, handleSubmit, formState: { errors } } = useForm({
+  const { control, getValues, handleSubmit, formState: { errors } } = useForm({
     mode:'onBlur',
     defaultValues: {
       username: '',
@@ -16,6 +18,8 @@ const ProfileForm = ({ accountname, isError, message, handleInputImage, userEmai
     }
   })
 
+  const { image, previewImage, handleImage } = useImageUpload();
+
   const usernameController = useFieldController('username', control, {
     required: MESSAGE.USERNAME.REQUIRED,
     pattern: {
@@ -40,21 +44,27 @@ const ProfileForm = ({ accountname, isError, message, handleInputImage, userEmai
   }
 
   const introController = useFieldController('intro', control, {});
-
-    const handleImage = (e) => {
-    const file = e.target.files[0];
-    setValue('image', file);
-    handleInputImage(file);
-    };
 
   const onSubmit = (data) => {
-    if(!errors.username?.message && !errors.accountname?.message && !message)
-    signup(data, userEmail, userPassword);
+    if (!errors.username?.message && !errors.accountname?.message && !message) {
+      const userData = {
+        username: data.username,
+        email: userEmail,
+        password: userPassword,
+        accountname: data.accountname,
+        intro: data.intro || '',
+        image: image || '',
+      };
+      signup(userData);
+    }
   };
 
+
   return (
     <form onSubmit={handleSubmit(onSubmit)}>
-
+      <ProfileImage
+        previewImage={previewImage} handleImage={handleImage}
+      />
         <Input
           label='사용자 이름'
           id='username'

diff --git a/src/components/Profile/ProfileImage.jsx b/src/components/Profile/ProfileImage.jsx
@@ -0,0 +1,63 @@
+import React from 'react';
+import styled, { css } from 'styled-components';
+import AddImg from '../../assets/sprite/img-btn.svg';
+import AddDarkImg from '../../assets/sprite/img-btn-dark.svg';
+import BasicProfileImg from '../../assets/images/basic-profile-l.svg';
+
+const ProfileImage = ({ previewImage, handleImage }) => {  
+  return (
+    <>
+      <Label htmlFor="image" >
+          <Image src={previewImage ? previewImage : BasicProfileImg} alt="사용자 프로필 이미지" />
+        </Label>
+          <ImageInput
+          type="file"
+          accept="image/png, image/jpg, image/jpeg"
+          id="image"
+          onChange={handleImage}
+          />
+    </>
+  )
+}
+
+export default ProfileImage;
+
+const Label = styled.label`
+  display: block;
+  position: relative;
+  width: 11rem;
+  height: 11rem;
+  margin: 3.5rem auto 5.5rem;
+  border: 1px solid ${({ theme }) => theme.colors.placeHolderColor};
+  border-radius: 50%;
+  cursor: pointer;
+
+  &::after {
+    content: '';
+    display: block;
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    width: 3.6em;
+    height: 3.6rem;
+    background: url(${AddImg}) no-repeat center / 3.6rem 3.6rem;
+    z-index: 2;
+    ${({ isDarkMode }) => isDarkMode && css`
+      background: url(${AddDarkImg}) no-repeat center / 3.6rem 3.6rem;
+    `}
+  }
+`
+
+const Image = styled.img`
+  width: 100%;
+  height: 100%;
+  border-radius: 50%;
+  object-fit: cover;
+`
+
+const ImageInput = styled.input`
+  position: absolute;
+  width: 0.1rem;
+  height: 0.1rem;
+  z-index: -1000rem;
+`
diff --git a/src/constants/validation.js b/src/constants/validation.js
@@ -21,5 +21,5 @@ export const MESSAGE = {
   ACCOUNTNAME: {
     REQUIRED: '계정 ID를 입력해주세요',
     PATTERN: '영문, 숫자, 특수문자 ., _ 만 입력해주세요'
-  }
+  },
 }
diff --git a/src/hook/useImageUpload.jsx b/src/hook/useImageUpload.jsx
@@ -0,0 +1,58 @@
+import { useState } from 'react';
+import { useMutation } from 'react-query';
+import { postUploadProfile } from '../api/auth';
+import imageCompression from 'browser-image-compression';
+
+const useImageUpload = () => {
+  const [previewImage, setPreviewImage] = useState('');
+  const [image, setImage] = useState('');
+
+  const uploadImage = useMutation('uploadImage', postUploadProfile, {
+    onSuccess: (res) => {
+      console.log(res);
+      setImage(process.env.REACT_APP_API_URL + res.filename);
+    },
+    onError: (error) => {
+      console.log(error);
+    }
+  });
+
+  const handleImage = async (e) => {
+    const file = e.target.files[0];
+    const allowedExtensions = ['jpg', 'gif', 'png', 'jpeg', 'bmp', 'tif', 'heic'];
+    const fileExtension = file.name.split('.').pop().toLowerCase();
+
+    if (allowedExtensions.includes(fileExtension)) {
+      try {
+        const options = {
+          maxSizeMB: 1,
+          maxWidthOrHeight: 800,
+          useWebWorker: true,
+        };
+
+        const compressedImage = await imageCompression(file, options);
+        const compressedFile = new File([compressedImage], compressedImage.name, {
+          type: compressedImage.type,
+        });
+
+        const imgData = new FormData();
+        imgData.append('image', compressedFile);
+        await uploadImage.mutate(imgData);
+
+        const reader = new FileReader();
+        reader.readAsDataURL(compressedFile);
+        reader.onload = () => {
+          setPreviewImage(reader.result);
+        };
+      } catch (error) {
+        console.error(error);
+      }
+    } else {
+      alert('유효하지 않은 파일 형식입니다.');
+    }
+  };
+
+  return { image, previewImage, handleImage };
+};
+
+export default useImageUpload;
diff --git a/src/hook/useValid.jsx b/src/hook/useValid.jsx
@@ -0,0 +1,65 @@
+import React, { useState, useEffect } from 'react';
+
+export default function useValid(formData) {
+  const [messages, setMessages] = useState({
+    email: '',
+    password: ''
+  });
+  const [isValid, setIsValid] = useState({
+    email: false,
+    password: false
+  });
+
+  useEffect(() => {
+    if (formData.email) {
+      const emailRegex = /^[a-zA-Z0-9+-\_.]+@[a-zA-Z0-9-]+\.[a-zAZ0-9-.]+$/;
+      if (!emailRegex.test(formData.email)) {
+        setMessages((prevMessages) => ({
+          ...prevMessages,
+          email: '이메일의 형식이 올바르지 않습니다 😥'
+        }));
+        setIsValid({ ...isValid, email: false });
+      } else {
+        setMessages((prevMessages) => ({
+          ...prevMessages,
+          email: ''
+        }));
+        setIsValid({ ...isValid, email: true });
+      }
+    } else {
+      setMessages((prevMessages) => ({
+        ...prevMessages,
+        email: ''
+      }));
+      setIsValid({ ...isValid, email: false });
+    }
+  }, [formData.email]);
+
+  useEffect(() => {
+    if (formData.password) {
+      const passwordRegex =
+        /^(?=.*[A-Za-z])(?=.*\d)(?=.*[$@$!%*#?&])[A-Za-z\d$@$!%*#?&]{6,}$/;
+      if (!passwordRegex.test(formData.password)) {
+        setMessages((prevMessages) => ({
+          ...prevMessages,
+          password: '영문+숫자+특수기호 조합으로 6자리 이상 입력해주세요'
+        }));
+        setIsValid({ ...isValid, password: false });
+      } else {
+        setMessages((prevMessages) => ({
+          ...prevMessages,
+          password: ''
+        }));
+        setIsValid({ ...isValid, password: true });
+      }
+    } else {
+      setMessages((prevMessages) => ({
+        ...prevMessages,
+        password: ''
+      }));
+      setIsValid({ ...isValid, password: false });
+    }
+  }, [formData.password]);
+
+  return { messages, setMessages, isValid, setIsValid };
+}
diff --git a/src/pages/LoginPage/SnsLoginPage/SnsLoginPage.jsx b/src/pages/LoginPage/SnsLoginPage/SnsLoginPage.jsx
@@ -22,7 +22,7 @@ const SnsLoginPage = () => {
   const isDarkMode = useRecoilValue(isDarkModeState);
   return (
     <Container>
-      <Title>Sns 로그인 페이지</Title>
+      <Title>SNS 로그인 페이지</Title>
       <Main>
         <LogoSection>
           <LogoImage src={isDarkMode ? SnsLogoDark : SnsLogo} alt="들숨날숨 로고" />