Merge pull request #143 from KUIT-MAPU/feat/139-ProfileEdit

feat: UserPage 완
KUIT-MAPU · Aug 19, 2024 · 4c677f4 · 4c677f4
2 parents 521b987 + 59a1b91
commit 4c677f4
Show file tree

Hide file tree

Showing 6 changed files with 310 additions and 1 deletion.
diff --git a/src/assets/ico_font_alert.svg b/src/assets/ico_font_alert.svg
diff --git a/src/assets/ico_profile_edit.svg b/src/assets/ico_profile_edit.svg
diff --git a/src/components/global/GlobalNavigationBar.module.scss b/src/components/global/GlobalNavigationBar.module.scss
@@ -84,3 +84,9 @@
 .iconContainer_off {
   background-color: var(--white);
 }
+
+.iconContainer img {
+  width: 24px;
+  height: 24px;
+  border-radius: 150px;
+}
diff --git a/src/components/userProfile/getProfileEdit/ProfileEdit.module.scss b/src/components/userProfile/getProfileEdit/ProfileEdit.module.scss
@@ -0,0 +1,138 @@
+.modalOverlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 1000;
+  }
+
+  .modalContent {
+    background-color: #fff;
+    width: 412px;
+    height: 530px;
+    padding: 20px;
+    border-radius: 6px;
+    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
+    position: relative;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+  }
+
+  .modalTop {
+    background-color: white;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    font-size: 20px;
+    font-weight: 600;
+    color: #111;
+    border-bottom: 1px solid #f2f5f8;
+    margin-bottom: 8px;
+  }
+
+  .userProfilePicBox{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%;
+  }
+
+  .userProfilePic {
+    display: block;
+    width: 120px;
+    height: 120px;
+    margin-top: 44px;
+    margin-bottom: 28px;
+    border-radius: 760px;
+    object-fit: cover;
+  }
+
+  .getNickName,
+  .getId {
+    display: flex;
+    width: 380px;
+    height: 48px;
+    border-radius: 8px;
+    background-color: var(--gray_50);
+    align-items: center;
+    padding-left: 12px;
+    margin-bottom: 8px;
+  }
+
+  .getNickNameInput,
+  .getIdInput {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    height: 100%;
+    background-color: transparent;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+    font-size: 18px;
+    font-weight: 400;
+    outline: none;
+  }
+
+  .alertNickName {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 21px;
+    color: var(--gray_500);
+    margin-bottom: 8px;
+  }
+
+  .alertId{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 21px;
+    color: var(--gray_500);
+    justify-content: space-between;
+  }
+  .alertLettersCount{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .alertLettersStyle{
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+  }
+
+  .createBtn{
+    background-color: var(--gray_100);
+    color: white;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 48px;
+    border-radius: 8px;
+    font-size: 18px;
+    font-weight: 600;
+    cursor: pointer;
+    margin-top: auto;
+  }
+
+  .onEditCreate {
+    background-color: var(--main);
+  }
+
+  .offEditCreate {
+    background-color: var(--gray_200);
+  }
+
diff --git a/src/components/userProfile/getProfileEdit/ProfileEdit.tsx b/src/components/userProfile/getProfileEdit/ProfileEdit.tsx
@@ -0,0 +1,137 @@
+import React, { useState, useEffect } from 'react';
+
+import styles from './ProfileEdit.module.scss'
+import { ReactComponent as ModalClose } from '../../../assets/btn_followmodal_close.svg';
+import { ReactComponent as NewMapIcon } from '../../../assets/ico_newmap.svg';
+import { ReactComponent as ProfileEditIcon } from '../../../assets/ico_profile_edit.svg';
+import { ReactComponent as FontAlert } from '../../../assets/ico_font_alert.svg';
+
+
+import instance from '../../../apis/instance';
+
+const ProfileEdit = ({ onClose }: { onClose: () => void }) => {
+    const [imageUrl, setImageUrl] =useState<string>('ddd');
+    const [userNickName, setUserNickName] = useState<string>('d');
+    const [userId, setUserId] = useState<string>('');
+    const [userProfileData,setUserProfileDate] = useState({
+      nickname: '',
+      profileId: '',
+      imgUrl: '',
+  });
+
+    const isFormValid = userNickName.length >= 3 && userId.length >= 3;
+
+
+    const getButtonStyle = () => {
+        return isFormValid
+          ? `${styles.onEditCreate}`
+          : `${styles.offEditCreate}`;
+      };
+
+    const sendDataToBackend = async (data:any) => {
+        try {
+          const response = await instance.patch('/user', data);
+          console.log('Data sent successfully:', response.data);
+        } catch (error) {
+          console.error('Failed to send data:', error);
+        }
+      };
+
+
+    const handleSubmit = (event:any) => {
+        event.preventDefault();
+
+        if(!userNickName || !userId){
+          alert('모든 필수 정보를 입력해주세요');
+          return;
+        }
+        const formData = {
+            userNickName,
+            userId,
+            imageUrl,
+        };
+
+        console.log('데이터 생성 완료')
+        console.log(formData);
+        sendDataToBackend(formData);
+
+        onClose();
+      };
+
+      useEffect(() => {
+        const fetchUserProfileData = async () => {
+          try {
+            const response = await instance.get('/user');
+            const data = response.data.result;
+
+            setUserProfileDate(data);
+
+          } catch (error) {
+            console.error('Failed to fetch user data', error);
+          }
+       };  
+       fetchUserProfileData();
+      }, []);
+
+    return (
+        <div className={styles.modalOverlay}>
+          <div className={styles.modalContent}>
+            <div className={styles.modalTop}>
+              <ProfileEditIcon />
+              <button className={styles.closeButton} onClick={onClose}>
+                <ModalClose />
+              </button>
+            </div>
+            <div className={styles.userProfilePicBox}>
+                 <img
+                          src={userProfileData.imgUrl}
+                          alt="profileImage"
+                          className={styles.userProfilePic}
+                />
+            </div>
+
+            <div className={styles.getNickName}>
+              <input
+                type="text"
+                className={styles.getNickNameInput}
+                value={userNickName}
+                onChange={(e) => setUserNickName(e.target.value)} 
+                placeholder="닉네임"
+              />
+            </div>
+            <div className={styles.alertNickName}>
+                <FontAlert />
+                <div>3~12글자 이내</div>
+            </div>
+
+            <div className={styles.getId}>
+              <input
+                type="text"
+                className={styles.getIdInput}
+                value={userId}
+                onChange={(e) => setUserId(e.target.value)} 
+                placeholder="아이디"
+              />
+            </div>
+            <div className={styles.alertId}>
+                <div className={styles.alertLettersCount}>
+                    <FontAlert />
+                    <div>3~20글자 이내</div>
+                    </div>
+                    <div className={styles.alertLettersStyle}>
+                    <FontAlert />
+                    <div>영문 소문자,숫자,특수문자(._) 사용</div>
+                </div>
+            </div>
+
+            <div className={`${styles.createBtn} ${getButtonStyle()}`}>
+              <div 
+
+              onClick={handleSubmit}>적용하기</div>
+            </div>
+          </div>
+        </div>
+      );
+}
+
+export default ProfileEdit;
diff --git a/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx b/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx
@@ -10,13 +10,15 @@ import Following from '../followModal/Following';
 import Follower from '../followModal/Follower';
 
 import instance from '../../../apis/instance';
+import ProfileEdit from '../getProfileEdit/ProfileEdit';
 
 const UserInfoBar = (props: { children?: React.ReactNode }) => {
   const navigate = useNavigate();
   const [isFollowingOpen, setIsFollowingOpen] = useState(false);
   const [isFollowerOpen, setIsFollowerOpen] = useState(false);
   const [isLog, setIsLog] = useState<boolean>(false);
   const [isOverlayVisible, setIsOverlayVisible] = useState<boolean>(false);
+  const [isProfileEditOpen, setIsProfileEditOpen] = useState<boolean>(false);
   const [userData, setUserData] = useState({
     nickname: '',
     profileId: '',
@@ -108,6 +110,14 @@ const UserInfoBar = (props: { children?: React.ReactNode }) => {
     setIsFollowerOpen(false);
   };
 
+  const handleProfileEditOpen = () => {
+    setIsProfileEditOpen(true);
+  };
+
+  const handleProfileEditClose = () => {
+    setIsProfileEditOpen(false);
+  };
+
   useEffect(() => {
     if (registerStatus !== RegisterStatus.LOG_IN && loginNeeded) {
       setIsLog(false);
@@ -161,12 +171,13 @@ const UserInfoBar = (props: { children?: React.ReactNode }) => {
           <span>{userData.followingCnt}</span>
         </div>
       </div>
-      <div className={styles.ProfileBottom} onClick={handleLoginClick}>
+      <div className={styles.ProfileBottom} onClick={handleProfileEditOpen}>
         프로필 편집
       </div>
 
       {isFollowingOpen && <Following onClose={closeFollowing} />}
       {isFollowerOpen && <Follower onClose={closeFollower} />}
+      {isProfileEditOpen && <ProfileEdit onClose={handleProfileEditClose} />}
       {isOverlayVisible && (
         <>
           <div onClick={handleClose} />