Merge pull request #268 from Computer-Research-Association/feat/#267

로딩 스피너 적용

Author: CZEROJ

src/components/Auth/Register/RegisterForm.tsx

@@ -10,6 +10,7 @@ import WidthSpacer from '~/components/Common/WidthSpacer';
 import AlertModal from '~/components/Modal/Alert/AlertModal';
 import { ReqSignUp } from '~/models/Auth';
 import RegisterInputTextField from './RegisterInputTextField';
+import RegisterPasswordTextField from './RegisterPasswordTextField';
 import { useRegisterStore } from '~/store/registerStore';
 import axios from 'axios';
 
@@ -473,7 +474,7 @@ function RegisterForm() {
           valid={!inputErrors['username']}
           errorMessage={errorMessages['username']}
         />
-        <RegisterInputTextField
+        <RegisterPasswordTextField
           name="password"
           value={formData.password}
           label="비밀번호"
@@ -483,7 +484,7 @@ function RegisterForm() {
           valid={!inputErrors['password']}
           errorMessage={errorMessages['password']}
         />
-        <RegisterInputTextField
+        <RegisterPasswordTextField
           name="passwordCheck"
           value={formData.passwordCheck}
           label="비밀번호 확인"

src/components/Auth/Register/RegisterPasswordTextField.tsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import styled from 'styled-components';
+
+const Input = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-bottom: 2rem;
+
+  label {
+    color: var(--color-dark);
+    font-family: 'Pretendard SemiBold';
+    font-size: 1.25rem;
+    margin-bottom: 0.75rem;
+    user-select: none;
+  }
+
+  input {
+    background-color: var(--color-white);
+    color: var(--color-dark-text);
+    font-size: 1.25rem;
+    border: 1px solid var(--color-dark-stroke);
+    border-radius: 0.5rem;
+    padding: 1.5rem 1rem;
+    box-sizing: border-box;
+    height: 66px;
+    flex: 1;
+
+    @media (max-width: 480px) {
+      padding: 1.2rem 0.8rem;
+    }
+  }
+
+  input:read-only {
+    background-color: var(--color-background);
+  }
+
+  input.error {
+    border-color: red;
+  }
+
+  div.error {
+    margin-top: 0.25rem;
+    margin-left: 0.25rem;
+    color: red;
+    font-size: 1rem;
+  }
+`;
+
+export default function RegisterPasswordTextField({
+  name,
+  value,
+  label,
+  placeHolder,
+  onChange,
+  onBlur,
+  valid,
+  errorMessage,
+}: {
+  name: string;
+  value: string;
+  label: string;
+  placeHolder: string;
+  onChange: (_e: React.ChangeEvent<HTMLInputElement>) => void;
+  onBlur: (_e: React.FocusEvent<HTMLInputElement>) => void;
+  valid: boolean;
+  errorMessage: string;
+}) {
+  return (
+    <Input>
+      <label htmlFor={name}>{label}</label>
+      <input
+        type="password"
+        name={name}
+        id={name}
+        placeholder={placeHolder}
+        value={value}
+        onChange={onChange}
+        onBlur={onBlur}
+        className={!valid ? 'error' : ''}
+      />
+      {!valid && <div className="error">{errorMessage}</div>}
+    </Input>
+  );
+}

src/components/Board/Detail/BoardDetail.tsx

@@ -8,6 +8,7 @@ import { getCommentsCountByCategory } from '~/api/comment.ts';
 import { Board } from '~/models/Board.ts';
 import BoardDetailItem from './BoardDetailItem.tsx';
 import styles from './BoardDetail.module.css';
+import LoadingSpinner from '~/components/Common/LoadingSpinner.tsx';
 
 export default function BoardDetail({ category }: { category: number }) {
   const currentUrl = window.location.href;
@@ -70,7 +71,7 @@ export default function BoardDetail({ category }: { category: number }) {
   });
 
   if (boardQuery.isFetching || commentCountQuery.isFetching) {
-    return <div>로딩 중...</div>;
+    return <LoadingSpinner />;
   }
 
   if (boardQuery.isSuccess && commentCountQuery.isSuccess) {

src/components/Board/Edit/BoardEdit.tsx

@@ -155,7 +155,7 @@ export default function BoardEdit({ category }: BoardEditProps) {
 
   // 로딩 상태 처리
   if (boardQuery.isLoading || boardQuery.isLoading) {
-    return <div>데이터를 불러오는 중입니다...</div>;
+    return <LoadingSpinner />;
   }
 
   if (boardQuery.isError || boardQuery.isError) {

src/components/Board/List/BoardList.tsx

@@ -6,6 +6,7 @@ import { CATEGORY_STRINGS_EN } from '~/constants/category_strings_en.ts';
 import BoardItem from '~/components/Board/Item/BoardItem.tsx';
 import Pagination from '~/components/Pagination/Pagination.tsx';
 import styles from './BoardList.module.css';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 interface BoardListProps {
   category: number;
@@ -23,14 +24,11 @@ export default function BoardList({
   onPageChange,
 }: BoardListProps) {
   const renderBoardContent = () => {
+    if (boardsQuery.isLoading) return <LoadingSpinner />;
+
     if (totalPages === 0)
       return <div className={styles.noBoards}>현재 게시물이 없습니다.</div>;
 
-    if (boardsQuery.isLoading)
-      return (
-        <div className={styles.loading}>데이터를 불러오는 중입니다...</div>
-      );
-
     if (boardsQuery.isError)
       return <div className={styles.error}>에러가 발생했습니다!</div>;
 

src/components/Book/Detail/BookAdminDetail.tsx

@@ -3,6 +3,7 @@ import { QUERY_KEY } from '~/api/queryKey.ts';
 import { Item } from '~/models/Item.ts';
 import { getItemById } from '~/api/item.ts';
 import styled from 'styled-components';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 const Container = styled.div`
   padding: 10rem;
@@ -29,7 +30,7 @@ function BookAdminDetail() {
   let content;
 
   if (itemQuery.isLoading) {
-    content = <div className="loading">데이터를 불러오는 중입니다...</div>;
+    content = <LoadingSpinner />;
   } else if (itemQuery.isError) {
     content = <div className="error">에러가 발생했습니다!</div>;
   } else if (itemQuery.isSuccess) {

src/components/Book/Edit/BookAdminEdit.tsx

@@ -6,6 +6,7 @@ import { Item } from '~/models/Item.ts';
 import { getItemById, updateItem } from '~/api/item.ts';
 import { onUploadImage } from '~/api/board.ts';
 import styles from '../../Project/Project.module.css';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 function BookAdminEdit() {
   const navigate = useNavigate();
@@ -78,7 +79,7 @@ function BookAdminEdit() {
   };
 
   if (itemQuery.isLoading) {
-    content = <div className="loading">데이터를 불러오는 중입니다...</div>;
+    content = <LoadingSpinner />;
   } else if (itemQuery.isError) {
     content = <div className="error">에러가 발생했습니다!</div>;
   } else if (itemQuery.isSuccess) {

src/components/Book/List/BookAdminList.tsx

@@ -6,6 +6,7 @@ import { getItems } from '~/api/item.ts';
 import { ITEMCATEGORY } from '~/constants/itemCategory.ts';
 import ItemAdminDelete from '~/components/Book/Delete/BookAdminDelete.tsx';
 import styled from 'styled-components';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 const Container = styled.div`
   padding: 10rem;
@@ -61,7 +62,7 @@ function BookAdminList() {
   let content;
 
   if (itemQuery.isLoading) {
-    content = <div>로딩중...</div>;
+    content = <LoadingSpinner />;
   } else if (itemQuery.isError) {
     content = <div>에러가 발생했습니다!</div>;
   } else if (itemQuery.isSuccess) {

src/components/Book/List/BookList.tsx

@@ -4,6 +4,7 @@ import { QUERY_KEY } from '~/api/queryKey.ts';
 import { Item } from '~/models/Item.ts';
 import ItemItem from '~/components/Book/Item/BookItem.tsx';
 import styles from '~/components/Book/List/BookList.module.css';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 export default function BookList({ itemCategory }: { itemCategory: number }) {
   const ItemQuery = useQuery<Item[]>({
@@ -14,7 +15,7 @@ export default function BookList({ itemCategory }: { itemCategory: number }) {
   let content;
 
   if (ItemQuery.isLoading) {
-    content = <div>로딩중...</div>;
+    content = <LoadingSpinner />;
   } else if (ItemQuery.isError) {
     content = <div className="error">에러가 발생했습니다!</div>;
   } else if (ItemQuery.isSuccess) {

src/components/Comment/List/CommetList.tsx

@@ -3,6 +3,7 @@ import { Comment } from '~/models/Comment.ts';
 import { QUERY_KEY } from '~/api/queryKey.ts';
 import { getCommentsByBoardId } from '~/api/comment.ts';
 import CommentItem from '~/components/Comment/Item/CommentItem.tsx';
+import LoadingSpinner from '~/components/Common/LoadingSpinner';
 
 export default function CommentList({ id }: { id: number }) {
   const commentsQuery = useQuery<Comment[]>({
@@ -13,7 +14,7 @@ export default function CommentList({ id }: { id: number }) {
   let content;
 
   if (commentsQuery.isLoading) {
-    content = <div className="loading">데이터를 불러오는 중입니다...</div>;
+    content = <LoadingSpinner />;
   } else if (commentsQuery.isError) {
     content = <div className="error">에러가 발생했습니다!</div>;
   } else if (commentsQuery.isSuccess) {