From 0630e3c3f03e325aee63f9553544adafee85f993 Mon Sep 17 00:00:00 2001
From: Yesom-Lee <lysowo@devfive.kr>
Date: Thu, 23 Oct 2025 14:25:39 +0900
Subject: [PATCH 1/2] Breakpoints Docs fix

Increase maximum elements for responsive design
---
 .../src/app/(detail)/docs/devup/breakpoints/page.mdx       | 7 ++++---
 1 file changed, 4 insertions(+), 3 deletions(-)

diff --git a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
index 86d981a3..2735d42c 100644
--- a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
@@ -8,20 +8,21 @@ export const metadata = {
 
 # Breakpoints
 
-You can add responsive design by using an array of maximum 5 elements. The viewport ranges of each style
+You can add responsive design by using an array of maximum 6 elements. The viewport ranges of each style
 value in the array are listed below:
 
 - 1st element: ~ 479px,
 - 2nd element: 480px ~ 767px,
 - 3rd element: 768px ~ 991px,
 - 4th element: 992px ~ 1279px,
-- 5th element: 1280px ~
+- 5th element: 1280px ~ 1599px,
+- 6th element : 1600px ~
 
 ## How to use
 
 ```tsx
 const box = (
-  <Box bg={['red', 'blue', 'green', 'yellow', 'purple']} h={25} w={25}>
+  <Box bg={['red', 'blue', 'green', 'yellow', 'purple', 'orange']} h={25} w={25}>
     <Text>Hello</Text>
   </Box>
 )

From 22be93b310fd415c8f8cc14529b23e42aff5d15f Mon Sep 17 00:00:00 2001
From: Yesom-Lee <lysowo@devfive.kr>
Date: Fri, 24 Oct 2025 13:38:29 +0900
Subject: [PATCH 2/2] Refactor Box component usage in documentation

---
 .../src/app/(detail)/docs/devup/breakpoints/page.mdx        | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
index 2735d42c..9bebbe26 100644
--- a/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
+++ b/apps/landing/src/app/(detail)/docs/devup/breakpoints/page.mdx
@@ -22,7 +22,11 @@ value in the array are listed below:
 
 ```tsx
 const box = (
-  <Box bg={['red', 'blue', 'green', 'yellow', 'purple', 'orange']} h={25} w={25}>
+  <Box
+    bg={['red', 'blue', 'green', 'yellow', 'purple', 'orange']}
+    h={25}
+    w={25}
+  >
     <Text>Hello</Text>
   </Box>
 )