release: v1.0.1

.github/workflows/backend-dev-cd.yml

@@ -76,4 +76,5 @@ jobs:
         run: |
           export APP_VERSION_TAG=${{ secrets.APP_VERSION_TAG }}
           pwd
-          sh /home/ubuntu/deploy.sh
+          docker compose down
+          docker compose up -d

.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 프로젝트 빌드

.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 "/*"

backend/src/main/java/com/celuveat/celeb/presentation/CelebController.java

@@ -21,4 +21,10 @@ ResponseEntity<List<CelebQueryResponse>> find() {
         List<CelebQueryResponse> result = celebQueryService.find();
         return ResponseEntity.ok(result);
     }
+
+    @GetMapping("/test")
+    ResponseEntity<Void> test() throws InterruptedException {
+        Thread.sleep(10000);
+        return ResponseEntity.ok().build();
+    }
 }

backend/src/main/resources/logback-spring.xml

@@ -15,7 +15,7 @@
         </root>
     </springProfile>
 
-    <springProfile name="dev, prod">
+    <springProfile name="dev, prod, own">
         <property name="infoLogPath" value="logs/backend/info"/>
         <property name="warnLogPath" value="logs/backend/warn"/>
         <property name="errorLogPath" value="logs/backend/error"/>

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,
 

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({}),
     ],
   };
 };

frontend/package.json

@@ -30,10 +30,9 @@
     "@tanstack/react-query-devtools": "^4.36.1",
     "axios": "^1.5.1",
     "browser-image-compression": "^2.0.2",
-    "celuveat-react-modal": "0.0.3",
+    "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",

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>

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"]
+}

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;
+`;

frontend/src/components/@common/Dialog/index.tsx

@@ -0,0 +1,3 @@
+import Dialog from './Dialog';
+
+export default Dialog;

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;

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>
   );
 }