티스토리 뷰

코딩/spring

[23주 3일차] 매칭확인 / 게임&매칭 등록시 팀 정보 가져가기(db의 이미지이름 가져와서 form으로 다시 입력하기)

ehzim 2024. 3. 13. 19:28

 

 

 

경기목록에서 매칭이 아직 되지않은 경기의 상세보기를 클릭하면 매칭전이라는 alert창이 뜨도록 코드를 작성했다.

이전에 작성했을 때 안된 이유는 maches를 조회해서 그런것이었다.

문제점을 인식  ${not empty game.matches[0].teamName} 이 값을 비교하여 teamName의 값이 없을 경우 alert 창이 뜨도록 작성했다.

또한 매칭을 클릭한 후 위의 값이 존재하면 이미 매칭된 게임이라는 alert창을 띄우고 prevenDefault 를 하여 페이지 이동을 막았다.

 

 

games.jsp

<a href="<c:url value='/games/game?id=${game.gameId}'/>" onclick="checkAndNavigate(event, ${not empty game.matches[0].teamName})" class="btn btn-sm btn-primary">상세보기</a>										
<a href="<c:url value='/match/add?id=${game.gameId}'/>" onclick="checkAndNavigateMatch(event, ${not empty game.matches[0].teamName})" class="btn btn-sm btn-primary">매칭</a>

<script>
	function checkAndNavigate(event, matches) {
	    if (!matches) {
	        //event.preventDefault(); // 이벤트 기본 동작 막기 (페이지 이동 방지)
	        alert("매칭 전입니다!");
	    }
	    // 매칭 정보가 있으면 페이지로 이동
	    // 여기에 필요한 다른 로직 추가 가능
	}
	
	function checkAndNavigateMatch(event, matches){
		if(matches){
			event.preventDefault();
			alert("이미 매칭된 게임입니다!");
		}
	}
</script>

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

게임 등록과 매칭을 등록할 때 로그인한 사용자가 가입된 팀의 정보를 가져와 자동으로 폼에 입력되도록 코드를 작성했다.

로그인할때 session에 사용자 이름과 아이디 그리고 팀아이디를 저장해준다.

그리고 가지고온 팀아이디를 사용하여 팀이름을 조회하는 메소드와 팀사진을 조회하는 메소드를 실행하여 model에 담아주었다.

 

 

 

 

 

MatchController.java

	@GetMapping("/add")
	public String requestAddMatchForm(@ModelAttribute("addMatch") Match match, @RequestParam("id") String gameId, Model model,HttpSession session) {
		
//		Game game = new Game();
//		String gameId = game.getGameId();
		//model.addAttribute("match",gameById);
		model.addAttribute("gameId", gameId);
		
	    // 세션에서 memberId 가져오기
	    String memberId = (String) session.getAttribute("memberId");
	    System.out.println("memberId=" + memberId);
	    model.addAttribute("memberId", memberId);
	    
	    String team = (String) session.getAttribute("team");
	    model.addAttribute("myteam",team);
	    System.out.println("팀"+ team);
	    // 기존에 사용되던 Member 객체를 사용하지 않음

		
	    //팀아이디를 전달해서 teamservice의 팀이름 가져오기
	    String teamName = teamService.getTeamName(team);
	    
	    // 모델에 팀 이름 추가
	    model.addAttribute("teamName", teamName);
	    
	    String memberName = (String) session.getAttribute("Name");
	    model.addAttribute("userName",memberName);
	    System.out.println("이름은 "+memberName);
	    
	    String imageName = teamService.getTeamImage(team);
	    System.out.println("이미지이름="+imageName);
	    model.addAttribute("image",imageName);
		
	    
		return "/Game/addMatch";
	}

 

 

 

 

 

 

 

 

 

 

 

 

 

 

세션으로 가져오는 경우 한가지 문제점이 발생했다.

이미지는 value 값으로 저장하지 못한다는 것이었는데

이것을 해결하기 위해 form:input 밑에 가짜 label와 span을 작성해주었다.

그리고 label의 for와 input의 id를 동일하게하여 두개를 연결 시켜 주었다.

연결한 후 span에는 el을 사용하여 변수처리한 image 이름을 입력시켜주었다.

그 후 기존의 input 박스는 display:none 으로 숨겨주면 session으로부터 가져온 기존 이미지파일을 폼을 통해 입력시켜줄 수 있다.

 

* 컨트롤러도 바꿔야함

 

 

 

 

 

 

addMatch.jsp

<style>
	.fileBtn{
	  border: none;
	  padding :3px;
	  font-size:15px;
	}
	.image{
		display:none;
	}
	.choose{
		border-left:1px solid black;
		padding:5px;
		
	}
	.fake{
		text-align: left;
		/* border-bottom:1px solid #BDBDBD; */
		
	}
</style>

</head>
<body>

<div class="col-md-12 form-group fake">
    <form:input path="gameImage" type="file" class="form-control image" id="gameImage" name="gameImage" placeholder="구단사진" onfocus="this.placeholder = ''" onblur="this.placeholder = '구단사진'" accept="image/*" onchange="readURL(this);" value="${image}" />								
    <label for="gameImage" class="btn fileBtn">파일 선택</label>
    <span id="fileName" class="choose">${image }</span>
    <img id="preview" />
</div>



<script>
    document.getElementById('gameImage').addEventListener('change', function(){
        var filename = document.getElementById('fileName');
        if(this.files[0] == undefined){
            filename.innerText = '선택된 파일없음';
            return;
        }
        filename.innerText = this.files[0].name;
    });


    function readURL(input) {
      if (input.files && input.files[0]) {
        var reader = new FileReader();
        reader.onload = function(e) {
          document.getElementById('preview').src = e.target.result;
        };
        reader.readAsDataURL(input.files[0]);
      } else {
        document.getElementById('preview').src = "";
      }
    }
</script>

 

 

 

 

 

MatchController.java

	@GetMapping("/add")
	public String requestAddMatchForm(@ModelAttribute("addMatch") Match match, @RequestParam("id") String gameId, Model model,HttpSession session) {
		

		//model.addAttribute("match",gameById);
		model.addAttribute("gameId", gameId);
		
	    // 세션에서 memberId 가져오기
	    String memberId = (String) session.getAttribute("memberId");
	    System.out.println("memberId=" + memberId);
	    model.addAttribute("memberId", memberId);
	    
	    String team = (String) session.getAttribute("team");
	    model.addAttribute("myteam",team);
	    System.out.println("팀"+ team);
	    // 기존에 사용되던 Member 객체를 사용하지 않음

		
	    //팀아이디를 전달해서 teamservice의 팀이름 가져오기
	    String teamName = teamService.getTeamName(team);
	    
	    // 모델에 팀 이름 추가
	    model.addAttribute("teamName", teamName);
	    
	    String memberName = (String) session.getAttribute("Name");
	    model.addAttribute("userName",memberName);
	    System.out.println("이름은 "+memberName);
	    
	    String imageName = teamService.getTeamImage(team);
	    System.out.println("이미지이름="+imageName);
	    model.addAttribute("image",imageName);
		
	    
		return "/Game/addMatch";
	}
	
	@PostMapping("/add")
	public String submitAddMatch(@ModelAttribute("addMatch") Match match, @RequestParam("id") String gameId, Model model, HttpServletRequest request, HttpSession session) {
		System.out.println("POSTMAPPING ADD 도착");
		System.out.println("Game ID from URL: " + gameId);
		

		match.setGameId(gameId);
		
		// 세션에서 팀 정보 가져오기
	    String team = (String) session.getAttribute("team");
	    model.addAttribute("myteam", team);
	    System.out.println("팀" + team);
	    
	    // 팀 이미지 파일 이름 가져오기
	    String imageName = teamService.getTeamImage(team);
	    System.out.println("이미지이름=" + imageName);
	    
	    // 매치의 이미지 파일 가져오기
	    MultipartFile img = match.getGameImage();
	    
	    try {
	        // 이미지 파일 이름 설정
	        match.setFileName(imageName);
	        
	        // 이미지 파일 저장 경로 설정
	        String saveName = img.getOriginalFilename();
	        String save = request.getSession().getServletContext().getRealPath("/resources/images") + imageName;
	        File saveFile = new File(save, saveName);
	        
	        // 파일 저장
	        img.transferTo(saveFile);
	        
	        System.out.println("filname=" + match.getFileName());
	    } catch (Exception e) {
	        throw new RuntimeException("사진 등록 실패", e);
	    }
	    // Match 정보 저장
	    matchService.setNewMatch(match);
	    return "redirect:/games";
	}

 

 

 

 

 

코드 수정 전

 

 

 

아래와 같이 label과 span 이 보이고 기존 input은 none되어 안보인다.

 

 

 

경기 등록을 한 후 매칭된 모습

 

 

 

 

저작자표시

'코딩 > spring' 카테고리의 다른 글

[24주 1일차] 회원가입시 유효성검사  (0) 2024.03.18
[23주 4일차] 리뷰 수정폼 ajax로 불러와서 띄워주기 (ajax는 json데이터 형식으로 반환!)  (0) 2024.03.14
[23주 2일차] 남은 시간 구현  (1) 2024.03.12
[23주 1일차] 팀 가입신청  (0) 2024.03.11
[23주 1일차] 해당하는 값 보여주기  (0) 2024.03.11
공지사항
최근에 올라온 글
최근에 달린 댓글
Total
Today
Yesterday