Spring Boot와 React를 활용한 기본 전자상거래 시스템 구축

시스템 아키텍처 및 기술 스택

이 전자상거래 시스템은 Spring Boot 백엔드와 React 프론트엔드로 구성된 모놀리식 아키텍처를 채택하였습니다. 데이터베이스는 MySQL을 사용하며, MyBatis-Plus를 ORM으로 활용합니다.

주요 기능 모듈 설계

사용자 관리 모듈

회원 가입, 로그인, 개인 정보 관리 기능을 제공합니다. Spring Security를 통한 인증 및 권한 관리가 구현됩니다.

상품 관리 모듈

상품 등록, 조회, 검색, 카테고리 분류 기능을 포함합니다. 상품 정보는 이미지, 가격, 상세 설명과 함께 저장됩니다.

장바구니 및 주문 처리 모듈

사용자가 상품을 장바구니에 추가하고 주문을 생성할 수 있습니다. 주문 상태 추적과 결제 처리 기능을 포함합니다.

데이터베이스 스키마 설계

-- 사용자 테이블
CREATE TABLE member (
    member_id BIGINT AUTO_INCREMENT PRIMARY KEY,
    login_id VARCHAR(255) UNIQUE NOT NULL,
    password_hash VARCHAR(512) NOT NULL,
    name VARCHAR(255),
    profile_image VARCHAR(1024),
    contact VARCHAR(255),
    member_role INT DEFAULT 0,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    is_deleted BOOLEAN DEFAULT FALSE
);

-- 상품 테이블  
CREATE TABLE product (
    product_id BIGINT AUTO_INCREMENT PRIMARY KEY,
    name VARCHAR(512) NOT NULL,
    price DECIMAL(10, 2) NOT NULL,
    image_url VARCHAR(1024),
    description TEXT,
    created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    updated_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP ON UPDATE CURRENT_TIMESTAMP,
    is_available BOOLEAN DEFAULT TRUE
);

-- 장바구니 테이블
CREATE TABLE cart_item (
    cart_item_id BIGINT AUTO_INCREMENT PRIMARY KEY,
    member_id BIGINT NOT NULL,
    product_id BIGINT NOT NULL,
    quantity INT DEFAULT 1,
    added_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
    FOREIGN KEY (member_id) REFERENCES member(member_id),
    FOREIGN KEY (product_id) REFERENCES product(product_id)
);

서비스 계층 구현 예시

@Service
@RequiredArgsConstructor
public class MemberService {
    
    private final MemberMapper memberMapper;
    private final PasswordEncoder passwordEncoder;
    
    public Long registerMember(String loginId, String password, String name) {
        if (memberMapper.existsByLoginId(loginId)) {
            throw new BusinessException("이미 존재하는 아이디입니다");
        }
        
        Member newMember = new Member();
        newMember.setLoginId(loginId);
        newMember.setPasswordHash(passwordEncoder.encode(password));
        newMember.setName(name);
        newMember.setMemberRole(0);
        
        memberMapper.insert(newMember);
        return newMember.getMemberId();
    }
    
    public Member authenticate(String loginId, String password) {
        Member member = memberMapper.selectByLoginId(loginId);
        if (member == null || !passwordEncoder.matches(password, member.getPasswordHash())) {
            throw new AuthenticationException("로그인 정보가 올바르지 않습니다");
        }
        return member;
    }
}

테스트 코드 예시

@SpringBootTest
class MemberServiceTest {
    
    @Autowired
    private MemberService memberService;
    
    @Test
    void 회원가입_및_로그인_테스트() {
        // 회원 가입
        Long memberId = memberService.registerMember(
            "testuser", "password123", "테스트사용자");
        assertThat(memberId).isPositive();
        
        // 로그인 검증
        Member member = memberService.authenticate("testuser", "password123");
        assertThat(member).isNotNull();
        assertThat(member.getName()).isEqualTo("테스트사용자");
    }
    
    @Test
    void 중복_아이디_회원가입_실패_테스트() {
        memberService.registerMember("duplicate", "pass123", "중복테스트");
        
        assertThatThrownBy(() -> 
            memberService.registerMember("duplicate", "pass456", "다른사용자"))
            .isInstanceOf(BusinessException.class)
            .hasMessageContaining("이미 존재하는 아이디입니다");
    }
}

프론트엔드 컴포넌트 구조

React와 Ant Design을 활용하여 모듈화된 컴포넌트 기반의 사용자 인터페이스를 구성합니다. 주요 컴포넌트로는 상품 목록, 장바구니, 주문 내역, 사용자 프로필 등이 있습니다.

태그: Spring Boot React MySQL MyBatis-Plus 전자상거래

9월 27일 09:16에 게시됨