💄 design(#98): 새 행성 추가하기 페이지 반응형

src/app/planet/add/page.tsx

@@ -93,6 +93,10 @@ const Layout = styled.div`
   padding: 20px;
   background-color: ${theme.colors.bg};
   position: relative;
+
+  @media (max-height: 570px) {
+    padding-top: 0px;
+  }
 `;
 
 const Container = styled.div`
@@ -107,23 +111,44 @@ const Essential = styled.div`
   color: ${theme.colors.gray400};
   ${(props) => props.theme.fonts.caption03};
   margin-bottom: 17px;
+
+  @media (max-height: 735px) {
+    margin: 0;
+    position: absolute;
+    right: 24px;
+  }
 `;
 
 const Column = styled.div`
   margin-bottom: 40px;
+
+  @media (max-height: 570px) {
+    margin-bottom: 27px;
+  }
 `;
+
 const Label = styled.div`
   color: ${theme.colors.white};
   ${(props) => props.theme.fonts.subtitle};
   margin-bottom: 20px;
+
+  @media (max-height: 735px) {
+    ${theme.fonts.body6}
+    margin-bottom: 12px;
+  }
+
+  @media (max-height: 650px) {
+    ${theme.fonts.body10}
+    margin-bottom: 8px;
+  }
 `;
 
 const Add = styled.div`
   text-align: left;
   color: ${theme.colors.gray400};
   ${(props) => props.theme.fonts.caption04};
   margin-top: 8px;
-  margin-left: 25px;
+  margin-left: 20px;
 `;
 
 const PlanetWrapper = styled.div`

src/components/planet/PlanetPalette.tsx

@@ -37,9 +37,17 @@ export default PlanetPalette;
 
 const Container = styled.div`
   width: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
   padding: 20px;
   border-radius: 8px;
   background: ${theme.colors.gray800};
+
+  @media (max-height: 650px) {
+    height: 51px;
+    padding: 0 17px;
+  }
 `;
 
 const Palettes = styled.div`
@@ -50,11 +58,16 @@ const Palettes = styled.div`
   overflow-x: auto;
   padding: 5px 0;
   gap: 12px;
+
+  @media (max-height: 650px) {
+    justify-content: space-between;
+  }
 `;
 
 const Palette = styled.div<{ $color: string; $selected: boolean }>`
   width: 41px;
   height: 41px;
+  aspect-ratio: 1;
   border-radius: 50%;
   background: ${({ $color }) => $color};
 
@@ -65,13 +78,8 @@ const Palette = styled.div<{ $color: string; $selected: boolean }>`
       filter: drop-shadow(0px 0px 3px rgba(224, 222, 222, 0.377));
     `}
 
-  @media (max-width: 330px) {
-    width: 35px;
-    height: 35px;
-  }
-
-  @media (max-width: 300px) {
-    width: 30px;
-    height: 30px;
+  @media (max-height: 650px) {
+    width: 33px;
+    height: 33px;
   }
 `;