From 2295aad1cff88c400f8c855e2a2f9a0002983392 Mon Sep 17 00:00:00 2001 From: Jeongjin Oh Date: Fri, 25 Oct 2024 01:08:40 +0900 Subject: [PATCH] fix: reflect notch size padding (#234) --- components/Icons/chatIcons.tsx | 6 ++--- .../molecules/cards/ProfileCommentCard.tsx | 2 +- .../organisms/drawer/BottomFlexDrawer.tsx | 4 +-- hooks/custom/useKeypadHeight.ts | 26 +++++++++++++++++++ libs/study/getMyStudyMethods.ts | 1 - libs/study/setStudyToThumbnailInfo.ts | 2 +- pageTemplates/home/HomeStudySection.tsx | 1 - .../SecretSquare/SecretSquareComments.tsx | 7 +++-- pageTemplates/studyPage/StudyPageDrawer.tsx | 1 - pages/study/[id]/[date]/index.tsx | 3 +-- 10 files changed, 39 insertions(+), 14 deletions(-) create mode 100644 hooks/custom/useKeypadHeight.ts diff --git a/components/Icons/chatIcons.tsx b/components/Icons/chatIcons.tsx index ee78eb78c..39bc0fd8c 100644 --- a/components/Icons/chatIcons.tsx +++ b/components/Icons/chatIcons.tsx @@ -6,12 +6,12 @@ export function ChatTalkIcon({ isActive }: { isActive: boolean }) { height="20" rx="10" fill="#A0AEC0" - fill-opacity={isActive ? "0.64" : "0.32"} + fillOpacity={isActive ? "0.64" : "0.32"} /> - + diff --git a/components/molecules/cards/ProfileCommentCard.tsx b/components/molecules/cards/ProfileCommentCard.tsx index dcf26512b..035024ce6 100644 --- a/components/molecules/cards/ProfileCommentCard.tsx +++ b/components/molecules/cards/ProfileCommentCard.tsx @@ -46,7 +46,7 @@ export default function ProfileCommentCard({ setIsCommentModal(false); setIsEdit(false); }; - console.log(rightComponent); + return ( <> diff --git a/components/organisms/drawer/BottomFlexDrawer.tsx b/components/organisms/drawer/BottomFlexDrawer.tsx index 0bdbdf7d6..99ffd5ad8 100644 --- a/components/organisms/drawer/BottomFlexDrawer.tsx +++ b/components/organisms/drawer/BottomFlexDrawer.tsx @@ -94,7 +94,7 @@ export default function BottomFlexDrawer({ setDrawerHeight(currentHeightRef.current); // 스와이프가 임계값보다 짧으면 원래 높이로 복원 } }; - console.log(25, isHideBottom ? "true" : "false", zIndex); + return ( <> {isOverlay && setIsModal(false)} />} @@ -153,7 +153,7 @@ const Layout = styled.div<{ border-top-right-radius: 20px; background-color: white; - z-index: ${(props) => props.zindex || (props.ishide==="true" ? 700 : 500)}; + z-index: ${(props) => props.zindex || (props.ishide === "true" ? 700 : 500)}; padding: 0 20px; padding-bottom: ${(props) => props.isdrawerup === "false" && "12px"}; padding-top: 0; diff --git a/hooks/custom/useKeypadHeight.ts b/hooks/custom/useKeypadHeight.ts new file mode 100644 index 000000000..e1c1e8775 --- /dev/null +++ b/hooks/custom/useKeypadHeight.ts @@ -0,0 +1,26 @@ +import { useEffect, useState } from "react"; + +export function useKeypadHeight() { + const [keypadHeight, setKeypadHeight] = useState(0); + + useEffect(() => { + const handleResize = () => { + const viewportHeight = window.visualViewport + ? window.visualViewport.height + : window.innerHeight; + const windowHeight = window.innerHeight; + + setKeypadHeight(windowHeight - viewportHeight); + }; + if (window.visualViewport) { + window.visualViewport.addEventListener("resize", handleResize); + } + return () => { + if (window.visualViewport) { + window.visualViewport.removeEventListener("resize", handleResize); + } + }; + }, []); + + return keypadHeight; +} diff --git a/libs/study/getMyStudyMethods.ts b/libs/study/getMyStudyMethods.ts index 642215454..4bc58f79e 100644 --- a/libs/study/getMyStudyMethods.ts +++ b/libs/study/getMyStudyMethods.ts @@ -13,7 +13,6 @@ export const convertStudyToParticipations = ( studyVoteData: StudyDailyInfoProps, location: ActiveLocation, ): StudyMergeParticipationProps[] => { - console.log(24, location); if (!studyVoteData || !location) return; const temp: { place: PlaceInfoProps; diff --git a/libs/study/setStudyToThumbnailInfo.ts b/libs/study/setStudyToThumbnailInfo.ts index a013b95fd..95244eebf 100644 --- a/libs/study/setStudyToThumbnailInfo.ts +++ b/libs/study/setStudyToThumbnailInfo.ts @@ -20,7 +20,7 @@ export const setStudyToThumbnailInfo = ( imageCache?: Map, ): StudyThumbnailCardProps[] => { if (!studyData) return []; - console.log(12312313, location); + // 카드 데이터 생성 const cardColData: StudyThumbnailCardProps[] = studyData.map((data, idx) => { const placeInfo = convertMergePlaceToPlace(data.place); diff --git a/pageTemplates/home/HomeStudySection.tsx b/pageTemplates/home/HomeStudySection.tsx index e16f8f618..58827b9d8 100644 --- a/pageTemplates/home/HomeStudySection.tsx +++ b/pageTemplates/home/HomeStudySection.tsx @@ -51,7 +51,6 @@ function HomeStudySection() { setMyStudyParticipation(findMyStudyParticipation); }, [studyVoteData, session]); - console.log(date); const tabOptionsArr: ITabNavOptions[] = [ { text: dayjsToKr(isLeft ? dayjs(date) : dayjs(date).subtract(1, "day")), diff --git a/pageTemplates/square/SecretSquare/SecretSquareComments.tsx b/pageTemplates/square/SecretSquare/SecretSquareComments.tsx index aa4a2aad7..22202c1b9 100644 --- a/pageTemplates/square/SecretSquare/SecretSquareComments.tsx +++ b/pageTemplates/square/SecretSquare/SecretSquareComments.tsx @@ -8,6 +8,7 @@ import UserCommentBlock from "../../../components/molecules/UserCommentBlock"; import UserCommentInput from "../../../components/molecules/UserCommentInput"; import { SECRET_USER_SUMMARY } from "../../../constants/serviceConstants/userConstants"; import { useCommentMutation, useSubCommentMutation } from "../../../hooks/common/mutations"; +import { useKeypadHeight } from "../../../hooks/custom/useKeypadHeight"; import { useUserInfoQuery } from "../../../hooks/user/queries"; import { UserCommentProps } from "../../../types/components/propTypes"; import { IUserSummary } from "../../../types/models/userTypes/userInfoTypes"; @@ -23,6 +24,7 @@ interface SecretSquareCommentsProps { function SecretSquareComments({ author, comments, refetch }: SecretSquareCommentsProps) { const router = useRouter(); const { data: userInfo } = useUserInfoQuery(); + const keypadHeight = useKeypadHeight(); const squareId = router.query.id as string; @@ -123,8 +125,9 @@ function SecretSquareComments({ author, comments, refetch }: SecretSquareComment flex={1} w="100%" backgroundColor="white" - p="16px" - marginBottom={`calc(16px + ${iPhoneNotchSize()}px)`} + px="16px" + pt="16px" + pb={`calc(16px + ${keypadHeight === 0 ? iPhoneNotchSize() : 0}px)`} borderBottom="var(--border)" maxW="var(--max-width)" > diff --git a/pageTemplates/studyPage/StudyPageDrawer.tsx b/pageTemplates/studyPage/StudyPageDrawer.tsx index f9d8d2254..fc82afe68 100644 --- a/pageTemplates/studyPage/StudyPageDrawer.tsx +++ b/pageTemplates/studyPage/StudyPageDrawer.tsx @@ -45,7 +45,6 @@ function StudyPageDrawer({ const router = useRouter(); const searchParams = useSearchParams(); const newSearchParams = new URLSearchParams(searchParams); - console.log(24, isDrawerUp); const [thumbnailCardInfoArr, setThumbnailCardinfoArr] = useState(); const [selectOption, setSelectOption] = useState("인원순"); diff --git a/pages/study/[id]/[date]/index.tsx b/pages/study/[id]/[date]/index.tsx index 558f842b6..707246d20 100644 --- a/pages/study/[id]/[date]/index.tsx +++ b/pages/study/[id]/[date]/index.tsx @@ -56,7 +56,6 @@ export default function Page() { studyVoteData, convertLocationLangTo(locationParam, "kr"), ); - console.log(5, studyVoteData, mergeParticipations); const mergeParticipation = mergeParticipations?.find( (participation) => participation.place._id === id, @@ -72,7 +71,7 @@ export default function Page() { const members = mergeParticipation?.members; const absences = studyVoteData?.participations.find((par) => par.place._id === id)?.absences; - console.log(1234, mergeParticipation); + return ( <> {mergeParticipation && (