[Feature] - CI 설정

.github/workflows/frontend-ci.yml

@@ -0,0 +1,60 @@
+name: 'frontend-ci'
+
+on:
+  pull_request:
+    branches:
+      - develop/fe
+    paths:
+      - frontend/**
+defaults:
+  run:
+    working-directory: frontend
+jobs:
+  frontend-ci:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+
+      - name: 노드 버전 설정
+        uses: actions/setup-node@v4
+        with:
+          node-version: '20.15.1'
+
+      - name: 의존성 캐싱
+        id: cache
+        uses: actions/cache@v4
+        with:
+          path: frontend/node_modules
+          key: ${{ runner.os }}-node-${{ hashFiles('**/yarn.lock') }}
+
+      - name: 의존성 설치
+        if: steps.cache.outputs.cache-hit != 'true'
+        run: yarn install --frozen-lockfile
+
+      - name: eslint 실행
+        run: yarn lint
+
+      - name: 빌드 실행
+        run: yarn build
+
+      - name: stylelint 실행
+        run: yarn lint:styled
+
+      - name: 테스트 실행
+        run: yarn test
+
+      - name: 테스트 결과 PR에 코멘트 등록
+        uses: EnricoMi/publish-unit-test-result-action@v2
+        if: always()
+        with:
+          files: frontend/test-results/results.xml
+
+      - name: 테스트 실패 시, 실패한 코드 라인에 Check 코멘트 등록
+        uses: mikepenz/action-junit-report@v3
+        if: always()
+        with:
+          report_paths: frontend/test-results/results.xml
+          token: ${{ secrets.GITHUB_TOKEN }}

frontend/jest.config.js

@@ -24,4 +24,14 @@ module.exports = {
   testEnvironmentOptions: {
     customExportConditions: [""],
   },
+  reporters: [
+    "default",
+    [
+      "jest-junit",
+      {
+        outputDirectory: "test-results",
+        outputName: "results.xml",
+      },
+    ],
+  ],
 };

frontend/package.json

@@ -6,9 +6,10 @@
   "scripts": {
     "dev": "webpack serve --config webpack.common.js",
     "build": "NODE_ENV=production webpack --config webpack.common.js",
-    "lint:styled": "stylelint './src/**/*.ts' --fix",
-    "test": "jest --watchAll",
+    "lint:styled": "stylelint './src/**/*.styled.ts' --fix",
+    "test": "jest --passWithNoTests",
     "storybook": "storybook dev -p 6006",
+    "lint": "eslint src/",
     "build-storybook": "storybook build"
   },
   "dependencies": {
@@ -56,6 +57,7 @@
     "html-webpack-plugin": "^5.6.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
+    "jest-junit": "^16.0.0",
     "msw": "^2.3.2",
     "msw-storybook-addon": "^2.0.3",
     "postcss-styled-syntax": "^0.6.4",

frontend/src/components/common/Carousel/Carousel.styled.ts

@@ -1,6 +1,7 @@
 import styled from "@emotion/styled";
 
 export const CarouselContainer = styled.div`
+  overflow: hidden;
   overflow: hidden;
   position: relative;
 

frontend/src/components/common/Tab/Tab.styled.ts

@@ -23,6 +23,8 @@ export const TabItem = styled.li<{ isSelected: boolean; $tabCount: number }>`
   font-size: 12px;
   text-align: center;
   white-space: nowrap;
+  flex: 0 0 calc(100% / ${({ $tabCount }) => ($tabCount < 3 ? $tabCount : 3)});
   cursor: pointer;
+  border-bottom: 2px solid ${(props) => (props.isSelected ? "#0090ff" : "transparent")};
   transition: all 0.2s ease;
 `;

frontend/src/components/common/TransformBottomSheet/TransformBottomSheet.styled.ts

@@ -22,6 +22,18 @@ const slideDown = keyframes`
 `;
 
 export const BottomSheetLayout = styled.div<{ $isOpen: boolean }>`
+  display: flex;
+  overflow: hidden;
+  position: fixed;
+  bottom: 0;
+  z-index: 1000;
+  width: 100%;
+  height: ${({ $isOpen }) => ($isOpen ? "12rem" : "5rem")};
+
+  background-color: white;
+
+  animation: ${({ $isOpen }) => ($isOpen ? slideUp : slideDown)} 0.3s ease-out;
+  max-width: 48rem;
   display: flex;
   flex-direction: column;
   justify-content: center;
@@ -39,9 +51,11 @@ export const BottomSheetLayout = styled.div<{ $isOpen: boolean }>`
   border-top-left-radius: 20px;
   border-top-right-radius: 20px;
   box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);
+  box-shadow: 0 -2px 10px rgb(0 0 0 / 10%);
 `;
 
 export const BottomSheetContent = styled.div`
+  height: 100%;
   height: 100%;
   padding: 20px;
 
@@ -65,12 +79,12 @@ export const BottomSheetButton = styled.button`
   width: 100%;
   padding: 10px;
   border: none;
-  border-radius: 5px;
 
-  background-color: #007bff;
+  background-color: ${({ theme }) => theme.colors.primary};
 
   color: white;
   font-weight: bold;
   font-size: 16px;
+  border-radius: 5px;
   cursor: pointer;
 `;

frontend/src/components/pages/travelogueDetail/TravelogueDetailPage.styled.ts

@@ -2,6 +2,7 @@ import styled from "@emotion/styled";
 
 export const TitleLayout = styled.section`
   display: flex;
+  margin-top: 5.7rem;
   flex-direction: column;
   gap: 1.6rem;
 `;