-
-
-
-);
+) => {
+ const handleInputKeyDown = (e: React.KeyboardEvent
+ {isMobile ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+
+
+ )}
+
+ );
+};
export default forwardRef(SearchBar);
diff --git a/src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.style.ts b/src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.style.ts
index 77d12aa3..4f86089e 100644
--- a/src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.style.ts
+++ b/src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.style.ts
@@ -3,6 +3,7 @@ import color from '@/styles/color';
import typo from '@/styles/typo';
export const searchTalkPickItemStyle = css({
+ all: 'unset',
display: 'flex',
flexDirection: 'row',
width: '1065px',
@@ -36,12 +37,13 @@ export const dateStyle = css(typo.Number.Regular, {
});
export const contentWrapStyle = css({
- display: 'flex',
+ display: 'inline',
+ height: '45px',
+ overflowY: 'hidden',
});
+
export const contentStyle = (highlighted: boolean) =>
css(typo.Comment.Regular, {
- overflowY: 'hidden',
- height: '45px',
color: highlighted ? color.MAIN : color.GY[1],
});
diff --git a/src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.tsx b/src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.tsx
index 68a2e1e6..0fda6e2b 100644
--- a/src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.tsx
+++ b/src/components/atoms/SearchTalkPickItem/SearchTalkPickItem.tsx
@@ -9,6 +9,7 @@ export interface SearchTalkPickItemProps {
content: string;
firstImgUrl: string;
keyword: string;
+ onClick: () => void;
}
const SearchTalkPickItem = ({
@@ -17,9 +18,10 @@ const SearchTalkPickItem = ({
content,
firstImgUrl,
keyword,
+ onClick,
}: SearchTalkPickItemProps) => {
return (
-
+
+ {firstImgUrl && (
+
+ 
+
+ )}
+
);
};
export default SearchTalkPickItem;
diff --git a/src/components/atoms/SelectGroup/SelectGroup.style.ts b/src/components/atoms/SelectGroup/SelectGroup.style.ts
index e756ac7f..6b73ceff 100644
--- a/src/components/atoms/SelectGroup/SelectGroup.style.ts
+++ b/src/components/atoms/SelectGroup/SelectGroup.style.ts
@@ -7,7 +7,7 @@ export const selectGroupStyling = css({
alignItems: 'center',
backgroundColor: 'transparent',
padding: '4px',
- width: '100%',
+ width: '912px',
justifyContent: 'space-between',
position: 'relative',
});
diff --git a/src/components/atoms/SelectGroup/SelectGroup.tsx b/src/components/atoms/SelectGroup/SelectGroup.tsx
index d03008a6..8593904e 100644
--- a/src/components/atoms/SelectGroup/SelectGroup.tsx
+++ b/src/components/atoms/SelectGroup/SelectGroup.tsx
@@ -1,34 +1,39 @@
import React from 'react';
import * as S from './SelectGroup.style';
-export type SelectGroupItem = {
+export type SelectGroupItem
+
- {Array.isArray(items) &&
- items.length === 2 &&
- items.map((item) => (
-
- ))}
+
+const SelectGroup = ({
+ items,
+ selectedValue,
+ onSelect,
+}: SelectGroupProps) => (
+ ['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['variant'],
+ size: Required['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',
+});
diff --git a/src/components/mobile/atoms/Button/Button.tsx b/src/components/mobile/atoms/Button/Button.tsx
new file mode 100644
index 00000000..097dde0e
--- /dev/null
+++ b/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,
+) => (
+
+);
+
+export default forwardRef(Button);
diff --git a/src/components/mobile/atoms/DraftSaveButton/DraftSaveButton.style.ts b/src/components/mobile/atoms/DraftSaveButton/DraftSaveButton.style.ts
new file mode 100644
index 00000000..85dfa057
--- /dev/null
+++ b/src/components/mobile/atoms/DraftSaveButton/DraftSaveButton.style.ts
@@ -0,0 +1,10 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const buttonStyle = css(typo.Comment.SemiBold, {
+ outline: 'none',
+ color: color.MAIN,
+ padding: '10px',
+ cursor: 'pointer',
+});
diff --git a/src/components/mobile/atoms/DraftSaveButton/DraftSaveButton.tsx b/src/components/mobile/atoms/DraftSaveButton/DraftSaveButton.tsx
new file mode 100644
index 00000000..75a6ed8d
--- /dev/null
+++ b/src/components/mobile/atoms/DraftSaveButton/DraftSaveButton.tsx
@@ -0,0 +1,15 @@
+import React from 'react';
+import * as S from './DraftSaveButton.style';
+
+interface DraftSaveButtonProps {
+ onClick: () => void;
+}
+
+const DraftSaveButton = ({ onClick }: DraftSaveButtonProps) => {
+ return (
+
+ );
+};
+export default DraftSaveButton;
diff --git a/src/components/mobile/atoms/FloatingButton/FloatingButton.style.ts b/src/components/mobile/atoms/FloatingButton/FloatingButton.style.ts
new file mode 100644
index 00000000..22c4908c
--- /dev/null
+++ b/src/components/mobile/atoms/FloatingButton/FloatingButton.style.ts
@@ -0,0 +1,31 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const categoryButtonBaseStyle = (imageType: 'talkpick' | 'game') =>
+ css({
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ justifyContent: 'center',
+ gap: '13px',
+ padding: '5px 5px 5px 21px',
+ borderRadius: '500px',
+ backgroundColor: color.WT,
+ boxShadow: '1px 2px 15px 0 rgba(119, 130, 255, 0.2)',
+ cursor: 'pointer',
+ transition: 'all 0.3s ease-in',
+ width: imageType === 'talkpick' ? '102px' : '139px',
+ marginLeft: imageType === 'talkpick' ? '37px' : 0,
+ '&:hover': {
+ boxShadow: '1px 2px 15px 0 rgba(119, 130, 255, 0.8)',
+ },
+ });
+
+export const imgWrap = css({
+ flexShrink: 0,
+});
+
+export const labelStyle = css(typo.Mobile.Text.SemiBold_14, {
+ color: color.MAIN,
+});
diff --git a/src/components/mobile/atoms/FloatingButton/FloatingButton.tsx b/src/components/mobile/atoms/FloatingButton/FloatingButton.tsx
new file mode 100644
index 00000000..0deeb216
--- /dev/null
+++ b/src/components/mobile/atoms/FloatingButton/FloatingButton.tsx
@@ -0,0 +1,42 @@
+import React, { ComponentPropsWithRef } from 'react';
+import { CircleGame, CircleTalkPick } from '@/assets';
+import * as S from './FloatingButton.style';
+
+interface FloatingButtonProps extends ComponentPropsWithRef<'button'> {
+ imageType: 'talkpick' | 'game';
+ label: string;
+ onClick?: () => void;
+}
+
+const FloatingButton = ({
+ imageType,
+ label,
+ onClick,
+ ...attributes
+}: FloatingButtonProps) => {
+ let ImageComponent;
+ switch (imageType) {
+ case 'talkpick':
+ ImageComponent = CircleTalkPick;
+ break;
+ case 'game':
+ ImageComponent = CircleGame;
+ break;
+ default:
+ return null;
+ }
+
+ return (
+
+ );
+};
+
+export default FloatingButton;
diff --git a/src/components/mobile/atoms/GameStageLabel/GameStageLabel.style.ts b/src/components/mobile/atoms/GameStageLabel/GameStageLabel.style.ts
new file mode 100644
index 00000000..dc346252
--- /dev/null
+++ b/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],
+ });
+};
diff --git a/src/components/mobile/atoms/GameStageLabel/GameStageLabel.tsx b/src/components/mobile/atoms/GameStageLabel/GameStageLabel.tsx
new file mode 100644
index 00000000..93b27aa4
--- /dev/null
+++ b/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) => (
+ ,
+) => {
+ return (
+
+ );
+};
+
+export default forwardRef(IconButton);
diff --git a/src/components/mobile/atoms/InteractionButton/InteractionButton.style.ts b/src/components/mobile/atoms/InteractionButton/InteractionButton.style.ts
new file mode 100644
index 00000000..486cf187
--- /dev/null
+++ b/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',
+});
diff --git a/src/components/mobile/atoms/InteractionButton/InteractionButton.tsx b/src/components/mobile/atoms/InteractionButton/InteractionButton.tsx
new file mode 100644
index 00000000..c359cd7c
--- /dev/null
+++ b/src/components/mobile/atoms/InteractionButton/InteractionButton.tsx
@@ -0,0 +1,31 @@
+import React, {
+ ComponentPropsWithoutRef,
+ ForwardedRef,
+ forwardRef,
+} from 'react';
+import * as S from './InteractionButton.style';
+
+interface InteractionButtonProps extends ComponentPropsWithoutRef<'button'> {
+ buttonLabel: string;
+ icon: React.ReactNode;
+ iconLabel: string;
+}
+
+const InteractionButton = (
+ { buttonLabel, icon, iconLabel, ...props }: InteractionButtonProps,
+ ref: ForwardedRef,
+) => {
+ return (
+
+ );
+};
+
+export default forwardRef(InteractionButton);
diff --git a/src/components/mobile/atoms/MobileSideMenu/MobileSideMenu.style.ts b/src/components/mobile/atoms/MobileSideMenu/MobileSideMenu.style.ts
new file mode 100644
index 00000000..ab768501
--- /dev/null
+++ b/src/components/mobile/atoms/MobileSideMenu/MobileSideMenu.style.ts
@@ -0,0 +1,36 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const buttonGroupStyle = css({
+ position: 'fixed',
+ top: '55px',
+ right: 0,
+ width: '134px',
+ height: '100%',
+ backgroundColor: color.WT,
+ boxShadow: '0px 0 5px rgba(0, 0, 0, 0.1)',
+ zIndex: 1100,
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+});
+
+export const buttonContainerStyle = css({
+ display: 'flex',
+ flexDirection: 'column',
+});
+
+export const fillerStyle = css({
+ flex: 1,
+});
+
+export const buttonStyle = css(typo.Mobile.Text.Medium_12, {
+ outline: 'none',
+ cursor: 'pointer',
+ backgroundColor: 'transparent',
+ padding: '10.5px 60px 10.5px 24px',
+ textAlign: 'left',
+ color: color.BK,
+ border: 'none',
+});
diff --git a/src/components/mobile/atoms/MobileSideMenu/MobileSideMenu.tsx b/src/components/mobile/atoms/MobileSideMenu/MobileSideMenu.tsx
new file mode 100644
index 00000000..3336354a
--- /dev/null
+++ b/src/components/mobile/atoms/MobileSideMenu/MobileSideMenu.tsx
@@ -0,0 +1,71 @@
+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+import * as S from './MobileSideMenu.style';
+
+interface MobileSideMenuProps {
+ isOpen: boolean;
+ accessToken: string | null;
+ handleLoginButton: () => void;
+ setIsOpen: (isOpen: boolean) => void;
+}
+
+const MobileSideMenu = ({
+ isOpen,
+ accessToken,
+ handleLoginButton,
+ setIsOpen,
+}: MobileSideMenuProps) => {
+ const navigate = useNavigate();
+
+ const handleNavigation = (path: string) => {
+ setIsOpen(false);
+ navigate(path);
+ };
+
+ if (!isOpen) return null;
+
+ return (
+ (false);
+
+ const handleMenuClick = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ setIsOpen(!isOpen);
+ };
+
+ const handleOutsideClick = () => {
+ setIsOpen(false);
+ };
+
+ const handleToggleClick = (value: ToggleGroupValue) => {
+ onClick?.(value);
+ setIsOpen(false);
+ };
+
+ useEffect(() => {
+ window.addEventListener('click', handleOutsideClick);
+ return () => {
+ window.removeEventListener('click', handleOutsideClick);
+ };
+ }, []);
+
+ const isSelectedViews = selectedValue?.field === 'views';
+
+ return (
+ ['action']) => {
+ const style = {
+ share: css({
+ paddingTop: '24px',
+ paddingLeft: '20px',
+ paddingRight: '20px',
+ paddingBottom: '26px',
+ }),
+ tag: css({
+ paddingTop: '24px',
+ paddingLeft: '20px',
+ paddingRight: '20px',
+ paddingBottom: '30px',
+ }),
+ tempGame: css({
+ paddingTop: '24px',
+ paddingLeft: '20px',
+ paddingRight: '20px',
+ paddingBottom: '24px',
+ }),
+ };
+
+ return style[action];
+};
+
+export const modalCloseStyling = css({
+ position: 'absolute',
+ top: '24px',
+ right: '20px',
+ cursor: 'pointer',
+});
diff --git a/src/components/mobile/atoms/Modal/Modal.tsx b/src/components/mobile/atoms/Modal/Modal.tsx
new file mode 100644
index 00000000..f02b0b87
--- /dev/null
+++ b/src/components/mobile/atoms/Modal/Modal.tsx
@@ -0,0 +1,40 @@
+/* eslint-disable react-hooks/exhaustive-deps */
+import React, { useRef, ReactNode } from 'react';
+import { MobileModalClose } from '@/assets';
+import useOutsideClick from '@/hooks/common/useOutsideClick';
+import * as S from './Modal.style';
+
+export interface ModalProps {
+ action?: 'share' | 'tag' | 'tempGame';
+ isOpen?: boolean;
+ onClose?: () => void;
+ hasCloseButton?: boolean;
+ children?: ReactNode;
+}
+
+const Modal = ({
+ isOpen,
+ onClose,
+ action = 'share',
+ hasCloseButton = true,
+ children,
+}: ModalProps) => {
+ const modalRef = useRef(null);
+
+ useOutsideClick(modalRef, () => onClose?.());
+
+ return (
+ ,
+) => (
+
+);
+
+export default forwardRef(TempGameButton);
diff --git a/src/components/mobile/atoms/TitleDescriptionField/TitleDescriptionField.style.ts b/src/components/mobile/atoms/TitleDescriptionField/TitleDescriptionField.style.ts
new file mode 100644
index 00000000..0da97878
--- /dev/null
+++ b/src/components/mobile/atoms/TitleDescriptionField/TitleDescriptionField.style.ts
@@ -0,0 +1,35 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const fieldStyling = css({
+ display: 'flex',
+ flexDirection: 'column',
+ width: '375px',
+ padding: '12px 20px',
+});
+
+export const dividerWrapper = css({
+ margin: '12px 0',
+});
+
+export const titleStyling = css(typo.Mobile.Main.Medium_16, {
+ width: '100%',
+ color: color.BK,
+
+ '::placeholder': {
+ color: color.GY[1],
+ },
+});
+
+export const descriptionStyling = css(typo.Mobile.Text.Medium_12, {
+ fontSize: '14px',
+ width: '100%',
+ height: '200px',
+ resize: 'none',
+ color: color.BK,
+
+ '::placeholder': {
+ color: color.GY[1],
+ },
+});
diff --git a/src/components/mobile/atoms/TitleDescriptionField/TitleDescriptionField.tsx b/src/components/mobile/atoms/TitleDescriptionField/TitleDescriptionField.tsx
new file mode 100644
index 00000000..864bc54c
--- /dev/null
+++ b/src/components/mobile/atoms/TitleDescriptionField/TitleDescriptionField.tsx
@@ -0,0 +1,61 @@
+import React, { ForwardedRef, forwardRef, useRef } from 'react';
+import Divider from '@/components/atoms/Divider/Divider';
+import * as S from './TitleDescriptionField.style';
+
+export interface TitleDescriptionFieldProps {
+ title: string;
+ description?: string;
+ onTitleChange: (e: React.ChangeEvent) => void;
+ onDescriptionChange?: (e: React.ChangeEvent) => void;
+}
+
+const TitleDescriptionField = (
+ {
+ title,
+ description,
+ onTitleChange,
+ onDescriptionChange,
+ }: TitleDescriptionFieldProps,
+ ref: ForwardedRef,
+) => {
+ const descriptionRef = useRef(null);
+
+ const handleTitleChange = (e: React.ChangeEvent) => {
+ if (e.target.value.length <= 100) {
+ onTitleChange(e);
+ }
+ };
+
+ const handleDescriptionChange = (
+ e: React.ChangeEvent,
+ ) => {
+ if (onDescriptionChange && e.target.value.length <= 30) {
+ onDescriptionChange(e);
+ }
+ };
+
+ return (
+ ('');
+
+ const handleTagSubmit = () => {
+ if (mainTag) {
+ onTagSubmit(mainTag, subTag);
+ onClose?.();
+ }
+ };
+
+ return (
+
+
+ );
+};
+
+export default GameTagModal;
diff --git a/src/components/mobile/molecules/ShareModal/ShareModal.style.ts b/src/components/mobile/molecules/ShareModal/ShareModal.style.ts
new file mode 100644
index 00000000..b4f08219
--- /dev/null
+++ b/src/components/mobile/molecules/ShareModal/ShareModal.style.ts
@@ -0,0 +1,19 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const shareModalStyling = css({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+});
+
+export const textStyling = css(typo.Comment.SemiBold, {
+ marginTop: '24px',
+ marginBottom: '23px',
+ color: color.BK,
+});
+
+export const shareTextStyling = css(typo.Comment.SemiBold, {
+ color: color.MAIN,
+});
diff --git a/src/components/mobile/molecules/ShareModal/ShareModal.tsx b/src/components/mobile/molecules/ShareModal/ShareModal.tsx
new file mode 100644
index 00000000..9968e7be
--- /dev/null
+++ b/src/components/mobile/molecules/ShareModal/ShareModal.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import Button from '@/components/mobile/atoms/Button/Button';
+import Modal from '@/components/mobile/atoms/Modal/Modal';
+import * as S from './ShareModal.style';
+
+export interface ShareModalProps {
+ isOpen?: boolean;
+ onConfirm?: () => void;
+ onClose?: () => void;
+}
+
+const ShareModal = ({ isOpen, onConfirm, onClose }: ShareModalProps) => {
+ return (
+
+
+ );
+};
+
+export default ShareModal;
diff --git a/src/components/mobile/molecules/TempGameModal/TempGameModal.style.ts b/src/components/mobile/molecules/TempGameModal/TempGameModal.style.ts
new file mode 100644
index 00000000..7e18b461
--- /dev/null
+++ b/src/components/mobile/molecules/TempGameModal/TempGameModal.style.ts
@@ -0,0 +1,21 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const tempGameModalStyling = css({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ gap: '10px',
+});
+
+export const textStyling = css(typo.Main.SemiBold, {
+ color: color.BK,
+});
+
+export const buttonWrapper = css({
+ display: 'flex',
+ flexDirection: 'row',
+ gap: '11px',
+ marginTop: '5px',
+});
diff --git a/src/components/mobile/molecules/TempGameModal/TempGameModal.tsx b/src/components/mobile/molecules/TempGameModal/TempGameModal.tsx
new file mode 100644
index 00000000..4bb9ecff
--- /dev/null
+++ b/src/components/mobile/molecules/TempGameModal/TempGameModal.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { MobileTempIcon } from '@/assets';
+import Modal from '@/components/mobile/atoms/Modal/Modal';
+import TempGameButton from '@/components/mobile/atoms/TempGameButton/TempGameButton';
+import * as S from './TempGameModal.style';
+
+export interface TempGameModalProps {
+ isOpen?: boolean;
+ onSaveGame: () => void;
+ onGetGame: () => void;
+ onClose?: () => void;
+}
+
+const TempGameModal = ({
+ isOpen,
+ onSaveGame,
+ onGetGame,
+ onClose,
+}: TempGameModalProps) => {
+ return (
+
+
+ );
+};
+
+export default TempGameModal;
diff --git a/src/components/molecules/ActionBox/ActionBox.tsx b/src/components/molecules/ActionBox/ActionBox.tsx
index 912bf620..0e7ec5ef 100644
--- a/src/components/molecules/ActionBox/ActionBox.tsx
+++ b/src/components/molecules/ActionBox/ActionBox.tsx
@@ -1,12 +1,19 @@
import React, { useState } from 'react';
import ActionButton from '@/components/atoms/ActionButton/ActionButton';
+import { useNavigate } from 'react-router-dom';
+import { PATH } from '@/constants/path';
import { actionBoxContainer } from './ActionBox.style';
const ActionBox = () => {
+ const navigate = useNavigate();
const [activeButton, setActiveButton] = useState('activity');
const handleButtonClick = (buttonType: string) => {
setActiveButton(buttonType);
+
+ if (buttonType === 'edit') {
+ navigate(PATH.CHANGE.PROFILE);
+ }
};
return (
diff --git a/src/components/molecules/CategoryBar/CategoryBar.style.ts b/src/components/molecules/CategoryBar/CategoryBar.style.ts
index 28d3f041..92deec91 100644
--- a/src/components/molecules/CategoryBar/CategoryBar.style.ts
+++ b/src/components/molecules/CategoryBar/CategoryBar.style.ts
@@ -4,4 +4,7 @@ export const containerStyle = css({
display: 'flex',
alignItems: 'center',
padding: '20px 0',
+ '@media (max-width: 430px)': {
+ padding: 0,
+ },
});
diff --git a/src/components/molecules/CategoryBar/CategoryBar.tsx b/src/components/molecules/CategoryBar/CategoryBar.tsx
index 173afd46..be5ea076 100644
--- a/src/components/molecules/CategoryBar/CategoryBar.tsx
+++ b/src/components/molecules/CategoryBar/CategoryBar.tsx
@@ -1,5 +1,14 @@
import React from 'react';
-import { Popular, Couple, Taste, Worldcup } from '@/assets';
+import {
+ Popular,
+ Couple,
+ Taste,
+ Worldcup,
+ PopularSmall,
+ CoupleSmall,
+ TasteSmall,
+ WorldcupSmall,
+} from '@/assets';
import * as S from './CategoryBar.style';
import BalanceGameCategoryButton from '../../atoms/BalanceGameCategoryButton/BalanceGameCategoryButton';
@@ -8,9 +17,14 @@ export interface CategoryBarProps {
setActiveTab: React.Dispatch<
React.SetStateAction<'μΈκΈ°' | '컀ν' | 'μ·¨ν₯' | 'μλμ»΅'>
>;
+ isMobile?: boolean;
}
-const CategoryBar = ({ activeTab, setActiveTab }: CategoryBarProps) => {
+const CategoryBar = ({
+ activeTab,
+ setActiveTab,
+ isMobile = false,
+}: CategoryBarProps) => {
const getBadgeText = (tab: 'μΈκΈ°' | '컀ν' | 'μ·¨ν₯' | 'μλμ»΅') => {
switch (tab) {
case 'μΈκΈ°':
@@ -30,28 +44,28 @@ const CategoryBar = ({ activeTab, setActiveTab }: CategoryBarProps) => {
+ {items.map(({ label, value }) => (
+
+ ))}
);
diff --git a/src/components/atoms/ToggleGroup/ToggleGroup.tsx b/src/components/atoms/ToggleGroup/ToggleGroup.tsx
index e55d3d0e..5c3da7d0 100644
--- a/src/components/atoms/ToggleGroup/ToggleGroup.tsx
+++ b/src/components/atoms/ToggleGroup/ToggleGroup.tsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { ToggleGroupItem, ToggleGroupProps } from '@/types/toggle';
import {
selectedStyling,
firstItemRadius,
@@ -7,22 +8,21 @@ import {
toggleButtonItemStyling,
} from './ToggleGroup.style';
-export type ToggleGroupItem = {
- label: string;
- value: string;
-};
-
-export interface ToggleGroupProps {
- items?: ToggleGroupItem[];
- selectedValue?: string;
- onClick?: (value: string) => void;
-}
-
const defaultItems: ToggleGroupItem[] = [
- { label: 'μΈκΈ°μ', value: 'views' },
- { label: 'μ΅μ μ', value: 'createdAt' },
+ { label: 'μΈκΈ°μ', value: { field: 'views', order: 'desc' } },
+ { label: 'μ΅μ μ', value: { field: 'createdAt', order: 'desc' } },
];
+const isSelected = (
+ selectedValue: { field: string; order: 'asc' | 'desc' } | undefined,
+ value: { field: string; order: 'asc' | 'desc' },
+): boolean => {
+ if (!selectedValue) return false;
+ return (
+ selectedValue.field === value.field && selectedValue.order === value.order
+ );
+};
+
const ToggleGroup = ({
items = defaultItems,
selectedValue,
@@ -31,18 +31,18 @@ const ToggleGroup = ({
{Array.isArray(items) &&
items.length === 2 &&
- items.map((item, idx) => (
+ items.map(({ label, value }, idx) => (
))}
diff --git a/src/components/mobile/atoms/Button/Button.style.ts b/src/components/mobile/atoms/Button/Button.style.ts
new file mode 100644
index 00000000..14a4b850
--- /dev/null
+++ b/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{stage + 1} / 10
+);
+
+export default GameStageLabel;
diff --git a/src/components/mobile/atoms/GameTag/GameTag.style.ts b/src/components/mobile/atoms/GameTag/GameTag.style.ts
new file mode 100644
index 00000000..affcea54
--- /dev/null
+++ b/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',
+});
diff --git a/src/components/mobile/atoms/GameTag/GameTag.tsx b/src/components/mobile/atoms/GameTag/GameTag.tsx
new file mode 100644
index 00000000..4793e628
--- /dev/null
+++ b/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) => (
+
+ # {tag}
+
+);
+
+export default GameTag;
diff --git a/src/components/mobile/atoms/GameTagChip/GameTagChip.style.ts b/src/components/mobile/atoms/GameTagChip/GameTagChip.style.ts
new file mode 100644
index 00000000..f6d9cd0c
--- /dev/null
+++ b/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',
+});
diff --git a/src/components/mobile/atoms/GameTagChip/GameTagChip.tsx b/src/components/mobile/atoms/GameTagChip/GameTagChip.tsx
new file mode 100644
index 00000000..9a8f991b
--- /dev/null
+++ b/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) => (
+
+ #{tag}
+
+);
+
+export default GameTagChip;
diff --git a/src/components/mobile/atoms/IconButton/IconButton.style.ts b/src/components/mobile/atoms/IconButton/IconButton.style.ts
new file mode 100644
index 00000000..6bcfb6f1
--- /dev/null
+++ b/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',
+});
diff --git a/src/components/mobile/atoms/IconButton/IconButton.tsx b/src/components/mobile/atoms/IconButton/IconButton.tsx
new file mode 100644
index 00000000..800a7b3d
--- /dev/null
+++ b/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
+
+ );
+};
+
+export default MobileSideMenu;
diff --git a/src/components/mobile/atoms/MobileToggleGroup/MobileToggleGroup.style.ts b/src/components/mobile/atoms/MobileToggleGroup/MobileToggleGroup.style.ts
new file mode 100644
index 00000000..e7a7f424
--- /dev/null
+++ b/src/components/mobile/atoms/MobileToggleGroup/MobileToggleGroup.style.ts
@@ -0,0 +1,33 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const toggleGroupStyle = css({
+ display: 'flex',
+ flexDirection: 'column',
+});
+
+export const clickedToggleStyle = (isOpen: boolean) =>
+ css(typo.Mobile.Text.SemiBold_12, {
+ color: color.MAIN,
+ backgroundColor: color.WT_VIOLET,
+ display: 'flex',
+ alignItems: 'center',
+ gap: '8px',
+ padding: '4px 8px 4px 9px',
+ borderBottom: isOpen ? `0.6px solid ${color.SKYBLUE}` : undefined,
+ borderRadius: isOpen ? undefined : '6px',
+ cursor: 'pointer',
+ });
+
+export const unClickedToggleStyle = css(typo.Mobile.Text.SemiBold_12, {
+ color: color.GY[1],
+ backgroundColor: color.WT,
+ padding: '4px 26px 4px 9px',
+ transition: 'all .1s ease-in',
+ borderRadius: '0 0 6px 6px',
+ cursor: 'pointer',
+ '&:hover': {
+ backgroundColor: color.WT_VIOLET,
+ },
+});
diff --git a/src/components/mobile/atoms/MobileToggleGroup/MobileToggleGroup.tsx b/src/components/mobile/atoms/MobileToggleGroup/MobileToggleGroup.tsx
new file mode 100644
index 00000000..194e5f69
--- /dev/null
+++ b/src/components/mobile/atoms/MobileToggleGroup/MobileToggleGroup.tsx
@@ -0,0 +1,76 @@
+import React, { useState, useEffect } from 'react';
+import { TriangleDown, TriangleUp } from '@/assets';
+import {
+ ToggleGroupItem,
+ ToggleGroupProps,
+ ToggleGroupValue,
+} from '@/types/toggle';
+import * as S from './MobileToggleGroup.style';
+
+const defaultItems: ToggleGroupItem[] = [
+ {
+ label: 'μΈκΈ°μ',
+ value: { field: 'views', order: 'desc' },
+ },
+ {
+ label: 'μ΅μ μ',
+ value: { field: 'createdAt', order: 'desc' },
+ },
+];
+
+const MobileToggleGroup = ({
+ items = defaultItems,
+ selectedValue,
+ onClick,
+}: ToggleGroupProps) => {
+ const [isOpen, setIsOpen] = useState
+
+
+
+
+ {accessToken && (
+
+ )}
+
+
+
+
+ {isOpen && (
+
+ )}
+
+ );
+};
+
+export default MobileToggleGroup;
diff --git a/src/components/mobile/atoms/Modal/Modal.style.ts b/src/components/mobile/atoms/Modal/Modal.style.ts
new file mode 100644
index 00000000..477f5393
--- /dev/null
+++ b/src/components/mobile/atoms/Modal/Modal.style.ts
@@ -0,0 +1,46 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import type { ModalProps } from './Modal';
+
+export const modalStyling = css({
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ position: 'relative',
+ width: '335px',
+ backgroundColor: color.WT,
+ borderRadius: '12px',
+ boxShadow: '1px 2px 30px rgba(0, 0, 0, 0.15)',
+});
+
+export const getModalSize = (action: Required
+ {isOpen && (
+
+ );
+};
+
+export default Modal;
diff --git a/src/components/mobile/atoms/TempGameButton/TempGameButton.style.ts b/src/components/mobile/atoms/TempGameButton/TempGameButton.style.ts
new file mode 100644
index 00000000..c7df6486
--- /dev/null
+++ b/src/components/mobile/atoms/TempGameButton/TempGameButton.style.ts
@@ -0,0 +1,35 @@
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+import { css } from '@emotion/react';
+
+export const tempGameButtonStyling = css({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'flex-end',
+ padding: '10px',
+ width: '142px',
+ height: '136px',
+ backgroundColor: color.WT,
+ borderRadius: '10px',
+ border: `1px solid ${color.GY[3]}`,
+ boxShadow: '1px 2px 15px rgba(0, 0, 0, 0.05)',
+ cursor: 'pointer',
+});
+
+export const itemWrapper = css({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'space-between',
+ height: '95px',
+});
+
+export const buttonStyling = css(typo.Mobile.Text.SemiBold_14, {
+ display: 'flex',
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: '122px',
+ height: '34px',
+ borderRadius: '8px',
+ backgroundColor: color.WT_VIOLET,
+ color: color.MAIN,
+});
diff --git a/src/components/mobile/atoms/TempGameButton/TempGameButton.tsx b/src/components/mobile/atoms/TempGameButton/TempGameButton.tsx
new file mode 100644
index 00000000..58484fca
--- /dev/null
+++ b/src/components/mobile/atoms/TempGameButton/TempGameButton.tsx
@@ -0,0 +1,24 @@
+import React, { forwardRef } from 'react';
+import type { ComponentPropsWithRef, ForwardedRef } from 'react';
+import { MobileFolder, MobileFolderCheck } from '@/assets';
+import * as S from './TempGameButton.style';
+
+export interface ButtonProps extends ComponentPropsWithRef<'button'> {
+ action?: 'save' | 'get';
+}
+
+const TempGameButton = (
+ { action = 'save', ...attributes }: ButtonProps,
+ ref: ForwardedRef
+ {hasCloseButton && (
+
+ )}
+
+
+
+ );
+};
+
+export default forwardRef(TitleDescriptionField);
diff --git a/src/components/mobile/molecules/FloatingMenuButton/FloatingMenuButton.style.ts b/src/components/mobile/molecules/FloatingMenuButton/FloatingMenuButton.style.ts
new file mode 100644
index 00000000..a9853eaa
--- /dev/null
+++ b/src/components/mobile/molecules/FloatingMenuButton/FloatingMenuButton.style.ts
@@ -0,0 +1,39 @@
+import { css } from '@emotion/react';
+
+export const overlay = css({
+ position: 'fixed',
+ top: 0,
+ left: 0,
+ width: '100vw',
+ height: '100vh',
+ backgroundColor: 'rgba(255, 255, 255, 0.5)',
+ zIndex: 10,
+});
+
+export const dropdownStyling = css({
+ display: 'flex',
+ flexDirection: 'column',
+ position: 'relative',
+ zIndex: 20,
+});
+
+export const ButtonWrapper = css({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'flex-end',
+ gap: '10px',
+ position: 'absolute',
+ bottom: '70px',
+ right: 0,
+ zIndex: 20,
+});
+
+export const dropdownButtonStyling = css({
+ cursor: 'pointer',
+ zIndex: 20,
+ width: '50px',
+ height: '50px',
+ position: 'absolute',
+ bottom: '10px',
+ right: '20px',
+});
diff --git a/src/components/mobile/molecules/FloatingMenuButton/FloatingMenuButton.tsx b/src/components/mobile/molecules/FloatingMenuButton/FloatingMenuButton.tsx
new file mode 100644
index 00000000..ffe85b4d
--- /dev/null
+++ b/src/components/mobile/molecules/FloatingMenuButton/FloatingMenuButton.tsx
@@ -0,0 +1,78 @@
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/no-static-element-interactions */
+/* eslint-disable @typescript-eslint/no-unsafe-assignment */
+import { CircleClose, CirclePencil } from '@/assets';
+import FloatingButton from '@/components/mobile/atoms/FloatingButton/FloatingButton';
+import { PATH } from '@/constants/path';
+import React, { useEffect, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useNewSelector } from '@/store';
+import { selectAccessToken } from '@/store/auth';
+import * as S from './FloatingMenuButton.style';
+
+const FloatingMenuButton = () => {
+ const navigate = useNavigate();
+ const accessToken = useNewSelector(selectAccessToken);
+ const [isOpen, setIsOpen] = useState(false);
+
+ const handleCreatePostButton = () => {
+ if (accessToken) {
+ navigate(PATH.CREATE.TALK_PICK);
+ } else {
+ navigate(PATH.LOGIN);
+ }
+ };
+
+ const handleCreateGameButton = () => {
+ if (accessToken) {
+ navigate(PATH.CREATE.GAME);
+ } else {
+ navigate(PATH.LOGIN);
+ }
+ };
+
+ const handleMenuClick = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ setIsOpen(!isOpen);
+ };
+
+ const handleOutsideClick = () => {
+ setIsOpen(false);
+ };
+
+ useEffect(() => {
+ window.addEventListener('click', handleOutsideClick);
+ return () => {
+ window.removeEventListener('click', handleOutsideClick);
+ };
+ }, []);
+ return (
+
+
+
+
+ {isOpen && (
+
+ )}
+ {isOpen && (
+
+ );
+};
+export default FloatingMenuButton;
diff --git a/src/components/mobile/molecules/GameTagModal/GameTagModal.style.ts b/src/components/mobile/molecules/GameTagModal/GameTagModal.style.ts
new file mode 100644
index 00000000..b0e3845d
--- /dev/null
+++ b/src/components/mobile/molecules/GameTagModal/GameTagModal.style.ts
@@ -0,0 +1,81 @@
+import { css } from '@emotion/react';
+import color from '@/styles/color';
+import typo from '@/styles/typo';
+
+export const contentWrapper = css({
+ display: 'flex',
+ flexDirection: 'column',
+ alignItems: 'center',
+ gap: '20px',
+});
+
+export const textBox = css({
+ display: 'flex',
+ flexDirection: 'row',
+ alignItems: 'center',
+ gap: '3px',
+});
+
+export const textStyling = css(typo.Main.SemiBold, {
+ color: color.BK,
+});
+
+export const tagTextStyling = css(typo.Mobile.Text.SemiBold_14, {
+ color: color.GY[1],
+});
+
+export const markStyling = css(typo.Mobile.Text.SemiBold_14, {
+ color: color.MAIN,
+});
+
+export const tagWrapper = css({
+ width: '100%',
+ display: 'flex',
+ flexDirection: 'column',
+ gap: '6px',
+});
+
+export const buttonWrapper = css({
+ display: 'flex',
+ gap: '8px',
+});
+
+export const inputStyling = css(typo.Mobile.Text.Medium_12, {
+ fontSize: '14px',
+ width: '295px',
+ height: '42px',
+ padding: '10px 20px',
+ border: `1px solid ${color.GY[4]}`,
+ borderRadius: '6px',
+});
+
+export const customButtonStyle = (isDisabled: boolean) =>
+ css({
+ cursor: isDisabled ? 'not-allowed' : 'pointer',
+ });
+
+export const customDisabledBtnStyle = css({
+ color: color.WT,
+ backgroundColor: color.GY[2],
+ outline: '1px solid transparent',
+ pointerEvents: 'none',
+ ':hover': {
+ backgroundColor: color.GY[2],
+ },
+});
+
+export const getButtonStyling = (isSelected: boolean) => {
+ return css({
+ display: 'flex',
+ flexDirection: 'column',
+ justifyContent: 'center',
+ alignItems: 'center',
+ width: '64px',
+ height: '34px',
+ borderRadius: '6px',
+ border: isSelected ? 'null' : `1px solid ${color.GY[4]}`,
+ backgroundColor: isSelected ? color.MAIN : color.GY[5],
+ color: isSelected ? color.WT : color.GY[1],
+ cursor: 'pointer',
+ });
+};
diff --git a/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx b/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx
new file mode 100644
index 00000000..0f849409
--- /dev/null
+++ b/src/components/mobile/molecules/GameTagModal/GameTagModal.tsx
@@ -0,0 +1,85 @@
+import React, { useState } from 'react';
+import { MobileCheckIcon } from '@/assets';
+import Modal from '@/components/mobile/atoms/Modal/Modal';
+import Button from '@/components/mobile/atoms/Button/Button';
+import Divider from '@/components/atoms/Divider/Divider';
+import * as S from './GameTagModal.style';
+
+interface GameTagModalProps {
+ isOpen?: boolean;
+ onClose?: () => void;
+ onTagSubmit: (mainTag: string, subTag: string) => void;
+}
+
+const GameTagModal = ({ isOpen, onClose, onTagSubmit }: GameTagModalProps) => {
+ const [mainTag, setMainTag] = useState<'컀ν' | 'μ·¨ν₯' | 'κΈ°ν' | null>(null);
+ const [subTag, setSubTag] = useState
+
+ )}
+
+
+
+ λ°Έλ°μ€κ²μ νκ·Έλ₯Ό μ νν΄μ£ΌμΈμ!
+
+
+
+ λ©μΈνκ·Έ
+ *
+
+
+
+
+
+
+
+
+
+
+ μλΈνκ·Έ
+
+ setSubTag(e.target.value)}
+ />
+
+
+
+ μΉ΄μΉ΄μ€ν‘μΌλ‘ 곡μ νμκ² μ΅λκΉ?
+
+
+
+
+ μμ μ μ₯
+
+
+
+
+
+ ) : (
+
);
};
diff --git a/src/components/molecules/InfoBox/InfoBox.style.ts b/src/components/molecules/InfoBox/InfoBox.style.ts
index 3f50a42f..879362a1 100644
--- a/src/components/molecules/InfoBox/InfoBox.style.ts
+++ b/src/components/molecules/InfoBox/InfoBox.style.ts
@@ -3,6 +3,7 @@ import color from '@/styles/color';
import typo from '@/styles/typo';
export const infoContainer = css`
+ all: unset;
display: flex;
width: 904px;
height: 84px;
@@ -15,6 +16,11 @@ export const infoContainer = css`
border-radius: 15px;
background-color: ${color.WT};
box-sizing: border-box;
+
+ &:focus-visible {
+ outline: 1px solid ${color.BK};
+ outline-offset: 1px;
+ }
`;
export const textContainer = css`
@@ -33,6 +39,7 @@ export const titleLabel = css`
${typo.Main.Medium_16};
color: ${color.BK};
margin: 0;
+ text-align: left;
`;
export const subtitleWrapper = css`
diff --git a/src/components/molecules/InfoBox/InfoBox.tsx b/src/components/molecules/InfoBox/InfoBox.tsx
index ad04d17d..9cc9b0ae 100644
--- a/src/components/molecules/InfoBox/InfoBox.tsx
+++ b/src/components/molecules/InfoBox/InfoBox.tsx
@@ -8,6 +8,7 @@ export interface InfoBoxProps {
commentContent: string;
commentCount: number;
bookmarks: number;
+ onClick: () => void;
}
const InfoBox = ({
title,
@@ -15,9 +16,10 @@ const InfoBox = ({
commentContent,
commentCount,
bookmarks,
+ onClick,
}: InfoBoxProps) => {
return (
- ) => {
@@ -19,7 +20,14 @@ const SearchTagBar = ({ onSearch }: SearchTagBarProps) => {
onSearch(inputValue);
};
- return (
+ return isMobile ? (
+ {
+ const navigate = useNavigate();
+
+ const handleTalkPickClick = (talkPickId: number) => {
+ navigate(`/${PATH.TALKPICK(talkPickId)}`);
+ };
+
return (
+
+
);
};
diff --git a/src/components/molecules/MyContentBox/MyContentBox.style.ts b/src/components/molecules/MyContentBox/MyContentBox.style.ts
index 94932095..76431c6e 100644
--- a/src/components/molecules/MyContentBox/MyContentBox.style.ts
+++ b/src/components/molecules/MyContentBox/MyContentBox.style.ts
@@ -3,6 +3,7 @@ import color from '@/styles/color';
import typo from '@/styles/typo';
export const infoContainer = css`
+ all: unset;
display: flex;
width: 904px;
height: 61px;
@@ -15,6 +16,11 @@ export const infoContainer = css`
border-radius: 15px;
background-color: ${color.WT};
box-sizing: border-box;
+
+ &:focus-visible {
+ outline: 1px solid ${color.BK};
+ outline-offset: 1px;
+ }
`;
export const textContainer = css`
@@ -33,6 +39,7 @@ export const titleLabel = css`
${typo.Main.Medium_16};
color: ${color.BK};
margin: 0;
+ text-align: left;
`;
export const bookmarkWrapper = css`
diff --git a/src/components/molecules/MyContentBox/MyContentBox.tsx b/src/components/molecules/MyContentBox/MyContentBox.tsx
index c161b8cb..895f29c9 100644
--- a/src/components/molecules/MyContentBox/MyContentBox.tsx
+++ b/src/components/molecules/MyContentBox/MyContentBox.tsx
@@ -9,6 +9,7 @@ export interface MyContentBoxProps {
bookmarks: number;
showBookmark?: boolean;
bookmarked?: BookmarkProps['bookmarked'];
+ onClick: () => void;
}
const MyContentBox = ({
title,
@@ -16,9 +17,10 @@ const MyContentBox = ({
bookmarks,
showBookmark = false,
bookmarked = false,
+ onClick,
}: MyContentBoxProps) => {
return (
-
+
+
);
};
diff --git a/src/components/molecules/OptionSelector/OptionSelector.tsx b/src/components/molecules/OptionSelector/OptionSelector.tsx
index 30520928..1cfb4741 100644
--- a/src/components/molecules/OptionSelector/OptionSelector.tsx
+++ b/src/components/molecules/OptionSelector/OptionSelector.tsx
@@ -1,9 +1,9 @@
-import React, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
import Button from '@/components/atoms/Button/Button';
import * as S from './OptionSelector.style';
interface OptionSelectorProps {
- options: string[];
+ options: { label: string; value: string }[];
selectedOption?: string;
onSelect: (option: string) => void;
}
@@ -12,23 +12,31 @@ const OptionSelector = ({
selectedOption,
onSelect,
}: OptionSelectorProps) => {
- const [selected, setSelected] = useState(selectedOption || options[0]);
+ const [selected, setSelected] = useState(
+ selectedOption ?? options[0]?.value ?? '',
+ );
+
+ useEffect(() => {
+ if (selectedOption) {
+ setSelected(selectedOption);
+ }
+ }, [selectedOption]);
- const handleSelect = (option: string) => {
- setSelected(option);
- onSelect(option);
+ const handleSelect = (optionValue: string) => {
+ setSelected(optionValue);
+ onSelect(optionValue);
};
return (
- {options.map((option) => (
+ {options.map(({ label, value }) => (
))}
diff --git a/src/components/molecules/ReportModal/ReportModal.style.ts b/src/components/molecules/ReportModal/ReportModal.style.ts
index 375920ad..a431cffe 100644
--- a/src/components/molecules/ReportModal/ReportModal.style.ts
+++ b/src/components/molecules/ReportModal/ReportModal.style.ts
@@ -43,6 +43,6 @@ export const reportTextAreaStyling = css(typo.Comment.Regular, {
border: `1px solid ${color.GY[2]}`,
backgroundColor: color.WT,
boxShadow: '1px 2px 15px rgba(0, 0, 0, 0.05)',
- color: color.GY[4],
+ color: '#555555',
resize: 'none',
});
diff --git a/src/components/molecules/SearchGameList/SearchGameList.tsx b/src/components/molecules/SearchGameList/SearchGameList.tsx
index bcbeecc9..c80dd1be 100644
--- a/src/components/molecules/SearchGameList/SearchGameList.tsx
+++ b/src/components/molecules/SearchGameList/SearchGameList.tsx
@@ -1,23 +1,22 @@
import React from 'react';
-import ContentsButton, {
- ContentsButtonProps,
-} from '@/components/molecules/ContentsButton/ContentsButton';
+import { GameListItem } from '@/types/search';
+import ContentsButton from '@/components/molecules/ContentsButton/ContentsButton';
+import { PATH } from '@/constants/path';
+import { useNavigate } from 'react-router-dom';
import * as S from './SearchGameList.style';
-export type GameItem = Pick<
- ContentsButtonProps,
- 'title' | 'mainTag' | 'subTag' | 'images'
-> & {
- optionAImg?: string;
- optionBImg?: string;
-};
-
export interface SearchGameListProps {
- gameList: GameItem[];
+ gameList: GameListItem[];
keyword: string;
}
const SearchGameList = ({ gameList, keyword }: SearchGameListProps) => {
+ const navigate = useNavigate();
+
+ const handleItemClick = (gameId: number) => {
+ navigate(`/${PATH.BALANCEGAME(gameId)}`);
+ };
+
return (
{gameList.map((game) => (
@@ -30,6 +29,7 @@ const SearchGameList = ({ gameList, keyword }: SearchGameListProps) => {
showBookmark={false}
size="small"
keyword={keyword}
+ onClick={() => handleItemClick(game.gameSetId)}
/>
))}
diff --git a/src/components/molecules/SearchTagBar/SearchTagBar.tsx b/src/components/molecules/SearchTagBar/SearchTagBar.tsx
index 92f0629e..f301cce5 100644
--- a/src/components/molecules/SearchTagBar/SearchTagBar.tsx
+++ b/src/components/molecules/SearchTagBar/SearchTagBar.tsx
@@ -6,9 +6,10 @@ import * as S from './SearchTagBar.style';
interface SearchTagBarProps {
onSearch: (query: string) => void;
+ isMobile?: boolean;
}
-const SearchTagBar = ({ onSearch }: SearchTagBarProps) => {
+const SearchTagBar = ({ onSearch, isMobile = false }: SearchTagBarProps) => {
const [inputValue, setInputValue] = useState('');
const handleInputChange = (e: React.ChangeEvent
{searchTalkPickList.map((searchItem, idx) => (
@@ -24,6 +31,7 @@ const SearchTalkPickList = ({
content={searchItem.content}
firstImgUrl={searchItem.firstImgUrl}
keyword={keyword}
+ onClick={() => handleTalkPickClick(searchItem.id)}
/>
{idx < searchTalkPickList.length - 1 && (
diff --git a/src/components/molecules/TopBanner/TodayTalkPickBanner/TodayTalkPickBanner.style.ts b/src/components/molecules/TopBanner/TodayTalkPickBanner/TodayTalkPickBanner.style.ts
index 2b575492..9ebc7662 100644
--- a/src/components/molecules/TopBanner/TodayTalkPickBanner/TodayTalkPickBanner.style.ts
+++ b/src/components/molecules/TopBanner/TodayTalkPickBanner/TodayTalkPickBanner.style.ts
@@ -16,9 +16,15 @@ export const talkPickStyling = css({
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
cursor: 'pointer',
+ '@media (max-width: 430px)': {
+ height: '227px',
+ paddingTop: '31px',
+ paddingBottom: '48px',
+ },
});
-export const bannerChipStyling = css(typo.Main.SemiBold, {
+export const bannerChipStyling = css({
+ ...typo.Main.SemiBold,
display: 'flex',
width: '142px',
height: '38px',
@@ -28,9 +34,16 @@ export const bannerChipStyling = css(typo.Main.SemiBold, {
borderRadius: '24px',
backgroundColor: color.WT,
color: color.BK,
+ '@media (max-width: 430px)': {
+ ...typo.Mobile.Text.SemiBold_7,
+ width: '53px',
+ height: '15px',
+ gap: '2px',
+ },
});
-export const bannerBtnStyling = css(typo.Main.Medium, {
+export const bannerBtnStyling = css({
+ ...typo.Main.Medium,
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
@@ -39,11 +52,23 @@ export const bannerBtnStyling = css(typo.Main.Medium, {
borderRadius: '10px',
backgroundColor: color.MAIN,
color: color.WT,
+ '@media (max-width: 430px)': {
+ ...typo.Mobile.Text.SemiBold_7,
+ width: '128px',
+ height: '25px',
+ borderRadius: '4px',
+ },
});
-export const talkPickTextStyling = css(typo.Title, {
+export const talkPickTextStyling = css({
+ ...typo.Title,
textAlign: 'center',
marginTop: '40px',
marginBottom: '70px',
color: color.WT,
+ '@media (max-width: 430px)': {
+ ...typo.Mobile.Text.Bold_16,
+ marginTop: '32px',
+ marginBottom: '35px',
+ },
});
diff --git a/src/components/molecules/TopBanner/TodayTalkPickBanner/TodayTalkPickBanner.tsx b/src/components/molecules/TopBanner/TodayTalkPickBanner/TodayTalkPickBanner.tsx
index c6f342f8..671fa9ef 100644
--- a/src/components/molecules/TopBanner/TodayTalkPickBanner/TodayTalkPickBanner.tsx
+++ b/src/components/molecules/TopBanner/TodayTalkPickBanner/TodayTalkPickBanner.tsx
@@ -2,7 +2,8 @@ import React from 'react';
import { PATH } from '@/constants/path';
import { useNavigate } from 'react-router-dom';
import { TodayTalkPick } from '@/types/talk-pick';
-import { Check } from '@/assets';
+import { Check, CheckSmall } from '@/assets';
+import useIsMobile from '@/hooks/common/useIsMobile';
import {
bannerBtnStyling,
bannerChipStyling,
@@ -16,7 +17,7 @@ interface TodayTalkPickBannerProps {
const TodayTalkPickBanner = ({ talkPick }: TodayTalkPickBannerProps) => {
const navigate = useNavigate();
-
+ const isMobile = useIsMobile();
const onClickBanner = () => {
navigate(`/${PATH.TODAY_TALKPICK}`, {
state: { talkPickId: talkPick?.id, isTodayTalkPick: true },
@@ -31,8 +32,8 @@ const TodayTalkPickBanner = ({ talkPick }: TodayTalkPickBannerProps) => {
onClick={onClickBanner}
>
>;
+ selectedValue: ToggleGroupValue;
+ setSelectedValue: React.Dispatch>;
activeTab: 'μΈκΈ°' | '컀ν' | 'μ·¨ν₯' | 'μλμ»΅';
setActiveTab: React.Dispatch<
React.SetStateAction<'μΈκΈ°' | '컀ν' | 'μ·¨ν₯' | 'μλμ»΅'>
>;
+ isMobile?: boolean;
}
const BalanceGameList = ({
@@ -23,38 +30,74 @@ const BalanceGameList = ({
setSelectedValue,
activeTab,
setActiveTab,
+ isMobile = false,
}: ContentListProps) => {
const [visibleItems, setVisibleItems] = useState(4);
+ const navigate = useNavigate();
- const handleLoadMore = () => {
+ const handleItemClick = useCallback(
+ (gameId: number) => {
+ if (!gameId || gameId <= 0) {
+ alert(ERROR.GAME.NOT_EXIST);
+ return;
+ }
+ navigate(`/balancegame/${gameId}`);
+ },
+ [navigate],
+ );
+
+ const handleLoadMore = useCallback(() => {
setVisibleItems((prev) => Math.min(prev + 6, contents.length));
- };
+ }, [contents.length]);
+
+ const handleToggleChange = useCallback(
+ (value: ToggleGroupValue) => {
+ setSelectedValue(value);
+ },
+ [setSelectedValue],
+ );
return (
-
{talkPick?.title}
diff --git a/src/components/molecules/TopBanner/TopBanner.style.ts b/src/components/molecules/TopBanner/TopBanner.style.ts index 6a667102..c9d6eef1 100644 --- a/src/components/molecules/TopBanner/TopBanner.style.ts +++ b/src/components/molecules/TopBanner/TopBanner.style.ts @@ -5,6 +5,9 @@ export const bannerStyling = css({ width: '100%', overflow: 'hidden', position: 'relative', + '@media (max-width: 430px)': { + height: '227px', + }, }); export const getBannerMovement = (idx: number) => @@ -25,19 +28,35 @@ export const dotWrapperStyling = css({ bottom: '20px', gap: '13px', position: 'absolute', + '@media (max-width: 430px)': { + bottom: '14px', + gap: '5px', + }, }); export const dotStyling = css({ + all: 'unset', width: '10px', height: '10px', borderRadius: '50%', - backgroundColor: color.GY[4], + backgroundColor: '#555555', transition: '0.5s ease-in-out', cursor: 'pointer', + display: 'inline-block', + '@media (max-width: 430px)': { + width: '4px', + height: '4px', + borderRadius: '50%', + }, }); export const activeDotStyling = css({ width: '79px', borderRadius: '10px', backgroundColor: color.GY[2], + '@media (max-width: 430px)': { + width: '32px', + height: '4px', + borderRadius: '5px', + }, }); diff --git a/src/components/molecules/VotePrototype/VotePrototype.style.ts b/src/components/molecules/VotePrototype/VotePrototype.style.ts index 093393a7..5e8b48b5 100644 --- a/src/components/molecules/VotePrototype/VotePrototype.style.ts +++ b/src/components/molecules/VotePrototype/VotePrototype.style.ts @@ -39,12 +39,13 @@ export const loggedOutContainerStyling = css({ display: 'flex', position: 'absolute', top: '90px', - left: '-100px', + left: '50%', + transform: 'translateX(-50%)', width: '1215px', height: '260px', backdropFilter: 'blur(11px)', backgroundColor: 'rgba(255, 255, 255, 0.01)', - zIndex: 1, + zIndex: '1', }); export const toastModalStyling = css({ diff --git a/src/components/molecules/VotePrototype/VotePrototype.tsx b/src/components/molecules/VotePrototype/VotePrototype.tsx index 1bc360eb..fd7757ab 100644 --- a/src/components/molecules/VotePrototype/VotePrototype.tsx +++ b/src/components/molecules/VotePrototype/VotePrototype.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { NOTICE } from '@/constants/message'; +import { PATH } from '@/constants/path'; import { VoteOption, MyVoteOption } from '@/types/vote'; import Button from '@/components/atoms/Button/Button'; import VoteBar from '@/components/atoms/VoteBar/VoteBar'; @@ -71,7 +72,7 @@ const VotePrototype: React.FC = ({
localStorage.setItem(`talkpick_${talkPickId}`, voteOption);
showToastModal(NOTICE.REQUIRED.LOGIN, () => {
- navigate('/login', { state: { talkPickId } });
+ navigate(`/${PATH.LOGIN}`, { state: { talkPickId } });
});
}
};
diff --git a/src/components/organisms/BalanceGameCreation/BalanceGameCreation.style.ts b/src/components/organisms/BalanceGameCreation/BalanceGameCreation.style.ts
index 0aeecbc6..e5ac9231 100644
--- a/src/components/organisms/BalanceGameCreation/BalanceGameCreation.style.ts
+++ b/src/components/organisms/BalanceGameCreation/BalanceGameCreation.style.ts
@@ -29,3 +29,11 @@ export const navigationContainer = css({
width: '100%',
justifyContent: 'center',
});
+
+export const toastModalStyling = css({
+ position: 'fixed',
+ top: '110px',
+ left: '50%',
+ transform: 'translate(-50%)',
+ zIndex: '1000',
+});
diff --git a/src/components/organisms/BalanceGameCreation/BalanceGameCreation.tsx b/src/components/organisms/BalanceGameCreation/BalanceGameCreation.tsx
index 7193abf7..61a29dfd 100644
--- a/src/components/organisms/BalanceGameCreation/BalanceGameCreation.tsx
+++ b/src/components/organisms/BalanceGameCreation/BalanceGameCreation.tsx
@@ -5,7 +5,8 @@ import DraftPostButton from '@/components/atoms/DraftPostButton/DraftPostButton'
import { BalanceGameSet } from '@/types/game';
import { useBalanceGameCreation } from '@/hooks/game/useBalanceGameCreation';
import GameNavigationSection from '@/components/molecules/GameNavigationSection/GameNavigationSection';
-import { useStageNavigation } from '@/hooks/game/useStageNavigation';
+import useToastModal from '@/hooks/modal/useToastModal';
+import ToastModal from '@/components/atoms/ToastModal/ToastModal';
import * as S from './BalanceGameCreation.style';
export interface BalanceGameCreationProps {
@@ -30,24 +31,23 @@ const BalanceGameCreation = ({
loadedGames,
}: BalanceGameCreationProps) => {
const totalStage = 10;
-
- const { currentStage, clearInput, handleNextStage, handlePrevStage } =
- useStageNavigation(totalStage);
+ const { isVisible, modalText, showToastModal } = useToastModal();
const {
games,
+ currentStage,
currentOptions,
currentDescription,
- handleOptionChange,
- handleDescriptionChange,
+ clearInput,
+ handleNextStage,
+ handlePrevStage,
handleStageDescriptionChange,
- } = useBalanceGameCreation(currentStage, loadedGames, totalStage);
+ handleOptionUpdate,
+ } = useBalanceGameCreation(showToastModal, totalStage, loadedGames);
useEffect(() => {
- if (currentOptions.length > 0) {
- onGamesUpdate(games);
- }
- }, [currentOptions, games, onGamesUpdate]);
+ onGamesUpdate(games);
+ }, [games, onGamesUpdate]);
return (
);
};
diff --git a/src/components/organisms/BalanceGameList/BalanceGameList.style.ts b/src/components/organisms/BalanceGameList/BalanceGameList.style.ts
index 5207accf..4c3840ac 100644
--- a/src/components/organisms/BalanceGameList/BalanceGameList.style.ts
+++ b/src/components/organisms/BalanceGameList/BalanceGameList.style.ts
@@ -3,25 +3,44 @@ import typo from '@/styles/typo';
export const containerStyle = css({
width: '1158px',
+ '@media (max-width: 430px)': {
+ maxWidth: '335px',
+ alignItems: 'center',
+ justifyContent: 'center',
+ display: 'flex',
+ flexDirection: 'column',
+ },
});
-export const titleWrapStyle = css(typo.Title, {
+export const titleWrapStyle = css({
+ ...typo.Title,
display: 'flex',
justifyContent: 'space-between',
- alignItems: 'center',
marginBottom: '20px',
+ '@media (max-width: 430px)': {
+ ...typo.Mobile.Text.Bold_16,
+ marginBottom: 0,
+ height: '50px',
+ width: '100%',
+ },
});
export const barStyle = css({
margin: '48px 0',
display: 'flex',
justifyContent: 'center',
+ '@media (max-width: 430px)': {
+ margin: '0 0 18px 0',
+ },
});
export const contentStyle = css({
display: 'grid',
gridTemplateColumns: 'repeat(2, 1fr)',
gap: '20px',
+ '@media (max-width: 430px)': {
+ gap: '9px',
+ },
});
export const loadMoreWrapperStyle = css({
@@ -29,4 +48,7 @@ export const loadMoreWrapperStyle = css({
display: 'flex',
justifyContent: 'center',
padding: '62px 0 95px 0',
+ '@media (max-width: 430px)': {
+ padding: '16px 0',
+ },
});
diff --git a/src/components/organisms/BalanceGameList/BalanceGameList.tsx b/src/components/organisms/BalanceGameList/BalanceGameList.tsx
index 2a04c5ce..37bc8a1f 100644
--- a/src/components/organisms/BalanceGameList/BalanceGameList.tsx
+++ b/src/components/organisms/BalanceGameList/BalanceGameList.tsx
@@ -1,20 +1,27 @@
-import React, { useState } from 'react';
+/* eslint-disable no-alert */
+/* eslint-disable @typescript-eslint/no-unsafe-member-access */
+import React, { useCallback, useState } from 'react';
import { AngleSmallDown } from '@/assets';
import ToggleGroup from '@/components/atoms/ToggleGroup/ToggleGroup';
import Button from '@/components/atoms/Button/Button';
import CategoryBar from '@/components/molecules/CategoryBar/CategoryBar';
import ContentsButton from '@/components/molecules/ContentsButton/ContentsButton';
import { GameContent } from '@/types/game';
+import { ToggleGroupValue } from '@/types/toggle';
+import { useNavigate } from 'react-router-dom';
+import { ERROR } from '@/constants/message';
+import MobileToggleGroup from '@/components/mobile/atoms/MobileToggleGroup/MobileToggleGroup';
import * as S from './BalanceGameList.style';
export interface ContentListProps {
contents: GameContent[];
- selectedValue: string;
- setSelectedValue: React.Dispatchdiff --git a/src/components/molecules/TopBanner/TopBanner.style.ts b/src/components/molecules/TopBanner/TopBanner.style.ts index 6a667102..c9d6eef1 100644 --- a/src/components/molecules/TopBanner/TopBanner.style.ts +++ b/src/components/molecules/TopBanner/TopBanner.style.ts @@ -5,6 +5,9 @@ export const bannerStyling = css({ width: '100%', overflow: 'hidden', position: 'relative', + '@media (max-width: 430px)': { + height: '227px', + }, }); export const getBannerMovement = (idx: number) => @@ -25,19 +28,35 @@ export const dotWrapperStyling = css({ bottom: '20px', gap: '13px', position: 'absolute', + '@media (max-width: 430px)': { + bottom: '14px', + gap: '5px', + }, }); export const dotStyling = css({ + all: 'unset', width: '10px', height: '10px', borderRadius: '50%', - backgroundColor: color.GY[4], + backgroundColor: '#555555', transition: '0.5s ease-in-out', cursor: 'pointer', + display: 'inline-block', + '@media (max-width: 430px)': { + width: '4px', + height: '4px', + borderRadius: '50%', + }, }); export const activeDotStyling = css({ width: '79px', borderRadius: '10px', backgroundColor: color.GY[2], + '@media (max-width: 430px)': { + width: '32px', + height: '4px', + borderRadius: '5px', + }, }); diff --git a/src/components/molecules/VotePrototype/VotePrototype.style.ts b/src/components/molecules/VotePrototype/VotePrototype.style.ts index 093393a7..5e8b48b5 100644 --- a/src/components/molecules/VotePrototype/VotePrototype.style.ts +++ b/src/components/molecules/VotePrototype/VotePrototype.style.ts @@ -39,12 +39,13 @@ export const loggedOutContainerStyling = css({ display: 'flex', position: 'absolute', top: '90px', - left: '-100px', + left: '50%', + transform: 'translateX(-50%)', width: '1215px', height: '260px', backdropFilter: 'blur(11px)', backgroundColor: 'rgba(255, 255, 255, 0.01)', - zIndex: 1, + zIndex: '1', }); export const toastModalStyling = css({ diff --git a/src/components/molecules/VotePrototype/VotePrototype.tsx b/src/components/molecules/VotePrototype/VotePrototype.tsx index 1bc360eb..fd7757ab 100644 --- a/src/components/molecules/VotePrototype/VotePrototype.tsx +++ b/src/components/molecules/VotePrototype/VotePrototype.tsx @@ -1,6 +1,7 @@ import React, { useEffect, useState } from 'react'; import { useNavigate } from 'react-router-dom'; import { NOTICE } from '@/constants/message'; +import { PATH } from '@/constants/path'; import { VoteOption, MyVoteOption } from '@/types/vote'; import Button from '@/components/atoms/Button/Button'; import VoteBar from '@/components/atoms/VoteBar/VoteBar'; @@ -71,7 +72,7 @@ const VotePrototype: React.FC
@@ -67,11 +67,12 @@ const BalanceGameCreation = ({
onImageDelete={() => onImageDelete(currentStage, 0)}
choiceInputProps={{
value: currentOptions[0]?.name || '',
- onChange: handleOptionChange('A'),
+ onChange: (e) => handleOptionUpdate('A', 'name', e.target.value),
}}
infoInputProps={{
value: currentOptions[0]?.description || '',
- onChange: (e) => handleDescriptionChange('A', e),
+ onChange: (e) =>
+ handleOptionUpdate('A', 'description', e.target.value),
}}
clearInput={clearInput}
/>
@@ -82,11 +83,12 @@ const BalanceGameCreation = ({
onImageDelete={() => onImageDelete(currentStage, 1)}
choiceInputProps={{
value: currentOptions[1]?.name || '',
- onChange: handleOptionChange('B'),
+ onChange: (e) => handleOptionUpdate('B', 'name', e.target.value),
}}
infoInputProps={{
value: currentOptions[1]?.description || '',
- onChange: (e) => handleDescriptionChange('B', e),
+ onChange: (e) =>
+ handleOptionUpdate('B', 'description', e.target.value),
}}
clearInput={clearInput}
/>
@@ -103,6 +105,9 @@ const BalanceGameCreation = ({
handleCompleteClick={handleCompleteClick}
/>
+
+ {isVisible && {modalText} }
+
μ£Όμ λ³ λ°Έλ°μ€ κ²μ
-
-
{contents.slice(0, visibleItems).map((content) => (
handleItemClick(content.id)}
/>
))}
{visibleItems < contents.length && (
}
>
diff --git a/src/components/organisms/CommentsSection/CommentsSection.tsx b/src/components/organisms/CommentsSection/CommentsSection.tsx
index 30e7195e..1f3b1ff1 100644
--- a/src/components/organisms/CommentsSection/CommentsSection.tsx
+++ b/src/components/organisms/CommentsSection/CommentsSection.tsx
@@ -9,12 +9,11 @@ import Pagination from '@/components/atoms/Pagination/Pagination';
import TextArea from '@/components/molecules/TextArea/TextArea';
import Toggle from '@/components/atoms/Toggle/Toggle';
import ToastModal from '@/components/atoms/ToastModal/ToastModal';
-import ToggleGroup, {
- ToggleGroupItem,
-} from '@/components/atoms/ToggleGroup/ToggleGroup';
+import ToggleGroup from '@/components/atoms/ToggleGroup/ToggleGroup';
import { NOTICE } from '@/constants/message';
import CommentItem from '@/components/molecules/CommentItem/CommentItem';
import { useCreateCommentMutation } from '@/hooks/api/comment/useCreateCommentMutation';
+import { ToggleGroupItem, ToggleGroupValue } from '@/types/toggle';
import * as S from './CommentsSection.style';
export interface CommentsSectionProps {
@@ -22,8 +21,8 @@ export interface CommentsSectionProps {
talkPickWriter: string;
commentList?: CommentsPagination;
toggleItem: ToggleGroupItem[];
- selectedValue: string;
- setToggleValue: React.Dispatch>;
+ selectedValue: ToggleGroupValue;
+ setToggleValue: React.Dispatch>;
selectedPage: number;
handlePageChange: (page: number) => void;
voted: boolean;
@@ -59,7 +58,9 @@ const CommentsSection = ({
{ content: commentValue },
{
onSuccess: () => {
- if (selectedValue === 'trend') setToggleValue('recent');
+ if (selectedValue.field === 'views') {
+ setToggleValue({ field: 'createdAt', order: 'desc' });
+ }
handlePageChange(1);
},
},
diff --git a/src/components/organisms/Header/Header.style.ts b/src/components/organisms/Header/Header.style.ts
index 09215c69..b8373bd1 100644
--- a/src/components/organisms/Header/Header.style.ts
+++ b/src/components/organisms/Header/Header.style.ts
@@ -2,49 +2,58 @@ import { css } from '@emotion/react';
import color from '@/styles/color';
import typo from '@/styles/typo';
-export const containerStyle = css({
- width: '100%',
- padding: '0 200px',
- display: 'flex',
- alignItems: 'center',
- justifyContent: 'space-between',
- backgroundColor: color.WT,
- boxShadow: '0px 4px 11px rgba(0, 0, 0, 0.1)',
- position: 'fixed',
- top: 0,
- left: 0,
- zIndex: 1000,
- height: '100px',
-});
+export const containerStyle = css`
+ width: 100%;
+ padding: 0 200px;
+ height: 100px;
+ @media (max-width: 430px) {
+ padding: 0 20px;
+ height: 55px;
+ }
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background-color: ${color.WT};
+ box-shadow: 0px 4px 11px rgba(0, 0, 0, 0.1);
+ position: fixed;
+ top: 0;
+ left: 0;
+ z-index: 1000;
+`;
-export const logoStyle = css({
- display: 'flex',
- alignItems: 'center',
-});
+export const logoStyle = css`
+ display: flex;
+ align-items: center;
+ @media (max-width: 430px) {
+ flex: 1;
+ justify-content: center;
+ }
+`;
-export const IconStyle = css({
- marginRight: '8px',
-});
+export const LoginButtonStyle = css`
+ ${typo.Main.SemiBold};
+ background: none;
+ border: none;
+ cursor: pointer;
+ color: ${color.GY[1]};
+ width: 100.24px;
+ height: 32.92px;
+ margin-right: 7.76px;
+`;
-export const WriteButtonStyle = css({
- margin: '27px 28px 24px 0',
-});
+export const rightContainerStyle = css`
+ display: flex;
+ align-items: center;
+ @media screen and (max-width: 430px) {
+ flex: 1;
+ justify-content: flex-end;
+ }
+`;
-export const LoginButtonStyle = css(typo.Main.SemiBold, {
- background: 'none',
- border: 'none',
- cursor: 'pointer',
- color: color.GY[1],
- width: '100.24px',
- height: '32.92px',
- marginRight: '7.76px',
-});
+export const notificationStyle = css`
+ margin-left: 42.93px;
+`;
-export const rightContainerStyle = css({
- display: 'flex',
- alignItems: 'center',
-});
-
-export const notificationStyle = css({
- marginLeft: '42.93px',
-});
+export const listButtonStyle = css`
+ cursor: pointer;
+`;
diff --git a/src/components/organisms/Header/Header.tsx b/src/components/organisms/Header/Header.tsx
index 91ffcbb8..b4e63d28 100644
--- a/src/components/organisms/Header/Header.tsx
+++ b/src/components/organisms/Header/Header.tsx
@@ -3,14 +3,14 @@
/* eslint-disable react-hooks/exhaustive-deps */
/* eslint-disable @typescript-eslint/no-misused-promises */
/* eslint-disable no-console */
-import React from 'react';
+import React, { useState } from 'react';
import { useNavigate, Link } from 'react-router-dom';
import { useLogoutMutation } from '@/hooks/api/member/useLogoutMutation';
import { useNewSelector } from '@/store';
import { useParseJwt } from '@/hooks/common/useParseJwt';
import { useMemberQuery } from '@/hooks/api/member/useMemberQuery';
import { selectAccessToken } from '@/store/auth';
-import { Logo, DefaultProfile } from '@/assets';
+import { Logo, DefaultProfile, ListIcon, LogoSmall } from '@/assets';
// import Button from '@/components/atoms/Button/Button';
// import Notification from '@/components/molecules/Notification/Notification';
import ProfileIcon from '@/components/atoms/ProfileIcon/ProfileIcon';
@@ -20,13 +20,22 @@ import ProfileIcon from '@/components/atoms/ProfileIcon/ProfileIcon';
import { MenuItem } from '@/components/atoms/MenuTap/MenuTap';
import CreateDropdown from '@/components/atoms/CreateDropdown/CreateDropdown';
import { PATH } from '@/constants/path';
+import MobileSideMenu from '@/components/mobile/atoms/MobileSideMenu/MobileSideMenu';
+import useIsMobile from '@/hooks/common/useIsMobile';
import * as S from './Header.style';
const Header = () => {
const navigate = useNavigate();
- const accessToken = useNewSelector(selectAccessToken);
+ const isMobile = useIsMobile();
+ const [isMenuOpen, setIsMenuOpen] = useState(false);
+ const accessToken = useNewSelector(selectAccessToken) ?? '';
const logout = useLogoutMutation();
const { member } = useMemberQuery(useParseJwt(accessToken)?.memberId);
+
+ const handleMenuToggle = () => {
+ setIsMenuOpen((prev) => !prev);
+ };
+
// FIXME:Notification κ΄λ ¨ μ½λ
// const [isNew, setIsNew] = useState(false);
// const [messages, setMessages] = useState([]);
@@ -80,6 +89,7 @@ const Header = () => {
// ];
const handleLoginButton = () => {
+ setIsMenuOpen(false);
if (accessToken) {
logout.mutate();
} else {
@@ -137,36 +147,59 @@ const Header = () => {
return (
);
};
-
export default Header;
diff --git a/src/components/organisms/InfoList/InfoList.tsx b/src/components/organisms/InfoList/InfoList.tsx
index de4bf45e..1dbdef5a 100644
--- a/src/components/organisms/InfoList/InfoList.tsx
+++ b/src/components/organisms/InfoList/InfoList.tsx
@@ -1,15 +1,16 @@
-import React from 'react';
-import InfoBox, { InfoBoxProps } from '@/components/molecules/InfoBox/InfoBox';
+import React, { useMemo } from 'react';
+import InfoBox from '@/components/molecules/InfoBox/InfoBox';
+import { useNavigate } from 'react-router-dom';
import * as S from './InfoList.style';
export interface InfoItem {
id: number;
editedAt: string;
- title: InfoBoxProps['title'];
- prefix: InfoBoxProps['prefix'];
- commentContent: InfoBoxProps['commentContent'];
- commentCount: InfoBoxProps['commentCount'];
- bookmarks: InfoBoxProps['bookmarks'];
+ title: string;
+ prefix: string;
+ commentContent: string;
+ commentCount: number;
+ bookmarks: number;
}
export interface InfoListProps {
@@ -17,16 +18,24 @@ export interface InfoListProps {
}
const InfoList = ({ items = [] }: InfoListProps) => {
- const groupedItems = items.reduce(
- (acc, item) => {
- if (!acc[item.editedAt]) {
- acc[item.editedAt] = [];
- }
- acc[item.editedAt].push(item);
- return acc;
- },
- {} as Record,
- );
+ const navigate = useNavigate();
+
+ const groupedItems = useMemo(() => {
+ return items.reduce>(
+ (acc, { editedAt, ...rest }) => {
+ if (!acc[editedAt]) {
+ acc[editedAt] = [];
+ }
+ acc[editedAt].push({ editedAt, ...rest });
+ return acc;
+ },
+ {},
+ );
+ }, [items]);
+
+ const handleItemClick = (id: number) => {
+ navigate(`/talkpick/${id}`);
+ };
return (
-
-
-
-
- {/*
+
+ ) : (
+ <>
+
- {accessToken ? (
-
+
+ {isMenuOpen && (
+
-
+
+ {/*
+
+ )}
+ {accessToken ? (
+
+
@@ -34,17 +43,27 @@ const InfoList = ({ items = [] }: InfoListProps) => {
,
- );
+ const navigate = useNavigate();
+
+ const groupedItems = useMemo(() => {
+ return items.reduce(
+ (acc, { editedAt, ...rest }) => {
+ if (!acc[editedAt]) {
+ acc[editedAt] = [];
+ }
+ acc[editedAt].push({ editedAt, ...rest });
+ return acc;
+ },
+ {} as Record,
+ );
+ }, [items]);
+
+ const handleItemClick = (gameId: number) => {
+ navigate(`/balancegame/${gameId}`);
+ };
return (
{editedAt}
))}
diff --git a/src/components/organisms/MyBalanceGameList/MyBalanceGameList.tsx b/src/components/organisms/MyBalanceGameList/MyBalanceGameList.tsx
index f0e817f3..f2483630 100644
--- a/src/components/organisms/MyBalanceGameList/MyBalanceGameList.tsx
+++ b/src/components/organisms/MyBalanceGameList/MyBalanceGameList.tsx
@@ -1,20 +1,19 @@
-import React from 'react';
-import ContentsButton, {
- ContentsButtonProps,
-} from '@/components/molecules/ContentsButton/ContentsButton';
+import React, { useMemo } from 'react';
+import ContentsButton from '@/components/molecules/ContentsButton/ContentsButton';
+import { useNavigate } from 'react-router-dom';
import * as S from './MyBalanceGameList.style';
export interface MyBalanceGameItem {
- id: number;
+ gameId: number;
editedAt: string;
- optionAImg: ContentsButtonProps['images'][0];
- optionBImg: ContentsButtonProps['images'][1];
- title: ContentsButtonProps['title'];
- mainTag: ContentsButtonProps['mainTag'];
- subTag: ContentsButtonProps['subTag'];
- bookmarked?: ContentsButtonProps['bookmarked'];
- showBookmark?: ContentsButtonProps['showBookmark'];
- size?: ContentsButtonProps['size'];
+ optionAImg: string;
+ optionBImg: string;
+ title: string;
+ mainTagName: string;
+ subTag: string;
+ bookmarked?: boolean;
+ showBookmark?: boolean;
+ size?: 'large' | 'medium' | 'small';
}
export interface MyBalanceGameListProps {
@@ -22,16 +21,24 @@ export interface MyBalanceGameListProps {
}
const MyBalanceGameList = ({ items = [] }: MyBalanceGameListProps) => {
- const groupedItems = items.reduce(
- (acc, item) => {
- if (!acc[item.editedAt]) {
- acc[item.editedAt] = [];
- }
- acc[item.editedAt].push(item);
- return acc;
- },
- {} as Record-
- {groupedItems[editedAt].map((infoItem) => (
-
-
-
-
- ))}
+ {groupedItems[editedAt].map(
+ ({
+ id,
+ title,
+ prefix,
+ commentContent,
+ commentCount,
+ bookmarks,
+ }) => (
+ -
+
handleItemClick(id)} + /> +
+ ),
+ )}
@@ -39,22 +46,31 @@ const MyBalanceGameList = ({ items = [] }: MyBalanceGameListProps) => {
,
- );
+ const navigate = useNavigate();
+
+ const groupedItems = useMemo(() => {
+ return items.reduce>(
+ (acc, { editedAt, ...rest }) => {
+ if (!acc[editedAt]) {
+ acc[editedAt] = [];
+ }
+ acc[editedAt].push({ editedAt, ...rest });
+ return acc;
+ },
+ {},
+ );
+ }, [items]);
+
+ const handleItemClick = (id: number) => {
+ navigate(`/talkpick/${id}`);
+ };
return (
- (
- initialSelectedGroupValue,
- );
- const [options, setOptions] = useState(optionSets[selectedGroup]);
-
- useEffect(() => {
- setOptions(optionSets[selectedGroup]);
- }, [selectedGroup]);
-
- const handleGroupSelect = (value: string) => {
- setSelectedGroup(value as OptionKeys);
- onGroupSelect(value as OptionKeys);
- };
-
- const handleOptionSelect = (option: string) => {
- onOptionSelect(option);
- };
+ const selectGroupItems: [
+ SelectGroupItem,
+ SelectGroupItem,
+ ] = [
+ { label: 'ν‘ν½', value: OptionKeys.TALK_PICK },
+ { label: 'λ°Έλ°μ€ κ²μ', value: OptionKeys.BALANCE_GAME },
+ ];
return (
{date}
))}
diff --git a/src/components/organisms/MyContentList/MyContentList.tsx b/src/components/organisms/MyContentList/MyContentList.tsx
index ced0bd78..90193626 100644
--- a/src/components/organisms/MyContentList/MyContentList.tsx
+++ b/src/components/organisms/MyContentList/MyContentList.tsx
@@ -1,17 +1,16 @@
-import React from 'react';
-import MyContentBox, {
- MyContentBoxProps,
-} from '@/components/molecules/MyContentBox/MyContentBox';
+import React, { useMemo } from 'react';
+import MyContentBox from '@/components/molecules/MyContentBox/MyContentBox';
+import { useNavigate } from 'react-router-dom';
import * as S from './MyContentList.style';
export interface MyContentItem {
id: number;
editedAt: string;
- title: MyContentBoxProps['title'];
- commentCount: MyContentBoxProps['commentCount'];
- bookmarks: MyContentBoxProps['bookmarks'];
- showBookmark?: MyContentBoxProps['showBookmark'];
- bookmarked?: MyContentBoxProps['bookmarked'];
+ title: string;
+ commentCount: number;
+ bookmarks: number;
+ showBookmark?: boolean;
+ bookmarked?: boolean;
}
export interface MyContentListProps {
@@ -19,38 +18,56 @@ export interface MyContentListProps {
}
const MyContentList = ({ items = [] }: MyContentListProps) => {
- const groupedItems = items.reduce(
- (acc, item) => {
- if (!acc[item.editedAt]) {
- acc[item.editedAt] = [];
- }
- acc[item.editedAt].push(item);
- return acc;
- },
- {} as Record-
- {groupedItems[date].map((balanceGameItem) => (
-
-
-
-
- ))}
+ {groupedItems[date].map(
+ ({
+ gameId,
+ optionAImg,
+ optionBImg,
+ title,
+ mainTagName,
+ subTag,
+ bookmarked,
+ showBookmark,
+ }) => (
+ -
+
handleItemClick(gameId)} + /> +
+ ),
+ )}
- {Object.keys(groupedItems).map((date) => (
-
+
);
};
diff --git a/src/components/organisms/OptionBar/OptionBar.style.ts b/src/components/organisms/OptionBar/OptionBar.style.ts
index 9fe840b8..27a4b02e 100644
--- a/src/components/organisms/OptionBar/OptionBar.style.ts
+++ b/src/components/organisms/OptionBar/OptionBar.style.ts
@@ -1,8 +1,9 @@
import { css } from '@emotion/react';
-export const container = css`
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: 20px;
-`;
+export const container = css({
+ display: 'flex',
+ flexDirection: 'column',
+ width: '912px',
+ alignItems: 'center',
+ gap: '20px',
+});
diff --git a/src/components/organisms/OptionBar/OptionBar.tsx b/src/components/organisms/OptionBar/OptionBar.tsx
index 1ef59ac1..20459143 100644
--- a/src/components/organisms/OptionBar/OptionBar.tsx
+++ b/src/components/organisms/OptionBar/OptionBar.tsx
@@ -1,54 +1,45 @@
-import React, { useState, useEffect } from 'react';
+import React from 'react';
import SelectGroup, {
SelectGroupItem,
} from '@/components/atoms/SelectGroup/SelectGroup';
import OptionSelector from '@/components/molecules/OptionSelector/OptionSelector';
-import { optionSets, OptionKeys } from '@/constants/optionSets';
+import { OptionKeys } from '@/constants/optionSets';
import * as S from './OptionBar.style';
export interface OptionBarProps {
- selectGroupItems: SelectGroupItem[];
- initialSelectedGroupValue?: OptionKeys;
+ selectedGroup: OptionKeys;
selectedOption: string;
onGroupSelect: (value: OptionKeys) => void;
onOptionSelect: (option: string) => void;
+ options: { label: string; value: string }[];
}
+
const OptionBar = ({
- selectGroupItems,
- initialSelectedGroupValue = OptionKeys.TALK_PICK,
+ selectedGroup,
selectedOption,
onGroupSelect,
onOptionSelect,
+ options,
}: OptionBarProps) => {
- const [selectedGroup, setSelectedGroup] = useState
+
+ {Object.entries(groupedItems).map(([date, contentItems]) => (
+
{date}
+
))}
- -
- {groupedItems[date].map((contentItem) => (
-
-
-
-
- ))}
+ {contentItems.map(
+ ({
+ id,
+ title,
+ commentCount,
+ bookmarks,
+ showBookmark,
+ bookmarked,
+ }) => (
+ -
+
handleItemClick(id)} + /> +
+ ),
+ )}
- {isLoading ? (
-
- ) : (
+export interface LoadedSideBarProps {
+ isLoading: false;
+ nickname: string;
+ postsCount: number;
+ bookmarkedPostsCount: number;
+ profileImageUrl?: string;
+}
+
+type SideBarProps = LoadingProps | LoadedSideBarProps;
+
+const isLoadedSideBarProps = (
+ props: SideBarProps,
+): props is LoadedSideBarProps => {
+ return !props.isLoading;
+};
+
+const SideBar = (props: SideBarProps) => {
+ const { isLoading } = props;
+
+ if (isLoading) {
+ return ;
+ }
+
+ if (isLoadedSideBarProps(props)) {
+ const { profileImageUrl, nickname, postsCount, bookmarkedPostsCount } =
+ props;
+
+ return (
+
>;
+ selectedValue: ToggleGroupValue;
+ setToggleValue: React.Dispatch>;
selectedPage: number;
handlePageChange: (page: number) => void;
}
diff --git a/src/components/organisms/TalkPickSection/TalkPickSection.style.ts b/src/components/organisms/TalkPickSection/TalkPickSection.style.ts
index 1512592d..bf7931fe 100644
--- a/src/components/organisms/TalkPickSection/TalkPickSection.style.ts
+++ b/src/components/organisms/TalkPickSection/TalkPickSection.style.ts
@@ -73,12 +73,17 @@ export const talkPickView = css(typo.Number.Medium, {
color: color.MAIN,
});
-export const talkPickContent = css(typo.Main.Medium, {
+export const talkPickContent = css({
width: '100%',
paddingTop: '40px',
paddingLeft: '173px',
paddingRight: '173px',
borderTop: '1px solid #F4F4F4',
+});
+
+export const talkPickContentTextStyling = css(typo.Main.Medium, {
+ width: '100%',
+ whiteSpace: 'pre-wrap',
color: color.BK,
});
diff --git a/src/components/organisms/TalkPickSection/TalkPickSection.tsx b/src/components/organisms/TalkPickSection/TalkPickSection.tsx
index f8239ac9..edaa37f2 100644
--- a/src/components/organisms/TalkPickSection/TalkPickSection.tsx
+++ b/src/components/organisms/TalkPickSection/TalkPickSection.tsx
@@ -10,6 +10,7 @@ import {
} from '@/assets';
import { useNavigate } from 'react-router-dom';
import { TalkPickDetail } from '@/types/talk-pick';
+import { PATH } from '@/constants/path';
import { ERROR, SUCCESS } from '@/constants/message';
import { formatDate, formatNumber } from '@/utils/formatData';
import Button from '@/components/atoms/Button/Button';
@@ -93,7 +94,7 @@ const TalkPickSection = ({
{
label: 'μμ ',
onClick: () => {
- navigate('/post/create', { state: { talkPick } });
+ navigate(`/${PATH.CREATE.TALK_PICK}`, { state: { talkPick } });
},
},
{
@@ -192,7 +193,9 @@ const TalkPickSection = ({
+
- )}
-
-
{talkPick?.baseFields.content}
+
+ {talkPick?.baseFields.content}
+
{talkPick?.imgUrls.length !== 0 && (
{talkPick?.imgUrls.map((url, idx) => (
diff --git a/src/constants/api.ts b/src/constants/api.ts
index f964494b..d98a6bba 100644
--- a/src/constants/api.ts
+++ b/src/constants/api.ts
@@ -62,7 +62,7 @@ export const END_POINT = {
// search API
SEARCH_GAME: (query: string, page: number, size: number, sort: string) =>
- `/search/game?query=${query}&page=${page}&size=${size}&sort=${sort}`,
+ `/search/game-sets?query=${query}&page=${page}&size=${size}&sort=${sort}`,
SEARCH_TALKPICK: (query: string, page: number, size: number, sort: string) =>
`/talks/search?query=${query}&page=${page}&size=${size}&sort=${sort}`,
diff --git a/src/constants/message.ts b/src/constants/message.ts
index a116b756..befce25e 100644
--- a/src/constants/message.ts
+++ b/src/constants/message.ts
@@ -42,6 +42,25 @@ export const ERROR = {
MY_TALKPICK: 'λ³ΈμΈμ΄ μμ±ν ν‘ν½μ μ μ₯ν μ μμ΅λλ€.',
MY_GAME: 'λ³ΈμΈμ΄ λ§λ λ°Έλ°μ€κ²μμ μ μ₯ν μ μμ΅λλ€.',
},
+ TEMPGAME: {
+ LOAD: 'μμ μ μ₯ λ°μ΄ν°λ₯Ό λΆλ¬μ€λ λ° μ€ν¨νμ΅λλ€.',
+ SAVE: 'μμ μ μ₯μ μ€ν¨νμ΅λλ€. λ€μ μλν΄μ£ΌμΈμ.',
+ },
+ IMAGE: {
+ UPLOAD: 'μ΄λ―Έμ§ μ
λ‘λμ μ€ν¨νμ΅λλ€. λ€μ μλν΄μ£ΌμΈμ.',
+ DELETE: 'μ΄λ―Έμ§κ° μμ μ μ€ν¨νμ΅λλ€. λ€μ μλν΄μ£ΌμΈμ.',
+ },
+ CREATEGAME: {
+ EMPTY_DATA: 'κ²μ λ°μ΄ν°κ° μμ΅λλ€.',
+ FAIL: 'κ²μ μμ±μ μ€ν¨νμ΅λλ€.',
+ },
+ VALIDATE: {
+ GAME_IMAGE: 'Aμ Bμ μ΄λ―Έμ§κ° λͺ¨λ μκ±°λ λͺ¨λ μμ΄μΌ ν©λλ€!',
+ OPTION: 'λͺ¨λ μ΅μ
μ μ€λͺ
μ μ
λ ₯ν΄μ£ΌμΈμ!',
+ },
+ GAME: {
+ NOT_EXIST: 'μ ν¨νμ§ μμ κ²μμ
λλ€.',
+ },
} as const;
export const SUCCESS = {
@@ -68,6 +87,17 @@ export const SUCCESS = {
EDIT: 'μμ μλ£!',
SAVE: 'μμμ μ₯ μλ£!',
},
+ TEMPGAME: {
+ LOAD: 'μμ μ μ₯ λ°μ΄ν°λ₯Ό λΆλ¬μμ΅λλ€!',
+ SAVE: ' μμ μ μ₯μ΄ μλ£λμμ΅λλ€!',
+ },
+ IMAGE: {
+ UPLOAD: 'μ΄λ―Έμ§κ° μ
λ‘λ λμμ΅λλ€!',
+ DELETE: 'μ΄λ―Έμ§κ° μμ λμμ΅λλ€!',
+ },
+ CREATEGAME: {
+ CREATE: 'λ±λ‘λμμ΅λλ€!',
+ },
} as const;
export const NOTICE = {
diff --git a/src/constants/optionSets.ts b/src/constants/optionSets.ts
index 2887da92..aac76c44 100644
--- a/src/constants/optionSets.ts
+++ b/src/constants/optionSets.ts
@@ -3,12 +3,19 @@ export enum OptionKeys {
BALANCE_GAME = 'balanceGame',
}
-export const optionSets: Record = {
+export const optionSets: Record<
+ OptionKeys,
+ { label: string; value: string }[]
+> = {
[OptionKeys.TALK_PICK]: [
- 'λ΄κ° μ μ₯ν',
- 'λ΄κ° ν¬νν',
- 'λ΄κ° λκΈλ¨',
- 'λ΄κ° μμ±ν',
+ { label: 'λ΄κ° μ μ₯ν', value: 'bookmarks' },
+ { label: 'λ΄κ° ν¬νν', value: 'votes' },
+ { label: 'λ΄κ° λκΈλ¨', value: 'comments' },
+ { label: 'λ΄κ° μμ±ν', value: 'written' },
+ ],
+ [OptionKeys.BALANCE_GAME]: [
+ { label: 'λ΄κ° μ μ₯ν', value: 'bookmarks' },
+ { label: 'λ΄κ° ν¬νν', value: 'votes' },
+ { label: 'λ΄κ° λ§λ ', value: 'written' },
],
- [OptionKeys.BALANCE_GAME]: ['λ΄κ° μ μ₯ν', 'λ΄κ° ν¬νν', 'λ΄κ° λ§λ '],
};
diff --git a/src/hooks/api/game/useBestGameListQuery.ts b/src/hooks/api/game/useBestGameListQuery.ts
index 8b64fe43..7d3468f7 100644
--- a/src/hooks/api/game/useBestGameListQuery.ts
+++ b/src/hooks/api/game/useBestGameListQuery.ts
@@ -2,10 +2,11 @@ import { useQuery } from '@tanstack/react-query';
import { GameContent } from '@/types/game';
import { getBestGames } from '@/api/game';
-export const useBestGameList = (tagName: string) => {
+export const useBestGameList = (tagName: string, isEnabled: boolean) => {
const { data: bestGames, isLoading } = useQuery({
queryKey: ['bestGames', tagName],
queryFn: () => getBestGames(tagName),
+ enabled: isEnabled,
});
return { bestGames, isLoading };
};
diff --git a/src/hooks/api/game/useCreateBalanceGameMutation.ts b/src/hooks/api/game/useCreateBalanceGameMutation.ts
index 4272f741..db6b22dd 100644
--- a/src/hooks/api/game/useCreateBalanceGameMutation.ts
+++ b/src/hooks/api/game/useCreateBalanceGameMutation.ts
@@ -11,7 +11,6 @@ export const useCreateBalanceGameMutation = () => {
return response.data;
},
onSuccess: async (response) => {
- console.log('κ²μ μμ± μ±κ³΅');
await queryClient.invalidateQueries({
queryKey: ['games'],
});
@@ -26,7 +25,6 @@ export const useCreateBalanceGameMutation = () => {
): Promise => {
try {
const gameId = await mutation.mutateAsync(gameData);
- console.log('κ²μ μμ± μ±κ³΅, κ²μ ID:', gameId);
return gameId;
} catch (error) {
console.error('κ²μ μμ± μ€ μ€λ₯ λ°μ:', error);
diff --git a/src/hooks/api/game/useLatestGameListQuery.ts b/src/hooks/api/game/useLatestGameListQuery.ts
index 5ae4784f..ff20c9ac 100644
--- a/src/hooks/api/game/useLatestGameListQuery.ts
+++ b/src/hooks/api/game/useLatestGameListQuery.ts
@@ -2,10 +2,11 @@ import { useQuery } from '@tanstack/react-query';
import { GameContent } from '@/types/game';
import { getLatestGames } from '@/api/game';
-export const useLatestGameList = (tagName: string) => {
+export const useLatestGameList = (tagName: string, isEnabled: boolean) => {
const { data: latestGames, isLoading } = useQuery({
queryKey: ['latestGames', tagName],
queryFn: () => getLatestGames(tagName),
+ enabled: isEnabled,
});
return { latestGames, isLoading };
};
diff --git a/src/hooks/api/game/useSaveTempGameMutation.ts b/src/hooks/api/game/useSaveTempGameMutation.ts
index 69b83711..3d6d2199 100644
--- a/src/hooks/api/game/useSaveTempGameMutation.ts
+++ b/src/hooks/api/game/useSaveTempGameMutation.ts
@@ -7,15 +7,12 @@ export const useSaveTempGameMutation = () => {
return useMutation({
mutationFn: (tempGameData: TempGame) => {
- console.log('μμ μ μ₯ μμ² λ°μ΄ν°:', tempGameData);
return postTempGame(tempGameData);
},
onSuccess: async (response) => {
- console.log('μμ μ μ₯ μ±κ³΅ μλ΅:', response);
await queryClient.invalidateQueries({
queryKey: ['tempGame'],
});
- console.log('μΊμ 무ν¨ν μλ£');
},
onError: (error) => {
console.error('μμ μ μ₯ μ€ν¨:', error);
diff --git a/src/hooks/api/member/useLogoutMutation.ts b/src/hooks/api/member/useLogoutMutation.ts
index dc299855..195a9f89 100644
--- a/src/hooks/api/member/useLogoutMutation.ts
+++ b/src/hooks/api/member/useLogoutMutation.ts
@@ -1,8 +1,11 @@
+/* eslint-disable no-console */
+/* eslint-disable no-alert */
import { AxiosErrorResponse, axiosInstance } from '@/api/interceptor';
import { postLogout } from '@/api/member';
import { PATH } from '@/constants/path';
import { useNewDispatch } from '@/store';
import { tokenActions } from '@/store/auth';
+import { deleteCookie } from '@/utils/cookie';
import { useMutation } from '@tanstack/react-query';
import { useNavigate } from 'react-router-dom';
@@ -14,7 +17,9 @@ export const useLogoutMutation = () => {
onSuccess: () => {
// TODO: λ°±μλμμ 리νλ μ¬ ν ν° μΏ ν€μ μ μ₯μν€λ©΄, ν΄λΉ μ½λ μ κ±°
localStorage.removeItem('accessToken');
- localStorage.removeItem('rtk');
+ localStorage.removeItem('refreshToken');
+ deleteCookie('accessToken');
+ deleteCookie('refreshToken');
delete axiosInstance.defaults.headers.Authorization;
dispatch(tokenActions.deleteToken());
diff --git a/src/hooks/api/mypages/useMyInfoQuery.ts b/src/hooks/api/mypages/useMyInfoQuery.ts
index 4621ffbb..41302d63 100644
--- a/src/hooks/api/mypages/useMyInfoQuery.ts
+++ b/src/hooks/api/mypages/useMyInfoQuery.ts
@@ -4,11 +4,20 @@ import { SideBar } from '@/types/mypages';
import { Id } from '@/types/api';
export const useMyInfoQuery = (memberId: Id) => {
- const { data: memberInfo, isLoading } = useQuery({
+ const { data, isLoading } = useQuery({
queryKey: ['memberInfo', memberId],
queryFn: () => getMyInfo(memberId),
enabled: !!memberId,
});
+ const memberInfo = {
+ id: data?.id ?? 0,
+ nickname: data?.nickname ?? '',
+ profileImageUrl: data?.profileImageUrl ?? '',
+ createdAt: data?.createdAt ?? '',
+ postsCount: data?.postsCount ?? 0,
+ bookmarkedPostsCount: data?.bookmarkedPostsCount ?? 0,
+ };
+
return { memberInfo, isLoading };
};
diff --git a/src/hooks/api/mypages/useObserver.ts b/src/hooks/api/mypages/useObserver.ts
index 28656ba1..cd5bbe0c 100644
--- a/src/hooks/api/mypages/useObserver.ts
+++ b/src/hooks/api/mypages/useObserver.ts
@@ -4,7 +4,7 @@ import { useInView } from 'react-intersection-observer';
type InfiniteQueryType = {
hasNextPage: boolean;
isFetchingNextPage: boolean;
- fetchNextPage: () => Promise;
+ fetchNextPage: () => Promise;
};
export const useObserver = (queries: Record) => {
@@ -17,7 +17,7 @@ export const useObserver = (queries: Record) => {
Object.values(queries).forEach(
({ hasNextPage, isFetchingNextPage, fetchNextPage }) => {
if (hasNextPage && !isFetchingNextPage) {
- fetchNextPage();
+ void fetchNextPage();
}
},
);
diff --git a/src/hooks/api/search/useGameResultQuery.ts b/src/hooks/api/search/useGameResultQuery.ts
index 9bfeb9cb..b834924f 100644
--- a/src/hooks/api/search/useGameResultQuery.ts
+++ b/src/hooks/api/search/useGameResultQuery.ts
@@ -1,16 +1,19 @@
import { useQuery } from '@tanstack/react-query';
import { getGameResults } from '@/api/search';
import { GameResult } from '@/types/search';
+import { ToggleGroupValue } from '@/types/toggle';
export const useGameResultQuery = (
query: string,
page: number,
size: number,
- sort: string,
+ sort: ToggleGroupValue,
) => {
+ const sortParam = `${sort.field},${sort.order}`;
+
const { data: gameResults, isLoading } = useQuery({
- queryKey: ['gameResults', query, page, size, sort],
- queryFn: () => getGameResults(query, page, size, sort),
+ queryKey: ['gameResults', query, page, size, sortParam],
+ queryFn: () => getGameResults(query, page, size, sortParam),
});
const content = gameResults?.content || [];
diff --git a/src/hooks/api/search/useTalkPickResultQuery.ts b/src/hooks/api/search/useTalkPickResultQuery.ts
index cf9adc6b..cb2355cd 100644
--- a/src/hooks/api/search/useTalkPickResultQuery.ts
+++ b/src/hooks/api/search/useTalkPickResultQuery.ts
@@ -1,16 +1,19 @@
import { useQuery } from '@tanstack/react-query';
import { getTalkPickResults } from '@/api/search';
import { TalkPickResult } from '@/types/search';
+import { ToggleGroupValue } from '@/types/toggle';
export const useTalkPickResultQuery = (
query: string,
page: number,
size: number,
- sort: string,
+ sort: ToggleGroupValue,
) => {
+ const sortParam = `${sort.field},${sort.order}`;
+
const { data: talkPickResults, isLoading } = useQuery({
- queryKey: ['talkPickResults', query, page, size, sort],
- queryFn: () => getTalkPickResults(query, page, size, sort),
+ queryKey: ['talkPickResults', query, page, size, sortParam],
+ queryFn: () => getTalkPickResults(query, page, size, sortParam),
});
const content = talkPickResults?.content || [];
diff --git a/src/hooks/common/useIsMobile.ts b/src/hooks/common/useIsMobile.ts
new file mode 100644
index 00000000..fb3293b0
--- /dev/null
+++ b/src/hooks/common/useIsMobile.ts
@@ -0,0 +1,21 @@
+import { useEffect, useState } from 'react';
+
+function useIsMobile() {
+ const [isMobile, setIsMobile] = useState(false);
+
+ useEffect(() => {
+ const checkIsMobile = () => {
+ const mobile = window.matchMedia('(max-width: 430px)').matches;
+ setIsMobile(
+ mobile || ('ontouchstart' in window && window.innerWidth <= 430),
+ );
+ };
+
+ checkIsMobile();
+ window.addEventListener('resize', checkIsMobile);
+ return () => window.removeEventListener('resize', checkIsMobile);
+ }, []);
+
+ return isMobile;
+}
+export default useIsMobile;
diff --git a/src/hooks/common/useTokenRefresh.ts b/src/hooks/common/useTokenRefresh.ts
index f0df5b70..50dfbbd2 100644
--- a/src/hooks/common/useTokenRefresh.ts
+++ b/src/hooks/common/useTokenRefresh.ts
@@ -9,7 +9,7 @@ import { useParseJwt } from './useParseJwt';
export const useTokenRefresh = () => {
const accessToken = useNewSelector(selectAccessToken);
// TODO
- const refreshToken = localStorage.getItem('rtk');
+ const refreshToken = localStorage.getItem('refreshToken');
const localstorageAccessToken = localStorage.getItem('accessToken');
const dispatch = useNewDispatch();
const navigate = useNavigate();
@@ -19,7 +19,7 @@ export const useTokenRefresh = () => {
if (!accessToken && refreshToken) {
if (isTimeLimit(useParseJwt(localstorageAccessToken).exp)) {
localStorage.removeItem('accessToken');
- localStorage.removeItem('rtk');
+ localStorage.removeItem('refreshToken');
delete axiosInstance.defaults.headers.Authorization;
dispatch(tokenActions.deleteToken());
alert('λ‘κ·ΈμΈ μκ°μ΄ λ§λ£λμμ΅λλ€. λ€μ λ‘κ·ΈμΈν΄μ£ΌμΈμ.');
diff --git a/src/hooks/game/useBalanceGameCreation.ts b/src/hooks/game/useBalanceGameCreation.ts
index d1b2d688..e8788041 100644
--- a/src/hooks/game/useBalanceGameCreation.ts
+++ b/src/hooks/game/useBalanceGameCreation.ts
@@ -1,20 +1,25 @@
-import React, { useEffect, useState } from 'react';
+import { useEffect, useState, useRef } from 'react';
import { BalanceGameOption, BalanceGameSet } from '@/types/game';
import {
createInitialGameStages,
updateOptionInGameSets,
} from '@/utils/balanceGameUtils';
+import { ERROR } from '@/constants/message';
export const useBalanceGameCreation = (
- currentStage: number,
- loadedGames?: BalanceGameSet[],
+ showToast: (message: string) => void,
totalStage: number = 10,
+ loadedGames?: BalanceGameSet[],
) => {
const [games, setGames] = useState(
loadedGames || createInitialGameStages(totalStage),
);
+ const [currentStage, setCurrentStage] = useState(0);
const [currentOptions, setCurrentOptions] = useState([]);
const [currentDescription, setCurrentDescription] = useState('');
+ const [clearInput, setClearInput] = useState(false);
+
+ const timerRef = useRef(null);
useEffect(() => {
if (loadedGames) {
@@ -28,6 +33,24 @@ export const useBalanceGameCreation = (
setCurrentDescription(stage.description);
}, [currentStage, games]);
+ useEffect(() => {
+ if (clearInput) {
+ if (timerRef.current !== null) {
+ clearTimeout(timerRef.current);
+ }
+
+ timerRef.current = setTimeout(() => {
+ setClearInput(false);
+ }, 500);
+ }
+
+ return () => {
+ if (timerRef.current !== null) {
+ clearTimeout(timerRef.current);
+ }
+ };
+ }, [clearInput]);
+
const updateOption = (
stageIndex: number,
optionType: 'A' | 'B',
@@ -42,6 +65,11 @@ export const useBalanceGameCreation = (
optionType,
newOption,
);
+
+ if (idx === currentStage) {
+ setCurrentOptions(updatedOptions);
+ }
+
return {
...game,
gameOptions: updatedOptions,
@@ -50,17 +78,40 @@ export const useBalanceGameCreation = (
);
};
- const handleOptionChange =
- (optionType: 'A' | 'B') => (event: React.ChangeEvent) => {
- updateOption(currentStage, optionType, { name: event.target.value });
- };
+ const validateStage = (): true | string => {
+ if (!currentOptions[0]?.name.trim() || !currentOptions[1]?.name.trim()) {
+ return ERROR.VALIDATE.OPTION;
+ }
- const handleDescriptionChange = (
- optionType: 'A' | 'B',
- event: React.ChangeEvent,
- ) => {
- const { value } = event.target;
- updateOption(currentStage, optionType, { description: value });
+ const hasBothImages =
+ currentOptions[0]?.imgUrl.trim() && currentOptions[1]?.imgUrl.trim();
+ const hasNoImages =
+ !currentOptions[0]?.imgUrl.trim() && !currentOptions[1]?.imgUrl.trim();
+
+ if (!(hasBothImages || hasNoImages)) {
+ return ERROR.VALIDATE.GAME_IMAGE;
+ }
+
+ return true;
+ };
+
+ const handleNextStage = () => {
+ const validationResult = validateStage();
+ if (currentStage < totalStage - 1) {
+ if (validationResult === true) {
+ setClearInput(true);
+ setCurrentStage((prev) => prev + 1);
+ } else {
+ showToast(validationResult);
+ }
+ }
+ };
+
+ const handlePrevStage = () => {
+ if (currentStage > 0) {
+ setClearInput(true);
+ setCurrentStage((prev) => prev - 1);
+ }
};
const handleStageDescriptionChange = (newDescription: string) => {
@@ -73,12 +124,24 @@ export const useBalanceGameCreation = (
);
};
+ const handleOptionUpdate = (
+ optionType: 'A' | 'B',
+ field: 'name' | 'description',
+ value: string,
+ ) => {
+ updateOption(currentStage, optionType, { [field]: value });
+ };
+
return {
games,
+ currentStage,
currentOptions,
currentDescription,
- handleOptionChange,
- handleDescriptionChange,
+ clearInput,
+ handleNextStage,
+ handlePrevStage,
handleStageDescriptionChange,
+ handleOptionUpdate,
+ validateStage,
};
};
diff --git a/src/hooks/game/useStageNavigation.ts b/src/hooks/game/useStageNavigation.ts
deleted file mode 100644
index 062842f0..00000000
--- a/src/hooks/game/useStageNavigation.ts
+++ /dev/null
@@ -1,47 +0,0 @@
-import { useEffect, useRef, useState } from 'react';
-
-export const useStageNavigation = (totalStage: number) => {
- const [currentStage, setCurrentStage] = useState(0);
- const [clearInput, setClearInput] = useState(false);
- const timerRef = useRef(null);
-
- useEffect(() => {
- if (clearInput) {
- if (timerRef.current !== null) {
- clearTimeout(timerRef.current);
- }
-
- timerRef.current = setTimeout(() => {
- setClearInput(false);
- }, 500);
-
- return () => {
- if (timerRef.current !== null) {
- clearTimeout(timerRef.current);
- }
- };
- }
- }, [currentStage, clearInput]);
-
- const handleNextStage = () => {
- if (currentStage < totalStage - 1) {
- setClearInput(true);
- setCurrentStage((prev) => prev + 1);
- }
- };
-
- const handlePrevStage = () => {
- if (currentStage > 0) {
- setClearInput(true);
- setCurrentStage((prev) => prev - 1);
- }
- };
-
- return {
- currentStage,
- clearInput,
- handleNextStage,
- handlePrevStage,
- setClearInput,
- };
-};
diff --git a/src/hooks/login/useLoginForm.ts b/src/hooks/login/useLoginForm.ts
index 813db56a..d5c25272 100644
--- a/src/hooks/login/useLoginForm.ts
+++ b/src/hooks/login/useLoginForm.ts
@@ -1,4 +1,3 @@
-import { ChangeEvent, useState } from 'react';
import { AxiosErrorResponse, axiosInstance } from '@/api/interceptor';
import { postLogin } from '@/api/member';
import { HTTP_STATUS_CODE } from '@/constants/api';
@@ -6,6 +5,7 @@ import { useNewDispatch } from '@/store';
import { tokenActions } from '@/store/auth';
import { MemberForm } from '@/types/member';
import { useMutation } from '@tanstack/react-query';
+import { ChangeEvent, useState } from 'react';
import { useNavigate } from 'react-router-dom';
import { PATH } from '@/constants/path';
import { ERROR, SUCCESS } from '../../constants/message';
@@ -51,7 +51,7 @@ export const useLoginForm = (
axiosInstance.defaults.headers.Authorization = `Bearer ${res}`;
localStorage.setItem('accessToken', res);
- localStorage.setItem('rtk', 'rtk');
+ localStorage.setItem('refreshToken', 'refreshToken');
localStorage.setItem('savedEmail', form.email);
showToastModal(SUCCESS.LOGIN, () => {
diff --git a/src/hooks/mypages/useMyPageOptions.ts b/src/hooks/mypages/useMyPageOptions.ts
new file mode 100644
index 00000000..7b9bd917
--- /dev/null
+++ b/src/hooks/mypages/useMyPageOptions.ts
@@ -0,0 +1,62 @@
+import { useState, useEffect, useCallback } from 'react';
+import { useSearchParams } from 'react-router-dom';
+import { OptionKeys, optionSets } from '@/constants/optionSets';
+import { validateUrlParam } from '@/utils/validateUrlParam';
+
+const isValidOptionKey = (value: string): boolean => {
+ return Object.values(OptionKeys).includes(value as OptionKeys);
+};
+
+export const useMyPageOptions = () => {
+ const [searchParams, setSearchParams] = useSearchParams();
+
+ const initialGroup = validateUrlParam(
+ searchParams.get('group'),
+ OptionKeys.TALK_PICK,
+ isValidOptionKey,
+ );
+ const initialOption =
+ searchParams.get('option') ?? optionSets[initialGroup][0].value;
+
+ const [selectedGroup, setSelectedGroup] = useState(initialGroup);
+ const [selectedOption, setSelectedOption] = useState(initialOption);
+
+ useEffect(() => {
+ const group = validateUrlParam(
+ searchParams.get('group'),
+ OptionKeys.TALK_PICK,
+ isValidOptionKey,
+ );
+ const option = searchParams.get('option') ?? optionSets[group][0].value;
+ setSelectedGroup(group);
+ setSelectedOption(option);
+ }, [searchParams]);
+
+ const handleGroupSelect = useCallback(
+ (group: OptionKeys) => {
+ const firstOption = optionSets[group][0].value;
+ setSelectedGroup(group);
+ setSelectedOption(firstOption);
+ setSearchParams({ group });
+ },
+ [setSearchParams],
+ );
+
+ const handleOptionSelect = useCallback(
+ (option: string) => {
+ setSelectedOption(option);
+ setSearchParams({ group: selectedGroup, option });
+ },
+ [selectedGroup, setSearchParams],
+ );
+
+ const options = optionSets[selectedGroup];
+
+ return {
+ selectedGroup,
+ selectedOption,
+ options,
+ handleGroupSelect,
+ handleOptionSelect,
+ };
+};
diff --git a/src/hooks/search/usePagination.ts b/src/hooks/search/usePagination.ts
index 1a29a9cc..774ed3d7 100644
--- a/src/hooks/search/usePagination.ts
+++ b/src/hooks/search/usePagination.ts
@@ -1,11 +1,11 @@
import { useState, useEffect } from 'react';
import { useSearchParams } from 'react-router-dom';
-const usePagination = (defaultPage = 0) => {
+const usePagination = (defaultPage = 1) => {
const [searchParams, setSearchParams] = useSearchParams();
const initialPage =
- parseInt(searchParams.get('page') || `${defaultPage}`, 10) || 0;
+ parseInt(searchParams.get('page') || `${defaultPage}`, 10) || 1;
const [page, setPage] = useState(initialPage);
useEffect(() => {
@@ -16,7 +16,7 @@ const usePagination = (defaultPage = 0) => {
}, [page, setSearchParams]);
const handlePageChange = (newPage: number) => {
- setPage(newPage - 1);
+ setPage(newPage);
};
return { page, handlePageChange };
diff --git a/src/hooks/search/useSort.ts b/src/hooks/search/useSort.ts
index 253cb6e4..46c78c8d 100644
--- a/src/hooks/search/useSort.ts
+++ b/src/hooks/search/useSort.ts
@@ -1,9 +1,12 @@
import { useState } from 'react';
+import { ToggleGroupValue } from '@/types/toggle';
-const useSort = (defaultSort = 'views') => {
- const [sort, setSort] = useState(defaultSort);
+const useSort = (
+ defaultSort: ToggleGroupValue = { field: 'views', order: 'desc' },
+) => {
+ const [sort, setSort] = useState(defaultSort);
- const handleSortChange = (newSort: string) => {
+ const handleSortChange = (newSort: ToggleGroupValue) => {
setSort(newSort);
};
diff --git a/src/layout/layout.tsx b/src/layout/layout.tsx
index f579616b..afcbbe0d 100644
--- a/src/layout/layout.tsx
+++ b/src/layout/layout.tsx
@@ -3,20 +3,25 @@ import { css } from '@emotion/react';
import { Outlet } from 'react-router-dom';
import Header from '@/components/organisms/Header/Header';
import Footer from '@/components/organisms/Footer/Footer';
+import useIsMobile from '@/hooks/common/useIsMobile';
// import Sidebar from '../pages/MyPage/sections/Sidebar/Sidebar';
export const Layout = () => {
+ const isMobile = useIsMobile();
return (
<>
-
+ {isMobile ? null : }
);
};
@@ -32,6 +37,9 @@ export const LayoutNoSearch = () => {
alignItems: 'center',
height: '100vh',
paddingTop: '100px',
+ '@media (max-width: 430px)': {
+ paddingTop: '55px',
+ },
})}
>
(false);
- const [selectedValue, setSelectedValue] = useState('views');
+ const [selectedValue, setSelectedValue] = useState({
+ field: 'views',
+ order: 'desc',
+ });
const [activeTab, setActiveTab] = useState<
'μΈκΈ°' | '컀ν' | 'μ·¨ν₯' | 'μλμ»΅'
>('μΈκΈ°');
- const { bestGames, isLoading: isBestLoading } = useBestGameList(activeTab);
- const { latestGames, isLoading: isLatestLoading } =
- useLatestGameList(activeTab);
+ const isBestGamesEnabled =
+ activeTab === 'μΈκΈ°' || selectedValue.field === 'views';
+ const isLatestGamesEnabled =
+ activeTab !== 'μΈκΈ°' && selectedValue.field !== 'views';
- const [contents, setContents] = useState([]);
+ const { bestGames } = useBestGameList(activeTab, isBestGamesEnabled);
+ const { latestGames } = useLatestGameList(activeTab, isLatestGamesEnabled);
- useEffect(() => {
- if (selectedValue === 'views') {
- setContents(bestGames || []);
- } else if (selectedValue === 'createdAt') {
- setContents(latestGames || []);
- }
- }, [
- selectedValue,
- activeTab,
- bestGames,
- latestGames,
- isBestLoading,
- isLatestLoading,
- ]);
+ const contents = bestGames || latestGames || [];
const handleService = () => {
setIsServicePreparing(true);
@@ -56,27 +51,48 @@ const LandingPage = () => {
};
return (
-
+ (
- OptionKeys.TALK_PICK,
- );
- const [selectedOption, setSelectedOption] = useState(
- optionSets[selectedGroup][0],
- );
-
- useEffect(() => {
- setSelectedOption(optionSets[selectedGroup][0]);
- }, [selectedGroup]);
+ const { ref } = useObserver(queries);
const queryResult = useMemo(() => {
if (selectedGroup === OptionKeys.TALK_PICK) {
switch (selectedOption) {
- case 'λ΄κ° μ μ₯ν':
+ case 'bookmarks':
return queries.myBookmarks.myBookmarks;
- case 'λ΄κ° ν¬νν':
+ case 'votes':
return queries.myVotes.myVote;
- case 'λ΄κ° λκΈλ¨':
+ case 'comments':
return queries.myComments.myComments;
- case 'λ΄κ° μμ±ν':
+ case 'written':
return queries.myWrittens.myWritten;
+ default:
+ return null;
}
} else if (selectedGroup === OptionKeys.BALANCE_GAME) {
switch (selectedOption) {
- case 'λ΄κ° μ μ₯ν':
+ case 'bookmarks':
return queries.gameBookmarks.gameBookmark;
- case 'λ΄κ° ν¬νν':
+ case 'votes':
return queries.gameVotes.gameVote;
- case 'λ΄κ° λ§λ ':
+ case 'written':
return queries.gameWrittens.gameWritten;
default:
return null;
@@ -95,13 +94,13 @@ const MyPage = () => {
}, [
selectedGroup,
selectedOption,
- myBookmarksQuery,
- myVotesQuery,
- myCommentsQuery,
- myWrittensQuery,
- gameBookmarksQuery,
- gameVotesQuery,
- gameWrittensQuery,
+ queries.myBookmarks.myBookmarks,
+ queries.myVotes.myVote,
+ queries.myComments.myComments,
+ queries.myWrittens.myWritten,
+ queries.gameBookmarks.gameBookmark,
+ queries.gameVotes.gameVote,
+ queries.gameWrittens.gameWritten,
]);
const renderContent = () => {
@@ -116,21 +115,15 @@ const MyPage = () => {
}
if (!queryResult) {
- return
);
diff --git a/src/pages/SearchResultsPage/SearchGamePage.tsx b/src/pages/SearchResultsPage/SearchGamePage.tsx
index 84e7372d..f0ee4117 100644
--- a/src/pages/SearchResultsPage/SearchGamePage.tsx
+++ b/src/pages/SearchResultsPage/SearchGamePage.tsx
@@ -13,14 +13,14 @@ const SearchGamePage = () => {
const { query, handleSearch } = useSearchQuery();
const { selectedTag, handleTagClick } = useTagFilter('game');
const { page, handlePageChange } = usePagination();
- const { sort, handleSortChange } = useSort();
+ const { sort, handleSortChange } = useSort({ field: 'views', order: 'desc' });
const size = 9;
const {
content: gameResults,
totalPages: gameTotalPages,
isLoading,
- } = useGameResultQuery(query, page, size, sort);
+ } = useGameResultQuery(query, page - 1, size, sort);
return (
{isServicePreparing && (
{NOTICE.STATUS.NOT_READY}
)}
);
};
diff --git a/src/pages/MyPage/MyPage.tsx b/src/pages/MyPage/MyPage.tsx
index fd669a3a..c4c01e7f 100644
--- a/src/pages/MyPage/MyPage.tsx
+++ b/src/pages/MyPage/MyPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo, useEffect } from 'react';
+import React, { useMemo } from 'react';
import SideBar from '@/components/organisms/SideBar/SideBar';
import OptionBar from '@/components/organisms/OptionBar/OptionBar';
import MyContentList, {
@@ -8,7 +8,7 @@ import InfoList, { InfoItem } from '@/components/organisms/InfoList/InfoList';
import MyBalanceGameList, {
MyBalanceGameItem,
} from '@/components/organisms/MyBalanceGameList/MyBalanceGameList';
-import { OptionKeys, optionSets } from '@/constants/optionSets';
+import { OptionKeys } from '@/constants/optionSets';
import { useMyVotesQuery } from '@/hooks/api/mypages/useMyVotesQuery';
import { useMyCommentsQuery } from '@/hooks/api/mypages/useMyCommentsQuery';
import { useMyWrittensQuery } from '@/hooks/api/mypages/useMyWrittensQuery';
@@ -24,13 +24,21 @@ import { useMemberQuery } from '@/hooks/api/member/useMemberQuery';
import { useParseJwt } from '@/hooks/common/useParseJwt';
import MypageListSkeleton from '@/components/atoms/MypageListSkeleton/MypageListSkeleton';
import MypageCardSkeleton from '@/components/atoms/MypageCardSkeleton/MypageCardSkeleton';
+import { useMyPageOptions } from '@/hooks/mypages/useMyPageOptions';
import * as S from './MyPage.style';
const MyPage = () => {
+ const {
+ selectedGroup,
+ selectedOption,
+ options,
+ handleGroupSelect,
+ handleOptionSelect,
+ } = useMyPageOptions();
+
const accessToken = useNewSelector(selectAccessToken);
const { member } = useMemberQuery(useParseJwt(accessToken).memberId);
const memberId: number = member!.id;
-
const { memberInfo, isLoading } = useMyInfoQuery(memberId);
const myBookmarksQuery = useMyBookmarksQuery();
const myVotesQuery = useMyVotesQuery();
@@ -54,38 +62,29 @@ const MyPage = () => {
(query) => query.isLoading,
);
- const { ref, isFetchingAnyNextPage } = useObserver(queries);
-
- const [selectedGroup, setSelectedGroup] = useState
-
+ {isMobile ? (
+
-
-
+
+ ) : (
+
+
+ μ΄λ€ μ½ν μΈ λ₯Ό μ°Ύμλ³ΌκΉμ?
+
+
+
+
+ )}
+
+ νμν νμ΄μ§κ° μμ΅λλ€
;
+ return null;
}
if (selectedGroup === OptionKeys.TALK_PICK) {
- if (
- selectedOption === 'λ΄κ° μ μ₯ν' ||
- selectedOption === 'λ΄κ° μμ±ν'
- ) {
+ if (selectedOption === 'bookmarks' || selectedOption === 'written') {
const content = queryResult.content as MyContentItem[];
return νμν νμ΄μ§κ° μμ΅λλ€
;
+ return null;
};
return (
@@ -147,30 +140,18 @@ const MyPage = () => {
{isLoading ? (
{renderContent()}
-
- {isFetchingAnyNextPage &&
+
Loading...
} -
@@ -36,7 +36,7 @@ const SearchGamePage = () => {
{
const { query, handleSearch } = useSearchQuery();
const { selectedTag, handleTagClick } = useTagFilter('all');
+ const { sort } = useSort({ field: 'views', order: 'desc' });
const page = 0;
const size = 4;
- const sort = 'all';
const { content: talkPickResults, isLoading: isTalkPickLoading } =
useTalkPickResultQuery(query, page, size, sort);
diff --git a/src/pages/SearchResultsPage/SearchTalkPickPage.tsx b/src/pages/SearchResultsPage/SearchTalkPickPage.tsx
index 712edc79..39dab989 100644
--- a/src/pages/SearchResultsPage/SearchTalkPickPage.tsx
+++ b/src/pages/SearchResultsPage/SearchTalkPickPage.tsx
@@ -13,14 +13,14 @@ const SearchTalkPickPage = () => {
const { query, handleSearch } = useSearchQuery();
const { selectedTag, handleTagClick } = useTagFilter('talkpick');
const { page, handlePageChange } = usePagination();
- const { sort, handleSortChange } = useSort();
+ const { sort, handleSortChange } = useSort({ field: 'views', order: 'desc' });
const size = 10;
const {
content: talkPickResults,
totalPages: talkPickTotalPages,
isLoading,
- } = useTalkPickResultQuery(query, page, size, sort);
+ } = useTalkPickResultQuery(query, page - 1, size, sort);
return (
@@ -36,7 +36,7 @@ const SearchTalkPickPage = () => {
{
const [currentPage, setCurrentPage] = useState(1);
- const [selectedValue, setSelectedValue] = useState('trend');
+ const [selectedValue, setSelectedValue] = useState({
+ field: 'views',
+ order: 'desc',
+ });
const accessToken = useNewSelector(selectAccessToken);
const { member } = useMemberQuery(useParseJwt(accessToken).memberId);
@@ -36,11 +39,11 @@ const TalkPickPage = () => {
const toggleItem: ToggleGroupItem[] = [
{
label: 'μΈκΈ°μ',
- value: 'trend',
+ value: { field: 'views', order: 'desc' },
},
{
label: 'μ΅μ μ',
- value: 'recent',
+ value: { field: 'createdAt', order: 'desc' },
},
];
@@ -77,7 +80,9 @@ const TalkPickPage = () => {
{
- const [searchParams, setSearchParams] = useSearchParams();
- const [selectedValue, setSelectedValue] = useState('views');
-
- const initialPage = parseInt(searchParams.get('page') ?? '1', 10) || 1;
- const [currentPage, setCurrentPage] = useState(initialPage);
-
- useEffect(() => {
- setSearchParams((prevParams) => ({
- ...Object.fromEntries(prevParams.entries()),
- page: currentPage.toString(),
- }));
- }, [currentPage, setSearchParams]);
-
- const handlePageChange = (newPage: number) => {
- setCurrentPage(newPage);
- };
+ const { page, handlePageChange } = usePagination();
+ const [selectedValue, setSelectedValue] = useState({
+ field: 'views',
+ order: 'desc',
+ });
const { bestTalkPick } = useBestTalkPickListQuery();
const { talkPickList } = useTalkPickListQuery({
- page: currentPage - 1,
+ page: page - 1,
size: 20,
- sort: selectedValue,
+ sort: `${selectedValue.field},${selectedValue.order}`,
});
useEffect(() => {
window.scrollTo(0, 0);
- }, [currentPage, selectedValue]);
+ }, [page, selectedValue]);
return (
= {
},
tags: ['autodocs'],
argTypes: {
- bookmarkState: { control: 'boolean' },
+ bookmarked: { control: 'boolean' },
},
args: {
- bookmarkState: false,
+ bookmarked: false,
},
};
@@ -23,7 +23,7 @@ type Story = StoryObj;
export const Default: Story = {
args: {
- bookmarkState: false,
+ bookmarked: false,
},
};
@@ -32,10 +32,10 @@ export const All: Story = {
= {
component: CategoryButton,
parameters: {
layout: 'centered',
+ viewport: { defaultViewport: 'tablet' },
},
- tags: ['autodocs'],
argTypes: {
imageType: {
options: ['PickVote', 'RandomGame', 'TodayPick'],
control: { type: 'radio' },
},
label: { control: { type: 'text' } },
+ isMobile: { control: { type: 'boolean' } },
},
args: {
imageType: 'PickVote',
label: 'Category Label',
+ isMobile: false,
},
};
@@ -46,3 +48,27 @@ export const All: Story = {
),
};
+
+export const Mobile: Story = {
+ parameters: {
+ viewport: {
+ defaultViewport: 'mobile',
+ },
+ },
+ render: () => (
+ ('views');
+ const [selectedValue, setSelectedValue] = useState<
+ ToggleGroupProps['selectedValue']
+ >({ field: 'views', order: 'desc' });
return (
;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ variant: 'primary',
+ size: 'large',
+ },
+};
+
+export const All: Story = {
+ render: () => (
+ = {
+ title: 'mobile/atoms/DraftSaveButton',
+ component: DraftSaveButton,
+ parameters: {
+ layout: 'centered',
+ },
+ argTypes: {
+ onClick: { action: 'ν΄λ¦ μ΄λ²€νΈ λ°μ' },
+ },
+ decorators: [
+ (Story) => (
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/stories/mobile/atoms/FloatingButton.stories.tsx b/src/stories/mobile/atoms/FloatingButton.stories.tsx
new file mode 100644
index 00000000..85de7f04
--- /dev/null
+++ b/src/stories/mobile/atoms/FloatingButton.stories.tsx
@@ -0,0 +1,47 @@
+/* eslint-disable no-console */
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import FloatingButton from '@/components/mobile/atoms/FloatingButton/FloatingButton';
+import { BrowserRouter } from 'react-router-dom';
+import { storyContainer, storyInnerContainer } from '@/stories/story.styles';
+
+const meta: Meta = {
+ title: 'mobile/atoms/FloatingButton',
+ component: FloatingButton,
+ parameters: {
+ layout: 'centered',
+ },
+ decorators: [
+ (Story) => (
+
+
+ ),
+ ],
+};
+
+export default meta;
+type Story = StoryObj;
+
+export const All: Story = {
+ render: () => (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const All: Story = {
+ render: (args) => (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/stories/mobile/atoms/GameTagChip.stories.tsx b/src/stories/mobile/atoms/GameTagChip.stories.tsx
new file mode 100644
index 00000000..3517e87c
--- /dev/null
+++ b/src/stories/mobile/atoms/GameTagChip.stories.tsx
@@ -0,0 +1,21 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import GameTagChip from '@/components/mobile/atoms/GameTagChip/GameTagChip';
+
+const meta = {
+ title: 'mobile/atoms/GameTagChip',
+ component: GameTagChip,
+ parameters: {
+ layout: 'centered',
+ },
+ argTypes: {
+ tag: { control: { type: 'text' } },
+ },
+ args: {
+ tag: 'νκ·Έ',
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/stories/mobile/atoms/IconButton.stories.tsx b/src/stories/mobile/atoms/IconButton.stories.tsx
new file mode 100644
index 00000000..67f2244a
--- /dev/null
+++ b/src/stories/mobile/atoms/IconButton.stories.tsx
@@ -0,0 +1,51 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { MobileBookmarkDF, MobileShare } from '@/assets';
+import IconButton from '@/components/mobile/atoms/IconButton/IconButton';
+import { storyContainer, storyInnerContainer } from '@/stories/story.styles';
+
+const meta = {
+ title: 'mobile/atoms/IconButton',
+ component: IconButton,
+ parameters: {
+ layout: 'centered',
+ },
+ argTypes: {
+ icon: {
+ control: { type: 'select' },
+ options: ['BookmarkDF', 'Share'],
+ mapping: {
+ BookmarkDF: ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ icon: ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ buttonLabel: 'μ΄ κ²μ μ λ² νΌμ΄ μ’μ?',
+ icon: = {
+ title: 'mobile/atoms/MobileSideMenu',
+ component: MobileSideMenu,
+ parameters: {
+ layout: 'centered',
+ },
+ argTypes: {
+ isOpen: { type: 'boolean' },
+ accessToken: { type: 'string' },
+ handleLoginButton: { action: 'button clicked' },
+ setIsOpen: { action: 'setIsOpen called' },
+ },
+ decorators: [
+ (Story) => (
+
+
+ ),
+ ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/stories/mobile/atoms/MobileToggleGroup.stories.tsx b/src/stories/mobile/atoms/MobileToggleGroup.stories.tsx
new file mode 100644
index 00000000..c7698f9c
--- /dev/null
+++ b/src/stories/mobile/atoms/MobileToggleGroup.stories.tsx
@@ -0,0 +1,29 @@
+/* eslint-disable no-console */
+/* eslint-disable @typescript-eslint/no-unused-vars */
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import MobileToggleGroup from '@/components/mobile/atoms/MobileToggleGroup/MobileToggleGroup';
+import { BrowserRouter } from 'react-router-dom';
+
+const meta = {
+ title: 'mobile/atoms/MobileToggleGroup',
+ component: MobileToggleGroup,
+ parameters: {
+ layout: 'centered',
+ },
+ args: {
+ selectedValue: { field: 'views', order: 'desc' },
+ },
+ decorators: [
+ (Story) => (
+
+
+ ),
+ ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/stories/mobile/atoms/Modal.stories.tsx b/src/stories/mobile/atoms/Modal.stories.tsx
new file mode 100644
index 00000000..bb564d99
--- /dev/null
+++ b/src/stories/mobile/atoms/Modal.stories.tsx
@@ -0,0 +1,69 @@
+import React, { useState } from 'react';
+import Modal from '@/components/mobile/atoms/Modal/Modal';
+import type { Meta, StoryObj } from '@storybook/react';
+import { storyContainer, storyInnerContainer } from '@/stories/story.styles';
+
+const meta = {
+ title: 'mobile/atoms/Modal',
+ component: Modal,
+ parameters: {
+ layout: 'centered',
+ },
+ argTypes: {
+ action: {
+ options: ['share', 'tag', 'tempGame'],
+ control: { type: 'radio' },
+ },
+ isOpen: { control: { type: 'boolean' } },
+ hasCloseButton: { control: { type: 'boolean' } },
+ children: { control: { type: 'text' } },
+ },
+ args: {
+ isOpen: true,
+ children: 'Modal',
+ hasCloseButton: true,
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ isOpen: true,
+ action: 'share',
+ hasCloseButton: true,
+ },
+};
+
+export const All: Story = {
+ render: (args) => {
+ const [modalOpen, setModalOpen] = useState(true);
+ const handleCloseModal = () => setModalOpen(!modalOpen);
+
+ return (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
+
+export const All: Story = {
+ render: (args) => (
+ ;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/stories/mobile/molecules/FloatingMenuButton.stories.tsx b/src/stories/mobile/molecules/FloatingMenuButton.stories.tsx
new file mode 100644
index 00000000..03c82c78
--- /dev/null
+++ b/src/stories/mobile/molecules/FloatingMenuButton.stories.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import store from '@/store';
+import type { Meta, StoryObj } from '@storybook/react';
+import { BrowserRouter as Router } from 'react-router-dom';
+import FloatingMenuButton from '@/components/mobile/molecules/FloatingMenuButton/FloatingMenuButton';
+import ReactQueryProvider from '@/providers/ReactQueryProvider';
+import { Provider } from 'react-redux';
+
+const meta = {
+ title: 'mobile/molecules/FloatingMenuButton',
+ component: FloatingMenuButton,
+ parameters: {
+ layout: 'centered',
+ },
+ decorators: [
+ (Story) => (
+
+
+
+
+
+
+ ),
+ ],
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/stories/mobile/molecules/GameTagModal.stories.tsx b/src/stories/mobile/molecules/GameTagModal.stories.tsx
new file mode 100644
index 00000000..1b3d2c2c
--- /dev/null
+++ b/src/stories/mobile/molecules/GameTagModal.stories.tsx
@@ -0,0 +1,26 @@
+/* eslint-disable no-console */
+import GameTagModal from '@/components/mobile/molecules/GameTagModal/GameTagModal';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+ title: 'mobile/molecules/GameTagModal',
+ component: GameTagModal,
+ parameters: {
+ layout: 'centered',
+ },
+ argTypes: {
+ onTagSubmit: { action: 'tagSubmit' },
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ isOpen: true,
+ onTagSubmit: (mainTag: string, subTag: string) => {
+ console.log(`λ©μΈ νκ·Έ : ${mainTag}, μλΈ νκ·Έ : ${subTag}`);
+ },
+ },
+};
diff --git a/src/stories/mobile/molecules/ShareModal.stories.tsx b/src/stories/mobile/molecules/ShareModal.stories.tsx
new file mode 100644
index 00000000..689d842d
--- /dev/null
+++ b/src/stories/mobile/molecules/ShareModal.stories.tsx
@@ -0,0 +1,25 @@
+import ShareModal from '@/components/mobile/molecules/ShareModal/ShareModal';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+ title: 'mobile/molecules/ShareModal',
+ component: ShareModal,
+ parameters: {
+ layout: 'centered',
+ },
+ argTypes: {
+ isOpen: { control: { type: 'boolean' } },
+ },
+ args: {
+ isOpen: true,
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ isOpen: true,
+ },
+};
diff --git a/src/stories/mobile/molecules/TempGameModal.stories.tsx b/src/stories/mobile/molecules/TempGameModal.stories.tsx
new file mode 100644
index 00000000..ea8d3343
--- /dev/null
+++ b/src/stories/mobile/molecules/TempGameModal.stories.tsx
@@ -0,0 +1,23 @@
+import TempGameModal from '@/components/mobile/molecules/TempGameModal/TempGameModal';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+ title: 'mobile/molecules/TempGameModal',
+ component: TempGameModal,
+ parameters: {
+ layout: 'centered',
+ },
+ argTypes: {
+ isOpen: { control: { type: 'boolean' } },
+ },
+ args: {
+ isOpen: true,
+ onGetGame: () => {},
+ onSaveGame: () => {},
+ },
+} satisfies Meta;
+
+export default meta;
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/stories/molecules/ActionBox.stories.tsx b/src/stories/molecules/ActionBox.stories.tsx
index 5e4ab985..95b0bb53 100644
--- a/src/stories/molecules/ActionBox.stories.tsx
+++ b/src/stories/molecules/ActionBox.stories.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
+import { MemoryRouter } from 'react-router-dom';
import ActionBox from '@/components/molecules/ActionBox/ActionBox';
import { storyContainer, storyInnerContainer } from '@/stories/story.styles';
@@ -15,15 +16,23 @@ const meta = {
export default meta;
type Story = StoryObj;
-export const Default: Story = {};
+export const Default: Story = {
+ render: () => (
+
+
+ ),
+};
export const All: Story = {
render: () => (
-
@@ -50,7 +40,7 @@ const TalkPickPlacePage = () => {
talkPickList={talkPickList}
selectedValue={selectedValue}
setToggleValue={setSelectedValue}
- selectedPage={currentPage}
+ selectedPage={page}
handlePageChange={handlePageChange}
/>
diff --git a/src/stories/atoms/Bookmark.stories.tsx b/src/stories/atoms/Bookmark.stories.tsx
index b5134678..5a26c915 100644
--- a/src/stories/atoms/Bookmark.stories.tsx
+++ b/src/stories/atoms/Bookmark.stories.tsx
@@ -11,10 +11,10 @@ const meta: MetaDefault State
-Pressed State
--
+
-
+
λͺ¨λ°μΌ ν‘&ν½ νλ μ΄μ€
++
+ -
+
λͺ¨λ°μΌ λλ€ λ°Έλ°μ€ κ²μ
++
+
-
@@ -72,9 +71,9 @@ export const All: Story = {
-
Trend
-+ Recent
-+
-
+
-
+
Primary
+ + +roundPrimary
+ +Primary2
+ +outlineShadow
+ +
+ -
+
disabled
+ + +
+
-
+
-
+
ν‘ν½
+console.log('TalkPick button clicked')} + /> +
+ -
+
λ°Έλ°μ€ κ²μ
+console.log('Game button clicked')} + /> +
+
-
+
-
+
default
++ main
++
+
-
+
-
+
λΆλ§ν¬ λ²νΌ
++
+ -
+
곡μ λ²νΌ
+} /> +
+
-
+
-
+
μ μ₯νκΈ° λ²νΌ
++
+ -
+
곡μ νκΈ° λ²νΌ
+} + iconLabel="곡μ νκΈ°" + /> +
+
-
+
-
+
Close Modal
++ Close Modal + +
+ -
+
Share
++ Share Modal + +Tag
++ Tag Modal + +TempGame
++ TempGame Modal + +
+
-
+
-
+
μμμ μ₯νκΈ°
++ μμμ μ₯ λΆλ¬μ€κΈ°
++
+
- = {
parameters: {
layout: 'centered',
},
- tags: ['autodocs'],
argTypes: {
title: { control: 'text' },
mainTag: { control: 'text' },
@@ -18,6 +17,7 @@ const meta: Meta = {
bookmarked: { control: 'boolean' },
showBookmark: { control: 'boolean' },
size: { control: { type: 'radio' }, options: ['large', 'medium', 'small'] },
+ onClick: { action: 'ν΄λ¦ μ΄λ²€νΈ λ°μ' },
},
args: {
title: 'μ μ§ VS λ―Όμ§ μ¬λ³΅ κ³ λ₯΄κΈ°',
diff --git a/src/stories/molecules/InfoBox.stories.tsx b/src/stories/molecules/InfoBox.stories.tsx
index 145b1a2f..fb3f13b5 100644
--- a/src/stories/molecules/InfoBox.stories.tsx
+++ b/src/stories/molecules/InfoBox.stories.tsx
@@ -9,13 +9,13 @@ const meta: Meta = {
parameters: {
layout: 'centered',
},
- tags: ['autodocs'],
argTypes: {
title: { control: { type: 'text' } },
prefix: { control: { type: 'text' } },
commentContent: { control: { type: 'text' } },
commentCount: { control: { type: 'number' } },
bookmarks: { control: { type: 'number' } },
+ onClick: { action: 'ν΄λ¦ μ΄λ²€νΈ λ°μ' },
},
args: {
title: '맨λ μΌκ·Ό μκΈ 500 λκΈ°μ
VS μ£Ό4μΌ μκΈ 250 μΉΌν΄κ·Ό μ€μ',
@@ -40,10 +40,11 @@ export const Default: Story = {
};
export const All: Story = {
- render: () => (
+ render: (args) => (
-
+
+
),
};
diff --git a/src/stories/molecules/ContentsButton.stories.tsx b/src/stories/molecules/ContentsButton.stories.tsx
index 6d92cb92..4d8623e0 100644
--- a/src/stories/molecules/ContentsButton.stories.tsx
+++ b/src/stories/molecules/ContentsButton.stories.tsx
@@ -10,7 +10,6 @@ const meta: Metaνλ λ΄μ, νμμ 보 μμ , νμνν΄ λ²νΌ
-
+
-
+
νλ λ΄μ, νμμ 보 μμ , νμνν΄ λ²νΌ
+-
= { parameters: { layout: 'centered', }, - tags: ['autodocs'], argTypes: { title: { control: { type: 'text' } }, commentCount: { control: { type: 'number' } }, bookmarks: { control: { type: 'number' } }, showBookmark: { control: { type: 'boolean' } }, bookmarked: { control: { type: 'boolean' } }, + onClick: { action: 'ν΄λ¦ μ΄λ²€νΈ λ°μ' }, }, args: { title: 'λ΄κ° μμ±ν κ²μκΈ', @@ -40,10 +40,11 @@ export const Default: Story = { }; export const All: Story = { - render: () => ( + render: (args) => ( = { title: 'molecules/OptionSelector', component: OptionSelector, - tags: ['autodocs'], argTypes: { options: { control: { type: 'object' }, }, selectedOption: { control: { type: 'radio' }, - options: ['λ΄κ° μ μ₯ν', 'λ΄κ° ν¬νν', 'λ΄κ° λκΈλ¨', 'λ΄κ° μμ±ν'], + options: ['bookmarks', 'votes', 'comments', 'written'], }, + onSelect: { action: 'Option μ νλ¨' }, }, args: { - options: ['λ΄κ° μ μ₯ν', 'λ΄κ° ν¬νν', 'λ΄κ° λκΈλ¨', 'λ΄κ° μμ±ν'], - selectedOption: 'λ΄κ° λκΈλ¨', - onSelect: (option: string) => console.log(`μ νλ νλͺ©μ ${option} μ λλ€`), + options: [ + { label: 'λ΄κ° μ μ₯ν', value: 'bookmarks' }, + { label: 'λ΄κ° ν¬νν', value: 'votes' }, + { label: 'λ΄κ° λκΈλ¨', value: 'comments' }, + { label: 'λ΄κ° μμ±ν', value: 'written' }, + ], + selectedOption: 'comments', }, -} satisfies Meta ; +}; export default meta; type Story = StoryObj ; export const Default: Story = { args: { - options: ['λ΄κ° μ μ₯ν', 'λ΄κ° ν¬νν', 'λ΄κ° λκΈλ¨', 'λ΄κ° μμ±ν'], - selectedOption: 'λ΄κ° λκΈλ¨', - onSelect: (option: string) => console.log(`μ νλ νλͺ©μ ${option} μ λλ€`), + options: [ + { label: 'λ΄κ° μ μ₯ν', value: 'bookmarks' }, + { label: 'λ΄κ° ν¬νν', value: 'votes' }, + { label: 'λ΄κ° λκΈλ¨', value: 'comments' }, + { label: 'λ΄κ° μμ±ν', value: 'written' }, + ], + selectedOption: 'comments', }, }; export const All: Story = { args: { - options: ['λ΄κ° μ μ₯ν', 'λ΄κ° ν¬νν', 'λ΄κ° λκΈλ¨', 'λ΄κ° μμ±ν'], - onSelect: (option: string) => console.log(`μ νλ νλͺ©μ ${option} μ λλ€`), + options: [ + { label: 'λ΄κ° μ μ₯ν', value: 'bookmarks' }, + { label: 'λ΄κ° ν¬νν', value: 'votes' }, + { label: 'λ΄κ° λκΈλ¨', value: 'comments' }, + { label: 'λ΄κ° μμ±ν', value: 'written' }, + ], }, render: (args) => ( -
λ΄κ° μ μ₯ν Tab
-+ -
λ΄κ° ν¬νν Tab
-+ -
λ΄κ° λκΈλ¨ Tab
-+ -
λ΄κ° μμ±ν Tab
-+
= { title: 'molecules/SearchGameList', @@ -8,14 +10,12 @@ const meta: Meta = { parameters: { layout: 'centered', }, - tags: ['autodocs'], }; export default meta; type Story = StoryObj ; const gameListSample = { - id: '', optionAImg: SampleFirst, optionBImg: SampleSecond, title: 'μ μ§ VS λ―Όμ§ μ¬λ³΅ κ³ λ₯΄κΈ°', @@ -23,22 +23,42 @@ const gameListSample = { subTag: 'μΌλ§λ λ§λ 보μ', }; -export const Default: Story = { - args: { - gameList: Array.from({ length: 9 }, (_, index) => ({ - ...gameListSample, - id: `game-${index + 1}`, - title: `${index + 1}λ² - μ μ§ VS λ―Όμ§ μ¬λ³΅ κ³ λ₯΄κΈ°`, - })), +const gameListDefault = Array.from({ length: 9 }, (_, index) => ({ + ...gameListSample, + id: index + 1, + title: `${index + 1}λ² - μ μ§ VS λ―Όμ§ μ¬λ³΅ κ³ λ₯΄κΈ°`, +})); + +const gameListAll = [ + { + ...gameListSample, + id: 1, + title: 'μ μ§ VS λ―Όμ§ μ¬λ³΅ κ³ λ₯΄κΈ°', + }, + { + ...gameListSample, + id: 2, + title: 'μ§μ₯μΈ VS λνμ μΆκ·Όλ£©', + }, + { + ...gameListSample, + id: 3, + title: 'λ΄ VS κ°μ ν¨μ μ ν', }, +]; + +export const Default: Story = { + render: (args) => ( + + + ), }; export const All: Story = { - args: { - gameList: Array.from({ length: 9 }, (_, index) => ({ - ...gameListSample, - id: `game-${index + 1}`, - title: `${index + 1}λ² - μ μ§ VS λ―Όμ§ μ¬λ³΅ κ³ λ₯΄κΈ°`, - })), - }, + render: (args) => ( ++ + + ), }; diff --git a/src/stories/molecules/SearchTalkPickList.stories.tsx b/src/stories/molecules/SearchTalkPickList.stories.tsx index 41c632e2..32d74a02 100644 --- a/src/stories/molecules/SearchTalkPickList.stories.tsx +++ b/src/stories/molecules/SearchTalkPickList.stories.tsx @@ -2,90 +2,42 @@ /* eslint-disable @typescript-eslint/no-unsafe-call */ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; +import { BrowserRouter } from 'react-router-dom'; +import { SearchTalkPickListItem } from '@/types/search'; import { storyContainer, storyInnerContainer } from '@/stories/story.styles'; import SearchTalkPickList from '@/components/molecules/SearchTalkPickList/SearchTalkPickList'; import { SampleWhole } from '@/assets'; +const searchTalkPickSample: SearchTalkPickListItem[] = Array.from( + { length: 10 }, + (_, index) => ({ + id: 0, + title: `ν‘ν½ ${index + 1} - μΈκΈ° μμ`, + createdAt: '2024.08.26', + content: + 'μ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°νν', + firstImgUrl: SampleWhole, + keyword: 'μΈκΈ°', + }), +); + const meta = { title: 'molecules/SearchTalkPickList', component: SearchTalkPickList, tags: ['autodocs'], + decorators: [ + (Story) => ( ++ + + ), + ], argTypes: { searchTalkPickList: { control: { type: 'object' } }, }, args: { - searchTalkPickList: [ - { - title: 'μν΄ μ κ΅ VS μ‘΄μ μ°¨μμ°', - createdAt: '2024.08.26', - content: - 'μ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°νν', - firstImgUrl: SampleWhole, - }, - { - title: 'μν΄ μ κ΅ VS μ‘΄μ μ°¨μμ°', - createdAt: '2024.08.26', - content: - 'μ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°νν', - firstImgUrl: SampleWhole, - }, - { - title: 'μν΄ μ κ΅ VS μ‘΄μ μ°¨μμ°', - createdAt: '2024.08.26', - content: - 'μ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°νν', - firstImgUrl: SampleWhole, - }, - { - title: 'μν΄ μ κ΅ VS μ‘΄μ μ°¨μμ°', - createdAt: '2024.08.26', - content: - 'μ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°νν', - firstImgUrl: SampleWhole, - }, - { - title: 'μν΄ μ κ΅ VS μ‘΄μ μ°¨μμ°', - createdAt: '2024.08.26', - content: - 'μ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°νν', - firstImgUrl: SampleWhole, - }, - { - title: 'μν΄ μ κ΅ VS μ‘΄μ μ°¨μμ°', - createdAt: '2024.08.26', - content: - 'μ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°νν', - firstImgUrl: SampleWhole, - }, - { - title: 'μν΄ μ κ΅ VS μ‘΄μ μ°¨μμ°', - createdAt: '2024.08.26', - content: - 'μ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°νν', - firstImgUrl: SampleWhole, - }, - { - title: 'μν΄ μ κ΅ VS μ‘΄μ μ°¨μμ°', - createdAt: '2024.08.26', - content: - 'μ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°νν', - firstImgUrl: SampleWhole, - }, - { - title: 'μν΄ μ κ΅ VS μ‘΄μ μ°¨μμ°', - createdAt: '2024.08.26', - content: - 'μ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°νν', - firstImgUrl: SampleWhole, - }, - { - title: 'μν΄ μ κ΅ VS μ‘΄μ μ°¨μμ°', - createdAt: '2024.08.26', - content: - 'μ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°νν', - firstImgUrl: SampleWhole, - }, - ], + searchTalkPickList: searchTalkPickSample, + keyword: 'μ°νν', }, } satisfies Meta+ ; @@ -103,13 +55,16 @@ export const Default: Story = { args: { searchTalkPickList: [ { + id: 0, title: 'μν΄ μ κ΅ VS μ‘΄μ μ°¨μμ°', createdAt: '2024.08.26', content: 'μ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°ννμ°νν', firstImgUrl: SampleWhole, + keyword: 'μ°νν', }, ], + keyword: 'μ°νν', }, }; @@ -119,7 +74,10 @@ export const All: Story = { -
Single SearchTalkPickList
-+ - @@ -129,7 +87,7 @@ export const All: Story = {
-
None
-+
= { @@ -11,15 +12,18 @@ const meta: Meta = { parameters: { layout: 'centered', }, - argTypes: { contents: { control: 'object', }, selectedValue: { control: 'select', - options: ['trend', 'recent'], + options: [ + { field: 'views', order: 'desc' }, + { field: 'createdAt', order: 'desc' }, + ], }, + activeTab: { control: 'select', options: ['μΈκΈ°', '컀ν', 'μ·¨ν₯', 'μλμ»΅'], @@ -44,10 +48,6 @@ const meta: Meta = { bookmarkState: false, }, ], - selectedValue: 'trend', - activeTab: 'μΈκΈ°', - setSelectedValue: (value) => console.log('setSelectedValue:', value), - setActiveTab: (value) => console.log('setActiveTab:', value), }, }; @@ -55,105 +55,106 @@ export default meta; type Story = StoryObj ; export const Default: Story = { - args: { - contents: [ - { - images: [SampleFirst, SampleSecond], - id: 1, - title: 'λ§μ μ§νμ² 1μκ° λ±κ΅ VS μ’μ λλν λ²μ€ 2μκ° λ±κ΅', - mainTag: 'μΈκΈ°', - subTag: 'νμ μ μ€μ¬', - bookmarkState: true, - }, - { - images: [SampleFirst, SampleSecond], - id: 2, - title: 'λ§μ μ§νμ² 1μκ° λ±κ΅ VS μ’μ λλν λ²μ€ 2μκ° λ±κ΅', - mainTag: 'μΈκΈ°', - subTag: 'νμ μ μ€μ¬', - bookmarkState: false, - }, - ], - selectedValue: 'trend', - activeTab: 'μΈκΈ°', - setSelectedValue: (value) => console.log('setSelectedValue:', value), - setActiveTab: (value) => console.log('setActiveTab:', value), - }, -}; + render: (args) => { + const [selectedValue, setSelectedValue] = useState ({ + field: 'views', + order: 'desc', + }); + const [activeTab, setActiveTab] = useState< + 'μΈκΈ°' | '컀ν' | 'μ·¨ν₯' | 'μλμ»΅' + >('μΈκΈ°'); -export const All: Story = { - render: (args) => ( - -
-
-
-
νλμ νλͺ©
-console.log('setSelectedValue:', value)} - activeTab={args.activeTab} - setActiveTab={(value) => console.log('setActiveTab:', value)} - /> -
-
- -
-
λ€μμ νλͺ©
+ return ( +console.log('setSelectedValue:', value)} - setActiveTab={(value) => console.log('setActiveTab:', value)} + selectedValue={selectedValue} + setSelectedValue={setSelectedValue} + activeTab={activeTab} + setActiveTab={setActiveTab} /> -
+
+ );
+ },
+};
- -
-
λ΄μ© μμ
-console.log('setSelectedValue:', value)} - activeTab={args.activeTab} - setActiveTab={(value) => console.log('setActiveTab:', value)} - /> -
-
({ + field: 'views', + order: 'desc', + }); + const [activeTab, setActiveTab] = useState< + 'μΈκΈ°' | '컀ν' | 'μ·¨ν₯' | 'μλμ»΅' + >('μΈκΈ°'); + + const scenarios = [ { - images: [SampleFirst, SampleSecond], - id: 2, - title: 'λ§μ μ§νμ² 1μκ° λ±κ΅ VS μ’μ λλν λ²μ€ 2μκ° λ±κ΅', - mainTag: 'μΈκΈ°', - subTag: 'νμ μ μ€μ¬', - bookmarkState: false, + title: 'νλμ νλͺ©', + contents: [ + { + images: [SampleFirst, SampleSecond], + id: 1, + title: 'λ§μ μ§νμ² 1μκ° λ±κ΅ VS μ’μ λλν λ²μ€ 2μκ° λ±κ΅', + mainTag: 'μΈκΈ°', + subTag: 'νμ μ μ€μ¬', + bookmarkState: true, + }, + ], }, { - images: [SampleFirst, SampleSecond], - id: 3, - title: 'λ§μ μ§νμ² 1μκ° λ±κ΅ VS μ’μ λλν λ²μ€ 2μκ° λ±κ΅', - mainTag: 'μΈκΈ°', - subTag: 'νμ μ μ€μ¬', - bookmarkState: false, + title: 'λ€μμ νλͺ©', + contents: [ + { + images: [SampleFirst, SampleSecond], + id: 1, + title: 'λ§μ μ§νμ² 1μκ° λ±κ΅ VS μ’μ λλν λ²μ€ 2μκ° λ±κ΅', + mainTag: 'μΈκΈ°', + subTag: 'νμ μ μ€μ¬', + bookmarkState: true, + }, + { + images: [SampleFirst, SampleSecond], + id: 2, + title: 'μ’μ λλν λ²μ€ 2μκ° λ±κ΅ VS μμ κ±° 30λΆ λ±κ΅', + mainTag: '컀ν', + subTag: 'μ νμ κ³ λ―Ό', + bookmarkState: false, + }, + { + images: [SampleFirst, SampleSecond], + id: 3, + title: '10λ ν ν΄μ¬ VS λΉμ₯ ν΄μ¬', + mainTag: 'μ·¨ν₯', + subTag: 'κ³ λ―Όμ μκ°', + bookmarkState: true, + }, + ], }, { - images: [SampleFirst, SampleSecond], - id: 4, - title: 'λ§μ μ§νμ² 1μκ° λ±κ΅ VS μ’μ λλν λ²μ€ 2μκ° λ±κ΅', - mainTag: 'μΈκΈ°', - subTag: 'νμ μ μ€μ¬', - bookmarkState: false, + title: 'λ΄μ© μμ', + contents: [], }, - ], - selectedValue: 'trend', - activeTab: 'μΈκΈ°', - setSelectedValue: (value) => console.log('setSelectedValue:', value), - setActiveTab: (value) => console.log('setActiveTab:', value), + ]; + + return ( + + + ); }, }; diff --git a/src/stories/organisms/CommentsSection.stories.tsx b/src/stories/organisms/CommentsSection.stories.tsx index bb6d9c9c..eeffeab6 100644 --- a/src/stories/organisms/CommentsSection.stories.tsx +++ b/src/stories/organisms/CommentsSection.stories.tsx @@ -1,12 +1,12 @@ import React from 'react'; import { ProfileSample } from '@/assets'; -import { ToggleGroupItem } from '@/components/atoms/ToggleGroup/ToggleGroup'; import type { Meta, StoryObj } from '@storybook/react'; import store from '@/store'; import { Provider } from 'react-redux'; import ReactQueryProvider from '@/providers/ReactQueryProvider'; import { Comment, CommentsPagination } from '@/types/comment'; import CommentsSection from '@/components/organisms/CommentsSection/CommentsSection'; +import { ToggleGroupItem } from '@/types/toggle'; import { storyContainer, storyInnerContainer } from '@/stories/story.styles'; const exampleCommentList: Comment[] = Array.from({ length: 7 }, (_, index) => ({ @@ -61,11 +61,11 @@ const exampleCommentPagination: CommentsPagination = { const toggleItem: ToggleGroupItem[] = [ { label: 'μΈκΈ°μ', - value: 'trend', + value: { field: 'trend', order: 'desc' }, }, { label: 'μ΅μ μ', - value: 'recent', + value: { field: 'recent', order: 'desc' }, }, ]; @@ -75,12 +75,11 @@ const meta: Meta-
+ {scenarios.map(({ title, contents }) => (
+
-
+
{title}
++
+ ))}
+
= { parameters: { layout: 'centered', }, - tags: ['autodocs'], args: { commentList: exampleCommentPagination, voted: true, toggleItem, - selectedValue: 'trend', + selectedValue: { field: 'trend', order: 'desc' }, setToggleValue: () => {}, }, argTypes: { diff --git a/src/stories/organisms/InfoList.stories.tsx b/src/stories/organisms/InfoList.stories.tsx index fb3b0b3b..84c52b7a 100644 --- a/src/stories/organisms/InfoList.stories.tsx +++ b/src/stories/organisms/InfoList.stories.tsx @@ -1,12 +1,12 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import InfoList from '@/components/organisms/InfoList/InfoList'; +import { MemoryRouter } from 'react-router-dom'; import { storyContainer, storyInnerContainer } from '@/stories/story.styles'; const meta = { title: 'organisms/InfoList', component: InfoList, - tags: ['autodocs'], argTypes: { items: { control: { type: 'object' }, @@ -17,7 +17,7 @@ const meta = { { id: 1, editedAt: '2024.08.06', - title: 'λ§€λ¬ μλ₯΄ μλ£ 500 λκΈ°μ VS μ£Ό4μΌ μΌκΈ 250 μΉΌν΄κ·Ό μ€μ', + title: 'λ§€λ¬ μλ₯΄λ°μ΄νΈ μλ£ 500 λκΈ°μ VS μ£Ό4μΌ μΌκΈ 250 μΉΌν΄κ·Ό μ€μ', prefix: 'λ΄ λκΈ', commentContent: 'λλ λ°λ₯ λ λ¦κ³ μ΄λνλκ² κΏμ΄λΌκ΅¬^^', commentCount: 172, @@ -26,9 +26,9 @@ const meta = { { id: 2, editedAt: '2024.08.06', - title: 'λ§€μΌ 5λ¬λ μμ VS λ§€μΌ μ©λ 10λ§μ μλΉ ', + title: 'λ§€μΌ 5λ¬λΌ μλΉ VS λ§€μΌ μ©λ 10λ§μ μλΉ ', prefix: 'λ΄ λκΈ', - commentContent: 'μμ κ³ μνμκ³ , 10λ§μμΌλ‘ λ°°λ¬μμ λ¨Ήμκ²μ', + commentContent: 'κ°λλ€λΌλ§λ°μ¬', commentCount: 172, bookmarks: 172, }, @@ -41,15 +41,6 @@ const meta = { commentCount: 172, bookmarks: 172, }, - { - id: 4, - editedAt: '2024.08.04', - title: 'λ§μμ λ―Έμκ° μΆμ μ¬μΉ VS λ¨Ήλ°© BJ κΏλ무 μ§λ°₯ μ¬μΉ', - prefix: 'λ΄ λκΈ', - commentContent: 'μ§μν μ§λ°₯ μ§μ§ μ«λ€κ΅¬', - commentCount: 172, - bookmarks: 172, - }, ], }, } satisfies Meta ; @@ -57,127 +48,35 @@ const meta = { export default meta; type Story = StoryObj ; -export const Default: Story = { - args: { +const groupedData = [ + { + date: '2024.08.06', items: [ { - id: 1, + id: 22, editedAt: '2024.08.06', - title: 'λ§€λ¬ μλ₯΄ μλ£ 500 λκΈ°μ VS μ£Ό4μΌ μΌκΈ 250 μΉΌν΄κ·Ό μ€μ', + title: 'λ§€λ¬ μλ₯΄λ°μ΄νΈ μλ£ 500 λκΈ°μ VS μ£Ό4μΌ μΌκΈ 250 μΉΌν΄κ·Ό μ€μ', prefix: 'λ΄ λκΈ', commentContent: 'λλ λ°λ₯ λ λ¦κ³ μ΄λνλκ² κΏμ΄λΌκ΅¬^^', commentCount: 172, bookmarks: 172, }, { - id: 2, + id: 27, editedAt: '2024.08.06', - title: 'λ§€μΌ 5λ¬λ μμ VS λ§€μΌ μ©λ 10λ§μ μλΉ ', - prefix: 'λ΄ λκΈ', - commentContent: 'μμ κ³ μνμκ³ , 10λ§μμΌλ‘ λ°°λ¬μμ λ¨Ήμκ²μ', - commentCount: 172, - bookmarks: 172, - }, - { - id: 3, - editedAt: '2024.08.05', - title: 'λ§€μΌ μ μ·¨ν λ§μ·¨λ¨μΉ VS μμ μκ² μ·¨ν μμ·¨λ¨μΉ', + title: 'λ§€μΌ 5λ¬λΌ μλΉ VS λ§€μΌ μ©λ 10λ§μ μλΉ ', prefix: 'λ΄ λκΈ', - commentContent: 'λ§€μΌ λΉμ§ νΈλ¦¬λμ€...', + commentContent: 'κ°λλ€λΌλ§λ°μ¬', commentCount: 172, bookmarks: 172, }, ], }, -}; - -export const All: Story = { - render: (args) => ( - -
-
-
-
2024.08.06
--
- -
-
2024.08.05
--
- -
-
2024.08.04
--
-
+ + ), +}; + +export const All: Story = { + render: (args) => ( ++ + + ), }; diff --git a/src/stories/organisms/MyBalanceGameList.stories.tsx b/src/stories/organisms/MyBalanceGameList.stories.tsx index a358ecc4..37a4bd91 100644 --- a/src/stories/organisms/MyBalanceGameList.stories.tsx +++ b/src/stories/organisms/MyBalanceGameList.stories.tsx @@ -2,12 +2,12 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import MyBalanceGameList from '@/components/organisms/MyBalanceGameList/MyBalanceGameList'; import { SampleFirst, SampleSecond } from '@/assets'; +import { MemoryRouter } from 'react-router-dom'; import { storyContainer, storyInnerContainer } from '@/stories/story.styles'; const meta: Meta-
+ {groupedData.map(({ date, items }) => (
+
-
+
{date}
++
+ ))}
+
= { title: 'organisms/MyBalanceGameList', component: MyBalanceGameList, - tags: ['autodocs'], argTypes: { items: { control: { type: 'object' }, @@ -16,34 +16,34 @@ const meta: Meta = { args: { items: [ { - id: 1, + gameId: 1, editedAt: '2024.08.06', title: 'μ μ§ μ¬λ³΅ ν¨μ VS λ―Όμ§ μ¬λ³΅ ν¨μ ', optionAImg: SampleFirst, optionBImg: SampleSecond, - mainTag: 'μΈκΈ°', + mainTagName: 'μΈκΈ°', subTag: 'νμ μ μ€μ¬', showBookmark: true, bookmarked: false, }, { - id: 2, + gameId: 2, editedAt: '2024.08.06', title: 'μ μ§ μ¬λ³΅ ν¨μ VS λ―Όμ§ μ¬λ³΅ ν¨μ ', optionAImg: SampleFirst, optionBImg: SampleSecond, - mainTag: 'μΈκΈ°', + mainTagName: 'μΈκΈ°', subTag: 'νμ μ μ€μ¬', showBookmark: true, bookmarked: true, }, { - id: 3, + gameId: 3, editedAt: '2024.08.05', title: 'μ μ§ μ¬λ³΅ ν¨μ VS λ―Όμ§ μ¬λ³΅ ν¨μ ', optionAImg: SampleFirst, optionBImg: SampleSecond, - mainTag: 'μΈκΈ°', + mainTagName: 'μΈκΈ°', subTag: 'νμ μ μ€μ¬', showBookmark: false, }, @@ -55,146 +55,77 @@ export default meta; type Story = StoryObj ; export const Default: Story = { - args: { - items: [ - { - id: 1, - editedAt: '2024.08.06', - title: 'μ μ§ μ¬λ³΅ ν¨μ VS λ―Όμ§ μ¬λ³΅ ν¨μ ', - optionAImg: SampleFirst, - optionBImg: SampleSecond, - mainTag: 'μΈκΈ°', - subTag: 'νμ μ μ€μ¬', - showBookmark: true, - bookmarked: false, - }, - { - id: 2, - editedAt: '2024.08.06', - title: 'μ μ§ μ¬λ³΅ ν¨μ VS λ―Όμ§ μ¬λ³΅ ν¨μ ', - optionAImg: SampleFirst, - optionBImg: SampleSecond, - mainTag: 'μΈκΈ°', - subTag: 'νμ μ μ€μ¬', - showBookmark: true, - bookmarked: true, - }, - { - id: 3, - editedAt: '2024.08.05', - title: 'μ μ§ μ¬λ³΅ ν¨μ VS λ―Όμ§ μ¬λ³΅ ν¨μ ', - optionAImg: SampleFirst, - optionBImg: SampleSecond, - mainTag: 'μΈκΈ°', - subTag: 'νμ μ μ€μ¬', - showBookmark: false, - }, - ], - }, + render: (args) => ( + + + ), }; export const All: Story = { render: (args) => ( -+ ---2024.08.06
-- -+ ), }; diff --git a/src/stories/organisms/MyContentList.stories.tsx b/src/stories/organisms/MyContentList.stories.tsx index 6a646c38..ba3225af 100644 --- a/src/stories/organisms/MyContentList.stories.tsx +++ b/src/stories/organisms/MyContentList.stories.tsx @@ -1,12 +1,12 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; +import { MemoryRouter } from 'react-router-dom'; import MyContentList from '@/components/organisms/MyContentList/MyContentList'; -import { storyContainer, storyInnerContainer } from '@/stories/story.styles'; +import { storyContainer } from '@/stories/story.styles'; const meta = { title: 'organisms/MyContentList', component: MyContentList, - tags: ['autodocs'], argTypes: { items: { control: { type: 'object' }, @@ -48,83 +48,11 @@ export default meta; type Story = StoryObj2024.08.05
-+ + +-++2024.08.06
++ +2024.08.05
++ ; export const Default: Story = { - args: { - items: [ - { - id: 1, - editedAt: '2024.08.06', - title: 'μ μ§ μ¬λ³΅ ν¨μ VS λ―Όμ§ μ¬λ³΅ ν¨μ ', - commentCount: 172, - bookmarks: 172, - showBookmark: true, - bookmarked: false, - }, - { - id: 2, - editedAt: '2024.08.06', - title: 'μ μ§ μ¬λ³΅ ν¨μ VS λ―Όμ§ μ¬λ³΅ ν¨μ ', - commentCount: 250, - bookmarks: 200, - showBookmark: true, - bookmarked: true, - }, - { - id: 3, - editedAt: '2024.08.05', - title: 'μ μ§ μ¬λ³΅ ν¨μ VS λ―Όμ§ μ¬λ³΅ ν¨μ ', - commentCount: 100, - bookmarks: 50, - showBookmark: false, - }, - ], - }, -}; - -export const All: Story = { render: (args) => ( - -
-
-
-
2024.08.06
--
- -
-
2024.08.05
--
-
+ ), }; diff --git a/src/stories/organisms/OptionBar.stories.tsx b/src/stories/organisms/OptionBar.stories.tsx index 1d98fb9a..a133ed76 100644 --- a/src/stories/organisms/OptionBar.stories.tsx +++ b/src/stories/organisms/OptionBar.stories.tsx @@ -1,20 +1,25 @@ -import React from 'react'; +import React, { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import OptionBar from '@/components/organisms/OptionBar/OptionBar'; -import { OptionKeys } from '@/constants/optionSets'; +import { OptionKeys, optionSets } from '@/constants/optionSets'; const meta: Meta+++ = { title: 'organisms/OptionBar', component: OptionBar, - tags: ['autodocs'], argTypes: { - initialSelectedGroupValue: { + selectedGroup: { control: { type: 'radio' }, options: [OptionKeys.TALK_PICK, OptionKeys.BALANCE_GAME], }, + selectedOption: { + control: { type: 'text' }, + }, + onGroupSelect: { action: 'κ·Έλ£Ή λ³κ²½' }, + onOptionSelect: { action: 'μ΅μ λ³κ²½' }, }, args: { - initialSelectedGroupValue: OptionKeys.TALK_PICK, + selectedGroup: OptionKeys.TALK_PICK, + selectedOption: optionSets[OptionKeys.TALK_PICK][0].value, }, }; @@ -22,35 +27,49 @@ export default meta; type Story = StoryObj ; export const Default: Story = { - args: { - selectGroupItems: [ - { label: 'ν‘ν½', value: OptionKeys.TALK_PICK }, - { label: 'λ°Έλ°μ€ κ²μ', value: OptionKeys.BALANCE_GAME }, - ], - initialSelectedGroupValue: OptionKeys.TALK_PICK, + render: (args) => { + const [selectedGroup, setSelectedGroup] = useState ( + args.selectedGroup, + ); + const [selectedOption, setSelectedOption] = useState ( + args.selectedOption, + ); + + return ( + { + setSelectedGroup(group); + setSelectedOption(optionSets[group][0].value); + args.onGroupSelect(group); + }} + onOptionSelect={(option) => { + setSelectedOption(option); + args.onOptionSelect(option); + }} + /> + ); }, }; export const All: Story = { render: (args) => ( -), diff --git a/src/stories/organisms/SearchGameListSection.stories.tsx b/src/stories/organisms/SearchGameListSection.stories.tsx index bb84bd06..b046ea58 100644 --- a/src/stories/organisms/SearchGameListSection.stories.tsx +++ b/src/stories/organisms/SearchGameListSection.stories.tsx @@ -1,7 +1,8 @@ -import React, { useState } from 'react'; +import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; import SearchGameListSection from '@/components/organisms/SearchGameListSection/SearchGameListSection'; import { SampleFirst, SampleSecond } from '@/assets'; +import { MemoryRouter } from 'react-router-dom'; const meta: Metaν‘ν½ μ νμ
+ν‘ν½ μ ν μ
- λ°Έλ°μ€ κ²μ μ νμ
+λ°Έλ°μ€ κ²μ μ ν μ
= { title: 'organisms/SearchGameListSection', @@ -9,17 +10,28 @@ const meta: Meta = { parameters: { layout: 'centered', }, + argTypes: { + onPageChange: { action: 'νμ΄μ§ λ³κ²½' }, + onSortChange: { action: 'μ λ ¬ λ³κ²½' }, + }, + decorators: [ + (Story) => ( + + + ), + ], }; export default meta; type Story = StoryObj+ ; const gameListSample = Array.from({ length: 18 }, (_, index) => ({ - optionAImg: SampleFirst, - optionBImg: SampleSecond, + id: index + 1, title: `κ²μ ${index + 1} - μ μ§ VS λ―Όμ§ μ¬λ³΅ κ³ λ₯΄κΈ°`, mainTag: 'μ·¨ν₯', subTag: 'μΌλ§λ λ§λ 보μ', + images: [SampleFirst, SampleSecond], })); export const Default: Story = { @@ -28,61 +40,7 @@ export const Default: Story = { keyword: 'μμ ν€μλ', selectedPage: 1, totalPages: 2, - sort: 'views', + sort: { field: 'views', order: 'desc' }, isLoading: false, - onPageChange: (page) => console.log(`νμ΄μ§ λ³κ²½: ${page}`), - onSortChange: (sort) => console.log(`μ λ ¬ λ³κ²½: ${sort}`), - }, -}; - -export const All: Story = { - render: (args) => { - const [sort, setSort] = useState('views'); - - const handleSortChange = (newSort: string) => { - setSort(newSort); - console.log(`μ λ ¬ λ³κ²½: ${newSort}`); - }; - - return ( - <> - --1νμ΄μ§
-- --2νμ΄μ§
-- -- - ); }, }; diff --git a/src/stories/organisms/SearchTalkPickListSection.stories.tsx b/src/stories/organisms/SearchTalkPickListSection.stories.tsx index e175f846..b4b59911 100644 --- a/src/stories/organisms/SearchTalkPickListSection.stories.tsx +++ b/src/stories/organisms/SearchTalkPickListSection.stories.tsx @@ -1,8 +1,10 @@ import React, { useState } from 'react'; import type { Meta, StoryObj } from '@storybook/react'; +import { BrowserRouter } from 'react-router-dom'; import SearchTalkPickListSection from '@/components/organisms/SearchTalkPickListSection/SearchTalkPickListSection'; import { SampleWhole } from '@/assets'; -import { SearchTalkPickItemProps } from '@/components/atoms/SearchTalkPickItem/SearchTalkPickItem'; +import { SearchTalkPickListItem } from '@/types/search'; +import { ToggleGroupValue } from '@/types/toggle'; const meta: Metaλ‘λ©μ€
-- = { title: 'organisms/SearchTalkPickListSection', @@ -10,14 +12,26 @@ const meta: Meta = { parameters: { layout: 'centered', }, + decorators: [ + (Story) => ( + + + ), + ], + argTypes: { + onPageChange: { action: 'νμ΄μ§ λ³κ²½' }, + onSortChange: { action: 'μ λ ¬ λ³κ²½' }, + }, }; export default meta; type Story = StoryObj+ ; -const searchTalkPickSample: SearchTalkPickItemProps[] = Array.from( +const searchTalkPickSample: SearchTalkPickListItem[] = Array.from( { length: 20 }, (_, index) => ({ + id: 0, title: `ν‘ν½ ${index + 1} - μΈκΈ° μμ`, createdAt: '2024.08.26', content: @@ -30,22 +44,23 @@ const searchTalkPickSample: SearchTalkPickItemProps[] = Array.from( export const Default: Story = { args: { searchTalkPickList: searchTalkPickSample.slice(0, 10), - keyword: 'μμ ν€μλ', + keyword: 'μΈκΈ°', selectedPage: 1, totalPages: 2, - sort: 'views', - onPageChange: (page) => console.log(`νμ΄μ§ λ³κ²½: ${page}`), - onSortChange: (sort) => console.log(`μ λ ¬ λ³κ²½: ${sort}`), + sort: { field: 'views', order: 'desc' }, }, }; export const All: Story = { render: (args) => { - const [sort, setSort] = useState('views'); + const [sort, setSort] = useState ({ + field: 'views', + order: 'desc', + }); - const handleSortChange = (newSort: string) => { + const handleSortChange = (newSort: ToggleGroupValue) => { setSort(newSort); - console.log(`μ λ ¬ λ³κ²½: ${newSort}`); + args.onSortChange?.(newSort); }; return ( diff --git a/src/stories/organisms/SearchTalkPickResult.stories.tsx b/src/stories/organisms/SearchTalkPickResult.stories.tsx index 8333b13f..efd99d26 100644 --- a/src/stories/organisms/SearchTalkPickResult.stories.tsx +++ b/src/stories/organisms/SearchTalkPickResult.stories.tsx @@ -1,13 +1,14 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; +import { SearchTalkPickListItem } from '@/types/search'; import SearchTalkPickResult from '@/components/organisms/SearchTalkPickResult/SearchTalkPickResult'; import { BrowserRouter } from 'react-router-dom'; import { SampleWhole } from '@/assets'; -import type { SearchTalkPickItemProps } from '@/components/atoms/SearchTalkPickItem/SearchTalkPickItem'; -const SearchTalkPickItems: SearchTalkPickItemProps[] = Array.from( +const SearchTalkPickItems: SearchTalkPickListItem[] = Array.from( { length: 4 }, (_, index) => ({ + id: 0, title: `ν‘ν½ ${index + 1} - μν΄ μ κ΅ VS μ‘΄μ μ°¨μμ°`, createdAt: '2024.08.26', content: 'μ°ννμ°νν λ΄μ©μ λλ€.', diff --git a/src/stories/organisms/SideBar.stories.tsx b/src/stories/organisms/SideBar.stories.tsx index e60610b6..7d055c68 100644 --- a/src/stories/organisms/SideBar.stories.tsx +++ b/src/stories/organisms/SideBar.stories.tsx @@ -1,6 +1,9 @@ import React from 'react'; import type { Meta, StoryObj } from '@storybook/react'; -import SideBar from '@/components/organisms/SideBar/SideBar'; +import { MemoryRouter } from 'react-router-dom'; +import SideBar, { + LoadedSideBarProps, +} from '@/components/organisms/SideBar/SideBar'; import { storyContainer, storyInnerContainer } from '@/stories/story.styles'; import { ProfileInfoSample } from '@/assets'; @@ -32,54 +35,63 @@ export const Default: Story = { postsCount: 23, bookmarkedPostsCount: 21, isLoading: false, - }, + } as LoadedSideBarProps, + render: (args) => ( + + + ), }; export const All: Story = { render: (args) => ( -+ -
-
-
-
κΈ°λ³Έ SideBar
--
- -
-
νλ‘ν μ΄λ―Έμ§ μλ κ²½μ°(settingsλ normalλ‘ μ€μ )
--
- -
-
κ²μκΈ μΉ΄μ΄νΈμ μ μ₯ν κΈ μΉ΄μ΄νΈ λ€λ₯Έ κ²½μ°
--
- -
-
λ‘λ©μ€μΈ κ²½μ°
--
-
+ ), args: { + isLoading: false, nickname: 'Aycho', profileImageUrl: ProfileInfoSample, postsCount: 23, bookmarkedPostsCount: 21, - isLoading: false, - }, + } as LoadedSideBarProps, }; diff --git a/src/stories/organisms/TalkPickListSection.stories.tsx b/src/stories/organisms/TalkPickListSection.stories.tsx index a6672f71..ab461495 100644 --- a/src/stories/organisms/TalkPickListSection.stories.tsx +++ b/src/stories/organisms/TalkPickListSection.stories.tsx @@ -58,7 +58,7 @@ const meta = { }, args: { talkPickList: exampleTalkPickPagination, - selectedValue: 'views', + selectedValue: { field: 'views', order: 'desc' }, setToggleValue: () => {}, selectedPage: 1, handlePageChange: () => {}, diff --git a/src/styles/color.ts b/src/styles/color.ts index d93c4917..42f3bc75 100644 --- a/src/styles/color.ts +++ b/src/styles/color.ts @@ -5,8 +5,8 @@ const color = { 1: '#8C8C8C', 2: '#D9D9D9', 3: '#F1F1F1', - 4: '#555555', - 5: '#DEDEDE', + 4: '#E6E9EF', + 5: '#F6F7F9', }, WT: '#FFFFFF', WT_VIOLET: '#F2F3FF', diff --git a/src/types/game.ts b/src/types/game.ts index cc4738d9..f20ffee3 100644 --- a/src/types/game.ts +++ b/src/types/game.ts @@ -50,6 +50,12 @@ export interface GamesPagination extends PaginationType { content: GameContent[]; } +export interface GameParams { + page: number; + size: number; + tagName?: string; +} + export interface BalanceGameOption { id: number; name: string; @@ -76,6 +82,7 @@ export interface TempGameOption { name: string; description: string; fileId?: number | null; + imgUrl?: string; optionType: 'A' | 'B'; } diff --git a/src/types/mypages.ts b/src/types/mypages.ts index f48322c0..b6f65cef 100644 --- a/src/types/mypages.ts +++ b/src/types/mypages.ts @@ -1,4 +1,3 @@ -import { SideBarProps } from '@/components/organisms/SideBar/SideBar'; import { InfoItem } from '@/components/organisms/InfoList/InfoList'; import { MyContentItem } from '@/components/organisms/MyContentList/MyContentList'; import { MyBalanceGameItem } from '@/components/organisms/MyBalanceGameList/MyBalanceGameList'; @@ -31,4 +30,11 @@ export interface GameBookmark extends PaginationType { content: MyBalanceGameItem[]; } -export interface SideBar extends SideBarProps {} +export interface SideBar { + id: number; + nickname: string; + profileImageUrl: string; + createdAt: string; + postsCount: number; + bookmarkedPostsCount: number; +} diff --git a/src/types/search.ts b/src/types/search.ts index eaa82178..eafd90a5 100644 --- a/src/types/search.ts +++ b/src/types/search.ts @@ -1,6 +1,7 @@ import { PaginationType } from '@/types/pagination'; -interface GameItem { +export interface GameListItem { + gameSetId: number; optionAImg: string; optionBImg: string; title: string; @@ -8,7 +9,8 @@ interface GameItem { subTag: string; } -interface SearchTalkPickItem { +export interface SearchTalkPickListItem { + id: number; title: string; createdAt: string; content: string; @@ -17,11 +19,11 @@ interface SearchTalkPickItem { } export interface TalkPickResult extends PaginationType { - content: SearchTalkPickItem[]; + content: SearchTalkPickListItem[]; query: string; } export interface GameResult extends PaginationType { - content: GameItem[]; + content: GameListItem[]; query: string; } diff --git a/src/types/toggle.ts b/src/types/toggle.ts new file mode 100644 index 00000000..1cd920b2 --- /dev/null +++ b/src/types/toggle.ts @@ -0,0 +1,15 @@ +export type ToggleGroupValue = { + field: string; + order: 'asc' | 'desc'; +}; + +export type ToggleGroupItem = { + label: string; + value: ToggleGroupValue; +}; + +export interface ToggleGroupProps { + items?: ToggleGroupItem[]; + selectedValue?: ToggleGroupValue; + onClick?: (value: ToggleGroupValue) => void; +} diff --git a/src/utils/balanceGameUtils.ts b/src/utils/balanceGameUtils.ts index 42e89054..d3386e98 100644 --- a/src/utils/balanceGameUtils.ts +++ b/src/utils/balanceGameUtils.ts @@ -8,7 +8,7 @@ export const createInitialGameStages = (totalStage: number): BalanceGameSet[] => id: idx * 2, name: '', imgUrl: '', - fileId: 0, + fileId: null, description: '', optionType: 'A', }, @@ -16,7 +16,7 @@ export const createInitialGameStages = (totalStage: number): BalanceGameSet[] => id: idx * 2 + 1, name: '', imgUrl: '', - fileId: 0, + fileId: null, description: '', optionType: 'B', }, diff --git a/src/utils/cookie.ts b/src/utils/cookie.ts new file mode 100644 index 00000000..4ec56543 --- /dev/null +++ b/src/utils/cookie.ts @@ -0,0 +1,9 @@ +export const getCookie = (name: string): string | null => { + const cookies = document.cookie.split('; '); + const cookie = cookies.find((c) => c.startsWith(`${name}=`)); + return cookie ? cookie.split('=')[1] : null; +}; + +export const deleteCookie = (name: string): void => { + document.cookie = `${name}=; path=/; max-age=0;`; +}; diff --git a/src/utils/validateUrlParam.ts b/src/utils/validateUrlParam.ts new file mode 100644 index 00000000..479e1db2 --- /dev/null +++ b/src/utils/validateUrlParam.ts @@ -0,0 +1,16 @@ +/** + * URLμμ κ°μ Έμ¨ νλΌλ―Έν° κ°μ κ²μ¦νκ³ , μ ν¨νμ§ μμ κ²½μ° κΈ°λ³Έκ°μ λ°νν©λλ€. + * + * @template T - νλΌλ―Έν° κ°μ νμ (μ: λ¬Έμμ΄) + * @param param - URLμμ κ°μ Έμ¨ νλΌλ―Έν° κ° (string | null) + * @param defaultValue - κΈ°λ³Έκ°μΌλ‘ λ°νν κ° + * @param isValid - νλΌλ―Έν° κ°μ μ ν¨μ±μ κ²μ¬νλ ν¨μ + * @returns κ²μ¦λ νλΌλ―Έν° κ° λλ κΈ°λ³Έκ° + */ +export const validateUrlParam =-
+
-
+
κΈ°λ³Έ SideBar
++
+ -
+
νλ‘ν μ΄λ―Έμ§ μλ κ²½μ°
++
+ -
+
κ²μκΈ μΉ΄μ΄νΈμ μ μ₯ν κΈ μΉ΄μ΄νΈ λ€λ₯Έ κ²½μ°
++
+ -
+
λ‘λ©μ€μΈ κ²½μ°
++
+
( + param: string | null, + defaultValue: T, + isValid: (value: string) => boolean, +): T => { + return param && isValid(param) ? (param as T) : defaultValue; +};