QA 개선 사항 반영 (issue #707)

frontend/src/components/SolutionDetail/SolutionDetailHeader.tsx

@@ -1,6 +1,8 @@
 import type { Solution } from '@/types/solution';
 import * as S from './SolutionDetail.styled';
 import TagButton from '@/components/common/TagButton';
+import { useNavigate } from 'react-router-dom';
+import { ROUTES } from '@/constants/routes';
 
 interface SolutionDetailHeaderProps {
   solution: Solution;
@@ -9,6 +11,11 @@ interface SolutionDetailHeaderProps {
 export default function SolutionDetailHeader({ solution }: SolutionDetailHeaderProps) {
   const { mission, member, title } = solution;
 
+  const navigate = useNavigate();
+  const navigateToMission = () => {
+    navigate(`${ROUTES.missionDetail}/${solution.mission.id}`);
+  };
+
   return (
     <S.SolutionDetailHeaderContainer
       aria-label={`풀이 게시글 제목 ${title}, 작성자 ${member.name}`}
@@ -17,7 +24,9 @@ export default function SolutionDetailHeader({ solution }: SolutionDetailHeaderP
         <S.ThumbnailImg src={mission.thumbnail} alt="" />
         <S.GradientOverlay />
         <S.HeaderLeftArea>
-          <S.MissionTitle># {mission.title}</S.MissionTitle>
+          <TagButton variant="danger" onClick={navigateToMission}>
+            # {mission.title}
+          </TagButton>
           <S.Title>{title}</S.Title>
           <S.HeaderUserInfo>
             <S.HeaderProfileImg src={member.imageUrl} alt="" />

frontend/src/components/UserProfile/UserProfile.styled.ts

@@ -1,9 +1,22 @@
-import { styled } from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+
+const show = keyframes`
+  0% {
+    opacity: 0;
+    }
+
+  100% {
+    opacity: 1;
+  }
+`;
 
 export const PageContainer = styled.div`
   width: 50rem;
   height: 50rem;
   margin: 0 auto;
+
+  animation: ${show} 0.5s;
+  transition: 0.5s;
 `;
 
 export const ImageContainer = styled.div`

frontend/src/components/common/ScrollToTopButton/ScrollToTopButton.styled.ts

@@ -1,26 +1,30 @@
 import media from '@/styles/mediaQueries';
 import styled from 'styled-components';
-// import UpArrow from '@/assets/images/upArrow.svg';
 
-export const ScrollButton = styled.button`
-  width: 7rem;
-  height: 7rem;
+interface ScrollButtonProps {
+  $isVisible: boolean;
+}
+
+export const ScrollButton = styled.button<ScrollButtonProps>`
+  width: 5rem;
+  height: 5rem;
   border-radius: 50%;
   background-color: rgba(115, 131, 214, 0.3);
   color: white;
   border: none;
-  padding: 2rem;
+  padding: 1.5rem;
 
   position: fixed;
   bottom: 4.5rem;
   right: 10rem;
   cursor: pointer;
+  pointer-events: ${({ $isVisible }) => ($isVisible ? 'auto' : 'none')};
 
-  display: flex;
-  align-items: center;
-  justify-content: center;
+  opacity: ${({ $isVisible }) => ($isVisible ? 1 : 0)};
   z-index: 1000;
-  transition: background-color 0.2s;
+  transition:
+    opacity 0.2s ease-in,
+    background-color 0.2s ease;
 
   &:hover {
     background-color: rgba(115, 131, 214, 0.5);
@@ -31,10 +35,6 @@ export const ScrollButton = styled.button`
       height: 3rem;
       padding: 1rem;
 
-      right: 5rem;
+      right: 3rem;
     `}
 `;
-
-// export const UpArrowImg = styled(UpArrow)`
-//   w
-// `

frontend/src/components/common/ScrollToTopButton/index.tsx

@@ -1,16 +1,11 @@
-import { useEffect } from 'react';
-import { useLocation } from 'react-router-dom';
 import UpArrow from '@/assets/images/upArrow.svg';
 import * as S from './ScrollToTopButton.styled';
 import { useIsFetching } from '@tanstack/react-query';
+import { useScrollVisibility } from '@/hooks/useScrollVisibility';
 
 export function ScrollToTopButton() {
-  const { pathname } = useLocation();
   const isFetching = useIsFetching();
-
-  useEffect(() => {
-    window.scrollTo(0, 0);
-  }, [pathname]);
+  const isVisible = useScrollVisibility(0);
 
   const handleScrollToTop = () => {
     window.scrollTo({ top: 0, behavior: 'smooth' });
@@ -21,7 +16,7 @@ export function ScrollToTopButton() {
   }
 
   return (
-    <S.ScrollButton onClick={handleScrollToTop}>
+    <S.ScrollButton $isVisible={isVisible} onClick={handleScrollToTop}>
       <UpArrow />
     </S.ScrollButton>
   );

frontend/src/components/common/TagButton/TagButton.styled.ts

@@ -54,13 +54,15 @@ export const Button = styled.button<ButtonProps>`
       isClickable: props.$isClickable,
       theme: props.theme,
     })};
-  transition: 0.2s;
+  transition: 0.4s;
 
   padding: 1rem 1.6rem;
   border-radius: 2rem;
   display: flex;
   justify-content: center;
   align-items: center;
 
+  width: fit-content;
+
   ${(props) => props.theme.font.badge}
 `;

frontend/src/hooks/useScrollVisibility.ts

@@ -0,0 +1,26 @@
+import { useEffect, useState } from 'react';
+import { debounce } from '@/utils/debounce';
+
+export function useScrollVisibility(threshold: number = 0) {
+  const [isVisible, setIsVisible] = useState(false);
+
+  useEffect(() => {
+    const handleScroll = debounce(() => {
+      const scrollPosition = window.scrollY;
+
+      if (scrollPosition > threshold) {
+        setIsVisible(true);
+      } else {
+        setIsVisible(false);
+      }
+    }, 200);
+
+    window.addEventListener('scroll', handleScroll);
+
+    return () => {
+      window.removeEventListener('scroll', handleScroll);
+    };
+  }, [threshold]);
+
+  return isVisible;
+}

frontend/src/pages/AboutPage/AboutPage.styled.ts

@@ -12,6 +12,7 @@ export const Container = styled.article`
   align-items: center;
   flex-direction: column;
   width: 100%;
+  margin-bottom: 10rem;
 `;
 
 // 로켓 이미지
@@ -155,7 +156,7 @@ export const ComponentContainer = styled.figure<{ $isVisible: boolean }>`
 
   max-width: 120rem;
   width: 89rem;
-  height: 100vh;
+  height: 90vh;
 
   background-color: ${(props) => props.theme.colors.white};
 

frontend/src/pages/DashboardPage/DashBoardPageLayout/DashBoardPageLayout.styled.ts

@@ -1,4 +1,14 @@
-import { styled } from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+
+const show = keyframes`
+  0% {
+    opacity: 0;
+    }
+
+  100% {
+    opacity: 1;
+  }
+`;
 
 export const Container = styled.div`
   display: flex;
@@ -7,6 +17,9 @@ export const Container = styled.div`
   margin-bottom: 10rem;
   padding: 3.5rem 0;
   width: 100rem;
+
+  animation: ${show} 0.5s;
+  transition: 0.5s;
 `;
 
 export const ContentWrapper = styled.div`

frontend/src/pages/DiscussionDetailPage/DiscussionDetailPage.styled.ts

@@ -1,11 +1,24 @@
-import styled from 'styled-components';
 import SanitizedMDPreview from '@/components/common/SanitizedMDPreview';
+import styled, { keyframes } from 'styled-components';
+
+const show = keyframes`
+  0% {
+    opacity: 0;
+    }
+
+  100% {
+    opacity: 1;
+  }
+`;
 
 export const DiscussionDetailPageContainer = styled.div`
   margin: 0 auto;
   width: fit-content;
   padding-bottom: 10rem;
   max-width: 100%;
+
+  animation: ${show} 0.5s;
+  transition: 0.5s;
 `;
 
 export const DiscussionDetailTitle = styled.h1`

frontend/src/pages/DiscussionListPage/DiscussionListPage.styled.ts

@@ -1,4 +1,14 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+
+const show = keyframes`
+  0% {
+    opacity: 0;
+    }
+
+  100% {
+    opacity: 1;
+  }
+`;
 
 export const DiscussionListPageContainer = styled.div`
   display: flex;
@@ -7,6 +17,9 @@ export const DiscussionListPageContainer = styled.div`
   margin: 4.5rem auto 0;
   width: 100%;
   max-width: 100rem;
+
+  animation: ${show} 0.5s;
+  transition: 0.5s;
 `;
 
 export const TagListWrapper = styled.div`

frontend/src/pages/DiscussionSubmitPage/DiscussionSubmitPage.styled.ts

@@ -1,4 +1,14 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+
+const show = keyframes`
+  0% {
+    opacity: 0;
+    }
+
+  100% {
+    opacity: 1;
+  }
+`;
 
 export const DiscussionSubmitPageContainer = styled.div`
   display: flex;
@@ -7,4 +17,7 @@ export const DiscussionSubmitPageContainer = styled.div`
   margin: 4.5rem auto 0;
   width: 100%;
   max-width: 100rem;
+
+  animation: ${show} 0.5s;
+  transition: 0.5s;
 `;

frontend/src/pages/MissionDetailPage.styled.ts

@@ -1,9 +1,22 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+
+const show = keyframes`
+  0% {
+    opacity: 0;
+    }
+
+  100% {
+    opacity: 1;
+  }
+`;
 
 export const MissionDetailPageContainer = styled.div`
   width: 100rem;
   display: flex;
   flex-direction: column;
   gap: 1rem;
   margin: 0 auto;
+
+  animation: ${show} 0.5s;
+  transition: 0.5s;
 `;

frontend/src/pages/MissionListPage/MissionListPage.styled.ts

@@ -1,4 +1,14 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+
+const show = keyframes`
+  0% {
+    opacity: 0;
+    }
+
+  100% {
+    opacity: 1;
+  }
+`;
 
 export const MissionListPageContainer = styled.div`
   display: flex;
@@ -8,6 +18,9 @@ export const MissionListPageContainer = styled.div`
   margin: 5rem auto;
   width: 100%;
   max-width: 100rem;
+
+  animation: ${show} 0.5s;
+  transition: 0.5s;
 `;
 
 export const MissionListTitle = styled.h2`

frontend/src/pages/MissionSubmitPage.styled.ts

@@ -1,6 +1,19 @@
-import { styled } from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+
+const show = keyframes`
+  0% {
+    opacity: 0;
+    }
+
+  100% {
+    opacity: 1;
+  }
+`;
 
 export const Container = styled.div`
   width: 100rem;
   margin: 0 auto;
+
+  animation: ${show} 0.5s;
+  transition: 0.5s;
 `;

frontend/src/pages/SolutionDetailPage/SolutionDetailPage.styled.ts

@@ -1,7 +1,20 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
+
+const show = keyframes`
+  0% {
+    opacity: 0;
+    }
+
+  100% {
+    opacity: 1;
+  }
+`;
 
 export const SolutionDetailPageContainer = styled.div`
   width: 100rem;
   margin: 0 auto;
   padding-bottom: 10rem;
+
+  animation: ${show} 0.5s;
+  transition: 0.5s;
 `;