[FE] fix: styled components props 네이밍 문제 해결, cicd 수정 (#164)

* refactor: 사용하지 않는 styled-components prop 제거 * fix: styled-components props에 `$` 붙여서 버그 수정 * fix:`PlusCircleIcon`에 width, height 추가하여 svg 에러 해결 * fix: `Button` 컴포넌트 prop에 `$` prefix 추가 * chore: `cicd-fe.yml` 스크립트 수정
woowacourse-teams · Aug 2, 2023 · d88b565 · d88b565
1 parent 636fb6b
commit d88b565
Show file tree

Hide file tree

Showing 5 changed files with 19 additions and 19 deletions.
diff --git a/.github/workflows/cicd-fe.yml b/.github/workflows/cicd-fe.yml
@@ -21,6 +21,7 @@ jobs:
           cd ./frontend
       - name: Create .env.development variable
         run: |
+          cd ./frontend
           touch .env.development
           echo "BASE_URL=${{secrets.BASE_URL_DEVELOPMENT}}" >> .env.development
       - name: Login to Docker Hub

diff --git a/frontend/src/components/@common/Button/Button.tsx b/frontend/src/components/@common/Button/Button.tsx
@@ -42,7 +42,7 @@ const Button = (
   ref: ForwardedRef<HTMLButtonElement>,
 ) => {
   return (
-    <S.Button ref={ref} variant={variant} size={size} block={block} align={align} {...rest}>
+    <S.Button ref={ref} $variant={variant} $size={size} $block={block} $align={align} {...rest}>
       <S.IconTextContainer>
         {Boolean(icon) && <S.IconWrapper size={size}>{icon}</S.IconWrapper>}
         <p>{children}</p>
@@ -157,13 +157,13 @@ const genAlignStyle = (align: Required<Props>['align']): RuleSet<object> => {
 };
 
 const S = {
-  Button: styled.button<Props>`
-    ${({ size = 'medium' }) => genSizeStyle(size)};
-    ${({ variant = 'primary' }) => genVariantStyle(variant)};
-    ${({ align = 'center' }) => genAlignStyle(align)};
+  Button: styled.button<{ $variant: Variant; $size: Size; $block: boolean; $align: Align }>`
+    ${({ $size = 'medium' }) => genSizeStyle($size)};
+    ${({ $variant = 'primary' }) => genVariantStyle($variant)};
+    ${({ $align = 'center' }) => genAlignStyle($align)};
 
     display: flex;
-    width: ${({ block }) => block && '100%'};
+    width: ${({ $block }) => $block && '100%'};
     border: none;
     border-radius: 4px;
 

diff --git a/frontend/src/pages/Layout/Layout.tsx b/frontend/src/pages/Layout/Layout.tsx
@@ -41,10 +41,10 @@ const Layout = () => {
         isWritingViewerActive={isWritingViewerActive}
       />
       <S.Row>
-        <S.LeftSidebarSection isLeftSidebarOpen={isLeftSidebarOpen}>
+        <S.LeftSidebarSection $isLeftSidebarOpen={isLeftSidebarOpen}>
           <Button
             size={'large'}
-            icon={<PlusCircleIcon />}
+            icon={<PlusCircleIcon width={22} height={22} />}
             block={true}
             align='left'
             onClick={openFinder}
@@ -66,7 +66,7 @@ const Layout = () => {
           />
         </S.Main>
         {isWritingViewerActive && (
-          <S.RightSidebarSection isRightSidebarOpen={isRightSidebarOpen}>
+          <S.RightSidebarSection $isRightSidebarOpen={isRightSidebarOpen}>
             <WritingSideBar writingId={activeWritingId} />
           </S.RightSidebarSection>
         )}
@@ -96,9 +96,9 @@ const S = {
     gap: ${LAYOUT_STYLE.gap};
   `,
 
-  LeftSidebarSection: styled.section<{ isLeftSidebarOpen: boolean }>`
+  LeftSidebarSection: styled.section<{ $isLeftSidebarOpen: boolean }>`
     ${sidebarStyle}
-    display: ${({ isLeftSidebarOpen }) => !isLeftSidebarOpen && 'none'};
+    display: ${({ $isLeftSidebarOpen }) => !$isLeftSidebarOpen && 'none'};
   `,
 
   Main: styled.main`
@@ -110,8 +110,8 @@ const S = {
     overflow-y: auto;
   `,
 
-  RightSidebarSection: styled.section<Pick<PageContext, 'isRightSidebarOpen'>>`
+  RightSidebarSection: styled.section<{ $isRightSidebarOpen: boolean }>`
     ${sidebarStyle}
-    display: ${({ isRightSidebarOpen }) => !isRightSidebarOpen && 'none'};
+    display: ${({ $isRightSidebarOpen }) => !$isRightSidebarOpen && 'none'};
   `,
 };
diff --git a/frontend/src/pages/WritingPage/WritingPage.tsx b/frontend/src/pages/WritingPage/WritingPage.tsx
@@ -6,7 +6,7 @@ import { useEffect } from 'react';
 
 const WritingPage = () => {
   const writingId = Number(useParams()['writingId']);
-  const { isLeftSidebarOpen, isRightSidebarOpen, setActiveWritingId } = usePageContext();
+  const { setActiveWritingId } = usePageContext();
 
   useEffect(() => {
     const clearActiveWritingId = () => {
@@ -17,7 +17,7 @@ const WritingPage = () => {
   }, []);
 
   return (
-    <S.Article isLeftSidebarOpen={isLeftSidebarOpen} isRightSidebarOpen={isRightSidebarOpen}>
+    <S.Article>
       <WritingViewer writingId={writingId} />
     </S.Article>
   );
@@ -26,7 +26,7 @@ const WritingPage = () => {
 export default WritingPage;
 
 const S = {
-  Article: styled.article<PageContext>`
+  Article: styled.article`
     width: 90%;
 
     background-color: ${({ theme }) => theme.color.gray1};

diff --git a/frontend/src/pages/WritingTablePage/WritingTablePage.tsx b/frontend/src/pages/WritingTablePage/WritingTablePage.tsx
@@ -9,14 +9,13 @@ import { GetCategoryIdWritingListResponse } from 'types/apis/writings';
 
 const WritingTablePage = () => {
   const categoryId = Number(useParams()['categoryId']);
-  const { isLeftSidebarOpen, isRightSidebarOpen } = usePageContext();
 
   const { data } = useGetQuery<GetCategoryIdWritingListResponse>({
     fetcher: () => getCategoryIdWritingList(categoryId),
   });
 
   return (
-    <S.Article isLeftSidebarOpen={isLeftSidebarOpen} isRightSidebarOpen={isRightSidebarOpen}>
+    <S.Article>
       <S.CategoryNameTitle>{data?.categoryName}</S.CategoryNameTitle>
       <WritingTable writings={data?.writings ?? []} />
     </S.Article>
@@ -26,7 +25,7 @@ const WritingTablePage = () => {
 export default WritingTablePage;
 
 const S = {
-  Article: styled.article<PageContext>`
+  Article: styled.article`
     width: 90%;
     padding: 8rem 4rem;