refactor(TransformBottomSheet): UI 수정 및 내용 bottom sheet에 의해 가려지는 문제 해결

woowacourse-teams · Sep 24, 2024 · b726a04 · b726a04
1 parent c474af4
commit b726a04
Show file tree

Hide file tree

Showing 9 changed files with 149 additions and 193 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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/...c/components/pages/travelPlanDetail/TravelPlansTabContent/TravelPlansTabContent.styled.ts b/...c/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
@@ -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}
-`;