Merge pull request #72 from dnd-side-project/develop

🚨 Hotfix v0.3.1 - 사파리에서 포즈픽 레이아웃 깨짐
dnd-side-project · Apr 17, 2024 · a7672f7 · a7672f7
2 parents 63bc5ae + 8766841
commit a7672f7
Show file tree

Hide file tree

Showing 8 changed files with 27 additions and 9 deletions.
diff --git a/src/app/(Main)/pick/page.tsx b/src/app/(Main)/pick/page.tsx
@@ -10,9 +10,11 @@ import PoseImage from '@/components/Modal/PoseImage';
 import { SelectionBasic } from '@/components/Selection';
 import { peopleCountList } from '@/constants/data';
 
+const DEFAULT_IMAGE = '/images/image-frame.png';
+
 export default function Page() {
   const [countState, setCountState] = useState(1);
-  const [image, setImage] = useState<string>('/images/image-frame.png');
+  const [image, setImage] = useState<string>(DEFAULT_IMAGE);
   const [isRendered, setIsRendered] = useState(false);
   const [isLottie, setIsLottie] = useState(true);
   const { refetch } = usePosePickQuery(countState, {
@@ -24,6 +26,11 @@ export default function Page() {
     },
   });
 
+  useEffect(() => {
+    setImage(DEFAULT_IMAGE);
+    setIsRendered(true);
+  }, [countState]);
+
   useEffect(() => {
     setTimeout(() => setIsLottie(false), 2200);
   }, []);

diff --git a/src/app/globals.css b/src/app/globals.css
@@ -11,6 +11,17 @@
   display: none;
 }
 
+body {
+  min-height: 100vh;
+}
+
+@supports (-webkit-touch-callout: none) {
+  body {
+    /* for ios safari 15, safe-area-inset-bottom is 0, so a special fix apply here */
+    min-height: -webkit-fill-available;
+  }
+}
+
 @media (min-width: 440px) {
   html {
     font-size: 16px;

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -49,7 +49,7 @@ export const metadata: Metadata = {
 export default function RootLayout({ children }: { children: React.ReactNode }) {
   return (
     <html lang="ko">
-      <body className="flex min-h-screen w-screen touch-none justify-center bg-slate-100 py-px">
+      <body className="flex w-screen touch-none justify-center bg-slate-100">
         <div className="w-full max-w-440 overflow-scroll bg-white text-primary">
           <Suspense>
             <Analytics />

diff --git a/src/components/Button/BottomFixedDiv.tsx b/src/components/Button/BottomFixedDiv.tsx
@@ -15,7 +15,7 @@ export function BottomDiv({ children }: StrictPropsWithChildren) {
 export function BottomFixedDiv({ children }: StrictPropsWithChildren) {
   return (
     <>
-      <div className={`fixed inset-x-0 bottom-0`}>
+      <div className={`fixed inset-x-0 bottom-0 z-30`}>
         <BottomDiv>{children}</BottomDiv>
       </div>
       <div className="h-100" />

diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx
@@ -18,7 +18,7 @@ export default function Header({
   return (
     <>
       <Spacing size={48} />
-      <div className="fixed inset-x-0 top-0 z-10 mx-auto max-w-440 bg-white">
+      <div className="fixed inset-x-0 top-0 z-30 mx-auto max-w-440 bg-white">
         <div className="flex h-48 items-center justify-between gap-12 px-4 pt-8">
           {close ? <CloseButton /> : <div className="w-4" />}
           <h4 className="flex flex-1">{title}</h4>

diff --git a/src/components/Modal/BottomSheet.tsx b/src/components/Modal/BottomSheet.tsx
@@ -11,13 +11,13 @@ export default function BottomSheet({ children }: StrictPropsWithChildren) {
   return (
     <>
       <div
-        className="fixed inset-x-0 inset-y-0 z-30 bg-dimmed opacity-30"
+        className="fixed inset-x-0 inset-y-0 z-modal bg-dimmed opacity-30"
         onClick={closeBottomSheet}
       />
       <AnimatedPortal
         motionProps={{ initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 } }}
       >
-        <div className="fixed inset-x-0 bottom-0 z-30 mx-auto max-w-440 rounded-t-16 bg-white">
+        <div className="fixed inset-x-0 bottom-0 z-modal mx-auto max-w-440 rounded-t-16 bg-white">
           <div className="flex justify-end px-8 pt-12">
             <IconButton icon={ICON.close.black} onClick={closeBottomSheet} />
           </div>

diff --git a/src/components/Modal/Popup.tsx b/src/components/Modal/Popup.tsx
@@ -10,9 +10,9 @@ interface PopupI extends PropsWithChildren {
 
 export default function Popup({ title, content, children, onClose }: PopupI) {
   return (
-    <div className="fixed inset-x-0 inset-y-0 z-30 flex items-center justify-center">
+    <div className="fixed inset-x-0 inset-y-0 z-modal flex items-center justify-center">
       <div className="fixed inset-x-0 inset-y-0 bg-dimmed opacity-30" onClick={onClose} />
-      <div className="z-30 w-300 rounded-16 bg-white p-16 text-center">
+      <div className="z-modal w-300 rounded-16 bg-white p-16 text-center">
         {(title || content) && (
           <div className="mb-16 py-16">
             <h4 className="mb-8">{title}</h4>

diff --git a/src/components/Modal/PoseImage.tsx b/src/components/Modal/PoseImage.tsx
@@ -12,7 +12,7 @@ export default function PoseImage({ src, responsive = false, onLoad }: DetailedI
     <>
       {isModalShow && (
         <div
-          className="fixed inset-x-0 inset-y-0 z-30 flex items-center justify-center"
+          className="fixed inset-x-0 inset-y-0 z-modal flex items-center justify-center"
           onClick={() => setIsModalShow(false)}
         >
           <div className="fixed inset-x-0 inset-y-0 bg-dimmed opacity-70" />