728x90
반응형
settings/profile
<!DOCTYPE html>
<!-- 프로필 수정 뷰 -> profile form을 만들어야 한다. 닉네임 이메일 비밀번호-->
<!-- 타임리프 네임스페이스 설정-->
<html lang="en" xmlns:th="http://www.thymeleaf.org"
xmlns:sec="http://www.thymeleaf.org/extras/spring-security">
<!-- replace를 이용해 교체-->
<head th:replace="fragments.html :: head">
</head>
<body class="bg-light">
<div th:replace="fragments.html :: main-nav"></div>
<!-- profile html -> 그리드 시스템 이용 row를 column 12개로 나눈 상태-->
<div class="container">
<!-- top 마진 5만큼-->
<div class="row mt-5 justify-content-center">
<!-- 아바타-->
<div class="col-2">
<!--프로필, 패스워드, 알림, 관심주제, 활동지역 계정 메뉴 -> fragment 이용-->
<!-- profile이 선택된 상태의 뷰 -->
<div
th:replace="fragments.html :: settings-menu(currentMenu='profile')"></div>
</div>
<!-- 폼을 수정할 수 있는 프로필화면을 보면서 직접 작성 -->
<div class="col-8">
<!-- row마다 설정 -->
<div class="row">
<h2 class="col-sm-12" th:text=${account.nickname}">whiteship</h2>
</div>
<!-- 12중에 6/6으로 나눠서 프로필 이미지 수정 폼 만들기-->
<div class="row mt-3" th:fragment="profile-form">
<form action="@{/settings/profile}" th:object="${profile}"
method="post" novalidate>
<div class="form-group">
<label for="bio">한 줄 소개</label> <input id="bio" type="text"
th:field="*{bio}" class="form-control"
placeholder="간략한 소개를 부탁합니다." aria-describedby="bioHelp" required>
<small id="bioHelp" class="form-text text-muted"> 길지 않게
35자 이내로 입력하세요. </small> <small class="form-text text-danger"
th:if="${#fields.hasErrors('bio')}" th:errors="*{bio}">
조금 길어요. </small>
</div>
<div class="form-group">
<label for="url">링크</label> <input id="url" type="url"
th:field="*{url}" class="form-control"
placeholder="http://studyolle.com" aria-describedby="urlHelp"
required> <small id="urlHelp"
class="form-text text-muted"> 블로그, 유튜브 또는 포트폴리오나 좋아하는 웹
사이트 등 본인을 표현할 수 있는 링크를 추가하세요. </small> <small
class="form-text text-danger"
th:if="${#fields.hasErrors('url')}" th:errors="*{url}">
올바른 URL이 아닙니다. 예시처럼 입력해 주세요. </small>
</div>
<div class="form-group">
<label for="company">직업</label> <input id="company" type="text"
th:field="*{occupation}" class="form-control"
placeholder="어떤 일을 하고 계신가요?" aria-describedby="occupationHelp"
required> <small id="occupationHelp"
class="form-text text-muted"> 개발자? 매니저? 취준생? 대표님? </small>
</div>
<div class="form-group">
<label for="location">활동 지역</label> <input id="location"
type="text" th:field="*{location}" class="form-control"
placeholder="Redmond, WA, USA" aria-describedby="locationdHelp"
required> <small id="locationdHelp"
class="form-text text-muted"> 주요 활동(사는 곳이나 직장을 다니는 곳 또는
놀러 다니는 곳) 지역의 도시 이름을 알려주세요. </small>
</div>
<div class="form-group">
<input id="profileImage" type="hidden" th:field="*{profileImage}"
class="form-control" />
</div>
<div class="form-group">
<button class="btn btn-primary btn-block" type="submit"
aria-describedby="submitHelp">수정하기</button>
</div>
</form>
</div>
</div>
</div>
</body>
</html>
fragment의 메뉴부분
<!-- 메뉴 -->
<div th:fragment="study-settings-menu (currentMenu)" class="list-group">
<!-- currentMenu에 따라 활성화할 메뉴 보여줌 -->
<a class="list-group-item list-group-item-action" th:classappend="${currentMenu == 'description'}? active"
href="#" th:href="@{'/study/' + ${study.path} + '/settings/description'}">소개</a>
<a class="list-group-item list-group-item-action" th:classappend="${currentMenu == 'image'}? active"
href="#" th:href="@{'/study/' + ${study.path} + '/settings/banner'}">배너 이미지</a>
<a class="list-group-item list-group-item-action" th:classappend="${currentMenu == 'tags'}? active"
href="#" th:href="@{'/study/' + ${study.path} + '/settings/tags'}">스터디 주제</a>
<a class="list-group-item list-group-item-action" th:classappend="${currentMenu == 'zones'}? active"
href="#" th:href="@{'/study/' + ${study.path} + '/settings/zones'}">활동 지역</a>
<a class="list-group-item list-group-item-action list-group-item-danger" th:classappend="${currentMenu == 'study'}? active"
href="#" th:href="@{'/study/' + ${study.path} + '/settings/study'}">스터디</a>
</div>728x90
반응형
'Server Programming > Spring Boot Full-Stack Programming' 카테고리의 다른 글
| [스프링 풀스택 클론 코딩] 엔티티 상태에 따른 DB 반영 (0) | 2022.09.01 |
|---|---|
| [스프링 풀스택 클론 코딩 - 계정 설정] (2-2) 프로필 수정 처리 (0) | 2022.09.01 |
| [스프링 풀스택 클론 코딩] Open EntityManager (또는 Session) In View 필터 (0) | 2022.09.01 |
| [스프링 풀스택 클론 코딩 - 회원가입] (1-20) 가입 일자 데이터의 변경이 DB에 반영되지 않는 버그 (0) | 2022.09.01 |
| [스프링 풀스택 클론 코딩 - 회원가입] (1-19) 로그인 기억하기 (0) | 2022.08.30 |