#68 fix: errMsg 뜨도록 수정

AJD-Archive · Sep 23, 2024 · 8b4778a · 8b4778a
1 parent e76710a
commit 8b4778a
Show file tree

Hide file tree

Showing 3 changed files with 61 additions and 22 deletions.
diff --git a/src/components/ProfileUpdateModal.tsx b/src/components/ProfileUpdateModal.tsx
@@ -7,6 +7,7 @@ import { useAtom } from 'jotai';
 import { descriptionAtom, nicknameAtom } from '../contexts/NickName';
 import { useQuery } from '@tanstack/react-query';
 import { userInfoApi } from '../api/UserApi';
+import { customErrToast } from '../utils/customErrorToast';
 
 type Props = {
   onModalVisibleFunc: () => void;
@@ -16,13 +17,26 @@ const ProfileUpdateModal = ({ onModalVisibleFunc }: Props) => {
   const [description, setDescriptionAtom] = useAtom(descriptionAtom);
   const [newNickname, setNewNickname] = useState<string>('');
   const [newDescription, setNewDescription] = useState<string>('');
+  const [errMsg, setErrMsg] = useState<string>('한글자 이상은 작성해주세요!');
+  const [descriptionErrMsg, setDescriptionErrMsg] = useState<string>('한글자 이상은 작성해주세요!');
 
   // 기존 데이터를 refetch하기 위해 useQuery 사용
   const { refetch } = useQuery({ queryKey: ['profile'], queryFn: userInfoApi });
 
   const onSubmitHandler = async (e: React.MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
 
+    if (
+      newNickname.length >= 5 ||
+      newNickname === '' ||
+      newDescription.length > 20 ||
+      newDescription === ''
+    ) {
+      return;
+    }
+
+    onModalVisibleFunc();
+
     try {
       // 유저 정보 업데이트 요청
       await updateUserInfo(newNickname, newDescription).then(() => {
@@ -36,10 +50,20 @@ const ProfileUpdateModal = ({ onModalVisibleFunc }: Props) => {
   };
 
   const onNickNameHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value === '') {
+      setErrMsg('한글자 이상은 작성해주세요!');
+    } else if (e.target.value.length > 4) {
+      setErrMsg('닉네임은 4자 이하로 작성해주세요');
+    }
     setNewNickname(e.target.value);
   };
 
   const onDescriptionHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    if (e.target.value === '') {
+      setDescriptionErrMsg('한글자 이상은 작성해주세요!');
+    } else if (e.target.value.length > 20) {
+      setDescriptionErrMsg('닉네임은 20자 이하로 작성해주세요');
+    }
     setNewDescription(e.target.value);
   };
 
@@ -57,22 +81,25 @@ const ProfileUpdateModal = ({ onModalVisibleFunc }: Props) => {
               onChange={onNickNameHandler}
               placeholder="닉네임을 입력해주세요"
             />
+            <p>{newNickname.length >= 5 && errMsg}</p>
+            <p>{newNickname.length === 0 && errMsg}</p>
           </label>
-          <div>
-            <label>
-              <div>자기소개</div>
-              <input
-                value={newDescription}
-                onChange={onDescriptionHandler}
-                placeholder="자기소개를 입력해주세요"
-              />
-            </label>
-          </div>
+
+          <label>
+            <div>자기소개</div>
+            <input
+              value={newDescription}
+              onChange={onDescriptionHandler}
+              placeholder="자기소개를 입력해주세요"
+            />
+            <p>{newDescription.length >= 20 && descriptionErrMsg}</p>
+            <p>{newDescription.length === 0 && descriptionErrMsg}</p>
+          </label>
+
           <Flex>
             <BtnUpdate
               onClick={e => {
                 onSubmitHandler(e);
-                onModalVisibleFunc();
               }}
             >
               수정하기

diff --git a/src/hooks/useSSE.ts b/src/hooks/useSSE.ts
@@ -27,15 +27,18 @@ export const useSSE = (
     }
 
     // SSE 연결 설정
-    eventSource.current = new EventSourcePolyfill(`${apiBaseUrl}/notifications/stream`, {
-      headers: {
-        Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
-        Connection: '',
-        Accept: 'text/event-stream',
-      },
-      heartbeatTimeout: 86400000,
-      withCredentials: true,
-    });
+    eventSource.current = new EventSourcePolyfill(
+      `${process.env.REACT_APP_API_SERVER_URL}/notifications/stream`,
+      {
+        headers: {
+          Authorization: `Bearer ${localStorage.getItem('accessToken')}`,
+          Connection: '',
+          Accept: 'text/event-stream',
+        },
+        heartbeatTimeout: 86400000,
+        withCredentials: true,
+      }
+    );
 
     // 메시지 수신 처리
     eventSource.current.onmessage = event => {

diff --git a/src/styles/MyPageStyled.tsx b/src/styles/MyPageStyled.tsx
@@ -165,6 +165,9 @@ export const EditContainer = styled.div`
   align-items: center;
   font-size: 0.8rem;
 
+  label {
+    margin-bottom: 2rem;
+  }
   form {
     width: 40rem;
     border-radius: 2rem;
@@ -179,8 +182,14 @@ export const EditContainer = styled.div`
     background: #f4f4f4;
     width: 15rem;
     padding: 1rem;
-    border-radius: 2rem;
-    margin: 0.5rem 0 2rem 0;
+    border-radius: 1rem;
+    margin-top: 0.5rem;
+  }
+
+  p {
+    color: red;
+    margin-top: 0.5rem;
+    margin-left: 0.5rem;
   }
 `;