Feature/#883

.github/workflows/frontend-dev-deploy.yml

@@ -0,0 +1,61 @@
+name: frontend-dev-deploy
+
+on:
+  push:
+    branches: ["fe-dev"]
+    paths:
+      - "client/**"
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        shell: bash
+        working-directory: ./client
+
+    steps:
+      # 1. Git 리포지토리 체크아웃
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      # 2. Node.js 20.15.1 version으로 셋팅
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20.15.1"
+
+      # 3. 의존성 설치
+      - name: Install Dependencies
+        run: npm install
+
+      # 4. Dev 환경으로 빌드
+      - name: Build for Dev environment
+        run: npm run build-dev
+        env:
+          API_BASE_URL: ${{ secrets.API_BASE_URL }}
+          AMPLITUDE_KEY: ${{ secrets.AMPLITUDE_KEY }}
+          KAKAO_JAVASCRIPT_KEY: ${{ secrets.KAKAO_JAVASCRIPT_KEY }}
+          IMAGE_URL: ${{ secrets.IMAGE_URL }}
+          KAKAO_REDIRECT_URI: ${{ secrets.KAKAO_REDIRECT_URI }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+
+      # 5. AWS 인증 설정
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v3
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_REGION }}
+
+      # 6. S3에 빌드 결과 업로드
+      - name: Upload build results to S3
+        run: aws s3 sync ./dist s3://${{ secrets.S3_BUCKET_NAME }}/dev/ --delete
+
+      # 7. CloudFront 캐시 무효화
+      - name: Invalidate CloudFront Cache
+        run: |
+          aws cloudfront create-invalidation \
+            --distribution-id ${{ secrets.DEV_CLOUDFRONT_DISTRIBUTION_ID }} \
+            --paths "/*"

.github/workflows/frontend-prod-deploy.yml

@@ -0,0 +1,61 @@
+name: frontend-prod-deploy
+
+on:
+  push:
+    branches: ["main"]
+    paths:
+      - "client/**"
+
+jobs:
+  deploy:
+    runs-on: ubuntu-latest
+
+    defaults:
+      run:
+        shell: bash
+        working-directory: ./client
+
+    steps:
+      # 1. Git 리포지토리 체크아웃
+      - name: Checkout code
+        uses: actions/checkout@v4
+
+      # 2. Node.js 20.15.1 version으로 셋팅
+      - name: Set up Node.js
+        uses: actions/setup-node@v4
+        with:
+          node-version: "20.15.1"
+
+      # 3. 의존성 설치
+      - name: Install Dependencies
+        run: npm install
+
+      # 4. Prod 환경으로 빌드
+      - name: Build for Prod environment
+        run: npm run build
+        env:
+          API_BASE_URL: ${{ secrets.API_BASE_URL }}
+          AMPLITUDE_KEY: ${{ secrets.AMPLITUDE_KEY }}
+          KAKAO_JAVASCRIPT_KEY: ${{ secrets.KAKAO_JAVASCRIPT_KEY }}
+          IMAGE_URL: ${{ secrets.IMAGE_URL }}
+          KAKAO_REDIRECT_URI: ${{ secrets.KAKAO_REDIRECT_URI }}
+          SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }}
+
+      # 5. AWS 인증 설정
+      - name: Configure AWS credentials
+        uses: aws-actions/configure-aws-credentials@v3
+        with:
+          aws-access-key-id: ${{ secrets.AWS_ACCESS_KEY_ID }}
+          aws-secret-access-key: ${{ secrets.AWS_SECRET_ACCESS_KEY }}
+          aws-region: ${{ secrets.AWS_REGION }}
+
+      # 6. S3에 빌드 결과 업로드
+      - name: Upload build results to S3
+        run: aws s3 sync ./dist s3://${{ secrets.S3_BUCKET_NAME }}/prod/ --delete
+
+      # 7. CloudFront 캐시 무효화
+      - name: Invalidate CloudFront Cache
+        run: |
+          aws cloudfront create-invalidation \
+            --distribution-id ${{ secrets.PROD_CLOUDFRONT_DISTRIBUTION_ID }} \
+            --paths "/*"

client/cypress/support/commands.ts

@@ -47,7 +47,7 @@ Cypress.Commands.add('interceptAPI', ({type, delay = 0, statusCode = 200}: Inter
 });
 
 Cypress.Commands.add('createEventName', (eventName: string) => {
-  cy.visit(ROUTER_URLS.createMemberEvent);
+  cy.visit(ROUTER_URLS.createUserEvent);
   cy.get('input').type(eventName);
   cy.get('button').contains('다음').click();
 });

client/src/App.tsx

@@ -1,7 +1,11 @@
 import {Outlet} from 'react-router-dom';
 import {Global} from '@emotion/react';
+import {ReactQueryDevtools} from '@tanstack/react-query-devtools';
 
 import AmplitudeInitializer from '@components/AmplitudeInitializer/AmplitudeInitializer';
+import ErrorCatcher from '@components/AppErrorBoundary/ErrorCatcher';
+import QueryClientBoundary from '@components/QueryClientBoundary/QueryClientBoundary';
+import ToastContainer from '@components/Toast/ToastContainer';
 
 import {HDesignProvider} from '@HDesign/index';
 
@@ -15,10 +19,16 @@ const App: React.FC = () => {
     <HDesignProvider>
       <UnPredictableErrorBoundary>
         <Global styles={GlobalStyle} />
-        <NetworkStateCatcher />
-        <AmplitudeInitializer>
-          <Outlet />
-        </AmplitudeInitializer>
+        <ErrorCatcher>
+          <QueryClientBoundary>
+            <ReactQueryDevtools initialIsOpen={false} />
+            <NetworkStateCatcher />
+            <ToastContainer />
+            <AmplitudeInitializer>
+              <Outlet />
+            </AmplitudeInitializer>
+          </QueryClientBoundary>
+        </ErrorCatcher>
       </UnPredictableErrorBoundary>
     </HDesignProvider>
   );

client/src/UnPredictableErrorBoundary.tsx

@@ -1,7 +1,7 @@
 import {ErrorBoundary} from 'react-error-boundary';
 
 import {StrictPropsWithChildren} from '@type/strictPropsWithChildren';
-import ErrorPage from '@pages/ErrorPage/ErrorPage';
+import ErrorPage from '@pages/fallback/ErrorPage';
 
 const UnPredictableErrorBoundary = ({children}: StrictPropsWithChildren) => {
   return <ErrorBoundary fallback={<ErrorPage />}>{children}</ErrorBoundary>;

client/src/apis/endpointPrefix.ts

@@ -1,3 +1,4 @@
 // TODO: (@weadie) 반복되서 쓰이는 이 api/events가 추후 수정 가능성이 있어서 일단 편집하기 편하게 이 변수를 재사용하도록 했습니다.
 export const USER_API_PREFIX = '/api/events';
 export const ADMIN_API_PREFIX = '/api/admin/events';
+export const MEMBER_API_PREFIX = '/api/users';

client/src/apis/request/auth.ts

@@ -1,5 +1,7 @@
+import {UserInfo} from 'types/serviceType';
+
 import {BASE_URL} from '@apis/baseUrl';
-import {ADMIN_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
+import {ADMIN_API_PREFIX, MEMBER_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
 import {requestGet, requestGetWithoutResponse, requestPostWithoutResponse} from '@apis/fetcher';
 import {WithEventId} from '@apis/withId.type';
 
@@ -42,3 +44,11 @@ export const requestGetKakaoLogin = async (code: string) => {
 
   return null;
 };
+
+export const requestGetUserInfo = async () => {
+  return await requestGet<UserInfo>({
+    baseUrl: BASE_URL.HD,
+    endpoint: `${MEMBER_API_PREFIX}/mine`,
+    errorHandlingStrategy: 'unsubscribe',
+  });
+};

client/src/apis/request/event.ts

@@ -1,7 +1,7 @@
-import {Event, EventCreationData, EventId, EventName, User} from 'types/serviceType';
+import {CreatedEvents, Event, EventCreationData, EventId, EventName, User} from 'types/serviceType';
 import {WithErrorHandlingStrategy} from '@errors/RequestGetError';
 
-import {ADMIN_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
+import {ADMIN_API_PREFIX, MEMBER_API_PREFIX, USER_API_PREFIX} from '@apis/endpointPrefix';
 import {requestGet, requestPatch, requestPostWithResponse} from '@apis/fetcher';
 import {WithEventId} from '@apis/withId.type';
 
@@ -14,7 +14,7 @@ export const requestPostGuestEvent = async (postEventArgs: EventCreationData) =>
   });
 };
 
-export const requestPostMemberEvent = async (eventName: EventName) => {
+export const requestPostUserEvent = async (eventName: EventName) => {
   return await requestPostWithResponse<EventId>({
     endpoint: USER_API_PREFIX,
     body: {
@@ -45,11 +45,18 @@ export const requestPatchEventName = async ({eventId, eventName}: RequestPatchEv
 
 export type RequestPatchUser = Partial<User>;
 
+// TODO: (@soha) 해당 요청은 user.ts 파일로 이동하는 건 어떨지?
 export const requestPatchUser = async (args: RequestPatchUser) => {
   return requestPatch({
-    endpoint: `/api/users`,
+    endpoint: MEMBER_API_PREFIX,
     body: {
       ...args,
     },
   });
 };
+
+export const requestGetCreatedEvents = async () => {
+  return await requestGet<CreatedEvents>({
+    endpoint: `${USER_API_PREFIX}/mine`,
+  });
+};

client/src/apis/request/user.ts

@@ -0,0 +1,20 @@
+import {User} from 'types/serviceType';
+
+import {BASE_URL} from '@apis/baseUrl';
+import {MEMBER_API_PREFIX} from '@apis/endpointPrefix';
+import {requestDelete} from '@apis/fetcher';
+import {requestGet} from '@apis/fetcher';
+
+export const requestDeleteUser = async () => {
+  await requestDelete({
+    baseUrl: BASE_URL.HD,
+    endpoint: `${MEMBER_API_PREFIX}`,
+  });
+};
+
+export const requestGetUserInfo = async () => {
+  return await requestGet<User>({
+    baseUrl: BASE_URL.HD,
+    endpoint: `/api/users/mine`,
+  });
+};

client/src/components/Design/components/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,57 @@
+/** @jsxImportSource @emotion/react */
+import type {Meta, StoryObj} from '@storybook/react';
+
+import {useEffect, useState} from 'react';
+
+import Checkbox from './Checkbox';
+
+const meta = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  tags: ['autodocs'],
+  parameters: {
+    layout: 'centered',
+  },
+  argTypes: {
+    labelText: {
+      description: '',
+      control: {type: 'text'},
+    },
+    isChecked: {
+      description: '',
+      control: {type: 'boolean'},
+    },
+    onChange: {
+      description: '',
+      control: {type: 'object'},
+    },
+  },
+} satisfies Meta<typeof Checkbox>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Playground: Story = {
+  args: {
+    isChecked: false,
+    onChange: () => {},
+    labelText: '체크박스',
+  },
+  render: ({isChecked, onChange, labelText, ...args}) => {
+    const [isCheckedState, setIsCheckedState] = useState(isChecked);
+    const [labelTextState, setLabelTextState] = useState(labelText);
+
+    useEffect(() => {
+      setIsCheckedState(isChecked);
+      setLabelTextState(labelText);
+    }, [isChecked, labelText]);
+
+    const handleToggle = () => {
+      setIsCheckedState(!isCheckedState);
+      onChange();
+    };
+
+    return <Checkbox {...args} isChecked={isCheckedState} onChange={handleToggle} labelText={labelTextState} />;
+  },
+};

client/src/components/Design/components/Checkbox/Checkbox.style.ts

@@ -0,0 +1,38 @@
+import {css} from '@emotion/react';
+
+import {WithTheme} from '@components/Design/type/withTheme';
+
+interface CheckboxStyleProps {
+  isChecked: boolean;
+}
+
+export const checkboxStyle = () =>
+  css({
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: '0.75rem',
+    cursor: 'pointer',
+  });
+
+export const inputGroupStyle = ({theme, isChecked}: WithTheme<CheckboxStyleProps>) =>
+  css({
+    position: 'relative',
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'center',
+
+    '.check-icon': {
+      position: 'absolute',
+    },
+
+    '.checkbox-input': {
+      width: '1.375rem',
+      height: '1.375rem',
+      border: '1px solid',
+      borderRadius: '0.5rem',
+      borderColor: isChecked ? theme.colors.primary : theme.colors.tertiary,
+      backgroundColor: isChecked ? theme.colors.primary : theme.colors.white,
+    },
+  });

client/src/components/Design/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,28 @@
+/** @jsxImportSource @emotion/react */
+import {useTheme} from '@components/Design/theme/HDesignProvider';
+
+import Text from '../Text/Text';
+import Icon from '../Icon/Icon';
+
+import {checkboxStyle, inputGroupStyle} from './Checkbox.style';
+
+interface Props {
+  labelText: string;
+  isChecked: boolean;
+  onChange: () => void;
+}
+
+const Checkbox = ({labelText, isChecked = false, onChange}: Props) => {
+  const {theme} = useTheme();
+  return (
+    <label css={checkboxStyle}>
+      <div css={inputGroupStyle({theme, isChecked})}>
+        {isChecked ? <Icon iconType="check" iconColor="onPrimary" className="check-icon" /> : null}
+        <input type="checkbox" checked={isChecked} onChange={onChange} className="checkbox-input" />
+      </div>
+      <Text size="bodyBold">{labelText}</Text>
+    </label>
+  );
+};
+
+export default Checkbox;