-
-
+ {isMobile ? (
+ <>
+
+
+
+ ) : (
+ <>
+
+
+
+ )}
);
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/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 (
+
+
+ );
+};
+
+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/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/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) => {
+
+ )}
+
+
+
+
+ ) : (
-
{talkPick?.title}
diff --git a/src/components/molecules/TopBanner/TopBanner.style.ts b/src/components/molecules/TopBanner/TopBanner.style.ts index 3ab1dc2c..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: '#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/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 ca7eb84a..37bc8a1f 100644 --- a/src/components/organisms/BalanceGameList/BalanceGameList.tsx +++ b/src/components/organisms/BalanceGameList/BalanceGameList.tsx @@ -1,3 +1,5 @@ +/* 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'; @@ -8,6 +10,7 @@ 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 { @@ -18,6 +21,7 @@ export interface ContentListProps { setActiveTab: React.Dispatch< React.SetStateAction<'인기' | '커플' | '취향' | '월드컵'> >; + isMobile?: boolean; } const BalanceGameList = ({ @@ -26,6 +30,7 @@ const BalanceGameList = ({ setSelectedValue, activeTab, setActiveTab, + isMobile = false, }: ContentListProps) => { const [visibleItems, setVisibleItems] = useState(4);
const navigate = useNavigate();
@@ -56,17 +61,29 @@ const BalanceGameList = ({
diff --git a/src/components/molecules/TopBanner/TopBanner.style.ts b/src/components/molecules/TopBanner/TopBanner.style.ts index 3ab1dc2c..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: '#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/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 ca7eb84a..37bc8a1f 100644 --- a/src/components/organisms/BalanceGameList/BalanceGameList.tsx +++ b/src/components/organisms/BalanceGameList/BalanceGameList.tsx @@ -1,3 +1,5 @@ +/* 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'; @@ -8,6 +10,7 @@ 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 { @@ -18,6 +21,7 @@ export interface ContentListProps { setActiveTab: React.Dispatch< React.SetStateAction<'인기' | '커플' | '취향' | '월드컵'> >; + isMobile?: boolean; } const BalanceGameList = ({ @@ -26,6 +30,7 @@ const BalanceGameList = ({ setSelectedValue, activeTab, setActiveTab, + isMobile = false, }: ContentListProps) => { const [visibleItems, setVisibleItems] = useState
주제별 밸런스 게임
-
-
{contents.slice(0, visibleItems).map((content) => (
}
>
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/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/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({
@@ -48,27 +51,48 @@ const LandingPage = () => {
};
return (
-
-
-
-
-
- {/*
+
+ ) : (
+ <>
+
- {accessToken ? (
-
+
+ {isMenuOpen && (
+
-
+
+ {/*
+
+ )}
+ {accessToken ? (
+
+
+ = {
},
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: () => (
+ = {
+ 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: () => (
+ = {
+ 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/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/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: () => (
-
{isServicePreparing && (
{NOTICE.STATUS.NOT_READY}
)}
);
};
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: Meta
-
+ {isMobile ? (
+
-
-
+
+ ) : (
+
+
+ 어떤 콘텐츠를 찾아볼까요?
+
+
+
+
+ )}
+
+ Default State
-Pressed State
--
+
-
+
모바일 톡&픽 플레이스
++
+ -
+
모바일 랜덤 밸런스 게임
++
+
-
+
-
+
톡픽
+console.log('TalkPick button clicked')} + /> +
+ -
+
밸런스 게임
+console.log('Game button clicked')} + /> +
+
-
+
+ ),
};
export const All: Story = {
render: (args) => (
-
+
),
args: {
isLoading: false,
diff --git a/src/styles/typo.ts b/src/styles/typo.ts
index 25ca55a7..9b4c4f93 100644
--- a/src/styles/typo.ts
+++ b/src/styles/typo.ts
@@ -130,7 +130,6 @@ const typo = {
letterSpacing: `${16 * -0.05}px`,
},
},
-
Mobile: {
Title: {
SemiBold_24: {
@@ -171,6 +170,13 @@ const typo = {
lineHeight: '1.6',
letterSpacing: `${16 * -0.05}px`,
},
+ Bold_12: {
+ fontFamily: 'Pretendard',
+ fontSize: '12px',
+ fontWeight: 700,
+ lineHeight: '1.6',
+ letterSpacing: `${12 * -0.05}px`,
+ },
SemiBold_20: {
fontFamily: 'Pretendard',
fontSize: '20px',
@@ -190,6 +196,21 @@ const typo = {
fontSize: '12px',
fontWeight: 600,
lineHeight: '1.3',
+ letterSpacing: `${12 * -0.05}px`,
+ },
+ SemiBold_10: {
+ fontFamily: 'Pretendard',
+ fontSize: '10px',
+ fontWeight: 600,
+ lineHeight: '1.6',
+ letterSpacing: `${10 * -0.05}px`,
+ },
+ SemiBold_7: {
+ fontFamily: 'Pretendard',
+ fontSize: '7.2px',
+ fontWeight: 600,
+ lineHeight: '1.6',
+ letterSpacing: `${7 * -0.05}px`,
},
Medium_16: {
fontFamily: 'Pretendard',
@@ -205,6 +226,13 @@ const typo = {
lineHeight: '1.3',
letterSpacing: `${12 * -0.05}px`,
},
+ Medium_8: {
+ fontFamily: 'Pretendard',
+ fontSize: '8.5px',
+ fontWeight: 500,
+ lineHeight: '1.3',
+ letterSpacing: `${8 * -0.05}px`,
+ },
},
},
From c790c8f4c052d4a2fa6bf5e2695a275b02052c48 Mon Sep 17 00:00:00 2001
From: Yoobin Seo <135022491+alwubin@users.noreply.github.com>
Date: Sat, 21 Dec 2024 22:51:14 +0900
Subject: [PATCH 2/3] =?UTF-8?q?refactor:=20=EB=B3=80=EA=B2=BD=EB=90=9C=20?=
=?UTF-8?q?=EB=B0=B8=EB=9F=B0=EC=8A=A4=EA=B2=8C=EC=9E=84=20=EC=A1=B0?=
=?UTF-8?q?=ED=9A=8C=20api=20=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0=20?=
=?UTF-8?q?=EC=88=98=EC=A0=95=20(#264)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* [style] : mobile typo 정의 및 Header mobile svg 추가
* [feat] : viewport 메타 태그 추가 및 미디어 쿼리 기본 스타일 적용
* [feat] : LandingPage에 사용되는 모바일 svg 추가
* [feat] : 모바일 Button 컴포넌트 구현
* [style] : 모바일 typo 추가
* [feat] : BalanceGameCategory 관련 모바일 스타일 추가
* [feat] : CategoryBox 관련 모바일 스타일 추가
* [feat] : SearchBar 모바일 스타일 추가
* [feat] : ContentsButton 모바일 스타일 추가
* [feat] : TopBanner 모바일 스타일 추가
* [feat] : 모바일 layout 정의
* [feat] : Mobile 컴포넌트 관련 svg 파일 추가
* [feat] : LandingPage 속 새로운 mobile 컴포넌트 UI 및 스토리북 구현
* [feat] : BalanceGameList 관련 모바일 스타일 추가
* [style] MobileCreateButton hover style 및 배경 색상 추가
* [feat] useIsMobile 훅 구현 및 반응형 적용
* [refactor] : 모바일 UI 컴포넌트 폴더 구조 변경 및 적용
* [feat] : DraftSaveButton 컴포넌트 UI 및 스토리북 구현
* [chore] : 모바일 UI 관련 폴더 구조 정리 및 파일 이동
* [refactor] : 스토리북 통일을 위해 Default/All로 수정
* [refactor] : 모바일 UI 스토리북 폴더 구조 수정
* [refactor] : TopBanner 모바일 dotStyling 수정
* [refactor] : 레이아웃 공백 요소의 불필요한 ARIA role 제거 및 접근성 개선
* [refactor] : 접근성 개선을 위한 aria-hidden 추가
* Update src/components/mobile/molecules/MobileCreateDropdown/MobileCreateDropdown.tsx
Co-authored-by: Banana_milk <101927445+WonJuneKim@users.noreply.github.com>
* [refactor] accessToken 타입 처리 개선
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* [refactor] : 로그인 핸들러 중복 로직 제거 및 개선
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
* [style] typo 누락 스타일 추가
* [refactor] : 컴포넌트 네이밍 수정
* [refactor] : 스토리북 속 porps 일부 action 적용
* [refactor] : 컴포넌트 네이밍 수정 및 적용
* [refactor] : 로그인 핸들러 중첩 함수 오류 수정
* [refactor] : 사용자 에이전트 문자열 검사 로직 개선
* [refactor] : 사용자 에이전트 문자열 검사 로직 수정
* [refactor] : 모바일 토글 defaultItem을 통해 종속성 제거
* [refactor] : 태그 제거 및 cosole 함수 action 기능으로 수정
* [refactor] : 인코딩 처리 명시
* [feat] : storybook custom viewport를 통해 모바일 UI 스토리북 구현
* [refactor] : 수정된 props 반영
* [refactor] : 밸런스게임 조회 파라미터 '인기' 태그에 대한 수정
* [refactor] : 밸런스게임 태그 상태값 수정 및 적용
* [refactor] : 밸런스 게임에 대한 인기순/최신순 api 동시 호출 분리
* [refactor] : activeTab의 기본값을 빈 문자열에서 '인기'로 변경하고 tagName 처리 로직 수정
* [refactor] : params 타입을 GameParams로 정의 및 조건 수정
* [refactor] : enabled 옵션을 통한 조건부 데이터 패칭 로직 수정
---------
Co-authored-by: Banana_milk <101927445+WonJuneKim@users.noreply.github.com>
Co-authored-by: coderabbitai[bot] <136622811+coderabbitai[bot]@users.noreply.github.com>
---
src/api/game.ts | 27 +++++++++++++++-----
src/hooks/api/game/useBestGameListQuery.ts | 3 ++-
src/hooks/api/game/useLatestGameListQuery.ts | 3 ++-
src/pages/LandingPage/LandingPage.tsx | 18 ++++++-------
src/types/game.ts | 6 +++++
5 files changed, 40 insertions(+), 17 deletions(-)
diff --git a/src/api/game.ts b/src/api/game.ts
index cd4ccf7b..49ff1299 100644
--- a/src/api/game.ts
+++ b/src/api/game.ts
@@ -4,6 +4,7 @@ import {
BalanceGame,
Game,
GameContent,
+ GameParams,
GameSet,
TempGame,
} from '@/types/game';
@@ -61,21 +62,35 @@ export const getNewGames = async () => {
};
export const getBestGames = async (tagName: string) => {
+ const params: GameParams = {
+ page: GAME_VALUE.PAGE,
+ size: GAME_VALUE.SIZE,
+ };
+
+ if (tagName !== '인기') {
+ params.tagName = tagName;
+ }
+
const { data } = await axiosInstance.get(
`${END_POINT.BEST_GAME}`,
- {
- params: { tagName, page: GAME_VALUE.PAGE, size: GAME_VALUE.SIZE },
- },
+ { params },
);
return data;
};
export const getLatestGames = async (tagName: string) => {
+ const params: GameParams = {
+ page: GAME_VALUE.PAGE,
+ size: GAME_VALUE.SIZE,
+ };
+
+ if (tagName !== '인기') {
+ params.tagName = tagName;
+ }
+
const { data } = await axiosInstance.get(
`${END_POINT.LATEST_GAME}`,
- {
- params: { tagName, page: GAME_VALUE.PAGE, size: GAME_VALUE.SIZE },
- },
+ { params },
);
return data;
};
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/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/pages/LandingPage/LandingPage.tsx b/src/pages/LandingPage/LandingPage.tsx
index 7a727514..7979912d 100644
--- a/src/pages/LandingPage/LandingPage.tsx
+++ b/src/pages/LandingPage/LandingPage.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useMemo } from 'react';
+import React, { useState } from 'react';
import TopBanner from '@/components/molecules/TopBanner/TopBanner';
import SearchTagBar from '@/components/molecules/SearchTagBar/SearchTagBar';
import CategoryBox from '@/components/molecules/CategoryBox/CategoryBox';
@@ -26,15 +26,15 @@ const LandingPage = () => {
'인기' | '커플' | '취향' | '월드컵'
>('인기');
- const { bestGames } = useBestGameList(activeTab);
- const { latestGames } = useLatestGameList(activeTab);
+ const isBestGamesEnabled =
+ activeTab === '인기' || selectedValue.field === 'views';
+ const isLatestGamesEnabled =
+ activeTab !== '인기' && selectedValue.field !== 'views';
- const contents = useMemo(() => {
- if (selectedValue.field === 'views') {
- return bestGames || [];
- }
- return latestGames || [];
- }, [selectedValue, bestGames, latestGames]);
+ const { bestGames } = useBestGameList(activeTab, isBestGamesEnabled);
+ const { latestGames } = useLatestGameList(activeTab, isLatestGamesEnabled);
+
+ const contents = bestGames || latestGames || [];
const handleService = () => {
setIsServicePreparing(true);
diff --git a/src/types/game.ts b/src/types/game.ts
index 1c8e38e2..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;
From a7bac45e8edb9960317204b38b0893cf738aa085 Mon Sep 17 00:00:00 2001
From: areumH <94692566+areumH@users.noreply.github.com>
Date: Mon, 23 Dec 2024 02:52:11 +0900
Subject: [PATCH 3/3] =?UTF-8?q?refactor:=20=EA=B2=80=EC=83=89=20=EA=B2=B0?=
=?UTF-8?q?=EA=B3=BC=20=ED=8E=98=EC=9D=B4=EC=A7=80=20=EB=A6=AC=ED=8C=A9?=
=?UTF-8?q?=ED=86=A0=EB=A7=81=20(#265)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
* refactor: 톡픽 검색 결과 아이템에 이미지가 있을 때만 이미지를 출력하도록 수정
* refactor: 톡픽 검색 결과에서의 내용이 한줄로 출력되지 않던 문제 해결
* refactor: 톡픽 검색 결과 아이템 클릭 시 해당 톡픽 페이지로 이동되도록 수정
* refactor: usePagination 훅을 page가 1부터 시작되도록 수정 및 페이지에 적용
* refactor: 검색 바에 텍스트 입력 후 엔터 키를 눌러도 버튼 클릭과 같은 기능이 수행되도록 수정
* refactor: 톡픽 상세 조회에서 톡픽의 내용에 줄바꿈이 적용되도록 스타일 수정
* refactor: 게임 검색 api 엔드포인트 수정
* refactor: 투표 바 블러 처리 위치 수정
* refactor: 투표 바 블러 스타일 수정
* refactor: 로그인 라우트 경로를 상수로 수정
* refactor: 검색 결과 아이템에 함수를 넘겨주도록 수정 및 경로를 상수로 수정
* refactor: 검색 결과 아이템 타입 오류 수정
* refactor: 톡픽 검색 결과 아이템에 key 값 추가
* refactor: 검색 결과 타입을 컴포넌트의 props가 아닌 type 폴더에 선언한 타입을 사용하도록 수정 및 스토리북 오류 수정
* refactor: SearchTalkPickList 컴포넌트 스토리북의 톡픽 배열 수정
* refactor: SearchTalkPickList 컴포넌트 스토리북 오류 수정
* refactor: 불필요한 SearchTalkPickItem의 key 값 제거
* refactor: 톡픽 수정 시 이동 경로 수정
* refactor: 불필요한 SearchTalkPickItem의 props 옵셔널 처리 수정
* refactor: 모바일 서치 바에 엔터 키 기능 추가
* refactor: ContentsButton 스타일 수정
* refactor: CategoryButton 스타일 수정
* refactor: SideBar 컴포넌트 스토리북 오류 수정
---
.../CategoryButton/CategoryButton.style.ts | 2 +-
src/components/atoms/SearchBar/SearchBar.tsx | 72 +++++++-----
.../SearchTalkPickItem.style.ts | 8 +-
.../SearchTalkPickItem/SearchTalkPickItem.tsx | 23 ++--
.../ContentsButton/ContentsButton.style.ts | 3 +-
.../SearchGameList/SearchGameList.tsx | 21 +---
.../SearchTalkPickList/SearchTalkPickList.tsx | 16 ++-
.../VotePrototype/VotePrototype.style.ts | 5 +-
.../molecules/VotePrototype/VotePrototype.tsx | 3 +-
.../SearchGameListSection.tsx | 7 +-
.../SearchGameResult/SearchGameResult.tsx | 7 +-
.../SearchTalkPickListSection.tsx | 4 +-
.../SearchTalkPickResult.tsx | 4 +-
.../TalkPickSection/TalkPickSection.style.ts | 7 +-
.../TalkPickSection/TalkPickSection.tsx | 7 +-
src/constants/api.ts | 2 +-
src/hooks/search/usePagination.ts | 6 +-
.../SearchResultsPage/SearchGamePage.tsx | 4 +-
.../SearchResultsPage/SearchTalkPickPage.tsx | 4 +-
.../TalkPickPlacePage/TalkPickPlacePage.tsx | 23 +---
.../molecules/SearchTalkPickList.stories.tsx | 106 ++++++------------
.../SearchTalkPickListSection.stories.tsx | 15 ++-
.../SearchTalkPickResult.stories.tsx | 5 +-
src/types/search.ts | 11 +-
24 files changed, 171 insertions(+), 194 deletions(-)
diff --git a/src/components/atoms/CategoryButton/CategoryButton.style.ts b/src/components/atoms/CategoryButton/CategoryButton.style.ts
index 8aa3392c..6d6f3648 100644
--- a/src/components/atoms/CategoryButton/CategoryButton.style.ts
+++ b/src/components/atoms/CategoryButton/CategoryButton.style.ts
@@ -19,7 +19,7 @@ export const categoryButtonBaseStyle = css({
'@media (max-width: 430px)': {
width: '164px',
height: '70px',
- padding: '5px 50px 14px',
+ padding: '5px 45px 14px 45px',
borderRadius: '7px',
border: '0.35px solid #dedede',
},
diff --git a/src/components/atoms/SearchBar/SearchBar.tsx b/src/components/atoms/SearchBar/SearchBar.tsx
index 52881857..7f0519bf 100644
--- a/src/components/atoms/SearchBar/SearchBar.tsx
+++ b/src/components/atoms/SearchBar/SearchBar.tsx
@@ -16,36 +16,46 @@ export interface SearchBarProps extends ComponentPropsWithoutRef<'input'> {
const SearchBar = (
{ onSearchClick, onInputChange, isMobile = false, ...props }: SearchBarProps,
ref: ForwardedRef,
-) => (
- ) => {
+ if (e.key === 'Enter') {
+ onSearchClick();
+ }
+ };
+
+ return (
+
diff --git a/src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx b/src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx
index 0014abe2..249344fd 100644
--- a/src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx
+++ b/src/components/molecules/SearchTalkPickList/SearchTalkPickList.tsx
@@ -1,12 +1,13 @@
import React from 'react';
-import SearchTalkPickItem, {
- SearchTalkPickItemProps,
-} from '@/components/atoms/SearchTalkPickItem/SearchTalkPickItem';
+import SearchTalkPickItem from '@/components/atoms/SearchTalkPickItem/SearchTalkPickItem';
+import { SearchTalkPickListItem } from '@/types/search';
+import { PATH } from '@/constants/path';
+import { useNavigate } from 'react-router-dom';
import Divider from '@/components/atoms/Divider/Divider';
import * as S from './SearchTalkPickList.style';
export interface SearchTalkPickListProps {
- searchTalkPickList: SearchTalkPickItemProps[];
+ searchTalkPickList: SearchTalkPickListItem[];
keyword: string;
}
@@ -14,6 +15,12 @@ const SearchTalkPickList = ({
searchTalkPickList,
keyword,
}: SearchTalkPickListProps) => {
+ const navigate = useNavigate();
+
+ const handleTalkPickClick = (talkPickId: number) => {
+ navigate(`/${PATH.TALKPICK(talkPickId)}`);
+ };
+
return (
-
+
+
),
};
diff --git a/src/stories/organisms/SideBar.stories.tsx b/src/stories/organisms/SideBar.stories.tsx
index 34999337..7d055c68 100644
--- a/src/stories/organisms/SideBar.stories.tsx
+++ b/src/stories/organisms/SideBar.stories.tsx
@@ -1,5 +1,6 @@
import React from 'react';
import type { Meta, StoryObj } from '@storybook/react';
+import { MemoryRouter } from 'react-router-dom';
import SideBar, {
LoadedSideBarProps,
} from '@/components/organisms/SideBar/SideBar';
@@ -35,49 +36,56 @@ export const Default: Story = {
bookmarkedPostsCount: 21,
isLoading: false,
} as LoadedSideBarProps,
+ render: (args) => (
+ 활동 내역, 회원정보 수정, 회원탈퇴 버튼
-
+
-
+
활동 내역, 회원정보 수정, 회원탈퇴 버튼
+-
-
-
-
기본 SideBar
--
- -
-
프로필 이미지 없는 경우
--
- -
-
게시글 카운트와 저장한 글 카운트 다른 경우
--
- -
-
로딩중인 경우
--
-
-
+
-
+
기본 SideBar
++
+ -
+
프로필 이미지 없는 경우
++
+ -
+
게시글 카운트와 저장한 글 카운트 다른 경우
++
+ -
+
로딩중인 경우
++
+
- {isMobile ? (
- <>
-
-
-
- ) : (
- <>
-
-
-
- )}
-
-);
+) => {
+ 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/molecules/ContentsButton/ContentsButton.style.ts b/src/components/molecules/ContentsButton/ContentsButton.style.ts
index f8ac8fbf..50a8539f 100644
--- a/src/components/molecules/ContentsButton/ContentsButton.style.ts
+++ b/src/components/molecules/ContentsButton/ContentsButton.style.ts
@@ -67,6 +67,7 @@ export const cardWrapper = (size: SizeType) => css`
}
@media (max-width: 430px) {
border-radius: 10px;
+ }
&:focus-visible {
outline: 1px solid ${color.BK};
@@ -79,8 +80,6 @@ export const imageContainer = (size: SizeType) => css`
width: 100%;
height: ${sizeStyles[size].imageHeight};
overflow: hidden;
- border-top-left-radius: 20px;
- border-top-right-radius: 20px;
`;
export const imageWrapper = css`
diff --git a/src/components/molecules/SearchGameList/SearchGameList.tsx b/src/components/molecules/SearchGameList/SearchGameList.tsx
index e8fb9d63..c80dd1be 100644
--- a/src/components/molecules/SearchGameList/SearchGameList.tsx
+++ b/src/components/molecules/SearchGameList/SearchGameList.tsx
@@ -1,21 +1,12 @@
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'
-> & {
- optionAImg?: string;
- optionBImg?: string;
- id: number;
-};
-
export interface SearchGameListProps {
- gameList: GameItem[];
+ gameList: GameListItem[];
keyword: string;
}
@@ -23,7 +14,7 @@ const SearchGameList = ({ gameList, keyword }: SearchGameListProps) => {
const navigate = useNavigate();
const handleItemClick = (gameId: number) => {
- navigate(`/balancegame/${gameId}`);
+ navigate(`/${PATH.BALANCEGAME(gameId)}`);
};
return (
@@ -38,7 +29,7 @@ const SearchGameList = ({ gameList, keyword }: SearchGameListProps) => {
showBookmark={false}
size="small"
keyword={keyword}
- onClick={() => handleItemClick(game.id)}
+ onClick={() => handleItemClick(game.gameSetId)}
/>
))}
+
{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/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/SearchGameListSection/SearchGameListSection.tsx b/src/components/organisms/SearchGameListSection/SearchGameListSection.tsx
index d4b2df67..d1763955 100644
--- a/src/components/organisms/SearchGameListSection/SearchGameListSection.tsx
+++ b/src/components/organisms/SearchGameListSection/SearchGameListSection.tsx
@@ -1,9 +1,8 @@
import React from 'react';
+import { GameListItem } from '@/types/search';
import ToggleGroup from '@/components/atoms/ToggleGroup/ToggleGroup';
import Pagination from '@/components/atoms/Pagination/Pagination';
-import SearchGameList, {
- GameItem,
-} from '@/components/molecules/SearchGameList/SearchGameList';
+import SearchGameList from '@/components/molecules/SearchGameList/SearchGameList';
import { generatePageNumbers } from '@/utils/pagination';
import { NoResultsMessage } from '@/components/atoms/NoResultsMessage/NoResultsMessage';
import SearchResultCardSkeleton from '@/components/atoms/SearchResultCardSkeleton/SearchResultCardSkeleton';
@@ -11,7 +10,7 @@ import { ToggleGroupValue } from '@/types/toggle';
import * as S from './SearchGameListSection.style';
interface SearchGameListSectionProps {
- gameList: GameItem[];
+ gameList: GameListItem[];
keyword: string;
selectedPage: number;
totalPages: number;
diff --git a/src/components/organisms/SearchGameResult/SearchGameResult.tsx b/src/components/organisms/SearchGameResult/SearchGameResult.tsx
index 783105f2..de9e59bf 100644
--- a/src/components/organisms/SearchGameResult/SearchGameResult.tsx
+++ b/src/components/organisms/SearchGameResult/SearchGameResult.tsx
@@ -1,8 +1,7 @@
import React from 'react';
+import { GameListItem } from '@/types/search';
import MoreButton from '@/components/atoms/MoreButton/MoreButton';
-import SearchGameList, {
- GameItem,
-} from '@/components/molecules/SearchGameList/SearchGameList';
+import SearchGameList from '@/components/molecules/SearchGameList/SearchGameList';
import { NoResultsMessage } from '@/components/atoms/NoResultsMessage/NoResultsMessage';
import { useNavigate, useSearchParams } from 'react-router-dom';
import { PATH } from '@/constants/path';
@@ -10,7 +9,7 @@ import SearchResultCardSkeleton from '@/components/atoms/SearchResultCardSkeleto
import * as S from './SearchGameResult.style';
interface SearchGameResultProps {
- gameList: GameItem[];
+ gameList: GameListItem[];
keyword: string;
isLoading: boolean;
}
diff --git a/src/components/organisms/SearchTalkPickListSection/SearchTalkPickListSection.tsx b/src/components/organisms/SearchTalkPickListSection/SearchTalkPickListSection.tsx
index ebfb9f5d..c575e73c 100644
--- a/src/components/organisms/SearchTalkPickListSection/SearchTalkPickListSection.tsx
+++ b/src/components/organisms/SearchTalkPickListSection/SearchTalkPickListSection.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import ToggleGroup from '@/components/atoms/ToggleGroup/ToggleGroup';
-import { SearchTalkPickItemProps } from '@/components/atoms/SearchTalkPickItem/SearchTalkPickItem';
+import { SearchTalkPickListItem } from '@/types/search';
import SearchTalkPickList from '@/components/molecules/SearchTalkPickList/SearchTalkPickList';
import Pagination from '@/components/atoms/Pagination/Pagination';
import { generatePageNumbers } from '@/utils/pagination';
@@ -10,7 +10,7 @@ import { ToggleGroupValue } from '@/types/toggle';
import * as S from './SearchTalkPickListSection.style';
interface SearchTalkPickSectionProps {
- searchTalkPickList: SearchTalkPickItemProps[];
+ searchTalkPickList: SearchTalkPickListItem[];
keyword: string;
selectedPage: number;
totalPages: number;
diff --git a/src/components/organisms/SearchTalkPickResult/SearchTalkPickResult.tsx b/src/components/organisms/SearchTalkPickResult/SearchTalkPickResult.tsx
index 3518ca11..bb2d6d3e 100644
--- a/src/components/organisms/SearchTalkPickResult/SearchTalkPickResult.tsx
+++ b/src/components/organisms/SearchTalkPickResult/SearchTalkPickResult.tsx
@@ -1,6 +1,6 @@
import React from 'react';
import MoreButton from '@/components/atoms/MoreButton/MoreButton';
-import { SearchTalkPickItemProps } from '@/components/atoms/SearchTalkPickItem/SearchTalkPickItem';
+import { SearchTalkPickListItem } from '@/types/search';
import SearchTalkPickList from '@/components/molecules/SearchTalkPickList/SearchTalkPickList';
import { NoResultsMessage } from '@/components/atoms/NoResultsMessage/NoResultsMessage';
import { useNavigate, useSearchParams } from 'react-router-dom';
@@ -9,7 +9,7 @@ import SearchResultListSkeleton from '@/components/atoms/SearchResultListSkeleto
import * as S from './SearchTalkPickResult.style';
interface SearchTalkPickResultProps {
- searchTalkPickList: SearchTalkPickItemProps[];
+ searchTalkPickList: SearchTalkPickListItem[];
keyword: string;
isLoading: boolean;
}
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/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/pages/SearchResultsPage/SearchGamePage.tsx b/src/pages/SearchResultsPage/SearchGamePage.tsx
index 1728eadb..f0ee4117 100644
--- a/src/pages/SearchResultsPage/SearchGamePage.tsx
+++ b/src/pages/SearchResultsPage/SearchGamePage.tsx
@@ -20,7 +20,7 @@ const SearchGamePage = () => {
content: gameResults,
totalPages: gameTotalPages,
isLoading,
- } = useGameResultQuery(query, page, size, sort);
+ } = useGameResultQuery(query, page - 1, size, sort);
return (
@@ -36,7 +36,7 @@ const SearchGamePage = () => {
{
content: talkPickResults,
totalPages: talkPickTotalPages,
isLoading,
- } = useTalkPickResultQuery(query, page, size, sort);
+ } = useTalkPickResultQuery(query, page - 1, size, sort);
return (
@@ -36,7 +36,7 @@ const SearchTalkPickPage = () => {
{
+ const { page, handlePageChange } = usePagination();
const [selectedValue, setSelectedValue] = useState({
field: 'views',
order: 'desc',
});
- const [searchParams, setSearchParams] = useSearchParams();
- 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 { bestTalkPick } = useBestTalkPickListQuery();
const { talkPickList } = useTalkPickListQuery({
- page: currentPage - 1,
+ page: page - 1,
size: 20,
sort: `${selectedValue.field},${selectedValue.order}`,
});
useEffect(() => {
window.scrollTo(0, 0);
- }, [currentPage, selectedValue]);
+ }, [page, selectedValue]);
return (
+
+ ),
+ ],
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 = {
= {
@@ -11,6 +12,13 @@ const meta: Meta = {
parameters: {
layout: 'centered',
},
+ decorators: [
+ (Story) => (
+
+
+ ),
+ ],
argTypes: {
onPageChange: { action: '페이지 변경' },
onSortChange: { action: '정렬 변경' },
@@ -20,9 +28,10 @@ const meta: Meta = {
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:
@@ -35,7 +44,7 @@ const searchTalkPickSample: SearchTalkPickItemProps[] = Array.from(
export const Default: Story = {
args: {
searchTalkPickList: searchTalkPickSample.slice(0, 10),
- keyword: '예시 키워드',
+ keyword: '인기',
selectedPage: 1,
totalPages: 2,
sort: { field: 'views', order: 'desc' },
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/types/search.ts b/src/types/search.ts
index f3c3bc4f..eafd90a5 100644
--- a/src/types/search.ts
+++ b/src/types/search.ts
@@ -1,7 +1,7 @@
import { PaginationType } from '@/types/pagination';
-interface GameItem {
- id: number;
+export interface GameListItem {
+ gameSetId: number;
optionAImg: string;
optionBImg: string;
title: string;
@@ -9,7 +9,8 @@ interface GameItem {
subTag: string;
}
-interface SearchTalkPickItem {
+export interface SearchTalkPickListItem {
+ id: number;
title: string;
createdAt: string;
content: string;
@@ -18,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;
}
@@ -53,7 +40,7 @@ const TalkPickPlacePage = () => {
talkPickList={talkPickList}
selectedValue={selectedValue}
setToggleValue={setSelectedValue}
- selectedPage={currentPage}
+ selectedPage={page}
handlePageChange={handlePageChange}
/>
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) => (
+ -
Single SearchTalkPickList
-+ - @@ -129,7 +87,7 @@ export const All: Story = {
-
None
-+