feature/196 사용자 닉네임 설정에 제한사항을 건다.

front/src/components/member/MemberSidebar.vue

@@ -1,16 +1,16 @@
 <template>
   <div>
     <v-navigation-drawer v-model="drawer" absolute temporary class="drawer">
-      <v-icon @click="hideSidebar" class="float-right ma-4">
+      <v-icon @click="hideSidebar" class="modal-close-btn">
         mdi-window-close
       </v-icon>
 
-      <div class="ma-5 mt-10 mb-5" @click="login">
+      <div class="mx-3 mt-10 mb-4" @click="login">
         <v-avatar>
           <v-icon size="36">mdi-account-circle</v-icon>
         </v-avatar>
-        <span class="mx-3 font-weight-bold">
-          {{ member.nickname }}
+        <span class="font-weight-bold">
+          {{ shortenedNickname }} {{ nicknameTail }}
         </span>
       </div>
 
@@ -53,6 +53,7 @@ const LOGOUT_SUCCESS_MESSAGE = "성공적으로 로그아웃 되었습니다.";
 const FAILED_TO_DELETE_MEMBER_MESSAGE =
   "탈퇴에 실패했습니다. 다시 요청해주세요.";
 const DELETE_MEMBER_SUCCESS = "성공적으로 탈퇴를 완료했습니다.";
+const MAX_NICKNAME_LENGTH = 11;
 
 export default {
   name: "MemberSidebar",
@@ -83,6 +84,15 @@ export default {
     isGuest() {
       return this.$store.getters["member/isGuest"];
     },
+    shortenedNickname() {
+      return Array.from(this.member.nickname)
+        .slice(0, MAX_NICKNAME_LENGTH)
+        .join("")
+        .trim();
+    },
+    nicknameTail() {
+      return this.member.nickname.length > MAX_NICKNAME_LENGTH ? "..." : "";
+    },
     drawer: {
       get() {
         return this.$store.getters["memberSidebar/visible"];
@@ -149,4 +159,11 @@ export default {
 .drawer {
   z-index: 9999;
 }
+
+.modal-close-btn {
+  position: absolute;
+  top: 12px;
+  right: 12px;
+  z-index: 1;
+}
 </style>

front/src/components/member/MemberUpdateModal.vue

@@ -6,7 +6,10 @@
         <VTextField
           label="새 닉네임을 입력하세요."
           color="grey darken-2"
+          maxlength="15"
+          :counter="15"
           v-model="newNickname"
+          :rules="Object.values(rules)"
           @keypress.enter="updateMember"
         />
         <div class="button-box">
@@ -19,7 +22,7 @@
           </v-btn>
           <v-btn
             text
-            :disabled="nicknameNotChanged()"
+            :disabled="isUpdateDisabled"
             class="mb-2 text-subtitle-1 font-weight-bold amber--text text--accent-4"
             @click="updateMember"
           >
@@ -35,18 +38,31 @@
 <script>
 import api from "@/api/member";
 
+const NICKNAME_REGEX = "^[a-zA-Zㄱ-ㅎㅏ-ㅣ가-힣0-9]+$";
+
 export default {
-  name: "PostCreateModal",
+  name: "MemberUpdateModal",
   data() {
     return {
       rendered: false,
       newNickname: "",
+      rules: {
+        regexViolation: (newVal) =>
+          !this.violateRegex(newVal) ||
+          "닉네임은 숫자/한글/영어로 이루어져야 합니다.",
+      },
     };
   },
   computed: {
     member() {
       return this.$store.getters["member/getMember"];
     },
+    isUpdateDisabled() {
+      return (
+        this.isValueSame(this.member.nickname, this.newNickname) ||
+        this.violateRegex(this.newNickname)
+      );
+    },
   },
   mounted() {
     this.rendered = true;
@@ -66,12 +82,15 @@ export default {
     closeModal() {
       this.$emit("close");
     },
-    nicknameNotChanged() {
-      return this.member.nickname === this.newNickname;
-    },
     bounceOut() {
       this.rendered = false;
     },
+    isValueSame(oldVal, newVal) {
+      return oldVal === newVal;
+    },
+    violateRegex(val) {
+      return !val.match(NICKNAME_REGEX);
+    },
   },
 };
 </script>

front/src/components/post/PostModal.vue

@@ -3,7 +3,7 @@
     <DoranAppBar />
     <div v-if="existMember" class="pa-4">
       <div class="mb-3">
-        <v-icon x-large class="mr-3">mdi-account-circle</v-icon>
+        <v-icon x-large class="mr-2">mdi-account-circle</v-icon>
         <span class="font-weight-bold">{{ post.author.nickname }}</span>
         <div class="float-right mt-2">
           {{ postDate }}
@@ -85,10 +85,7 @@ export default {
       return localStorage.getItem("accessToken");
     },
     isMine() {
-      return (
-        this.post.author.id ===
-        this.$store.getters["member/getMember"].id
-      );
+      return this.post.author.id === this.$store.getters["member/getMember"].id;
     },
     post: {
       get() {

front/src/components/timeline/PostItem.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="mx-4 my-3" @click="openPostModal">
     <div class="my-2">
-      <v-icon large class="mr-3">mdi-account-circle</v-icon>
+      <v-icon large class="mr-2">mdi-account-circle</v-icon>
       <span class="font-weight-bold">{{ post.author.nickname }}</span>
       <div class="float-right mt-1">{{ postDate }}</div>
     </div>

src/main/java/com/grasshouse/dorandoran/member/domain/Member.java

@@ -14,10 +14,12 @@
 import javax.persistence.Id;
 import javax.persistence.OneToMany;
 import javax.validation.constraints.NotBlank;
+import javax.validation.constraints.Pattern;
 import lombok.AllArgsConstructor;
 import lombok.Builder;
 import lombok.Getter;
 import lombok.NoArgsConstructor;
+import org.hibernate.validator.constraints.Length;
 import org.springframework.data.annotation.CreatedDate;
 import org.springframework.data.annotation.LastModifiedDate;
 import org.springframework.data.jpa.domain.support.AuditingEntityListener;
@@ -34,6 +36,8 @@ public class Member {
     @GeneratedValue(strategy = GenerationType.IDENTITY)
     private Long id;
 
+    @Length(max = 15, message = "닉네임은 15자를 초과할 수 없습니다.")
+    @Pattern(regexp = "^[a-zA-Zㄱ-ㅎㅏ-ㅣ가-힣0-9]+$", message = "닉네임은 한글/영어/숫자로만 이루어져야 합니다.")
     @NotBlank(message = "닉네임은 비어 있을 수 없습니다.")
     @Column(unique = true, nullable = false)
     private String nickname;

src/test/java/com/grasshouse/dorandoran/member/repository/MemberRepositoryTest.java

@@ -0,0 +1,44 @@
+package com.grasshouse.dorandoran.member.repository;
+
+import static org.assertj.core.api.Assertions.assertThat;
+import static org.assertj.core.api.Assertions.assertThatThrownBy;
+
+import com.grasshouse.dorandoran.member.domain.Member;
+import javax.validation.ConstraintViolationException;
+import org.junit.jupiter.api.AfterEach;
+import org.junit.jupiter.api.DisplayName;
+import org.junit.jupiter.params.ParameterizedTest;
+import org.junit.jupiter.params.provider.ValueSource;
+import org.springframework.beans.factory.annotation.Autowired;
+import org.springframework.boot.test.context.SpringBootTest;
+
+@SpringBootTest
+public class MemberRepositoryTest {
+
+    @Autowired
+    private MemberRepository memberRepository;
+
+    @DisplayName("가능한 닉네임들로 Member를 생성한다.")
+    @ParameterizedTest
+    @ValueSource(strings = {"일이삼사오육칠팔구십일이삼사오", "ottffssentottff", "123456789012345"})
+    void possibleNicknameTest(String nickname) {
+        Member member = Member.builder().nickname(nickname).oAuthId("oauthId").build();
+        assertThat(memberRepository.save(member)).isNotNull();
+    }
+
+    @DisplayName("[예외] 가능하지 않은 닉네임들로 Member를 생성한다.")
+    @ParameterizedTest
+    @ValueSource(strings = {"일이삼사오육칠팔구십일이삼사오육", "ottffssentottffs", "1234567890123456", "d;", "-"})
+    void impossibleNicknameTest(String nickname) {
+        Member member = Member.builder().nickname(nickname).oAuthId("oauthId").build();
+        assertThatThrownBy(() -> {
+            memberRepository.save(member);
+        }).isInstanceOf(ConstraintViolationException.class);
+    }
+
+    @AfterEach
+    void tearDown() {
+        memberRepository.deleteAll();
+    }
+
+}

src/test/java/com/grasshouse/dorandoran/member/service/MemberServiceTest.java

@@ -112,4 +112,4 @@ void deleteMemberWithComments() {
     void tearDown() {
         memberRepository.deleteAll();
     }
-}
+}