Merge pull request #268 from Denia-park/refact/피드백-수정하기

Front 화면 피드백 내용 수정하기
Denia-park · Mar 17, 2024 · a892b5b · a892b5b
2 parents dbc9047 + d08fb52
commit a892b5b
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 16 deletions.
diff --git a/my-garden-fe/src/components/boards/common/BoardView.vue b/my-garden-fe/src/components/boards/common/BoardView.vue
@@ -53,6 +53,10 @@ function submitComment() {
   emit('submitComment', comment.value);
   comment.value = '';
 }
+
+function isCommentBoxActive() {
+  return props.comments.length > 0 || isLogin();
+}
 </script>
 
 <template>
@@ -84,7 +88,7 @@ function submitComment() {
     <!--      </div>-->
     <!--    </div>-->
 
-    <div v-if="isAbleToReply()" class="detail_comment_box">
+    <div v-if="isAbleToReply()" :class="isCommentBoxActive() ? 'detail_comment_box' : ''">
       <div v-if="isLogin()">
         <div class="comment_submit_box">
           <input v-model="comment" class="input_box" placeholder="댓글을 입력해주세요" type="text">

diff --git a/my-garden-fe/src/components/boards/common/SearchForm.vue b/my-garden-fe/src/components/boards/common/SearchForm.vue
@@ -119,7 +119,6 @@ watch(() => props.queryParameter, () => {
 <style scoped>
 .filter-wrapper {
   height: 110px;
-  margin: 0 10px;
 
   display: flex;
   flex-direction: column;
@@ -136,7 +135,7 @@ watch(() => props.queryParameter, () => {
 }
 
 .filter-bot-wrapper {
-  padding: 10px 10px;
+  padding: 10px 0;
 
   display: flex;
   flex-direction: row;

diff --git a/my-garden-fe/src/pages/Login.vue b/my-garden-fe/src/pages/Login.vue
@@ -97,30 +97,29 @@ onMounted(() => {
     <div class="modal-dialog" role="document">
       <div class="modal-content rounded-4 shadow">
         <div class="modal-header p-5 pb-4 border-bottom-0">
-          <h1 class="fw-bold mb-0 fs-2">Please login</h1>
+          <h1 class="fw-bold mb-0 fs-2">로그인</h1>
         </div>
 
         <div class="modal-body p-5 pt-0">
           <div class="form-floating">
             <input id="floatingInput" v-model="form.email" class="form-control" placeholder="name@example.com"
                    type="email">
-            <label for="floatingInput">Email address</label>
+            <label for="floatingInput">이메일 주소</label>
           </div>
           <div class="form-floating">
             <input id="floatingPassword" v-model="form.password" class="form-control" placeholder="Password"
                    type="password">
-            <label for="floatingPassword">Password</label>
+            <label for="floatingPassword">비밀번호</label>
           </div>
 
           <div class="form-check text-start my-3">
             <input id="flexCheckDefault" v-model="rememberMe" class="form-check-input" type="checkbox">
             <label class="form-check-label" for="flexCheckDefault">
-              Remember me
-              <span style="font-size: 13px">(※ Only use this option on private computer)</span>
+              로그인 정보 저장
             </label>
           </div>
-          <button class="btn btn-primary w-100 py-2" @click="submit">Login</button>
-          <button class="btn btn-success w-100 py-2" @click="goToSignup">Sign up</button>
+          <button class="btn btn-primary w-100 py-2" @click="submit">로그인</button>
+          <button class="btn btn-success w-100 py-2" @click="goToSignup">회원가입</button>
         </div>
       </div>
     </div>
@@ -129,6 +128,11 @@ onMounted(() => {
 </template>
 
 <style scoped>
+.modal-header h1 {
+  width: 100%;
+  text-align: center;
+}
+
 .form-sign-in input[type="email"] {
   margin-bottom: -1px;
   border-bottom-right-radius: 0;

diff --git a/my-garden-fe/src/pages/SignUp.vue b/my-garden-fe/src/pages/SignUp.vue
@@ -91,7 +91,7 @@ function validatePasswordCheck() {
     <div class="modal-dialog" role="document">
       <div class="modal-content rounded-4 shadow">
         <div class="modal-header p-5 pb-4 border-bottom-0">
-          <h1 class="fw-bold mb-0 fs-2">Sign up for free</h1>
+          <h1 class="fw-bold mb-0 fs-2">회원가입</h1>
           <button aria-label="Close" class="btn-close" data-bs-dismiss="modal" type="button"
                   @click="goToLogin"></button>
         </div>
@@ -100,7 +100,7 @@ function validatePasswordCheck() {
           <div class="form-floating mb-3">
             <input v-model="form.email" class="form-control rounded-3" placeholder="name@example.com"
                    type="email" @input="validateEmail">
-            <label>Email address</label>
+            <label>이메일 주소</label>
             <div v-if="!form.emailValid" class="text-danger validationText">
               유효한 이메일 형식을 입력해주세요.
             </div>
@@ -109,28 +109,32 @@ function validatePasswordCheck() {
           <div class="form-floating mb-3">
             <input v-model="form.password" class="form-control rounded-3" placeholder="Password"
                    type="password" @input="validatePassword">
-            <label>Password</label>
+            <label>비밀번호</label>
             <div v-if="!form.passwordValid" class="text-danger validationText">
               영문자, 숫자, 특수문자($, @, !, %, *, #, ?, &)가 각각 1개 이상 포함된 8~20자의 비밀번호여야 합니다.
             </div>
           </div>
           <div class="form-floating mb-3">
             <input v-model="form.passwordCheck" class="form-control rounded-3" placeholder="Password Check"
                    type="password" @input="validatePasswordCheck">
-            <label>Password Check</label>
+            <label>비밀번호 확인</label>
             <div v-if="!form.passwordCheckValid" class="text-danger validationText">
               위에서 패스워드로 입력하신 값이랑 일치하지 않습니다.
             </div>
           </div>
-          <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="submit" @click="signup">Sign up</button>
-          <small class="text-body-secondary">By clicking Sign up, you agree to the terms of use.</small>
+          <button class="w-100 mb-2 btn btn-lg rounded-3 btn-primary" type="submit" @click="signup">회원가입</button>
         </div>
       </div>
     </div>
   </div>
 </template>
 
 <style scoped>
+.modal-header h1 {
+  width: 100%;
+  text-align: center;
+}
+
 .validationText {
   font-size: 1rem;
 }