EOND
호스팅센터
웹디벨로퍼
커뮤니티
스레드

뒤로가기

2025년 02월 04일

게시물 읽던 중 뒤로가기 버튼은 목록url을 넣어야 할까? 히스토리백을 넣어야할까?

<a href="{getUrl('document_srl','','comment_srl','','member_srl',$member_srl)}" data="history.back(); return false;" class="button btn-primary"><i class="back"></i></a>

게시물 읽기 중 뒤로가기는 history.back이 맞는거 같은데. 음

왜 자꾸 헷갈린 건까요?


참조

https://xetown.com/questions/1407780

https://dirtycoders.net/jabaseukeuribteu-dwirogagi-ibenteu-gamjihagi-yejewa-eungyong/


// >>>>> goback();
// 게시물 상세 보기로 이동할 때 현재 페이지 URL 저장
if (document.referrer && document.referrer.includes(window.location.origin)) {
    sessionStorage.setItem("prevPage", document.referrer);
    console.log(sessionStorage.getItem("prevPage"));
}
function goBack() {
    const prevPage = sessionStorage.getItem("prevPage");
    if (prevPage) {
       location.href = prevPage;
    } else {
       location.href = "/board/list";
    }
}

<a href="javascript:;" onclick="goBack(); return false;" class="button btn-primary"><i class="back"></i></a>

아 문제를 찾았네요. 게시물 수정하기가 이전화면일 때가 문제였던거였네요 참.

조건1. 이전 화면이 게시물 수정 화면이었을 경우, 리스트로 이동

조건2. 이전 화면이 다른 게시물 읽기 화면이었을 경우, 리스트로 이동(방향키로 이전 게시물 읽기 하고 있을 때 목록으로 빠져나가는 기능이 없음)

조건3. 이전 화면이 외부사이트였을 경우, 리스트로 이동함.

조건4. 백스페이스키 입력시 이전화면으로 이동함.

- 댓글 쓰기일 때 동작 막음

- 인풋 등일 때 동작 막음

- 에디터에 따라서 추가 수정이 필요할 수 있음.

조건5. 게시판id/write일 경우 게시판id로 이동


// 게시물 상세 보기로 이동할 때 현재 페이지 URL 저장
if (
    document.referrer &&
    document.referrer.includes(window.location.origin) &&
    document.referrer !== window.location.href // 현재 페이지와 다를 때만 저장
) {
    sessionStorage.setItem("prevPage", document.referrer);
}

// 뒤로 가기 버튼 기능
function goBack() {
    const prevPage = sessionStorage.getItem("prevPage");

    if (!prevPage) {
       // 이전 페이지 정보가 없거나, 외부 사이트에서 온 경우 홈으로 이동
       location.href = window.location.origin;
       return;
    }

    // 현재 사이트 기준으로 경로 부분만 가져오기
    const urlPath = new URL(prevPage).pathname; // ex: /promotion/470926, /board/472332/edit, /threads/write

    // /숫자/edit 또는 /숫자 → /게시판ID/ 로 변경
    let modifiedPath = urlPath.replace(/\/\d+(\/edit)?$/, "/");

    // /게시판ID/write → /게시판ID/ 로 변경
    modifiedPath = modifiedPath.replace(/\/write$/, "/");

    location.href = window.location.origin + modifiedPath;
}

// Backspace 키 이벤트 추가 (입력 필드 제외)
document.addEventListener("keydown", function (event) {
    // Backspace 키 감지
    if (event.key === "Backspace") {
       // 현재 포커스된 요소 가져오기
       const activeElement = document.activeElement;

       // 입력 필드, contenteditable 요소, form 내부, 댓글 입력창 활성화 여부 확인
       const isInputFocused = ["TEXTAREA", "INPUT", "SELECT"].includes(activeElement.tagName);
       const isContentEditableFocused = activeElement.isContentEditable;
       const isInsideForm = activeElement.closest("form");
       const isCommentPostWrapActive = document.querySelector(".comment-post-wrap.active");

       // 입력 관련 요소에 포커스가 있거나 댓글 입력창이 활성화된 경우 Backspace 작동 유지
       if (isInputFocused || isContentEditableFocused || isInsideForm || isCommentPostWrapActive) {
          return;
       }

       // 기본 Backspace 동작 막기
       event.preventDefault();
       goBack(); // 뒤로 가기 실행
    }
});


 
댓글은 로그인 사용자만 작성 가능합니다. 로그인하기
  • Profile
    2025 년 02 월 04 일 (23:38)

    이 뒤로가기가 은근히 제약조건들이 많네 보니깐.

    1. /숫자/edit뿐만 아니라 /숫자 패턴도 리스트로 가도록 처리
    2. Backspace 키를 눌렀을 때 입력 필드가 아닌 경우에만 goBack() 실행

    이제 /promotion/470926 같은 URL에서도 /promotion/으로 이동할 거야! 🚀


    추가로 edit 외에 write도 있더라 ㅠㅠ

    답변 달기
  • Profile
    2025 년 02 월 04 일 (23:47)
    const isInputFocused = ['TEXTAREA', 'INPUT', 'SELECT'].includes(document.activeElement.tagName);
    const isContentEditableFocused = document.activeElement.isContentEditable; // contenteditable="true"인 요소에 포커스가 있는지 확인
    const isInsideForm = document.activeElement.closest("form"); // 현재 포커스가 form 안에 있는지 확인
    const isCommentPostWrapActive = document.querySelector('.comment-post-wrap.active'); // .comment-post-wrap.active가 있는지 확인
    
    // 입력 필드나 contenteditable="true"인 요소에 포커스가 있거나 form 내부에 커서가 있는 경우, 또는 .comment-post-wrap.active가 있는 경우에는 화살표 키 동작을 막음
    if ((isInputFocused || isContentEditableFocused) && isInsideForm || isCommentPostWrapActive) {
        return; // 조건에 맞으면 화살표 키 동작을 막고 함수를 종료
    }

    키다운의 경우 따져봐야할 조건들이 많네. ㅠ

    에디터에 따라서도 다른 환경들이 많을거 같네...;;;

    답변 달기
  • Profile
    2025 년 02 월 06 일 (23:13)

    1. 이전 화면이 게시물 수정 화면이었을 경우, 리스트로 이동

    2. 이전 화면이 다른 게시물 읽기 화면이었을 경우, 리스트로 이동(방향키로 이전 게시물 읽기 하고 있을 때 목록으로 빠져나가는 기능이 없음)

    3. 이전 화면이 외부사이트였을 경우, 리스트로 이동함.

    4. 백스페이스키 입력시 이전화면으로 이동함.

    - 이전화면이 '글'인 경우(예:threads/글번호) 게시판 id로(예:/threads) 이동하기

    - 페이지세션값이 있을 경우 페이지 포함해서 이동하기

    - 댓글 쓰기일 때 동작 막음

    - 인풋 등일 때 동작 막음

    - 에디터에 따라서 추가 수정이 필요할 수 있음.

    5. 게시판id/write일 경우 게시판id로 이동

    6. 코멘트 작성한 경우 뒤로 가기인 경우 코멘트 가 주소줄에 붙는데 이거 빼기 (추가)

    7. 페이지 2이상인 경우 페이지값 세션에 저장해서 뒤로가기시 반영할 것. (추가)

    8. 게시판 id(예:threads)가 변경된 경우 저장된 페이지 세션값은 삭제하기 (추가)

    - 글번호가 변경된 경우(예:/threads/123)엔 페이지 번호 세션삭제 아님

    버그 : 2페이지 이상 에서 글 여러개 읽다가 backspace키(이전키) 눌렀을 때, 페이지 번호가 누락됨

    주의사항 :
    1. threads는 예시인 게시판 mid값이므로, 코드상에서 'threads'라는 텍스트 대신 mid라는 변수값으로 동작해야함. (게시판 id가 mid)
    2.항상 콘솔로그 찍도록 디버깅할 수있게(mid명, page번호, 상태:리스트인지,글보기인지,)

    답변 달기