deploy: 1차 스프린트 배포 (#58)

* style : 전역 디자인 시스템 세팅 * style : 전역 디자인 시스템 세팅 * chore : 이슈 템플릿 수정 * refactor: build-test.yml 파일 수정 (#14) - node_modules 캐싱 기능 추가 - main, dev 브랜치 push, PR 시 빌드 테스트 돌아가도록 수정 Co-authored-by: wukddang <[email protected]> * feature: deploy.yml 파일 추가 (#15) * feature: deploy.yml 파일 추가 - main 브랜치에 push할 때 S3로 파일 업로드 * fix: pre-push 코드 수정 * fix: deploy.yml 파일 수정 - build폴더가 아닌 dist 폴더로 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style] 모바일 레이아웃 작업 (#19) * style : 모바일 레이아웃 작업 * chore : 이슈, pr 템플릿 docs 수정 * style: HeroImage, AlertText 공통 컴포넌트 제작 (#24) * style: HeroImage 추가 * style: AlertText * style: Input 공통 컴포넌트 (#26) * style: HeroImage 추가 * style: AlertText * style: Input * feature: Button 공통 컴포넌트 제작 (#20) * feature: 네이버, 카카오 아이콘 컴포넌트 추가 * feature: NormalButton 컴포넌트 추가 * feature: palette, typo 스타일 수정 * feature: Divider, Text 공통 컴포넌트 추가 * feature: IconButtons 추가 - 관심사, 네이버, 카카오, 특정 주제, 랜덤 매칭 버튼 * feature: Button 컴포넌트 사용법 + timeStamp 유틸 함수 추가 * feature: RandomMatchingJoin 버튼 추가 --------- Co-authored-by: wukddang <[email protected]> * style : flexbox 컴포넌트 제작 (#32) * style : spacing 컴포넌트 생성 (#33) * [Feature] mock service worker settings (#29) * deploy: 초기 배포 (#23) * style : 전역 디자인 시스템 세팅 * style : 전역 디자인 시스템 세팅 * chore : 이슈 템플릿 수정 * refactor: build-test.yml 파일 수정 (#14) - node_modules 캐싱 기능 추가 - main, dev 브랜치 push, PR 시 빌드 테스트 돌아가도록 수정 Co-authored-by: wukddang <[email protected]> * feature: deploy.yml 파일 추가 (#15) * feature: deploy.yml 파일 추가 - main 브랜치에 push할 때 S3로 파일 업로드 * fix: pre-push 코드 수정 * fix: deploy.yml 파일 수정 - build폴더가 아닌 dist 폴더로 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style] 모바일 레이아웃 작업 (#19) * style : 모바일 레이아웃 작업 * chore : 이슈, pr 템플릿 docs 수정 --------- Co-authored-by: judahhh <[email protected]> Co-authored-by: wukddang <[email protected]> * chore : mock service worker 설치 및 세팅 * chore : mock service worder setting --------- Co-authored-by: Changuk Woo <[email protected]> Co-authored-by: wukddang <[email protected]> * style: BottomSheet 컴포넌트 제작 (#34) * feature: Timer 컴포넌트 추가 + d3.js 라이브러리 설치 * feature: BottomSheet 컴포넌트 추가 * feature: RandomMatchingJoinButton props 수정 * feature: framer-motion 설치 + 애니메이션 효과 추가 * refactor: BottomSheet 폴더 변경 * refactor: isDarkMode 필수 타입으로 수정 * refactor: AlertText, HeroImage 폴더 구조 변경 * refactor: BottomSheet 컴포넌트 분리 * feature: Avatar 컴포넌트 제작 * refactor: RandomMatchingSheet 컴포넌트 이벤트 props 추가 * fix: package-lock.json 파일 오류 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style/] navigation bar 컴포넌트 제작 (#37) * style : 네비게이션 바 디자인 * style : 네비게이션 바 디자인 및 라우팅 처리 * fix : 프로필 이미지를 Avatar 컴포넌트를 이용하도록 수정 * chore : 타입 에러 해결 * chore : 홈 페이지에 네비게이션 바 예시 제거 * style: CountNumber 공통 컴포넌트 제작 (#38) * style: CountNumber * feat: Input Wrapper 추가. * chore : CountNumber 폴더 구조 변경 * style: InputTimer 공통 컴포넌트 제작 (#41) * style: CountNumber * feat: Input Wrapper 추가. * style: InputTimer 제작 * style : 로딩 컴포넌트 제작 (#47) * style: WhiteSelectorButton, DarkSelectorButton 공통 컴포넌트 (#46) * style: whiteselectorButton * refactor: 불필요 주석 삭제 * style: darkselectorbutton * Update src/components/common/DarkSelectorButton/index.tsx * Update src/components/common/WhiteSelectorButton/index.tsx * fix: font-weight 오타 수정 --------- Co-authored-by: Changuk Woo <[email protected]> Co-authored-by: wukddang <[email protected]> * style: ListRow 컴포넌트 제작 (#43) * refactor: Style prefix 붙이도록 수정 * refactor: Divider 컴포넌트 수정 + 웹 폰트 수정 - Divider 컴포넌트가 확장성 있도록 수정 - 웹 폰트 오타 수정 * feature: AdminListRow 컴포넌트 추가 - 관리자 페이지에 사용되는 ListRow 컴포넌트 * feature: ProfileListRow 컴포넌트 추가 - 프로필 페이지에 사용되는 ListRow --------- Co-authored-by: wukddang <[email protected]> * style: �useToast 커스텀 훅 제작 (#48) * feature: useToast 커스텀 훅 추가 * refactor: RandomMatchingJoinButton으로 이름 변경 * feature: Layout 컴포넌트에 ToastContainer 설정 * refactor: NormalButton 컴포넌트 수정 - isDarkMode props 받도록 수정 * fix: RandomMatchingJoin.tsx 파일 오류 수정 * fix: 파일명 오류 수정 --------- Co-authored-by: wukddang <[email protected]> * [Style] Modal 컴포넌트 제작 (#52) * chore : zustand 설치 및 store 폴더 생성 * feat : 모달창 전역 상태 추가 * style : 모달창 컴포넌트 제작 * fix: package.json 쉼표 오류 * �fix: package-lock.json 쉼표 오류 * fix : 모달창 type 받아 분기 처리 * fix : type 에러 수정 * chore : 주석 제거 * fix: isDarkMode 옵셔널로 수정 --------- Co-authored-by: Changuk Woo <[email protected]> Co-authored-by: wukddang <[email protected]> --------- Co-authored-by: judahhh <[email protected]> Co-authored-by: wukddang <[email protected]> Co-authored-by: from1to2 <[email protected]>
coffee-meet · Oct 31, 2023 · 1dfa939 · 1dfa939
1 parent dee2009
commit 1dfa939
Show file tree

Hide file tree

Showing 53 changed files with 4,506 additions and 53 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,17 +15,23 @@
     "@emotion/styled": "^11.11.0",
     "@tanstack/react-query": "^4.36.1",
     "axios": "^1.5.1",
+    "d3": "^7.8.5",
     "emotion-reset": "^3.0.1",
+    "framer-motion": "^10.16.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-hook-form": "^7.47.0",
     "react-icons": "^4.11.0",
     "react-router-dom": "^6.16.0",
-    "react-toastify": "^9.1.3"
+    "react-toastify": "^9.1.3",
+    "zustand": "^4.4.4",
+    "zustand-persist": "^0.4.0",
+    "react-spinners": "^0.13.8"
   },
   "devDependencies": {
     "@rushstack/eslint-config": "^3.4.1",
     "@tanstack/react-query-devtools": "^4.36.1",
+    "@types/d3": "^7.4.2",
     "@types/node": "^20.8.6",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
@@ -42,6 +48,7 @@
     "eslint-plugin-simple-import-sort": "^10.0.0",
     "husky": "^8.0.0",
     "lint-staged": "^15.0.1",
+    "msw": "^2.0.0",
     "prettier": "^3.0.3",
     "typescript": "^5.0.2",
     "vite": "^4.4.5",
@@ -53,5 +60,8 @@
       "eslint --fix",
       "prettier --write"
     ]
+  },
+  "msw": {
+    "workerDirectory": "public"
   }
 }
diff --git a/public/mockServiceWorker.js b/public/mockServiceWorker.js
@@ -0,0 +1,289 @@
+/* eslint-disable */
+/* tslint:disable */
+
+/**
+ * Mock Service Worker (2.0.0).
+ * @see https://github.com/mswjs/msw
+ * - Please do NOT modify this file.
+ * - Please do NOT serve this file on production.
+ */
+
+const INTEGRITY_CHECKSUM = '0877fcdc026242810f5bfde0d7178db4'
+const IS_MOCKED_RESPONSE = Symbol('isMockedResponse')
+const activeClientIds = new Set()
+
+self.addEventListener('install', function () {
+  self.skipWaiting()
+})
+
+self.addEventListener('activate', function (event) {
+  event.waitUntil(self.clients.claim())
+})
+
+self.addEventListener('message', async function (event) {
+  const clientId = event.source.id
+
+  if (!clientId || !self.clients) {
+    return
+  }
+
+  const client = await self.clients.get(clientId)
+
+  if (!client) {
+    return
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  switch (event.data) {
+    case 'KEEPALIVE_REQUEST': {
+      sendToClient(client, {
+        type: 'KEEPALIVE_RESPONSE',
+      })
+      break
+    }
+
+    case 'INTEGRITY_CHECK_REQUEST': {
+      sendToClient(client, {
+        type: 'INTEGRITY_CHECK_RESPONSE',
+        payload: INTEGRITY_CHECKSUM,
+      })
+      break
+    }
+
+    case 'MOCK_ACTIVATE': {
+      activeClientIds.add(clientId)
+
+      sendToClient(client, {
+        type: 'MOCKING_ENABLED',
+        payload: true,
+      })
+      break
+    }
+
+    case 'MOCK_DEACTIVATE': {
+      activeClientIds.delete(clientId)
+      break
+    }
+
+    case 'CLIENT_CLOSED': {
+      activeClientIds.delete(clientId)
+
+      const remainingClients = allClients.filter((client) => {
+        return client.id !== clientId
+      })
+
+      // Unregister itself when there are no more clients
+      if (remainingClients.length === 0) {
+        self.registration.unregister()
+      }
+
+      break
+    }
+  }
+})
+
+self.addEventListener('fetch', function (event) {
+  const { request } = event
+
+  // Bypass navigation requests.
+  if (request.mode === 'navigate') {
+    return
+  }
+
+  // Opening the DevTools triggers the "only-if-cached" request
+  // that cannot be handled by the worker. Bypass such requests.
+  if (request.cache === 'only-if-cached' && request.mode !== 'same-origin') {
+    return
+  }
+
+  // Bypass all requests when there are no active clients.
+  // Prevents the self-unregistered worked from handling requests
+  // after it's been deleted (still remains active until the next reload).
+  if (activeClientIds.size === 0) {
+    return
+  }
+
+  // Generate unique request ID.
+  const requestId = crypto.randomUUID()
+  event.respondWith(handleRequest(event, requestId))
+})
+
+async function handleRequest(event, requestId) {
+  const client = await resolveMainClient(event)
+  const response = await getResponse(event, client, requestId)
+
+  // Send back the response clone for the "response:*" life-cycle events.
+  // Ensure MSW is active and ready to handle the message, otherwise
+  // this message will pend indefinitely.
+  if (client && activeClientIds.has(client.id)) {
+    ;(async function () {
+      const responseClone = response.clone()
+      // When performing original requests, response body will
+      // always be a ReadableStream, even for 204 responses.
+      // But when creating a new Response instance on the client,
+      // the body for a 204 response must be null.
+      const responseBody = response.status === 204 ? null : responseClone.body
+
+      sendToClient(
+        client,
+        {
+          type: 'RESPONSE',
+          payload: {
+            requestId,
+            isMockedResponse: IS_MOCKED_RESPONSE in response,
+            type: responseClone.type,
+            status: responseClone.status,
+            statusText: responseClone.statusText,
+            body: responseBody,
+            headers: Object.fromEntries(responseClone.headers.entries()),
+          },
+        },
+        [responseBody],
+      )
+    })()
+  }
+
+  return response
+}
+
+// Resolve the main client for the given event.
+// Client that issues a request doesn't necessarily equal the client
+// that registered the worker. It's with the latter the worker should
+// communicate with during the response resolving phase.
+async function resolveMainClient(event) {
+  const client = await self.clients.get(event.clientId)
+
+  if (client?.frameType === 'top-level') {
+    return client
+  }
+
+  const allClients = await self.clients.matchAll({
+    type: 'window',
+  })
+
+  return allClients
+    .filter((client) => {
+      // Get only those clients that are currently visible.
+      return client.visibilityState === 'visible'
+    })
+    .find((client) => {
+      // Find the client ID that's recorded in the
+      // set of clients that have registered the worker.
+      return activeClientIds.has(client.id)
+    })
+}
+
+async function getResponse(event, client, requestId) {
+  const { request } = event
+
+  // Clone the request because it might've been already used
+  // (i.e. its body has been read and sent to the client).
+  const requestClone = request.clone()
+
+  function passthrough() {
+    const headers = Object.fromEntries(requestClone.headers.entries())
+
+    // Remove internal MSW request header so the passthrough request
+    // complies with any potential CORS preflight checks on the server.
+    // Some servers forbid unknown request headers.
+    delete headers['x-msw-intention']
+
+    return fetch(requestClone, { headers })
+  }
+
+  // Bypass mocking when the client is not active.
+  if (!client) {
+    return passthrough()
+  }
+
+  // Bypass initial page load requests (i.e. static assets).
+  // The absence of the immediate/parent client in the map of the active clients
+  // means that MSW hasn't dispatched the "MOCK_ACTIVATE" event yet
+  // and is not ready to handle requests.
+  if (!activeClientIds.has(client.id)) {
+    return passthrough()
+  }
+
+  // Bypass requests with the explicit bypass header.
+  // Such requests can be issued by "ctx.fetch()".
+  const mswIntention = request.headers.get('x-msw-intention')
+  if (['bypass', 'passthrough'].includes(mswIntention)) {
+    return passthrough()
+  }
+
+  // Notify the client that a request has been intercepted.
+  const requestBuffer = await request.arrayBuffer()
+  const clientMessage = await sendToClient(
+    client,
+    {
+      type: 'REQUEST',
+      payload: {
+        id: requestId,
+        url: request.url,
+        mode: request.mode,
+        method: request.method,
+        headers: Object.fromEntries(request.headers.entries()),
+        cache: request.cache,
+        credentials: request.credentials,
+        destination: request.destination,
+        integrity: request.integrity,
+        redirect: request.redirect,
+        referrer: request.referrer,
+        referrerPolicy: request.referrerPolicy,
+        body: requestBuffer,
+        keepalive: request.keepalive,
+      },
+    },
+    [requestBuffer],
+  )
+
+  switch (clientMessage.type) {
+    case 'MOCK_RESPONSE': {
+      return respondWithMock(clientMessage.data)
+    }
+
+    case 'MOCK_NOT_FOUND': {
+      return passthrough()
+    }
+  }
+
+  return passthrough()
+}
+
+function sendToClient(client, message, transferrables = []) {
+  return new Promise((resolve, reject) => {
+    const channel = new MessageChannel()
+
+    channel.port1.onmessage = (event) => {
+      if (event.data && event.data.error) {
+        return reject(event.data.error)
+      }
+
+      resolve(event.data)
+    }
+
+    client.postMessage(message, [channel.port2].concat(transferrables.filter(Boolean)))
+  })
+}
+
+async function respondWithMock(response) {
+  // Setting response status code to 0 is a no-op.
+  // However, when responding with a "Response.error()", the produced Response
+  // instance will have status code set to 0. Since it's not possible to create
+  // a Response instance with status code 0, handle that use-case separately.
+  if (response.status === 0) {
+    return Response.error()
+  }
+
+  const mockedResponse = new Response(response.body, response)
+
+  Reflect.defineProperty(mockedResponse, IS_MOCKED_RESPONSE, {
+    value: true,
+    enumerable: true,
+  })
+
+  return mockedResponse
+}
diff --git a/src/assets/LoginImage.svg b/src/assets/LoginImage.svg
diff --git a/src/assets/icons/Exclamation.svg b/src/assets/icons/Exclamation.svg
diff --git a/src/assets/icons/KakaoIcon.tsx b/src/assets/icons/KakaoIcon.tsx
@@ -0,0 +1,40 @@
+import { palette } from '@/styles/palette'
+
+export type IconProps = {
+  width: number
+  height: number
+  iconWidth?: number
+  iconHeight?: number
+  borderRadius: number
+}
+
+const KakaoIcon = ({ width, height, iconWidth, iconHeight, borderRadius }: IconProps) => (
+  <span
+    style={{
+      backgroundColor: palette.YELLOW,
+      width,
+      height,
+      borderRadius,
+      display: 'flex',
+      justifyContent: 'center',
+      alignItems: 'center',
+    }}
+  >
+    <svg
+      width={iconWidth || 39}
+      height={iconHeight || 37}
+      viewBox={'0 0 39 37'}
+      fill={'none'}
+      xmlns={'http://www.w3.org/2000/svg'}
+    >
+      <path
+        d={
+          'M19.5379 0.555664C23.0492 0.555664 26.2969 1.23924 29.2807 2.60641C32.2646 3.97356 34.6236 5.83261 36.3576 8.18358C38.0916 10.5345 38.9586 13.0988 38.9586 15.8766C38.9586 18.6542 38.0916 21.2222 36.3576 23.5804C34.6236 25.9386 32.2682 27.8012 29.2916 29.1684C26.3149 30.5355 23.0636 31.2191 19.5379 31.2191C18.4253 31.2191 17.2764 31.1395 16.0916 30.9804C10.9474 34.5538 8.20914 36.3623 7.87677 36.4056C7.71786 36.4635 7.56616 36.4563 7.42166 36.384C7.36381 36.3406 7.32044 36.2826 7.29156 36.2103C7.26267 36.138 7.24819 36.0729 7.24819 36.015V35.9282C7.33493 35.364 7.99239 33.0131 9.22065 28.8754C6.4318 27.4866 4.21736 25.6456 2.57729 23.3525C0.937224 21.0595 0.117188 18.5675 0.117188 15.8766C0.117188 13.0988 0.984183 10.5345 2.71818 8.18358C4.45217 5.83261 6.81112 3.97356 9.79506 2.60641C12.779 1.23924 16.0266 0.555664 19.5379 0.555664ZM9.69753 19.9346V13.2724H11.4098C11.641 13.2724 11.8831 13.1892 12.1359 13.0229C12.3888 12.8565 12.5152 12.6286 12.5152 12.3393C12.5152 12.0499 12.3996 11.8076 12.1685 11.6123C11.9372 11.417 11.7133 11.3193 11.4965 11.3193H5.86104C5.61538 11.3193 5.38419 11.3917 5.16744 11.5364C4.95069 11.681 4.84231 11.9198 4.84231 12.2524C4.84231 12.5852 4.95792 12.8384 5.18911 13.012C5.42031 13.1856 5.68041 13.2724 5.96941 13.2724H7.6817V19.9346C7.6817 20.2963 7.76843 20.5929 7.94182 20.8244C8.1152 21.0558 8.36084 21.1716 8.67873 21.1716C8.9967 21.1716 9.24594 21.0414 9.42653 20.7809C9.60719 20.5205 9.69753 20.2385 9.69753 19.9346ZM19.0827 21.1716C19.6174 20.969 19.7835 20.4555 19.5813 19.6308C19.5234 19.4427 19.1152 18.3179 18.3566 16.2563C17.598 14.1947 17.1609 13.0192 17.0453 12.7299C16.6551 11.7895 16.1205 11.3193 15.4414 11.3193C14.7044 11.3193 14.1336 11.7895 13.729 12.7299C13.6134 12.9758 13.1727 14.173 12.4068 16.3214C11.641 18.4698 11.2436 19.5729 11.2147 19.6308C11.1136 19.761 11.0883 19.9997 11.1389 20.3469C11.1894 20.6942 11.3448 20.9328 11.6049 21.0631C11.8939 21.1933 12.1757 21.2078 12.4502 21.1065C12.7248 21.0052 12.9126 20.8533 13.0137 20.6508L13.534 19.2185H17.3054C17.4643 19.7393 17.5799 20.0793 17.6522 20.2385C17.7244 20.3831 17.8039 20.5278 17.8906 20.6725C17.9773 20.8172 18.1362 20.9581 18.3675 21.0956C18.5986 21.2331 18.8371 21.2584 19.0827 21.1716ZM24.9133 21.1716C25.2167 21.1716 25.4949 21.0775 25.7477 20.8895C26.0006 20.7014 26.1271 20.4482 26.1271 20.1299C26.1271 19.8116 26.0114 19.5621 25.7803 19.3812C25.5491 19.2004 25.2601 19.11 24.9133 19.11H22.5073V12.5563C22.5073 12.2524 22.4171 11.9704 22.2364 11.71C22.0558 11.4495 21.8066 11.3193 21.4886 11.3193C21.1707 11.3193 20.9251 11.4351 20.7517 11.6665C20.5783 11.898 20.4916 12.1946 20.4916 12.5563V19.9346C20.4916 20.2963 20.5783 20.5929 20.7517 20.8244C20.9251 21.0558 21.1707 21.1716 21.4886 21.1716C21.5031 21.1716 21.5284 21.168 21.5645 21.1607C21.6006 21.1535 21.6259 21.1498 21.6404 21.1498C21.6548 21.1498 21.6801 21.1535 21.7162 21.1607C21.7523 21.168 21.7776 21.1716 21.7921 21.1716H24.9133ZM33.4531 21.0197C33.6989 20.7882 33.8217 20.5241 33.8217 20.2276C33.8217 19.931 33.7277 19.667 33.5399 19.4355C33.4531 19.3053 32.5428 18.0828 30.8088 15.768C31.6469 14.9145 32.4923 14.0609 33.3448 13.2073C33.5616 12.9903 33.6952 12.7335 33.7457 12.4369C33.7964 12.1404 33.7133 11.8618 33.4965 11.6015C33.2509 11.37 32.9872 11.2759 32.7053 11.3193C32.4236 11.3628 32.1599 11.5074 31.9143 11.7534C31.8709 11.7968 31.683 11.9884 31.3507 12.3284C31.0184 12.6685 30.5885 13.1061 30.061 13.6414C29.5337 14.1767 29.0676 14.654 28.6631 15.0736V12.5563C28.6631 12.2524 28.5727 11.9704 28.3921 11.71C28.2115 11.4495 27.9622 11.3193 27.6443 11.3193C27.3264 11.3193 27.0807 11.4351 26.9073 11.6665C26.734 11.898 26.6472 12.1946 26.6472 12.5563V19.9346C26.6472 20.2963 26.734 20.5929 26.9073 20.8244C27.0807 21.0558 27.3264 21.1716 27.6443 21.1716C27.9622 21.1716 28.2115 21.0414 28.3921 20.7809C28.5727 20.5205 28.6631 20.2385 28.6631 19.9346V17.9599C28.7208 17.9019 28.8292 17.7899 28.9881 17.6235C29.1471 17.4571 29.2771 17.3232 29.3783 17.222C30.332 18.5241 31.1846 19.6742 31.936 20.6725C32.1382 20.9473 32.3731 21.1245 32.6404 21.2042C32.9077 21.2837 33.1786 21.2222 33.4531 21.0197ZM14.1192 17.2654L15.4414 13.3809L16.7418 17.2654H14.1192Z'
+        }
+        fill={'black'}
+      />
+    </svg>
+  </span>
+)
+
+export default KakaoIcon