Repository: mongdol-beach/MHMH-Frontend
Pull request #95: 메인, 토픽리스트, 토픽카드 수정
Author: login: DHyeonJ
Labels: name: 🛠️ fix
description: 버그 픽스
Created: 2025-03-11T03:18:56Z | Merged: 2025-03-12T15:28:35Z

# 🎯 이슈 번호

- #97 
- #98
- #99 
- #100
- #101


## 🏁 작업 내용

- fix. 웹에서 다른 페이지 및 뒤로가기 후 다시 접근 하면 이전 선택지가 등장했다가 토픽 넘어가는 현상 수정(랜덤토픽 페이지, 토픽페이지)
- fix. 카드 뒷면 긴 토픽 경우 no이 영역을 이탈하는 현상 수정
- fix. 토픽 리스트에서 끝까지 내리고 나면 맨 위로 간헐적으로 안 올라가는 현상 수정
- fix. 메인 화면 영역 수정 vh -> dvh
- fix. 아이폰 카드 스와이프 잘 안되는 현상 수정

## 💬 리뷰 요구 사항

-

## 📢 참고 사항

-



Diff:
diff --git a/src/components/Card/CardBack/index.tsx b/src/components/Card/CardBack/index.tsx
index e4fe2b7..544e795 100644
--- a/src/components/Card/CardBack/index.tsx
+++ b/src/components/Card/CardBack/index.tsx
@@ -33,12 +33,17 @@ function CardBack({ situationName, id, content, $situationColor }: CardProps) {
       <S.Card $situationColor={$situationColor}>
         <CardDotEffect $color={$situationColor} />
         <S.Box>
-          <S.SubTitle $situationColor={$situationColor}>
-            No.
-            <S.CardIndex $situationColor={$situationColor}>
-              {id}&ensp;#{situationName} 토픽
-            </S.CardIndex>
-          </S.SubTitle>
+          <S.TopicIndexInfoBox>
+            <S.CardIndexBox $situationColor={$situationColor}>
+              <S.SubTitle $situationColor={$situationColor}>No.</S.SubTitle>
+              <S.CardIndex $situationColor={$situationColor}>{id}</S.CardIndex>
+            </S.CardIndexBox>
+            <S.TopicBox>
+              <S.TopicTitle $situationColor={$situationColor}>
+                #{situationName} 토픽
+              </S.TopicTitle>
+            </S.TopicBox>
+          </S.TopicIndexInfoBox>
           <S.Title>{content}</S.Title>
           <S.TipBox>
             <S.TipText>
diff --git a/src/components/Card/CardBack/styled.ts b/src/components/Card/CardBack/styled.ts
index a8c62af..35ad4a5 100644
--- a/src/components/Card/CardBack/styled.ts
+++ b/src/components/Card/CardBack/styled.ts
@@ -32,30 +32,57 @@ export const Box = styled.div`
   transform: translateX(-50%);
 `;
 
+export const TopicIndexInfoBox = styled.div`
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 2rem;
+  left: 30%;
+  transform: translateX(-30%);
+  width: 70%;
+`;
+
+export const CardIndexBox = styled.div<CardStyleProps>`
+  display: flex;
+  flex-direction: row;
+  gap: 0.3rem;
+`;
+
 export const SubTitle = styled.p<CardStyleProps>`
+  display: flex;
+  align-items: flex-end;
   color: ${(props) => ensureHexColor(props.$situationColor?.mainCardColor)};
   font-family: "esamanru OTF";
   font-size: 0.75rem;
   line-height: 150%; /* 1.3125rem */
-  display: flex;
-  align-items: flex-end;
-  gap: 0.2rem;
-  position: absolute;
-  top: 2rem;
-  left: 30%;
-  transform: translateX(-50%);
 `;
 
 export const CardIndex = styled.span<CardStyleProps>`
+  display: flex;
+  align-items: center;
   color: ${(props) => ensureHexColor(props.$situationColor?.mainCardColor)};
   font-family: Pretendard;
   font-size: 1.125rem;
   font-weight: 600;
   line-height: 150%;
   letter-spacing: -0.0225rem;
+`;
+
+export const TopicBox = styled.div`
+  flex-grow: 1;
+  text-align: right;
+  margin-left: 0.5rem;
+`;
+
+export const TopicTitle = styled.span<CardStyleProps>`
   display: flex;
-  flex-direction: row;
-  gap: 0.5rem;
+  align-items: center;
+  color: ${(props) => ensureHexColor(props.$situationColor?.mainCardColor)};
+  font-family: Pretendard;
+  font-size: 1.125rem;
+  font-weight: 600;
+  line-height: 150%;
+  letter-spacing: -0.0225rem;
 `;
 
 export const Title = styled.p`
diff --git a/src/components/Layout/styled.ts b/src/components/Layout/styled.ts
index 788ffe5..ed61e84 100644
--- a/src/components/Layout/styled.ts
+++ b/src/components/Layout/styled.ts
@@ -39,9 +39,9 @@ export const InstructionPanelContent = styled(PanelContent)`
 
 export const MainContent = styled.main`
   background: ${(props) => props.theme.colors["--card-color-blue-100"]};
-  height: 100vh;
+  height: 100dvh;
   flex: 0 0 375px;
-  min-height: 100vh;
+  min-height: 100dvh;
   margin: 0 auto;
 `;
 
diff --git a/src/components/Main/styled.ts b/src/components/Main/styled.ts
index 4e766c0..d215b5d 100644
--- a/src/components/Main/styled.ts
+++ b/src/components/Main/styled.ts
@@ -2,7 +2,7 @@ import styled from "styled-components";
 
 export const Container = styled.main`
   width: 100%;
-  height: 100vh;
+  min-height: 100dvh;
 `;
 
 export const TitleBox = styled.div`
@@ -68,7 +68,7 @@ export const ContentBox = styled.div`
   padding: 0 1rem;
 
   @media screen and (min-width: 1024px) {
-    height: calc(100vh - 282px);
+    height: calc(100dvh - 282px);
   }
 `;
 
diff --git a/src/components/Modal/styled.ts b/src/components/Modal/styled.ts
index eea7aa1..5b56f97 100644
--- a/src/components/Modal/styled.ts
+++ b/src/components/Modal/styled.ts
@@ -24,7 +24,7 @@ export const Container = styled.div<{ $isOpen: boolean }>`
   left: 50%;
   transform: translate(-50%, -50%);
   width: 100%;
-  height: 100vh;
+  height: 100dvh;
   background-color: rgba(0, 0, 0, 0.3);
   animation: ${({ $isOpen }) => ($isOpen ? openEffect : closeEffect)} 0.25s ease;
   z-index: 999;
diff --git a/src/components/TopicsBySituation/styled.ts b/src/components/TopicsBySituation/styled.ts
index 3265583..411c6d3 100644
--- a/src/components/TopicsBySituation/styled.ts
+++ b/src/components/TopicsBySituation/styled.ts
@@ -6,7 +6,9 @@ import { ensureHexColor } from "../Card";
 export const Main = styled.main<CardStyleProps>`
   background: ${(props) =>
     ensureHexColor(props.$situationColor?.backgroundColor)};
-  min-height: 100vh;
+  height: calc(100dvh - 53px);
+  overflow: hidden;
+  touch-action: none;
 `;
 
 export const SituationBox = styled.div`
diff --git a/src/hooks/useRandomTopics.ts b/src/hooks/useRandomTopics.ts
index c659362..ddca2e4 100644
--- a/src/hooks/useRandomTopics.ts
+++ b/src/hooks/useRandomTopics.ts
@@ -22,6 +22,7 @@ export const useRandomTopics = () => {
       return pagination.page + 1;
     },
     initialPageParam: 1,
+    refetchOnWindowFocus: false,
   });
 };
 
diff --git a/src/hooks/useTopicsBySituation.ts b/src/hooks/useTopicsBySituation.ts
index 541a415..201da68 100644
--- a/src/hooks/useTopicsBySituation.ts
+++ b/src/hooks/useTopicsBySituation.ts
@@ -13,5 +13,6 @@ export const useTopicsBySituation = (situationId: string) => {
     queryKey: ["topicsBySituation", situationId],
     queryFn: () =>
       instance.get(`/topic/situation/${situationId}`).then((res) => res.data),
+    refetchOnWindowFocus: false,
   });
 };


Reviews:
user: login: m9-m9
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T13:20:34Z
user: login: m9-m9
body: - 97번 이슈에 탭전환도 포함인가요 ? 제가 로컬에서 코드 풀받아서 확인 해본 결과 아직 탭 전환시에 새로 요청하고 있습니다ㅜ 


https://github.com/user-attachments/assets/fc7c43a3-136e-4af9-95f6-aa808d1d382b






state: DISMISSED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T13:21:05Z
user: login: DHyeonJ
state: COMMENTED
author_association: CONTRIBUTOR
submitted_at: 2025-03-11T13:52:19Z
user: login: donghoon-song
state: APPROVED
author_association: CONTRIBUTOR
submitted_at: 2025-03-12T13:28:53Z

Review comments:
path: src/components/Layout/styled.ts
user: login: m9-m9
body: dvh, lvh, svh 개념들은 처음봤어요 이거로 다 해결하셨군요 
created_at: 2025-03-11T13:20:34Z
author_association: CONTRIBUTOR
path: src/components/Layout/styled.ts
user: login: DHyeonJ
body: @coffeeJMG 네네 모바일 환경 고려하려면 dvh가 좋더라구요 주소창 있든 없든 현재 화면에서 계산된다고 알고 있어서 사용했습니다!
created_at: 2025-03-11T13:52:19Z
author_association: CONTRIBUTOR

PR comments:
user: login: github-actions[bot]
created_at: 2025-03-11T03:19:46Z
body: 🎉 구현한 기능 Preview: https://mhmh-b5ulbgrzc-woohyeoks-projects.vercel.app
author_association: NONE
user: login: donghoon-song
created_at: 2025-03-12T13:28:32Z
body: 고생하셨어요!! 굿굿
author_association: CONTRIBUTOR