diff --git a/frontend/src/components/common/TransformBottomSheet/TransformBottomSheet.styled.ts b/frontend/src/components/common/TransformBottomSheet/TransformBottomSheet.styled.ts
index f2038181..a954d689 100644
--- a/frontend/src/components/common/TransformBottomSheet/TransformBottomSheet.styled.ts
+++ b/frontend/src/components/common/TransformBottomSheet/TransformBottomSheet.styled.ts
@@ -1,33 +1,8 @@
-import { css, keyframes } from "@emotion/react";
 import styled from "@emotion/styled";
 
 import { PRIMITIVE_COLORS } from "@styles/tokens";
 
-const slideUp = keyframes`
-  from {
-    height: 5rem;
-  }
-  to {
-    height: 12rem;
-  }
-`;
-
-const slideDown = keyframes`
-  from {
-    height: 12rem;
-  }
-  to {
-    height: 5rem;
-  }
-`;
-
-export const iconButtonStyle = css`
-  justify-content: center;
-
-  width: 100%;
-`;
-
-export const BottomSheetLayout = styled.div<{ $isOpen: boolean }>`
+export const BottomSheetLayout = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -36,20 +11,20 @@ export const BottomSheetLayout = styled.div<{ $isOpen: boolean }>`
   position: fixed;
   bottom: 0;
   z-index: ${({ theme }) => theme.zIndex.bottomSheet};
-  gap: 1rem;
+  gap: ${({ theme }) => theme.spacing.s};
 
   width: 100%;
-  height: ${({ $isOpen }) => ($isOpen ? "12rem" : "5rem")};
   max-width: 48rem;
-  padding: 1rem;
-  border-radius: 2rem 2rem 0 0;
+  padding: ${({ theme }) => theme.spacing.m};
 
   background-color: ${PRIMITIVE_COLORS.white};
 
-  animation: ${({ $isOpen }) => ($isOpen ? slideUp : slideDown)} 0.3s ease-out;
   box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);
 `;
 
-export const BottomSheetButtonWrapper = styled.div`
+export const BottomSheetButtonContainer = styled.div`
+  display: flex;
+  gap: ${({ theme }) => theme.spacing.m};
+
   width: 100%;
 `;
diff --git a/frontend/src/components/common/TransformBottomSheet/TransformBottomSheet.tsx b/frontend/src/components/common/TransformBottomSheet/TransformBottomSheet.tsx
index c2a53a37..991d1b6f 100644
--- a/frontend/src/components/common/TransformBottomSheet/TransformBottomSheet.tsx
+++ b/frontend/src/components/common/TransformBottomSheet/TransformBottomSheet.tsx
@@ -1,46 +1,30 @@
-import { PropsWithChildren, useState } from "react";
+import { PropsWithChildren } from "react";
+
+import { Button, Text } from "@components/common";
 
-import Button from "../Button/Button";
-import IconButton from "../IconButton/IconButton";
 import * as S from "./TransformBottomSheet.styled";
 
 interface TransformBottomSheetProps {
   buttonLabel: string;
+  travelPrompt: string;
   onTransform?: () => void;
 }
 
 const TransformBottomSheet = ({
   children,
+  travelPrompt,
   buttonLabel,
   onTransform,
 }: PropsWithChildren<TransformBottomSheetProps>) => {
-  const [isOpen, setIsOpen] = useState(true);
-
-  const handleToggle = () => {
-    setIsOpen((prev) => !prev);
-  };
-
   return (
-    <S.BottomSheetLayout $isOpen={isOpen}>
-      {isOpen ? (
-        <>
-          <IconButton
-            iconType="down-arrow"
-            onClick={handleToggle}
-            size="12"
-            css={S.iconButtonStyle}
-          />
-
-          {children}
-          <S.BottomSheetButtonWrapper>
-            <Button variants="primary" onClick={onTransform}>
-              {buttonLabel}
-            </Button>
-          </S.BottomSheetButtonWrapper>
-        </>
-      ) : (
-        <IconButton iconType="up-arrow" onClick={handleToggle} size="12" css={S.iconButtonStyle} />
-      )}
+    <S.BottomSheetLayout>
+      <Text textType="detailBold">{travelPrompt}</Text>
+      <S.BottomSheetButtonContainer>
+        {children}
+        <Button variants="primary" onClick={onTransform}>
+          {buttonLabel}
+        </Button>
+      </S.BottomSheetButtonContainer>
     </S.BottomSheetLayout>
   );
 };
diff --git a/frontend/src/components/pages/travelPlanDetail/TravelPlanDetailPage.styled.ts b/frontend/src/components/pages/travelPlanDetail/TravelPlanDetailPage.styled.ts
index 1fcb61a0..f14d05d0 100644
--- a/frontend/src/components/pages/travelPlanDetail/TravelPlanDetailPage.styled.ts
+++ b/frontend/src/components/pages/travelPlanDetail/TravelPlanDetailPage.styled.ts
@@ -3,6 +3,10 @@ import styled from "@emotion/styled";
 
 import theme from "@styles/theme";
 
+export const TravelPlanDetailLayout = styled.section`
+  padding-bottom: 10rem;
+`;
+
 export const TitleContainer = styled.div`
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/components/pages/travelPlanDetail/TravelPlanDetailPage.tsx b/frontend/src/components/pages/travelPlanDetail/TravelPlanDetailPage.tsx
index db795e6d..aedfdfb1 100644
--- a/frontend/src/components/pages/travelPlanDetail/TravelPlanDetailPage.tsx
+++ b/frontend/src/components/pages/travelPlanDetail/TravelPlanDetailPage.tsx
@@ -108,68 +108,71 @@ const TravelPlanDetailPage = () => {
 
   return (
     <>
+      <S.TravelPlanDetailLayout>
+        <S.TitleContainer>
+          <Text textType="title" css={S.titleStyle}>
+            {data?.title}
+          </Text>
+          {!isUUID(id) && (
+            <S.IconButtonContainer>
+              <IconButton size="16" iconType="share" onClick={handleToggleShareModal} />
+              <div ref={iconButtonContainerRef}>
+                <IconButton
+                  iconType="more"
+                  size="16"
+                  color={theme.colors.text.secondary}
+                  onClick={handleToggleMoreDropdown}
+                />
+                {isDropdownOpen && (
+                  <Dropdown size="small" position="right">
+                    <Text
+                      textType="detail"
+                      onClick={handleClickEditButton}
+                      css={S.cursorPointerStyle}
+                    >
+                      수정
+                    </Text>
+                    <Text
+                      textType="detail"
+                      onClick={handleToggleDeleteModal}
+                      css={S.cursorPointerStyle}
+                    >
+                      삭제
+                    </Text>
+                  </Dropdown>
+                )}
+              </div>
+            </S.IconButtonContainer>
+          )}
+        </S.TitleContainer>
+
+        <S.TextContainer>
+          <Text textType="subTitle">{daysAndNights} 여행 계획 한 눈에 보기</Text>
+          <Text textType="detail">
+            {getDateRange({ daysLength: data?.days.length, startDate: data?.startDate })}
+          </Text>
+        </S.TextContainer>
+
+        <Tab
+          labels={data?.days.map((_, index: number) => `Day ${index + 1}`) ?? []}
+          tabContent={(selectedIndex) => (
+            <TravelPlansTabContent places={data?.days[selectedIndex]?.places ?? []} />
+          )}
+        />
+      </S.TravelPlanDetailLayout>
+
+      <TransformBottomSheet
+        onTransform={handleTransform}
+        buttonLabel="여행기로 전환"
+        travelPrompt="여행은 즐겁게 다녀오셨나요?"
+      />
+
       <ShareModal
         isOpen={isShareModalOpen}
         onToggleModal={handleToggleShareModal}
         shareUrl={shareUrl}
       />
 
-      <S.TitleContainer>
-        <Text textType="title" css={S.titleStyle}>
-          {data?.title}
-        </Text>
-        {!isUUID(id) && (
-          <S.IconButtonContainer>
-            <IconButton size="16" iconType="share" onClick={handleToggleShareModal} />
-            <div ref={iconButtonContainerRef}>
-              <IconButton
-                iconType="more"
-                size="16"
-                color={theme.colors.text.secondary}
-                onClick={handleToggleMoreDropdown}
-              />
-              {isDropdownOpen && (
-                <Dropdown size="small" position="right">
-                  <Text
-                    textType="detail"
-                    onClick={handleClickEditButton}
-                    css={S.cursorPointerStyle}
-                  >
-                    수정
-                  </Text>
-                  <Text
-                    textType="detail"
-                    onClick={handleToggleDeleteModal}
-                    css={S.cursorPointerStyle}
-                  >
-                    삭제
-                  </Text>
-                </Dropdown>
-              )}
-            </div>
-          </S.IconButtonContainer>
-        )}
-      </S.TitleContainer>
-
-      <S.TextContainer>
-        <Text textType="subTitle">{daysAndNights} 여행 계획 한 눈에 보기</Text>
-        <Text textType="detail">
-          {getDateRange({ daysLength: data?.days.length, startDate: data?.startDate })}
-        </Text>
-      </S.TextContainer>
-
-      <Tab
-        labels={data?.days.map((_, index: number) => `Day ${index + 1}`) ?? []}
-        tabContent={(selectedIndex) => (
-          <TravelPlansTabContent places={data?.days[selectedIndex]?.places ?? []} />
-        )}
-      />
-      <TransformBottomSheet onTransform={handleTransform} buttonLabel="여행기로 전환">
-        <Text textType="detail" css={S.transformBottomSheetTextStyle}>
-          여행은 즐겁게 다녀오셨나요?
-        </Text>
-      </TransformBottomSheet>
-
       <DeleteModal
         isOpen={isDeleteModalOpen}
         isPending={isDeletingPending}
diff --git a/frontend/src/components/pages/travelPlanDetail/TravelPlansTabContent/TravelPlansTabContent.styled.ts b/frontend/src/components/pages/travelPlanDetail/TravelPlansTabContent/TravelPlansTabContent.styled.ts
index 75c6fba4..a9fe3bc6 100644
--- a/frontend/src/components/pages/travelPlanDetail/TravelPlansTabContent/TravelPlansTabContent.styled.ts
+++ b/frontend/src/components/pages/travelPlanDetail/TravelPlansTabContent/TravelPlansTabContent.styled.ts
@@ -6,7 +6,7 @@ import theme from "@styles/theme";
 export const BoxContainer = styled.div`
   display: flex;
   flex-direction: column;
-  padding: 3.2rem 1.6rem 6.4rem;
+  padding: 1.6rem;
   gap: 0.8rem;
 `;
 
diff --git a/frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.styled.ts b/frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.styled.ts
index a089b0f1..9e239c9c 100644
--- a/frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.styled.ts
+++ b/frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.styled.ts
@@ -7,6 +7,8 @@ export const TravelogueDetailLayout = styled.section`
   display: flex;
   flex-direction: column;
   gap: ${({ theme }) => theme.spacing.xl};
+
+  padding-bottom: 10rem;
 `;
 
 export const TravelogueDetailHeader = styled.div`
@@ -35,12 +37,11 @@ export const IconButtonContainer = styled.div`
   position: relative;
 
   width: 100%;
-  padding: 0 1.6rem;
 `;
 
 export const LikesContainer = styled.div`
   display: flex;
-  gap: 0.8rem;
+  flex-direction: column;
   align-items: center;
 `;
 
@@ -69,7 +70,3 @@ export const authorDateStyle = css`
 export const cursorPointerStyle = css`
   cursor: pointer;
 `;
-
-export const transformBottomSheetTextStyle = css`
-  ${theme.typography.mobile.detailBold}
-`;
diff --git a/frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.tsx b/frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.tsx
index 89d67194..0f57eb03 100644
--- a/frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.tsx
+++ b/frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.tsx
@@ -106,6 +106,12 @@ const TravelogueDetailPage = () => {
   const { mutate: handleActiveHeart, isPaused: isPostingHeartPaused } = usePostUpdateHeart();
   const { mutate: handleInactiveHeart, isPaused: isDeletingHeartPaused } = useDeleteUpdateHeart();
 
+  const handleHeartClick = () => {
+    if (data?.isLiked) return handleInactiveHeart(id);
+
+    return handleActiveHeart(id);
+  };
+
   if (
     isGettingTraveloguePaused ||
     isDeletingTraveloguePaused ||
@@ -133,62 +139,45 @@ const TravelogueDetailPage = () => {
             <Text textType="title" css={S.titleStyle}>
               {data?.title}
             </Text>
-            <S.AuthorInfoContainer>
-              <Text textType="detail" css={S.authorDateStyle}>
-                {data?.authorNickname}
-              </Text>
-              <Text textType="detail" css={S.authorDateStyle}>
-                {data?.createdAt}
-              </Text>
-            </S.AuthorInfoContainer>
-          </S.TitleContainer>
-          <S.IconButtonContainer>
-            <S.LikesContainer>
-              {data?.isLiked ? (
-                <IconButton
-                  onClick={() => handleInactiveHeart(id)}
-                  iconType="heart"
-                  color={SEMANTIC_COLORS.heart}
-                  size="24"
-                />
-              ) : (
-                <IconButton
-                  onClick={() => handleActiveHeart(id)}
-                  iconType="empty-heart"
-                  size="24"
-                />
+            <S.IconButtonContainer>
+              <S.AuthorInfoContainer>
+                <Text textType="detail" css={S.authorDateStyle}>
+                  {data?.authorNickname}
+                </Text>
+                <Text textType="detail" css={S.authorDateStyle}>
+                  {data?.createdAt}
+                </Text>
+              </S.AuthorInfoContainer>
+              {isAuthor && (
+                <div ref={moreContainerRef}>
+                  <IconButton
+                    iconType="more"
+                    size="16"
+                    color={theme.colors.text.secondary}
+                    onClick={handleToggleMoreDropdown}
+                  />
+                  {isDropdownOpen && (
+                    <Dropdown size="small" position="right">
+                      <Text
+                        textType="detail"
+                        onClick={handleClickEditButton}
+                        css={S.cursorPointerStyle}
+                      >
+                        수정
+                      </Text>
+                      <Text
+                        textType="detail"
+                        onClick={handleToggleDeleteModal}
+                        css={S.cursorPointerStyle}
+                      >
+                        삭제
+                      </Text>
+                    </Dropdown>
+                  )}
+                </div>
               )}
-              <Text textType="detail">{data?.likeCount}</Text>
-            </S.LikesContainer>
-            {isAuthor && (
-              <div ref={moreContainerRef}>
-                <IconButton
-                  iconType="more"
-                  size="16"
-                  color={theme.colors.text.secondary}
-                  onClick={handleToggleMoreDropdown}
-                />
-                {isDropdownOpen && (
-                  <Dropdown size="small" position="right">
-                    <Text
-                      textType="detail"
-                      onClick={handleClickEditButton}
-                      css={S.cursorPointerStyle}
-                    >
-                      수정
-                    </Text>
-                    <Text
-                      textType="detail"
-                      onClick={handleToggleDeleteModal}
-                      css={S.cursorPointerStyle}
-                    >
-                      삭제
-                    </Text>
-                  </Dropdown>
-                )}
-              </div>
-            )}
-          </S.IconButtonContainer>
+            </S.IconButtonContainer>
+          </S.TitleContainer>
         </S.TravelogueDetailHeader>
 
         <S.TravelogueOverview>
@@ -205,13 +194,22 @@ const TravelogueDetailPage = () => {
           )}
         />
       </S.TravelogueDetailLayout>
-      {!isAuthor && (
-        <TransformBottomSheet onTransform={handleTransform} buttonLabel="여행 계획으로 전환">
-          <Text textType="detail" css={S.transformBottomSheetTextStyle}>
-            이 여행기를 따라가고 싶으신가요?
-          </Text>
-        </TransformBottomSheet>
-      )}
+
+      <TransformBottomSheet
+        travelPrompt="이 여행기를 따라가고 싶으신가요?"
+        buttonLabel="여행 계획으로 전환"
+        onTransform={handleTransform}
+      >
+        <S.LikesContainer>
+          <IconButton
+            onClick={handleHeartClick}
+            iconType={data?.isLiked ? "heart" : "empty-heart"}
+            color={data?.isLiked ? SEMANTIC_COLORS.heart : undefined}
+            size="24"
+          />
+          <Text textType="detail">{data?.likeCount}</Text>
+        </S.LikesContainer>
+      </TransformBottomSheet>
 
       <DeleteModal
         isOpen={isDeleteModalOpen}
diff --git a/frontend/src/components/pages/travelogueDetail/TravelogueTabContent/PlaceDetailCard/PlaceDetailCard.styled.ts b/frontend/src/components/pages/travelogueDetail/TravelogueTabContent/PlaceDetailCard/PlaceDetailCard.styled.ts
index 7d208566..7c9612a1 100644
--- a/frontend/src/components/pages/travelogueDetail/TravelogueTabContent/PlaceDetailCard/PlaceDetailCard.styled.ts
+++ b/frontend/src/components/pages/travelogueDetail/TravelogueTabContent/PlaceDetailCard/PlaceDetailCard.styled.ts
@@ -4,7 +4,7 @@ export const PlaceDetailCardLayout = styled.div`
   display: flex;
   flex-direction: column;
   gap: 1.2rem;
-  margin: 2rem 0;
+  margin: 1.6rem 0;
   padding-bottom: 1rem;
   border-bottom: 1px solid #d9d9d9;
 `;
diff --git a/frontend/src/components/pages/travelogueDetail/TravelogueTabContent/TravelogueTabContent.tsx b/frontend/src/components/pages/travelogueDetail/TravelogueTabContent/TravelogueTabContent.tsx
index 87e38d7b..075cb762 100644
--- a/frontend/src/components/pages/travelogueDetail/TravelogueTabContent/TravelogueTabContent.tsx
+++ b/frontend/src/components/pages/travelogueDetail/TravelogueTabContent/TravelogueTabContent.tsx
@@ -53,12 +53,7 @@ const TravelogueTabContent = ({ places }: { places: TraveloguePlace[] }) => {
         >
           여행 장소 살펴보기
         </S.Title>
-        <div
-          style={{
-            paddingBottom: "40px",
-            marginTop: "3.2rem",
-          }}
-        >
+        <div>
           {places.map((place, index) => (
             <PlaceDetailCard
               key={`${place.id}-${index}`}