From 69e297a957c5c66e29d074109f8bbc7c652ee3e3 Mon Sep 17 00:00:00 2001
From: WONYOUNG-HC <whdnjsdud551@gmail.com>
Date: Tue, 20 Aug 2024 01:35:29 +0900
Subject: [PATCH] feat: implement mobile view on not found, ready state

---
 src/components/NotFound.tsx   | 19 +++++++++++++++++++
 src/components/ReadyState.tsx | 19 +++++++++++++++++++
 2 files changed, 38 insertions(+)

diff --git a/src/components/NotFound.tsx b/src/components/NotFound.tsx
index 4c8553ab..3caadb58 100644
--- a/src/components/NotFound.tsx
+++ b/src/components/NotFound.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { ReactComponent as BittenPotato } from '@assets/potato_bitten.svg';
+import { media } from '@theme/media';
 
 const NotFound = () => {
   return (
@@ -52,6 +53,19 @@ const Wrapper = styled.div`
     border: 4px solid ${({ theme }) => theme.colors.primary100_1};
     z-index: 100;
   }
+
+  ${media.landscape`
+    h1 {
+      font-size: 20px;
+    }
+
+    button {
+      padding: 12px 28px;
+      margin-top: 20px;
+      font-size: 16px;
+      border-radius: 80px;
+    }
+  `}
 `;
 
 const StyledBittenPotato = styled(BittenPotato)`
@@ -59,6 +73,11 @@ const StyledBittenPotato = styled(BittenPotato)`
   width: 180px;
   height: 140px;
   margin-bottom: 16px;
+
+  ${media.landscape`
+    width: 140px;
+    height: 120px;
+  `}
 `;
 
 export default NotFound;
diff --git a/src/components/ReadyState.tsx b/src/components/ReadyState.tsx
index 416132ed..1e213820 100644
--- a/src/components/ReadyState.tsx
+++ b/src/components/ReadyState.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styled from 'styled-components';
 import { ReactComponent as WorkingPotato } from '@assets/potato_working.svg';
+import { media } from '@theme/media';
 
 const ReadyState = () => {
   return (
@@ -47,12 +48,30 @@ const Wrapper = styled.div`
     cursor: pointer;
     border: 4px solid ${({ theme }) => theme.colors.primary100_1};
   }
+
+  ${media.landscape`
+    h1 {
+      font-size: 20px;
+    }
+
+    button {
+      padding: 12px 28px;
+      margin-top: 20px;
+      font-size: 16px;
+      border-radius: 80px;
+    }
+  `}
 `;
 
 const StyledWorkingPotato = styled(WorkingPotato)`
   width: 180px;
   height: 140px;
   margin-bottom: 16px;
+
+  ${media.landscape`
+    width: 140px;
+    height: 120px;
+  `}
 `;
 
 export default ReadyState;