Skip to content

Commit

Permalink
Merge pull request #140 from SejongPeer/JunYoung
Browse files Browse the repository at this point in the history 
Jun young
  • Loading branch information
@JunYoungKr
JunYoungKr authored Feb 27, 2024
2 parents c664e24 + 0773f70 commit d13e144
Show file tree
Hide file tree
Showing 3 changed files with 203 additions and 166 deletions.
210 changes: 124 additions & 86 deletions src/Components/Login/MyPage/Modify/Modify.js
View file
Original file line number Diff line number Diff line change
@@ -1,146 +1,184 @@
import styles from "../Modify/Modify.module.css";
import { useState, useEffect } from "react";
import styles from '../Modify/Modify.module.css';
import { useState, useEffect } from 'react';

const Modify = () => {
const [focusedDiv, setFocusedDiv] = useState(null);
const [myPageData, setMyPageData] = useState(1);
const [accessToken, setAccessToken] = useState(localStorage.getItem("accessToken"));
const [refreshToken, setRefreshToken] = useState(localStorage.getItem("refreshToken"));
const [accessToken, setAccessToken] = useState(
localStorage.getItem('accessToken')
);
const [refreshToken, setRefreshToken] = useState(
localStorage.getItem('refreshToken')
);

const [newNickName, setNewNickName] = useState("");
const [newKaKaoId, setNewKaKaoId] = useState("");
const [newPhoneNum, setNewPhoneNum] = useState("");
const [newNickName, setNewNickName] = useState('');
const [newKaKaoId, setNewKaKaoId] = useState('');
const [newPhoneNum, setNewPhoneNum] = useState('');

//수정 안하고 넘길때 기존 값으로 초기화해주기
const handleNickName = (e) => {
const handleNickName = e => {
setNewNickName(e.target.value);
}
};

const handleKaKaoId = (e) => {
const handleKaKaoId = e => {
setNewKaKaoId(e.target.value);
}
};

const handlePhoneNum = (e) => {
const handlePhoneNum = e => {
setNewPhoneNum(e.target.value);
}


// useEffect(() => {
// console.log("nick : ", newNickName);

// }, [newNickName]);

// useEffect(() => {
// const getDate = async (e) => {
// try {
// const response = await fetch(
// process.env.REACT_APP_BACK_SERVER + "/member/my-page",
// {
// method: "GET",
// headers: {
// "Content-Type": "application/json",
// 'Authorization': `Bearer ${accessToken}`,
// 'Refresh-Token': `Bearer ${refreshToken}`,
// },
// }
// );

// if (!response.ok) {
// const errorData = await response.json(); // 오류 응답을 처리합니다.
// throw new Error(data.message);
// }

// const data = await response.json(); // data 변수를 await로 초기화
// setMyPageData(data.data);
// console.log(data.data);

// } catch (error) {
// console.error("Error occurred:", error);
// console.error(error.message);
// alert(error.message);
// e.preventDefault();
// }
// };
// getDate();
// }, []);



const handleInputFocus = (divId) => {
};

useEffect(() => {
const getDate = async () => {
try {
const response = await fetch(
process.env.REACT_APP_BACK_SERVER + '/member/my-page',
{
method: 'GET',
headers: {
'Content-Type': 'application/json',
Authorization: `Bearer ${accessToken}`,
'Refresh-Token': refreshToken,
},
}
);

if (!response.ok) {
const errorData = await response.json(); // 오류 응답을 처리
throw new Error(errorData.message);
}

const data = await response.json(); // data 변수를 await로 초기화
setMyPageData(data.data);
console.log(data.data);
} catch (error) {
console.error('Error occurred:', error);
alert(error.message);
}
};
getDate();
}, [accessToken, refreshToken]); // accessToken 또는 refreshToken이 변경될 때마다 정보를 다시 불러옴

const handleInputFocus = divId => {
setFocusedDiv(divId);
};

const handleInputBlur = () => {
setFocusedDiv(null);
};

const handleSubmit = async (e) => {
const handleSubmit = async e => {
e.preventDefault();
const KaKaoId = newKaKaoId !== "" ? newKaKaoId : myPageData.kakaoAccount;
const PhoneNum = newPhoneNum !== "" ? newPhoneNum : myPageData.phoneNumber;
const NickName = newNickName !== "" ? newNickName : myPageData.nickName;
const KaKaoId = newKaKaoId !== '' ? newKaKaoId : myPageData.kakaoAccount;
const PhoneNum = newPhoneNum !== '' ? newPhoneNum : myPageData.phoneNumber;
const NickName = newNickName !== '' ? newNickName : myPageData.nickName;

let modifyData = {

};

}
let modifyData = {};
};

return (
<div className={styles.ContainerBox}>
{myPageData && (
<div className={styles.outerContainer}>
<div className={styles.container1}>
<div className={styles.informTitleBox}>
<div style={{ fontWeight: "700", marginBottom: "0px" }}>정보 수정</div>
<div style={{ color: "#ff4b4b", fontSize: "1.5vh", fontWeight: "700" }}>*각 정보 클릭 시, 수정 가능</div>
<div style={{ fontWeight: '700', marginBottom: '0px' }}>
정보 수정
</div>
<div
style={{
color: '#ff4b4b',
fontSize: '1.5vh',
fontWeight: '700',
}}
>
*각 정보 클릭 시, 수정 가능
</div>
</div>
<div className={styles.myInformBox}>
<div className={`${focusedDiv === 'nickName' ? styles.focused : styles.myInformDiv}`}>
<div
className={`${focusedDiv === 'nickName' ? styles.focused : styles.myInformDiv}`}
>
<div className={styles.myInformName}>닉네임</div>
<input className={styles.myInformInput} placeholder="세종냥이"
<input
className={styles.myInformInput}
value={newNickName || myPageData.nickname} // newNickName이 비어있으면 myPageData에서 기존 값을 사용
onFocus={() => handleInputFocus('nickName')}
onChange={handleNickName}
onBlur={() => handleInputFocus(null)}
></input>
onBlur={handleInputBlur}
/>
</div>

<div className={`${focusedDiv === 'kakaoId' ? styles.focused : styles.myInformDiv}`}>
<div
className={`${focusedDiv === 'kakaoId' ? styles.focused : styles.myInformDiv}`}
>
<div className={styles.myInformName}>카카오톡 아이디</div>
<input className={styles.myInformInput} placeholder="세종냥이"
<input
className={styles.myInformInput}
value={newKaKaoId || myPageData.kakaoAccount}
onFocus={() => handleInputFocus('kakaoId')}
onChange={handleKaKaoId}
onBlur={() => handleInputFocus(null)}
></input>
onBlur={handleInputBlur}
/>
</div>
<div className={`${focusedDiv === 'phoneNum' ? styles.focused : styles.myInformDiv}`}>
<div
className={`${focusedDiv === 'phoneNum' ? styles.focused : styles.myInformDiv}`}
>
<div className={styles.myInformName}>전화번호</div>
<input className={styles.myInformInput} placeholder="세종냥이"
<input
className={styles.myInformInput}
value={newPhoneNum || myPageData.phoneNumber}
onFocus={() => handleInputFocus('phoneNum')}
onChange={handlePhoneNum}
onBlur={() => handleInputFocus(null)}
></input>
onBlur={handleInputBlur}
/>
</div>
</div>
</div>
<div className={styles.container2}>
<div className={styles.informTitleBox}>
<div style={{ fontWeight: "700", marginBottom: "0px" }}>내 학과</div>
<div style={{ color: "#ff4b4b", fontSize: "1.5vh", fontWeight: "700" }}>*학과 정보는 새로운 학기에 수정 가능합니다.</div>
<div
className={styles.informTitleBox}
style={{ margin: '1.2vh 0 0 0' }}
>
<div
style={{
fontSize: '1.2em',
fontWeight: '700',
marginBottom: '0px',
color: 'black',
}}
>
내 학과
</div>
<div
style={{
color: '#ff4b4b',
fontSize: '1.5vh',
fontWeight: '700',
}}
>
*학과 정보는 새로운 학기에 수정 가능합니다.
</div>
</div>
<div className={styles.departBox}>
<div style={{ fontWeight: "600", color: "#555555" }}>소프트웨어학과 · 3학년</div>
<div
style={{
fontWeight: '600',
color: '#555555',
}}
>
{myPageData.major}
</div>
</div>
</div>

<button className={styles.modify} onClick={handleSubmit}>
<p style={{ fontWeight: "400", fontSize: "1.3em" }}>수정하기</p>
<p style={{ fontWeight: '400', fontSize: '1.3em' }}>수정하기</p>
</button>
</div>
)}
</div>
);

};

export default Modify;
24 changes: 11 additions & 13 deletions src/Components/Login/MyPage/Modify/Modify.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@
height: 100vh;
margin-top: 7.3vh;
padding: 1vw 2vw 0 2vw;
background-color: #FBE4E4;
background-color: #fbe4e4;
border: 1px solid #e5e5e5;
display: flex;
flex-direction: column;
Expand All @@ -23,7 +23,7 @@
width: 28vw;
margin-top: 7.3vh;
padding: 1vw 2vw 0 2vw;
background-color: #FBE4E4;
background-color: #fbe4e4;
border: 1px solid #e5e5e5;
display: flex;
flex-direction: column;
Expand All @@ -32,7 +32,7 @@
}

.container1 {
background-color: #FFFFFF;
background-color: #ffffff;
width: 28vw;
height: 29vh;
display: flex;
Expand Down Expand Up @@ -104,13 +104,12 @@
border: none;
}


.container2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
background-color: #ffffff;
width: 28vw;
height: 12vh;
margin-top: 1.5vh;
Expand Down Expand Up @@ -149,7 +148,7 @@
width: 100vw;
margin-top: 7.3vh;
padding: 1vw 2vw 0 2vw;
background-color: #FBE4E4;
background-color: #fbe4e4;
border: 1px solid #e5e5e5;
display: flex;
flex-direction: column;
Expand All @@ -162,7 +161,7 @@
width: 100vw;
margin-top: 7.3vh;
padding: 1vw 2vw 0 2vw;
background-color: #FBE4E4;
background-color: #fbe4e4;
border: 1px solid #e5e5e5;
display: flex;
flex-direction: column;
Expand All @@ -171,7 +170,7 @@
}

.container1 {
background-color: #FFFFFF;
background-color: #ffffff;
width: 100vw;
height: 29vh;
display: flex;
Expand Down Expand Up @@ -237,23 +236,22 @@
}

.myInformInput {
width: 17vw;
width: 30vw;
height: 4vh;
font-size: 1.8vh;
margin-right: 5vw;
outline: none;
border: none;
}


.container2 {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
background-color: #FFFFFF;
background-color: #ffffff;
width: 100vw;
height: 12vh;
height: 10vh;
margin-top: 1.5vh;
}

Expand All @@ -276,4 +274,4 @@
border: 1px solid #e5e5e5;
margin-top: 5vh;
}
}
}
Loading

0 comments on commit d13e144

Please sign in to comment.