Merge pull request #240 from Here-You/feature/#239

[Feat] : 자잘한 버그 수정 및 로딩처리
Here-You · Feb 18, 2024 · 6948217 · 6948217
2 parents 2dc37ab + 3065880
commit 6948217
Show file tree

Hide file tree

Showing 29 changed files with 816 additions and 172 deletions.
diff --git a/public/images/diary.webp b/public/images/diary.webp
diff --git a/public/images/location.svg b/public/images/location.svg
diff --git a/src/components/comment/mate/commentInput/MateCommentInput.jsx b/src/components/comment/mate/commentInput/MateCommentInput.jsx
@@ -57,7 +57,10 @@ const MateCommentInput = ({ ruleId }) => {
       <S.SubmitButton
         onClick={async () => {
           try {
-            if (!content.trim()) return;
+            if (!content.trim()) {
+              toast('댓글 내용을 입력해주세요!');
+              return;
+            }
             await postComment({ ruleId, content });
           } catch (e) {
             console.error(e);

diff --git a/src/components/comment/signature/commentInput/SignatureCommentInput.jsx b/src/components/comment/signature/commentInput/SignatureCommentInput.jsx
@@ -51,11 +51,16 @@ const SignatureCommentInput = () => {
             />
             <S.SubmitButton
               onClick={async () => {
-                try {
-                  await mutateAsync({ signatureId, content });
-                  setContent('');
-                } catch (error) {
-                  console.error('댓글 작성 실패:', error);
+                const comment = content.trim();
+                if (!comment) {
+                  toast('댓글 내용을 입력해주세요!');
+                } else {
+                  try {
+                    await mutateAsync({ signatureId, content });
+                    setContent('');
+                  } catch (error) {
+                    console.error('댓글 작성 실패:', error);
+                  }
                 }
               }}>
               저장

diff --git a/src/components/main/LoginBanner.jsx b/src/components/main/LoginBanner.jsx
@@ -4,6 +4,7 @@ import { useNavigate } from 'react-router-dom';
 import * as S from './LoginBanner.style';
 import profileImg from '/images/main/profileImg.svg';
 import rightIcon from '/images/main/right.svg';
+import Logo from '/images/mypage/MyPageLogo.svg';
 import { useGetMyProfile } from '@/hooks/profile/queries/useGetMyProfile';
 
 export default function LoginBanner({ isLogin }) {
@@ -23,7 +24,9 @@ export default function LoginBanner({ isLogin }) {
         <S.Container>
           {isLogin ? (
             <>
-              <S.Img src={myProfile?.profileImage} />
+              <S.Img
+                src={myProfile?.profileImage ? myProfile?.profileImage : Logo}
+              />
               <S.TextContainer>
                 <S.Text1>{myProfile?.nickname}님 환영합니다🪐</S.Text1>
                 <S.ProfileContainer onClick={() => navigate('/mypage')}>

diff --git a/src/components/mypage/MypageInfo.jsx b/src/components/mypage/MypageInfo.jsx
@@ -2,6 +2,7 @@ import { useNavigate } from 'react-router-dom';
 
 import LogoutModal from '../modal/mypage/LogoutModal';
 import * as S from './MypageInfo.style';
+import Logo from '/images/mypage/MyPageLogo.svg';
 import { myPageImg } from '/public/images/mypage/index';
 import useLogoutModal from '@/hooks/modal/useLogoutModal';
 import { useGetMyProfile } from '@/hooks/profile/queries/useGetMyProfile';
@@ -26,7 +27,7 @@ const MyPageInfo = () => {
       <S.ContentContainer>
         {isLogin ? (
           <S.ProfilePicture
-            src={myProfile?.profileImage}
+            src={myProfile?.profileImage ? myProfile?.profileImage : Logo}
             alt={myProfile?.nickname}
           />
         ) : (

diff --git a/src/components/profile/ProfileBox.style.js b/src/components/profile/ProfileBox.style.js
@@ -41,6 +41,7 @@ const Image = styled.img`
   height: 100px;
   background-color: ${theme.COLOR.MAIN.GRAY};
   border-radius: 50%;
+  object-fit: cover;
 
   @media ${theme.WINDOW_SIZE.MOBILE} {
     width: 75px;

diff --git a/src/pages/dailyRecord/edit/DailyRecordEdit.style.js b/src/pages/dailyRecord/edit/DailyRecordEdit.style.js
@@ -1,8 +1,32 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 
 import { FONT_SIZE } from '@/constants/size';
 import theme from '@/theme';
 
+const rotation = keyframes`
+    from{
+        transform: rotate(0deg);
+    }
+
+    to{
+        transform: rotate(360deg);
+    }
+
+`;
+
+const Spinner = styled.div`
+  position: absolute;
+  bottom: 0px;
+  left: 215px;
+  height: 20px;
+  width: 20px;
+  border: 1px solid ${theme.COLOR.MAIN.MEDIUM_GREEN};
+  border-radius: 50%;
+  border-top: none;
+  border-right: none;
+  animation: ${rotation} 1s linear infinite;
+`;
+
 const Container = styled.div`
   ${theme.ALIGN.COLUMN_CENTER};
   gap: 10px;
@@ -240,4 +264,5 @@ export {
   ImageInput,
   PreviewImage,
   UploadButton,
+  Spinner,
 };
diff --git a/src/pages/dailyRecord/edit/DailyRecordEditPage.jsx b/src/pages/dailyRecord/edit/DailyRecordEditPage.jsx
@@ -134,6 +134,7 @@ const DailyRecordEditPage = () => {
                 disabled={loading}>
                 수정
               </S.UploadButton>
+              {loading && <S.Spinner />}
             </S.DateText>
           </S.DateContainer>
           <S.RecordContainer>

diff --git a/src/pages/dailyRecord/write/DailyRecordWrite.jsx b/src/pages/dailyRecord/write/DailyRecordWrite.jsx
@@ -110,6 +110,7 @@ const DailyRecordWritePage = () => {
         <S.DateText>
           {Date?.recordDate && Date.recordDate[1]},{' '}
           {Date?.recordDate && Date.recordDate[2]}
+          {isLoading && <S.Spinner />}
           <S.UploadButton
             type="submit"
             disabled={

diff --git a/src/pages/dailyRecord/write/DailyRecordWritePage.style.js b/src/pages/dailyRecord/write/DailyRecordWritePage.style.js
@@ -1,8 +1,32 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 
 import { FONT_SIZE } from '@/constants/size';
 import theme from '@/theme';
 
+const rotation = keyframes`
+    from{
+        transform: rotate(0deg);
+    }
+
+    to{
+        transform: rotate(360deg);
+    }
+
+`;
+
+const Spinner = styled.div`
+  position: absolute;
+  bottom: 0px;
+  left: 215px;
+  height: 20px;
+  width: 20px;
+  border: 1px solid ${theme.COLOR.MAIN.MEDIUM_GREEN};
+  border-radius: 50%;
+  border-top: none;
+  border-right: none;
+  animation: ${rotation} 1s linear infinite;
+`;
+
 const Container = styled.div`
   ${theme.ALIGN.COLUMN_CENTER};
   gap: 10px;
@@ -279,4 +303,5 @@ export {
   ImageInput,
   PreviewImage,
   UploadButton,
+  Spinner,
 };
diff --git a/src/pages/mate/look/MateLook.jsx b/src/pages/mate/look/MateLook.jsx
@@ -3,6 +3,7 @@ import { useInView } from 'react-intersection-observer';
 
 import * as S from './MateLook.style';
 import explore2 from '/images/explore2.svg';
+import location from '/images/location.svg';
 import Banner from '@/components/mate/Banner';
 import MateBox from '@/components/mate/MateBox';
 import MateRecsys from '@/components/mate/MateRecsys';
@@ -69,10 +70,13 @@ const MateLookPage = () => {
                       <MateBox key={mate._id} mate={mate} />
                     ))
                   ) : (
-                    <div>
-                      {`[${locationMate?.location}]`}을/를 사용하는 메이트가
-                      없습니다.
-                    </div>
+                    <S.MateContentContainer>
+                      <S.Image src={location} />
+                      <p>
+                        <span>{`[${locationMate?.location}]`}</span>을/를
+                        사용하는 메이트가 없습니다.
+                      </p>
+                    </S.MateContentContainer>
                   ))}
               {}
             </S.CenteredContainer>

diff --git a/src/pages/mate/look/MateLook.style.js b/src/pages/mate/look/MateLook.style.js
@@ -167,6 +167,30 @@ const AlertLayout = styled.div`
   gap: 40px;
 `;
 
+const MateContentContainer = styled.div`
+  ${theme.ALIGN.COLUMN_CENTER};
+  gap: 20px;
+  width: 100%;
+  margin-top: 50px;
+
+  p {
+    color: ${theme.COLOR.MAIN.BLACK};
+    font-size: ${FONT_SIZE.XL};
+    font-family: 'Pretendard-regular';
+  }
+
+  p span {
+    color: ${theme.COLOR.MAIN.HEAVY_GREEN};
+    font-size: ${FONT_SIZE.XL};
+    font-family: 'Pretendard-regular';
+  }
+`;
+
+const Image = styled.img`
+  width: 100px;
+  height: 100px;
+`;
+
 export {
   Title,
   BoxContainer,
@@ -177,4 +201,6 @@ export {
   AlertContainer,
   Icon,
   AlertLayout,
+  MateContentContainer,
+  Image,
 };
diff --git a/src/pages/mate/ruleCheck/MateRuleDetailCheck.jsx b/src/pages/mate/ruleCheck/MateRuleDetailCheck.jsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import * as S from './MateRuleDetailCheck.style';
+import MateRuleDetailSkeleton from './MateRuleDetailSkeleton/MateRuleDetailSkeleton';
 import Logo from '/images/mypage/MyPageLogo.svg';
 import MateCommentList from '@/components/comment/mate/MateCommentList';
 import MateCommentInput from '@/components/comment/mate/commentInput/MateCommentInput';
@@ -14,60 +15,62 @@ const MateRuleDetailCheckPage = () => {
 
   const navigate = useNavigate();
 
-  if (loading) {
-    return <div>로딩 중 입니다..</div>;
-  }
-
   if (error) {
     return <div>에러가 발생했습니다.</div>;
   }
 
   return (
-    <S.Container>
-      <S.Wrapper>
-        <S.Header>
-          <S.Title>{data?.mainTitle}</S.Title>
-          <S.ProfileContainer>
-            {data?.detailMembers?.slice(0, 5).map(p => (
-              <S.ProfileBox key={p.id}>
-                <S.ProfileImages src={p.image ? p.image : Logo} />
-                <h3>{p.name}</h3>
-              </S.ProfileBox>
-            ))}
-            {data?.detailMembers?.length > 5 && ( //
-              <S.ProfileBox>
-                <h3>외 {data.detailMembers.length - 5} 명</h3>
-              </S.ProfileBox>
-            )}
-          </S.ProfileContainer>
-        </S.Header>
-        <S.Content>
-          {data?.rulePairs?.map((rule, index) => (
-            <S.TextContainer key={rule.id}>
-              <h3>{rule.ruleTitle}</h3>
-              <p>{rule.ruleDetail}</p>
-            </S.TextContainer>
-          ))}
-        </S.Content>
-      </S.Wrapper>
-      {editMode ? (
-        <S.UpdateBtn
-          onClick={() => {
-            handleSubmit();
-            setEditMode(false);
-          }}>
-          저장하기
-        </S.UpdateBtn>
+    <>
+      {loading ? (
+        <MateRuleDetailSkeleton />
       ) : (
-        <S.UpdateBtn onClick={() => navigate(`/mate/rule-edit/${ruleId}`)}>
-          수정하기
-        </S.UpdateBtn>
+        <S.Container>
+          <S.Wrapper>
+            <S.Header>
+              <S.Title>{data?.mainTitle}</S.Title>
+              <S.ProfileContainer>
+                {data?.detailMembers?.slice(0, 5).map(p => (
+                  <S.ProfileBox key={p.id}>
+                    <S.ProfileImages src={p.image ? p.image : Logo} />
+                    <h3>{p.name}</h3>
+                  </S.ProfileBox>
+                ))}
+                {data?.detailMembers?.length > 5 && ( //
+                  <S.ProfileBox>
+                    <h3>외 {data.detailMembers.length - 5} 명</h3>
+                  </S.ProfileBox>
+                )}
+              </S.ProfileContainer>
+            </S.Header>
+            <S.Content>
+              {data?.rulePairs?.map((rule, index) => (
+                <S.TextContainer key={rule.id}>
+                  <h3>{rule.ruleTitle}</h3>
+                  <p>{rule.ruleDetail}</p>
+                </S.TextContainer>
+              ))}
+            </S.Content>
+          </S.Wrapper>
+          {editMode ? (
+            <S.UpdateBtn
+              onClick={() => {
+                handleSubmit();
+                setEditMode(false);
+              }}>
+              저장하기
+            </S.UpdateBtn>
+          ) : (
+            <S.UpdateBtn onClick={() => navigate(`/mate/rule-edit/${ruleId}`)}>
+              수정하기
+            </S.UpdateBtn>
+          )}
+          <MateCommentInput ruleId={ruleId} />
+          <S.CommentsContainer>
+            <MateCommentList ruleId={ruleId} />
+          </S.CommentsContainer>
+        </S.Container>
       )}
-      <MateCommentInput ruleId={ruleId} />
-      <S.CommentsContainer>
-        <MateCommentList ruleId={ruleId} />
-      </S.CommentsContainer>
-    </S.Container>
+    </>
   );
 };
 

diff --git a/src/pages/mate/ruleCheck/MateRuleDetailSkeleton/MateRuleDetailSkeleton.jsx b/src/pages/mate/ruleCheck/MateRuleDetailSkeleton/MateRuleDetailSkeleton.jsx
@@ -0,0 +1,30 @@
+import * as S from './MateRuleDetailSkeleton.style';
+
+const MateRuleDetailSkeleton = () => {
+  return (
+    <S.Container>
+      <S.Wrapper>
+        <S.Header>
+          <S.Title />
+          <S.ProfileContainer>
+            <S.ProfileBox>
+              <S.ProfileImages />
+              <S.Title />
+            </S.ProfileBox>
+          </S.ProfileContainer>
+        </S.Header>
+        <S.Content>
+          {new Array(5).fill(0).map(() => (
+            <S.TextContainer>
+              <S.Text />
+              <S.Text />
+            </S.TextContainer>
+          ))}
+        </S.Content>
+      </S.Wrapper>
+      <S.UpdateBtn />
+    </S.Container>
+  );
+};
+
+export default MateRuleDetailSkeleton;