⚙️반응형 사이즈 설정 (#14)

* feat: 반응형 레이아웃을 위한 mixin responsive-dimensions 구현

* feat: 공용 style의 쉬운 사용을 위해 _index.scss 생성

src/shared/styles/_index.scss

@@ -0,0 +1,3 @@
+@forward 'colors.scss';
+@forward 'fonts.scss';
+@forward 'responsive.scss';

src/shared/styles/responsive.scss

@@ -0,0 +1,54 @@
+@mixin responsive-dimensions($default-width, $default-height) {
+  width: $default-width;
+  height: $default-height;
+
+  @media (min-height: 1px) and (max-height: 480px) {
+    // iPhone 3, 4S
+    width: $default-width * 0.95;
+    height: $default-height * 0.95;
+  }
+  @media (min-height: 481px) and (max-height: 568px) {
+    // iPhone 5, SE 1
+    width: $default-width;
+    height: $default-height;
+  }
+  @media (min-height: 569px) and (max-height: 667px) {
+    // iPhone 6, 6s, 7, 8, SE 2/3
+    height: $default-height * 1.17;
+  }
+  @media (min-height: 668px) and (max-height: 736px) {
+    // iPhone 6+, 6s+, 7+, 8+
+    width: $default-width * 1.22;
+    height: $default-height * 1.22;
+  }
+  @media (min-height: 737px) and (max-height: 812px) {
+    // iPhone X, XS, 11, 12 mini, 13 mini
+    width: $default-width * 1.25;
+    height: $default-height * 1.25;
+  }
+  @media (min-height: 813px) and (max-height: 844px) {
+    // iPhone 12, 12 Pro, 13, 13 Pro, 14, 15
+    width: $default-width * 1.27;
+    height: $default-height * 1.27;
+  }
+  @media (min-height: 845px) and (max-height: 852px) {
+    // iPhone 14 Pro, 15 Pro
+    width: $default-width * 1.27;
+    height: $default-height * 1.27;
+  }
+  @media (min-height: 853px) and (max-height: 896px) {
+    // iPhone XR, XS Max, 11, 11 Pro Max
+    width: $default-width * 1.32;
+    height: $default-height * 1.32;
+  }
+  @media (min-height: 897px) and (max-height: 926px) {
+    // iPhone 12 Pro Max, 13 Pro Max, 14 Plus
+    width: $default-width * 1.32;
+    height: $default-height * 1.32;
+  }
+  @media (min-height: 927px) and (max-height: 932px) {
+    // iPhone 14 Pro Max
+    width: $default-width * 1.35;
+    height: $default-height * 1.35;
+  }
+}