Merge pull request #62 from tosaken1116/fix/prefecture-Checkboxes-lay…

…out-shift-#61

fix: レイアウトシフトが起こらないように修正

src/components/model/PrefectureCheckBoxes/presentations/css/base.css.ts

@@ -0,0 +1,8 @@
+import { style } from '@vanilla-extract/css';
+
+export const container = style({
+  display: 'flex',
+  flexWrap: 'wrap',
+  alignItems: 'center',
+  position: 'relative',
+});

src/components/model/PrefectureCheckBoxes/presentations/css/error.css.ts

@@ -1,13 +1,5 @@
 import { style } from '@vanilla-extract/css';
 
-export const container = style({
-  display: 'flex',
-  flexWrap: 'wrap',
-  flexDirection: 'column',
-  alignItems: 'center',
-  position: 'relative',
-});
-
 export const errorText = style({
   fontWeight: 'bold',
 });

src/components/model/PrefectureCheckBoxes/presentations/css/index.css.ts

@@ -2,13 +2,6 @@ import { style } from '@vanilla-extract/css';
 
 import { PRIMARY } from '@/constants/colors';
 
-export const container = style({
-  display: 'flex',
-  flexWrap: 'wrap',
-  width: '80%',
-  placeContent: 'center',
-});
-
 export const prefectureItem = style({
   width: '8rem',
   listStyle: 'none',

src/components/model/PrefectureCheckBoxes/presentations/css/loading.css.ts

@@ -1,10 +1,5 @@
 import { style } from '@vanilla-extract/css';
 
-export const container = style({
-  display: 'flex',
-  flexWrap: 'wrap',
-});
-
 export const prefectureItem = style({
   position: 'relative',
   width: '8rem',

src/components/model/PrefectureCheckBoxes/presentations/error.tsx

@@ -1,8 +1,8 @@
 import { faCircleExclamation } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 
+import { container } from './css/base.css';
 import {
-  container,
   errorIcon,
   errorMessage,
   errorText,

src/components/model/PrefectureCheckBoxes/presentations/index.tsx

@@ -1,6 +1,7 @@
 import { usePrefectureCheckBoxes } from '../hooks';
 
-import { container, prefectureItem, selectedItem } from './css/index.css';
+import { container } from './css/base.css';
+import { prefectureItem, selectedItem } from './css/index.css';
 
 import type { Response } from '@/app/api/v1/prefectures/schema';
 

src/components/model/PrefectureCheckBoxes/presentations/loading.tsx

@@ -1,9 +1,5 @@
-import {
-  checkboxStyle,
-  container,
-  labelStyle,
-  prefectureItem,
-} from './css/loading.css';
+import { container } from './css/base.css';
+import { checkboxStyle, labelStyle, prefectureItem } from './css/loading.css';
 
 import { Skeleton } from '@/components/ui/Skeleton';