style : globalstyle 설정 (#165)

* env : 의존성 설치

* style : root, bottomsheet 너비 설정

* chore : 변경된 스타일에 맞춰 페이지 너비 변경

package.json

@@ -21,6 +21,7 @@
         "axios": "^1.7.7",
         "classnames": "^2.5.1",
         "maplibre-gl": "^4.7.1",
+        "postcss-custom-properties-fallback": "^1.0.2",
         "react": "^18.3.1",
         "react-dom": "^18.3.1",
         "react-icons": "^5.3.0",

postcss.config.cjs

@@ -0,0 +1,11 @@
+module.exports = {
+    plugins: {
+        'postcss-custom-properties-fallback': {
+            importFrom: require.resolve(
+                'react-spring-bottom-sheet/defaults.json'
+            )
+        },
+        tailwindcss: {},
+        autoprefixer: {}
+    }
+};

src/components/Common/NavigationBar/NavigationBar.tsx

@@ -18,7 +18,7 @@ export const NavigationBar = () => {
     ];
 
     return (
-        <nav className="flex justify-around bg-white border-t p-3 fixed bottom-0 w-full z-[999]">
+        <nav className="flex justify-around bg-white border p-3 fixed bottom-0 w-full z-[999] max-w-[475px]">
             {navItems.map((item) => (
                 <div className="flex justify-center flex-1" key={item.id}>
                     <NavigationItem

src/components/Letter/AnimationBottle/AnimationBottle.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 export const AnimationBottle = () => {
     return (
-        <div className="flex justify-center ">
+        <div className="flex justify-center w-full">
             <img
                 src="/유리병_샘플.png"
                 className="object-contain w-24 h-52 animate-wiggle animate-infinite animate-ease-linear"

src/components/MapPage/Maplibre/Maplibre.tsx

@@ -103,7 +103,7 @@ export const Maplibre = () => {
 
     return (
         <div>
-            <div className="mx-auto mt-4 relative h-[812px] w-[768px]">
+            <div className="mx-auto mt-4 relative h-[812px] w-full">
                 <Map
                     initialViewState={viewState}
                     style={{ width: '100%', height: '100%' }}
@@ -133,7 +133,7 @@ export const Maplibre = () => {
                             latitude={letter.latitude}
                         >
                             <div
-                                className="bg-gray-100 p-1 rounded-sm"
+                                className="p-1 bg-gray-100 rounded-sm"
                                 onClick={() =>
                                     alert(`${letter.title}\n${letter.keyword}`)
                                 }

src/index.css

@@ -6,3 +6,19 @@
 .swiper-slide-shadow {
     @apply opacity-0 !important;
 }
+
+@layer base {
+    #root {
+        @apply mx-auto min-w-[375px] max-w-[475px]   bg-white border h-lvh;
+    }
+}
+
+:root {
+    --rsbs-backdrop-bg: rgba(0, 0, 0, 0.6); /* 배경색 */
+    --rsbs-bg: #fff; /* 시트 배경색 */
+    --rsbs-handle-bg: hsla(0, 0%, 0%, 0.14); /* 핸들 배경색 */
+    --rsbs-max-w: 450px; /* 최대 너비 */
+    --rsbs-ml: auto;
+    --rsbs-mr: auto;
+    --rsbs-overlay-rounded: 16px; /* 모서리 반경 */
+}

src/pages/Letter/Create/CreateLetterPage.tsx

@@ -7,7 +7,7 @@ export const CreateLetterPage = () => {
     const navigate = useNavigate();
 
     return (
-        <div className=" w-[375px] max-w-[768px] h-[815px]">
+        <div className="">
             <TopBar
                 handleBackClick={() => {
                     navigate(-1);

src/pages/Letter/SelectItem/SelectItemPage.tsx

@@ -14,7 +14,7 @@ export const SelectItemPage = () => {
     }, []);
 
     return (
-        <div className="w-[375px] max-w-[475px] h-screen max-h-[812px]">
+        <div className="">
             <TopBar
                 handleBackClick={() => {
                     navigate(-1);
@@ -30,6 +30,7 @@ export const SelectItemPage = () => {
             >
                 이제 떠날 준비가 되셨나요
             </h2>
+
             <AnimationBottle />
 
             <SelectItem isActive={isActive} setIsActive={handleIsActive} />

src/pages/Letter/Success/SuccessLetterPage.tsx

@@ -11,7 +11,7 @@ export const SuccessLetterPage = () => {
         navigate('/');
     };
     return (
-        <div className="w-[375px] max-w-[768px] max-h-[815px]">
+        <div className="">
             <Margin top={210} />
             <SuccessModal />
             <Margin top={230} />

src/pages/Map/MapExplorerPage.tsx

@@ -11,11 +11,11 @@ export const MapExplorerPage = () => {
             <div className="relative">
                 <Maplibre />
             </div>
-            <button className="flex-center bottom-96 translate-y-7 absolute left-1/2 transform -translate-x-12 btn-base gap-2 w-52 p-2 rounded-2xl">
+            <button className="absolute gap-2 p-2 transform -translate-x-12 flex-center bottom-96 translate-y-7 left-1/2 btn-base w-52 rounded-2xl">
                 <HiOutlinePencilAlt />
                 지도 편지 작성하기
             </button>
-            <div className="absolute bottom-40 left-1/2 transform -translate-x-1/2">
+            <div className="absolute transform -translate-x-1/2 bottom-40 left-1/2">
                 <LetterInfoContainer
                     title="익명 편지"
                     keyword="가을 바람"

tailwind.config.js

@@ -29,6 +29,7 @@ export default {
     },
     plugins: [
         require('tailwindcss-animated'),
+
         ({ addUtilities }) => {
             addUtilities({
                 '.flex-center': {

yarn.lock

@@ -6464,7 +6464,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"color-name@npm:^1.0.0, color-name@npm:~1.1.4":
+"color-name@npm:^1.0.0, color-name@npm:^1.1.4, color-name@npm:~1.1.4":
   version: 1.1.4
   resolution: "color-name@npm:1.1.4"
   checksum: 10c0/a1a3f914156960902f46f7f56bc62effc6c94e84b2cae157a526b1c1f74b677a47ec602bf68a61abfa2b42d15b7c5651c6dbe72a43af720bc588dff885b10f95
@@ -8926,6 +8926,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"is-url-superb@npm:^4.0.0":
+  version: 4.0.0
+  resolution: "is-url-superb@npm:4.0.0"
+  checksum: 10c0/354ea8246d5b5a828e41bb4ed66c539a7b74dc878ee4fa84b148df312b14b08118579d64f0893b56a0094e3b4b1e6082d2fbe2e3792998d7edffde1c0f3dfdd9
+  languageName: node
+  linkType: hard
+
 "is-weakmap@npm:^2.0.2":
   version: 2.0.2
   resolution: "is-weakmap@npm:2.0.2"
@@ -10316,6 +10323,18 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-custom-properties-fallback@npm:^1.0.2":
+  version: 1.0.2
+  resolution: "postcss-custom-properties-fallback@npm:1.0.2"
+  dependencies:
+    postcss-value-parser: "npm:^4.2.0"
+    postcss-values-parser: "npm:^6.0.2"
+  peerDependencies:
+    postcss: ^8.0.0
+  checksum: 10c0/caad67e3093c87508ee1438e326807126b57a5286066e64f695bf38d35f7e13f9d0a6ffcc0fe0fd61672de2f819b204801368f52a9c9369e989138c0f88d3282
+  languageName: node
+  linkType: hard
+
 "postcss-import@npm:^15.1.0":
   version: 15.1.0
   resolution: "postcss-import@npm:15.1.0"
@@ -10386,6 +10405,19 @@ __metadata:
   languageName: node
   linkType: hard
 
+"postcss-values-parser@npm:^6.0.2":
+  version: 6.0.2
+  resolution: "postcss-values-parser@npm:6.0.2"
+  dependencies:
+    color-name: "npm:^1.1.4"
+    is-url-superb: "npm:^4.0.0"
+    quote-unquote: "npm:^1.0.0"
+  peerDependencies:
+    postcss: ^8.2.9
+  checksum: 10c0/633b8bc7c46f7b6e2b1cb1f33aa0222a5cacb7f485eb41e6f902b5f37ab9884cd8e7e7b0706afb7e3c7766d85096b59e65f59a1eaefac55e2fc952a24f23bcb8
+  languageName: node
+  linkType: hard
+
 "postcss@npm:^8.4.43, postcss@npm:^8.4.47, postcss@npm:^8.4.49":
   version: 8.4.49
   resolution: "postcss@npm:8.4.49"
@@ -10600,6 +10632,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"quote-unquote@npm:^1.0.0":
+  version: 1.0.0
+  resolution: "quote-unquote@npm:1.0.0"
+  checksum: 10c0/eba86bb7f68ada486f5608c5c71cc155235f0408b8a0a180436cdf2457ae86f56a17de6b0bc5a1b7ae5f27735b3b789662cdf7f3b8195ac816cd0289085129ec
+  languageName: node
+  linkType: hard
+
 "randombytes@npm:^2.1.0":
   version: 2.1.0
   resolution: "randombytes@npm:2.1.0"
@@ -12947,6 +12986,7 @@ __metadata:
     maplibre-gl: "npm:^4.7.1"
     msw: "npm:^2.6.6"
     postcss: "npm:^8.4.49"
+    postcss-custom-properties-fallback: "npm:^1.0.2"
     prettier: "npm:^3.3.3"
     react: "npm:^18.3.1"
     react-dom: "npm:^18.3.1"