From 59a1b912ce4ccbcd6df445fe18d5372b70145479 Mon Sep 17 00:00:00 2001 From: jyc0328 Date: Mon, 19 Aug 2024 15:49:11 +0900 Subject: [PATCH] feat: implementeDDD --- src/assets/ico_font_alert.svg | 8 + src/assets/ico_profile_edit.svg | 9 ++ .../global/GlobalNavigationBar.module.scss | 6 + .../getProfileEdit/ProfileEdit.module.scss | 138 ++++++++++++++++++ .../getProfileEdit/ProfileEdit.tsx | 137 +++++++++++++++++ .../userInfoBarCard/GetUserInfoBar.tsx | 13 +- 6 files changed, 310 insertions(+), 1 deletion(-) create mode 100644 src/assets/ico_font_alert.svg create mode 100644 src/assets/ico_profile_edit.svg create mode 100644 src/components/userProfile/getProfileEdit/ProfileEdit.module.scss create mode 100644 src/components/userProfile/getProfileEdit/ProfileEdit.tsx diff --git a/src/assets/ico_font_alert.svg b/src/assets/ico_font_alert.svg new file mode 100644 index 0000000..56e5d38 --- /dev/null +++ b/src/assets/ico_font_alert.svg @@ -0,0 +1,8 @@ + + + + + + + + diff --git a/src/assets/ico_profile_edit.svg b/src/assets/ico_profile_edit.svg new file mode 100644 index 0000000..6e906a0 --- /dev/null +++ b/src/assets/ico_profile_edit.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/src/components/global/GlobalNavigationBar.module.scss b/src/components/global/GlobalNavigationBar.module.scss index fa46eaf..28800cc 100644 --- a/src/components/global/GlobalNavigationBar.module.scss +++ b/src/components/global/GlobalNavigationBar.module.scss @@ -83,3 +83,9 @@ .iconContainer_off { background-color: var(--white); } + +.iconContainer img { + width: 24px; + height: 24px; + border-radius: 150px; +} \ No newline at end of file diff --git a/src/components/userProfile/getProfileEdit/ProfileEdit.module.scss b/src/components/userProfile/getProfileEdit/ProfileEdit.module.scss new file mode 100644 index 0000000..41a7a0f --- /dev/null +++ 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); + } + \ No newline at end of file diff --git a/src/components/userProfile/getProfileEdit/ProfileEdit.tsx b/src/components/userProfile/getProfileEdit/ProfileEdit.tsx new file mode 100644 index 0000000..b707ff0 --- /dev/null +++ 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('ddd'); + const [userNickName, setUserNickName] = useState('d'); + const [userId, setUserId] = useState(''); + 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 ( +
+
+
+ + +
+
+ profileImage +
+ +
+ setUserNickName(e.target.value)} + placeholder="닉네임" + /> +
+
+ +
3~12글자 이내
+
+ +
+ setUserId(e.target.value)} + placeholder="아이디" + /> +
+
+
+ +
3~20글자 이내
+
+
+ +
영문 소문자,숫자,특수문자(._) 사용
+
+
+ +
+
적용하기
+
+
+
+ ); +} + +export default ProfileEdit; \ No newline at end of file diff --git a/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx b/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx index af6f636..6d8d8eb 100644 --- a/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx +++ b/src/components/userProfile/userInfoBarCard/GetUserInfoBar.tsx @@ -10,6 +10,7 @@ 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(); @@ -17,6 +18,7 @@ const UserInfoBar = (props: { children?: React.ReactNode }) => { const [isFollowerOpen, setIsFollowerOpen] = useState(false); const [isLog, setIsLog] = useState(false); const [isOverlayVisible, setIsOverlayVisible] = useState(false); + const [isProfileEditOpen, setIsProfileEditOpen] = useState(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 }) => { {userData.followingCnt} -
+
프로필 편집
{isFollowingOpen && } {isFollowerOpen && } + {isProfileEditOpen && } {isOverlayVisible && ( <>