Merge branch 'develop' of https://github.com/D3vPals/frontend into feat/#148

Author: layout-SY

.github/workflows/chromatic.yml

@@ -0,0 +1,25 @@
+name: 'Chromatic'
+
+on:
+  pull_request:
+    branches:
+      - develop
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}

.github/workflows/front_ci.yml

@@ -1,5 +1,8 @@
 name: 'front ci'
-on: pull_request
+on:
+  pull_request:
+    branches:
+      - develop
 jobs:
   Component-test:
     runs-on: ubuntu-latest

package-lock.json

@@ -11,7 +11,8 @@
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build",
     "test": "vitest",
-    "test:run": "vitest run"
+    "test:run": "vitest run",
+    "chromatic": "chromatic --exit-zero-on-changes"
   },
   "dependencies": {
     "@heroicons/react": "^2.2.0",
@@ -50,6 +51,7 @@
     "@types/testing-library__react": "^10.0.1",
     "@vitejs/plugin-react-swc": "^3.5.0",
     "@vitest/ui": "^2.1.8",
+    "chromatic": "^11.25.2",
     "eslint": "^9.17.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",

package.json

@@ -7,7 +7,7 @@ export const Container = styled.div`
   border: 2px solid #f0f0f0;
   border-radius: ${({ theme }) => theme.borderRadius.large};
   width: 80%;
-  min-width: 530px;
+  min-width: 500px;
   height: 80vh;
   padding-bottom: 1rem;
   position: relative;

src/components/common/infoCard/InfoCard.styled.ts

@@ -45,8 +45,8 @@ export const MenuItem = styled.div<{ $isActive: boolean }>`
   background-color: ${({ $isActive }) =>
     $isActive ? '#f9f9f9' : 'transparent'};
 
-  @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
-    font-size: ${({ theme }) => theme.heading['semiSmall'].tabletFontSize};
+  @media ${({ theme }) => theme.mediaQuery.tablet} {
+    font-size: 0.7rem;
   }
 
   &:hover {
@@ -58,9 +58,9 @@ export const MenuItem = styled.div<{ $isActive: boolean }>`
     width: 30px;
     height: 30px;
 
-    @media screen and ${({ theme }) => theme.mediaQuery.tablet} {
-      width: 23px;
-      height: 23px;
+    @media ${({ theme }) => theme.mediaQuery.tablet} {
+      width: 20px;
+      height: 20px;
     }
   }
 `;