Fix: Detail뷰 QA (#76)

* fix: detail 페이지 뒤로가기 버튼 핸들링 * fix: 토글 닫기 구현 * fix: 아이콘, 텍스트 가운데정렬 * fix: 토글 css 수정 * fix: 가이드 x 버튼 위치 변경 --------- Co-authored-by: aazkgh <[email protected]>
TEAM-UNITRIP · Oct 3, 2024 · e41100e · e41100e
1 parent c153199
commit e41100e
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 34 deletions.
diff --git a/src/views/Detail/components/Header.tsx → src/views/Detail/components/DetailHeader.tsx b/src/views/Detail/components/Header.tsx → src/views/Detail/components/DetailHeader.tsx
@@ -1,18 +1,19 @@
-import { css } from '@emotion/react';
 import { useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 
 import toggleFavorite from '@/apis/supabase/toggleFavorite';
 import { ArrowLeftIcon, HeartFilledIcon, HeartGrayIcon } from '@/assets/icon';
+import Header from '@/components/Header';
 import LoginModal from '@/components/LoginModal';
 
 interface headerProps {
   isFavorite: boolean;
   setIsFavorite: React.Dispatch<React.SetStateAction<boolean>>;
+  changeCnt: number;
 }
 
-const Header = (props: headerProps) => {
-  const { isFavorite, setIsFavorite } = props;
+const DetailHeader = (props: headerProps) => {
+  const { isFavorite, setIsFavorite, changeCnt } = props;
   const { contentId } = useParams();
 
   const [activateModal, setActivateModal] = useState(false);
@@ -35,29 +36,15 @@ const Header = (props: headerProps) => {
 
   return (
     <>
-      <header css={headerContainer}>
-        <button type="button" onClick={() => navigate('/')}>
-          <ArrowLeftIcon />
-        </button>
-        <button type="button" onClick={favoriteOnClick}>
-          {isFavorite ? <HeartFilledIcon /> : <HeartGrayIcon />}
-        </button>
-      </header>
+      <Header
+        leftIcon={ArrowLeftIcon}
+        leftFn={() => navigate(-Math.abs(changeCnt))}
+        rightIcon={isFavorite ? HeartFilledIcon : HeartGrayIcon}
+        rightFn={favoriteOnClick}
+      />
       {activateModal && <LoginModal onClick={closeModal} />}
     </>
   );
 };
 
-export default Header;
-
-const headerContainer = css`
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-
-  width: 100%;
-  height: 4.8rem;
-  padding: 1.2rem 2rem;
-
-  background-color: transparent;
-`;
+export default DetailHeader;
diff --git a/src/views/Detail/components/PlaceInfo.tsx b/src/views/Detail/components/PlaceInfo.tsx
@@ -1,7 +1,13 @@
 import { css } from '@emotion/react';
 import { useEffect, useRef, useState } from 'react';
 
-import { ArrowDownIcon, CallIcon, ClockIcon, MapPinIcon } from '@/assets/icon';
+import {
+  ArrowToggleClosed,
+  ArrowToggleOpen,
+  CallIcon,
+  ClockIcon,
+  MapPinIcon,
+} from '@/assets/icon';
 import { COLORS, FONTS } from '@/styles/constants';
 
 interface placeInfoProps {
@@ -33,7 +39,7 @@ const PlaceInfo = (props: placeInfoProps) => {
   }, [placeInfo]);
 
   const handleToggle = () => {
-    setIsClose(false);
+    setIsClose((prev) => !prev);
   };
 
   return (
@@ -47,9 +53,14 @@ const PlaceInfo = (props: placeInfoProps) => {
         <div ref={telRef} />
       </div>
       <div css={mapListItem(isClose)}>
-        <ClockIcon />
+        <ClockIcon css={iconCss} />
         <div ref={useTimeRef} css={contentCss(isClose)} />
-        {lineCnt > 1 && isClose && <ArrowDownIcon onClick={handleToggle} />}
+        {lineCnt > 1 &&
+          (isClose ? (
+            <ArrowToggleClosed onClick={handleToggle} css={toggleCss} />
+          ) : (
+            <ArrowToggleOpen onClick={handleToggle} css={toggleCss} />
+          ))}
       </div>
     </section>
   );
@@ -69,21 +80,33 @@ const placeInfoContainer = css`
 const listItem = css`
   display: flex;
   gap: 0.8rem;
-  align-items: center;
 
   color: ${COLORS.gray9};
 
   ${FONTS.Body4};
 `;
 
 const mapListItem = (isClose: boolean) => css`
-  ${listItem};
   align-items: ${isClose ? 'center' : 'flex-start'};
+  position: relative;
+
+  width: 100%;
+
+  ${listItem};
 `;
 
 const contentCss = (isClose: boolean) => css`
   overflow: hidden;
 
-  width: 100%;
   max-height: ${isClose ? '2.2rem' : 'none'};
 `;
+
+const iconCss = css`
+  margin-top: 0.3rem;
+`;
+
+const toggleCss = css`
+  ${iconCss}
+  position: absolute;
+  right: 0;
+`;
diff --git a/src/views/Detail/components/review/Guide.tsx b/src/views/Detail/components/review/Guide.tsx
@@ -70,7 +70,7 @@ const section2Css = css`
 `;
 
 const buttonCss = css`
-  position: fixed;
+  position: absolute;
   top: 2.5rem;
   right: 2.4rem;
 

diff --git a/src/views/Detail/pages/DetailPage.tsx b/src/views/Detail/pages/DetailPage.tsx
@@ -7,8 +7,8 @@ import { DefaultImage } from '@/assets/image';
 import { useAsyncEffect } from '@/hooks/use-async-effect';
 import { COLORS, FONTS } from '@/styles/constants';
 
+import DetailHeader from '../components/DetailHeader';
 import ErrorReport from '../components/ErrorReport';
-import Header from '../components/Header';
 import PlaceInfo from '../components/PlaceInfo';
 import Tab from '../components/Tab';
 import { getDetailCommonRes } from '../utils/getDetailCommon1';
@@ -65,6 +65,7 @@ const DetailPage = () => {
   const contentTypeId = useRef('12');
   const contentIdList = useRef<number[]>([]); //서버에서 받아온 contentnId List
   const kakaoId = sessionStorage.getItem('kakao_id');
+  const changeCnt = useRef(1);
 
   useEffect(() => {
     const fetchData = async () => {
@@ -75,6 +76,10 @@ const DetailPage = () => {
     fetchData();
   }, []);
 
+  useEffect(() => {
+    window.scrollTo(0, 0);
+  }, [selectedTab]);
+
   /** 서버 통신 -> favorite_list 받아오기 */
   useAsyncEffect(async () => {
     if (!kakaoId) return;
@@ -165,6 +170,8 @@ const DetailPage = () => {
   };
 
   const handleTabChange = (tab: string) => {
+    changeCnt.current++;
+
     if (tab === '리뷰') navigate(`/${contentId}/review`);
     else navigate(`/${contentId}`);
     setSelectedTab(tab);
@@ -173,7 +180,11 @@ const DetailPage = () => {
   return (
     <div css={detailContainer}>
       <div css={backgroundImg(placeInfo.imageUrl)}>
-        <Header isFavorite={isFavorite} setIsFavorite={setIsFavorite} />
+        <DetailHeader
+          isFavorite={isFavorite}
+          setIsFavorite={setIsFavorite}
+          changeCnt={changeCnt.current}
+        />
         <span css={title}>{placeInfo.title}</span>
       </div>
       <PlaceInfo placeInfo={placeInfo.info} />