10/18 브랜치 생성 / 마이페이지 화면 구현 / 회원 정보 조회 구현

티스토리 뷰

Project 여담/3주차

10/18 브랜치 생성 / 마이페이지 화면 구현 / 회원 정보 조회 구현

xoo | 수진 2023. 10. 18. 22:04

1️⃣ 브랜치 생성

저번주 포스팅에 기록했던 것 처럼 기능별로 브랜치를 생성해 푸쉬를 하기로 했기 때문에 featureMyPage 브랜치를 생성했다.

2️⃣ 마이페이지 화면

구상)

마이페이지(mypage.jsp)

> 회원 정보(memberInfo.jsp)에서 수정하기 버튼 클릭하면

> 회원 정보 수정(memberUpdate.jsp)

저장 버튼 클릭 > 회원정보에 저장되고, 마이페이지 화면으로 돌아감

취소 버튼 클릭 > 취소되고, 마이페이지 화면으로 돌아감

✅ MyPageController.java

package com.controller;

import java.util.HashMap;
import java.util.List;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.ui.Model;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PostMapping;
import org.springframework.web.bind.annotation.ResponseBody;
import org.springframework.web.servlet.mvc.support.RedirectAttributes;

import com.dto.BoardDTO;
import com.dto.MemberDTO;
import com.dto.UserLikeDTO;
import com.service.MemberService;
import com.service.MyPageService;

@Controller
public class MyPageController {
	
	@Autowired
	MyPageService service;
	
	@Autowired
	MemberService memberService;
	
    // 마이페이지
    @GetMapping("/loginCheck/mypage")
    public String mypage() {
        return "mypage";
    }

✅ mypage.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.8.2/css/all.min.css" />
    <style>
        * {
            box-sizing: border-box;
        }

        body {
            font-family: Arial, sans-serif;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            margin: 0;
            background-color: #f4f4f4;
        }

        form {
            width: 500px;
            display: flex;
            flex-direction: column;
            align-items: center;
            border: 1px solid rgb(89, 117, 196);
            border-radius: 20px;
            padding: 20px;
            background-color: white;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
        }

        .input-field {
            width: 100%;
            height: 40px;
            border: 1px solid rgb(89, 117, 196);
            border-radius: 5px;
            padding: 0 10px;
            margin-bottom: 10px;
        }

        label {
            font-size: 18px;
        }

        button {
            background-color: rgb(53, 99, 233);
            color: white;
            width: 100%;
            height: 50px;
            font-size: 20px;
            border: none;
            border-radius: 5px;
            margin-top: 20px;
            cursor: pointer;
        }

        .title {
            font-size: 40px;
            font-weight: bold;
            text-align: center; 
            margin: 20px 0;
        }

        .msg {
            font-size: 16px;
            color: red;
            margin-bottom: 20px;
        }
        
        /* 열 맞춤 스타일 추가 */
        div {
            width: 100%;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
        }
    </style>
</head>
<body>
    <form>
	안녕하세요, ${login.name}님!<br>
	<h1>마이페이지</h1>
	<button type="button" onclick="location.href='aaa'">회원 정보 수정</button>
	<button type="button" onclick="location.href='myPlan.jsp'">일정보관함</button>
	<button type="button" onclick="location.href='likeList.jsp'">좋아요 목록</button>
	<button type="button" onclick="location.href='writeList.jsp'">내가 쓴 글 보기</button>
	</form>
</body>
</html>

결과)

3️⃣ 회원 정보 확인 (조회) 구현

마이페이지에는 크게 네 가지 기능을 구현해야 하는데 일단 회원정보수정부터 구현하기로.

정보를 수정하려면 기존 정보를 가져와야 가능하기 때문에 DB에서 로그인 된 ID값의 정보값을 가져와 최종적으로 수정된 내용이 update 되어야한다.

오늘은 일단 조회해서 가져오는 로직 구현만 했다.

✅ MyPageController.java

package com.controller;

import javax.servlet.http.HttpSession;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.GetMapping;

import com.dto.MemberDTO;
import com.service.MyPageService;

@Controller
public class MyPageController {
	
	@Autowired
	MyPageService service;
	
	//수정할 회원 정보 가져오기
	@GetMapping("/MemberInfo")
	public String memberInfo(HttpSession session) {
		MemberDTO dto =
				  (MemberDTO)session.getAttribute("login");
		String userID = dto.getUserID();
		MemberDTO memberInfo = service.memberInfo(userID);
		session.setAttribute("login", memberInfo);
		
		return "memberInfo";
	}

}

✅ MyPageMapper.xml

<?xml version="1.0" encoding="UTF-8" ?>
<!DOCTYPE mapper
  PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN"
  "https://mybatis.org/dtd/mybatis-3-mapper.dtd">
  
<mapper namespace="MyPageMapper">

<!-- 수정할 회원 정보 가져오기 -->
<select id="memberInfo" parameterType="string" resultType="MemberDTO">
	select userID, passwd, name, email, post, addr1, addr2, phone
	from member
	where userID=#{userID} 
</select>
	
</mapper>

✅ MyPageDAO.java

package com.dao;

import org.mybatis.spring.SqlSessionTemplate;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Repository;

import com.dto.MemberDTO;

@Repository
public class MyPageDAO {
	
	@Autowired
	SqlSessionTemplate session;    //session 주입받기
	
	//수정할 회원 정보 가져오기
	//userID에 해당하는 값들을 다뽑아내서 dto에 담고 반환
	public MemberDTO memberInfo(String userID) {
		MemberDTO dto = session.selectOne("MyPageMapper.memberInfo", userID);
		return dto;
	}
	
}

✅ MyPageService.java (interface)

package com.service;

import org.apache.ibatis.session.SqlSession;

import com.dto.MemberDTO;


public interface MyPageService {
	
	//회원정보
	public MemberDTO memberInfo(String userID);
	
}

✅ MyPageServiceImplement.java

package com.service;

import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.stereotype.Service;

import com.dao.MyPageDAO;
import com.dto.MemberDTO;

@Service
public class MyPageServiceImpl implements MyPageService {
	
	@Autowired
	MyPageDAO dao;         //DAO 주입받기

	//수정할 회원 정보 가져오기
	@Override
	public MemberDTO memberInfo(String userID) {
		MemberDTO dto = dao.memberInfo(userID);
		return dto;
	}

}

4️⃣ 깃허브 오류 발생

여기까지 구현한 후, 커밋하고 push 하기 전에 팀원이 올린 코드를 pull 하는 과정에서 오류가 발생했다.

서버의 파일과 깃허브의 내용이 틀려서 충돌이 발생한거라고 한다.

해결방법

git stash

커밋하지 않은 채로 스태시 버튼을 클릭하여 스태시 이름을 정해주고 확인 클릭한다.
스태시 하위에 내가 저장한 목록이 확인된다.
pull 받아서 최신으로 업데이트한다.
스태시에서 마우스 우클릭 > 스태시 적용 클릭한다.
적용됐으면 commit, push 진행

처음에 작업을 시작하기 전, 무조건 PULL을 받은 후 > 작업 > 커밋 > PULL (그동안의 시간에 팀원들이 푸쉬한게 있을 수 있기 때문에) > PUSH 순으로 해야하는데 가장 첫 단계를 빼먹어서 난 오류였다.

커밋을 하거나 아니면 스태시에 저장한 후, PULL을 먼저 받아 최신 버전으로 업데이트한 후 스태시 적용 or 커밋을 해주면 되는 흔하고 간단한 오류이다.

저작자표시 비영리 변경금지

'Project 여담 > 3주차' 카테고리의 다른 글

10/22 : 퇴소자 발생 / 회원가입 구현 (0)	2023.10.22
10/21 : 회원정보수정 오류 (userID -> session) / 멘토링 (0)	2023.10.21
10/20 : Git Commit Message Convention / pull오류 (0)	2023.10.20
10/19 : 회원정보확인 jsp / 회원정보수정 구현 (0)	2023.10.19
10/16 : 네이버 클라우드 플랫폼을 사용한 DB 서버 공유 (0)	2023.10.16

공지사항

최근에 올라온 글

최근에 달린 댓글

Total

Today

Yesterday

링크

TAG more

« 2024/05 »
일	월	화	수	목	금	토
			1	2	3	4
5	6	7	8	9	10	11
12	13	14	15	16	17	18
19	20	21	22	23	24	25
26	27	28	29	30	31

글 보관함

< Xoo | Log >

티스토리 뷰