[FE] issue256: atomic css 방식을 css props에 적용하는 유틸 함수 생성 (#259)

* refactor: tailwind 같은 atomic css util함수 생성 * feat: top right bottom left 추가 * refactor: css prop -> tw * refactor: 사용하지 않는 module import 제거
woowacourse-teams · Aug 13, 2022 · 77e67ca · 77e67ca
1 parent ebf9788
commit 77e67ca
Show file tree

Hide file tree

Showing 12 changed files with 324 additions and 100 deletions.
diff --git a/frontend/src/App.tsx b/frontend/src/App.tsx
@@ -9,10 +9,10 @@ import {
 } from '@pages';
 import { Navigate, Route, Routes } from 'react-router-dom';
 
-import { css } from '@emotion/react';
-
 import { PATH } from '@constants';
 
+import tw from '@utils/tw';
+
 import { useAuth } from '@hooks/useAuth';
 
 import { Footer, Header, Main } from '@layout';
@@ -22,15 +22,7 @@ const App = () => {
 
   return (
     <div>
-      <Header
-        css={css`
-          position: fixed;
-          top: 0;
-          left: 0;
-          right: 0;
-          z-index: 2;
-        `}
-      />
+      <Header css={tw`fixed top-0 left-0 right-0 z-2`} />
       <Main>
         <Routes>
           <Route path={PATH.MAIN} element={<MainPage />} />

diff --git a/frontend/src/components/markdown-render/MarkdownRender.tsx b/frontend/src/components/markdown-render/MarkdownRender.tsx
@@ -4,6 +4,8 @@ import { useEffect, useRef } from 'react';
 
 import { css } from '@emotion/react';
 
+import tw from '@utils/tw';
+
 import markdown from '@styles/markdown';
 
 type MarkdownRenderProps = {
@@ -20,12 +22,7 @@ const MarkdownRender = ({ markdownContent }: MarkdownRenderProps) => {
   }, [contentRef, markdownContent]);
 
   return (
-    <div
-      css={css`
-        overflow-y: scroll;
-        height: 100%;
-      `}
-    >
+    <div css={tw`overflow-y-scroll h-full`}>
       <div
         css={css`
           ${markdown}

diff --git a/frontend/src/layout/footer/Footer.tsx b/frontend/src/layout/footer/Footer.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import tw from '@utils/tw';
 
 import * as S from '@layout/footer/Footer.style';
 
@@ -7,15 +7,7 @@ export type FooterProps = {
 };
 
 const Footer: React.FC<FooterProps> = ({ marginBottom }) => {
-  return (
-    <S.Footer
-      css={css`
-        margin-bottom: ${marginBottom};
-      `}
-    >
-      그린론 디우 베루스 병민 짱구 태태
-    </S.Footer>
-  );
+  return <S.Footer css={tw`mb-[${marginBottom}]`}>그린론 디우 베루스 병민 짱구 태태</S.Footer>;
 };
 
 export default Footer;
diff --git a/frontend/src/pages/create-study-page/components/category/Category.stories.tsx b/frontend/src/pages/create-study-page/components/category/Category.stories.tsx
@@ -1,6 +1,6 @@
 import type { Story } from '@storybook/react';
 
-import { css } from '@emotion/react';
+import tw from '@utils/tw';
 
 import Category from '@create-study-page/components/category/Category';
 import type { CategoryProps } from '@create-study-page/components/category/Category';
@@ -11,11 +11,7 @@ export default {
 };
 
 const Template: Story<CategoryProps> = props => (
-  <div
-    css={css`
-      max-width: 400px;
-    `}
-  >
+  <div css={tw`max-w-[400px]`}>
     <Category {...props} />
   </div>
 );

diff --git a/frontend/src/pages/create-study-page/components/category/Category.tsx b/frontend/src/pages/create-study-page/components/category/Category.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import tw from '@utils/tw';
 
 import type { Tag } from '@custom-types';
 
@@ -58,27 +58,11 @@ const Category = ({ className }: CategoryProps) => {
         <S.Area>
           <S.Label>영역 :</S.Label>
           <S.AreaCheckboxContainer>
-            <Checkbox
-              css={css`
-                margin-right: 4px;
-              `}
-              type="checkbox"
-              id="area-fe"
-              data-tagid={areaFE.id}
-              {...register('area-fe')}
-            />
+            <Checkbox css={tw`mr-4`} type="checkbox" id="area-fe" data-tagid={areaFE.id} {...register('area-fe')} />
             <label htmlFor="area-fe">FE</label>
           </S.AreaCheckboxContainer>
           <S.AreaCheckboxContainer>
-            <Checkbox
-              css={css`
-                margin-right: 4px;
-              `}
-              type="checkbox"
-              id="area-be"
-              data-tagid={areaBE.id}
-              {...register('area-be')}
-            />
+            <Checkbox css={tw`mr-4`} type="checkbox" id="area-be" data-tagid={areaBE.id} {...register('area-be')} />
             <label htmlFor="area-be">BE</label>
           </S.AreaCheckboxContainer>
         </S.Area>

diff --git a/frontend/src/pages/create-study-page/components/meta-box/MetaBox.stories.tsx b/frontend/src/pages/create-study-page/components/meta-box/MetaBox.stories.tsx
@@ -1,6 +1,6 @@
 import type { Story } from '@storybook/react';
 
-import { css } from '@emotion/react';
+import tw from '@utils/tw';
 
 import MetaBox from '@create-study-page/components/meta-box/MetaBox';
 
@@ -10,11 +10,7 @@ export default {
 };
 
 const Template: Story = () => (
-  <MetaBox
-    css={css`
-      max-width: 300px;
-    `}
-  >
+  <MetaBox css={tw`max-w-[300px]`}>
     <MetaBox.Title>스터디 인원</MetaBox.Title>
     <MetaBox.Content>Content입니다</MetaBox.Content>
   </MetaBox>

diff --git a/frontend/src/pages/create-study-page/components/publish/Publish.tsx b/frontend/src/pages/create-study-page/components/publish/Publish.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import tw from '@utils/tw';
 
 import Button from '@components/button/Button';
 
@@ -17,11 +17,7 @@ const Publish = ({ className, onPublishButtonClick: handlePublishButtonClick }:
         <MetaBox.Title>스터디 개설</MetaBox.Title>
         <MetaBox.Content>
           <Button
-            css={css`
-              border-radius: 6px;
-              font-size: 16px;
-              padding: 12px 10px;
-            `}
+            css={tw`rounded-[6px] text-16 py-12 px-10`}
             fluid={true}
             onClick={handlePublishButtonClick}
             outline={true}

diff --git a/frontend/src/pages/create-study-page/components/subject/Subject.tsx b/frontend/src/pages/create-study-page/components/subject/Subject.tsx
@@ -1,4 +1,4 @@
-import { css } from '@emotion/react';
+import tw from '@utils/tw';
 
 import { useFormContext } from '@hooks/useForm';
 
@@ -24,13 +24,7 @@ const Subject = ({ className }: SubjectProps) => {
       const subjects = tags.filter(({ category }) => category.name === 'subject');
 
       return (
-        <S.Select
-          id="subject-list"
-          css={css`
-            width: 100%;
-          `}
-          {...register('subject')}
-        >
+        <S.Select id="subject-list" css={tw`w-full`} {...register('subject')}>
           {subjects.map(({ id, name, description }) => (
             <option selected={name === 'Etc'} key={id} value={id}>
               {description}

diff --git a/frontend/src/pages/detail-page/components/study-wide-float-box/StudyWideFloatBox.tsx b/frontend/src/pages/detail-page/components/study-wide-float-box/StudyWideFloatBox.tsx
@@ -1,10 +1,9 @@
 import { Link } from 'react-router-dom';
 
-import { css } from '@emotion/react';
-
 import { PATH } from '@constants';
 
 import { yyyymmddTommdd } from '@utils';
+import tw from '@utils/tw';
 
 import type { StudyDetail, UserRole } from '@custom-types';
 
@@ -56,30 +55,15 @@ const StudyWideFloatBox: React.FC<StudyWideFloatBoxProps> = ({
     if (userRole === 'MEMBER' || userRole === 'OWNER') {
       return (
         <Link to={PATH.STUDY_ROOM(studyId)}>
-          <Button
-            css={css`
-              height: 100%;
-              padding: 0 20px;
-            `}
-            fluid={true}
-            type="button"
-          >
+          <Button css={tw`h-full py-0 px-20`} fluid={true} type="button">
             이동하기
           </Button>
         </Link>
       );
     }
 
     return (
-      <Button
-        css={css`
-          height: 100%;
-          padding: 0 20px;
-        `}
-        fluid={true}
-        disabled={!isOpen}
-        onClick={handleRegisterButtonClick}
-      >
+      <Button css={tw`h-full py-0 px-20`} fluid={true} disabled={!isOpen} onClick={handleRegisterButtonClick}>
         {isOpen ? '가입하기' : '모집 마감'}
       </Button>
     );

diff --git a/frontend/src/pages/study-room-page/StudyRoomPage.tsx b/frontend/src/pages/study-room-page/StudyRoomPage.tsx
@@ -1,9 +1,9 @@
 import { Navigate } from 'react-router-dom';
 
-import { css } from '@emotion/react';
-
 import { PATH } from '@constants';
 
+import tw from '@utils/tw';
+
 import Wrapper from '@components/wrapper/Wrapper';
 
 import * as S from '@study-room-page/StudyRoomPage.style';
@@ -28,13 +28,7 @@ const StudyRoomPage: React.FC = () => {
     <Wrapper>
       <S.Container>
         <SideMenu
-          css={css`
-            position: sticky;
-            top: 100px;
-            left: 0;
-
-            align-self: flex-start;
-          `}
+          css={tw`sticky top-100 left-0 self-start`}
           activeTabId={activeTab.id}
           tabs={tabs}
           onTabButtonClick={handleTabButtonClick}