1. Main Page

📌 Main 페이지 주요기능

✅ Session 유무에 따른 서비스 이용 제한

• nunjucks 문법을 이용해 Session 값 유무에 따라 서비스 이용 가능 및 Login탭 정보 변경
• 비 로그인 상태에서 Code Chat 클릭 시, Login 페이지로 이동
• 비 로그인 상태에서 Code Arena 클릭 시, Login 페이지로 이동
• 비 로그인 상태에서 Login 클릭 시, 로그인 및 회원가입 페이지로 이동
• 로그인 시, DB에서 사용자 정보 검색 후 Session으로 저장 및 Login 탭 사용자 이름으로 변경

💻 CodeDetail

로그인 유무에 따른 라우터 처리

routes -> page.js (line 37)

//Code Chat 채팅방 리스트 http://localhost:3000/page/CodeChat
router.get('/CodeChat',(req,res)=>{
    let seName = req.session.userName
    let seLevel = req.session.userlevel
    let seLogin = req.session.login
    // 비 로그인 상태에서 접속 요청시, 로그인 페이지로 이동
    // 로그인시 정상적으로 이동
    if(seLogin){
        res.render('codeChatList',{login : seLogin, name : seName, level : seLevel})
    }
    else{
        res.render('join')
    }
})

//Code Arena 채팅방 리스트 http://localhost:3000/page/CodeArena
router.get('/CodeArena',(req,res)=>{
    let seName = req.session.userName
    let seLevel = req.session.userlevel
    let seLogin = req.session.login
        // 비 로그인 상태에서 접속 요청시, 로그인 페이지로 이동
        // 로그인시 정상적으로 이동
        if(seLogin){
        res.render('codeArenaList',{login : seLogin, name : seName, level : seLevel})
        }
        else{
            res.render('join')
        }
})

Session 유무에 따른 보여지는 html 요소 변경

Main.html (line 147)

 <!-- 세션 로그인 스크립트 -지훈- -->
  <script>
    // 로그인 했을 시 사용자 이름 표시
    let login = '{{login}}'
    let logout = '{{logout}}'

    if (login) {
      document.querySelector('#login_btn').style.display = 'none'
      document.querySelector('#userInfo_btn').style.display = 'inline'
    }
    if (logout) {
      document.querySelector('#login_btn').style.display = 'inline'
      document.querySelector('#userInfo_btn').style.display = 'none'
    }

🖼️ Preview

Main.gif