WinWin‐Main

📌Main

✔️메인 페이지

• 로그인 했을 시 헤더에 해당 회원 닉네임과 남은 윙포인트가 띄워짐
• <모임> 게시판에 있는 글들이 좋아요(인기)순으로 정렬됨 - 슬라이드

🖥️ code

MainController.java

@Controller
@RequiredArgsConstructor
@RequestMapping("/main/*")
public class MainController {

    private final UserService userService;
    private final StudyService studyService;


    /* 프로젝트 인기순(좋아요)으로 조회*/
    @GetMapping("/main")
    public String meetingHomeForm(Model model){
        List<StudyVo> projectList = studyService.findMainList(1);
        List<StudyVo> studyList = studyService.findMainList(2);
        System.out.println(projectList);
        model.addAttribute("projectList", projectList);
        model.addAttribute("studyList", studyList);

        return "main/main";
    }
}

UserService.java

    //  회원 일부 정보 가져오기
    public UserDto findUserInfo(Long userNumber){
        if(userNumber == null){throw new IllegalArgumentException("회원 번호 누락");};

        return Optional.ofNullable(userMapper.findUserInfo(userNumber))
                .orElseThrow(()->{throw new IllegalArgumentException("존재하지 않는 회원");});
    }

UserMapper.xml

    
    <!--회원번호로 닉네임, 윙 갯수, 상태 조회-->
    <select id="findUserInfo" resultType="userDto">
        SELECT USER_NICKNAME, USER_WING, USER_STATUS , USER_POSITION
        FROM WW_USER
        WHERE USER_NUMBER = #{userNumber}
    </select>

main.js

// 슬라이드
let $slideBox = $(".project-slide");
let $slideContent = $(".project-box");

let slideWidth = 490;

let slideCnt = $slideContent.length;

let currentIdx = 0;

checkEnd();

$(".bi-chevron-right").on("click", function () {
  if (currentIdx >= 2) {
    return;
  }
  console.log("next");

  currentIdx++;
  $slideContent.css("transition", "0.5s");
  $slideContent.css("left", -(currentIdx * slideWidth));
  addTransition();
  checkEnd();
});

$(".bi-chevron-left").on("click", function () {
  if (currentIdx <= 0) {
    return;
  }
  console.log("prev");
  currentIdx--;
  $slideContent.css("transition", "0.5s");
  $slideContent.css("left", -(currentIdx * slideWidth));
  addTransition();
  checkEnd();
});

// 슬라이드 이동속도
function addTransition() {
  for (let i = 0; i < $slideContent.length; i++) {
    if (i != currentIdx) {
      $slideContent.eq(i).css("transition", "0.2s");
    } else {
      $slideContent.eq(i).css("transition", "0.2s");
    }
  }
  checkEnd();
}

// 슬라이드 끝났을 때
function checkEnd() {
  console.log(currentIdx);
  console.log(slideCnt);
  if (currentIdx <= 0) {
    $(".prev").attr("stroke", "#ddd");
    $(".bi-chevron-left").css("cursor", "not-allowed");
    $slideContent.css("left", 0);
  } else {
    $(".prev").attr("stroke", "#000");
    $(".bi-chevron-left").css("cursor", "pointer");
  }
  if (currentIdx >= 2) {
    $(".next").attr("stroke", "#ddd");
    $(".bi-chevron-right").css("cursor", "not-allowed");
  } else {
    $(".next").attr("stroke", "#000");
    $(".bi-chevron-right").css("cursor", "pointer");
  }
}

//헤더 서브카테고리 생기게
$("li").hover(
  function () {
    $(this).css("border-bottom", "2px solid #1b5192");
    $(this).find(".h-font").css("color", "#1b5192");
    $(this).find(".sub").removeClass("none");
  },
  function () {
    $(this).css("border-bottom", "");
    $(this).find(".h-font").css("color", "#868686");
    $(this).find(".sub").addClass("none");
  }
);

📸 view

MainImage

메인페이지 (전체)

HeaderImage

메인페이지 (헤더-로그인 전)

메인페이지 (헤더-로그인 후)

SlideGip

메인페이지 (슬라이드)

---