release: 프론트엔드 v4.1.0 (#668)

* refactor: 범용적인 DropDown 컴포넌트를 celuveat-ui-library 배포 후 적용 (#652) * chore: celuveat-ui-library 설치 * refactor: celuveat-library를 적용, InfoDropDown 코드 수정 * fix: svg 경로로 인한 storybook 에러 해결 * refactor: celuveat-library를 적용, CelebDropDown 코드 수정 * fix: github action ci 오류 수정 * fix: 사용하지 않은 memo 제거 (#650) * refactor: 음식점 상세페이지 usequeries 처리 (#649) * refactor: RestaurantVideoList useQueries 적용 (#648) * refactor: 음식점 상세페이지 waterfall 개선 (#648) * fix: lint 에러 수정 * infra: 프론트엔드 dev cd 파이프라인 구축 (#655) (#656) * feat: progressive web app 구현 (#654) * feat: 최소단위 manifest.json 작성 및 적용 * design: PWA 적용으로 인한 바텀네브바 높이 수정 * hotfix: node 버전 수정 18.16.1 * hotfix: cd 에러 해결 yarn.lock, 캐시 제거 명령어 추가 * refactor: 메인페이지 리팩터링 (#659) * chore: 리액트 헬멧 라이브러리 제거 (#658) * chore: 리액트 헬멧 라이브러리 제거 (#658) * refactor: 셀럽잇 추천 맛집 섹션 분리 (#658) * refactor: 배너 섹션 분리 (#658) * refactor: 카테고리 섹션 분리 (#658) * refactor: 셀럽 베스트 섹션 분리 (#658) * refactor: 지역맛집 섹션 분리 (#658) * refactor: 메인페이지 리팩터링 (#658) * fix: 이미지 로드동안 스켈레톤 유지시키기 (#666) * refactor: 모달 celuveat UI library 적용 (#664) * feat: 모달 라이브러리 적용 (jeremy-reusable-modal) * style: isLiked시 하트 색깔 변경 로직 줄 축수 * refactor: jeremy-reusable-modal에서 celuveat-ui-library로 마이그레이션 * feat: 에러바운더리를 이용한 에러핸들링 (#667) * chore: 리액트 헬멧 라이브러리 제거 (#658) * chore: 리액트 헬멧 라이브러리 제거 (#658) * refactor: 셀럽잇 추천 맛집 섹션 분리 (#658) * refactor: 배너 섹션 분리 (#658) * refactor: 카테고리 섹션 분리 (#658) * refactor: 셀럽 베스트 섹션 분리 (#658) * refactor: 지역맛집 섹션 분리 (#658) * refactor: 메인페이지 리팩터링 (#658) * refactor: msw handler 폴더명 수정 및 랜덤 응답 로직 구현 랜덤으로 성공과 실패 응답을 보낸다. * chore: 에러핸들링 개발환경 구축 개발 모드에서 에러 오버레이 일시 중단 * refactor: 셀럽잇 추천 맛집 스켈레톤 컴포넌트 분리 (#661) * feat: 에러바운더리 구현 (#661) * style: 셀럽잇 추천맛집 서브 컴포넌트명 수정 및 에러바운더리 적용 (#661) * style: 핸들러 명 수정에 대한 적용 * design: 셀럽잇 추천 맛집 음식점 카드 좋아요 기능 보이기 (#661) * refactor: useToggleLikeNotUpdate 에러 분기 429, 401 에러 핸들링 * fix: ifram 안보이는 현상 처리 * fix: 에러 오버레이 안보이는 현상 처리 * Update frontend-dev-cd.yml --------- Co-authored-by: 황준승 <[email protected]>
woowacourse-teams · Dec 29, 2023 · 9e6440f · 9e6440f
1 parent 0ea233e
commit 9e6440f
Show file tree

Hide file tree

Showing 75 changed files with 5,492 additions and 5,607 deletions.
diff --git a/.github/workflows/frontend-ci.yml b/.github/workflows/frontend-ci.yml
@@ -53,11 +53,11 @@ jobs:
             ${{ runner.os }}-yarn-
 
       - name: 🍔 yarn install
-        run: pwd && ls && yarn install
+        run: rm -rf ./node_modules yarn.lock && yarn cache clean && yarn install
         working-directory: ${{ env.working-directory }}
 
       - name: 🍔 eslint 테스트
-        run: pwd && ls && yarn lint
+        run: yarn lint
         working-directory: ${{ env.working-directory }}
 
       - name: 🍔 React 프로젝트 빌드

diff --git a/.github/workflows/frontend-dev-cd.yml b/.github/workflows/frontend-dev-cd.yml
@@ -0,0 +1,87 @@
+name: ✨ Celuveat frontend DEV CD ✨
+
+on:
+  push:
+    branches:
+      - develop-frontend*
+
+jobs:
+  build:
+    runs-on: ubuntu-22.04
+    defaults:
+      run:
+        working-directory: ./frontend
+    concurrency:
+      group: ${{ github.workflow }}
+      cancel-in-progress: true
+
+    steps:
+      - name: ✨ Checkout repository
+        uses: actions/checkout@v3
+
+      - name: ✨ Node.js 설정
+        uses: actions/setup-node@v3
+        with:
+          node-version: 18.16.1
+
+      - name: ✨ Yarn global cache 캐싱
+        uses: actions/cache@v3
+        with:
+          path: '**/.yarn'
+          key: ${{ runner.os }}-yarn-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: ✨ Yarn project cache 캐싱
+        uses: actions/cache@v3
+        with:
+          path: '~/.yarn/cache'
+          key: ${{ runner.os }}-yarn-project-${{ hashFiles('**/yarn.lock') }}
+          restore-keys: |
+            ${{ runner.os }}-yarn-
+
+      - name: 환경변수 설정
+        run: |
+          echo "BASE_URL=$BASE_URL" >> .dev.env
+          echo "GOOGLE_MAP_API_KEY=$GOOGLE_MAP_API_KEY" >> .dev.env
+          echo "SHARE_KAKAO_LINK_KEY=$SHARE_KAKAO_LINK_KEY" >> .dev.env
+        env:
+          BASE_URL: ${{secrets.DEV_BASE_URL}}
+          GOOGLE_MAP_API_KEY: ${{secrets.GOOGLE_MAP_API_KEY}}
+          SHARE_KAKAO_LINK_KEY: ${{secrets.SHARE_KAKAO_LINK_KEY}}
+
+      - name: ✨ 의존성 설치
+        run: rm -rf ./node_modules yarn.lock && yarn cache clean && yarn install
+
+      - name: ✨ 빌드
+        run: yarn build:dev
+
+      - name: ✨ artifact로 빌드파일 다운로드 가능하게 만들기
+        uses: actions/upload-artifact@v3
+        with:
+          name: dev-dist
+          path: frontend/dist
+
+  # deploy:
+  #   needs: build
+  #   runs-on: [self-hosted, dev]
+  #   steps:
+  #     - name: ✨ 기존 폴더 삭제
+  #       working-directory: .
+  #       run: rm -rf dev
+
+  #     - name: ✨ artifact로부터 EC2에 빌드결과물 다운로드
+  #       uses: actions/download-artifact@v3
+  #       with:
+  #         name: dev-dist
+  #         path: dev/dist
+
+  #     - name: ✨ S3 업로드
+  #       run: |
+  #         aws s3 sync dev ${{secrets.S3_FRONT_END_DEV_URI}} --delete
+
+  #     - name: ✨ 캐시 무효화
+  #       run: |
+  #         aws cloudfront create-invalidation \
+  #           --distribution-id ${{ secrets.CLOUDFRONT_CELUVEAT_DEV_ID }} \
+  #           --paths "/*"
diff --git a/frontend/.vscode/settings.json b/frontend/.vscode/settings.json
@@ -1,8 +1,8 @@
 {
   "editor.formatOnSave": true,
   "editor.codeActionsOnSave": {
-    "source.fixAll.eslint": true,
-    "source.fixAll.stylelint": true
+    "source.fixAll.eslint": "explicit",
+    "source.fixAll.stylelint": "explicit"
   },
   "typescript.validate.enable": true,
 

diff --git a/frontend/.webpack/webpack.config.js b/frontend/.webpack/webpack.config.js
@@ -68,7 +68,7 @@ module.exports = (env, args) => {
       new Dotenv({
         path: path.resolve(__dirname, `../.${TARGET_ENV}.env`),
       }),
-      new RefreshWebpackPlugin(),
+      new RefreshWebpackPlugin({}),
     ],
   };
 };
diff --git a/frontend/package.json b/frontend/package.json
@@ -30,9 +30,9 @@
     "@tanstack/react-query-devtools": "^4.36.1",
     "axios": "^1.5.1",
     "browser-image-compression": "^2.0.2",
+    "celuveat-ui-library": "^1.2.8",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "react-helmet-async": "^1.3.0",
     "react-router-dom": "^6.14.2",
     "react-slick": "^0.29.0",
     "slick-carousel": "^1.8.1",

diff --git a/frontend/public/favicon.ico b/frontend/public/favicon.ico
diff --git a/frontend/public/index.html b/frontend/public/index.html
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html lang="ko">
   <head>
     <!-- Google tag (gtag.js) -->
@@ -43,6 +43,8 @@
       crossorigin="anonymous"
     ></script>
 
+    <link crossorigin="use-credentials" href="manifest.json" rel="manifest" type="application/manifest+json" />
+
     <title>셀럽잇 - CELUVEAT</title>
   </head>
   <body>

diff --git a/frontend/public/manifest.json b/frontend/public/manifest.json
@@ -0,0 +1,22 @@
+{
+  "name": "Celuveat",
+  "short_name": "Celuveat",
+  "description": "셀럽들이 다녀간 맛집들을 확인해보세요.",
+  "background_color": "#fff",
+  "theme_color": "#fcfcfc",
+  "dir": "ltr",
+  "display": "standalone",
+  "orientation": "portrait",
+  "scope": "/",
+  "start_url": "/",
+  "categories": [
+    {
+      "id": "map",
+      "name": "맛집 지도"
+    }
+  ],
+  "icons": [{ "src": "/favicon.ico", "sizes": "any", "type": "image/x-icon" }],
+  "id": "celuveat",
+  "lang": "ko",
+  "display_override": ["standalone", "window-controls-overlay"]
+}
diff --git a/frontend/src/components/@common/Dialog/Dialog.tsx b/frontend/src/components/@common/Dialog/Dialog.tsx
@@ -0,0 +1,70 @@
+import { Modal } from 'celuveat-ui-library';
+import React, { ReactNode } from 'react';
+import styled from 'styled-components';
+import Exit from '~/assets/icons/exit.svg';
+import useCeluveatModal from '~/hooks/useCeluveatModal';
+
+interface Props {
+  title?: string;
+  children: ReactNode;
+}
+
+function Dialog({ title, children }: Props) {
+  const { closeModal } = useCeluveatModal();
+
+  return (
+    <>
+      <Modal.Overlay as={<StyledOverlay />} />
+      <StyledContent>
+        <StyledTitle>{title}</StyledTitle>
+        <StyledExitButton onClick={closeModal} />
+        {children}
+      </StyledContent>
+    </>
+  );
+}
+
+export default Dialog;
+
+const StyledOverlay = styled.div`
+  position: absolute;
+  top: 0;
+
+  width: 100%;
+  height: 100%;
+
+  background-color: black;
+
+  opacity: 0.2;
+`;
+
+const StyledContent = styled.div`
+  position: fixed;
+  top: 50%;
+  left: 50vw;
+
+  min-width: 540px;
+  max-width: 66.6%;
+
+  padding: 2.4rem;
+  margin: 0 auto;
+
+  border-radius: 12px;
+  background-color: white;
+
+  transform: translateX(-50%) translateY(-50%);
+`;
+
+const StyledTitle = styled.h4`
+  text-align: center;
+
+  margin-bottom: 2.4rem;
+`;
+
+const StyledExitButton = styled(Exit)`
+  position: absolute;
+  top: 12px;
+  right: 12px;
+
+  cursor: pointer;
+`;
diff --git a/frontend/src/components/@common/Dialog/index.tsx b/frontend/src/components/@common/Dialog/index.tsx
@@ -0,0 +1,3 @@
+import Dialog from './Dialog';
+
+export default Dialog;
diff --git a/frontend/src/components/@common/ErrorBoundary/ErrorBoundary.tsx b/frontend/src/components/@common/ErrorBoundary/ErrorBoundary.tsx
@@ -0,0 +1,46 @@
+import { Component, ReactElement, ReactNode } from 'react';
+
+interface FallbackRenderProps {
+  resetErrorBoundary: () => void;
+}
+interface Props {
+  children: ReactNode;
+  fallbackRender: ({ resetErrorBoundary }: FallbackRenderProps) => ReactElement;
+  reset: () => void;
+}
+
+interface State {
+  hasError: boolean;
+}
+
+class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(): State {
+    return {
+      hasError: true,
+    };
+  }
+
+  resetErrorBoundary() {
+    const { reset } = this.props;
+    reset();
+    this.setState({ hasError: false });
+  }
+
+  render() {
+    const { hasError } = this.state;
+    const { children, fallbackRender } = this.props;
+
+    if (hasError) {
+      return fallbackRender({ resetErrorBoundary: () => this.resetErrorBoundary() });
+    }
+
+    return children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/frontend/src/components/@common/Header/Header.tsx b/frontend/src/components/@common/Header/Header.tsx
@@ -3,52 +3,34 @@ import { Link, useLocation, useNavigate } from 'react-router-dom';
 import { Wrapper } from '@googlemaps/react-wrapper';
 
 import Logo from '~/assets/icons/logo.svg';
-
-import InfoDropDown from '~/components/InfoDropDown';
-import LoginModal from '~/components/LoginModal';
 import SearchBar from '~/components/SearchBar';
 
-import useBooleanState from '~/hooks/useBooleanState';
-
-import TextButton from '../Button';
+import TextButton from '~/components/@common/Button';
+import InfoDropDown from '~/components/InfoDropDown/InfoDropDown';
 
 function Header() {
   const navigator = useNavigate();
   const { pathname } = useLocation();
-  const { value: isModalOpen, setTrue: openModal, setFalse: closeModal } = useBooleanState(false);
-
-  const handleInfoDropDown = (event: React.MouseEvent<HTMLElement>) => {
-    const currentOption = event.currentTarget.dataset.name;
-
-    if (currentOption === '로그인') openModal();
-    if (currentOption === '마이 페이지') navigator('/user');
-    if (currentOption === '위시리스트') navigator('/restaurants/like');
-    if (currentOption === '회원 탈퇴') navigator('/withdrawal');
-  };
 
   const isMapPage = pathname === '/map';
 
   return (
-    <>
-      <StyledHeader>
-        <Link aria-label="셀럽잇 홈페이지" role="button" to="/">
-          <Logo width={136} />
-        </Link>
-        {isMapPage && (
-          <Wrapper apiKey={process.env.GOOGLE_MAP_API_KEY} language="ko" libraries={['places']}>
-            <SearchBar />
-          </Wrapper>
+    <StyledHeader>
+      <Link aria-label="셀럽잇 홈페이지" role="button" to="/">
+        <Logo width={136} />
+      </Link>
+      {isMapPage && (
+        <Wrapper apiKey={process.env.GOOGLE_MAP_API_KEY} language="ko" libraries={['places']}>
+          <SearchBar />
+        </Wrapper>
+      )}
+      <StyledRightSection>
+        {!isMapPage && (
+          <TextButton text="지도로 보기" colorType="dark" type="button" onClick={() => navigator('/map')} />
         )}
-        <StyledRightSection>
-          {!isMapPage && (
-            <TextButton text="지도로 보기" colorType="dark" type="button" onClick={() => navigator('/map')} />
-          )}
-          <InfoDropDown externalOnClick={handleInfoDropDown} isOpen={isModalOpen} label="로그인" />
-        </StyledRightSection>
-      </StyledHeader>
-
-      <LoginModal close={closeModal} isOpen={isModalOpen} />
-    </>
+        <InfoDropDown />
+      </StyledRightSection>
+    </StyledHeader>
   );
 }
 

diff --git a/frontend/src/components/@common/Map/Marker/Marker.tsx b/frontend/src/components/@common/Map/Marker/Marker.tsx
@@ -1,5 +1,4 @@
 import styled, { css, keyframes } from 'styled-components';
-import { memo } from 'react';
 import Love from '~/assets/icons/love.svg';
 import ProfileImage from '../../ProfileImage';
 import { Restaurant } from '~/@types/restaurant.types';

diff --git a/frontend/src/components/@common/NavItem/NavItem.stories.tsx b/frontend/src/components/@common/NavItem/NavItem.stories.tsx
@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react';
-import All from '~/assets/icons/restaurantCategory/all.svg';
+import All from '~/assets/icons/category/all.svg';
 import NavItem from './NavItem';
 
 const meta: Meta<typeof NavItem> = {

diff --git a/frontend/src/components/@common/ProfileImageList/ProfileImageList.tsx b/frontend/src/components/@common/ProfileImageList/ProfileImageList.tsx
@@ -46,7 +46,6 @@ const StyledProfileImageList = styled.div<{ size: string }>`
 
 const StyledProfileImageWrapper = styled.div<{ index: number; hover: boolean; length: number }>`
   position: absolute;
-  z-index: ${({ length, index }) => 10 + length - index};
 
   transition: 0.4s ease-in-out;
 

diff --git a/frontend/src/components/@common/Toast/Toast.tsx b/frontend/src/components/@common/Toast/Toast.tsx
@@ -55,6 +55,7 @@ const StyledToastWrapper = styled.div<StyledToastProps>`
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  gap: 0.8rem;
 
   position: fixed;
   bottom: 0;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import Dialog from './Dialog';

		export default Dialog;