모임 만들기 뷰

새 모임 만들기 뷰

• bootstrap 이용
• container 은 12개로 구성됨
• Breadcrumb

👁‍🗨 Breadcrumb

참고하기: https://getbootstrap.com/docs/4.0/components/breadcrumb/
실제로 이런 것을 사용하진 않았지만 폴더 구조를 표현하기 위해 비슷하게 표현하였음.

<div class="form-group col-md-3">

사이즈가 미듐일 때까지 3개의 컬럼을 유지하다가 , 그것보다 사이즈가 작아지면 전체 width가 작아지면 줄어들도록.. (bootstrap이 제공해줌)

DateTime 입력 포맷

package com.yuri.studyolle.event.form;



import com.yuri.studyolle.domain.EventType;


import lombok.Data;
import org.hibernate.validator.constraints.Length;
import org.springframework.format.annotation.DateTimeFormat;

import javax.validation.constraints.Min;
import javax.validation.constraints.NotBlank;
import java.time.LocalDateTime;


@Data //getter, setter 등등 .. 
public class EventForm {


    @NotBlank
    @Length(max = 50) //최대 50글자까지
    private String title;

    private String description;

    private EventType eventType = EventType.FCFS; //기본값으로 선착순을 선택함

    @DateTimeFormat(iso = DateTimeFormat.ISO.DATE_TIME)
    private LocalDateTime endEnrollmentDateTime; //언제까지 등록을 받을지 

    @DateTimeFormat(iso = DateTimeFormat.ISO.DATE_TIME)
    private LocalDateTime startDateTime;

    @DateTimeFormat(iso = DateTimeFormat.ISO.DATE_TIME)
    private LocalDateTime endDateTime;

    @Min(2)
    private Integer limitOfEnrollments = 2; //최소인원 (2인 이상의 모임)
}

기본적으로 iso form을 사용하고 있다.

enum ISO {

		/**
		 * The most common ISO Date Format {@code yyyy-MM-dd},
		 * e.g. "2000-10-31".
		 */
		DATE,

		/**
		 * The most common ISO Time Format {@code HH:mm:ss.SSSXXX},
		 * e.g. "01:30:00.000-05:00".
		 */
		TIME,

		/**
		 * The most common ISO DateTime Format {@code yyyy-MM-dd'T'HH:mm:ss.SSSXXX},
		 * e.g. "2000-10-31T01:30:00.000-05:00".
		 * <p>This is the default if no annotation value is specified.
		 */
		DATE_TIME,

		/**
		 * Indicates that no ISO-based format pattern should be applied.
		 */
		NONE
	}

뷰에서 선택한 날짜값들이 form 에 맞춰서 form 데이터로 들어오게 된다.

타임리프 뷰에서 enum 값 선택하는 폼 보여주기

<select th:field="*{eventType}" class="custom-select mr-sm-2" id="eventType"
aria-describedby="eventTypeHelp">
<option th:value="FCFS">선착순</option>
<option th:value="CONFIRMATIVE">관리자 확인</option>
</select>

💥 #fullDescription -> editor

src/main/resources/templates/fragments.html 수정

한 화면에 여러개의 에디터인데 그 여러개에 다 적용해야 할 때는 id를 사용하기 힘들다. (id를 다 공유해야 하니까) 그래서 class를 적용, editor를 클래스로 가지고 있는 영역에다가 썸머노트를 적용하도록 함.

출처 : 인프런 백기선님의 스프링과 JPA 기반 웹 애플리케이션 개발