diff --git a/src/app/(Main)/pick/page.tsx b/src/app/(Main)/pick/page.tsx index 727476d..2d3720f 100644 --- 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('/images/image-frame.png'); + const [image, setImage] = useState(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 index 7601d48..38ab5a2 100644 --- 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 index e9ada8d..f28847b 100644 --- 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 ( - +
diff --git a/src/components/Button/BottomFixedDiv.tsx b/src/components/Button/BottomFixedDiv.tsx index 93e3454..f306cc6 100644 --- 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 ( <> -
+
{children}
diff --git a/src/components/Header/index.tsx b/src/components/Header/index.tsx index 1f7e162..48d3c79 100644 --- a/src/components/Header/index.tsx +++ b/src/components/Header/index.tsx @@ -18,7 +18,7 @@ export default function Header({ return ( <> -
+
{close ? :
}

{title}

diff --git a/src/components/Modal/BottomSheet.tsx b/src/components/Modal/BottomSheet.tsx index e844553..951458a 100644 --- a/src/components/Modal/BottomSheet.tsx +++ b/src/components/Modal/BottomSheet.tsx @@ -11,13 +11,13 @@ export default function BottomSheet({ children }: StrictPropsWithChildren) { return ( <>
-
+
diff --git a/src/components/Modal/Popup.tsx b/src/components/Modal/Popup.tsx index 04476ac..329a38f 100644 --- 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 ( -
+
-
+
{(title || content) && (

{title}

diff --git a/src/components/Modal/PoseImage.tsx b/src/components/Modal/PoseImage.tsx index 17bfa86..1411b90 100644 --- 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 && (
setIsModalShow(false)} >