Merge branch 'dev' into feat/263/fix-game-tag-state

src/App.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-unused-vars */
-import React from 'react';
+import React, { useEffect } from 'react';
 import { LocalizationProvider } from '@mui/x-date-pickers';
 import { AdapterDayjs } from '@mui/x-date-pickers/AdapterDayjs';
 import 'dayjs/locale/ko';
@@ -39,10 +39,25 @@ import BalanceGameCreationPage from './pages/BalanceGameCreationPage/BalanceGame
 // import PostPage from './pages/PostPage/PostPage';
 // import SearchResultPage from './pages/SearchResultPage/SearchResultPage';
 // import SignUpPage from './pages/SignUpPage/SignUpPage';
-// import { useNewSelector } from './store';
-// import { selectAccessToken } from './store/auth';
+import { getCookie } from './utils/cookie';
+import { axiosInstance } from './api/interceptor';
+import { useNewDispatch } from './store';
+import { tokenActions } from './store/auth';
 
 const App: React.FC = () => {
+  const dispatch = useNewDispatch();
+
+  useEffect(() => {
+    const token = getCookie('accessToken');
+    if (token) {
+      localStorage.setItem('accessToken', token);
+      localStorage.setItem('refreshToken', 'refreshToken');
+
+      dispatch(tokenActions.setToken(token));
+      axiosInstance.defaults.headers.Authorization = `Bearer ${token}`;
+    }
+  }, [dispatch]);
+
   // const accessToken = useNewSelector(selectAccessToken);
   // const { member } = useMemberQuery(useParseJwt(accessToken).memberId);
   const isLoggedIn = !!localStorage.getItem('accessToken');

src/assets/index.ts

@@ -100,6 +100,14 @@ export { default as CirclePencil } from './svg/circle-pencil.svg';
 export { default as CircleClose } from './svg/circle-close.svg';
 export { default as CircleGame } from './svg/circle-game.svg';
 export { default as CircleTalkPick } from './svg/circle-talkpick.svg';
+export { default as MobileBookmarkDF } from './svg/mobile-bookmark-df.svg';
+export { default as MobileBookmarkPR } from './svg/mobile-bookmark-pr.svg';
+export { default as MobileShare } from './svg/mobile-share.svg';
+export { default as MobileModalClose } from './svg/mobile-modal-close.svg';
+export { default as MobileFolder } from './svg/mobile-folder.svg';
+export { default as MobileFolderCheck } from './svg/mobile-folder-check.svg';
+export { default as MobileCheckIcon } from './svg/mobile-check-icon.svg';
+export { default as MobileTempIcon } from './svg/mobile-temp-icon.svg';
 
 // TODO: 이전 SVG
 export { default as Email } from './svg/email.svg';

src/components/atoms/CheckBoxButton/CheckBoxButton.style.ts

@@ -48,6 +48,6 @@ export const checkBoxRadioStyling = css({
 
 export const checkBoxTextStyling = css(typo.Main.Medium, {
   marginLeft: '14px',
-  color: color.GY[4],
+  color: '#555555',
   cursor: 'pointer',
 });

src/components/mobile/atoms/Button/Button.style.ts

@@ -0,0 +1,85 @@
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+import { css } from '@emotion/react';
+import type { ButtonProps } from './Button';
+
+export const getVariantStyling = (
+  variant: Required<ButtonProps>['variant'],
+  active: boolean,
+) => {
+  const style = {
+    primary: css({
+      borderRadius: '10px',
+      backgroundColor: active ? color.MAIN : color.GY[2],
+      color: color.WT,
+    }),
+    roundPrimary: css({
+      borderRadius: '80px',
+      backgroundColor: active ? color.MAIN : color.GY[2],
+      color: color.WT,
+    }),
+    Primary2: css({
+      borderRadius: '6px',
+      backgroundColor: color.MAIN,
+      color: color.WT,
+    }),
+    outlineShadow: css({
+      border: `1px solid ${color.GY[4]}`,
+      borderRadius: '6px',
+      backgroundColor: color.GY[5],
+      color: color.GY[1],
+    }),
+  };
+
+  return style[variant];
+};
+
+export const getSizeByVariantStyling = (
+  variant: Required<ButtonProps>['variant'],
+  size: Required<ButtonProps>['size'],
+) => {
+  const style = {
+    primary: {
+      large: css(typo.Main.SemiBold, {
+        width: '335px',
+        height: '50px',
+      }),
+      medium: css(typo.Main.SemiBold, {
+        width: '130px',
+        height: '50px',
+      }),
+    },
+    roundPrimary: {
+      large: css(typo.Mobile.Text.SemiBold_14, {
+        width: '295px',
+        height: '40px',
+      }),
+      medium: css({}),
+    },
+    Primary2: {
+      large: css({}),
+      medium: css({
+        width: '64px',
+        height: '34px',
+      }),
+    },
+    outlineShadow: {
+      large: css({}),
+      medium: css({
+        width: '64px',
+        height: '34px',
+      }),
+    },
+  };
+
+  return style[variant][size];
+};
+
+export const buttonStyling = css({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  border: 'none',
+  whiteSpace: 'nowrap',
+  cursor: 'pointer',
+});

src/components/mobile/atoms/Button/Button.tsx

@@ -0,0 +1,35 @@
+import React, { forwardRef } from 'react';
+import type { ComponentPropsWithRef, ForwardedRef } from 'react';
+import * as S from './Button.style';
+
+export interface ButtonProps extends ComponentPropsWithRef<'button'> {
+  size?: 'large' | 'medium';
+  variant?: 'primary' | 'roundPrimary' | 'Primary2' | 'outlineShadow';
+  active?: boolean;
+}
+
+const Button = (
+  {
+    size = 'medium',
+    variant = 'primary',
+    active = true,
+    children,
+    ...attributes
+  }: ButtonProps,
+  ref: ForwardedRef<HTMLButtonElement>,
+) => (
+  <button
+    type="button"
+    ref={ref}
+    css={[
+      S.buttonStyling,
+      S.getVariantStyling(variant, active),
+      S.getSizeByVariantStyling(variant, size),
+    ]}
+    {...attributes}
+  >
+    {children}
+  </button>
+);
+
+export default forwardRef(Button);

src/components/mobile/atoms/GameStageLabel/GameStageLabel.style.ts

@@ -0,0 +1,9 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const getStageLabelColor = (labelColor: string) => {
+  return css(typo.Mobile.Text.SemiBold_14, {
+    color: labelColor === 'main' ? color.MAIN : color.GY[1],
+  });
+};

src/components/mobile/atoms/GameStageLabel/GameStageLabel.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import * as S from './GameStageLabel.style';
+
+export interface GameStageLabelProps {
+  stage: number;
+  color?: 'main' | 'default';
+}
+
+const GameStageLabel = ({ stage, color = 'default' }: GameStageLabelProps) => (
+  <div css={S.getStageLabelColor(color)}>{stage + 1} / 10</div>
+);
+
+export default GameStageLabel;

src/components/mobile/atoms/GameTag/GameTag.style.ts

@@ -0,0 +1,8 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const tagStyle = css(typo.Mobile.Text.SemiBold_20, {
+  color: color.MAIN,
+  gap: '5px',
+});

src/components/mobile/atoms/GameTag/GameTag.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import * as S from './GameTag.style';
+
+export interface GameTagProps {
+  tag: string;
+}
+
+const GameTag = ({ tag }: GameTagProps) => (
+  <div css={S.tagStyle}>
+    <span>#</span> <span>{tag}</span>
+  </div>
+);
+
+export default GameTag;

src/components/mobile/atoms/GameTagChip/GameTagChip.style.ts

@@ -0,0 +1,15 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const tagStyle = css(typo.Mobile.Text.Medium_12, {
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  padding: '6px 14px',
+  borderRadius: '6px',
+  border: `1px solid ${color.WT_VIOLET}`,
+  color: color.MAIN,
+  fontSize: '14px',
+  gap: '5px',
+});

src/components/mobile/atoms/GameTagChip/GameTagChip.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import * as S from './GameTagChip.style';
+
+export interface GameTagChipProps {
+  tag: string;
+}
+
+const GameTagChip = ({ tag }: GameTagChipProps) => (
+  <div css={S.tagStyle}>
+    <span>#{tag}</span>
+  </div>
+);
+
+export default GameTagChip;

src/components/mobile/atoms/IconButton/IconButton.style.ts

@@ -0,0 +1,14 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+
+export const buttonStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'center',
+  justifyContent: ' center',
+  width: '54px',
+  height: '34px',
+  border: `1px solid ${color.GY[3]}`,
+  borderRadius: '4px',
+  cursor: 'pointer',
+});

src/components/mobile/atoms/IconButton/IconButton.tsx

@@ -0,0 +1,23 @@
+import React, {
+  ComponentPropsWithoutRef,
+  ForwardedRef,
+  forwardRef,
+} from 'react';
+import * as S from './IconButton.style';
+
+interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
+  icon: React.ReactNode;
+}
+
+const IconButton = (
+  { icon, onClick, ...props }: IconButtonProps,
+  ref: ForwardedRef<HTMLButtonElement>,
+) => {
+  return (
+    <button type="button" css={S.buttonStyle} ref={ref} {...props}>
+      {icon}
+    </button>
+  );
+};
+
+export default forwardRef(IconButton);

src/components/mobile/atoms/InteractionButton/InteractionButton.style.ts

@@ -0,0 +1,46 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const buttonStyle = css({
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'center',
+  alignItems: 'center',
+  width: '163px',
+  height: '58px',
+  borderRadius: '12px',
+  border: `1px solid ${color.GY[2]}`,
+  boxShadow: '1px 1px 4px rgba(0, 0, 0, 0.15)',
+  cursor: 'pointer',
+});
+
+export const itemWrapper = css({
+  display: 'flex',
+  flexDirection: 'column',
+  paddingTop: '10px',
+  gap: '3px',
+});
+
+export const buttonLabelStyle = css(typo.Mobile.Text.Medium_12, {
+  color: color.MAIN,
+  fontSize: '11px',
+  fontWeight: '700',
+});
+
+export const iconWrapper = css({
+  display: 'flex',
+  justifyContent: 'center',
+  gap: '3px',
+});
+
+export const iconStyle = css({
+  width: '24px',
+  height: '24px',
+  flexShrink: '0',
+});
+
+export const iconLabelStyle = css(typo.Mobile.Text.Medium_12, {
+  color: color.GY[1],
+  fontWeight: '600',
+});