feat: 헤더 클릭 시 상단으로 스크롤

Author: denshou

src/components/Modal.tsx

@@ -4,7 +4,7 @@ import { createPortal } from 'react-dom';
 // import { spawn } from 'child_process';
 
 export default function Modal() {
-  const { modal, closeModal } = useModalStore();
+  const { modal } = useModalStore();
   if (!modal.isOpen) return null;
   return createPortal(
     <div

src/components/MoreOptionsSelect.tsx

@@ -29,7 +29,10 @@ function MoreOptionsSelect({ items }: MoreOptionsSelectProps) {
     <div className="relative flex" ref={selectRef}>
       <button
         className="flex justify-center items-center cursor-pointer w-6 h-6"
-        onClick={() => setIsSelectOpen((prev) => !prev)}
+        onClick={(e) => {
+          e.stopPropagation();
+          setIsSelectOpen((prev) => !prev);
+        }}
       >
         <img src={ellipsisIcon} alt="더보기" />
       </button>

src/layouts/Layout.tsx

@@ -5,6 +5,7 @@ import HeaderWithBack from '@/layouts/header/HeaderWithBack';
 import HeaderChat from '@/layouts/header/HeaderChat';
 import { twMerge } from 'tailwind-merge';
 import PostButton from '@/components/PostButton';
+import { useRef } from 'react';
 
 function Layout() {
   const location = useLocation(); // 현재 URL 가져오기
@@ -47,16 +48,28 @@ function Layout() {
 
   const hasPostButton = location.pathname === '/home' || location.pathname === '/mypage';
 
+  //헤더 클릭 시 스크롤
+  const scrollContainerRef = useRef<HTMLDivElement>(null); // 스크롤 컨테이너 참조
+
+  const handleScrollToTop = () => {
+    if (scrollContainerRef.current) {
+      scrollContainerRef.current.scrollTo({ top: 0, behavior: 'smooth' });
+    }
+  };
+
   return (
-    <div className="relative max-w-[600px] min-w-[320px] w-full min-h-screen mx-auto bg-background flex flex-col">
+    <div
+      ref={scrollContainerRef}
+      className="relative max-w-[600px] min-w-[320px] w-full h-screen mx-auto bg-background flex flex-col overflow-y-auto scroll"
+    >
       {/* 헤더 */}
-      {renderHeader()}
+      <div onClick={handleScrollToTop}>{renderHeader()}</div>
 
       {/* 메인 컨텐츠 영역 */}
       <div
         className={twMerge(
           'pt-[44px] flex-1 flex justify-center w-full px-3',
-          // showNav && 'pb-[62px] ', // 하단 네비게이션 숨길때만 padding주기
+          showNav && 'pb-[62px] ', // 하단 네비게이션 숨길때만 padding주기
         )}
       >
         <Outlet />

src/layouts/header/HeaderChat.tsx

@@ -57,7 +57,9 @@ function HeaderChat({ showLogo = false, showNickname = false }: HeaderChatProps)
 
         {/* 나가기 버튼 */}
         <button
-          onClick={() =>
+          onClick={(e) => {
+            e.stopPropagation();
+
             openModal({
               title: '이 대화를 마무리할까요?',
               message: '채팅을 종료하면 다시 복구할 수 없습니다.',
@@ -69,8 +71,8 @@ function HeaderChat({ showLogo = false, showNickname = false }: HeaderChatProps)
                 console.log('취소');
                 closeModal();
               },
-            })
-          }
+            });
+          }}
           className="cursor-pointer"
         >
           <img src={exitIcon} alt="나가기" />

src/layouts/header/HeaderWithBack.tsx

@@ -1,6 +1,8 @@
 import { addBlockList } from '@/apis/blockList';
 import MoreOptionsSelect from '@/components/MoreOptionsSelect';
 import HedaerLayout from '@/layouts/header/HedaerLayout';
+import { useModalStore } from '@/store/modalStore';
+import { useSheetStore } from '@/store/sheetStore';
 import backIcon from '@assets/icons/back-icon.svg';
 import { useNavigate, useParams } from 'react-router';
 
@@ -13,21 +15,48 @@ interface HeaderWithBackProps {
 function HeaderWithBack({ showMoreOptions = false, text }: HeaderWithBackProps) {
   const navigate = useNavigate();
   const param = useParams();
+
+  const { openModal, closeModal } = useModalStore();
+  const { currentRecord } = useSheetStore();
   // 임시함수
   const handleBlockUser = async () => {
-    console.log(param.userId);
-    if (param.userId) {
-      const data = await addBlockList(param.userId);
-      console.log(data);
+    if (!param.userId || !currentRecord) {
+      console.log('차단 실패');
+      return;
     }
+
+    openModal({
+      title: `${currentRecord?.nickName}님을 차단할까요?`,
+      message: '차단된 사용자는 더이상 피드에 나타나지 않습니다',
+      onConfirm: async () => {
+        if (param.userId) {
+          try {
+            const data = await addBlockList(param.userId);
+            closeModal();
+            console.log(data);
+          } catch (error) {
+            console.log(error);
+          }
+        }
+      },
+      onCancel: () => {
+        closeModal();
+      },
+    });
   };
 
   return (
     <HedaerLayout>
       <div className="flex items-center justify-between w-full">
         {/* 뒤로가기 / 회원가입 */}
         <div className="gap-[10px] flex items-center">
-          <button onClick={() => navigate(-1)} className="px-2 py-3 cursor-pointer">
+          <button
+            onClick={(e) => {
+              e.stopPropagation();
+              navigate(-1);
+            }}
+            className="px-2 py-3 cursor-pointer"
+          >
             <img src={backIcon} alt="뒤로가기 아이콘" />
           </button>
           {text && <span className="h4-b text-primary-normal">{text}</span>}

src/pages/chat/Chat.tsx

@@ -14,31 +14,31 @@ export default function Chat({}) {
     getChatList();
   }, []);
 
-  const mockData = [
-    {
-      chatroom_id: 3,
-      nickname: '길동이',
-      emotion: '행복한',
-      spotify_id: 33,
-      title: '라일락',
-      artist: '아이유',
-      album_image:
-        'https://i.namu.wiki/i/L4gbrOjwTsNcvpsCq8b4P-3eX9Cs0lrIvwHxtFE7S5jaeMsbdelvBqCLMwe6AJJw2zBQqSI4wE0_Qn-EwaeZdnLvseFvt1w9dg-xo9KrFF_GacO_R7BnHI6XRyDDXvr-PHMmSEnqgcrzLjdbQF9obA.webp',
-      created_at: '2025-02-19',
-      comment: '흠흠',
-    },
-    {
-      chatroom_id: 1,
-      nickname: '철수',
-      emotion: '우울한',
-      spotify_id: 88,
-      title: 'Blue Sky',
-      artist: 'Cool Band',
-      album_image: null,
-      created_at: '2025-02-10',
-      comment: '김밥',
-    },
-  ];
+  // const mockData = [
+  //   {
+  //     chatroom_id: 3,
+  //     nickname: '길동이',
+  //     emotion: '행복한',
+  //     spotify_id: 33,
+  //     title: '라일락',
+  //     artist: '아이유',
+  //     album_image:
+  //       'https://i.namu.wiki/i/L4gbrOjwTsNcvpsCq8b4P-3eX9Cs0lrIvwHxtFE7S5jaeMsbdelvBqCLMwe6AJJw2zBQqSI4wE0_Qn-EwaeZdnLvseFvt1w9dg-xo9KrFF_GacO_R7BnHI6XRyDDXvr-PHMmSEnqgcrzLjdbQF9obA.webp',
+  //     created_at: '2025-02-19',
+  //     comment: '흠흠',
+  //   },
+  //   {
+  //     chatroom_id: 1,
+  //     nickname: '철수',
+  //     emotion: '우울한',
+  //     spotify_id: 88,
+  //     title: 'Blue Sky',
+  //     artist: 'Cool Band',
+  //     album_image: null,
+  //     created_at: '2025-02-10',
+  //     comment: '김밥',
+  //   },
+  // ];
 
   if (!chatList.length) {
     return (

src/pages/home/Home.tsx

@@ -119,8 +119,9 @@ function Home() {
         </h2>
         <EmotionFilter onEmotionClick={onEmotionClick} selectedEmotion={selectedEmotion} />
       </div>
+
       {/* 메인카드 리스트 */}
-      <div className="h-[calc(100vh-334px-env(safe-area-inset-bottom,16px))] overflow-y-auto scroll">
+      <div className='flex-1'>
         {emotionRecords?.pages[0].records.length > 0 ? (
           <>
             <div className="flex flex-col items-center gap-2.5 pb-5 ">

src/pages/userprofile/UserProfile.tsx

@@ -141,7 +141,7 @@ function UserProfile({ isMyPage }: { isMyPage: boolean }) {
   }, [inView]);
 
   return (
-    <div className="w-full h-[calc(100vh-112px-env(safe-area-inset-bottom,16px))] overflow-y-auto noScroll">
+    <div className="w-full">
       <div className="flex flex-col items-center w-full h-full gap-4 py-4">
         <div className="flex flex-col items-center">
           <span className="h3-b">{userData?.data?.nickname}</span>

src/styles/index.css

@@ -3,8 +3,7 @@
 @import '@styles/typography.css';
 @import '@styles/scrollbar.css';
 
-  
-html {
+body {
   overflow-x: hidden;
-  overflow-y: hidden;
+  /* overflow-y: hidden; */
 }