From dfaa803d41efe655390ccf8e64cd631c59b09dfa Mon Sep 17 00:00:00 2001 From: lalaurel Date: Mon, 30 Dec 2024 00:23:23 +0900 Subject: [PATCH 1/6] refctor: accountCancel currentId --- src/pages/Account/AccountCancel/index.tsx | 231 +++++++++++----------- 1 file changed, 113 insertions(+), 118 deletions(-) diff --git a/src/pages/Account/AccountCancel/index.tsx b/src/pages/Account/AccountCancel/index.tsx index 1c30b279..9f9c7456 100644 --- a/src/pages/Account/AccountCancel/index.tsx +++ b/src/pages/Account/AccountCancel/index.tsx @@ -2,11 +2,10 @@ import { useState } from 'react'; import { useNavigate } from 'react-router-dom'; import theme from '@styles/theme'; - +import { getCurrentUserId } from '@utils/getCurrentUserId'; import { patchUserWithdrawApi } from '@apis/user'; import back from '@assets/arrow/left.svg'; - import BottomButton from '@components/BottomButton/index'; import { OODDFrame } from '@components/Frame/Frame'; import Modal from '@components/Modal/index'; @@ -14,123 +13,119 @@ import { StyledText } from '@components/Text/StyledText'; import TopBar from '@components/TopBar/index'; import { - CancelContainer, - SubTitle, - Text, - InfoBox, - InfoItem, - CheckboxWrapper, - CheckboxInput, - Label, - StyledCheckboxText, - StyledDiv, -} from './styles'; // 상대 경로 index 명시 + CancelContainer, + SubTitle, + Text, + InfoBox, + InfoItem, + CheckboxWrapper, + CheckboxInput, + Label, + StyledCheckboxText, + StyledDiv, +} from './styles'; const AccountCancel: React.FC = () => { - const [isChecked, setIsChecked] = useState(false); - const [modalContent, setModalContent] = useState(null); - const [isModalVisible, setIsModalVisible] = useState(false); - const navigate = useNavigate(); - - const handleCheckboxChange = () => { - setIsChecked(!isChecked); - }; - - const handleModalClose = () => { - setIsModalVisible(false); - setModalContent(null); - }; - - const handleDeleteAccount = async () => { - try { - if (!isChecked) { - setModalContent('탈퇴 안내사항에 동의해야 합니다.'); - setIsModalVisible(true); - return; - } - - const storedUserId = Number(localStorage.getItem('my_id')); - const token = localStorage.getItem('new_jwt_token'); - - if (!storedUserId || !token) { - setModalContent('사용자 정보를 찾을 수 없습니다.'); - setIsModalVisible(true); - return; - } - - // API 요청 - const response = await patchUserWithdrawApi(storedUserId); - - if (response.isSuccess) { - setModalContent('계정이 성공적으로 삭제되었습니다.'); - setIsModalVisible(true); - - // 계정 삭제 시 localStorage에서 사용자 정보 제거 - localStorage.clear(); - - setTimeout(() => { - navigate('/login'); - }, 2000); - } else { - setModalContent(response.code || '알 수 없는 오류가 발생했습니다.'); - setIsModalVisible(true); - } - } catch (error) { - console.error('계정 삭제하는데 오류남:', error); - setModalContent('계정을 삭제하는 동안 오류가 발생했습니다. 다시 시도해 주세요.'); - setIsModalVisible(true); - } - }; - - return ( - - - navigate(-1)} /> - - - - OOTD 탈퇴 전 확인하세요! - - - - - {`탈퇴하시면 이용 중인 서비스가 폐쇄되며,\n모든 데이터는 복구할 수 없습니다.`} - - - - - - 지금까지 OODD를 이용해주셔서 감사합니다! - - - - - - - - - - - {isModalVisible && ( - - )} - - ); + const [isChecked, setIsChecked] = useState(false); + const [modalContent, setModalContent] = useState(null); + const [isModalVisible, setIsModalVisible] = useState(false); + const navigate = useNavigate(); + + const handleCheckboxChange = () => { + setIsChecked(!isChecked); + }; + + const handleModalClose = () => { + setIsModalVisible(false); + setModalContent(null); + }; + + const handleDeleteAccount = async () => { + try { + if (!isChecked) { + setModalContent('탈퇴 안내사항에 동의해야 합니다.'); + setIsModalVisible(true); + return; + } + + const currentUserId = getCurrentUserId(); + const token = localStorage.getItem('new_jwt_token'); + + if (!currentUserId || !token) { + setModalContent('사용자 정보를 찾을 수 없습니다.'); + setIsModalVisible(true); + return; + } + + const response = await patchUserWithdrawApi(currentUserId); + + if (response.isSuccess) { + setModalContent('계정이 성공적으로 삭제되었습니다.'); + setIsModalVisible(true); + localStorage.clear(); + + setTimeout(() => { + navigate('/login'); + }, 2000); + } else { + setModalContent(response.code || '알 수 없는 오류가 발생했습니다.'); + setIsModalVisible(true); + } + } catch (error) { + console.error('계정 삭제하는데 오류남:', error); + setModalContent('계정을 삭제하는 동안 오류가 발생했습니다. 다시 시도해 주세요.'); + setIsModalVisible(true); + } + }; + + return ( + + + navigate(-1)} /> + + + OOTD 탈퇴 전 확인하세요! + + + + + {`탈퇴하시면 이용 중인 서비스가 폐쇄되며,\n모든 데이터는 복구할 수 없습니다.`} + + + + + + 지금까지 OODD를 이용해주셔서 감사합니다! + + + + + + + + + + + {isModalVisible && ( + + )} + + ); }; -export default AccountCancel; +export default AccountCancel; \ No newline at end of file From 2b0feb65976f87271a3b36eebf18f156855030ae Mon Sep 17 00:00:00 2001 From: lalaurel Date: Mon, 30 Dec 2024 00:23:42 +0900 Subject: [PATCH 2/6] refactor: accountSetting currentId --- src/pages/Account/AccountSetting/index.tsx | 219 +++++++++++---------- 1 file changed, 111 insertions(+), 108 deletions(-) diff --git a/src/pages/Account/AccountSetting/index.tsx b/src/pages/Account/AccountSetting/index.tsx index 5abb4b9f..a23ccb79 100644 --- a/src/pages/Account/AccountSetting/index.tsx +++ b/src/pages/Account/AccountSetting/index.tsx @@ -2,7 +2,7 @@ import { useState, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import theme from '@styles/theme'; - +import { getCurrentUserId } from '@utils/getCurrentUserId'; import { getUserInfoApi } from '@apis/user'; import back from '@assets/arrow/left.svg'; @@ -16,115 +16,118 @@ import Loading from '@components/Loading/index'; import { StyledText } from '@components/Text/StyledText'; import TopBar from '@components/TopBar/index'; -import type { UserInfoData } from '@apis/user/dto'; // type 명시 +import type { UserInfoData } from '@apis/user/dto'; -import { ProfileEditContainer, ProfilePic, ProfilePicWrapper, Label, Row, List, ListItem } from './styles'; +import { + ProfileEditContainer, + ProfilePic, + ProfilePicWrapper, + Label, + Row, + List, + ListItem +} from './styles'; const AccountSetting: React.FC = () => { - const navigate = useNavigate(); - const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false); - const [userProfile, setUserProfile] = useState(null); - const [isLoading, setIsLoading] = useState(true); - - // 사용자 정보 가져오기 - useEffect(() => { - const getUserInfo = async () => { - try { - const storedUserId = Number(localStorage.getItem('my_id')); - if (!storedUserId) { - console.error('User is not logged in'); - return; - } - - const userId = Number(storedUserId); - const response = await getUserInfoApi(userId); - setUserProfile(response.data); - } catch (error) { - console.error('Error fetching user info:', error); - } finally { - setIsLoading(false); - } - }; - - getUserInfo(); - }, []); - - const handleConfirmLogout = () => { - // localStorage 비우기 - localStorage.clear(); - console.log('Logout confirmed'); - setIsLogoutModalOpen(false); - - navigate('/login'); - }; - - const handleLogoutClick = () => { - setIsLogoutModalOpen(true); - }; - - const handleCloseModal = () => { - setIsLogoutModalOpen(false); - }; - - const handleDeleteAccountClick = () => { - // 회원 탈퇴 로직 추가 - navigate('/account/cancel'); - }; - - if (isLoading) { - return ; - } - - return ( - - - navigate(-1)} /> - - - - 프로필 사진 - - - - - - - - - - - - 로그아웃 아이콘 - - Logout - - - - 회원 탈퇴 아이콘 - - 회원탈퇴 - - - - {isLogoutModalOpen && ( - - )} - - - ); + const navigate = useNavigate(); + const [isLogoutModalOpen, setIsLogoutModalOpen] = useState(false); + const [userProfile, setUserProfile] = useState(null); + const [isLoading, setIsLoading] = useState(true); + + useEffect(() => { + const getUserInfo = async () => { + try { + const currentUserId = getCurrentUserId(); + if (!currentUserId) { + console.error('User is not logged in'); + return; + } + + const response = await getUserInfoApi(currentUserId); + setUserProfile(response.data); + } catch (error) { + console.error('Error fetching user info:', error); + } finally { + setIsLoading(false); + } + }; + + getUserInfo(); + }, []); + + const handleConfirmLogout = () => { + localStorage.clear(); + console.log('Logout confirmed'); + setIsLogoutModalOpen(false); + navigate('/login'); + }; + + const handleLogoutClick = () => { + setIsLogoutModalOpen(true); + }; + + const handleCloseModal = () => { + setIsLogoutModalOpen(false); + }; + + const handleDeleteAccountClick = () => { + navigate('/account/cancel'); + }; + + if (isLoading) { + return ; + } + + return ( + + + navigate(-1)} /> + + + 프로필 사진 + + + + + + + + + + + + 로그아웃 아이콘 + + Logout + + + + 회원 탈퇴 아이콘 + + 회원탈퇴 + + + + + {isLogoutModalOpen && ( + + )} + + + ); }; -export default AccountSetting; +export default AccountSetting; \ No newline at end of file From 694731b44ea82b93a80505838ccf656d2e93fad8 Mon Sep 17 00:00:00 2001 From: lalaurel Date: Mon, 30 Dec 2024 00:23:53 +0900 Subject: [PATCH 3/6] refactor: profile currentId --- src/pages/Profile/index.tsx | 313 ++++++++++++++++++------------------ 1 file changed, 158 insertions(+), 155 deletions(-) diff --git a/src/pages/Profile/index.tsx b/src/pages/Profile/index.tsx index 76151556..ca04aae1 100644 --- a/src/pages/Profile/index.tsx +++ b/src/pages/Profile/index.tsx @@ -1,8 +1,10 @@ import { useState, useEffect } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; +import { useRecoilValue } from 'recoil'; import theme from '@styles/theme'; - +import { OtherUserAtom } from '@recoil/util/OtherUser'; +import { getCurrentUserId } from '@utils/getCurrentUserId'; import { createMatchingApi } from '@apis/matching'; import { getUserPostListApi } from '@apis/post'; import { getUserInfoApi } from '@apis/user'; @@ -23,165 +25,166 @@ import { StyledText } from '@components/Text/StyledText'; import TopBar from '@components/TopBar'; import UserProfile from '@components/UserProfile'; -import type { UserPostSummary } from '@apis/post/dto'; // type 명시 -import type { UserInfoData } from '@apis/user/dto'; // type 명시 +import type { UserPostSummary } from '@apis/post/dto'; +import type { UserInfoData } from '@apis/user/dto'; -import ButtonSecondary from './ButtonSecondary/index'; // 상대 경로 index 명시 -import NavbarProfile from './NavbarProfile/index'; // 상대 경로 index 명시 +import ButtonSecondary from './ButtonSecondary/index'; +import NavbarProfile from './NavbarProfile/index'; import { - ProfileContainer, - Header, - StatsContainer, - Stat, - StatNumber, - StatLabel, - PostsContainer, - AddButton, - NoPostWrapper, - Button, + ProfileContainer, + Header, + StatsContainer, + Stat, + StatNumber, + StatLabel, + PostsContainer, + AddButton, + NoPostWrapper, + Button, } from './styles'; const Profile: React.FC = () => { - const { userId } = useParams<{ userId: string }>(); - const profileUserId = Number(userId); - const loggedInUserId = Number(localStorage.getItem('current_user_id')); - - const [isLoading, setIsLoading] = useState(true); - const [posts, setPosts] = useState([]); - const [totalPosts, setTotalPosts] = useState(0); - const [userInfo, setUserInfo] = useState(null); - const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false); - const [isOptionsBottomSheetOpen, setIsOptionsBottomSheetOpen] = useState(false); // 추가 - const [isModalOpen, setIsModalOpen] = useState(false); - const [modalContent, setModalContent] = useState(''); - const navigate = useNavigate(); - - const isMyPage = loggedInUserId === profileUserId; - - useEffect(() => { - const fetchData = async () => { - try { - const response = await getUserInfoApi(profileUserId); - const postResponse = await getUserPostListApi(1, 10, profileUserId); - setUserInfo(response.data); - setPosts(postResponse.data.post); - setTotalPosts(postResponse.data.totalPostsCount); - } catch (error) { - console.error('데이터 가져오기 실패:', error); - } finally { - setIsLoading(false); - } - }; - fetchData(); - }, [profileUserId]); - - const createMatching = async (message: string) => { - const matchingRequestData = { - requesterId: loggedInUserId, - targetId: profileUserId, - message: message, - }; - - try { - await createMatchingApi(matchingRequestData); - handleModalOpen(`${userInfo?.nickname}님에게 대표 OOTD와 \n한 줄 메세지를 보냈어요!`); - } catch (error) { - console.error('매칭 신청 오류:', error); - handleModalOpen('매칭 신청에 실패했습니다.'); - } - }; - - const handleModalOpen = (message: string) => { - setIsBottomSheetOpen(false); - setModalContent(message); - setIsModalOpen(true); - }; - - if (isLoading) return ; - - return ( - - - {isMyPage && ( - navigate('/post/upload/photo/select')}> - Add - - )} - - {isMyPage ? ( - - ) : ( - navigate(-1)} - onClickRightButton={() => setIsOptionsBottomSheetOpen(true)} - /> - )} - -
- -
- - {isMyPage ? : } - - - - OOTD - {totalPosts || 0} - - {isMyPage && ( - - 코멘트 - {posts.reduce((sum, post) => sum + (post.postCommentsCount || 0), 0)} - - )} - - 좋아요 - {posts.reduce((sum, post) => sum + (post.postLikesCount || 0), 0)} - - - - - {posts.length > 0 ? ( - posts.map((post) => ) - ) : ( - - - 게시물이 없어요. - - - )} - - - {isMyPage && } - - setIsBottomSheetOpen(false)} - /> - - setIsOptionsBottomSheetOpen(false)} - /> - - {isModalOpen && setIsModalOpen(false)} />} - - - ); + const { userId } = useParams<{ userId: string }>(); + const profileUserId = Number(userId); + const loggedInUserId = getCurrentUserId(); + const otherUser = useRecoilValue(OtherUserAtom); + + const [isLoading, setIsLoading] = useState(true); + const [posts, setPosts] = useState([]); + const [totalPosts, setTotalPosts] = useState(0); + const [userInfo, setUserInfo] = useState(null); + const [isBottomSheetOpen, setIsBottomSheetOpen] = useState(false); + const [isOptionsBottomSheetOpen, setIsOptionsBottomSheetOpen] = useState(false); + const [isModalOpen, setIsModalOpen] = useState(false); + const [modalContent, setModalContent] = useState(''); + const navigate = useNavigate(); + + const isMyPage = loggedInUserId === profileUserId; + + useEffect(() => { + const fetchData = async () => { + try { + const response = await getUserInfoApi(profileUserId); + const postResponse = await getUserPostListApi(1, 10, profileUserId); + setUserInfo(response.data); + setPosts(postResponse.data.post); + setTotalPosts(postResponse.data.totalPostsCount); + } catch (error) { + console.error('데이터 가져오기 실패:', error); + } finally { + setIsLoading(false); + } + }; + fetchData(); + }, [profileUserId]); + + const createMatching = async (message: string) => { + const matchingRequestData = { + requesterId: loggedInUserId, + targetId: otherUser?.id || profileUserId, + message: message, + }; + + try { + await createMatchingApi(matchingRequestData); + handleModalOpen(`${userInfo?.nickname}님에게 대표 OOTD와 \n한 줄 메세지를 보냈어요!`); + } catch (error) { + console.error('매칭 신청 오류:', error); + handleModalOpen('매칭 신청에 실패했습니다.'); + } + }; + + const handleModalOpen = (message: string) => { + setIsBottomSheetOpen(false); + setModalContent(message); + setIsModalOpen(true); + }; + + if (isLoading) return ; + + return ( + + + {isMyPage && ( + navigate('/post/upload/photo/select')}> + Add + + )} + + {isMyPage ? ( + + ) : ( + navigate(-1)} + onClickRightButton={() => setIsOptionsBottomSheetOpen(true)} + /> + )} + +
+ +
+ + {isMyPage ? : } + + + + OOTD + {totalPosts || 0} + + {isMyPage && ( + + 코멘트 + {posts.reduce((sum, post) => sum + (post.postCommentsCount || 0), 0)} + + )} + + 좋아요 + {posts.reduce((sum, post) => sum + (post.postLikesCount || 0), 0)} + + + + + {posts.length > 0 ? ( + posts.map((post) => ) + ) : ( + + + 게시물이 없어요. + + + )} + + + {isMyPage && } + + setIsBottomSheetOpen(false)} + /> + + setIsOptionsBottomSheetOpen(false)} + /> + + {isModalOpen && setIsModalOpen(false)} />} + + + ); }; -export default Profile; +export default Profile; \ No newline at end of file From cc9ed2382413451263a8ec6e2a6e5fdadcf53a92 Mon Sep 17 00:00:00 2001 From: lalaurel Date: Mon, 30 Dec 2024 00:24:07 +0900 Subject: [PATCH 4/6] =?UTF-8?q?refactor:=20=EA=B8=80=EC=94=A8=20=EC=83=89?= =?UTF-8?q?=EC=83=81=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Profile/styles.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/pages/Profile/styles.tsx b/src/pages/Profile/styles.tsx index 28a470cf..23d4b7cc 100644 --- a/src/pages/Profile/styles.tsx +++ b/src/pages/Profile/styles.tsx @@ -88,7 +88,7 @@ export const Button = styled.button` margin: 1.25rem auto; height: 3.1rem; text-align: center; - color: ${({ theme }) => theme.colors.contrast}; + color: ${({ theme }) => theme.colors.text.contrast}; cursor: pointer; box-sizing: border-box; border-radius: 10px; From 6e0027e71d113ccafa17da8b03a9128404231d5e Mon Sep 17 00:00:00 2001 From: lalaurel Date: Mon, 30 Dec 2024 00:24:20 +0900 Subject: [PATCH 5/6] refactor: profileEdit currentId --- src/pages/Profile/ProfileEdit/index.tsx | 403 ++++++++++++------------ 1 file changed, 199 insertions(+), 204 deletions(-) diff --git a/src/pages/Profile/ProfileEdit/index.tsx b/src/pages/Profile/ProfileEdit/index.tsx index 9cf565b6..60668195 100644 --- a/src/pages/Profile/ProfileEdit/index.tsx +++ b/src/pages/Profile/ProfileEdit/index.tsx @@ -1,10 +1,9 @@ import { useRef, useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; - import { ref, uploadBytes, getDownloadURL } from 'firebase/storage'; import theme from '@styles/theme'; - +import { getCurrentUserId } from '@utils/getCurrentUserId'; import { getUserInfoApi, patchUserInfoApi } from '@apis/user'; import { storage } from '@config/firebaseConfig'; @@ -19,215 +18,211 @@ import Modal from '@components/Modal/index'; import { StyledText } from '@components/Text/StyledText'; import TopBar from '@components/TopBar/index'; -import type { UserInfoData, PatchUserInfoRequest } from '@apis/user/dto'; // type 명시 +import type { UserInfoData, PatchUserInfoRequest } from '@apis/user/dto'; import { - ProfileEditContainer, - ProfilePic, - ProfilePicWrapper, - Input, - Button, - Row, - FileInput, - CameraIcon, - UserInfo, - Username, - EmailInput, + ProfileEditContainer, + ProfilePic, + ProfilePicWrapper, + Input, + Button, + Row, + FileInput, + CameraIcon, + UserInfo, + Username, + EmailInput, } from './styles'; type ExtendedUserInfoData = UserInfoData & { - birthDate?: string; // 확장된 속성 + birthDate?: string; }; const ProfileEdit: React.FC = () => { - const fileInputRef = useRef(null); - const [nickname, setNickname] = useState(''); - const [bio, setBio] = useState(''); - const [profilePictureUrl, setProfilePictureUrl] = useState(null); - const [phoneNumber, setPhoneNumber] = useState(''); // 전화번호 - const [birthDate, setBirthDate] = useState(''); // 생년월일 - const [name, setName] = useState(''); // 이름 - const [email, setEmail] = useState(''); // 이메일 - const [isLoading, setIsLoading] = useState(true); - const navigate = useNavigate(); - const [modalContent, setModalContent] = useState(null); - const [isModalVisible, setIsModalVisible] = useState(false); - const [uploading, setUploading] = useState(false); // 업로드 상태 관리 - const userId = localStorage.getItem('my_id'); - - // 사용자 정보 불러오기 - useEffect(() => { - const getUserInfo = async () => { - try { - const storedUserId = Number(localStorage.getItem('my_id')); - if (!storedUserId) { - console.error('User ID not found in localStorage'); - return; - } - - const userId = Number(storedUserId); // 문자열을 숫자로 변환 - const response = await getUserInfoApi(userId); // 사용자 정보 조회 API 호출 - const userInfo: ExtendedUserInfoData = response.data; // 확장된 타입 사용 - - // 상태 업데이트 - setNickname(userInfo.nickname); - setBio(userInfo.bio); - setProfilePictureUrl(userInfo.profilePictureUrl || null); - setPhoneNumber(userInfo.phoneNumber || ''); - setBirthDate(userInfo.birthDate || ''); // 확장된 속성 사용 - setName(userInfo.name || ''); - setEmail(userInfo.email || ''); - } catch (error) { - console.error('Error fetching user info:', error); - } finally { - setIsLoading(false); // 로딩 상태 종료 - } - }; - - getUserInfo(); - }, []); - - const handleButtonClick = () => { - fileInputRef.current?.click(); - }; - - const handleFileChange = async (event: React.ChangeEvent) => { - const file = event.target.files?.[0]; - if (file) { - setUploading(true); - try { - const storageRef = ref(storage, `profilePictures/${file.name}`); - await uploadBytes(storageRef, file); // Firebase에 파일 업로드 - const imageUrl = await getDownloadURL(storageRef); // 업로드된 파일의 다운로드 URL 가져오기 - setProfilePictureUrl(imageUrl); - console.log('File uploaded and URL retrieved:', imageUrl); - } catch (error) { - console.error('Error uploading file:', error); - } finally { - setUploading(false); - } - } - }; - - const handleModalClose = () => { - setIsModalVisible(false); - setModalContent(null); - }; - - const handleSave = async () => { - try { - const storedUserId = Number(localStorage.getItem('my_id')); - if (!storedUserId) { - console.error('User ID not found in localStorage'); - return; - } - - const formattedBirthDate = birthDate ? new Date(birthDate).toISOString().split('T')[0] : ''; - - const payload: PatchUserInfoRequest = { - name: name || 'Default Name', - phoneNumber: phoneNumber || '000-0000-0000', - birthDate: formattedBirthDate, - email: email || 'default@example.com', - nickname: nickname || '닉네임 없음', - profilePictureUrl: profilePictureUrl || '', - bio: bio || '', - }; - - const response = await patchUserInfoApi(payload, storedUserId); - - if (response.isSuccess) { - setModalContent('프로필이 성공적으로 수정되었습니다.'); - setIsModalVisible(true); - - // 모달 닫힌 후 마이페이지로 이동 - setTimeout(() => { - handleModalClose(); - navigate(`/profile/${userId}`); - }, 2000); - } else { - setModalContent('프로필 수정에 실패했습니다.'); - setIsModalVisible(true); - } - } catch (error) { - setModalContent('프로필 수정 중 오류가 발생했습니다.'); - setIsModalVisible(true); - console.error('Error updating user info:', error); - } - }; - - if (isLoading || uploading) { - return ; - } - - return ( - - - navigate(-1)} /> - {isModalVisible && ( - - )} - - - 프로필 사진 - - - - - - - {nickname || '알수없음'} - - - - - 이름 - - setName(e.target.value)} /> - - - - 닉네임 - - setNickname(e.target.value)} /> - - - - 소개글 - - setBio(e.target.value)} /> - - - - 전화번호 - - setPhoneNumber(e.target.value)} /> - - - - 생년월일 - - setBirthDate(e.target.value)} /> - - - - 이메일 - - setEmail(e.target.value)} /> - - - - - ); + const fileInputRef = useRef(null); + const [nickname, setNickname] = useState(''); + const [bio, setBio] = useState(''); + const [profilePictureUrl, setProfilePictureUrl] = useState(null); + const [phoneNumber, setPhoneNumber] = useState(''); + const [birthDate, setBirthDate] = useState(''); + const [name, setName] = useState(''); + const [email, setEmail] = useState(''); + const [isLoading, setIsLoading] = useState(true); + const navigate = useNavigate(); + const [modalContent, setModalContent] = useState(null); + const [isModalVisible, setIsModalVisible] = useState(false); + const [uploading, setUploading] = useState(false); + const userId = getCurrentUserId(); + + useEffect(() => { + const getUserInfo = async () => { + try { + const currentUserId = getCurrentUserId(); + if (!currentUserId) { + console.error('User ID not found'); + return; + } + + const response = await getUserInfoApi(currentUserId); + const userInfo: ExtendedUserInfoData = response.data; + + setNickname(userInfo.nickname); + setBio(userInfo.bio); + setProfilePictureUrl(userInfo.profilePictureUrl || null); + setPhoneNumber(userInfo.phoneNumber || ''); + setBirthDate(userInfo.birthDate || ''); + setName(userInfo.name || ''); + setEmail(userInfo.email || ''); + } catch (error) { + console.error('Error fetching user info:', error); + } finally { + setIsLoading(false); + } + }; + + getUserInfo(); + }, []); + + const handleButtonClick = () => { + fileInputRef.current?.click(); + }; + + const handleFileChange = async (event: React.ChangeEvent) => { + const file = event.target.files?.[0]; + if (file) { + setUploading(true); + try { + const storageRef = ref(storage, `profilePictures/${file.name}`); + await uploadBytes(storageRef, file); + const imageUrl = await getDownloadURL(storageRef); + setProfilePictureUrl(imageUrl); + console.log('File uploaded and URL retrieved:', imageUrl); + } catch (error) { + console.error('Error uploading file:', error); + } finally { + setUploading(false); + } + } + }; + + const handleModalClose = () => { + setIsModalVisible(false); + setModalContent(null); + }; + + const handleSave = async () => { + try { + const currentUserId = getCurrentUserId(); + if (!currentUserId) { + console.error('User ID not found'); + return; + } + + const formattedBirthDate = birthDate ? new Date(birthDate).toISOString().split('T')[0] : ''; + + const payload: PatchUserInfoRequest = { + name: name || 'Default Name', + phoneNumber: phoneNumber || '000-0000-0000', + birthDate: formattedBirthDate, + email: email || 'default@example.com', + nickname: nickname || '닉네임 없음', + profilePictureUrl: profilePictureUrl || '', + bio: bio || '', + }; + + const response = await patchUserInfoApi(payload, currentUserId); + + if (response.isSuccess) { + setModalContent('프로필이 성공적으로 수정되었습니다.'); + setIsModalVisible(true); + + setTimeout(() => { + handleModalClose(); + navigate(`/profile/${userId}`); + }, 2000); + } else { + setModalContent('프로필 수정에 실패했습니다.'); + setIsModalVisible(true); + } + } catch (error) { + setModalContent('프로필 수정 중 오류가 발생했습니다.'); + setIsModalVisible(true); + console.error('Error updating user info:', error); + } + }; + + if (isLoading || uploading) { + return ; + } + + return ( + + + navigate(-1)} /> + {isModalVisible && ( + + )} + + + 프로필 사진 + + + + + + + {nickname || '알수없음'} + + + + + 이름 + + setName(e.target.value)} /> + + + + 닉네임 + + setNickname(e.target.value)} /> + + + + 소개글 + + setBio(e.target.value)} /> + + + + 전화번호 + + setPhoneNumber(e.target.value)} /> + + + + 생년월일 + + setBirthDate(e.target.value)} /> + + + + 이메일 + + setEmail(e.target.value)} /> + + + + + ); }; -export default ProfileEdit; +export default ProfileEdit; \ No newline at end of file From 85410888ab5671eefd042188d8482f3f14fd7964 Mon Sep 17 00:00:00 2001 From: lalaurel Date: Thu, 2 Jan 2025 17:12:35 +0900 Subject: [PATCH 6/6] =?UTF-8?q?refactor:=20text.tertiar=EB=A1=9C=20?= =?UTF-8?q?=EC=A0=91=EA=B7=BC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/pages/Account/AccountEdit/index.tsx | 8 ++++---- src/pages/Account/AccountEdit/styles.tsx | 2 +- src/pages/Account/AccountSetting/index.tsx | 2 +- src/pages/Account/Verification/index.tsx | 2 +- src/pages/Profile/ProfileEdit/index.tsx | 14 +++++++------- 5 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/pages/Account/AccountEdit/index.tsx b/src/pages/Account/AccountEdit/index.tsx index fb0bb67a..c6ee9c74 100644 --- a/src/pages/Account/AccountEdit/index.tsx +++ b/src/pages/Account/AccountEdit/index.tsx @@ -47,12 +47,12 @@ const AccountEdit: React.FC = () => { - + SNS 연결 - + 연결된 SNS계정으로 로그인되었습니다. @@ -71,7 +71,7 @@ const AccountEdit: React.FC = () => { @@ -79,7 +79,7 @@ const AccountEdit: React.FC = () => { diff --git a/src/pages/Account/AccountEdit/styles.tsx b/src/pages/Account/AccountEdit/styles.tsx index 2ed8d886..4fb7366f 100644 --- a/src/pages/Account/AccountEdit/styles.tsx +++ b/src/pages/Account/AccountEdit/styles.tsx @@ -46,7 +46,7 @@ export const SNSIcon = styled.img` export const Text = styled.div` font-size: 0.875rem; - color: ${({ theme }) => theme.colors.tertiary}; + color: ${({ theme }) => theme.colors.text.tertiary}; margin-top: 2.1875rem; text-align: left; `; diff --git a/src/pages/Account/AccountSetting/index.tsx b/src/pages/Account/AccountSetting/index.tsx index a23ccb79..c1bfd315 100644 --- a/src/pages/Account/AccountSetting/index.tsx +++ b/src/pages/Account/AccountSetting/index.tsx @@ -95,7 +95,7 @@ const AccountSetting: React.FC = () => { diff --git a/src/pages/Account/Verification/index.tsx b/src/pages/Account/Verification/index.tsx index 6bf7c02f..1a909a01 100644 --- a/src/pages/Account/Verification/index.tsx +++ b/src/pages/Account/Verification/index.tsx @@ -112,7 +112,7 @@ const Verification: React.FC = () => { - <StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.tertiary}> + <StyledText $textTheme={{ style: 'body1-medium' }} color={theme.colors.text.tertiary}> 휴대전화번호로 본인인증하기 </StyledText> diff --git a/src/pages/Profile/ProfileEdit/index.tsx b/src/pages/Profile/ProfileEdit/index.tsx index 60668195..420a59eb 100644 --- a/src/pages/Profile/ProfileEdit/index.tsx +++ b/src/pages/Profile/ProfileEdit/index.tsx @@ -179,42 +179,42 @@ const ProfileEdit: React.FC = () => { - + {nickname || '알수없음'} - + 이름 setName(e.target.value)} /> - + 닉네임 setNickname(e.target.value)} /> - + 소개글 setBio(e.target.value)} /> - + 전화번호 setPhoneNumber(e.target.value)} /> - + 생년월일 setBirthDate(e.target.value)} /> - + 이메일 setEmail(e.target.value)} />