SpringBoot와 Next.js를 사용하여 디자인 커스텀 기능 개발하기

요약

- 디자인 생성API를 개발하여 버튼을 클릭하면 카드의 디자인을 커스텀하는 기능을 설명합니다. 

 

 

디자인 생성 API

 

DesignController

@Slf4j
@RestController
@RequestMapping("/api/v1/design")
@RequiredArgsConstructor
public class DesignController {

    private final DesignService designService;
    private static final Long DEFAULT_MEMBER_ID = 3L;

    @PostMapping
    public ResponseEntity<Void> createDesign(@RequestBody DesignCreateRequest request) {
        designService.createDesign(DEFAULT_MEMBER_ID, request);
        return ResponseEntity.status(HttpStatus.CREATED).build();
    }
}

DesignCreateRequest에는 color와 Character가 들어있습니다. 

 

프론트 화면

배경색은 YELLOW, 캐릭터는 LALAPING을 클릭해 줍니다.

 

색깔 버튼을 누르고 확인을 누르면 색깔이 DB에 저장됩니다.

 

DesignService

public interface DesignService {
    void createDesign(Long memberId, DesignCreateRequest request);
}

디자인을 생성할 때, request(색깔, 캐릭터)가 요구되고 memberId에 해당하는 곳에 저장할 것이기때문에 memberId와 request 파라미터를 받아줍니다.

 

DesignServiceImpl

@Service
@Transactional(readOnly = true)
@RequiredArgsConstructor
@Slf4j
public class DesignServiceImpl implements DesignService {

    private final DesignRepository designRepository;
    private final ChildRepository childRepository;

    @Override
    @Transactional
    public void createDesign(Long memberId, DesignCreateRequest request) {
        Child child = getChild(memberId);

        validateCardState(child);
        child.updateCardState(CardState.READY);

        Design newDesign = Design.create(child, request.getColor(), request.getCharacter());
        designRepository.save(newDesign);
    }

    private static void validateCardState(Child child) {
        if(!child.getCardState().equals(CardState.NONE)) throw new WekidsException(ErrorCode.INVALID_CARD_STATE, "현재 카드 상태: " + child.getCardState() + "변경하려는 카드 상태: " + CardState.READY);
    }

    private Child getChild(Long memberId) {
        return childRepository.findById(memberId).orElseThrow(() -> new WekidsException(ErrorCode.MEMBER_NOT_FOUND, "아이디: " + memberId));
    }
}

Child child = getChild(memberId);

-> memberId를 통해 Child Entity를 가져옵니다.

validateCardState(child);

카드의 상태가 None이 아니면 예외처리, None이면 READY를 저장해줍니다. 카드상태가 CREATED는 생성이 이미 되었다는 뜻이고, NONE은 카드가 없다는 것, READY는 디자인 커스텀을 만들 준비가 되었다는 뜻 입니다.

Design newDesign = Design.create(child, request.getColor(), request.getCharacter());

new Design이라는 변수에 필요한 값들을 저장하고

designRepository.save(newDesign);

designRepository를 통해 DB에 저장해줍니다.

 

 

트러블 슈팅

#1 MapsId

Design Entity에서 MapId어노테이션에 괄호 열고 member와 mapping을 시켜주려 했으나 안되었습니다.
위에처럼 코드처럼 작성하면 member와 mapping할 수 있다고 합니다.

 

#2 enum type DB에 저장 안됨

enun type은 db에 저장되지 않는 상황이 발생했습니다. 그래서 Enumerated어노테이션을 사용해 문자열로 저장되도록 해결했습니다.

최종고민의 끝, 어떻게 스프링을 학습해야하지?

모든 코드는 외우기보단 이해에 초점을 두어 기록하는 습관을 가지려합니다. 기록하고, 여러번 반복해서 보는게 가장 도움이 되는 것 같습니다. Enumerated라는 어노테이션을 잊어버리더라도 괜찮으니 다음 프로젝트를 할때 enum타입은 문자열로 저장이 안될텐데, 혹은 어떤 어노테이션을 사용해야할거야. 라는 사고정도는 가지고 가야한다 생각합니다.

https://github.com/AnChanUng/WeKids-BE

GitHub - AnChanUng/WeKids-BE: 💰우리아이의 경제 습관 형성 BackEnd