From b3207fe106c420e862329def6d83735d7994b5b7 Mon Sep 17 00:00:00 2001 From: kr-nius Date: Wed, 3 Apr 2024 17:48:24 +0900 Subject: [PATCH] =?UTF-8?q?[fix]=20#4=20mypage=20=EB=B0=B1=EC=97=94?= =?UTF-8?q?=EB=93=9C=20=EC=97=B0=EA=B2=B0?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- weatherfit_refactoring/@types/feed/index.d.ts | 3 +- .../Components/Molecules/comment/Comment.tsx | 7 +- .../Molecules/header/ProfileHeader.tsx | 13 +- .../Components/Molecules/logo/MainLogo.tsx | 6 +- .../Components/Molecules/post/ProfilePost.tsx | 290 +++--------------- .../Components/Molecules/user/Unregister.tsx | 4 +- .../Organisms/mypage/ProfileEditModal.tsx | 13 +- .../Organisms/mypage/ProfileImageEdit.tsx | 16 +- .../Organisms/mypage/ProfileInfo.tsx | 61 ++-- .../Organisms/mypage/ProfilePwEdit.tsx | 19 +- .../src/app/mypage/page.tsx | 162 +++++----- 11 files changed, 192 insertions(+), 402 deletions(-) diff --git a/weatherfit_refactoring/@types/feed/index.d.ts b/weatherfit_refactoring/@types/feed/index.d.ts index 824a00a..05b7bff 100644 --- a/weatherfit_refactoring/@types/feed/index.d.ts +++ b/weatherfit_refactoring/@types/feed/index.d.ts @@ -79,5 +79,6 @@ interface UserData { nickname: string name: string email: string - pw: string + password: string + image: string | null } diff --git a/weatherfit_refactoring/src/Components/Molecules/comment/Comment.tsx b/weatherfit_refactoring/src/Components/Molecules/comment/Comment.tsx index b67ceee..612acac 100644 --- a/weatherfit_refactoring/src/Components/Molecules/comment/Comment.tsx +++ b/weatherfit_refactoring/src/Components/Molecules/comment/Comment.tsx @@ -4,6 +4,7 @@ import { confirmAlert } from '@/utils/function/utilFunction' import InputStore, { InputStyle } from '../../Atoms/Input/InputStore' import ButtonStore, { ButtonStyle } from '../../Atoms/Button/ButtonStore' import { AuthTokenStore } from '@/Store/AuthToken' +import { AuthUserNickStore } from '@/Store/AuthUserNick' interface Props { comment: CommentType @@ -23,7 +24,7 @@ export default function Comment({ const [isEditing, setIsEditing] = useState(false) const [editContent, setEditContent] = useState('') const { accesstoken, setAccessToken } = AuthTokenStore() - const decoded_nickname = '황동준' + const { userNick } = AuthUserNickStore() useEffect(() => { setAccessToken() @@ -223,7 +224,7 @@ export default function Comment({ {comment.createdDate}

{/* 수정 부분 */} - {comment.nickname === decoded_nickname && !isEditing ? ( + {comment.nickname === userNick && !isEditing ? (
)} diff --git a/weatherfit_refactoring/src/Components/Molecules/header/ProfileHeader.tsx b/weatherfit_refactoring/src/Components/Molecules/header/ProfileHeader.tsx index 2609d4e..267fbc3 100644 --- a/weatherfit_refactoring/src/Components/Molecules/header/ProfileHeader.tsx +++ b/weatherfit_refactoring/src/Components/Molecules/header/ProfileHeader.tsx @@ -5,7 +5,11 @@ import ProfileEditModal from '../../Organisms/mypage/ProfileEditModal' import Header from './Header' import { IconStyle } from '../../Atoms/Icon/IconStore' -export default function ProfileHeader() { +interface Props { + userInfo: UserData +} + +export default function ProfileHeader({ userInfo }: Props) { const [isModalOpen, setIsModalOpen] = useState(false) const handleModalOpen = () => { @@ -23,7 +27,12 @@ export default function ProfileHeader() { iconStyleCase={IconStyle.SETTING} onClickFunction2={handleModalOpen} /> - {isModalOpen && } + {isModalOpen && ( + + )} ) } diff --git a/weatherfit_refactoring/src/Components/Molecules/logo/MainLogo.tsx b/weatherfit_refactoring/src/Components/Molecules/logo/MainLogo.tsx index caae48b..9fde54e 100644 --- a/weatherfit_refactoring/src/Components/Molecules/logo/MainLogo.tsx +++ b/weatherfit_refactoring/src/Components/Molecules/logo/MainLogo.tsx @@ -10,8 +10,10 @@ export default function MainLogo() { router.push('/') } return ( -
- +
+ 기온별 옷차림은, { + localStorage.setItem('getBoardId_local', JSON.stringify(board_id)) + router.push('/detail') + } return ( - //
- //
-
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- 게시물 이미지 -
-
- // <> - // {postData.length > 0 ? ( - //
- // {postData.map(item => ( - //
- // {item.images && ( - // 게시물 이미지 - // )} - //
- // ))} - //
- // ) : ( - //

게시물이 없습니다.

- // )} - // - //
- // {postData.length > 0 ? ( - // postData.map(item => ( - //
- // {item.images && ( - // 게시물 이미지 - // )} - //
- // )) - // ) : ( - // <> - //

게시물이 없습니다.

- // - // )} - // {/*
*/} - //
+ <> + {postData.length > 0 ? ( +
+ {postData.map(item => ( +
goDetail(item.boardId)}> + {item.images && ( + 게시물 이미지 + )} +
+ ))} +
+ ) : ( + + 게시물이 없습니다. + + )} + ) } diff --git a/weatherfit_refactoring/src/Components/Molecules/user/Unregister.tsx b/weatherfit_refactoring/src/Components/Molecules/user/Unregister.tsx index 65ac489..65494f1 100644 --- a/weatherfit_refactoring/src/Components/Molecules/user/Unregister.tsx +++ b/weatherfit_refactoring/src/Components/Molecules/user/Unregister.tsx @@ -17,7 +17,7 @@ export default function Unregister() { method: 'DELETE', headers: { 'Content-Type': 'application/json', - Authorization: 'Bearer' + accesstoken, + Authorization: 'Bearer ' + accesstoken, }, }, ) @@ -27,6 +27,8 @@ export default function Unregister() { console.log('회원 탈퇴 response: ', unregisterRes) Cookies.remove('accessToken') localStorage.removeItem('user_email') + localStorage.removeItem('user_nickname') + localStorage.removeItem('login_Time') confirmAlert('그동안 옷늘날씨를 이용해 주셔서 감사합니다.') window.location.href = '/' } diff --git a/weatherfit_refactoring/src/Components/Organisms/mypage/ProfileEditModal.tsx b/weatherfit_refactoring/src/Components/Organisms/mypage/ProfileEditModal.tsx index 4e45f3b..241af2a 100644 --- a/weatherfit_refactoring/src/Components/Organisms/mypage/ProfileEditModal.tsx +++ b/weatherfit_refactoring/src/Components/Organisms/mypage/ProfileEditModal.tsx @@ -12,9 +12,10 @@ import ProfilePwEdit from './ProfilePwEdit' interface Props { onClickFunction?: () => void + userInfo: UserData } -export default function ProfileEditModal({ onClickFunction }: Props) { +export default function ProfileEditModal({ onClickFunction, userInfo }: Props) { return (
@@ -34,17 +35,17 @@ export default function ProfileEditModal({ onClickFunction }: Props) {
{/* 이미지 부분 */} - +
{/* 이메일, 이름, 닉네임 부분 */}
- - - + + +
{/* 비밀번호 부분 */} - +
diff --git a/weatherfit_refactoring/src/Components/Organisms/mypage/ProfileImageEdit.tsx b/weatherfit_refactoring/src/Components/Organisms/mypage/ProfileImageEdit.tsx index 589c6ab..5be7ac3 100644 --- a/weatherfit_refactoring/src/Components/Organisms/mypage/ProfileImageEdit.tsx +++ b/weatherfit_refactoring/src/Components/Organisms/mypage/ProfileImageEdit.tsx @@ -5,11 +5,15 @@ import ButtonStore, { ButtonStyle } from '@/Components/Atoms/Button/ButtonStore' import { AuthUserStore } from '@/Store/AuthUser' import { AuthTokenStore } from '@/Store/AuthToken' -export default function ProfileImageEdit() { - // const [selectedImage, setSelectedImage] = useState(userProfileImage) - const [selectedImage, setSelectedImage] = useState( - 'https://cdnimg.melon.co.kr/cm2/artistcrop/images/002/61/143/261143_20210325180240_500.jpg?61e575e8653e5920470a38d1482d7312/melon/optimize/90', - ) +interface Props { + image: string | null +} + +export default function ProfileImageEdit({ image }: Props) { + const [selectedImage, setSelectedImage] = useState(image) + // const [selectedImage, setSelectedImage] = useState( + // 'https://cdnimg.melon.co.kr/cm2/artistcrop/images/002/61/143/261143_20210325180240_500.jpg?61e575e8653e5920470a38d1482d7312/melon/optimize/90', + // ) const { userEmail } = AuthUserStore() const { accesstoken } = AuthTokenStore() @@ -38,7 +42,7 @@ export default function ProfileImageEdit() { method: 'PATCH', headers: { 'Content-Type': 'multipart/form-data', - Authorization: 'Bearer' + accesstoken, + Authorization: 'Bearer ' + accesstoken, }, body: formData, }, diff --git a/weatherfit_refactoring/src/Components/Organisms/mypage/ProfileInfo.tsx b/weatherfit_refactoring/src/Components/Organisms/mypage/ProfileInfo.tsx index b5c171d..95949af 100644 --- a/weatherfit_refactoring/src/Components/Organisms/mypage/ProfileInfo.tsx +++ b/weatherfit_refactoring/src/Components/Organisms/mypage/ProfileInfo.tsx @@ -1,47 +1,42 @@ -import { useState } from 'react' +import { useEffect, useState } from 'react' import PostCount from '../../Molecules/post/PostCount' import Image from 'next/image' import IconStore, { IconStyle } from '../../Atoms/Icon/IconStore' +import { AuthUserStore } from '@/Store/AuthUser' interface Props { - profileImage: string | null userInfo: UserData myPost: FEEDDATA[] myLikePost: FEEDDATA[] } -export default function ProfileInfo({ - profileImage, - userInfo, - myPost, - myLikePost, -}: Props) { - console.log('userInfo: ', userInfo) - console.log('userImage: ', profileImage) +export default function ProfileInfo({ userInfo, myPost, myLikePost }: Props) { return ( -
-
-
- {profileImage == null ? ( - - ) : ( - 프로필 이미지 - )} + <> +
+
+
+ {userInfo.image == null ? ( + + ) : ( + 프로필 이미지 + )} +
+

{userInfo.nickname}

-

{userInfo.nickname}

-
- - -
+ + + + ) } diff --git a/weatherfit_refactoring/src/Components/Organisms/mypage/ProfilePwEdit.tsx b/weatherfit_refactoring/src/Components/Organisms/mypage/ProfilePwEdit.tsx index 2445f9a..4cc4af7 100644 --- a/weatherfit_refactoring/src/Components/Organisms/mypage/ProfilePwEdit.tsx +++ b/weatherfit_refactoring/src/Components/Organisms/mypage/ProfilePwEdit.tsx @@ -6,17 +6,16 @@ import bcrypt from 'bcryptjs' import { AuthUserStore } from '@/Store/AuthUser' import { AuthTokenStore } from '@/Store/AuthToken' -export default function ProfilePwEdit() { +interface Props { + pw: string +} + +export default function ProfilePwEdit({ pw }: Props) { const [currentPw, setCurrentPw] = useState('') const [newPw, setNewPw] = useState('') const [confirmPw, setConfirmPw] = useState('') - const [pw, setPw] = useState('1234') const { userEmail } = AuthUserStore() - const { accesstoken, setAccessToken } = AuthTokenStore() - - useEffect(() => { - setAccessToken() - }, [accesstoken]) + const { accesstoken } = AuthTokenStore() const handlePwEditSubmit = async (e: FormEvent) => { e.preventDefault() @@ -26,8 +25,8 @@ export default function ProfilePwEdit() { return } - // const isPwMatch = await bcrypt.compare(currentPw, pw) - if (currentPw !== pw) { + const isPwMatch = await bcrypt.compare(currentPw, pw) + if (!isPwMatch) { confirmAlert('현재 비밀번호가 틀립니다.') return } @@ -55,7 +54,7 @@ export default function ProfilePwEdit() { method: 'PATCH', headers: { 'Content-Type': 'application/json', - Authorization: 'Bearer' + accesstoken, + Authorization: 'Bearer ' + accesstoken, }, body: JSON.stringify({ email: userEmail, diff --git a/weatherfit_refactoring/src/app/mypage/page.tsx b/weatherfit_refactoring/src/app/mypage/page.tsx index fac1a4a..995ec0c 100644 --- a/weatherfit_refactoring/src/app/mypage/page.tsx +++ b/weatherfit_refactoring/src/app/mypage/page.tsx @@ -8,10 +8,15 @@ import NavBar from '@/Components/Molecules/bar/NavBar' import { AuthTokenStore } from '@/Store/AuthToken' import { LoadingStore } from '@/Store/Loading' import { CheckStore } from '@/Store/Check' -import { loginCheck } from '@/utils/function/utilFunction' +import { + confirmAlert, + deleteAlert, + loginCheck, +} from '@/utils/function/utilFunction' import Loading from '@/Components/Molecules/check/Loading' import NoLogin from '@/Components/Molecules/check/NoLogin' import { AuthUserStore } from '@/Store/AuthUser' +import { AuthUserNickStore } from '@/Store/AuthUserNick' export default function Mypage() { // 사용법 참고 @@ -19,114 +24,103 @@ export default function Mypage() { const { accesstoken, setAccessToken } = AuthTokenStore() const { check, setCheck } = CheckStore() const { userEmail } = AuthUserStore() - - useEffect(() => { - setAccessToken() - loginCheck(accesstoken, setCheck, setLoading) - }, [accesstoken]) + const { userNick } = AuthUserNickStore() // 회원 정보 const [userInfo, setUserInfo] = useState() - const [profileImage, setProfileImage] = useState('') // 프로필 이미지 const [refreshProfile, setRefreshProfile] = useState(false) // 회원 정보 변경했을 때 const [myPostData, setMyPostData] = useState([]) const [myLikePostData, setMyLikePostData] = useState([]) - useEffect(() => { - const fetchData = async () => { - try { - // 프로필 더미 데이터 가져오기 - const profileres = await fetch('/dummy_data/userprofile.json') - const profiledata = await profileres.json() - console.log('회원정보: ', profiledata.userprofile_data) - setUserInfo(profiledata.userprofile_data) - setProfileImage(profiledata.profileimage_data.profileImage) - - const postres = await fetch('dummy_data/post.json') - const postdata = await postres.json() - setMyPostData(postdata.mypost_data) - setMyLikePostData(postdata.mylikepost_data) - } catch (err) { - console.log('회원정보 에러: ', err) - } - } - - fetchData() - }, []) - - // 회원 정보 불러오기 // useEffect(() => { // const fetchData = async () => { // try { - // // 프로필 데이터 가져오기 - // const res = await fetch(`https://www.jerneithe.site/user/api/profile`, { - // method: 'POST', - // headers: { - // 'Content-Type': 'application/json', - // Authorization: 'Bearer' + accesstoken, - // }, - // body: JSON.stringify({ - // email: userEmail, - // }), - // }) - - // const profileRes = await res.json() - - // setUserInfo(profileRes) - // setProfileImage(profileRes.image) - - // console.log('회원정보 data: ', profileRes) - - // // ----------------------------------------- - - // // 게시물 데이터 가져오기 - // // const boardListRes = await fetch( - // // 'https://www.jerneithe.site/board/list', - // // ) - // // const boardListdata: FEEDDATA[] = await boardListRes.json() - - // // const filteredData = boardListdata.filter( - // // item => item.nickName === userPofile.nickname, - // // ) - // // setMyPostData(filteredData) - - // // const filteredLikeData = boardListdata.filter(item => - // // item.likelist.some(like => like.nickName === userPofile.nickname), - // // ) - // // setMyLikePostData(filteredLikeData) - // } catch (error) { - // console.error('데이터 로딩 에러: ', error) + // // 프로필 더미 데이터 가져오기 + // const profileres = await fetch('/dummy_data/userprofile.json') + // const profiledata = await profileres.json() + // console.log('회원정보: ', profiledata.userprofile_data) + // setUserInfo(profiledata.userprofile_data) + // setProfileImage(profiledata.profileimage_data.profileImage) + + // const postres = await fetch('dummy_data/post.json') + // const postdata = await postres.json() + // setMyPostData(postdata.mypost_data) + // setMyLikePostData(postdata.mylikepost_data) + // } catch (err) { + // console.log('회원정보 에러: ', err) // } // } + // fetchData() - // }, [refreshProfile]) + // }, []) + + // 회원 정보 불러오기 + useEffect(() => { + setAccessToken() + loginCheck(accesstoken, setCheck, setLoading) + if (typeof accesstoken === 'string' && accesstoken) { + const fetchData = async () => { + try { + // 프로필 데이터 가져오기 + const profileRes = await fetch( + `https://www.jerneithe.site/user/api/profile`, + { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + Authorization: 'Bearer ' + accesstoken, + }, + body: JSON.stringify({ + email: userEmail, + }), + }, + ) + + const profileData = await profileRes.json() + + setUserInfo(profileData) + + console.log('회원정보 data: ', profileData) + + // ----------------------------------------- + + // 게시물 데이터 가져오기 + const boardListRes = await fetch( + 'https://www.jerneithe.site/board/list', + ) + const boardListdata: FEEDDATA[] = await boardListRes.json() + + console.log('보드데이터: ', boardListdata) + + const filteredData = boardListdata.filter( + item => item.nickName === userNick, + ) + setMyPostData(filteredData) + + const filteredLikeData = boardListdata.filter(item => + item.likelist.some(like => like.nickName === userNick), + ) + setMyLikePostData(filteredLikeData) + } catch (err) { + console.log('회원정보 에러', err) + } + } + fetchData() + } + }, [accesstoken, refreshProfile]) return ( <> - {/* -
- {userInfo && ( - - )} - -
- */} {loading ? ( ) : ( <> {check ? ( <> - + {userInfo && }
{userInfo && (