728x90

Tool : ERDCloud 

https://www.erdcloud.com/

 

ERDCloud

Draw ERD with your team members. All states are shared in real time. And it's FREE. Database modeling tool.

www.erdcloud.com

 

 

프로젝트 전체 테이블

 

 

프로덕트 관련 테이블 

 

Product 테이블 : 제품의 기본 모델에 관한 정보를 담은 테이블

Option 테이블 : 제품이 가질 수 있는 옵션의 정보를 담은 테이블

OptionSet 테이블 : 제품에 옵션들의 정보를 포함하여 하나의 상품으로 간주되어 카트와 주문에 포함될 테이블

Category 테이블 : 카테고리 정보를 담은 테이블

CategorySet 테이블 : 카테고리와 프로덕트를 연결해주는 테이블 

Interest, RecentView 테이블 : 관심상품, 최근 본 상품 테이블 

 

-카테고리 테이블 

카테고리 테이블은 카테고리 이름, 그리고 카테고리 테이블을 셀프 참조하여 부모 카테고리를 가질 수 있어

계층형으로 구성할 수 있게 하였고 

카테고리와 옵션셋 테이블을 다대다 맵핑하여 

하나의 옵션셋은 여러개의 카테고리를 가질 수 있게 하였다. 

 

@Data

@Builder

@AllArgsConstructor

@NoArgsConstructor

@Entity

public class Category {//셀프 참조하는 오너테이블, 카테고리셋과는 종속테이블

@Id

@GeneratedValue(strategy = GenerationType.SEQUENCE)

private Long id; //pk

private String name; //카테고리 이름

 

@JoinColumn(name="parent", nullable = true)

@ManyToOne

@ToString.Exclude

private Category parent; //부모 카테고리

 

@OneToMany(mappedBy = "parent")

@Builder.Default

@ToString.Exclude

private List<Category> childTypes= new ArrayList(); //자식 카테고리들

 

@OneToMany(mappedBy = "category")

@Builder.Default

@ToString.Exclude

private List<CategorySet> categorySets = new ArrayList<>();

//다대다 맵핑을 위한 categorySet과 관계 설정

}

 

-프로덕트 테이블 

public class Product extends BaseEntity {//제품의 기본 모델 정보

@Id

@GeneratedValue(strategy = GenerationType.SEQUENCE)

private Long id;//pk

private String name;//제품명

private String brand;//브랜드

private Integer price;//기본 가격

private String descImage;//설명 이미지 파일

private String prevImage;//디테일이미지

private String img;//제품 이미지

 

@OneToMany(mappedBy = "product",fetch = FetchType.EAGER)

@Builder.Default

private List<CategorySet> categorySets = new ArrayList<>();

//하나의 제품은 부모카테고리, 자식카테고리 여러개를 가질 수 있다.

//예를 들어, 컴퓨터, 일체형PC, 브랜드PC ...

 

@ToString.Exclude

@OneToMany(mappedBy = "product",cascade = {CascadeType.REMOVE,CascadeType.PERSIST},orphanRemoval = true)

@Builder.Default

private List<OptionSet> optionSets = new ArrayList<>();

 

}

여기서 Product가 상속받은 BaseEntity는 createTime과 updateTime을 가진 엔터티로 

@MappedSuperclass

public class BaseEntity {

@CreationTimestamp

@Column(updatable = false)

@ToString.Exclude

private LocalDateTime createTime;//데이터 생성시간

@UpdateTimestamp

private LocalDateTime updateTime;//데이터 갱신시간

}

데이터의 관리를 위해 필요한 기본적인 정보를 가지는 superclass로 다른 엔터티들이 상속받아 사용할 수 있게 

@MappedSuperclass 어노테이션을 사용해 테이블로 생성되지 않고 상속하는 역할만 할 수 있게 하였다. 

 

 

프로덕트는 제품의 기본 모델에 관한 정보를 담은 테이블로 제조사, 제품 이미지, 기본 가격 등에 관한 정보를 담고 있다. 

프로덕트 테이블에 대해 고민을 많이 했는데 

컴퓨터와 같이 하나의 모델에 대해서도 다양한 옵션이 선택될 수 있고 선택된 옵션에 따라 가격이 변동 될 수 있기에 

기본 모델을 product로 하고 거기에 options을 더한 optionset을 하나의 완전한 상품으로 구상하였다. 

 

그래서 cart, orderitem, 관심상품, 최근 본 상품 등에 들어갈 제품은 product가 아닌 optionset이 되고, 

optionset이 재고, 판매량, 조회수와 같은 정보를 갖게 된다. 

실제로 제품 상세 페이지도 product가 아닌 optionset의 상세 페이지가 된다. 

 

 

public class Options {//옵션셋FK를 가지는 오너테이블

@Id

@GeneratedValue(strategy = GenerationType.SEQUENCE)

private Long id;//pk

 

private String name; //옵션명

private String value; //옵션값

private Integer extraPrice;

//해당 옵션이 옵션셋에 등록될 경우 프로덕트의 총 가격에 추가금

@ManyToOne(fetch = FetchType.EAGER)

@JoinColumn(name = "optionSetId")

@ToString.Exclude

private OptionSet optionSet;//옵션셋 FK

}

 

여기서 옵션과 옵션셋 테이블을 한번 더 분리한 이유는 

컴퓨터만을 product의 대상으로 삼고 있지 않고 다양한 전자제품을 대상으로 하기 때문에 

options가 셀 수 없이 많아질 수밖에 없고 만약 optionset에 그 많은 options들을 nullable 컬럼으로 만들어 두는 것은 매우 비효율적이라고 생각했다. 

그래서 옵션 설정에 자유도를 높이기 위해 options 테이블을 분리하였다. 

 

옵션셋에 totalPrice를 두는 것에 관해서 많은 고민을 했었다. 

원래는 기본 product의 price에 options의 extraPrice들을 모두 더해 나온 값을 표시하면 된다고 생각했는데 

제품 리스트를 조회할 때마다

매 상품마다 options를 모두 뽑아 가격 연산하는 과정을 거치는 작업은 올바른 작업은 아니라고 판단하였고 

옵션셋에 총가격 컬럼을 하나 추가하는 편이 훨씬 경제적이라고 판단하여

제품을 insert 하는 과정에서 extraPrice들을 모두 더해 optionset의 totalPrice의 컬럼에 값을 대입해주기로 하였다. 

 

 

- 관심상품, 최근 본 상품 

관심상품과 최근 본 상품은 멤버와 옵션셋을 참조키로 가진다. 그리고 최근 본 상품에는 30일 이후 자동으로 삭제되는 서비스를 구현한다. 

 

@Entity

@Data

@AllArgsConstructor

@NoArgsConstructor

@Builder

@EqualsAndHashCode(callSuper = true)

@ToString(callSuper = true)

@Table(name = "interest", uniqueConstraints = @UniqueConstraint(columnNames = {"memberId","optionSetId"}))

public class Interest extends BaseEntity{//관심상품

//유저와 옵션셋을 이어주는 중간테이블

@Id

@GeneratedValue(strategy = GenerationType.SEQUENCE)

private Long id;//pk

 

@JoinColumn(name = "memberId")

@ManyToOne

private Member member;// 유저FK

 

@JoinColumn(name = "optionSetId")

@ManyToOne

@ToString.Exclude

private OptionSet optionSet;// 옵션셋FK

 

}

 

관심상품과 최근 본 상품은 멤버와 옵션셋의 복합키로써 유니크 제약조건을 가져야한다.

728x90

프로젝트 기간: 2023 - 10 - 16 ~ 2023 - 11 - 11

레퍼런스 : 다나와 https://www.danawa.com/

 

스마트한 쇼핑검색, 다나와! : 가격비교 사이트

가격비교 사이트 - 온라인 쇼핑몰, 소셜커머스 전 상품 정보 가격비교 사이트, 비교하면 다나와

www.danawa.com

인원 : 8명

GitHub 주소 https://github.com/choliea/danaga

 

GitHub - choliea/danaga: final project Danaga shopping mall By team.Avengers 2023-10-16

final project Danaga shopping mall By team.Avengers 2023-10-16 - GitHub - choliea/danaga: final project Danaga shopping mall By team.Avengers 2023-10-16

github.com

파트 : 프로덕트 

사용 언어 : 자바, 자바스크립트

 

 

사용 기술 스택 : 

스프링 부트를 활용한 쇼핑몰 웹 사이트 제작 프로젝트 

 

ERD

 

 

Product part Table

 

 

https://youarethebestcoding.tistory.com/128

 

다나가 쇼핑몰 프로젝트 ER diagram과 Entity

Tool : ERDCloud https://www.erdcloud.com/ ERDCloud Draw ERD with your team members. All states are shared in real time. And it's FREE. Database modeling tool. www.erdcloud.com 프로젝트 전체 테이블 프로덕트 관련 테이블 Product 테이블 :

youarethebestcoding.tistory.com

 

 

구현한 기능 및 서비스 

카테고리 선택시 해당 카테고리의 제품들이 가지고 있는 스펙들을 불러와 조건 검색을 할 수 있다. 

카테고리 선택, 옵션 선택, 정렬 기준 선택, 검색 버튼 클릭시마다 검색하여 제품들을 보여준다. 

 

옵션 선택하여 조건 검색 

같은 종류의 조건에 대하여는 합연산, 다른 종류의 조건에 대하여는 곱연산 적용

 

 

예를들어, 운영체제의 윈도우11과 윈동우10을 동시에 선택하면 

윈도우11 또는 윈도우10인 제품을 검색하고 

운영체제의 윈도우11, 화면비율 16:9 를 선택하면

윈도우11이면서 화면비율 16:9인 제품을 검색한다. 

 

제품명 검색은 대소문자 구분하지 않고 검색한다. 

 

https://youarethebestcoding.tistory.com/130

 

스프링부트 프로젝트 JPA 활용

JPA에 대해서 다룬 포스트가 있다. https://youarethebestcoding.tistory.com/115 Spring Data JPA begins http://projects.spring.io/spring-data/ Spring Data Spring Data’s mission is to provide a familiar and consistent, Spring-based programming mod

youarethebestcoding.tistory.com

 

 

페이징은 무한스크롤API를 이용하였다. 

https://youarethebestcoding.tistory.com/133

 

Intersection Observer 무한스크롤 구현하기

#무한스크롤 기존 페이징 방식에서 벗어나 최근 떠오르는 페이징 방식이다. 특정 개수만큼만 로딩하고 특정 뷰포트를 넘어가면 다음 아이템을 로딩하는 방식으로 비동기 방식으로 html을 누적

youarethebestcoding.tistory.com

 

 

 

 

프로덕트 검색 전체 시연

 

제품 상세페이지 

제품 상세페이지에서는 해당 제품과 동일한 모델의 다른 옵션으로 구성된 제품을 선택할 수 있고

선택시 해당 제품의 상세 페이지로 전환된다.

 

DESCRIPTION 탭에서는 제품의 설명 이미지 파일을 로딩하고 

SPECIFICAION 탭에서는 제품의 상세 스펙을 표로 보여준다. 

 

로그인 상태에서 제품의 하트를 클릭하면 Toast 메세지와 함께 관심상품에 등록된다. 

 

제품 상세 페이지에 들어가본 제품은 최근 본 상품에 등록되고 

로그인 하지 않은 상태에서 본 제품도 로그인 후 최근 본 상품에 등록되게 된다. 

 

최근 본 상품은 등록된지 30일이 지나는 시점에 자동으로 삭제된다. 

 

 

배포 

AWS CLI를 이용해 elasticbeanstalk 환경을 구축하고 github action을 이용해 

 

무중단 자동 배포 환경 구축 

배포된 사이트 index 페이지 

 

https://youarethebestcoding.tistory.com/134

 

스프링부트 프로젝트 CI/CD 환경 구축 (with.AWS + GIthub Actions)

이번 프로젝트에서는 AWS의 ElasticBeanstalk 을 이용해 application을 배포하고 github actions를 이용해 aws에 무중단 배포할 수 있는 환경을 구축하였다. AWS의 서비스에 관해서는 이미 다룬 적이 있으니 생

youarethebestcoding.tistory.com

 

 

 

 

프로젝트 관련 포스트 

https://youarethebestcoding.tistory.com/129

 

스프링부트 프로젝트 계층에 따른 데이터 전송 형태

클라이언트는 브라우저에서 요청을 하고 응답을 받는다. 이때 요청은 서버에서 필요한 데이터를 담아야하고 서버측에서 응답할땐 클라이언트에게 공개할 데이터만 담아서 보내면 된다. 일반

youarethebestcoding.tistory.com

 

 

https://youarethebestcoding.tistory.com/131 

 

스프링부트 프로젝트 서비스와 예외처리

이번 프로젝트를 하면서 예외 처리에 대해서 고민 많았고 실제로 작업하면서 몇번씩 수정을 거치게 되었다. 일단 예외가 발생했을 때 발생원인이 명확한 경우 구체적인 예외 사유를 알 수 있게

youarethebestcoding.tistory.com

 

https://youarethebestcoding.tistory.com/132

 

Thymeleaf Layout

#타임리프 레이아웃 코드의 재사용이 가능한 부분을 템플릿화할 수 있게 도와주는 타임리프 라이브러리 #레이아웃을 사용하는 이유 타임리프의 insert나 replace 기능은 많이 사용하지만 이 기능에

youarethebestcoding.tistory.com

 

+ Recent posts