[Deploy]: 이용약관, 랜딩페이지 모집문구 변경

package.json

@@ -24,13 +24,14 @@
     "nanoid": "^5.0.7",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-error-boundary": "^4.0.13",
     "react-hook-form": "^7.50.1",
     "react-router-dom": "^6.22.1",
     "react-toastify": "^10.0.4",
     "wowds-icons": "^0.1.0",
     "wowds-tokens": "^0.0.9",
-    "zustand": "^4.5.0",
-    "wowds-ui": "^0.1.9"
+    "wowds-ui": "^0.1.9",
+    "zustand": "^4.5.0"
   },
   "devDependencies": {
     "@sentry/react": "^8.22.0",

src/App.tsx

@@ -67,12 +67,14 @@ function App() {
             word-break: keep-all;
           `}>
           GDSC는 Google Developers에서 제공하는 프로그램을 통해 운영되는 대학교
-          기반의 개발자 커뮤니티 그룹입니다. <br />
+          기반의 개발자 커뮤니티 그룹이에요.
+          <br />
           개발자로서 성장하는 데 관심이 있는 학부생이라면 누구나 참여할 수
-          있습니다. <br />
+          있어요.
+          <br />
           GDSC의 목표는 전 세계의 대학생 개발자들이 구글 관련 기술 혹은
           프로그래밍 실력을 높이고 지역 사회와 협력하여 실제 문제를 해결하도록
-          성장하는 것입니다.
+          성장하는 것이에요.
         </Text>
       </Introduction>
       <Space height={80} />
@@ -97,10 +99,12 @@ function App() {
           word-break: keep-all;
         `}>
         GDSC Hongik Open Community는 학생 개발자를 위한 홍익대학교의 개발
-        커뮤니티입니다.
-        <br /> 초심자들이 개발에 관심을 가지고 입문할 수 있도록 기초 학술
-        프로그램을 운영하며, 다양한 이벤트와 컨텐츠를 통해 학회원들과 소통할 수
-        있는 네트워킹 플랫폼을 제공하고 있습니다.
+        커뮤니티예요.
+        <br />
+        “더 나은 환경을, 더 나은 학우에게” 제공하는 것을 목표로, 초심자들이
+        개발에 관심을 가지고 입문할 수 있도록 기초 학술 프로그램을 운영하며,
+        다양한 이벤트와 컨텐츠를 통해 학회원들과 소통할 수 있는 네트워킹
+        플랫폼을 제공하고 있어요.
       </Text>
       <Space height={80} />
       <Text typo="h1" color="black">
@@ -114,9 +118,8 @@ function App() {
           text-align: center;
           word-break: keep-all;
         `}>
-        GDSC의 목표는 전 세계의 대학생 개발자들이 구글 관련 기술 혹은 프로그래밍
-        실력을 높이고 지역 사회와 협력하여 실제 문제를 해결하도록 성장하는
-        것입니다.
+        이번 학기 GDSC Hongik은 변화와 발전에 초점을 두어, 현재에 안주하지 않고
+        변화를 통해 구성원이 함께 발전시켜나갈 수 있는 커뮤니티를 운영하려 해요.
       </Text>
       <Space height={24} />
       <Flex direction="column" gap="md">
@@ -132,17 +135,14 @@ function App() {
           text-align: center;
           word-break: keep-all;
         `}>
-        GDSC의 이러한 비전에 맞추어, GDSC Hongik은 초심자들이 개발에 관심을
-        가지고 입문할 수 있도록 기초 학술 프로그램을 운영하며, 다양한 이벤트와
-        콘텐츠를 통해 학회원들과 소통할 수 있는 네트워킹 플랫폼을 제공하고
-        있습니다.
+        초심자들을 위한 기초 학술 프로그램부터, 다양한 이벤트와 컨텐츠를 통해
+        학회원들과 소통할 수 있는 네트워킹 플랫폼을 제공할 예정이에요.
       </Text>
       <Space height={48} />
       <Flex direction="column" gap="sm">
         <InformationBox
           title="모집 기간"
-          description="1차 지원 기간: 2월 27일 ~ 3월 1일"
-          description2="2차 지원 기간: 3월 4일 ~ 3월 8일"
+          description="8월 26일(월) ~ 8월 30일(금)"
         />
         <InformationBox
           title="지원 자격"
@@ -152,7 +152,6 @@ function App() {
         <InformationBox
           title="지원 시 유의사항"
           description="GDSC 커뮤니티 가이드라인 및 오픈 커뮤니티 가이드라인을 준수해야 해요."
-          description2="또한, 학기 당 2만원의 회비가 있어요."
         />
       </Flex>
       <Space height={48} />
@@ -178,17 +177,23 @@ function App() {
       <Flex direction="column" gap="sm">
         <InformationBox
           title="Q. 서류, 면접 전형이 있나요?"
-          description="A. 없습니다! 홍익대학교 학생이라면 누구나 본 사이트의 '가입하기' 를 통해 지원할 수 있어요."
+          description="A. 아니요. 본 서비스를 통해 가입하면 홍익대학교 학생 누구나 바로 커뮤니티에서 활동할 수 있어요."
+        />
+        <InformationBox
+          title="Q. 저는 코딩을 하나도 모르는 새내기인데, 따라갈 수 있나요?"
+          description="A. 당연하죠!"
+          description2="기초 스터디는 개발에 처음 입문하는 사람들을 위해서 만들어진 커리큘럼으로 강의가 진행돼요. 학습자 분들이 차근차근 따라올 수 있게끔 주차별 미션과 담당 멘토를 통해 도와드릴 예정이니, 부담갖지 않으셔도 돼요!
+          스터디에 참여하지 못하더라도, 사람들과 네트워킹하며 친분을 쌓아가는 것도 언제든지 환영입니다!"
         />
         <InformationBox
           title="Q. 다른 동아리, 학회와 병행 가능한가요?"
-          description="A. 가능합니다!"
-          description2="GDSC Hongik은 멤버 분들이 각자의 일정과 시간에 맞춰서 편하게 활동하실 수 있게, 모든 활동에 자율적으로 참여할 수 있는 환경을 제공하고 있어요."
+          description="A. 가능해요!"
+          description2="GDSC Hongik은 Open Community 체제로 운영되기에 모든 활동에 자율적으로 참여하실 수 있어요. 어딘가에 너무 오랫동안, 깊게 소속되지 않고, 가볍게 개발을 배우며 다른 사람들과 교류하고 싶은 분들에게 좋은 곳이에요."
         />
         <InformationBox
-          title="Q. 저는 코딩을 하나도 모르는 새내기인데, 따라갈 수 있나요?"
-          description="A. 당연하죠!"
-          description2="저희는 커뮤니티 멤버 개개인이 저마다 다른 목표와 속도를 가지고 있다는 점을 깊이 이해하고 있어요. 새내기와 입문자 분들이 개발자로서 함께 성장할 수 있도록 기초 커리큘럼과 다양한 학술 지원 프로그램을 운영하고 있으니, 너무 걱정하지 않으셔도 돼요."
+          title="Q. GDSC Hongik에 대해 궁금한 것이 있어요!"
+          description="A. 이번 학기부터는 채널톡이 아닌, GDSC Hongik 카카오톡 채널을 통해 문의할 수 있어요!"
+          description2="카카오톡 채널을 추가하면 더욱 간편하게 이용할 수 있고, 추후 안내 사항을 빠르게 전달 받을 수 있어요."
         />
       </Flex>
       <Space height={59} />

src/components/ApiErrorBoundary.tsx

@@ -1,17 +1,21 @@
-import { PropsWithChildren } from 'react';
-
+import * as Sentry from '@sentry/react';
 import { useQueryClient } from '@tanstack/react-query';
 import { AxiosError } from 'axios';
 import { redirect } from 'react-router-dom';
 import { toast } from 'react-toastify';
 import RoutePath from '@/routes/routePath';
+import { ReactNode } from 'react';
 
 type ErrorResponseType = {
   errorCodeName: string;
   errorMessage: string;
 };
 
-export default function ApiErrorBoundary({ children }: PropsWithChildren) {
+export default function ApiErrorBoundary({
+  children
+}: {
+  children: ReactNode;
+}) {
   const queryClient = useQueryClient();
 
   queryClient.getQueryCache().config = {
@@ -24,7 +28,10 @@ export default function ApiErrorBoundary({ children }: PropsWithChildren) {
 
   function handleError(axiosError: AxiosError) {
     const errorResponse = axiosError.response?.data as ErrorResponseType;
-
+    if (errorResponse) {
+      // eslint-disable-next-line import/namespace
+      Sentry.captureException(errorResponse, {});
+    }
     const message = errorResponse.errorMessage;
 
     switch (axiosError.response?.status) {
@@ -38,6 +45,11 @@ export default function ApiErrorBoundary({ children }: PropsWithChildren) {
         toast.error(message);
         break;
     }
+
+    if (errorResponse) {
+      // eslint-disable-next-line import/namespace
+      Sentry.captureException(errorResponse, {});
+    }
   }
 
   return <>{children}</>;

src/components/common/AsyncBoundary.tsx

@@ -0,0 +1,15 @@
+import { ErrorBoundary } from '@sentry/react';
+import { Suspense, SuspenseProps } from 'react';
+import LoadingSpinner from './LoadingSpinner';
+
+type AsyncBoundaryProps = Omit<SuspenseProps, 'fallback'>;
+
+const AsyncBoundary = ({ children, ...rest }: AsyncBoundaryProps) => {
+  return (
+    <ErrorBoundary {...rest}>
+      <Suspense fallback={<LoadingSpinner />}>{children}</Suspense>
+    </ErrorBoundary>
+  );
+};
+
+export default AsyncBoundary;

src/components/layout/Footer.tsx

@@ -27,6 +27,11 @@ const Footer = () => {
             GDSC Hongik 가이드라인{' '}
           </Text>
         </Link>
+        <Link to={'https://www.gdschongik.com/term-of-use'}>
+          <Text typo="label2" style={{ textDecoration: 'underline' }}>
+            와우온보딩 이용약관
+          </Text>
+        </Link>
       </Flex>
 
       <Flex direction="column" align="start">

src/pages/NotFound.tsx

@@ -0,0 +1,73 @@
+import { Flex, Space, Text } from '@/components/common/Wrapper';
+import * as Sentry from '@sentry/react';
+import GlobalSize from '@/constants/globalSize';
+import { media } from '@/styles';
+import styled from '@emotion/styled';
+import { useNavigate } from 'react-router-dom';
+import { color } from 'wowds-tokens';
+import Button from 'wowds-ui/Button';
+
+const NotFoundPage = () => {
+  const navigate = useNavigate();
+  if (process.env.NODE_ENV === 'production') {
+    // eslint-disable-next-line import/namespace
+    Sentry.captureMessage('404 Page Not Found', {
+      extra: {
+        pathname: location.pathname
+      }
+    });
+  }
+  return (
+    <NotfoundWrapper>
+      <Space height={100} />
+      <Flex gap="sm" direction="column">
+        <Img src={'/notfound.png'} width={300} height={50} />
+        <Text typo="h1">오류가 발생했어요.</Text>
+        <Text typo="body1">요청하신 페이지를 찾을 수 없어요.</Text>
+      </Flex>
+      <ButtonContainer>
+        <Button
+          style={{ maxWidth: '100%' }}
+          onClick={() => {
+            navigate('/');
+          }}>
+          메인 화면으로 돌아가기
+        </Button>
+      </ButtonContainer>
+    </NotfoundWrapper>
+  );
+};
+
+export default NotFoundPage;
+
+const Img = styled.img`
+  object-fit: cover;
+`;
+
+const NotfoundWrapper = styled.div`
+  display: flex;
+  position: relative;
+  flex-direction: column;
+  justify-content: start;
+  align-items: center;
+  min-height: calc(100vh - ${GlobalSize.header});
+  width: ${GlobalSize.width};
+  margin: 0px -16px;
+  padding: 0px 16px;
+  padding-top: 40px;
+  padding-bottom: 28px;
+  background-color: ${color.backgroundAlternative};
+  ${media.mobile} {
+    width: 100vw;
+  }
+`;
+
+const ButtonContainer = styled.div`
+  position: absolute;
+  bottom: 1.75rem;
+  padding: 1rem 0.75rem;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+`;

src/pages/index.ts

@@ -11,3 +11,4 @@ export * from './redirect/StudentVerificationServerRedirect';
 export * from './PaymentsCheckout';
 export * from './PaymentsFail';
 export * from './PaymentsSuccess';
+export * from './NotFound';

src/routes/index.tsx

@@ -4,7 +4,7 @@ import RoutePath from '@/routes/routePath';
 import { RouterProvider, createBrowserRouter } from 'react-router-dom';
 import Layout from '@/components/layout/Layout';
 import AuthAccessGuard from '@/components/auth/guard/AuthAccessGuard';
-import { Text } from '@/components/common/Wrapper';
+import NotFoundPage from '@/pages/NotFound';
 import {
   AuthServerRedirectNavigate,
   StudentVerificationServerRedirect,
@@ -148,8 +148,10 @@ const router = sentryCreateBrowserRouter([
         path: RoutePath.PaymentsSuccess,
         element: <PaymentsSuccess />
       },
-      // Todo: 404 Not found page
-      { path: '*', element: <Text>not found page</Text> }
+      {
+        path: '*',
+        element: <NotFoundPage />
+      }
     ]
   }
 ]);

src/utils/sentry.ts

@@ -12,7 +12,6 @@ const setSentry = () => {
   function initSentry() {
     if (process.env.NODE_ENV === 'development') return;
 
-    console.log(`VERCEL ENV : ${process.env.VERCEL_ENV}`);
     Sentry.init({
       environment: process.env.VERCEL_ENV,
       dsn: SENTRY_DSN_KEY,

vite.config.ts.timestamp-1724312798440-8bfe4df2623d3.mjs

@@ -0,0 +1,27 @@
+// vite.config.ts
+import { defineConfig } from "file:///Users/eugene/github/gdsc-client/node_modules/.pnpm/[email protected][email protected]/node_modules/vite/dist/node/index.js";
+import react from "file:///Users/eugene/github/gdsc-client/node_modules/.pnpm/@[email protected][email protected]/node_modules/@vitejs/plugin-react-swc/index.mjs";
+import tsconfigPaths from "file:///Users/eugene/github/gdsc-client/node_modules/.pnpm/[email protected][email protected][email protected]/node_modules/vite-tsconfig-paths/dist/index.mjs";
+import { sentryVitePlugin } from "file:///Users/eugene/github/gdsc-client/node_modules/.pnpm/@[email protected]/node_modules/@sentry/vite-plugin/dist/esm/index.mjs";
+var vite_config_default = defineConfig({
+  plugins: [
+    react(),
+    tsconfigPaths(),
+    sentryVitePlugin({
+      org: process.env.SENTRY_ORG_NAME,
+      project: process.env.SENTRY_PROJECT_NAME,
+      authToken: process.env.SENTRY_AUTH_TOKEN,
+      sourcemaps: {
+        assets: "./dist/**",
+        filesToDeleteAfterUpload: "**/*.map"
+      }
+    })
+  ],
+  build: {
+    sourcemap: true
+  }
+});
+export {
+  vite_config_default as default
+};
+//# sourceMappingURL=data:application/json;base64,ewogICJ2ZXJzaW9uIjogMywKICAic291cmNlcyI6IFsidml0ZS5jb25maWcudHMiXSwKICAic291cmNlc0NvbnRlbnQiOiBbImNvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9kaXJuYW1lID0gXCIvVXNlcnMvZXVnZW5lL2dpdGh1Yi9nZHNjLWNsaWVudFwiO2NvbnN0IF9fdml0ZV9pbmplY3RlZF9vcmlnaW5hbF9maWxlbmFtZSA9IFwiL1VzZXJzL2V1Z2VuZS9naXRodWIvZ2RzYy1jbGllbnQvdml0ZS5jb25maWcudHNcIjtjb25zdCBfX3ZpdGVfaW5qZWN0ZWRfb3JpZ2luYWxfaW1wb3J0X21ldGFfdXJsID0gXCJmaWxlOi8vL1VzZXJzL2V1Z2VuZS9naXRodWIvZ2RzYy1jbGllbnQvdml0ZS5jb25maWcudHNcIjtpbXBvcnQgeyBkZWZpbmVDb25maWcgfSBmcm9tICd2aXRlJztcbmltcG9ydCByZWFjdCBmcm9tICdAdml0ZWpzL3BsdWdpbi1yZWFjdC1zd2MnO1xuaW1wb3J0IHRzY29uZmlnUGF0aHMgZnJvbSAndml0ZS10c2NvbmZpZy1wYXRocyc7XG5cbmltcG9ydCB7IHNlbnRyeVZpdGVQbHVnaW4gfSBmcm9tICdAc2VudHJ5L3ZpdGUtcGx1Z2luJztcblxuLy8gaHR0cHM6Ly92aXRlanMuZGV2L2NvbmZpZy9cbmV4cG9ydCBkZWZhdWx0IGRlZmluZUNvbmZpZyh7XG4gIHBsdWdpbnM6IFtcbiAgICByZWFjdCgpLFxuICAgIHRzY29uZmlnUGF0aHMoKSxcbiAgICBzZW50cnlWaXRlUGx1Z2luKHtcbiAgICAgIG9yZzogcHJvY2Vzcy5lbnYuU0VOVFJZX09SR19OQU1FLFxuICAgICAgcHJvamVjdDogcHJvY2Vzcy5lbnYuU0VOVFJZX1BST0pFQ1RfTkFNRSxcbiAgICAgIGF1dGhUb2tlbjogcHJvY2Vzcy5lbnYuU0VOVFJZX0FVVEhfVE9LRU4sXG4gICAgICBzb3VyY2VtYXBzOiB7XG4gICAgICAgIGFzc2V0czogJy4vZGlzdC8qKicsXG4gICAgICAgIGZpbGVzVG9EZWxldGVBZnRlclVwbG9hZDogJyoqLyoubWFwJ1xuICAgICAgfVxuICAgIH0pXG4gIF0sXG4gIGJ1aWxkOiB7XG4gICAgc291cmNlbWFwOiB0cnVlXG4gIH1cbn0pO1xuIl0sCiAgIm1hcHBpbmdzIjogIjtBQUFrUixTQUFTLG9CQUFvQjtBQUMvUyxPQUFPLFdBQVc7QUFDbEIsT0FBTyxtQkFBbUI7QUFFMUIsU0FBUyx3QkFBd0I7QUFHakMsSUFBTyxzQkFBUSxhQUFhO0FBQUEsRUFDMUIsU0FBUztBQUFBLElBQ1AsTUFBTTtBQUFBLElBQ04sY0FBYztBQUFBLElBQ2QsaUJBQWlCO0FBQUEsTUFDZixLQUFLLFFBQVEsSUFBSTtBQUFBLE1BQ2pCLFNBQVMsUUFBUSxJQUFJO0FBQUEsTUFDckIsV0FBVyxRQUFRLElBQUk7QUFBQSxNQUN2QixZQUFZO0FBQUEsUUFDVixRQUFRO0FBQUEsUUFDUiwwQkFBMEI7QUFBQSxNQUM1QjtBQUFBLElBQ0YsQ0FBQztBQUFBLEVBQ0g7QUFBQSxFQUNBLE9BQU87QUFBQSxJQUNMLFdBQVc7QUFBQSxFQUNiO0FBQ0YsQ0FBQzsiLAogICJuYW1lcyI6IFtdCn0K