회원가입 화면 구현
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/include/head.jsp" %>
<script>
$(document).ready(function() {
$("#userId").focus();
$("#btnReg").on("click", function() {
// 모든 공백 체크 정규식
var emptCheck = /\s/g;
// 영문 대소문자, 숫자로만 이루어진 4~12자리 정규식
var idPwCheck = /^[a-zA-Z0-9]{4,12}$/;
if($.trim($("#userId").val()).length <= 0)
{
alert("사용자 아이디를 입력하세요.");
$("#userId").val("");
$("#userId").focus();
return;
}
if (emptCheck.test($("#userId").val()))
{
alert("사용자 아이디는 공백을 포함할 수 없습니다.");
$("#userId").focus();
return;
}
if (!idPwCheck.test($("#userId").val()))
{
alert("사용자 아이디는 4~12자의 영문 대소문자와 숫자로만 입력하세요");
$("#userId").focus();
return;
}
if($.trim($("#userPwd1").val()).length <= 0)
{
alert("비밀번호를 입력하세요.");
$("#userPwd1").val("");
$("#userPwd1").focus();
return;
}
if (emptCheck.test($("#userPwd1").val()))
{
alert("비밀번호는 공백을 포함할 수 없습니다.");
$("#userPwd1").focus();
return;
}
if (!idPwCheck.test($("#userPwd1").val()))
{
alert("비밀번호는 영문 대소문자와 숫자로 4~12자리 입니다.");
$("#userPwd1").focus();
return;
}
if ($("#userPwd1").val() != $("#userPwd2").val())
{
alert("비밀번호가 일치하지 않습니다.");
$("#userPwd2").focus();
return;
}
if($.trim($("#userName").val()).length <= 0)
{
alert("사용자 이름을 입력하세요.");
$("#userName").val("");
$("#userName").focus();
return;
}
if(!fn_validateEmail($("#userEmail").val()))
{
alert("사용자 이메일 형식이 올바르지 않습니다.");
$("#userEmail").focus();
return;
}
$("#userPwd").val($("#userPwd1").val());
$.ajax({
type : "POST",
url : "/user/userIdCheckAjax.jsp",
data : {
userId : $("#userId").val()
},
datatype : "JSON",
success : function(obj) {
},
complete : function(data) {// 응답이 종료되면 실행, 잘 사용하지않는다
console.log(data);
},
error : function(xhr, status, error) {
alert("아이디 중복 체크 에러!");
}
});
});
});
function fn_validateEmail(value)
{
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test(value);
}
</script>
</head>
<body>
<%@ include file="/include/navigation.jsp" %>
<div class="container">
<div class="row mt-5">
<h1>회원가입</h1>
</div>
<div class="row mt-2">
<div class="col-12">
<form id="regForm" name="regForm" action="/user/userProc.jsp" method="post">
<div class="form-group">
<label for="username">사용자 아이디</label>
<input type="text" class="form-control" id="userId" name="userId" placeholder="사용자 아이디" maxlength="12" />
</div>
<div class="form-group">
<label for="username">비밀번호</label>
<input type="password" class="form-control" id="userPwd1" name="userPwd1" placeholder="비밀번호" maxlength="12" />
</div>
<div class="form-group">
<label for="username">비밀번호 확인</label>
<input type="password" class="form-control" id="userPwd2" name="userPwd2" placeholder="비밀번호 확인" maxlength="12" />
</div>
<div class="form-group">
<label for="username">사용자 이름</label>
<input type="text" class="form-control" id="userName" name="userName" placeholder="사용자 이름" maxlength="15" />
</div>
<div class="form-group">
<label for="username">사용자 이메일</label>
<input type="text" class="form-control" id="userEmail" name="userEmail" placeholder="사용자 이메일" maxlength="30" />
</div>
<input type="hidden" id="userPwd" name="userPwd" value="" /> <!-- 서버에보내는 userPwd -->
<button type="button" id="btnReg" class="btn btn-primary">등록</button>
</form>
</div>
</div>
</div>
</body>
</html>
userId 값만 AJAX로 서블릿에 넘겨준다 그다음에 post방식으로 userIdCheckAjAX부분으로 URL을 넘겨준다
그다음 구현할부분은 아이디가 존재하는지안하는지 DB를 통해 검사하는 UserDao 부분의 userIdSelect 메소드를 구현한다
userDao UserIdSelect 메소드
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
public int userIdSelect(String userId)
{
int count = 0;
User user = null;
StringBuilder sql = new StringBuilder();
PreparedStatement pstmt = null;
ResultSet rs = null;
Connection conn = null;
sql.append("SELECT ");
sql.append(" COUNT(USER_ID) AS CNT ");
sql.append("FROM ");
sql.append(" TBL_USER ");
sql.append("WHERE USER_ID=? ");
try
{
conn = DBManager.getConnection();
pstmt=conn.prepareStatement(sql.toString());
pstmt.setString(1, userId);
rs = pstmt.executeQuery();
if(rs.next())
{
count = rs.getInt("CNT");
}
}
catch(Exception e)
{
System.out.println("[UserDao] userIdSelect SQLException");
}
finally
{
DBManager.close(rs, pstmt, conn);
}
return count;
}
실제 아이디검색을 where조건에 줘서 있게되면 INT COUNT 부분이 1이상이될것이다
userIdCheckAjax
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.yeji.web.util.HttpUtil" %>
<%@page import="com.yeji.web.dao.UserDao"%>
<%@page import="com.yeji.common.util.StringUtil"%>
<%@ page import="org.apache.logging.log4j.Logger" %>
<%@ page import="org.apache.logging.log4j.LogManager" %>
<%
Logger logger = LogManager.getLogger("/user/userIdCheckAjax.jsp");
HttpUtil.requestLogString(request, logger);
String userId = HttpUtil.get(request, "userId");
if(!StringUtil.isEmpty(userId))
{
UserDao userDao = new UserDao();
if(userDao.userIdSelect(userId) <= 0)
{
// userId<=0 즉 검색이안될때 회원가입가능
response.getWriter().write("{\"flag\":0}");
}
else
{
//userId가 중복
response.getWriter().write("{\"flag\":1}");
}
}
else
{
//userId 값이 없을때
response.getWriter().write("{\"flag\":-1}");
}
%>
회원가입 화면 구현
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
$.ajax({
type : "POST",
url : "/user/userIdCheckAjax.jsp",
data : {
userId : $("#userId").val()
},
datatype : "JSON",
success : function(obj) {
var data = JSON.parse(obj);
if(data.flag == 0)
{
document.regForm.submit();
}
else
{
alert("중복된 아이디 입니다.");
}
},
complete : function(data) {// 응답이 종료되면 실행, 잘 사용하지않는다
console.log(data);
},
error : function(xhr, status, error) {
alert("아이디 중복 체크 에러!");
}
});
성공할경우 regForm부분의 form태그에 name 으로 감싸진값들을 가지고 넘어간다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
<form id="regForm" name="regForm" action="/user/userProc.jsp" method="post">
<div class="form-group">
<label for="username">사용자 아이디</label>
<input type="text" class="form-control" id="userId" name="userId" placeholder="사용자 아이디" maxlength="12" />
</div>
<div class="form-group">
<label for="username">비밀번호</label>
<input type="password" class="form-control" id="userPwd1" name="userPwd1" placeholder="비밀번호" maxlength="12" />
</div>
<div class="form-group">
<label for="username">비밀번호 확인</label>
<input type="password" class="form-control" id="userPwd2" name="userPwd2" placeholder="비밀번호 확인" maxlength="12" />
</div>
<div class="form-group">
<label for="username">사용자 이름</label>
<input type="text" class="form-control" id="userName" name="userName" placeholder="사용자 이름" maxlength="15" />
</div>
<div class="form-group">
<label for="username">사용자 이메일</label>
<input type="text" class="form-control" id="userEmail" name="userEmail" placeholder="사용자 이메일" maxlength="30" />
</div>
<input type="hidden" id="userPwd" name="userPwd" value="" /> <!-- 서버에보내는 userPwd -->
<button type="button" id="btnReg" class="btn btn-primary">등록</button>
</form>
그전태그중
$("#userPwd").val($("#userPwd1").val()); 을 선언
비밀번호는 userPwd2이였지만 그전에 userPwd값으로 넣어줘서 히든값으로 userPwd을 가지고 넘어간다
action 부분의 loginProc 부분으로 넘어간다 그다음 구현해보자
loginProc 구현
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@page import="com.yeji.web.dao.UserDao"%>
<%@ page import="com.yeji.common.util.StringUtil" %>
<%@ page import="com.yeji.web.util.CookieUtil" %>
<%@page import="com.yeji.model.User"%>
<%@ page import="com.yeji.web.util.HttpUtil" %>
<%@ page import="org.apache.logging.log4j.Logger" %>
<%@ page import="org.apache.logging.log4j.LogManager" %>
<%
Logger logger = LogManager.getLogger("/user/userIdCheckAjax.jsp");
HttpUtil.requestLogString(request, logger);
String msg = "";
String redirectUrl = "";
String userId = HttpUtil.get(request, "userId");
String userPwd = HttpUtil.get(request, "userPwd");
String userName = HttpUtil.get(request, "userName");
String userEmail = HttpUtil.get(request, "userEmail");
String cookieUserId = CookieUtil.getValue(request, "USER_ID");
UserDao userDao = new UserDao();
if(StringUtil.isEmpty(cookieUserId))
{
//회원가입
if(!StringUtil.isEmpty(userId) && !StringUtil.isEmpty(userPwd)
&& !StringUtil.isEmpty(userName) && !StringUtil.isEmpty(userEmail))
{
if(userDao.userIdSelect(userId) > 0)
{
//사용자 중복
msg = "사용자 아이디가 중복되었습니다.";
}
else
{
//회원가입가능
User user = new User();
user.setUserId(userId);
user.setUserPwd(userPwd);
user.setUserName(userName);
user.setUserEmail(userEmail);
user.setStatus("Y");
if(userDao.userInsert(user) > 0)
{
msg = "회원가입이 완료 되었습니다.";
redirectUrl = "/";
}
else
{
msg = "회원가입중 오류가 발생했습니다.";
redirectUrl = "/user/userRegForm.jsp";
}
}
}
else
{
//입력값이 넘어오지 않은경우
msg = "회원가입중 입력정보가 올바르지 않습니다.";
redirectUrl = "/user/userRegForm.jsp";
}
}
%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/include/head.jsp" %>
<script>
$(document).ready(function(){
alert("<%=msg%>");
location.href = "<%=redirectUrl%>";
});
</script>
</head>
<body>
</body>
</html>
이부분에서 궁금한건 document ready부분의 제이쿼리가 언제 시작하는 것인가이다
모든 java부분의 소스코드를 다실행하고 그후에 최종으로 document ready부분이 로딩되기때문에 msg redirectUrl을 자바단에서 가지고있는 값들을 넘겨주기때문에 그게걸맞는 내용이나온다
userDao 부분 userInsert 구현
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
public int userInsert(User user) //User객체를 담고있다
{
int count = 0;
Connection conn = null;
PreparedStatement pstmt = null; // 겍체에 값을 하나씩넣어준다.
StringBuilder sql = new StringBuilder();
sql.append("INSERT INTO TBL_USER ");
sql.append(" (USER_ID, USER_PWD, USER_NAME, USER_EMAIL, STATUS, REG_DATE) ");
sql.append("VALUES" );
sql.append(" (?, ?, ?, ?, ?, SYSDATE) ");
try
{
int idx = 0;
conn = DBManager.getConnection();
pstmt = conn.prepareStatement(sql.toString());
pstmt.setString(++idx, user.getUserId());
pstmt.setString(++idx, user.getUserPwd());
pstmt.setString(++idx, user.getUserName());
pstmt.setString(++idx, user.getUserEmail());
pstmt.setString(++idx, user.getStatus());
count = pstmt.executeUpdate();
}
catch(Exception e)
{
System.out.println("[UserDao] userInsert SQLException");
}
finally
{
DBManager.close(pstmt, conn);
}
return count;
}
회원정보 수정 구현
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
<%@page import="com.yeji.model.User"%>
<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ page import="com.yeji.common.util.StringUtil" %>
<%@ page import="com.yeji.web.util.HttpUtil" %>
<%@ page import="org.apache.logging.log4j.Logger" %>
<%@ page import="org.apache.logging.log4j.LogManager" %>
<%@ page import="com.yeji.web.dao.UserDao" %>
<%@page import="com.yeji.model.User"%>
<!DOCTYPE html>
<html>
<head>
<%@ include file="/include/head.jsp" %>
<script type="text/javascript">
$(document).ready(function() {
$("#btnUpdate").on("click", function() {
// 모든 공백 체크 정규식
var emptCheck = /\s/g;
// 영문 대소문자, 숫자로만 이루어진 4~12자리 정규식
var idPwCheck = /^[a-zA-Z0-9]{4,12}$/;
if($.trim($("#userPwd1").val()).length <= 0)
{
alert("비밀번호를 입력하세요.");
$("#userPwd1").val("");
$("#userPwd1").focus();
return;
}
if (emptCheck.test($("#userPwd1").val()))
{
alert("비밀번호는 공백을 포함할 수 없습니다.");
$("#userPwd1").focus();
return;
}
if (!idPwCheck.test($("#userPwd1").val()))
{
alert("비밀번호는 영문 대소문자와 숫자로 4~12자리 입니다.");
$("#userPwd1").focus();
return;
}
if ($("#userPwd1").val() != $("#userPwd2").val())
{
alert("비밀번호가 일치하지 않습니다.");
$("#userPwd2").focus();
return;
}
if($.trim($("#userName").val()).length <= 0)
{
alert("사용자 이름을 입력하세요.");
$("#userName").val("");
$("#userName").focus();
return;
}
if(!fn_validateEmail($("#userEmail").val()))
{
alert("사용자 이메일 형식이 올바르지 않습니다.");
$("#userEmail").focus();
return;
}
$("#userPwd").val($("#userPwd1").val());
document.updateForm.submit();
});
});
function fn_validateEmail(value)
{
var emailReg = /^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/;
return emailReg.test(value);
}
</script>
</head>
<body>
<%@ include file="/include/navigation.jsp" %>
<div class="container">
<div class="row mt-5">
<h1>회원정보수정</h1>
</div>
<div class="row mt-2">
<div class="col-12">
<form name="updateForm" id="updateForm" action="/user/userProc.jsp" method="post">
<div class="form-group">
<label for="username">사용자 아이디</label>
</div>
<div class="form-group">
<label for="username">비밀번호</label>
<input type="password" class="form-control" id="userPwd1" name="userPwd1" value="" placeholder="비밀번호" maxlength="12" />
</div>
<div class="form-group">
<label for="username">비밀번호 확인</label>
<input type="password" class="form-control" id="userPwd2" name="userPwd2" value="" placeholder="비밀번호 확인" maxlength="12" />
</div>
<div class="form-group">
<label for="username">사용자 이름</label>
<input type="text" class="form-control" id="userName" name="userName" value="" placeholder="사용자 이름" maxlength="15" />
</div>
<div class="form-group">
<label for="username">사용자 이메일</label>
<input type="text" class="form-control" id="userEmail" name="userEmail" value="" placeholder="사용자 이메일" maxlength="30" />
</div>
<button type="button" id="btnUpdate" class="btn btn-primary">수정</button>
</form>
</div>
</div>
</div>
</body>
</html>
수정 값 가져오기 USERDao
쿠키의 아이디값을 이용해서 USER 클래스의 user정보를가져와야한다
그래서 userSelect문에 던져줄값을 쿠키아이디값으로하여 정보값들을 받아온다
만약 USER값이 없을때 즉 로그인이 안되어있지만 쿠키만있는겨우엔 쿠키를 지워주고 수정을 못하게 루트경로로 지정해준다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
Logger logger = LogManager.getLogger("/user/userUpdateForm.jsp");
HttpUtil.requestLogString(request, logger);
User user = null;
String cookieUserId = CookieUtil.getValue(request, "USER_ID");
if(!StringUtil.isEmpty(cookieUserId))
{
logger.debug("cookieUserId : " + cookieUserId);
UserDao userDao = new UserDao();
user = userDao.userSelect(cookieUserId);
if(user == null)
{
CookieUtil.deleteCookie(request, response, "USER_ID");
response.sendRedirect("/");
}
else
{
if(!StringUtil.equals(user.getStatus(), "Y")) {
CookieUtil.deleteCookie(request, response, "USER_ID");
user = null;
response.sendRedirect("/");
}
}
}
if(user != null)
{
value 값 지정하기
그후 user 가 null이 아닐때 html의 value값에 값들 넣어줘서 화면에 표시한다
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<div class="container">
<div class="row mt-5">
<h1>회원정보수정</h1>
</div>
<div class="row mt-2">
<div class="col-12">
<form name="updateForm" id="updateForm" action="/user/userProc.jsp" method="post">
<div class="form-group">
<label for="username">사용자 아이디</label>
: <%=user.getUserId()%>
</div>
<div class="form-group">
<label for="username">비밀번호</label>
<input type="password" class="form-control" id="userPwd1" name="userPwd1" value="<%=user.getUserPwd()%>" placeholder="비밀번호" maxlength="12" />
</div>
<div class="form-group">
<label for="username">비밀번호 확인</label>
<input type="password" class="form-control" id="userPwd2" name="userPwd2" value="<%=user.getUserPwd()%>" placeholder="비밀번호 확인" maxlength="12" />
</div>
<div class="form-group">
<label for="username">사용자 이름</label>
<input type="text" class="form-control" id="userName" name="userName" value="<%=user.getUserName()%>" placeholder="사용자 이름" maxlength="15" />
</div>
<div class="form-group">
<label for="username">사용자 이메일</label>
<input type="text" class="form-control" id="userEmail" name="userEmail" value="<%=user.getUserEmail()%>" placeholder="사용자 이메일" maxlength="30" />
</div>
<input type="hidden" id="userId" name="userId" value="<%=user.getUserId() %>" />
<input type="hidden" id="userPwd" name="userPwd" value="<%=user.getUserPwd() %>" />
<button type="button" id="btnUpdate" class="btn btn-primary">수정</button>
</form>
</div>
</div>
</div>
그후 form테그를 통하여 value값들을 넘겨준다 userProc으로 간다 여기서 주의해야할점은 히든값으로 id 와 password를 넘겨줬다는점
userDao의 userUpdate 메소드구현
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
public int userUpdate(User user)
{
int count = 0;
Connection conn = null;
PreparedStatement pstmt = null; // 겍체에 값을 하나씩넣어준다.
StringBuilder sql = new StringBuilder();
sql.append("UPDATE TBL_USER SET ");
sql.append(" USER_PWD = ?, ");
sql.append(" USER_NAME = ?, ");
sql.append(" USER_EMAIL = ? ");
sql.append(" WHERE ");
sql.append(" USER_ID = ? ");
try
{
int idx = 0;
conn = DBManager.getConnection();
pstmt = conn.prepareStatement(sql.toString()); // 겍체에 값을 하나씩넣어준다.
pstmt.setString(++idx, user.getUserPwd());
pstmt.setString(++idx, user.getUserName());
pstmt.setString(++idx, user.getUserEmail());
pstmt.setString(++idx, user.getUserId());
count = pstmt.executeUpdate();
}
catch(Exception e)
{
System.out.println("[UserDao] userUpdate SQLException");
}
finally
{
DBManager.close(pstmt, conn);
}
return count;
}
이것을 구현하면서 헷갈렸던점은 리턴값이 count가 될까생각을해보았다
userInsert 리턴값은 int형 userSelect는 리턴값은 user객체이고 userSelectId 리턴값은 int형 userUpdate는 리턴값은 int형
userSelect는 로그인시 계쩡정보를 가져와야하기때문에 user객체를 반환해주고 나머지는 INT형으로 표현해서 SQL성공시 0이상을 보내주는 방식을 표현한것이다
userProc 회원정보 수정 구현
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
else
{
//회원정보 수정
User user = userDao.userSelect(cookieUserId);
if(user != null)
{
if(StringUtil.equals(user.getUserId(), userId) &&
StringUtil.equals(user.getStatus(), "Y"))
{
user.setUserPwd(userPwd);
user.setUserName(userName);
user.setUserEmail(userEmail);
if(userDao.userUpdate(user) > 0)
{
msg = "회원 정보가 수정 되었습니다..";
redirectUrl = "/user/userUpdateForm.jsp";
}
else
{
msg = "회원 정보 수정중 오류가 발생했습니다.";
redirectUrl = "/user/userUpdateForm.jsp";
}
}
else
{
msg ="회원 정보중 값이 올바르지 않습니다.";
redirectUrl = "/user/userUpdateForm.jsp";
}
}
else
{
CookieUtil.deleteCookie(request, response, "USER_ID");
msg = "올바른 사용자가 아닙니다.";
redirectUrl ="/";
}
}
위의 IF문은 쿠키유저값이 없을때 회원가입을 하는 부분이고 쿠키유저값이 있다면 수정으로 가는 부분을 표현하였다
이렇게 회원정보등록 수정을 구현하였다
다음에는 게시판 리스트를 구현해보려한다