Merge pull request #160 from Team-TIFY/dev

[Deploy]: Tify 1.0 버전 배포

.eslintrc.cjs

@@ -23,15 +23,24 @@ module.exports = {
       'error',
       { props: 'never', children: 'never' },
     ],
-    'react-refresh/only-export-components': 'warn',
+    'prettier/prettier': [
+      'error',
+      {
+        endOfLine: 'auto',
+      },
+    ],
+    'react-refresh/only-export-components': 'off',
     'react/react-in-jsx-scope': 'off',
     'react/no-children-prop': 'off',
     'no-unused-expressions': 'off',
     '@typescript-eslint/no-var-requires': 'off',
     '@typescript-eslint/no-empty-function': 'off',
     'react/no-unknown-property': ['error', { ignore: ['css'] }],
     'no-unused-vars': 'off',
+    '@typescript-eslint/no-non-null-assertion': 'off',
+    '@typescript-eslint/no-explicit-any': 'off',
     '@typescript-eslint/no-unused-vars': ['off', { ignoreRestSiblings: true }],
+    'react-hooks/exhaustive-deps': 'off',
   },
   settings: {
     'import/external-module-folders': ['.yarn'],

.github/workflows/storybook-deploy.yml

@@ -3,23 +3,27 @@ on:
   pull_request:
     branches: [dev]
     paths: ['src/components/atoms/**']
-
 jobs:
-  test:
+  storybook:
     permissions:
       pull-requests: write
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/checkout@v1
-      - name: Install dependencies
-        run: yarn
-      - name: Publish to Chromatic
-        id: chromatic
-        run : yarn chromatic
-        env:
-          CHROMATIC_PROJECT_TOKEN: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
-      - name: comment PR  
-        uses: thollander/actions-comment-pull-request@v2  
-        with:  
-          message: "🚀storybook: https://www.chromatic.com/builds?appId=64ace737dc3be00731907172"  
-
+    - name: Checkout repository
+      uses: actions/checkout@v3
+      with:
+        fetch-depth: 0
+    - name : Install dependencies
+      run : yarn install
+    - name : Publish to Chromatic
+      id: chromatic
+      uses: chromaui/action@v1
+      with :
+        projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+        token: ${{secrets.GH_TOKEN}}
+    - name: comment PR
+      uses: thollander/actions-comment-pull-request@v2
+      env:
+        GITHUB_TOKEN: ${{secrets.GH_TOKEN}}
+      with:  
+        message: "🚀storybook: ${{ steps.chromatic.outputs.storybookUrl }}"

.storybook/preview.tsx

@@ -2,6 +2,7 @@ import { Preview } from '@storybook/react';
 import React from 'react';
 import { BrowserRouter } from 'react-router-dom';
 import './style.css';
+import { RecoilRoot } from 'recoil'
 
 const customViewports = {
   iPhone13: {
@@ -40,9 +41,11 @@ const preview: Preview = {
   decorators: [
     (Story) => (
       <BrowserRouter>
-      <div>
-        <Story/>
-      </div>
+      <RecoilRoot>
+        <div>
+          <Story/>
+        </div>
+      </RecoilRoot>
       </BrowserRouter>
     )
   ]

dockerfile

@@ -1,16 +1,33 @@
 # react-dockerizing/Dockerfile
 
 # base image 설정(as build 로 완료된 파일을 밑에서 사용할 수 있다.)
-FROM node:16 AS builder
-
+FROM --platform=linux/arm64 node:18.16.1-alpine as builder
 # 컨테이너 내부 작업 디렉토리 설정
 WORKDIR /app
-COPY package.json ./
-COPY yarn.lock ./
 
-RUN yarn install
+COPY package.json .
+RUN yarn set version berry
+
+COPY yarn.lock .yarn .yarnrc.yml ./
+
+# RUN yarn install
 COPY . .
 
+RUN yarn build
+
+# COPY .yarn ./.yarn
+# COPY .pnp.cjs .yarnrc.yml package.json yarn.lock* ./
+# RUN yarn install --immutable
+
+# COPY . .
+
+# RUN npm install yarn --global --force
+# RUN yarn set version berry
+# RUN yarn install --immutable --immutable-cache --check-cache
+
+# RUN yarn set version berry
+# RUN yarn build
+
 # app dependencies
 # 컨테이너 내부로 package.json 파일들을 복사
 
@@ -26,7 +43,6 @@ COPY . .
 # yarn build
 # RUN npm i -D esbuild
 # RUN yarn install
-# RUN yarn build
 
 # prod environment
 ## TODO:nginx 관련된 거 다 뺴기~ 
@@ -48,4 +64,4 @@ EXPOSE 3000
 
 # nginx 서버를 실행하고 백그라운드로 동작하도록 한다.
 # CMD ["nginx", "-g", "daemon off;"]
-CMD ["yarn", "dev"]
+CMD ["yarn", "dev"]

package.json

@@ -14,7 +14,7 @@
     "chromatic": "npx chromatic --exit-zero-on-changes -d storybook-static/"
   },
   "resolutions": {
-    "@types/react":"^18.0.37"
+    "@types/react": "^18.0.37"
   },
   "dependencies": {
     "@emotion/react": "^11.11.1",
@@ -25,22 +25,25 @@
     "@storybook/addons": "^7.0.27",
     "@tanstack/react-query": "^4.29.15",
     "@tanstack/react-query-devtools": "^4.29.15",
-    "@types/react-lottie": "^1.2.8",
     "@types/react-router-dom": "^5.3.3",
     "axios": "^1.4.0",
     "date-fns": "^2.30.0",
+    "dnd-core": "^16.0.1",
     "react": "^18.2.0",
     "react-cookie": "^4.1.1",
+    "react-copy-to-clipboard": "^5.1.0",
     "react-datepicker": "^4.16.0",
+    "react-dnd": "^16.0.1",
+    "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-intersection-observer": "^9.5.2",
-    "react-lottie": "^1.2.3",
     "react-modal": "^3.16.1",
     "react-native-modal-datetime-picker": "^17.1.0",
     "react-router-dom": "^6.14.1",
     "recoil": "^0.7.7"
   },
   "devDependencies": {
+    "@lottiefiles/react-lottie-player": "^3.5.3",
     "@storybook/addon-essentials": "^7.0.18",
     "@storybook/addon-interactions": "^7.0.18",
     "@storybook/addon-links": "^7.0.18",
@@ -53,6 +56,7 @@
     "@storybook/testing-library": "^0.0.14-next.2",
     "@types/prettier": "^2.7.3",
     "@types/react": "^18.0.37",
+    "@types/react-copy-to-clipboard": "^5.0.7",
     "@types/react-datepicker": "^4.15.0",
     "@types/react-dom": "^18.0.11",
     "@types/react-modal": "^3.16.0",

src/assets/icons/CompleteIcon.tsx

@@ -0,0 +1,30 @@
+const CompleteIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="21"
+      viewBox="0 0 20 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_1500_2151)">
+        <path
+          d="M9.99996 2.1665C9.81829 2.1665 9.63996 2.16817 9.46496 2.17067L8.95163 2.18484L8.70246 2.19567L8.21996 2.224L7.75913 2.26234C3.77163 2.649 2.14913 4.2715 1.76246 8.259L1.72413 8.71984L1.69579 9.20234C1.69163 9.284 1.68746 9.36734 1.68496 9.4515L1.67079 9.96484L1.66746 10.2298L1.66663 10.4998C1.66663 10.6815 1.66829 10.8598 1.67079 11.0348L1.68496 11.5482L1.69579 11.7973L1.72413 12.2798L1.76246 12.7407C2.14913 16.7282 3.77163 18.3507 7.75913 18.7373L8.21996 18.7757L8.70246 18.804C8.78413 18.8082 8.86746 18.8123 8.95163 18.8148L9.46496 18.829L9.99996 18.8332L10.535 18.829L11.0483 18.8148L11.2975 18.804L11.78 18.7757L12.2408 18.7373C16.2283 18.3507 17.8508 16.7282 18.2375 12.7407L18.2758 12.2798L18.3041 11.7973C18.3083 11.7157 18.3125 11.6323 18.315 11.5482L18.3291 11.0348L18.3333 10.4998L18.3291 9.96484L18.315 9.4515L18.3041 9.20234L18.2758 8.71984L18.2375 8.259C17.8508 4.2715 16.2283 2.649 12.2408 2.26234L11.78 2.224L11.2975 2.19567C11.2144 2.19162 11.1314 2.18801 11.0483 2.18484L10.535 2.17067L10.27 2.16734L9.99996 2.1665ZM11.9108 8.244C12.0608 8.09455 12.262 8.00778 12.4736 8.00131C12.6852 7.99485 12.8914 8.06918 13.0502 8.20921C13.209 8.34924 13.3085 8.54446 13.3286 8.75523C13.3487 8.966 13.2878 9.17651 13.1583 9.344L13.0891 9.42234L9.75579 12.7557C9.6123 12.8992 9.42138 12.9853 9.21886 12.9981C9.01634 13.0108 8.81613 12.9492 8.65579 12.8248L8.57746 12.7557L6.91079 11.089C6.76134 10.939 6.67456 10.7378 6.6681 10.5262C6.66164 10.3146 6.73597 10.1084 6.876 9.9496C7.01603 9.7908 7.21125 9.69125 7.42202 9.67117C7.63279 9.65109 7.8433 9.71199 8.01079 9.8415L8.08913 9.91067L9.16663 10.9873L11.9108 8.244Z"
+          fill="#A875FF"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1500_2151">
+          <rect
+            width="20"
+            height="20"
+            fill="white"
+            transform="translate(0 0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default CompleteIcon

src/assets/icons/CopyIcon.tsx

@@ -0,0 +1,35 @@
+const CopyIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="20"
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_1731_30283)">
+        <path
+          d="M6.66675 8.33366C6.66675 7.89163 6.84234 7.46771 7.1549 7.15515C7.46746 6.84259 7.89139 6.66699 8.33341 6.66699H15.0001C15.4421 6.66699 15.866 6.84259 16.1786 7.15515C16.4912 7.46771 16.6667 7.89163 16.6667 8.33366V15.0003C16.6667 15.4424 16.4912 15.8663 16.1786 16.1788C15.866 16.4914 15.4421 16.667 15.0001 16.667H8.33341C7.89139 16.667 7.46746 16.4914 7.1549 16.1788C6.84234 15.8663 6.66675 15.4424 6.66675 15.0003V8.33366Z"
+          stroke="#E4E4E5"
+          strokeWidth="1.2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+        <path
+          d="M13.3333 6.66634V4.99967C13.3333 4.55765 13.1577 4.13372 12.8451 3.82116C12.5325 3.5086 12.1086 3.33301 11.6666 3.33301H4.99992C4.55789 3.33301 4.13397 3.5086 3.82141 3.82116C3.50885 4.13372 3.33325 4.55765 3.33325 4.99967V11.6663C3.33325 12.1084 3.50885 12.5323 3.82141 12.8449C4.13397 13.1574 4.55789 13.333 4.99992 13.333H6.66659"
+          stroke="#E4E4E5"
+          strokeWidth="1.2"
+          strokeLinecap="round"
+          strokeLinejoin="round"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1731_30283">
+          <rect width="20" height="20" fill="white" />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default CopyIcon

src/assets/icons/Delete.tsx

@@ -0,0 +1,49 @@
+export const Delete = () => {
+  return (
+    <div style={{ marginRight: '8px' }}>
+      <svg
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clipPath="url(#clip0_2272_27587)">
+          <path
+            d="M4 7.00049H20"
+            stroke="#9E9EA4"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M5 7.00049L6 19.0005C6 19.5309 6.21071 20.0396 6.58579 20.4147C6.96086 20.7898 7.46957 21.0005 8 21.0005H16C16.5304 21.0005 17.0391 20.7898 17.4142 20.4147C17.7893 20.0396 18 19.5309 18 19.0005L19 7.00049"
+            stroke="#9E9EA4"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M9 7V4C9 3.73478 9.10536 3.48043 9.29289 3.29289C9.48043 3.10536 9.73478 3 10 3H14C14.2652 3 14.5196 3.10536 14.7071 3.29289C14.8946 3.48043 15 3.73478 15 4V7"
+            stroke="#9E9EA4"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+          <path
+            d="M10 12L14 16M14 12L10 16"
+            stroke="#9E9EA4"
+            strokeWidth="1.5"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_2272_27587">
+            <rect width="24" height="24" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </div>
+  )
+}

src/assets/icons/ErrorIcon.tsx

@@ -0,0 +1,30 @@
+const ErrorIcon = () => {
+  return (
+    <svg
+      width="20"
+      height="21"
+      viewBox="0 0 20 21"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <g clipPath="url(#clip0_1500_2159)">
+        <path
+          d="M9.99998 2.1665L10.535 2.17067L11.0483 2.18484L11.2975 2.19567L11.78 2.224L12.2408 2.26234C16.1466 2.6415 17.7825 4.2065 18.2125 8.01734L18.2375 8.259L18.2758 8.71984L18.31 9.32567L18.315 9.45067L18.3291 9.96484L18.3333 10.4998L18.3291 11.0348L18.315 11.5482L18.3041 11.7973L18.2758 12.2798L18.2375 12.7407C17.8583 16.6465 16.2933 18.2823 12.4825 18.7123L12.2408 18.7373L11.78 18.7757L11.1741 18.8098L11.0491 18.8148L10.535 18.829L9.99998 18.8332L9.46498 18.829L8.95165 18.8148L8.70248 18.804L8.21998 18.7757L7.75915 18.7373C3.85331 18.3582 2.21748 16.7932 1.78748 12.9823L1.76248 12.7407L1.72415 12.2798L1.68998 11.674L1.68498 11.549L1.67081 11.0348L1.66748 10.7698V10.2298L1.67081 9.96484L1.68498 9.4515L1.69581 9.20234L1.72415 8.71984L1.76248 8.259C2.14165 4.35317 3.70665 2.71734 7.51748 2.28734L7.75915 2.26234L8.21998 2.224L8.82581 2.18984L8.95081 2.18484L9.46498 2.17067C9.63998 2.16817 9.81831 2.1665 9.99998 2.1665ZM10.0083 12.9998L9.90248 13.0057C9.69994 13.0298 9.51327 13.1273 9.37782 13.2798C9.24238 13.4323 9.16757 13.6292 9.16757 13.8332C9.16757 14.0371 9.24238 14.234 9.37782 14.3865C9.51327 14.539 9.69994 14.6366 9.90248 14.6607L9.99998 14.6665L10.1058 14.6607C10.3084 14.6366 10.495 14.539 10.6305 14.3865C10.7659 14.234 10.8407 14.0371 10.8407 13.8332C10.8407 13.6292 10.7659 13.4323 10.6305 13.2798C10.495 13.1273 10.3084 13.0298 10.1058 13.0057L10.0083 12.9998ZM9.99998 6.33317C9.79587 6.3332 9.59886 6.40813 9.44634 6.54377C9.29381 6.6794 9.19636 6.86629 9.17248 7.069L9.16665 7.1665V10.4998L9.17248 10.5973C9.19657 10.7999 9.29411 10.9866 9.44662 11.122C9.59912 11.2574 9.79601 11.3322 9.99998 11.3322C10.2039 11.3322 10.4008 11.2574 10.5533 11.122C10.7058 10.9866 10.8034 10.7999 10.8275 10.5973L10.8333 10.4998V7.1665L10.8275 7.069C10.8036 6.86629 10.7062 6.6794 10.5536 6.54377C10.4011 6.40813 10.2041 6.3332 9.99998 6.33317Z"
+          fill="#FFFFA8"
+        />
+      </g>
+      <defs>
+        <clipPath id="clip0_1500_2159">
+          <rect
+            width="20"
+            height="20"
+            fill="white"
+            transform="translate(0 0.5)"
+          />
+        </clipPath>
+      </defs>
+    </svg>
+  )
+}
+
+export default ErrorIcon

src/assets/icons/FileIcon.tsx

@@ -0,0 +1,27 @@
+export const FileIcon = () => {
+  return (
+    <>
+      <svg
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+        fill="none"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <g clipPath="url(#clip0_3258_30123)">
+          <path
+            d="M9.9998 4.66681L5.66647 9.00014C5.40125 9.26536 5.25226 9.62507 5.25226 10.0001C5.25226 10.3752 5.40125 10.7349 5.66647 11.0001C5.93169 11.2654 6.2914 11.4144 6.66647 11.4144C7.04154 11.4144 7.40125 11.2654 7.66647 11.0001L11.9998 6.66681C12.5302 6.13637 12.8282 5.41695 12.8282 4.66681C12.8282 3.91666 12.5302 3.19724 11.9998 2.66681C11.4694 2.13637 10.7499 1.83838 9.9998 1.83838C9.24966 1.83838 8.53024 2.13637 7.9998 2.66681L3.66647 7.00014C2.87082 7.79579 2.42383 8.87492 2.42383 10.0001C2.42383 11.1254 2.87082 12.2045 3.66647 13.0001C4.46212 13.7958 5.54125 14.2428 6.66647 14.2428C7.79169 14.2428 8.87082 13.7958 9.66647 13.0001L13.9998 8.66681"
+            stroke="#9E9EA4"
+            strokeLinecap="round"
+            strokeLinejoin="round"
+          />
+        </g>
+        <defs>
+          <clipPath id="clip0_3258_30123">
+            <rect width="16" height="16" fill="white" />
+          </clipPath>
+        </defs>
+      </svg>
+    </>
+  )
+}