main에 들어가가거라 ~~~~~~!!!!!!!!!!!!!!!!!!!!!

.github/workflows/CD.yml

@@ -0,0 +1,51 @@
+name: CD
+
+on:
+  push:
+    branches: [ "develop" ]
+
+env:
+  HOST:     ${{ secrets.HOST }}
+  USERNAME: ${{ secrets.USERNAME }}
+  KEY:      ${{ secrets.SSH_KEY }}
+
+jobs:
+  deploy-ci:
+    runs-on: ubuntu-22.04
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Docker build 가능하도록 환경 설정
+        uses: docker/setup-buildx-action@v2.9.1
+
+      - name: Docker Hub에 로그인
+        uses: docker/login-action@v2.2.0
+        with:
+          username: ${{ secrets.DOCKERHUB_USERNAME }}
+          password: ${{ secrets.DOCKERHUB_ACCESSTOKEN }}
+
+      - name: Build and push Docker image
+        uses: docker/build-push-action@v2
+        with:
+          context: .
+          file: ./deploy/Dockerfile
+          push: true
+          tags: lequu/lequu-client:latest
+
+  deploy-cd:
+    needs: deploy-ci
+    runs-on: ubuntu-22.04
+
+    steps:
+      - name: 도커 컨테이너 실행
+        uses: appleboy/ssh-action@master
+        with:
+          host: ${{ secrets.RELEASE_SERVER_IP }}
+          username: ${{ secrets.RELEASE_SERVER_USER }}
+          key: ${{ secrets.RELEASE_SERVER_KEY }}
+          script: |
+            cd ~
+            ./deploy.sh
+            docker image prune -f

.gitignore

@@ -23,4 +23,6 @@ dist-ssr
 *.sln
 *.sw?
 
-.env
+.env
+# Sentry Config File
+.env.sentry-build-plugin

.stylelintrc.json

@@ -15,22 +15,37 @@
       }
     ],
     "order/order": ["custom-properties", "declarations"],
-
     "order/properties-order": [
       {
         "groupName": "Layout",
+        "emptyLineBefore": "always",
         "noEmptyLineBetween": true,
         "properties": [
           "display",
-          "visibility",
-          "overflow",
-          "float",
-          "clear",
+          "gap",
+          "justify-content",
+          "align-items",
+          "flex-direction",
+          "flex-wrap",
+          "flex-flow",
+          "flex-grow",
+          "flex-shrink",
+          "flex-basis",
+          "grid-template-columns",
+          "grid-area",
+          "grid-template-rows",
+          "grid-column",
+          "grid-template-areas",
+          "grid-gap",
           "position",
           "top",
           "right",
           "bottom",
           "left",
+          "float",
+          "clear",
+          "visibility",
+          "overflow",
           "z-index"
         ]
       },
@@ -41,30 +56,36 @@
         "properties": [
           "width",
           "height",
-          "margin",
-          "margin-top",
-          "margin-right",
-          "margin-bottom",
-          "margin-left",
           "padding",
           "padding-top",
           "padding-right",
           "padding-bottom",
           "padding-left",
-          "border"
+          "margin",
+          "margin-top",
+          "margin-right",
+          "margin-bottom",
+          "margin-left"
         ]
       },
       {
         "groupName": "Background",
         "emptyLineBefore": "always",
         "noEmptyLineBetween": true,
-        "properties": ["background-color"]
-      },
-      {
-        "groupName": "Font",
-        "emptyLineBefore": "always",
-        "noEmptyLineBetween": true,
         "properties": [
+          "border",
+          "border-radius",
+          "border-top",
+          "border-right",
+          "border-bottom",
+          "border-left",
+          "border-color",
+          "border-width",
+          "border-style",
+          "background",
+          "background-color",
+          "background-position",
+          "background-size",
           "color",
           "font-style",
           "font-weight",
@@ -73,15 +94,20 @@
           "letter-spacing",
           "text-align",
           "text-indent",
-          "vertical-align",
-          "white-space"
+          "vertical-align"
         ]
       },
       {
-        "groupName": "Animation",
+        "groupName": "Text",
+        "emptyLineBefore": "always",
+        "noEmptyLineBetween": true,
+        "properties": ["text-decoration", "text-align", "vertical-align"]
+      },
+      {
+        "groupName": "ETC",
         "emptyLineBefore": "always",
         "noEmptyLineBetween": true,
-        "properties": ["animation"]
+        "properties": ["white-space"]
       }
     ]
   }

README.md

@@ -1,7 +1,7 @@
 <div align="center">
 <h1> 💌 Lecue 💌 </h1>
 
-<img alt="로고 대문 이미지" src="https://private-user-images.githubusercontent.com/67463603/294701719-77faaad4-1dc0-49ff-a19c-71f07e52b9ac.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MDQ4NTc4MjEsIm5iZiI6MTcwNDg1NzUyMSwicGF0aCI6Ii82NzQ2MzYwMy8yOTQ3MDE3MTktNzdmYWFhZDQtMWRjMC00OWZmLWExOWMtNzFmMDdlNTJiOWFjLnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAxMTAlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMTEwVDAzMzIwMVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTBkOTYxY2U3Y2E1Mjg5YzVjOTg0MTNkODA2ZWY3ZTI3N2MzN2I2NmUxNjkwNDA1OGVjNzljMGE3NzAwMjg5YjAmWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.rFdpID458vCvpq31f0EFZxZ1bT8OSHCf_XAIDs5SH-s">
+<img alt="로고 대문 이미지" width="257" alt="image" src="https://github.com/Team-Lecue/Lecue-Client/assets/65286685/f5211974-831b-4743-9948-345ec16fc196">
 </div>
 
 <br/>
@@ -15,12 +15,39 @@
 
 <br/>
 
+## 🍟핵심 기능
+[핵심 기능]
+- 레큐북 : 레큐노트를 부착할 수 있는 롤링페이퍼 기능
+  <br />
+  <img alt="레큐북 이미지" width="257" alt="image" src="https://velog.velcdn.com/images/aroo_ming/post/9a7698ef-8e26-4065-91be-0b2dab43e3c2/image.png" />
+- 레큐노트 : 텍스트와 이미지를 업로드할 수 있는 포스트잇 기능
+  <br />
+  <img alt="레큐노트 이미지" width="257" alt="image" src="https://velog.velcdn.com/images/aroo_ming/post/b5d0dc9c-937f-40f8-a008-82e341bd619e/image.png" />
+- 스티커 : 스티커 이미지로 레큐북을 꾸밀 수 있는 기능
+  <br />
+  <img alt="스티커 부착 이미지" width="257" alt="image" src="https://velog.velcdn.com/images/aroo_ming/post/dd433bca-c7de-4815-b5a3-0b6dc779b083/image.png" />
+
+[팬덤 특화 기능]
+- 커스텀 기능 : 레큐북, 레큐노트, 스티커 유저 커스텀 기능
+- 인기 롤링페이퍼 기능 : 레큐노트가 많이 부착된 레큐북 홈화면에 노출
+   → 추후 스프린트로는 최애 등록하고 등록한 최애 관련 레큐북을 노출
+- 텍스트 추출 요청을 통한 굿즈 제작 : 기능 개발보다 팬덤이 레큐에 요청하면 텍스트 파일로 제공하는 형태
+
+[기본 기능]
+- 내 기록 보기 - 유저가 남긴 레큐노트 / 제작한 레큐북 모아보기
+  <br />
+  <img alt="마이페이지 이미지" width="257" alt="image" src="https://velog.velcdn.com/images/aroo_ming/post/7c027d28-dcad-4f07-a3e7-a2b20fc05a0d/image.png" />
+  <img alt="마이페이지 이미지" width="257" alt="image" src="https://velog.velcdn.com/images/aroo_ming/post/05e91732-8495-4f4d-87b9-38a5bc400c0d/image.png" />
+- 문의 요청 기능
+
+<br/>
+
 ## ✨ OUR TEAM
 
 | <img src="https://avatars.githubusercontent.com/u/80264647?v=4" width="200" height="200" alt="프로필사진"> | <img src="https://avatars.githubusercontent.com/u/65286685?v=4" width="200" height="200" alt="프로필사진"> | <img src="https://avatars.githubusercontent.com/u/60962533?v=4" width="200" height="200" alt="프로필사진"> | <img src="https://velog.velcdn.com/images/aroo_ming/post/a9437eb2-9104-4c8b-912f-1a8b6eaf6f9d/image.jpeg" width="200" height="200" alt="프로필사진"> |
 | :-------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------: | :-------------------------------------------------------------------------------------------: |
 |                            <div align = "center"><b>[짱리드]아름</b></div>                            |                            <div align = "center"><b>은빈</b></div>                            |                            <div align = "center"><b>정우</b></div>                            |                            <div align = "center"><b>도윤</b></div>                            |
-|                            [@Arooming](https://github.com/Arooming)                             |                        [@eunbeann](https://github.com/eunbeann/300x300)                         |                       [@jungwoo3490](https://github.com/jungwoo3490)                        |                       [@binllionaire](https://github.com/binllionaire)                        |
+|                            [@Arooming](https://github.com/Arooming)                             |                        [@eunbeann](https://github.com/eunbeann)                         |                       [@jungwoo3490](https://github.com/jungwoo3490)                        |                       [@doyn511](https://github.com/doyn511)                        |
 
 
 <br/>
@@ -78,7 +105,6 @@
 | refactor    | 코드 리팩토링에 대한 커밋                                                        |
 | docs        | 문서를 수정한 경우, 파일 삭제, 파일명 수정 등                                    |
 | chore       | 빌드 테스트 업데이트, 패키지 매니저를 설정하는 경우, 주석 추가, 자잘한 문서 수정 |
-| code review | 코드 리뷰 반영                                                                   |
 
 <br/>
 

deploy/Dockerfile

@@ -0,0 +1,12 @@
+FROM node:18.17.0-slim
+
+WORKDIR /app
+
+COPY package.json .
+COPY yarn.lock .
+
+RUN yarn
+
+COPY . .
+
+CMD ["yarn", "dev"]

index.html

@@ -2,17 +2,58 @@
 <html lang="ko">
   <head>
     <meta charset="UTF-8" />
-    <link
-      rel="stylesheet"
-      as="style"
-      crossorigin
-      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.6/dist/web/static/pretendard.css"
-    />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <link rel="icon" type="image/svg+xml" href="./src/assets/favicon.svg" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, user-scalable=0"
+    />
+
+    <meta property="og:title" content="레큐 lecue" />
+    <meta
+      property="og:description"
+      content="레큐노트에 우리의 마음을 담아 전달해요"
+    />
+    <meta
+      property="og:image"
+      content="https://dzfv99wxq6tx0.cloudfront.net/lecue.png"
+    />
+
     <title>Lecue</title>
   </head>
+
+  <!-- Google Tag Manager -->
+  <script>
+    (function (w, d, s, l, i) {
+      w[l] = w[l] || [];
+      w[l].push({
+        'gtm.start': new Date().getTime(),
+        event: 'gtm.js',
+      });
+      var f = d.getElementsByTagName(s)[0],
+        j = d.createElement(s),
+        dl = l != 'dataLayer' ? '&l=' + l : '';
+      j.async = true;
+      j.src = 'https://www.googletagmanager.com/gtm.js?id=' + i + dl;
+      f.parentNode.insertBefore(j, f);
+    })(window, document, 'script', 'dataLayer', 'GTM-PS49HW2G');
+  </script>
+  <!-- End Google Tag Manager -->
+
   <body>
     <div id="root"></div>
+    <div id="lecuenote-modal"></div>
     <script type="module" src="/src/main.tsx"></script>
   </body>
+
+  <!-- Google Tag Manager (noscript) -->
+  <noscript
+    ><iframe
+      src="https://www.googletagmanager.com/ns.html?id=GTM-PS49HW2G"
+      height="0"
+      width="0"
+      style="display: none; visibility: hidden"
+    ></iframe
+  ></noscript>
+  <!-- End Google Tag Manager (noscript) -->
 </html>

package.json

@@ -4,18 +4,28 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0 --port 3000",
     "build": "tsc && vite build",
     "lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0",
     "preview": "vite preview"
   },
   "dependencies": {
     "@emotion/react": "^11.11.3",
     "@emotion/styled": "^11.11.0",
+    "@sentry/browser": "^7.93.0",
+    "@sentry/react": "^7.93.0",
+    "@sentry/vite-plugin": "^2.10.2",
+    "axios": "^1.6.5",
     "eslint-plugin-react": "^7.33.2",
+    "grapheme-splitter": "^1.0.4",
+    "lottie-react": "^2.4.0",
+    "postcss": "^8.4.33",
+    "postcss-styled-syntax": "^0.6.3",
     "prettier": "^3.1.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-draggable": "^4.4.6",
+    "react-error-boundary": "^4.0.12",
     "react-query": "^3.39.3",
     "react-router-dom": "^6.21.1",
     "vite-plugin-svgr": "^4.2.0"
@@ -31,6 +41,9 @@
     "eslint-plugin-react-refresh": "^0.4.5",
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.3",
+    "stylelint": "^16.1.0",
+    "stylelint-config-standard": "^36.0.0",
+    "stylelint-order": "^6.0.4",
     "typescript": "^5.2.2",
     "vite": "^5.0.8"
   }