그누보드5 비회원 비밀번호, 닉네임 자동 입력 구현 > 코딩 스토리

디시인사이드의 댓글/게시글 작성 기능 중 비회원이 입력했던 닉네임, 비밀번호를 저장하여 댓글 수정, 게시글 업로드 시 자동으로 해당 데이터를 입력해주는 기능 추가 방법입니다. (gpt4)


1. write.php 수정 (Twave 테마 기준 경로: mobile/skin/board/basic/write.php )
 

        <?php if ($is_name) { ?>

        <div class="write_div">

            <label for="wr_name" class="sound_only">이름<strong>필수</strong></label>

            <input type="text" name="wr_name" value="<?php echo $name ?>" id="wr_name" required class="frm_input full_input required" maxlength="20" placeholder="이름">

        </div>

        <?php } ?>

        <?php if ($is_password) { ?>

        <div class="write_div">

            <label for="wr_password" class="sound_only">비밀번호<strong>필수</strong></label>

            <input type="password" name="wr_password" id="wr_password" <?php echo $password_required ?> class="frm_input full_input <?php echo $password_required ?>" maxlength="20" placeholder="비밀번호">

        </div>

        <?php } ?>


부분을 아래와 같이 수정합니다.

<?php if ($is_name) { ?>

<div class="write_div">

    <label for="wr_name" class="sound_only">닉네임<strong>필수</strong></label>

    <input type="text" name="wr_name" value="<?php echo $name ?>" id="wr_name" required class="frm_input full_input required" maxlength="20" placeholder="이름" oninput="saveToLocalStorage()">

</div>

<?php } ?>

<?php if ($is_password) { ?>

<div class="write_div">

    <label for="wr_password" class="sound_only">비밀번호<strong>필수</strong></label>

    <input type="password" name="wr_password" id="wr_password" <?php echo $password_required ?> class="frm_input full_input <?php echo $password_required ?>" maxlength="20" placeholder="비밀번호" oninput="saveToLocalStorage()">

</div>

<?php } ?>

<?php if ($is_guest) { ?>

<!-- 비회원이 입력한 닉네임, 비밀번호 로컬스토리지에 저장{ -->

<script>

    // 페이지 로드 시 캐시에서 값 불러오기

    window.onload = function() {

        const name = localStorage.getItem('wr_name');

        const password = localStorage.getItem('wr_password');

        if (name) {

            document.getElementById('wr_name').value = name;

        }

        if (password) {

            document.getElementById('wr_password').value = password;

        }

    };

    // 입력할 때마다 캐시에 저장

    function saveToLocalStorage() {

        const name = document.getElementById('wr_name').value;

        const password = document.getElementById('wr_password').value;

        localStorage.setItem('wr_name', name);

        localStorage.setItem('wr_password', password);

    }

</script>

<!-- }입력한 닉네임, 비밀번호 저장 -->

<?php } ?>


2. view_comment.skin.php 수정 (Twave 테마 기준 경로: mobile/skin/board/basic/view_comment.skin.php )

                <label for="wr_name" class="sound_only">이름<strong> 필수</strong></label>

                <input type="text" name="wr_name" value="<?php echo get_cookie("ck_sns_name"); ?>" id="wr_name" required class="frm_input required" size="25" placeholder="이름">

                <label for="wr_password" class="sound_only">비밀번호<strong> 필수</strong></label>

                <input type="password" name="wr_password" id="wr_password" required class="frm_input required" size="25"  placeholder="비밀번호">
부분을 아래와 같이 수정합니다.
 

<label for="wr_name" class="sound_only">이름<strong> 필수</strong></label>

<input type="text" name="wr_name" id="wr_name" required class="frm_input required" size="25" placeholder="닉네임">

<label for="wr_password" class="sound_only">비밀번호<strong> 필수</strong></label>

<input type="password" name="wr_password" id="wr_password" required class="frm_input required" size="25" placeholder="비밀번호">

<!-- 비회원의 댓글 작성 시 닉네임, 비밀번호 자동 저장/불러오도록 구현{ -->

<script>

    // 페이지 로드 시 캐시에서 값 불러오기

    window.onload = function() {

        const name = localStorage.getItem('wr_name');

        const password = localStorage.getItem('wr_password');

        if (name) {

            document.getElementById('wr_name').value = name;

        }

        if (password) {

            document.getElementById('wr_password').value = password;

        }

    };

    // 입력할 때마다 캐시에 저장

    function saveToLocalStorage() {

        const name = document.getElementById('wr_name').value;

        const password = document.getElementById('wr_password').value;

        localStorage.setItem('wr_name', name);

        localStorage.setItem('wr_password', password);

    }

    // 입력 필드에 이벤트 리스너 추가

    document.addEventListener('DOMContentLoaded', function() {

        document.getElementById('wr_name').addEventListener('input', saveToLocalStorage);

        document.getElementById('wr_password').addEventListener('input', saveToLocalStorage);

    });

</script>


3. password.skin.php 수정 (Twave 테마 기준 mobile/skin/basic/password.skin.php )

1)
    <form name="fboardpassword" action="<?php echo $action;  ?>" method="post">
부분을 아래와 같이 수정합니다.

    <form name="fboardpassword" action="<?php echo $action; ?>" method="post" id="passwordForm">

2)
아래 스크립트를 추가합니다.
 

<?php if ($is_guest) { ?>

<!-- 비회원 게시물 수정/삭제 시 자동으로 비밀번호 입력{ -->

<script>

    // 페이지 로드 시 글쓰기 페이지에서 저장한 비밀번호 자동 삽입

    window.onload = function() {

        const password = localStorage.getItem('wr_password');

        if (password) {

            document.getElementById('password_wr_password').value = password;

            // 자동으로 확인 버튼 클릭

            document.getElementById('passwordForm').submit();

        }

    };

</script>

<!-- }비회원 게시물 수정/삭제 시 자동으로 비밀번호 입력 -->

<?php } ?>

게시글 작성에서 사용한 닉네임(아이디), 비밀번호를 댓글 작성 시 그대로 사용할 수 있으며, 댓글 작성 시 사용한 닉네임(아이디), 비밀번호를 게시판 작성 시 그대로 가져와 사용합니다.