Feat: Add user regist page

src/components/users/UserLogin.vue

@@ -21,7 +21,7 @@ const loginUser = computed(() => {
   };
 });
 
-async function handleLogin() {
+async function handleSubmit() {
   console.log('login');
   await userLogin(loginUser.value);
   if (isLogin.value) {
@@ -31,7 +31,7 @@ async function handleLogin() {
 </script>
 
 <template>
-  <form @submit.prevent="handleLogin" action="POST" class="form">
+  <form @submit.prevent="handleSubmit" action="POST">
     <h2>로그인</h2>
     <div class="form-group">
       <label for="userId">아이디</label>
@@ -44,28 +44,31 @@ async function handleLogin() {
         <TextButton> 비밀번호를 잊으셨나요? </TextButton>
       </RouterLink>
     </div>
-    <div class="form-group">
+    <div class="form-handler">
       <FilledButton primary class="button" type="submit">로그인</FilledButton>
       <p>
         아직 회원이 아니신가요?
-        <RouterLink :to="{ name: 'home' }"><TextButton primary>회원가입</TextButton></RouterLink>
+        <RouterLink :to="{ name: 'user-join' }"
+          ><TextButton primary>회원가입</TextButton></RouterLink
+        >
       </p>
     </div>
   </form>
 </template>
 
 <style scoped>
-.form {
+form {
   display: flex;
   flex-direction: column;
-  gap: 20px;
+  gap: 12px;
   justify-content: center;
   align-items: center;
-  margin-top: 80px;
+  margin-top: 40px;
   width: 100%;
 }
 
-.form-group {
+.form-group,
+.form-handler {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
@@ -73,6 +76,11 @@ async function handleLogin() {
   width: 100%;
 }
 
+.form-handler {
+  gap: 12px;
+  margin-top: 12px;
+}
+
 label {
   font-size: 16px;
   font-weight: bold;

src/components/users/UserRegister.vue

@@ -1,28 +1,39 @@
 <script setup>
-import { reactive, ref } from 'vue';
+import { computed, ref } from 'vue';
 import { registMember } from '@/api/member';
 import { useRouter } from 'vue-router';
+import TextButton from '../common/TextButton.vue';
+import FilledButton from '../common/FilledButton.vue';
 
 const router = useRouter();
+const id = ref('');
+const email = ref('');
+const name = ref('');
+const password = ref('');
+const passwordConfirm = ref('');
+const isPasswordMiss = computed(
+  () => passwordConfirm.value && password.value !== passwordConfirm.value
+);
 
-const email_id = ref('');
+const member = computed(() => {
-const email_domain = ref('');
+  return {
-
+    id: id.value,
-const member = reactive({
+    email: email.value,
-  id: '',
+    name: name.value,
-  name: '',
+    password: password.value,
-  password: '',
+  };
-  email: email_id.value + '@' + email_domain.value,
 });
 
-function onSubmit() {
+function handleSubmit() {
-  member.value.email = email_id.value + '@' + email_domain.value;
+  if (password.value !== passwordConfirm.value) {
-  console.log(member.value);
+    return;
+  }
   registMember(
     member.value,
     (response) => {
-      if (response.status == 200) console.log('회원가입 성공!');
+      if (response.status == 200) {
-      router.push({ name: 'user-login' });
+        router.push({ name: 'user-login' });
+      }
     },
     (error) => console.error(error)
   );
@@ -30,65 +41,110 @@ function onSubmit() {
 </script>
 
 <template>
-  <div class="container">
+  <form @submit.prevent="handleSubmit" action="POST">
-    <div class="row justify-content-center">
+    <h2>회원가입</h2>
-      <div class="col-lg-10">
+    <div class="form-group">
-        <h2 class="my-3 py-3 shadow-sm bg-light text-center">
+      <label for="userId">아이디</label>
-          <mark class="orange">회원가입</mark>
+      <input v-model="id" type="text" id="userId" required />
-        </h2>
-      </div>
-      <div class="col-lg-10 text-start">
-        <form>
-          <div class="mb-3">
-            <label for="username" class="form-label">이름 : </label>
-            <input type="text" class="form-control" placeholder="이름..." v-model="member.name" />
-          </div>
-          <div class="mb-3">
-            <label for="userid" class="form-label">아이디 : </label>
-            <input type="text" class="form-control" placeholder="아이디..." v-model="member.id" />
-          </div>
-          <div class="mb-3">
-            <label for="userpwd" class="form-label">비밀번호 : </label>
-            <input
-              type="text"
-              class="form-control"
-              placeholder="비밀번호..."
-              v-model="member.password"
-            />
-          </div>
-          <div class="mb-3">
-            <label for="pwdcheck" class="form-label">비밀번호확인 : </label>
-            <input type="text" class="form-control" id="pwdcheck" placeholder="비밀번호확인..." />
-          </div>
-          <div class="mb-3">
-            <label for="emailid" class="form-label">이메일 : </label>
-            <div class="input-group">
-              <input
-                type="text"
-                class="form-control"
-                placeholder="이메일아이디"
-                v-model="email_id"
-              />
-              <span class="input-group-text">@</span>
-              <select class="form-select" aria-label="이메일 도메인 선택" v-model="email_domain">
-                <option selected>선택</option>
-                <option value="ssafy.com">싸피</option>
-                <option value="google.com">구글</option>
-                <option value="naver.com">네이버</option>
-                <option value="kakao.com">카카오</option>
-              </select>
-            </div>
-          </div>
-          <div class="col-auto text-center">
-            <button type="button" class="btn btn-outline-primary mb-3" @click="onSubmit">
-              회원가입
-            </button>
-            <button type="button" class="btn btn-outline-success ms-1 mb-3">초기화</button>
-          </div>
-        </form>
-      </div>
     </div>
-  </div>
+    <div class="form-group">
+      <label for="email">이메일</label>
+      <input v-model="email" type="email" id="email" required />
+    </div>
+    <div class="form-group">
+      <label for="name">닉네임</label>
+      <input v-model="name" type="text" id="name" required />
+    </div>
+    <div class="form-group">
+      <label for="password">비밀번호</label>
+      <input v-model="password" type="password" id="password" required />
+    </div>
+    <div :class="['form-group', isPasswordMiss ? 'error' : '']">
+      <label for="password-confirm">비밀번호 확인</label>
+      <input v-model="passwordConfirm" type="password" id="password-confirm" required />
+      <p class="error-msg" v-if="isPasswordMiss">비밀번호가 일치하지 않습니다.</p>
+    </div>
+    <div class="form-handler">
+      <FilledButton primary class="button" type="submit">회원가입</FilledButton>
+      <p>
+        이미 회원이신가요?
+        <RouterLink :to="{ name: 'user-login' }">
+          <TextButton primary>로그인</TextButton>
+        </RouterLink>
+      </p>
+    </div>
+  </form>
 </template>
 
-<style scoped></style>
+<style scoped>
+form {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+  justify-content: center;
+  align-items: center;
+  margin-top: 40px;
+  width: 100%;
+}
+
+.form-group,
+.form-handler {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  gap: 4px;
+  width: 100%;
+}
+
+.form-handler {
+  gap: 12px;
+  margin-top: 20px;
+}
+
+label {
+  font-size: 16px;
+  font-weight: bold;
+  color: var(--color-text-secondary);
+  transition: color 0.25s;
+}
+
+input {
+  border-width: 1px;
+  box-shadow: var(--shadow);
+  transition:
+    border-color 0.25s,
+    outline-color 0.25s;
+}
+
+.error label {
+  color: var(--color-error);
+}
+
+.error input {
+  border-color: var(--color-error);
+  outline-color: var(--color-error);
+}
+
+.error-msg {
+  text-align: start;
+  color: var(--color-error);
+}
+
+.forgot {
+  align-self: flex-start;
+}
+
+.form-input {
+  width: 100%;
+}
+
+.button {
+  height: 48px;
+  font-size: 16px;
+}
+
+p {
+  font-size: 14px;
+  text-align: center;
+}
+</style>