userProfile 페이지에 저장한 프로필 정보를 가져와 띄우기 위해 파일 코드를 수정하였다.
// static/userProfile/userProfile.hmtl
...
<div id="container">
<div id="main1">
// profile 정보 띄우는 곳
<div id="profile"></div>
<button id="enterChat">채팅에 들어가기</button>
</div>
<div id="main2">
<div id="chat">
<!-- 채팅 메시지 영역 -->
</div>
<div>
<input type="text" id="test" placeholder="메시지를 입력해주세요..">
<button onclick="send()">전송</button>
</div>
</div>
</div>
...
일단 프로필 저장 버튼을 통해 로그인한 userId에 프로필 정보를 저장하는 API를 구성하였다.
router.post('/save-profile', authMiddleware, async (req, res) => {
// 인증을 통한 userId 판별
const { userId } = req.user;
// 입력창에서 받은 정보
const {
lolNickname, profileImage, tier, line, mostPlay1, mostPlay2, mostPlay3,
} = req.body;
const userID = req.user.userId;
if (!userId) {return res.status(401).json({ message: '인증된 사용자 정보가 필요합니다.' });
}
...
// 데이터 유효성 검사
...
try {
const userExists = await prisma.users.findUnique({
where: { userId: userID },
});
if (!userExists) {
return res.status(404).json({ message: '사용자를 찾을 수 없습니다.' });
}
// 챔피언 이름으로 ID 조회
const mostPlay1Champion = await prisma.champions.findUnique({
where: { name: mostPlay1 },
});
const mostPlay2Champion = await prisma.champions.findUnique({
where: { name: mostPlay2 },
});
const mostPlay3Champion = await prisma.champions.findUnique({
where: { name: mostPlay3 },
});
// 챔피언 ID가 존재하는지 확인
if (!mostPlay1Champion || !mostPlay2Champion || !mostPlay3Champion) {
return res.status(404).json({ message: '챔피언을 찾을 수 없습니다.' });
}
// 프로필 데이터베이스에 저장
const newProfile = await prisma.profiles.create({
data: {
lolNickname,
profileImage,
tier,
line,
mostPlay1: mostPlay1Champion.name,
mostPlay2: mostPlay2Champion.name,
mostPlay3: mostPlay3Champion.name,
user: {
connect: { userId: userId }, // 사용자 연결
},
},
});
// error 처리
...
이후 프로필 저장 버튼을 클릭하면 userId에 따라 profile 정보가 생성된다.
이후 userProfile페이지에서 특정 사용자의 프로필 정보를 가져오는 과정이 필요하다. userId는 URL 끝 파라미터로 판단한다.
// 특정 사용자의 프로필 정보 가져오기
router.get('/profile/:userId', async (req, res) => {
const userId = parseInt(req.params.userId); // URL에서 userId 가져오기
try {
const profile = await prisma.profiles.findFirst({
where: {
userId: userId,
},
include: {
user: true,
},
});
if (!profile) {
return res.status(404).json({ message: '프로필을 찾을 수 없습니다.' });
}
res.json(profile);
} catch (error) {
console.error('프로필 정보를 불러오는 중 오류 발생:', error);
res
.status(500)
.json({ message: '프로필 정보를 불러오는 중 오류가 발생했습니다.' });
}
});해당 라우터가 호출되어 db에 저장된 프로필정보를 클라리언트에 전달한다.
// static/userProfile/userProfile.js
// 현재 URL에서 사용자 ID 추출
const userId = window.location.pathname.split('/').pop(); // URL의 마지막 부분을 가져옴
try {
// 프로필 데이터 가져오기
const response = await fetch(`/api/profile/${userId}`);
if (!response.ok) {
throw new Error('프로필 정보를 불러올 수 없습니다.');
}
const profile = await response.json();
// 프로필 정보 렌더링
const profileContainer = document.getElementById('profile');
profileContainer.innerHTML = `
<div class="profile-details">
<img src="${profile.profileImage || '/static/default-avatar.png'}" alt="프로필 이미지" />
<h3>${profile.lolNickname}</h3>
<p>티어: ${profile.tier}</p>
<p>라인: ${profile.line}</p>
<p>대표 챔피언: ${profile.mostPlay1}, ${profile.mostPlay2}, ${profile.mostPlay3}</p>
</div>
`;
} catch (error) {
console.error('프로필 데이터를 불러오는 중 오류 발생:', error);
}프로필 이미지, 닉네임, 티어, 라인, 대표 챔피언 정보를 포함한 HTML을 생성하여 페이지에 표시한다.
userId : 1 인 유저에 저장된 프로필 정보가 html에서도 잘 표시되고 있다. 같은 userProfile.js에 의해 구동되는 채팅 기능도 이전과 같이 잘 작동하는 것을 확인했다.
이후 해야할 것.
- 팀원들 프론트엔드 구동 확인, 링크 연결 수정
- 발표자료 준비(구조 도식화, 트러블슈팅 등)
- 배포
휴일인 수요일날 최대한 마무리 작업만 할 수 있게 내일 많은것을 토의와 함께 끝내야 한다...