메인 페이지 (index)

메인 페이지의 경우에는 부트스트랩 CSS의 슬라이더와 카드(상품 1개씩 넣는 기술) 등을 사용해서 메인 페이지를 작성하였습니다. 또한 header와 footer는 따로 JSP 파일을 하나씩 만들어서 include 시켜줘서 혹시라도 header에 새로운 메뉴를 추가할 경우 모든 페이지에서 추가하는 번거로움을 겪지 않아도 되도록 하였습니다.

회원 가입

gif 파일을 보시면 아시겠지만 로그인 버튼을 누른 후 로그인 창에서 회원 가입 버튼을 누르면 회원 가입 페이지로 이동하게 하였습니다. 그 후 정보를 입력하고 id 같은 경우에는 primary key 값이기 때문에 중복 검사를 거치도록 하였습니다. 일부러 이미 DB에 저장된 lee로 만들었고 중복 절차에서 이미 사용 중이라고 뜨게 하였습니다. 그 후 lee1로 아이디를 바꾼 후 domain을 입력하지 않고 회원 가입을 눌렀는데 이때 JS에서 유효성 검사를 거쳐 domain 부분에 값을 입력하라고 팝업창을 띄워줬습니다. 이렇게 모든 유효성 검사가 끝난 후에는 정상적으로 DB에 값이 저장되며 login 창으로 이동시켜주었습니다.

로그인 후 정보 수정

방금 생성한 lee1로 로그인 후 로그인 정보를 session 값으로 저장한 후에(이 작업은 servlet에서 진행하였습니다.) 정보 수정 탭에 들어가서 이메일의 값을 정보 수정 확인으로 바꿔보았습니다. 결과적으로 db에 잘 연동되어서 화면에 출력 되는 것을 볼 수 있습니다. gif 길이가 30초로 한정되어 있어서 따로 담지는 못했지만 정보 수정 후 빈 공간으로 제출하면 JS의 유효성 검사로 인해 작성하도록 하였으며 로그인할 때 비밀번호를 틀리게 입력할 때 DB와 연동하여 확인 후 제대로 작성하라는 팝업창과 함께 로그인에 실패하도록 하였습니다.

탈퇴하기

탈퇴 버튼을 누르면 비밀번호 확인 작업을 거칩니다. 올바른 비밀번호가 입력되면 servlet 및 dao 클래스에서 DELETE SQL 문 작업이 진행되며 탈퇴 후 다시 똑같은 아이디 비밀번호로 접근할 때 올바른 회원 정보를 입력하라는 팝업창이 뜨는 것을 볼 수 있습니다.

상품 조회

탈퇴하였기에 lee1로 새로 아이디를 만들어서 진행하였습니다.
상품 조회의 경우 배너의 All product 등의 메뉴를 누르면 해당 카테고리의 제품을 볼 수 있습니다. 본체를 누르면 본체 카테고리의, CPU를 누르면 CPU 카테고리의 제품만 보이도록 하였습니다. (사진에선 CPU에 본체가 있는데 제가 확인용으로 카테고리를 본체로 두었기에 그렇습니다.)
이때 상품 목록은 JSP 페이지에서 DB에 저장된 모든 상품의 개수만큼 TABLE을 반복문을 통해 만들도록 하였습니다.

장바구니

상품 페이지에 들어가서 찜하기 버튼을 누르면 장바구니에 상품이 이동되도록 하였습니다. 그 후 장바구니에서 상품을 삭제할 때 정상적으로 삭제되는 것을 보실 수 있습니다.

판매자 권한 부여

지금까지는 나의 정보, 장바구니, 로그아웃 기능만이 사용 가능했습니다. 그 이유는 권한이 소비자로 분류되었기 때문입니다. 하지만 db에서만 가입할 수 있는 관리자 계정(admin)으로 로그인하여 모든 회원 정보를 조회 후 소비자 계정이었던 lee1에 판매자 권한을 부여하면 lee1 계정에 원래는 없던 상품 등록 관련 기능이 생기는 것을 볼 수 있습니다.

상품 등록

이렇게 판매자 권한이 부여된 후에는 상품 등록 페이지에 들어갈 수 있습니다.
이렇게 원래 없던 기능이 보여지게 하려고 session에 admin(권한 값) 값을 저장해두고 JSP 파일에서 권한에 맞는 메뉴들을 보여주도록 하였습니다.
그 후 포맷에 맞게 정보를 입력 후 상품 등록을 하면 정상적으로 상품이 등록되는 것을 볼 수 있습니다.

상품 수정 및 삭제

상품 수정의 경우 해당 상품을 올린 판매자일 때만 상품 수정 메뉴가 보이도록 하였습니다. 상품 수정 메뉴를 입력 후 상품 내용을 수정하였고 수정된 내용이 제대로 적용되는 것을 보실 수 있습니다. 또한 상품 삭제 버튼을 누르게 되면 상품이 정상적으로 삭제되는 것 또한 보실 수 있습니다. 삭제나 수정의 경우에는 JSP 내에서 해당 회원이 올린 상품일 때만 메뉴가 보이도록 하였기에 따로 회원 정보 확인 절차는 넣지 않았습니다.

느낀 점

배운 내용을 갖고 제가 처음부터 끝까지 해본 첫 프로젝트였습니다. 해보면서 처음에는 10가지의 기능을 생각했다면 하다 보니 시간이랑 기술적 한계로 인해 5~7정도 밖에 못 하지 않았나 싶습니다. 이유는 아마 프로젝트를 많이 해보지 못했기에 제 역량이랑 기간 등을 기반으로 한 목표 기간 계산에서 오차가 나온 거 같습니다. 다음 프로젝트를 진행하면 이 점 참고하여 좀 더 나아진 방향으로 진행하고자 합니다.

또한 얻은 것 중 가장 큰 것은 프로젝트를 진행하면서 재미가 있었다는 것입니다. 주제는 딱히 상관없이 무언가 홈페이지를 만들고 데이터를 입력, 삭제하는 과정 자체에 흥미를 느낄 수 있었습니다. 다음에는 좀 더 나은 퀄리티의 제품을 Spring을 기반으로 하여 만들어보고자 합니다.

출처