![[스프링부트] 13. Storev2 : 화면 Layout](https://image.inblog.dev?url=https%3A%2F%2Fsource.inblog.dev%2Ffeatured_image%2F2025-03-28T08%3A39%3A36.897Z-831af4ba-7fb6-4cd5-a6f6-564b2597e32f&w=2048&q=75)
1. 회원 관련
- 인증이 관련된 부분이므로 bankv1 예제 참고할 것
- bootstrap 5 문법 확인하기
1. 메인 화면 & header
- header에 유저 로그인 / 로그아웃 여부에 따른 메뉴 표시 구분 필요
- 메인 화면에 로그인이 되었으면 사용자 이름 표시하기
2. 회원가입 페이지
- 아이디, 비밀번호, 사용자 이름 입력 (무조건 채워서 넣을 수 있게)
- 사용자 이름이 중복되면 가입 불가능하게끔 break 추가 (username = unique)
- 가입되면 메인 화면 이동
3. 로그인 페이지
- 사용자 아이디, 비밀번호를 user 비밀번호와 비교
- 로그인되었으면 (아이디, 비밀번호 일치 시) session에 user 정보 저장하여 이동 (인증)
- Cookie 활용
2. 상품 관련
- 이후 페이지들은 storev1에서 작성한 부분들이므로 해당 예제 확인할 것
- Req, Resp 작동 원리 파악 후 알맞은 DTO 작성 필요
1. 상품 목록
- 상품의 모든 목록 확인 (order by id desc)
- 상세보기 클릭 시 해당 상품의 id를 활용한 상세 정보 표시
2. 상세 화면
- 수정, 삭제의 경우 해당 상품의 id를 가져가서 form에서 사용할 수 있게끔 할 것
- 구매의 경우 현재 로그인된 유저의 세션 정보를 활용할 것
3. 상품 등록
- 상품명, 재고, 가격을 입력하면 DB에 상품이 등록되고, 이를 확인할 수 있도록 리다이렉션 필요
- Write 동작이므로 Transactional 필요
4. 상품 수정
- 상품의 id를 이용하여 해당 상품의 상세정보 불러오기
- 정보 수정 후 버튼 클릭 시 DB에 정보 수정 반영 후 상세보기 화면으로 리다이렉션
- Write 동작이므로 Transactional 필요
3. 구매 관련
- 유저 id와 상품 id를 동시에 받아서 작성해야 하므로 인증 유저 정보 (세션), 주문한 상품의 id를 전부 받아올 수 있어야 함
- join을 활용해서 해당 정보만 뽑아오는 Projection
- 최신 주문부터 조회 (order by id desc)
- 상품의 id를 조회해서 join 후 상품명을 받아올 수 있도록 DTO 제작 및 projection 필요
- DTO를 새로 만들어서 받아와야 하므로 직접 Mapping
Share article