Merge pull request #163 from KUIT-MAPU/feat/162-others-profile

Profile Edit
KUIT-MAPU · Nov 13, 2024 · a0b7b29 · a0b7b29
2 parents 6c169ae + 4009bb4
commit a0b7b29
Show file tree

Hide file tree

Showing 11 changed files with 399 additions and 48 deletions.
diff --git a/src/components/profile_setting/LogProfileInfoSetting.tsx b/src/components/profile_setting/LogProfileInfoSetting.tsx
@@ -39,17 +39,24 @@ const ProfileInfoSetting = (props:any) => {
     nickname: '',
     profileId: '',
     imgUrl: '',
+    imgFile: '',
   });
 
+  const profileEditMutation = useProfileEditMutation(prevUrl);
+
   useEffect(() => {
-    if (id === undefined || nickname === undefined) {
-      setIsComplete(false);
-      return;
-    }
+    // if (id === undefined || nickname === undefined) {
+    //   setIsComplete(false);
+    //   return;
+    // }
 
-    if (!isNicknameEmpty && !isIdEmpty && isValidNickname && isValidId)
+    if ((props.loginedId && props.loginedNickName) ||
+    (!isNicknameEmpty && !isIdEmpty && isValidNickname && isValidId)){
       setIsComplete(true);
-    else setIsComplete(false);
+    }
+    else {
+      setIsComplete(false);
+    }
   }, [isNicknameEmpty, isValidNickname, isIdEmpty, isValidId]);
 
 
@@ -66,11 +73,30 @@ const ProfileInfoSetting = (props:any) => {
   const handleProfileSettingSubmit = async (event:any) => {
     event.preventDefault();
 
-    const formData = {
-      nickname,
-      id,
-      imageUrl: "https://profile-image-s3-bucket-mapu-backend.s3.ap-northeast-2.amazonaws.com/soju.png/2024-08-08T03%3A37%3A25.889237300",
-    };
+    const formData = new FormData();
+
+    //닉네임과 ID, 이미지 URL 추가
+    const requestJson = JSON.stringify({
+      nickname:nickname || userData.nickname,
+      profileId: id || userData.profileId,
+      imageUrl: userData.imgUrl,
+    })
+    const requestDTO = new Blob([requestJson], { type: 'application/json' });
+    formData.append('requestDTO', requestDTO);
+
+    // 새로 업로드된 이미지가 있다면 추가, 없으면 imageFile에 null 추가
+    if (imgFile) {
+      formData.append('imageFile', imgFile); // 새로운 이미지 파일 추가
+    } else {
+      formData.append('imageFile', ""); // 기존 이미지를 사용하는 경우 null처럼 빈 문자열로 추가
+    }
+    // const formData = {
+    //   nickname,
+    //   id,
+    //   imageUrl: "https://profile-image-s3-bucket-mapu-backend.s3.ap-northeast-2.amazonaws.com/soju.png/2024-08-08T03%3A37%3A25.889237300",
+    //   imageFile: null,
+    // };
+    await profileEditMutation.mutate(formData);
 
     console.log('데이터 생성 완료')
     console.log(formData);
@@ -87,6 +113,7 @@ const ProfileInfoSetting = (props:any) => {
           nickname: data.nickname,
           profileId: data.profileId,
           imgUrl: data.imgUrl,
+          imgFile: data.imgFile,
         });
         console.log(data);
       } catch (error) {

diff --git a/src/components/profile_setting/ProfileInfoSetting.tsx b/src/components/profile_setting/ProfileInfoSetting.tsx
@@ -42,9 +42,12 @@ const ProfileInfoSetting = (props:any) => {
       return;
     }
 
-    if (!isNicknameEmpty && !isIdEmpty && isValidNickname && isValidId)
+    if (!isNicknameEmpty && !isIdEmpty && isValidNickname && isValidId){
       setIsComplete(true);
-    else setIsComplete(false);
+    }
+    else {
+      setIsComplete(false);
+    }
   }, [isNicknameEmpty, isValidNickname, isIdEmpty, isValidId]);
 
 

diff --git a/src/components/timeLine/editorList/EditorProfileCard.module.scss b/src/components/timeLine/editorList/EditorProfileCard.module.scss
@@ -28,14 +28,17 @@
   display: flex;
   flex-direction: column;
   justify-content: space-evenly;
+  text-decoration: none;
 }
 
 .editorName {
   font-weight: 600;
+  text-decoration: none;
 }
 
 .editorId {
   color: var(--gray_400);
+  text-decoration: none;
 }
 
 .following {

diff --git a/src/components/timeLine/editorList/EditorProfileCard.tsx b/src/components/timeLine/editorList/EditorProfileCard.tsx
@@ -5,10 +5,10 @@ import useRegisterStore from '../../../stores/registerStore';
 
 import styles from './EditorProfileCard.module.scss';
 import dimmedStyles from '../Dimmed.module.scss';
-import userImg from '../../../assets/img_user_default_profile.svg'
+import userImg from '../../../assets/img_user_default_profile.svg';
 import AuthContainer from '../../login/AuthContainer';
 
-import { useLocation, useNavigate } from 'react-router-dom';
+import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { usePostFollow } from '../../../apis/follow/usePostFollow';
 import { FollowType } from '../../../types/follow/FollowType';
 import { useDeleteUnFollow } from '../../../apis/follow/useDeleteUnFollow';
@@ -17,12 +17,15 @@ import { fetchFollowing } from '../../../apis/follow/useGetFollowing';
 
 interface ProfileCardProps {
   Editor: EditorType;
-  token: string|undefined;
+  token: string | undefined;
   isLog: boolean;
-
 }
 
-const EditorProfileCard: React.FC<ProfileCardProps> = ({ Editor, isLog, token }) => {
+const EditorProfileCard: React.FC<ProfileCardProps> = ({
+  Editor,
+  isLog,
+  token,
+}) => {
   const { registerStatus, setLoginNeededStatus } = useRegisterStore();
   const [isOverlayVisible, setIsOverlayVisible] = useState<boolean>(false);
   const [isFollow, setIsFollow] = useState<boolean>(false);
@@ -31,13 +34,11 @@ const EditorProfileCard: React.FC<ProfileCardProps> = ({ Editor, isLog, token })
   const Followmutation = usePostFollow();
   const UnFollowmutation = useDeleteUnFollow();
 
-  const { data: followingData } = useQuery(
-    ['followindData'],
-    () => fetchFollowing(token)
-  )
+  const { data: followingData } = useQuery(['followindData'], () =>
+    fetchFollowing(token),
+  );
 
   const handleFollow = (followingId: number) => {
-
     if (!isLog) {
       setLoginNeededStatus(true);
       setIsOverlayVisible(true);
@@ -50,33 +51,32 @@ const EditorProfileCard: React.FC<ProfileCardProps> = ({ Editor, isLog, token })
     }
   };
 
-  const handleUnFollow = (followingId:number) => {
-  setIsFollow(false);
-  const unfollowData : FollowType = {
-    followingId: followingId,
-  }
-  UnFollowmutation.mutate(unfollowData);
+  const handleUnFollow = (followingId: number) => {
+    setIsFollow(false);
+    const unfollowData: FollowType = {
+      followingId: followingId,
+    };
+    UnFollowmutation.mutate(unfollowData);
   };
 
-
   const handleClose = () => {
     setLoginNeededStatus(false);
     const prevUrl = pathname.split('?')[0];
     navigate(prevUrl);
     setIsOverlayVisible(false);
   };
 
-  useEffect(()=>{
-    if(followingData?.users.some(user => user.userId === Editor.userId)) {
+  useEffect(() => {
+    if (followingData?.users.some((user) => user.userId === Editor.userId)) {
       setIsFollow(true);
     } else {
       setIsFollow(false);
     }
-  },[followingData])
+  }, [followingData]);
 
   useEffect(() => {
-    console.log('followingData:',followingData);
-  },[isLog,followingData])
+    console.log('followingData:', followingData);
+  }, [isLog, followingData]);
 
   return (
     <div className={styles.cardRoot}>
@@ -86,7 +86,21 @@ const EditorProfileCard: React.FC<ProfileCardProps> = ({ Editor, isLog, token })
           <AuthContainer className={dimmedStyles.authContainer} />
         </>
       )}
-      <div className={styles.editorInfo}>
+      <Link to={`/user/${Editor.profileId}`} style={{ textDecoration: 'none',color: 'inherit' }}>
+        <div className={styles.editorInfo}>
+          <img
+            className={styles.editorImg}
+            src={Editor.image ? Editor.image : userImg}
+            alt="Editor Image"
+          />
+
+          <div className={styles.editorNameNid}>
+            <div className={styles.editorName}>{Editor.nickname}</div>
+            <span className={styles.editorId}>@{Editor.profileId}</span>
+          </div>
+        </div>
+      </Link>
+      {/* <div className={styles.editorInfo}>
         <img
           className={styles.editorImg}
           src={Editor.image ? Editor.image : userImg}
@@ -97,11 +111,17 @@ const EditorProfileCard: React.FC<ProfileCardProps> = ({ Editor, isLog, token })
           <div className={styles.editorName}>{Editor.nickname}</div>
           <span className={styles.editorId}>@{Editor.profileId}</span>
         </div>
-      </div>
-
-      <button className={`${isFollow ? styles.unfollowing : styles.following}`} onClick={isFollow ? () => handleUnFollow(Editor.userId):() => handleFollow(Editor.userId)}>
-        {isFollow ? "팔로잉" : "팔로우"}
-
+      </div> */}
+
+      <button
+        className={`${isFollow ? styles.unfollowing : styles.following}`}
+        onClick={
+          isFollow
+            ? () => handleUnFollow(Editor.userId)
+            : () => handleFollow(Editor.userId)
+        }
+      >
+        {isFollow ? '팔로잉' : '팔로우'}
       </button>
     </div>
   );

diff --git a/src/components/userProfile/getProfileEdit/ProfileEdit.tsx b/src/components/userProfile/getProfileEdit/ProfileEdit.tsx
@@ -9,6 +9,7 @@ import { ReactComponent as FontAlert } from '../../../assets/ico_font_alert.svg'
 
 import instance from '../../../apis/instance';
 import ProfileSettingModal from '../../profile_setting/ProfileSettingModal';
+import LogProgileInfoSettingModal from '../../profile_setting/LogProfileInfoSetting';
 
 const ProfileEdit = ({ onClose }: { onClose: () => void }) => {
     const [imageUrl, setImageUrl] =useState<string>('ddd');

diff --git a/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx b/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx
@@ -11,8 +11,7 @@ import Follower from '../followModal/Follower';
 
 import instance from '../../../apis/instance';
 import ProfileEdit from '../getProfileEdit/ProfileEdit';
-import ProfileSettingModal from '../../profile_setting/LoginProfileSetting';
-
+import LogProfileSettingModal from '../../profile_setting/LoginProfileSetting';
 
 const UserInfoBar = (props: { children?: React.ReactNode }) => {
   const navigate = useNavigate();
@@ -83,15 +82,15 @@ const UserInfoBar = (props: { children?: React.ReactNode }) => {
           followingCnt: data.followingCnt,
         });
 
-        navigate(`/user/${data.profileId}`);
+        // navigate(`/user/${data.profileId}`);
       } catch (error) {
         console.error('Failed to fetch user data', error);
       }
     };  //로그인 한 유저 정보 받아오기
 
 
     fetchUserData();
-  }, [navigate]);
+  }, []);
 
   const { loginNeeded, registerStatus, setLoginNeededStatus } =
     useRegisterStore();
@@ -183,7 +182,7 @@ const UserInfoBar = (props: { children?: React.ReactNode }) => {
         <div onClick={handleProfileEditClose} className={styles.modalOverlay}>
           <div className={styles.modalContent}
           onClick={(e) => {e.stopPropagation();}}>
-            <ProfileSettingModal loginedNickName={userData.nickname} loginedId={userData.profileId} onClose={handleProfileEditClose} />
+            <LogProfileSettingModal loginedNickName={userData.nickname} loginedId={userData.profileId} onClose={handleProfileEditClose} />
             </div>
         </div>
       )}