[FE] refactor: stylelint 도입 (#586)

* chore: stylelint 설정 * refactor: stylelint 적용
woowacourse-teams · Sep 11, 2023 · 6b526f8 · 6b526f8
1 parent fc0a8cc
commit 6b526f8
Show file tree

Hide file tree

Showing 44 changed files with 4,121 additions and 1,845 deletions.
diff --git a/frontend/.stylelintrc.js b/frontend/.stylelintrc.js
@@ -0,0 +1,15 @@
+const { propertyOrdering, selectorOrdering } = require('stylelint-semantic-groups');
+
+propertyOrdering[0] = propertyOrdering[0].map((rule) => {
+  rule.emptyLineBefore = 'never';
+  return rule;
+});
+
+module.exports = {
+  plugins: ['stylelint-order'],
+  customSyntax: 'postcss-styled-syntax',
+  rules: {
+    'order/order': selectorOrdering,
+    'order/properties-order': propertyOrdering,
+  },
+};
diff --git a/frontend/package.json b/frontend/package.json
@@ -8,7 +8,7 @@
     "build": "webpack --config webpack.prod.js",
     "build-dev": "webpack --config webpack.dev.js",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build",
+    "lint:styled": "stylelint './src/**/*.tsx' --fix",
     "test": "jest",
     "test:coverage": "jest --watchAll --coverage"
   },
@@ -61,8 +61,13 @@
     "jest-junit": "^16.0.0",
     "msw": "^1.2.3",
     "msw-storybook-addon": "^1.8.0",
+    "postcss": "^8.4.29",
+    "postcss-styled-syntax": "^0.4.0",
     "prettier": "^2.8.8",
     "storybook": "^7.1.1",
+    "stylelint": "^15.10.3",
+    "stylelint-order": "^6.0.3",
+    "stylelint-semantic-groups": "^1.2.0",
     "ts-jest": "^29.1.1",
     "ts-loader": "^9.4.4",
     "typescript": "^5.1.6",

diff --git a/frontend/src/components/Common/Carousel/Carousel.tsx b/frontend/src/components/Common/Carousel/Carousel.tsx
@@ -44,8 +44,8 @@ const CarouselContainer = styled.div`
 
 const CarouselWrapper = styled.ul<{ currentIndex: number }>`
   display: flex;
-  transition: ${({ currentIndex }) => (currentIndex === length - 1 ? '' : 'all 0.5s ease-in-out')};
   transform: ${({ currentIndex }) => 'translateX(-' + currentIndex * CAROUSEL_WIDTH + 'px)'};
+  transition: ${({ currentIndex }) => (currentIndex === length - 1 ? '' : 'all 0.5s ease-in-out')};
 `;
 
 const CarouselItem = styled.li`

diff --git a/frontend/src/components/Common/Header/Header.tsx b/frontend/src/components/Common/Header/Header.tsx
@@ -19,8 +19,8 @@ export default Header;
 
 const HeaderContainer = styled.header`
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   width: 100%;
   height: 60px;
 `;
diff --git a/frontend/src/components/Common/ImageUploader/ImageUploader.tsx b/frontend/src/components/Common/ImageUploader/ImageUploader.tsx
@@ -36,13 +36,13 @@ export default ImageUploader;
 
 const ImageUploadLabel = styled.label`
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   width: 92px;
   height: 95px;
-  background: ${({ theme }) => theme.colors.gray1};
   border: 1px solid ${({ theme }) => theme.borderColors.disabled};
   border-radius: ${({ theme }) => theme.borderRadius.xs};
+  background: ${({ theme }) => theme.colors.gray1};
   cursor: pointer;
 
   & > input {
@@ -53,6 +53,6 @@ const ImageUploadLabel = styled.label`
 const PreviewImageWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center;
   gap: 20px;
+  align-items: center;
 `;
diff --git a/frontend/src/components/Common/Input/Input.tsx b/frontend/src/components/Common/Input/Input.tsx
@@ -61,8 +61,8 @@ const CustomInput = styled.input<CustomInputStyleProps>`
   border-radius: 5px;
 
   &:focus {
-    outline: none;
     border: 2px solid ${({ isError }) => (isError ? theme.colors.error : theme.borderColors.strong)};
+    outline: none;
   }
 
   &:disabled {
@@ -71,22 +71,22 @@ const CustomInput = styled.input<CustomInputStyleProps>`
   }
 
   &::placeholder {
-    font-size: ${theme.fontSizes.sm};
     color: ${theme.textColors.disabled};
+    font-size: ${theme.fontSizes.sm};
   }
 `;
 
 const IconWrapper = styled.div`
-  display: flex;
-  align-items: center;
   position: absolute;
   top: 0;
   right: 0;
+  display: flex;
+  align-items: center;
   height: 100%;
   margin-right: 8px;
 `;
 
 const ErrorMessage = styled(Text)`
-  font-size: ${theme.fontSizes.xs};
   color: ${theme.colors.error};
+  font-size: ${theme.fontSizes.xs};
 `;
diff --git a/frontend/src/components/Common/MarkedText/MarkedText.tsx b/frontend/src/components/Common/MarkedText/MarkedText.tsx
@@ -23,6 +23,6 @@ const MarkedText = ({ text, mark }: MarkedTextProps) => {
 export default MarkedText;
 
 const Mark = styled.mark`
-  background-color: ${({ theme }) => theme.backgroundColors.default};
   font-weight: ${({ theme }) => theme.fontWeights.bold};
+  background-color: ${({ theme }) => theme.backgroundColors.default};
 `;
diff --git a/frontend/src/components/Common/MoreButton/MoreButton.tsx b/frontend/src/components/Common/MoreButton/MoreButton.tsx
@@ -36,8 +36,8 @@ const MoreButtonWrapper = styled.div`
 
 const PlusIconWrapper = styled.div`
   display: flex;
-  align-items: center;
   justify-content: center;
+  align-items: center;
   width: 40px;
   height: 40px;
   margin-bottom: 5px;

diff --git a/frontend/src/components/Common/NavigableSectionTitle/NavigableSectionTitle.tsx b/frontend/src/components/Common/NavigableSectionTitle/NavigableSectionTitle.tsx
@@ -26,8 +26,8 @@ export default NavigableSectionTitle;
 
 const NavigableSectionTitleContainer = styled.div`
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
 `;
 
 const ArrowIcon = styled(SvgIcon)`

diff --git a/frontend/src/components/Common/NavigationBar/NavigationBar.tsx b/frontend/src/components/Common/NavigationBar/NavigationBar.tsx
@@ -41,13 +41,13 @@ const NavigationBarContainer = styled.nav`
 
 const NavigationBarList = styled.ul`
   display: flex;
-  align-items: center;
   justify-content: space-around;
+  align-items: center;
   padding-top: 12px;
   border: 1px solid ${({ theme }) => theme.borderColors.disabled};
   border-bottom: none;
-  border-top-right-radius: 20px;
   border-top-left-radius: 20px;
+  border-top-right-radius: 20px;
 `;
 
 const NavigationItem = styled.li`
@@ -57,7 +57,7 @@ const NavigationItem = styled.li`
 const NavigationLink = styled(Link)`
   display: flex;
   flex-direction: column;
-  align-items: center;
-  justify-content: flex-end;
   gap: 4px;
+  justify-content: flex-end;
+  align-items: center;
 `;
diff --git a/frontend/src/components/Common/ScrollButton/ScrollButton.tsx b/frontend/src/components/Common/ScrollButton/ScrollButton.tsx
@@ -48,12 +48,12 @@ const ScrollButtonWrapper = styled(Button)<ScrollButtonProps>`
   right: 20px;
   border-radius: 50%;
 
+  @media screen and (min-width: 600px) {
+    left: calc(50% + 234px);
+  }
+
   &:hover {
     transform: scale(1.1);
     transition: all 200ms ease-in-out;
   }
-
-  @media screen and (min-width: 600px) {
-    left: calc(50% + 234px);
-  }
 `;
diff --git a/frontend/src/components/Common/SectionTitle/SectionTitle.tsx b/frontend/src/components/Common/SectionTitle/SectionTitle.tsx
@@ -38,8 +38,8 @@ export default SectionTitle;
 
 const SectionTitleContainer = styled.div`
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
 `;
 
 const SectionTitleWrapper = styled.div`

diff --git a/frontend/src/components/Common/SortButton/SortButton.tsx b/frontend/src/components/Common/SortButton/SortButton.tsx
@@ -25,8 +25,8 @@ export default SortButton;
 
 const SortButtonContainer = styled(Button)`
   display: flex;
-  align-items: center;
   justify-content: flex-end;
-  column-gap: 4px;
+  align-items: center;
   padding: 0;
+  column-gap: 4px;
 `;
diff --git a/frontend/src/components/Common/SortOptionList/SortOptionList.tsx b/frontend/src/components/Common/SortOptionList/SortOptionList.tsx
@@ -48,8 +48,8 @@ const SortOptionListContainer = styled.ul`
 
   & > li {
     height: 60px;
-    border-bottom: 1px solid ${({ theme }) => theme.dividerColors.disabled};
     line-height: 60px;
+    border-bottom: 1px solid ${({ theme }) => theme.dividerColors.disabled};
   }
 
   & > li:last-of-type {
@@ -59,13 +59,13 @@ const SortOptionListContainer = styled.ul`
 
 const SortOptionButton = styled(Button)`
   padding: 10px 0;
+  text-align: left;
   border: none;
   outline: transparent;
-  text-align: left;
 
   &:hover {
-    font-weight: ${({ theme }) => theme.fontWeights.bold};
     color: ${({ theme }) => theme.textColors.default};
+    font-weight: ${({ theme }) => theme.fontWeights.bold};
     transition: all 200ms ease-in;
   }
 `;
diff --git a/frontend/src/components/Common/Title/Title.tsx b/frontend/src/components/Common/Title/Title.tsx
@@ -30,10 +30,10 @@ const Title = ({ headingTitle, routeDestination }: TitleProps) => {
 export default Title;
 
 const TitleContainer = styled.div`
+  position: relative;
   display: flex;
   flex-direction: row;
   justify-content: center;
-  position: relative;
 `;
 
 const HomeLink = styled(Link)`
@@ -44,8 +44,8 @@ const HomeLink = styled(Link)`
 
 const TitleLink = styled(Link)`
   display: flex;
-  align-items: center;
   gap: 20px;
+  align-items: center;
 `;
 
 const DropDownIcon = styled(SvgIcon)`

diff --git a/frontend/src/components/Layout/DefaultLayout.tsx b/frontend/src/components/Layout/DefaultLayout.tsx
@@ -17,8 +17,8 @@ const DefaultLayout = ({ children }: PropsWithChildren) => {
 export default DefaultLayout;
 
 const DefaultLayoutContainer = styled.div`
-  max-width: 600px;
   height: 100%;
+  max-width: 600px;
   margin: 0 auto;
 `;
 

diff --git a/frontend/src/components/Layout/HeaderOnlyLayout.tsx b/frontend/src/components/Layout/HeaderOnlyLayout.tsx
@@ -15,8 +15,8 @@ const HeaderOnlyLayout = ({ children }: PropsWithChildren) => {
 export default HeaderOnlyLayout;
 
 const HeaderOnlyLayoutContainer = styled.div`
-  max-width: 600px;
   height: 100%;
+  max-width: 600px;
   margin: 0 auto;
 `;
 

diff --git a/frontend/src/components/Layout/MinimalLayout.tsx b/frontend/src/components/Layout/MinimalLayout.tsx
@@ -12,8 +12,8 @@ const MinimalLayout = ({ children }: PropsWithChildren) => {
 export default MinimalLayout;
 
 const MinimalLayoutContainer = styled.div`
-  max-width: 600px;
   height: 100%;
+  max-width: 600px;
   margin: 0 auto;
 `;
 

diff --git a/frontend/src/components/Members/MembersInfo/MembersInfo.tsx b/frontend/src/components/Members/MembersInfo/MembersInfo.tsx
@@ -42,8 +42,8 @@ export default MembersInfo;
 
 const MembersInfoContainer = styled.div`
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
 `;
 
 const MemberInfoWrapper = styled.div`
@@ -58,6 +58,6 @@ const MemberModifyLink = styled(Link)`
 
 const MembersImage = styled.img`
   margin-right: 16px;
-  border-radius: 50%;
   border: 2px solid ${({ theme }) => theme.colors.primary};
+  border-radius: 50%;
 `;
diff --git a/frontend/src/components/Product/PBProductItem/PBProductItem.tsx b/frontend/src/components/Product/PBProductItem/PBProductItem.tsx
@@ -55,15 +55,15 @@ const PBProductInfoWrapper = styled.div`
 const PBProductName = styled(Text)`
   display: inline-block;
   width: 100%;
-  text-overflow: ellipsis;
   white-space: nowrap;
+  text-overflow: ellipsis;
   overflow: hidden;
 `;
 
 const PBProductReviewWrapper = styled.div`
   display: flex;
-  align-items: center;
   justify-content: space-between;
+  align-items: center;
   margin: 5px 0;
 `;
 

diff --git a/frontend/src/components/Product/PBProductList/PBProductList.tsx b/frontend/src/components/Product/PBProductList/PBProductList.tsx
@@ -43,9 +43,9 @@ export default PBProductList;
 
 const PBProductListContainer = styled.ul`
   display: flex;
+  gap: 40px;
   overflow-x: auto;
   overflow-y: hidden;
-  gap: 40px;
 
   &::-webkit-scrollbar {
     display: none;

diff --git a/frontend/src/components/Product/ProductDetailItem/ProductDetailItem.tsx b/frontend/src/components/Product/ProductDetailItem/ProductDetailItem.tsx
@@ -91,8 +91,8 @@ const ProductContent = styled(Text)`
 const RatingIconWrapper = styled.div`
   display: flex;
   align-items: center;
-  column-gap: 4px;
   margin-left: -4px;
+  column-gap: 4px;
 
   & > svg {
     padding-bottom: 2px;

diff --git a/frontend/src/components/Product/ProductItem/ProductItem.tsx b/frontend/src/components/Product/ProductItem/ProductItem.tsx
@@ -64,8 +64,8 @@ const ProductInfoWrapper = styled.div`
 
 const ProductReviewWrapper = styled.div`
   display: flex;
-  column-gap: 20px;
   margin-left: -2px;
+  column-gap: 20px;
 `;
 
 const RatingIconWrapper = styled.div`

diff --git a/frontend/src/components/Product/ProductOverviewItem/ProductOverviewItem.tsx b/frontend/src/components/Product/ProductOverviewItem/ProductOverviewItem.tsx
@@ -31,10 +31,10 @@ export default ProductOverviewItem;
 
 const ProductOverviewContainer = styled.div<Pick<ProductOverviewItemProps, 'rank'>>`
   display: flex;
+  gap: 15px;
   align-items: center;
   height: 50px;
   padding-left: 15px;
-  gap: 15px;
   border-radius: ${({ theme }) => theme.borderRadius.xs};
   background: ${({ theme, rank }) => (rank ? theme.colors.gray1 : theme.colors.white)};
 `;

diff --git a/frontend/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx b/frontend/src/components/Rank/RecipeRankingItem/RecipeRankingItem.tsx
@@ -56,9 +56,9 @@ const RecipeRankingItem = ({ rank, recipe }: RecipeRankingItemProps) => {
 export default RecipeRankingItem;
 
 const RecipeRankingItemContainer = styled.div`
-  max-width: 560px;
   width: calc(100% - 50px);
   height: 72px;
+  max-width: 560px;
   margin: 12px 0;
   padding: 0 24px;
 `;
@@ -87,15 +87,15 @@ const TitleFavoriteWrapper = styled.div`
 
 const FavoriteWrapper = styled.div`
   display: flex;
-  align-items: center;
   gap: 4px;
+  align-items: center;
 `;
 
 const AuthorWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  align-items: center;
   justify-content: space-around;
+  align-items: center;
   height: 100%;
 `;