A

Merge remote-tracking branch 'origin' into feat/#159

Author: YouD0313

.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

@@ -10,10 +10,15 @@ export const CareerContainer = styled.div`
   gap: 15px;
   width: 100%;
   margin-bottom: 10px;
+
+  @media (max-width: 963px) {
+    flex-direction: column;
+    gap: 10px;
+  }
 `;
 
 export const AddButton = styled(Button)`
-  width: 5%;
+  width: 50px;
   padding: 10px;
   cursor: pointer;
   border: 1px solid ${({ theme }) => theme.color.border};

src/components/applyComponents/careersComponent/CareersComponent.styled.ts

@@ -39,6 +39,22 @@ export const CareerInput = styled.input`
     flex: 2;
     font-size: ${({ theme }) => theme.heading.small.fontSize};
   }
+
+  @media (max-width: 963px) {
+    width: 100%;
+    flex: 1;
+    margin-bottom: 10px;
+
+    &:nth-child(1),
+    &:nth-child(4) {
+      flex: 1;
+    }
+
+    &:nth-child(2),
+    &:nth-child(3) {
+      flex: 1;
+    }
+  }
 `;
 
 export const FormError = styled.p`

src/components/applyComponents/careersComponent/careersInputComponent/CareersComponentInput.styled.ts

@@ -33,7 +33,7 @@ export const FormError = styled.p`
   font-size: 1rem;
   color: ${({ theme }) => theme.color.red};
   position: absolute;
-  top: 100%;
-  left: 0;
+  top: 115%;
+  left: 5px;
   white-space: nowrap;
 `;

src/components/applyComponents/phoneComponent/PhoneComponent.styled.ts

@@ -7,10 +7,15 @@ export const CommonButton = styled.button<Omit<ButtonProps, 'children'>>`
   color: ${({ theme, schema }) => theme.buttonScheme[schema].color};
   background-color: ${({ theme, schema }) => theme.buttonScheme[schema].bg};
   border-radius: ${({ theme, radius }) => theme.borderRadius[radius]};
-  pointer-events: ${({ disabled }) => (disabled ? 'none' : 'auto')};
-  cursor: ${({ disabled }) => (disabled ? 'none' : 'pointer')};
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
 
   display: flex;
   justify-content: center;
   align-items: center;
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.9;
+    background-color: ${({ theme }) => theme.color.grey};
+  }
 `;

src/components/common/Button/Button.styled.ts

@@ -23,7 +23,7 @@ function Header() {
 
   return (
     <S.HeaderContainer>
-      <Link to={ROUTES.home}>
+      <Link to={ROUTES.main}>
         <img src={Mainlogo} alt='logo' />
       </Link>
       <nav className='auth'>

src/components/common/header/Header.tsx

@@ -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;