메인 브랜치 업데이트 - [FE] mock api를 활용한 데모 버전 github action 생성 (#263)

* [FE] mock api를 활용한 데모 버전 github action 생성 (#261) * Chore: faker.js 설치 * Refactor: mockUtil함수에 getResponseWithError 추가 * Refactor: mock.user faker.js적용 * Rename: style -> comment.style.js * Refactor Mock 데이터 faker.js적용 * Fix : 프로필 이미지 src에 옵셔널 체이닝 적용 * Design: 무한스크롤 loader를 다음 줄이 아닌 배열의 마지막 위치로 수정 * Build: msw를 사용하는 데모 버전 * Build: fe-demo 깃허브 액션 * Fix: 스토리북 mock데이터 수정 * Feat: 데모 버전 컴포넌트 * Docs: 리드미에 데모 페이지 반영 * Build: change Chromatic target branch develop -> fe-demo * Build: fe-demo, chromatic github-action working-directory 수정 Fe-demo: env로 변수 설정 chromatic: defaults-run 설정 * [FE] 데모 및 chromatic 배포 github action 에러 수정 (#262) * Fix: mock.name.avatar 에러 수정 함수 실행문으로 변경 * Build: fe-demo, chromatic github-action working-directory 수정 Fe-demo: env로 변수 설정 chromatic: defaults-run 설정 * Build: fe-demo에서 default run 적용 * Build: fe-demo -> webapp이동 명령어 제거 * Build: cache 추가 * Build: github action unbuntu 버전 변경 * Build: fe-demo명령어에 AWS_DEFAULT_REGION 추가 * Build: 타겟브랜치 및 실행경로 설정
yulpumta-clone-team · Jan 25, 2023 · 8028092 · 8028092
1 parent 6efd840
commit 8028092
Show file tree

Hide file tree

Showing 60 changed files with 468 additions and 1,311 deletions.
diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
@@ -7,8 +7,12 @@ name: 'Chromatic'
 on:
   push:
     branches: ['develop']
+    paths:
+      - './webapp/**'
   pull_request:
     branches: ['develop']
+    paths:
+      - './webapp/**'
 
 # List of jobs
 jobs:
@@ -17,7 +21,7 @@ jobs:
     runs-on: ubuntu-latest
     defaults:
       run:
-        working-directory: webapp
+        working-directory: ./webapp
     # Job steps
     steps:
       - uses: actions/checkout@v1
@@ -27,12 +31,8 @@ jobs:
           node-version: '16'
       - name: npm install
         run: npm install
-        # 👇 Runs npm in ./frontend
-        working-directory: webapp
       - name: npm run build-storybook
         run: npm run build-storybook
-        # 👇 Runs npm in ./frontend
-        working-directory: webapp
         # 👇 Adds Chromatic as a step in the workflow
       - name: Publish to Chromatic
         uses: chromaui/action@v1

diff --git a/.github/workflows/fe-demo.yml b/.github/workflows/fe-demo.yml
@@ -0,0 +1,65 @@
+name: sub-branch
+
+# Event for the workflow
+on:
+  push:
+    branches: ['develop']
+    paths:
+      - './webapp/**'
+  pull_request:
+    branches: ['develop']
+    paths:
+      - './webapp/**'
+jobs:
+  build:
+    runs-on: ubuntu-18.04
+    defaults:
+      run:
+        working-directory: ./webapp
+
+    steps:
+      - uses: actions/checkout@v1
+      - name: Setup Node
+        uses: actions/setup-node@v2
+        with:
+          node-version: '16'
+
+      - name: Setting .env
+        run: |
+          echo "REACT_APP_SERVER_API=${{secrets.REACT_APP_SERVER_API}}" >> .env
+          cat .env
+
+      - name: Cache node modules
+        id: cache-npm
+        uses: actions/cache@v3
+        env:
+          cache-name: cache-node-modules
+        with:
+          # npm cache files are stored in `~/.npm` on Linux/macOS
+          path: ~/.npm
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package-lock.json') }}
+          restore-keys: |
+            ${{ runner.os }}-build-${{ env.cache-name }}-
+            ${{ runner.os }}-build-
+            ${{ runner.os }}-
+
+      - if: ${{ steps.cache-npm.outputs.cache-hit != 'true' }}
+        name: List the state of node modules
+        continue-on-error: true
+        run: npm list
+
+      - name: npm Install
+        run: npm install
+
+      - name: npm build
+        run: npm run build-demo
+        env:
+          CI: ''
+
+      - name: Deploy
+        env:
+          AWS_ACCESS_KEY_ID: ${{ secrets.FE_DEMO_AWS_ACCESS_KEY_ID }}
+          AWS_SECRET_ACCESS_KEY: ${{ secrets.FE_DEMO_AWS_SECRET_ACCESS_KEY }}
+          AWS_DEFAULT_REGION: ap-northeast-2
+        run: |
+          aws s3 sync ./build s3://conect-demo
diff --git a/README.md b/README.md
@@ -125,9 +125,9 @@
 
 <div>
 
-| 배포 페이지 | 노션 페이지 |
-| :---: | :---: |
-| <a>배포 페이지</a> | <a href="https://dear-phosphorus-929.notion.site/Matching-Project-bfe35250f60d4386a5e5cbc684366edf">👉 Notion Project 바로가기</a> |
+| 배포 페이지 | 데모 페이지 | 노션 페이지 |
+| :---:  |:---: | :---: |
+| <a>배포 페이지</a> | <a href="http://conect-demo.s3-website.ap-northeast-2.amazonaws.com"> 데모 페이지</a> | <a href="https://dear-phosphorus-929.notion.site/Matching-Project-bfe35250f60d4386a5e5cbc684366edf">👉 Notion Project 바로가기</a> |
 
  </div>
 <br/>

diff --git a/webapp/package-lock.json b/webapp/package-lock.json
diff --git a/webapp/package.json b/webapp/package.json
@@ -5,6 +5,7 @@
   "scripts": {
     "start": "react-scripts start",
     "msw": "cross-env REACT_APP_MOCK_TOOL=msw react-scripts start",
+    "build-demo": "cross-env REACT_APP_MOCK_TOOL=demo react-scripts build",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
@@ -63,6 +64,7 @@
     "web-vitals": "^2.1.4"
   },
   "devDependencies": {
+    "@faker-js/faker": "^7.6.0",
     "@storybook/addon-actions": "^6.5.10",
     "@storybook/addon-essentials": "^6.5.10",
     "@storybook/addon-interactions": "^6.5.10",

diff --git a/webapp/src/components/CardsGrid/index.jsx b/webapp/src/components/CardsGrid/index.jsx
@@ -16,9 +16,17 @@ CardsGrid.propTypes = {
     triggerLink: PropTypes.string.isRequired,
     triggerMessage: PropTypes.string.isRequired,
   }),
+  children: PropTypes.node.isRequired,
 };
 
-export default function CardsGrid({ CardComponent, cards, isLoading, clickLink, emptyTrigger }) {
+export default function CardsGrid({
+  CardComponent,
+  cards,
+  isLoading,
+  clickLink,
+  emptyTrigger,
+  children,
+}) {
   const { emptyMessage, triggerLink, triggerMessage } = emptyTrigger;
   const navigate = useNavigate();
   const handleClickCardComponent = (cardId) => {
@@ -32,6 +40,7 @@ export default function CardsGrid({ CardComponent, cards, isLoading, clickLink,
     return (
       <S.Cards>
         <SimpleListComponent Component={CardLoader} idx={3} />
+        {children}
       </S.Cards>
     );
 
@@ -53,6 +62,7 @@ export default function CardsGrid({ CardComponent, cards, isLoading, clickLink,
           />
         ))
       )}
+      {children}
     </S.Cards>
   );
 }
diff --git a/...p/src/components/ComentContainer/style.js → ...mponents/ComentContainer/Comment.style.js b/...p/src/components/ComentContainer/style.js → ...mponents/ComentContainer/Comment.style.js
@@ -4,6 +4,24 @@ export const Container = styled.div`
   width: 100%;
 `;
 
+export const HocContainer = styled.div`
+  width: 100%;
+  ${({ theme: { mixin } }) => mixin.flexCenter({})}
+  gap: 24px;
+  margin-bottom: 12px;
+  h1 {
+    ${({ theme: { fonts } }) => fonts.korean.emphasis}
+  }
+  h3 {
+    ${({ theme: { fonts } }) => fonts.korean.default}
+  }
+`;
+
+export const RefetchButton = css`
+  width: 120px;
+  height: 35px;
+`;
+
 export const FormBox = styled.form`
   width: 100%;
   background-color: ${({ theme: { colors } }) => colors.greyScale.background};

diff --git a/webapp/src/components/ComentContainer/CommentElement/CommentButtonContainer.jsx b/webapp/src/components/ComentContainer/CommentElement/CommentButtonContainer.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { useCommentsAction, useCommentsState } from 'contexts/Comment/Comment.Provider';
-import * as S from '../style';
+import * as S from '../Comment.style';
 
 CommentButtonContainer.propTypes = {
   isNested: PropTypes.bool.isRequired,

diff --git a/webapp/src/components/ComentContainer/CommentElement/CommentLikeSvg.jsx b/webapp/src/components/ComentContainer/CommentElement/CommentLikeSvg.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { useCommentsAction } from 'contexts/Comment/Comment.Provider';
 import HeartFillSvg from 'assets/icons/HeartFillSvg';
 import HeartSvg from 'assets/icons/HeartSvg';
-import * as S from '../style';
+import * as S from '../Comment.style';
 
 CommentLikeSvg.propTypes = {
   commentId: PropTypes.number.isRequired,

diff --git a/webapp/src/components/ComentContainer/CommentElement/Nested.CommentElement.jsx b/webapp/src/components/ComentContainer/CommentElement/Nested.CommentElement.jsx
@@ -7,7 +7,7 @@ import { ISOToyyyymmdd } from 'service/etc/time.util';
 import EditRootCommentForm from '../CommentForm/Edit.CommentForm';
 import SecretCommentElement from './Secret.CommentElement';
 import CommentLikeSvg from './CommentLikeSvg';
-import * as S from '../style';
+import * as S from '../Comment.style';
 import CommentButtonContainer from './CommentButtonContainer';
 
 NestedCommentElement.propTypes = {

diff --git a/webapp/src/components/ComentContainer/CommentElement/Nested.CommentElement.stories.jsx b/webapp/src/components/ComentContainer/CommentElement/Nested.CommentElement.stories.jsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import CommentProvider from 'contexts/Comment/Comment.Provider';
-import { userComment } from 'mocks/commentHandler.mock/userComments';
+import { createComment } from 'mocks/commentHandler.mock/comment.mock';
 import NestedCommentElement from './Nested.CommentElement';
-import * as S from '../style';
+import * as S from '../Comment.style';
 
 export default {
   title: 'component/Comment.NestedCommentElement',
@@ -23,8 +23,10 @@ function Template(args) {
   );
 }
 
+const comment = createComment();
+
 export const Default = Template.bind({});
 Default.args = {
   postWriterId: 9021279491,
-  commentInfo: userComment,
+  commentInfo: comment,
 };
diff --git a/webapp/src/components/ComentContainer/CommentElement/NestedCommentToggleButton.jsx b/webapp/src/components/ComentContainer/CommentElement/NestedCommentToggleButton.jsx
@@ -5,7 +5,7 @@ import { useCommentsAction, useCommentsState } from 'contexts/Comment/Comment.Pr
 import { parsedNumberToThreeDigits } from 'utils';
 import CaretUpFillSvg from 'assets/icons/CaretUpFillSvg';
 import CreateReplyCommentForm from '../CommentForm/Create.Reply.CommentForm';
-import * as S from '../style';
+import * as S from '../Comment.style';
 
 NestedCommentToggleButton.propTypes = {
   replies: PropTypes.array.isRequired,

diff --git a/webapp/src/components/ComentContainer/CommentElement/Root.CommentElement.jsx b/webapp/src/components/ComentContainer/CommentElement/Root.CommentElement.jsx
@@ -2,17 +2,17 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { useCommentsState } from 'contexts/Comment/Comment.Provider';
 import { commentInfoType } from 'types/comment.type';
-import Image from 'components/Common/Image';
 import { parsedNumberToThreeDigits } from 'utils';
 import ChatBubbleOvalSvg from 'assets/icons/ChatBubbleOvalSvg';
 import { ISOToyyyymmdd } from 'service/etc/time.util';
+import ProfileImg from 'components/Common/ProfileImg';
 import CreateReplyCommentForm from '../CommentForm/Create.Reply.CommentForm';
 import NestedCommentList from '../CommentList/Nested.CommentList';
 import EditRootCommentForm from '../CommentForm/Edit.CommentForm';
 import SecretCommentElement from './Secret.CommentElement';
 import NestedCommentToggleButton from './NestedCommentToggleButton';
 import CommentLikeSvg from './CommentLikeSvg';
-import * as S from '../style';
+import * as S from '../Comment.style';
 import CommentButtonContainer from './CommentButtonContainer';
 
 RootCommentElement.propTypes = {
@@ -42,7 +42,11 @@ export default function RootCommentElement({ commentInfo, postWriterId }) {
 
   return (
     <S.CommentContainer>
-      <Image src={writerProfileImage} alt="작성자 프로필 이미지" customStyle={S.UserProfileImage} />
+      <ProfileImg
+        src={writerProfileImage}
+        alt="작성자 프로필 이미지"
+        customStyle={S.UserProfileImage}
+      />
       <S.RootCommentBox>
         <S.PublicCommentBox>
           <S.CommentTitle>

diff --git a/webapp/src/components/ComentContainer/CommentElement/Root.CommentElement.stories.jsx b/webapp/src/components/ComentContainer/CommentElement/Root.CommentElement.stories.jsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import CommentProvider from 'contexts/Comment/Comment.Provider';
-import { userComment } from 'mocks/commentHandler.mock/userComments';
+import { createComment } from 'mocks/commentHandler.mock/comment.mock';
 import RootCommentElement from './Root.CommentElement';
 
 export default {
@@ -18,20 +18,22 @@ function Template(args) {
   );
 }
 
+const comment = createComment();
+
 export const Default = Template.bind({});
 Default.args = {
   postWriterId: 9021279491,
-  commentInfo: { ...userComment, secret: false, replies: [] },
+  commentInfo: { ...comment, secret: false, replies: [] },
 };
 
 export const Secret = Template.bind({});
 Secret.args = {
   postWriterId: 9021279491,
-  commentInfo: { ...userComment, secret: true, replies: [] },
+  commentInfo: { ...comment, secret: true, replies: [] },
 };
 
 export const WithReplies = Template.bind({});
 WithReplies.args = {
   postWriterId: 9021279491,
-  commentInfo: { ...userComment, secret: false },
+  commentInfo: { ...comment, secret: false },
 };
diff --git a/webapp/src/components/ComentContainer/CommentElement/Secret.CommentElement.jsx b/webapp/src/components/ComentContainer/CommentElement/Secret.CommentElement.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import LockClosedSvg from 'assets/icons/LockClosedSvg';
 import { useCommentsAction } from 'contexts/Comment/Comment.Provider';
-import * as S from '../style';
+import * as S from '../Comment.style';
 
 SecretCommentElement.propTypes = {
   isNested: PropTypes.bool.isRequired,

diff --git a/webapp/src/components/ComentContainer/CommentForm/Create.Reply.CommentForm.jsx b/webapp/src/components/ComentContainer/CommentForm/Create.Reply.CommentForm.jsx
@@ -5,7 +5,7 @@ import Button from 'components/Common/Button';
 import useForm from 'hooks/useForm';
 import { commentFormValidation } from 'service/etc/comment.validation';
 import TextArea from 'components/Common/TextArea';
-import * as S from '../style';
+import * as S from '../Comment.style';
 
 export default function CreateReplyCommentForm() {
   const { createReplyCommentSubmitCallback, resetCreateReplyTargetCommentId, forceRefetch } =

diff --git a/webapp/src/components/ComentContainer/CommentForm/Create.Root.CommentForm.jsx b/webapp/src/components/ComentContainer/CommentForm/Create.Root.CommentForm.jsx
@@ -5,7 +5,7 @@ import CheckInput from 'components/Common/CheckInput';
 import { commentFormValidation } from 'service/etc/comment.validation';
 import TextArea from 'components/Common/TextArea';
 import useForm from 'hooks/useForm';
-import * as S from '../style';
+import * as S from '../Comment.style';
 
 export default function CreateRootCommentForm() {
   const { createRootCommentSubmitCallback, forceRefetch } = useCommentsAction();

diff --git a/webapp/src/components/ComentContainer/CommentForm/Edit.CommentForm.jsx b/webapp/src/components/ComentContainer/CommentForm/Edit.CommentForm.jsx
@@ -6,7 +6,7 @@ import { commentFormValidation } from 'service/etc/comment.validation';
 import TextArea from 'components/Common/TextArea';
 import CheckInput from 'components/Common/CheckInput';
 import Button from 'components/Common/Button';
-import * as S from '../style';
+import * as S from '../Comment.style';
 
 EditCommentForm.propTypes = {
   initialText: PropTypes.string.isRequired,

diff --git a/webapp/src/components/ComentContainer/CommentList/Nested.CommentList.jsx b/webapp/src/components/ComentContainer/CommentList/Nested.CommentList.jsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import NestedCommentElement from '../CommentElement/Nested.CommentElement';
-import * as S from '../style';
+import * as S from '../Comment.style';
 
 NestedCommentList.propTypes = {
   postWriterId: PropTypes.number.isRequired,