;
+
+export const Default: Story = {};
diff --git a/src/components/common/StatusHandler/Spinner/index.tsx b/src/components/common/StatusHandler/Spinner/index.tsx
new file mode 100644
index 00000000..4d5c6aa8
--- /dev/null
+++ b/src/components/common/StatusHandler/Spinner/index.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Container } from '@components/common';
+
+export default function Spinner() {
+ return (
+
+
+
+
+
+ );
+}
+
+const SpinnerContainer = styled.div`
+ padding: 48px 0 48px 0;
+`;
+
+const StyledSpinner = styled.div`
+ border: 4px solid rgba(0, 0, 0, 0.1);
+ border-left-color: #22a6b3;
+ border-radius: 50%;
+ width: 40px;
+ height: 40px;
+ animation: spin 1s linear infinite;
+
+ @keyframes spin {
+ to {
+ transform: rotate(360deg);
+ }
+ }
+`;
diff --git a/src/components/common/StatusHandler/index.tsx b/src/components/common/StatusHandler/index.tsx
new file mode 100644
index 00000000..9568a0a5
--- /dev/null
+++ b/src/components/common/StatusHandler/index.tsx
@@ -0,0 +1,34 @@
+import React, { ReactNode } from 'react';
+import { AxiosError } from 'axios';
+import { ERROR } from '@utils/constants/message';
+import ErrorMessage from './ErrorMessage';
+import Spinner from './Spinner';
+
+interface StatusHanlderProps {
+ isLoading: boolean;
+ isError: boolean;
+ isEmpty: boolean;
+ isFetchingNextPage?: boolean;
+ error?: AxiosError | null | unknown;
+ children: ReactNode;
+}
+
+export default function StatusHandler({
+ isLoading,
+ isError,
+ isEmpty,
+ error,
+ isFetchingNextPage,
+ children,
+}: StatusHanlderProps) {
+ if (isLoading) return ;
+ if (isError && error) return ;
+ if (isEmpty) return ;
+
+ return (
+
+ {children}
+ {isFetchingNextPage && }
+
+ );
+}
diff --git a/src/components/common/index.ts b/src/components/common/index.ts
new file mode 100644
index 00000000..9b205b93
--- /dev/null
+++ b/src/components/common/index.ts
@@ -0,0 +1,11 @@
+export { default as Button } from './Button';
+export { default as Footer } from '../features/Layout/Footer';
+export { default as InputField } from './Form/InputField';
+export { default as Image } from './Image';
+export { default as GoodsItem } from './GoodsItem';
+export { default as Ranking } from './GoodsItem/Ranking';
+export { default as Header } from '../features/Layout/Header';
+export { default as Container } from './Layout/Container';
+export { default as Grid } from './Layout/Grid';
+export { default as CenteredContainer } from './Layout/CenteredContainer';
+export { default as StatusHandler } from './StatusHandler';
diff --git a/src/components/common/layouts/Container/index.stories.tsx b/src/components/common/layouts/Container/index.stories.tsx
deleted file mode 100644
index 04505825..00000000
--- a/src/components/common/layouts/Container/index.stories.tsx
+++ /dev/null
@@ -1,42 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Container } from '.';
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
- title: 'Common/Layout/Container',
- component: Container,
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
- tags: ['autodocs'],
- // More on argTypes: https://storybook.js.org/docs/api/argtypes
- argTypes: {
- maxWidth: {
- control: {
- type: 'text',
- },
- },
- children: {
- control: {
- type: 'text',
- },
- },
- },
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const Default: Story = {
- args: {
- maxWidth: undefined,
- children: 'Hello, world!',
- },
-};
-
-export const FullScreen: Story = {
- args: {
- maxWidth: '100%',
- children: 'Hello, world!',
- },
-};
diff --git a/src/components/common/layouts/Container/index.tsx b/src/components/common/layouts/Container/index.tsx
deleted file mode 100644
index 00a775d6..00000000
--- a/src/components/common/layouts/Container/index.tsx
+++ /dev/null
@@ -1,50 +0,0 @@
-import styled from '@emotion/styled';
-import { forwardRef } from 'react';
-
-import { vars } from '@/styles';
-
-type Props = {
- maxWidth?: string;
- flexDirection?: 'row' | 'column';
- justifyContent?: 'center' | 'flex-start' | 'flex-end' | 'space-between' | 'space-around';
- alignItems?: 'center' | 'flex-start' | 'flex-end' | 'baseline' | 'stretch';
-} & React.HTMLAttributes;
-
-export const Container: React.FC = forwardRef(
- (
- { children, maxWidth, flexDirection, justifyContent, alignItems, ...props }: Props,
- ref: React.Ref,
- ) => {
- return (
-
-
- {children}
-
-
- );
- },
-);
-
-const Wrapper = styled.div`
- width: 100%;
- display: flex;
- justify-content: center;
- align-items: center;
-`;
-
-const Inner = styled.div<
- Pick
->`
- width: 100%;
- max-width: ${({ maxWidth }) => maxWidth ?? vars.breakpoints.md};
- display: flex;
- flex-direction: ${({ flexDirection }) => flexDirection ?? 'column'};
- justify-content: ${({ justifyContent }) => justifyContent ?? 'flex-start'};
- align-items: ${({ alignItems }) => alignItems ?? 'flex-start'};
-`;
diff --git a/src/components/common/layouts/Grid/index.stories.tsx b/src/components/common/layouts/Grid/index.stories.tsx
deleted file mode 100644
index e7047541..00000000
--- a/src/components/common/layouts/Grid/index.stories.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-
-import { Grid } from '.';
-
-const ChildComponent = () => (
- <>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
-
-);
-
-// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
-const meta = {
- title: 'Common/Layout/Grid',
- component: Grid,
- // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
- tags: ['autodocs'],
-} satisfies Meta;
-
-export default meta;
-type Story = StoryObj;
-
-// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
-export const NumberColumns: Story = {
- args: {
- gap: 0,
- columns: 3,
- children: ,
- },
-};
-
-export const ResponsiveColumns: Story = {
- args: {
- gap: 0,
- columns: {
- initial: 1,
- sm: 2,
- md: 3,
- lg: 4,
- },
- children: ,
- },
-};
diff --git a/src/components/common/layouts/Grid/index.tsx b/src/components/common/layouts/Grid/index.tsx
deleted file mode 100644
index 84da9e20..00000000
--- a/src/components/common/layouts/Grid/index.tsx
+++ /dev/null
@@ -1,44 +0,0 @@
-import styled from '@emotion/styled';
-
-import { vars } from '@/styles';
-
-type ResponseGridStyle = {
- [key in keyof typeof vars.breakpoints]?: number;
-};
-
-type Props = {
- columns: number | ResponseGridStyle;
- gap?: number;
-} & React.HTMLAttributes;
-
-export const Grid: React.FC = ({ children, columns, ...props }: Props) => {
- return (
-
- {children}
-
- );
-};
-
-const Wrapper = styled.div>(
- {
- width: '100%',
- display: 'grid',
- },
- ({ gap }) => ({
- gap: gap ? `${gap}px` : '0',
- }),
- ({ columns }) => {
- if (typeof columns === 'number') {
- return {
- gridTemplateColumns: `repeat(${columns}, 1fr)`,
- };
- }
-
- const breakpoints = Object.keys(columns) as (keyof typeof vars.breakpoints)[];
- return breakpoints
- .map((breakpoint) => {
- return `@media screen and (min-width: ${vars.breakpoints[breakpoint]}) { grid-template-columns: repeat(${columns[breakpoint]}, 1fr); }`;
- })
- .join(' ');
- },
-);
diff --git a/src/components/common/layouts/Spacing/index.tsx b/src/components/common/layouts/Spacing/index.tsx
deleted file mode 100644
index b13db5bf..00000000
--- a/src/components/common/layouts/Spacing/index.tsx
+++ /dev/null
@@ -1,37 +0,0 @@
-import styled from '@emotion/styled';
-
-import { vars } from '@/styles';
-
-type ResponseGridStyle = {
- [key in keyof typeof vars.breakpoints]?: number;
-};
-
-type Props = {
- height?: number | ResponseGridStyle;
- backgroundColor?: string;
-} & React.HTMLAttributes;
-
-export const Spacing = ({ height, backgroundColor = 'inherit', ...props }: Props) => {
- return ;
-};
-
-const Wrapper = styled.div>(
- {
- width: '100%',
- },
- ({ backgroundColor }) => ({ backgroundColor }),
- ({ height = 16 }) => {
- if (typeof height === 'number') {
- return {
- height: `${height}px`,
- };
- }
-
- const breakpoints = Object.keys(height) as (keyof typeof vars.breakpoints)[];
- return breakpoints
- .map((breakpoint) => {
- return `@media screen and (min-width: ${vars.breakpoints[breakpoint]}) { height: ${height[breakpoint]}px; }`;
- })
- .join(' ');
- },
-);
diff --git a/src/components/features/Account/AccountOverview/index.stories.tsx b/src/components/features/Account/AccountOverview/index.stories.tsx
new file mode 100644
index 00000000..20a369c6
--- /dev/null
+++ b/src/components/features/Account/AccountOverview/index.stories.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { Meta, StoryObj } from '@storybook/react';
+import AuthContext from '@context/auth/AuthContext';
+import AccountOverview from '.';
+
+const meta: Meta = {
+ title: 'features/Account/AccountOverview',
+ component: AccountOverview,
+ tags: ['autodocs'],
+ decorators: [
+ (Story, context) => {
+ const { isAuthenticated } = context.parameters;
+ return (
+ {}, logout: () => {} }}>
+
+
+
+
+ );
+ },
+ ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/components/features/Account/AccountOverview/index.tsx b/src/components/features/Account/AccountOverview/index.tsx
new file mode 100644
index 00000000..aefbade1
--- /dev/null
+++ b/src/components/features/Account/AccountOverview/index.tsx
@@ -0,0 +1,38 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Button } from '@components/common';
+import { useAuth } from '@context/auth/useAuth';
+import { useSessionStorage } from '@hooks/useSessionStorage';
+
+export default function AccountOverview() {
+ const { logout } = useAuth();
+ const [userName] = useSessionStorage('authToken', '');
+
+ return (
+
+ {userName}๋ ์๋
ํ์ธ์!
+
+
+
+
+ );
+}
+
+const MyAccountContainer = styled.section`
+ padding-top: 140px;
+ padding-bottom: 120px;
+`;
+
+const Greeting = styled.p`
+ font-size: 36px;
+ text-align: center;
+ font-weight: 700;
+ margin-bottom: 64px;
+`;
+
+const ButtonContainer = styled.div`
+ max-width: 200px;
+ margin: 0 auto;
+`;
diff --git a/src/components/features/Home/AiDiscoveryBanner/index.tsx b/src/components/features/Home/AiDiscoveryBanner/index.tsx
deleted file mode 100644
index 31b1f1fc..00000000
--- a/src/components/features/Home/AiDiscoveryBanner/index.tsx
+++ /dev/null
@@ -1,62 +0,0 @@
-import styled from '@emotion/styled';
-
-import { Container } from '@/components/common/layouts/Container';
-import { breakpoints } from '@/styles/variants';
-
-export const AiDiscoveryBanner = () => {
- return (
-
-
-
-
- ์ ๋ฌผ์ ์ถ์ฒ๋ฐ๊ณ ์ถ์ ์น๊ตฌ๋ฅผ ์ ํํด์ฃผ์ธ์.
-
-
-
- );
-};
-
-const Wrapper = styled.section`
- padding: 16px;
-`;
-
-const Banner = styled.div`
- width: 100%;
- display: flex;
- flex-direction: column;
- align-items: flex-start;
- background-color: #feeb00;
- padding: 16px;
- border-radius: 8px;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- display: flex;
- align-items: center;
- }
-`;
-
-const Label = styled.p`
- font-size: 13px;
- line-height: 15px;
- font-weight: 500;
- color: rgba(0, 0, 0, 0.4);
- padding-bottom: 3px;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- font-size: 17px;
- line-height: 19px;
- padding-bottom: 5px;
- }
-`;
-
-const Title = styled.h6`
- font-size: 14px;
- line-height: 16px;
- font-weight: 700;
- color: #000;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- font-size: 18px;
- line-height: 20px;
- }
-`;
diff --git a/src/components/features/Home/Filter/Target/TargetItem/index.stories.ts b/src/components/features/Home/Filter/Target/TargetItem/index.stories.ts
new file mode 100644
index 00000000..56dc11c4
--- /dev/null
+++ b/src/components/features/Home/Filter/Target/TargetItem/index.stories.ts
@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react';
+import TargetItem, { TargetItemProps } from '.';
+import { FILTER_TARGETS } from '../../constants';
+
+const meta: Meta = {
+ title: 'features/Home/Filter/Target/TargetItem',
+ component: TargetItem,
+ tags: ['autodocs'],
+ argTypes: {
+ icon: { control: 'select', options: FILTER_TARGETS.map((target) => target.icon) },
+ target: { control: 'select', options: FILTER_TARGETS.map((target) => target.name) },
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ icon: FILTER_TARGETS[0].icon,
+ target: FILTER_TARGETS[0].name,
+ },
+};
diff --git a/src/components/features/Home/Filter/Target/TargetItem/index.tsx b/src/components/features/Home/Filter/Target/TargetItem/index.tsx
new file mode 100644
index 00000000..f00bde41
--- /dev/null
+++ b/src/components/features/Home/Filter/Target/TargetItem/index.tsx
@@ -0,0 +1,49 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import styled from '@emotion/styled';
+
+export interface TargetItemProps extends ButtonHTMLAttributes {
+ icon: string;
+ target: string;
+ selected: boolean;
+ onSelect: () => void;
+}
+
+export default function TargetItem({ icon, target, selected, onSelect, ...rest }: TargetItemProps) {
+ return (
+
+ {icon}
+ {target}
+
+ );
+}
+
+const TargetContainer = styled.button`
+ max-width: 233px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ background-color: transparent;
+ cursor: pointer;
+ border: none;
+`;
+
+const IconContainer = styled.div<{ selected: boolean }>`
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ width: 60px;
+ height: 60px;
+ border-radius: 24px;
+ background-color: ${({ selected }) => (selected ? '#4684e9' : '#e6f1ff')};
+ font-size: 20px;
+ font-weight: 700;
+ color: #fff;
+ transition: all 0.2s;
+`;
+
+const Text = styled.p<{ selected: boolean }>`
+ font-size: 20px;
+ padding: 10px 0 6px 0;
+ color: ${({ selected }) => (selected ? '#4684e9' : '#666666')};
+ font-weight: ${({ selected }) => (selected ? '700' : '400')};
+`;
diff --git a/src/components/features/Home/Filter/Target/index.stories.tsx b/src/components/features/Home/Filter/Target/index.stories.tsx
new file mode 100644
index 00000000..3e63efcb
--- /dev/null
+++ b/src/components/features/Home/Filter/Target/index.stories.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import FilterProvider from '@context/filter/FilterProvider';
+import { useFilter } from '@context/filter/useFilter';
+import { Meta, StoryObj } from '@storybook/react';
+import Target, { TargetProps } from '.';
+
+function FilterDecorator(StoryComponent: any) {
+ return (
+
+
+
+ );
+}
+
+function FilterContextWrapper({ StoryComponent }: { StoryComponent: any }) {
+ const { selectedTarget, selectTarget } = useFilter();
+ return ;
+}
+
+const meta: Meta = {
+ title: 'features/Home/Filter/Target',
+ component: Target,
+ tags: ['autodocs'],
+ decorators: [FilterDecorator],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ selectedTarget: 'ALL',
+ selectTarget: () => {},
+ },
+};
diff --git a/src/components/features/Home/Filter/Target/index.tsx b/src/components/features/Home/Filter/Target/index.tsx
new file mode 100644
index 00000000..51792811
--- /dev/null
+++ b/src/components/features/Home/Filter/Target/index.tsx
@@ -0,0 +1,25 @@
+import React from 'react';
+import { Container } from '@components/common';
+import { FILTER_TARGETS, TargetType } from '../constants';
+import TargetItem from './TargetItem';
+
+export interface TargetProps {
+ selectedTarget: TargetType;
+ selectTarget: (target: TargetType) => void;
+}
+
+export default function Target({ selectedTarget, selectTarget }: TargetProps) {
+ return (
+
+ {FILTER_TARGETS.map(({ id, icon, name, targetType }) => (
+ selectTarget(targetType)}
+ />
+ ))}
+
+ );
+}
diff --git a/src/components/features/Home/Filter/Wish/WishItem/index.stories.ts b/src/components/features/Home/Filter/Wish/WishItem/index.stories.ts
new file mode 100644
index 00000000..100b4f7e
--- /dev/null
+++ b/src/components/features/Home/Filter/Wish/WishItem/index.stories.ts
@@ -0,0 +1,22 @@
+import { Meta, StoryObj } from '@storybook/react';
+import WishItem, { WishItemProps } from '.';
+import { FILTER_WISHS } from '../../constants';
+
+const meta: Meta = {
+ title: 'features/Home/Filter/Wish/WishItem',
+ component: WishItem,
+ tags: ['autodocs'],
+ argTypes: {
+ wish: { control: 'select', options: FILTER_WISHS.map((wish) => wish.wish) },
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ wish: FILTER_WISHS[0].wish,
+ },
+};
diff --git a/src/components/features/Home/Filter/Wish/WishItem/index.tsx b/src/components/features/Home/Filter/Wish/WishItem/index.tsx
new file mode 100644
index 00000000..21921bde
--- /dev/null
+++ b/src/components/features/Home/Filter/Wish/WishItem/index.tsx
@@ -0,0 +1,27 @@
+import React, { ButtonHTMLAttributes } from 'react';
+import styled from '@emotion/styled';
+
+export interface WishItemProps extends ButtonHTMLAttributes {
+ wish: string;
+ selected: boolean;
+ onSelect: () => void;
+}
+
+export default function WishItem({ wish, selected, onSelect, ...rest }: WishItemProps) {
+ return (
+
+ {wish}
+
+ );
+}
+
+const WishItemContainer = styled.button<{ selected: boolean }>`
+ border: none;
+ background-color: transparent;
+ padding: 20px 30px;
+ font-size: 22px;
+ color: ${({ selected }) => (selected ? '#4684e9' : '#4684e9b3')};
+ transition: all 0.2s;
+ font-weight: ${({ selected }) => (selected ? 700 : 400)};
+ cursor: pointer;
+`;
diff --git a/src/components/features/Home/Filter/Wish/index.stories.tsx b/src/components/features/Home/Filter/Wish/index.stories.tsx
new file mode 100644
index 00000000..d6306b40
--- /dev/null
+++ b/src/components/features/Home/Filter/Wish/index.stories.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import FilterProvider from '@context/filter/FilterProvider';
+import { Meta, StoryObj } from '@storybook/react';
+import { useFilter } from '@context/filter/useFilter';
+import Wish, { WishProps } from '.';
+
+function WishDecorator(StoryComponent: any) {
+ return (
+
+
+
+ );
+}
+
+function WishContextWrapper({ StoryComponent }: { StoryComponent: any }) {
+ const { selectedWish, selectWish } = useFilter();
+ return ;
+}
+
+const meta: Meta = {
+ title: 'features/Home/Filter/Wish',
+ component: Wish,
+ tags: ['autodocs'],
+ decorators: [WishDecorator],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ selectedWish: 'MANY_RECEIVE',
+ selectWish: () => {},
+ },
+};
diff --git a/src/components/features/Home/Filter/Wish/index.tsx b/src/components/features/Home/Filter/Wish/index.tsx
new file mode 100644
index 00000000..7d862b82
--- /dev/null
+++ b/src/components/features/Home/Filter/Wish/index.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Container } from '@components/common';
+import styled from '@emotion/styled';
+import { FILTER_WISHS, WishType } from '../constants';
+import WishItem from './WishItem';
+
+export interface WishProps {
+ selectedWish: WishType;
+ selectWish: (wish: WishType) => void;
+}
+
+export default function Wish({ selectedWish, selectWish }: WishProps) {
+ return (
+
+
+ {FILTER_WISHS.map(({ id, wish, rankType }) => (
+ selectWish(rankType)} />
+ ))}
+
+
+ );
+}
+
+const WishContainer = styled.div`
+ width: 100%;
+ background-color: #e6f1ff;
+ border-radius: 12px;
+`;
diff --git a/src/components/features/Home/Filter/constants.ts b/src/components/features/Home/Filter/constants.ts
new file mode 100644
index 00000000..fdc04aa8
--- /dev/null
+++ b/src/components/features/Home/Filter/constants.ts
@@ -0,0 +1,15 @@
+export type TargetType = 'ALL' | 'FEMALE' | 'MALE' | 'TEEN';
+export type WishType = 'MANY_WISH' | 'MANY_RECEIVE' | 'MANY_WISH_RECEIVE';
+
+export const FILTER_TARGETS: { id: number; icon: string; name: string; targetType: TargetType }[] = [
+ { id: 1, icon: 'ALL', name: '์ ์ฒด', targetType: 'ALL' },
+ { id: 2, icon: '๐ฉ๐ปโ๐ฆณ', name: '์ฌ์ฑ์ด', targetType: 'FEMALE' },
+ { id: 3, icon: '๐จ๐ปโ๐ฆณ', name: '๋จ์ฑ์ด', targetType: 'MALE' },
+ { id: 4, icon: '๐ฆ๐ป', name: '์ฒญ์๋
์ด', targetType: 'TEEN' },
+];
+
+export const FILTER_WISHS: { id: number; wish: string; rankType: WishType }[] = [
+ { id: 1, wish: '๋ฐ๊ณ ์ถ์ดํ', rankType: 'MANY_WISH' },
+ { id: 2, wish: '๋ง์ด ์ ๋ฌผํ', rankType: 'MANY_RECEIVE' },
+ { id: 3, wish: '์์๋ก ๋ฐ์', rankType: 'MANY_WISH_RECEIVE' },
+];
diff --git a/src/components/features/Home/Filter/index.stories.tsx b/src/components/features/Home/Filter/index.stories.tsx
new file mode 100644
index 00000000..b00fb972
--- /dev/null
+++ b/src/components/features/Home/Filter/index.stories.tsx
@@ -0,0 +1,23 @@
+import React from 'react';
+import FilterProvider from '@context/filter/FilterProvider';
+import { Meta, StoryObj } from '@storybook/react';
+import Filter from '.';
+
+const meta: Meta = {
+ title: 'features/Home/Filter',
+ component: Filter,
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/components/features/Home/Filter/index.tsx b/src/components/features/Home/Filter/index.tsx
new file mode 100644
index 00000000..3610417b
--- /dev/null
+++ b/src/components/features/Home/Filter/index.tsx
@@ -0,0 +1,27 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { useFilter } from '@context/filter/useFilter';
+import Wish from './Wish';
+import Target from './Target';
+
+export default function Filter() {
+ const { selectedTarget, selectedWish, selectTarget, selectWish } = useFilter();
+
+ return (
+
+
+
+
+
+
+ );
+}
+
+const FilterContainer = styled.div`
+ padding-top: 20px;
+ padding-bottom: 7px;
+`;
+
+const TargetContainer = styled.div`
+ margin-bottom: 20px;
+`;
diff --git a/src/components/features/Home/FriendGiftRecommendation/index.stories.ts b/src/components/features/Home/FriendGiftRecommendation/index.stories.ts
new file mode 100644
index 00000000..6ecd307a
--- /dev/null
+++ b/src/components/features/Home/FriendGiftRecommendation/index.stories.ts
@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import FriendGiftRecommendation from '.';
+
+const meta: Meta = {
+ title: 'features/Home/FriendGiftRecommendation',
+ component: FriendGiftRecommendation,
+ tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/components/features/Home/FriendGiftRecommendation/index.tsx b/src/components/features/Home/FriendGiftRecommendation/index.tsx
new file mode 100644
index 00000000..c9f96210
--- /dev/null
+++ b/src/components/features/Home/FriendGiftRecommendation/index.tsx
@@ -0,0 +1,39 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { CenteredContainer } from '@components/common';
+
+export default function FriendGiftRecommendation() {
+ return (
+
+
+
+ AI๊ฐ ์ถ์ฒํ๋ ์ ๋ฌผ
+ ์ ๋ฌผ์ ์ถ์ฒ๋ฐ๊ณ ์ถ์ ์น๊ตฌ๋ฅผ ์ ํํด์ฃผ์ธ์.
+
+
+
+ );
+}
+
+const FriendGiftRecommendationContainer = styled.section`
+ text-align: center;
+`;
+
+const InnerContainer = styled.div`
+ padding: 16px;
+ background-color: #feeb00;
+ border-radius: 8px;
+`;
+
+const SubTitle = styled.p`
+ font-size: 17px;
+ color: #00000066;
+ padding-bottom: 5px;
+ margin: 0;
+`;
+
+const Title = styled.h6`
+ font-size: 18px;
+ font-weight: 700;
+ margin: 0;
+`;
diff --git a/src/components/features/Home/FriendSelector/index.stories.ts b/src/components/features/Home/FriendSelector/index.stories.ts
new file mode 100644
index 00000000..f9cdebc7
--- /dev/null
+++ b/src/components/features/Home/FriendSelector/index.stories.ts
@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import FriendSelector from '.';
+
+const meta: Meta = {
+ title: 'features/Home/FriendSelector',
+ component: FriendSelector,
+ tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/components/features/Home/FriendSelector/index.tsx b/src/components/features/Home/FriendSelector/index.tsx
new file mode 100644
index 00000000..4f0a8bda
--- /dev/null
+++ b/src/components/features/Home/FriendSelector/index.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import friend from '@assets/images/friend.png';
+import styled from '@emotion/styled';
+import { Container, CenteredContainer, Image } from '@components/common';
+
+const IMAGE_SIZE = 70;
+const IMAGE_RADIUS = 24;
+const IMAGE_ALT = '์น๊ตฌ ์ ํ ์ ๋';
+
+export default function FriendSelector() {
+ return (
+
+
+
+
+ ์ ๋ฌผ ๋ฐ์ ์น๊ตฌ๋ฅผ ์ ํํด์ฃผ์ธ์.
+
+
+
+ );
+}
+
+const FriendSelectorContainer = styled.section`
+ margin-top: 60px;
+ padding: 40px 0;
+ background-color: #fafafa;
+`;
+
+const Description = styled.p`
+ padding-left: 16px;
+ font-size: 28px;
+`;
diff --git a/src/components/features/Home/GoodsRankingSection/Filter.tsx b/src/components/features/Home/GoodsRankingSection/Filter.tsx
deleted file mode 100644
index 7c2a394f..00000000
--- a/src/components/features/Home/GoodsRankingSection/Filter.tsx
+++ /dev/null
@@ -1,113 +0,0 @@
-import styled from '@emotion/styled';
-
-import { Spacing } from '@/components/common/layouts/Spacing';
-import { breakpoints } from '@/styles/variants';
-import type { RankingFilterOption } from '@/types';
-
-import { RankTypeButton } from './RankTypeButton';
-import { TargetTypeButton } from './TargetTypeButton';
-
-type Props = {
- filterOption: RankingFilterOption;
- onFilterOptionChange: (option: RankingFilterOption) => void;
-};
-
-export const GoodsRankingFilter = ({ filterOption, onFilterOptionChange }: Props) => {
- const handleFilterOption = (
- key: keyof RankingFilterOption,
- value: RankingFilterOption[keyof RankingFilterOption],
- ) => {
- onFilterOptionChange({
- ...filterOption,
- [key]: value,
- });
- };
-
- return (
-
-
- {
- handleFilterOption('targetType', value);
- }}
- />
- {
- handleFilterOption('targetType', value);
- }}
- />
- {
- handleFilterOption('targetType', value);
- }}
- />
- {
- handleFilterOption('targetType', value);
- }}
- />
-
-
-
- {
- handleFilterOption('rankType', value);
- }}
- />
- {
- handleFilterOption('rankType', value);
- }}
- />
- {
- handleFilterOption('rankType', value);
- }}
- />
-
-
- );
-};
-
-const Wrapper = styled.div`
- width: 100%;
- padding: 20px 0 7px;
- display: flex;
- flex-direction: column;
- justify-content: center;
-`;
-
-const TargetTypeWrapper = styled.div`
- display: flex;
-`;
-
-const RankTypeWrapper = styled.div`
- width: 100%;
- display: flex;
- justify-content: center;
- border: 1px solid rgba(70, 132, 233, 0.1);
- background-color: #e6f1ff;
-
- border-radius: 8px;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- border-radius: 12px;
- }
-`;
diff --git a/src/components/features/Home/GoodsRankingSection/List.tsx b/src/components/features/Home/GoodsRankingSection/List.tsx
deleted file mode 100644
index 27bd332c..00000000
--- a/src/components/features/Home/GoodsRankingSection/List.tsx
+++ /dev/null
@@ -1,69 +0,0 @@
-import styled from '@emotion/styled';
-import { useState } from 'react';
-
-import { Button } from '@/components/common/Button';
-import { RankingGoodsItems } from '@/components/common/GoodsItem/Ranking';
-import { Grid } from '@/components/common/layouts/Grid';
-import { breakpoints } from '@/styles/variants';
-import type { GoodsData } from '@/types';
-
-type Props = {
- goodsList: GoodsData[];
-};
-
-export const GoodsRankingList = ({ goodsList }: Props) => {
- const [hasMore, setHasMore] = useState(false);
-
- const currentGoodsList = hasMore ? goodsList : goodsList.slice(0, 6);
-
- return (
-
-
- {currentGoodsList.map(({ id, imageURL, name, price, brandInfo }, index) => (
-
- ))}
-
-
-
-
-
- );
-};
-
-const Wrapper = styled.div`
- padding: 20px 0 30px;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- padding: 40px 0 60px;
- }
-`;
-
-const ButtonWrapper = styled.div`
- width: 100%;
- display: flex;
- justify-content: center;
-
- padding-top: 30px;
-`;
diff --git a/src/components/features/Home/GoodsRankingSection/RankTypeButton.tsx b/src/components/features/Home/GoodsRankingSection/RankTypeButton.tsx
deleted file mode 100644
index 11b1fa3e..00000000
--- a/src/components/features/Home/GoodsRankingSection/RankTypeButton.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import styled from '@emotion/styled';
-
-import { breakpoints } from '@/styles/variants';
-import type { RankingFilterOption } from '@/types';
-
-type Props = {
- label: string;
- value: RankingFilterOption['rankType'];
- selected: boolean;
- onClick: (value: RankingFilterOption['rankType']) => void;
-};
-
-export const RankTypeButton = ({ value, selected, label, onClick }: Props) => {
- return (
- {
- onClick(value);
- }}
- >
- {label}
-
- );
-};
-
-const Wrapper = styled.button>`
- padding: 13px 20px;
- font-size: 16px;
- line-height: 16px;
- color: ${({ selected }) => (selected ? '#4684e9' : 'rgba(70, 132, 233, 0.7)')};
- font-weight: ${({ selected }) => (selected ? 700 : 400)};
- transition:
- color 200ms,
- font-weight 200ms;
-
- &:focus {
- outline: none;
- }
-
- @media screen and (min-width: ${breakpoints.sm}) {
- padding: 20px 30px;
- font-size: 22px;
- line-height: 22px;
- }
-`;
diff --git a/src/components/features/Home/GoodsRankingSection/TargetTypeButton.tsx b/src/components/features/Home/GoodsRankingSection/TargetTypeButton.tsx
deleted file mode 100644
index fd193f9d..00000000
--- a/src/components/features/Home/GoodsRankingSection/TargetTypeButton.tsx
+++ /dev/null
@@ -1,106 +0,0 @@
-import styled from '@emotion/styled';
-
-import { breakpoints } from '@/styles/variants';
-import type { RankingFilterOption } from '@/types';
-
-type Props = {
- value: RankingFilterOption['targetType'];
- selected: boolean;
- onClick: (value: RankingFilterOption['targetType']) => void;
-};
-export const TargetTypeButton = ({ value, selected, onClick }: Props) => {
- return (
- {
- onClick(value);
- }}
- >
- {TARGET_TYPE_TEXT[value].icon}
-
-
- );
-};
-
-const TARGET_TYPE_TEXT = {
- ALL: {
- icon: 'ALL',
- label: '์ ์ฒด',
- },
- FEMALE: {
- icon: '๐ฉ๐ปโ๐ฆณ',
- label: '์ฌ์ฑ์ด',
- },
- MALE: {
- icon: '๐จ๐ปโ๐ฆณ',
- label: '๋จ์ฑ์ด',
- },
- TEEN: {
- icon: '๐ฆ๐ป',
- label: '์ฒญ์๋
์ด',
- },
-};
-
-const Wrapper = styled.button`
- width: 100%;
- min-width: 58px;
-
- display: flex;
- flex-direction: column;
- justify-content: center;
- align-items: center;
-
- & + & {
- padding-left: 16px;
- }
-
- &:focus {
- outline: none;
- }
-
- @media screen and (min-width: ${breakpoints.sm}) {
- min-width: 90px;
-
- & + & {
- margin-left: 36px;
- }
- }
-`;
-
-const Icon = styled.div>`
- display: flex;
- justify-content: center;
- align-items: center;
- width: 44px;
- height: 44px;
- border-radius: 16px;
- color: #fff;
- font-size: 14px;
- font-weight: 700;
- background-color: ${({ selected }) => (selected ? '#4684e9' : '#e6f1ff')};
- transition: background-color 200ms;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- width: 60px;
- height: 60px;
- border-radius: 24px;
- font-size: 20px;
- }
-`;
-
-const Label = styled.p>`
- padding: 5px 0;
- font-size: 14px;
- line-height: 16px;
-
- color: ${({ selected }) => (selected ? '#4684e9' : '#666')};
- font-weight: ${({ selected }) => (selected ? 700 : 400)};
- transition:
- color 200ms,
- font-weight 200ms;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- padding: 10px 0 6px;
- font-size: 20px;
- line-height: 24px;
- }
-`;
diff --git a/src/components/features/Home/GoodsRankingSection/index.tsx b/src/components/features/Home/GoodsRankingSection/index.tsx
deleted file mode 100644
index 9464d67c..00000000
--- a/src/components/features/Home/GoodsRankingSection/index.tsx
+++ /dev/null
@@ -1,52 +0,0 @@
-import styled from '@emotion/styled';
-import { useState } from 'react';
-
-import { Container } from '@/components/common/layouts/Container';
-import { breakpoints } from '@/styles/variants';
-import type { RankingFilterOption } from '@/types';
-import { GoodsMockList } from '@/types/mock';
-
-import { GoodsRankingFilter } from './Filter';
-import { GoodsRankingList } from './List';
-
-export const GoodsRankingSection = () => {
- const [filterOption, setFilterOption] = useState({
- targetType: 'ALL',
- rankType: 'MANY_WISH',
- });
-
- // GoodsMockData๋ฅผ 21๋ฒ ๋ฐ๋ณต ์์ฑ
-
- return (
-
-
- ์ค์๊ฐ ๊ธ์์น ์ ๋ฌผ๋ญํน
-
-
-
-
- );
-};
-
-const Wrapper = styled.section`
- padding: 0 16px 32px;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- padding: 0 16px 80px;
- }
-`;
-
-const Title = styled.h2`
- color: #000;
- width: 100%;
- text-align: left;
- font-size: 20px;
- line-height: 30px;
- font-weight: 700;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- text-align: center;
- font-size: 35px;
- line-height: 50px;
- }
-`;
diff --git a/src/components/features/Home/RankingList/index.stories.tsx b/src/components/features/Home/RankingList/index.stories.tsx
new file mode 100644
index 00000000..c5d4ff0d
--- /dev/null
+++ b/src/components/features/Home/RankingList/index.stories.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import FilterProvider from '@context/filter/FilterProvider';
+import RankingList from '.';
+
+const queryClient = new QueryClient();
+
+const meta: Meta = {
+ title: 'features/Home/RankingList',
+ component: RankingList,
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/components/features/Home/RankingList/index.tsx b/src/components/features/Home/RankingList/index.tsx
new file mode 100644
index 00000000..b3a19e10
--- /dev/null
+++ b/src/components/features/Home/RankingList/index.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Grid, Button, GoodsItem, StatusHandler } from '@components/common';
+import useToggle from '@hooks/useToggle';
+import { useFilter } from '@context/filter/useFilter';
+import { useQuery } from '@tanstack/react-query';
+import { RankingProductsResponse } from '@internalTypes/responseTypes';
+import { getRankingProducts } from '@apis/ranking';
+import { AxiosError } from 'axios';
+
+const INITIAL_DISPLAY_COUNT = 6;
+const GRID_GAP = 14;
+const GRID_COLUMNS = 6;
+
+export default function RankingList() {
+ const [showAll, toggleShowAll] = useToggle(false);
+ const { selectedTarget, selectedWish } = useFilter();
+
+ const { isLoading, isError, error, data } = useQuery({
+ queryKey: ['rankingProducts', selectedTarget, selectedWish],
+ queryFn: () => getRankingProducts({ targetType: selectedTarget, rankType: selectedWish }),
+ });
+
+ const displayedProducts = showAll ? data?.products : data?.products.slice(0, INITIAL_DISPLAY_COUNT);
+ const isEmpty = !data || data?.products.length === 0;
+
+ return (
+
+
+
+ {displayedProducts?.map((product, index) => (
+
+ ))}
+
+
+
+
+
+
+ );
+}
+
+const RankingListContainer = styled.div`
+ padding-top: 40px;
+ padding-bottom: 60px;
+`;
+
+const ButtonContainer = styled.div`
+ padding-top: 30px;
+ width: 480px;
+ margin: 0 auto;
+`;
diff --git a/src/components/features/Home/SelectFriendsBanner/index.tsx b/src/components/features/Home/SelectFriendsBanner/index.tsx
deleted file mode 100644
index 3c10a543..00000000
--- a/src/components/features/Home/SelectFriendsBanner/index.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import styled from '@emotion/styled';
-
-import { Image } from '@/components/common/Image';
-import { Container as CommonContainer } from '@/components/common/layouts/Container';
-import { breakpoints } from '@/styles/variants';
-
-export const SelectFriendsBanner = () => (
-
-
- {
- alert('์ ๋ฌผ ๋ฐ์ ์น๊ตฌ ์ ํํ๊ธฐ');
- }}
- />
- ์ ๋ฌผ ๋ฐ์ ์น๊ตฌ๋ฅผ ์ ํํด์ฃผ์ธ์.
-
-
-);
-
-const Wrapper = styled.section`
- width: 100%;
- height: 76px;
- padding: 18px 16px;
-
- background: #fafafa;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- height: 150px;
- padding: 40px 16px;
- }
-`;
-
-const Container = styled(CommonContainer)`
- height: 100%;
-`;
-
-const SelectImage = styled(Image)`
- width: 40px;
- height: 40px;
- border-radius: 16px;
- cursor: pointer;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- width: 70px;
- height: 70px;
- border-radius: 24px;
- }
-`;
-
-const Text = styled.p`
- padding-left: 16px;
- font-size: 17px;
- line-height: 22px;
- color: #333;
- font-weight: 500;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- font-size: 28px;
- line-height: 35px;
- }
-`;
diff --git a/src/components/features/Home/ThemeCategory/ThemeItem/index.stories.tsx b/src/components/features/Home/ThemeCategory/ThemeItem/index.stories.tsx
new file mode 100644
index 00000000..79bdbe84
--- /dev/null
+++ b/src/components/features/Home/ThemeCategory/ThemeItem/index.stories.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { Meta, StoryObj } from '@storybook/react';
+import theme from '@assets/images/theme.jpeg';
+import ThemeItem, { ThemeItemProps } from '.';
+
+const meta: Meta = {
+ title: 'features/Home/ThemeCategory/ThemeItem',
+ component: ThemeItem,
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+ argTypes: {
+ image: { control: 'text' },
+ name: { control: 'text' },
+ themeKey: { control: 'text' },
+ },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+ args: {
+ image: theme,
+ name: '์ค๋ชฐ๋ญ์
๋ฆฌ',
+ themeKey: 'small-luxury',
+ },
+};
diff --git a/src/components/features/Home/ThemeCategory/ThemeItem/index.tsx b/src/components/features/Home/ThemeCategory/ThemeItem/index.tsx
new file mode 100644
index 00000000..844ecaa0
--- /dev/null
+++ b/src/components/features/Home/ThemeCategory/ThemeItem/index.tsx
@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { Container, Image } from '@components/common';
+
+const IMAGE_SIZE = 90;
+const IMAGE_RADIUS = 32;
+
+export interface ThemeItemProps {
+ image: string;
+ label: string;
+}
+
+export default function ThemeItem({ image, label }: ThemeItemProps) {
+ return (
+
+
+
+ {label}
+
+
+ );
+}
+
+const ThemeItemContainer = styled.div`
+ padding: 25px 35px;
+ cursor: pointer;
+`;
+
+const CategoryName = styled.p`
+ padding-top: 7px;
+`;
diff --git a/src/components/features/Home/ThemeCategory/index.stories.tsx b/src/components/features/Home/ThemeCategory/index.stories.tsx
new file mode 100644
index 00000000..9ef8477f
--- /dev/null
+++ b/src/components/features/Home/ThemeCategory/index.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import { Meta, StoryObj } from '@storybook/react';
+import GlobalStyles from '@assets/styles';
+import ThemeCategory from '.';
+
+const queryClient = new QueryClient();
+
+const meta: Meta = {
+ title: 'features/Home/ThemeCategory',
+ component: ThemeCategory,
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/components/features/Home/ThemeCategory/index.tsx b/src/components/features/Home/ThemeCategory/index.tsx
new file mode 100644
index 00000000..eb12e40e
--- /dev/null
+++ b/src/components/features/Home/ThemeCategory/index.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { getThemes } from '@apis/themes';
+import { Grid, CenteredContainer, StatusHandler } from '@components/common';
+import { useQuery } from '@tanstack/react-query';
+import { Link } from 'react-router-dom';
+import { ROUTE_PATH } from '@routes/path';
+import { getDynamicPath } from '@utils/getDynamicPath';
+import { ThemesResponse } from '@internalTypes/responseTypes';
+import { AxiosError } from 'axios';
+import ThemeItem from './ThemeItem';
+
+const GRID_GAP = 0;
+const GRID_COLUMNS = 6;
+
+export default function ThemeCategory() {
+ const { data, error, isError, isLoading } = useQuery({
+ queryKey: ['theme'],
+ queryFn: getThemes,
+ });
+
+ const isEmpty = !data || data?.themes.length === 0;
+
+ return (
+
+
+
+
+ {data?.themes.map((theme) => (
+
+
+
+ ))}
+
+
+
+
+ );
+}
+
+const ThemeCategoryContainer = styled.section`
+ padding-top: 45px;
+ padding-bottom: 23px;
+`;
diff --git a/src/components/features/Home/ThemeCategorySection/ThemeCategoryItem.tsx b/src/components/features/Home/ThemeCategorySection/ThemeCategoryItem.tsx
deleted file mode 100644
index c098d864..00000000
--- a/src/components/features/Home/ThemeCategorySection/ThemeCategoryItem.tsx
+++ /dev/null
@@ -1,57 +0,0 @@
-import styled from '@emotion/styled';
-
-import { Image } from '@/components/common/Image';
-import { breakpoints } from '@/styles/variants';
-
-type Props = {
- image: string;
- label: string;
-} & React.HTMLAttributes;
-
-export const ThemeCategoryItem = ({ image, label, ...props }: Props) => (
-
-
-
-
-);
-
-const Wrapper = styled.div`
- width: 100%;
- padding: 13px 0 12px;
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- padding: 25px 35px 24px;
- }
-`;
-
-const CategoryImage = styled(Image)`
- width: 100%;
- height: 100%;
- max-width: 50px;
- max-height: 50px;
-
- border-radius: 18px;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- max-width: 90px;
- max-height: 90px;
- border-radius: 32px;
- }
-`;
-
-const Label = styled.p`
- padding-top: 5px;
- font-size: 13px;
- line-height: 17px;
- color: #333;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- padding-top: 7px;
- font-size: 16px;
- line-height: 28px;
- }
-`;
diff --git a/src/components/features/Home/ThemeCategorySection/index.tsx b/src/components/features/Home/ThemeCategorySection/index.tsx
deleted file mode 100644
index d82e3afe..00000000
--- a/src/components/features/Home/ThemeCategorySection/index.tsx
+++ /dev/null
@@ -1,105 +0,0 @@
-import styled from '@emotion/styled';
-import { Link } from 'react-router-dom';
-
-import { Container } from '@/components/common/layouts/Container';
-import { Grid } from '@/components/common/layouts/Grid';
-import { getDynamicPath } from '@/routes/path';
-import { breakpoints } from '@/styles/variants';
-
-import { ThemeCategoryItem } from './ThemeCategoryItem';
-
-export const ThemeCategorySection = () => {
- return (
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- );
-};
-
-const Wrapper = styled.section`
- padding: 14px 14px 3px;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- padding: 45px 52px 23px;
- }
-`;
diff --git a/src/components/features/Home/TrendingGifts/index.stories.tsx b/src/components/features/Home/TrendingGifts/index.stories.tsx
new file mode 100644
index 00000000..e581ee04
--- /dev/null
+++ b/src/components/features/Home/TrendingGifts/index.stories.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import FilterProvider from '@context/filter/FilterProvider';
+import TrendingGifts from '.';
+
+const queryClient = new QueryClient();
+
+const meta: Meta = {
+ title: 'features/Home/TrendingGifts',
+ component: TrendingGifts,
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/components/features/Home/TrendingGifts/index.tsx b/src/components/features/Home/TrendingGifts/index.tsx
new file mode 100644
index 00000000..4d5a2efd
--- /dev/null
+++ b/src/components/features/Home/TrendingGifts/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { CenteredContainer } from '@components/common/';
+import { RankingList, Filter } from '@components/features/Home';
+
+export default function TrendingGifts() {
+ return (
+
+
+ ์ค์๊ฐ ๊ธ์์น ์ ๋ฌผ๋ญํน
+
+
+
+
+ );
+}
+
+const TrendingGiftsSection = styled.section`
+ padding-top: 120px;
+ padding-bottom: 80px;
+`;
+
+const Title = styled.h2`
+ font-size: 35px;
+ text-align: center;
+`;
diff --git a/src/components/features/Home/index.ts b/src/components/features/Home/index.ts
new file mode 100644
index 00000000..3b3e9acd
--- /dev/null
+++ b/src/components/features/Home/index.ts
@@ -0,0 +1,6 @@
+export { default as Filter } from './Filter';
+export { default as FriendSelector } from './FriendSelector';
+export { default as FriendGiftRecommendation } from './FriendGiftRecommendation';
+export { default as RankingList } from './RankingList';
+export { default as ThemeCategory } from './ThemeCategory';
+export { default as TrendingGifts } from './TrendingGifts';
diff --git a/src/components/features/Layout/Footer.tsx b/src/components/features/Layout/Footer.tsx
deleted file mode 100644
index c5a28861..00000000
--- a/src/components/features/Layout/Footer.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import styled from '@emotion/styled';
-
-import { Container } from '@/components/common/layouts/Container';
-import { breakpoints } from '@/styles/variants';
-
-export const Footer = () => {
- return (
-
-
- ์นด์นด์คํก ์ ๋ฌผํ๊ธฐ
-
-
- );
-};
-
-export const Wrapper = styled.footer`
- padding: 28px 16px 88px;
- width: 100%;
- max-width: 100vw;
- background-color: #fafafc;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- padding: 40px 16px 120px;
- }
-`;
diff --git a/src/components/features/Layout/Footer/index.stories.ts b/src/components/features/Layout/Footer/index.stories.ts
new file mode 100644
index 00000000..5ef63d34
--- /dev/null
+++ b/src/components/features/Layout/Footer/index.stories.ts
@@ -0,0 +1,14 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Footer from '.';
+
+const meta: Meta = {
+ title: 'features/Layout/Footer',
+ component: Footer,
+ tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/components/features/Layout/Footer/index.tsx b/src/components/features/Layout/Footer/index.tsx
new file mode 100644
index 00000000..81fe6e13
--- /dev/null
+++ b/src/components/features/Layout/Footer/index.tsx
@@ -0,0 +1,19 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { CenteredContainer } from '@components/common';
+
+export default function Footer() {
+ return (
+
+
+ ์นด์นด์คํก ์ ๋ฌผํ๊ธฐ
+
+
+ );
+}
+
+const FooterContainer = styled.footer`
+ padding-top: 16px;
+ padding-bottom: 120px;
+ background-color: #fafafc;
+`;
diff --git a/src/components/features/Layout/Header.tsx b/src/components/features/Layout/Header.tsx
deleted file mode 100644
index eeac5507..00000000
--- a/src/components/features/Layout/Header.tsx
+++ /dev/null
@@ -1,60 +0,0 @@
-import styled from '@emotion/styled';
-import { Link, useNavigate } from 'react-router-dom';
-
-import { Container } from '@/components/common/layouts/Container';
-import { useAuth } from '@/provider/Auth';
-import { getDynamicPath, RouterPath } from '@/routes/path';
-
-export const Header = () => {
- const navigate = useNavigate();
- const authInfo = useAuth();
-
- const handleLogin = () => {
- navigate(getDynamicPath.login());
- };
-
- return (
-
-
-
-
-
-
- {authInfo ? (
- navigate(RouterPath.myAccount)}>๋ด ๊ณ์
- ) : (
- ๋ก๊ทธ์ธ
- )}
-
-
-
- );
-};
-
-export const HEADER_HEIGHT = '54px';
-
-export const Wrapper = styled.header`
- position: fixed;
- z-index: 9999;
- width: 100%;
- max-width: 100vw;
- height: ${HEADER_HEIGHT};
- background-color: #fff;
- padding: 0 16px;
-`;
-
-const Logo = styled.img`
- height: ${HEADER_HEIGHT};
-`;
-const RightWrapper = styled.div``;
-
-const LinkButton = styled.p`
- align-items: center;
- font-size: 14px;
- color: #000;
- text-decoration: none;
- cursor: pointer;
-`;
diff --git a/src/components/features/Layout/Header/AuthLinks/index.stories.tsx b/src/components/features/Layout/Header/AuthLinks/index.stories.tsx
new file mode 100644
index 00000000..032aa910
--- /dev/null
+++ b/src/components/features/Layout/Header/AuthLinks/index.stories.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { MemoryRouter } from 'react-router-dom';
+import AuthContext from '@context/auth/AuthContext';
+import { Global } from '@emotion/react';
+import resetStyles from '@/assets/styles/global/resetStyles';
+import AuthLinks from '.';
+
+const meta: Meta = {
+ title: 'features/Layout/Header/Authlinks',
+ component: AuthLinks,
+ tags: ['autodocs'],
+ decorators: [
+ (Story, context) => {
+ const { isAuthenticated } = context.parameters;
+ return (
+ {}, logout: () => {} }}>
+
+
+
+
+
+ );
+ },
+ ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const UnAuthenticated: Story = {
+ parameters: {
+ isAuthenticated: false,
+ },
+};
+
+export const Authenticated: Story = {
+ parameters: {
+ isAuthenticated: true,
+ },
+};
diff --git a/src/components/features/Layout/Header/AuthLinks/index.tsx b/src/components/features/Layout/Header/AuthLinks/index.tsx
new file mode 100644
index 00000000..fe08085d
--- /dev/null
+++ b/src/components/features/Layout/Header/AuthLinks/index.tsx
@@ -0,0 +1,26 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { useAuth } from '@context/auth/useAuth';
+import { Link } from 'react-router-dom';
+import { ROUTE_PATH } from '@routes/path';
+
+const AUTH_LINKS = {
+ authenticated: { path: ROUTE_PATH.MY_ACCOUNT, label: '๋ด ๊ณ์ ' },
+ unauthenticated: { path: ROUTE_PATH.LOGIN, label: '๋ก๊ทธ์ธ' },
+};
+
+export default function AuthLinks() {
+ const { isAuthenticated } = useAuth();
+
+ const linkConfig = isAuthenticated ? AUTH_LINKS.authenticated : AUTH_LINKS.unauthenticated;
+
+ return (
+
+ {linkConfig.label}
+
+ );
+}
+
+const AuthLink = styled.p`
+ font-size: 14px;
+`;
diff --git a/src/components/features/Layout/Header/index.stories.tsx b/src/components/features/Layout/Header/index.stories.tsx
new file mode 100644
index 00000000..65b401d0
--- /dev/null
+++ b/src/components/features/Layout/Header/index.stories.tsx
@@ -0,0 +1,42 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { Meta, StoryObj } from '@storybook/react';
+import AuthContext from '@context/auth/AuthContext';
+import { Global } from '@emotion/react';
+import resetStyles from '@/assets/styles/global/resetStyles';
+import Header from '.';
+
+const meta: Meta = {
+ title: 'features/Layout/Header',
+ component: Header,
+ tags: ['autodocs'],
+ decorators: [
+ (Story, context) => {
+ const { isAuthenticated } = context.parameters;
+ return (
+ {}, logout: () => {} }}>
+
+
+
+
+
+ );
+ },
+ ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const UnAuthenticated: Story = {
+ parameters: {
+ isAuthenticated: false,
+ },
+};
+
+export const Authenticated: Story = {
+ parameters: {
+ isAuthenticated: true,
+ },
+};
diff --git a/src/components/features/Layout/Header/index.tsx b/src/components/features/Layout/Header/index.tsx
new file mode 100644
index 00000000..c3dc7e73
--- /dev/null
+++ b/src/components/features/Layout/Header/index.tsx
@@ -0,0 +1,37 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import logo from '@assets/images/logo.png';
+import { CenteredContainer, Container } from '@components/common';
+import { Link } from 'react-router-dom';
+import { ROUTE_PATH } from '@routes/path';
+import AuthLinks from './AuthLinks';
+
+const LOGO_ALT = 'home page logo';
+
+export default function Header() {
+ return (
+
+
+
+
+
+
+
+
+
+
+ );
+}
+
+const HeaderContainer = styled.header`
+ position: fixed;
+ background-color: #fff;
+ width: 100%;
+ top: 0;
+ left: 0;
+ z-index: 9;
+`;
+
+const Logo = styled.img`
+ width: 60px;
+`;
diff --git a/src/components/features/Layout/index.tsx b/src/components/features/Layout/index.tsx
index f9ccc235..c7bb35c0 100644
--- a/src/components/features/Layout/index.tsx
+++ b/src/components/features/Layout/index.tsx
@@ -1,28 +1,16 @@
-import styled from '@emotion/styled';
-import { Outlet } from 'react-router-dom';
+import React, { ReactNode } from 'react';
+import { Header, Footer } from '@components/common';
-import { Footer } from './Footer';
-import { Header, HEADER_HEIGHT } from './Header';
+export interface PageWrapperProps {
+ children: ReactNode;
+}
-export const Layout = () => (
-
-
-
-
+export default function Layout({ children }: PageWrapperProps) {
+ return (
+ <>
+
+ {children}
-
-
-);
-
-const Wrapper = styled.div`
- width: 100%;
- position: relative;
-`;
-
-const InnerWrapper = styled.div`
- width: 100%;
- position: absolute;
- top: 0;
- left: 0;
- margin-top: ${HEADER_HEIGHT};
-`;
+
+ );
+}
diff --git a/src/components/features/Login/LoginForm/index.stories.tsx b/src/components/features/Login/LoginForm/index.stories.tsx
new file mode 100644
index 00000000..4b78d669
--- /dev/null
+++ b/src/components/features/Login/LoginForm/index.stories.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { MemoryRouter } from 'react-router-dom';
+import { Meta, StoryObj } from '@storybook/react';
+import AuthContext from '@context/auth/AuthContext';
+import { Global } from '@emotion/react';
+import resetStyles from '@/assets/styles/global/resetStyles';
+import LoginForm from '.';
+
+const meta: Meta = {
+ title: 'features/Login/LoginForm',
+ component: LoginForm,
+ tags: ['autodocs'],
+ decorators: [
+ (Story, context) => {
+ const { isAuthenticated } = context.parameters;
+ return (
+ {}, logout: () => {} }}>
+
+
+
+
+
+ );
+ },
+ ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/components/features/Login/LoginForm/index.tsx b/src/components/features/Login/LoginForm/index.tsx
new file mode 100644
index 00000000..769fb4ca
--- /dev/null
+++ b/src/components/features/Login/LoginForm/index.tsx
@@ -0,0 +1,56 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { InputField, Button } from '@components/common';
+import useLoginForm from './useLoginForm';
+
+export default function LoginForm() {
+ const { userInfo, handleChange, handleSubmit } = useLoginForm();
+
+ return (
+
+
+
+
+
+
+
+
+
+ );
+}
+
+const FormContainer = styled.form`
+ width: 580px;
+ padding: 60px 52px;
+ border: 1px solid rgba(0, 0, 0, 0.12);
+`;
+
+const InputContainer = styled.div`
+ margin-bottom: 28px;
+
+ &:last-of-type {
+ margin-bottom: 60px;
+ }
+`;
diff --git a/src/components/features/Login/LoginForm/useLoginForm.ts b/src/components/features/Login/LoginForm/useLoginForm.ts
new file mode 100644
index 00000000..a95d7404
--- /dev/null
+++ b/src/components/features/Login/LoginForm/useLoginForm.ts
@@ -0,0 +1,41 @@
+import { useAuth } from '@context/auth/useAuth';
+import { ROUTE_PATH } from '@routes/path';
+import { ChangeEvent, FormEvent, useState } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+interface UserInfoState {
+ userName: string;
+ userPassword: string;
+}
+
+export default function useLoginForm() {
+ const navigate = useNavigate();
+ const { login } = useAuth();
+ const [userInfo, setUserInfo] = useState({
+ userName: '',
+ userPassword: '',
+ });
+
+ const handleChange = (e: ChangeEvent) => {
+ const { name, value } = e.target;
+ setUserInfo({ ...userInfo, [name]: value });
+ };
+
+ const handleLogin = () => {
+ if (userInfo.userName !== '' && userInfo.userPassword !== '') {
+ login(userInfo.userName);
+ navigate(ROUTE_PATH.PREV);
+ }
+ };
+
+ const handleSubmit = (e: FormEvent) => {
+ e.preventDefault();
+ handleLogin();
+ };
+
+ return {
+ userInfo,
+ handleChange,
+ handleSubmit,
+ };
+}
diff --git a/src/components/features/Theme/GoodsItemList/index.stories.tsx b/src/components/features/Theme/GoodsItemList/index.stories.tsx
new file mode 100644
index 00000000..be39b123
--- /dev/null
+++ b/src/components/features/Theme/GoodsItemList/index.stories.tsx
@@ -0,0 +1,30 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { MemoryRouter } from 'react-router-dom';
+import GlobalStyles from '@assets/styles';
+import GoodsItemList from '.';
+
+const queryClient = new QueryClient();
+
+const meta: Meta = {
+ title: 'features/Theme/GoodsItemList',
+ component: GoodsItemList,
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/components/features/Theme/GoodsItemList/index.tsx b/src/components/features/Theme/GoodsItemList/index.tsx
new file mode 100644
index 00000000..ef68ac31
--- /dev/null
+++ b/src/components/features/Theme/GoodsItemList/index.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import styled from '@emotion/styled';
+import { GoodsItem, Grid, CenteredContainer, StatusHandler } from '@components/common';
+import { useParams } from 'react-router-dom';
+import useGoodsItemListQuery from '@hooks/useGoodsItemListQuery';
+import useInfiniteScroll from '@hooks/useInfiniteScroll';
+import { ThemeProductsRequest } from '@internalTypes/requestTypes';
+
+const GRID_GAP = 14;
+const GRID_COLUMNS = 4;
+const MAX_RESULTS = 20;
+
+export default function GoodsItemList() {
+ const { themeKey } = useParams>();
+ const { products, isLoading, isError, error, fetchNextPage, isFetchingNextPage, hasNextPage } = useGoodsItemListQuery(
+ { themeKey, rowsPerPage: MAX_RESULTS },
+ );
+ const ref = useInfiniteScroll({ condition: hasNextPage && !isFetchingNextPage, fetchNextPage });
+
+ const isEmpty = products.length === 0;
+
+ return (
+
+
+
+
+ {products.map((product) => (
+
+ ))}
+ {hasNextPage && }
+
+
+
+
+ );
+}
+
+const GoodsItemListContainer = styled.section`
+ padding-top: 40px;
+ padding-bottom: 360px;
+`;
diff --git a/src/components/features/Theme/ThemeGoodsSection/index.tsx b/src/components/features/Theme/ThemeGoodsSection/index.tsx
deleted file mode 100644
index 8edbf70e..00000000
--- a/src/components/features/Theme/ThemeGoodsSection/index.tsx
+++ /dev/null
@@ -1,46 +0,0 @@
-import styled from '@emotion/styled';
-
-import { DefaultGoodsItems } from '@/components/common/GoodsItem/Default';
-import { Container } from '@/components/common/layouts/Container';
-import { Grid } from '@/components/common/layouts/Grid';
-import { breakpoints } from '@/styles/variants';
-import { GoodsMockList } from '@/types/mock';
-
-type Props = {
- themeKey: string;
-};
-
-export const ThemeGoodsSection = ({}: Props) => {
- return (
-
-
-
- {GoodsMockList.map(({ id, imageURL, name, price, brandInfo }) => (
-
- ))}
-
-
-
- );
-};
-
-const Wrapper = styled.section`
- width: 100%;
- padding: 28px 16px 180px;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- padding: 40px 16px 360px;
- }
-`;
diff --git a/src/components/features/Theme/ThemeHeader/index.stories.tsx b/src/components/features/Theme/ThemeHeader/index.stories.tsx
new file mode 100644
index 00000000..c93b2e19
--- /dev/null
+++ b/src/components/features/Theme/ThemeHeader/index.stories.tsx
@@ -0,0 +1,51 @@
+import React, { ReactNode } from 'react';
+import { MemoryRouter, Route, Routes } from 'react-router-dom';
+import { Meta, StoryObj } from '@storybook/react';
+import { ROUTE_PATH } from '@routes/path';
+import ThemeHeader from '.';
+
+interface MockUseLocationDecoratorProps {
+ state: {
+ title: string;
+ label: string;
+ description?: string;
+ backgroundColor: string;
+ };
+ children: ReactNode;
+}
+
+function MockUseLocationDecorator({ state, children }: MockUseLocationDecoratorProps) {
+ return (
+
+
+
+
+
+ );
+}
+
+const meta: Meta = {
+ title: 'features/Theme/ThemeHeader',
+ component: ThemeHeader,
+ tags: ['autodocs'],
+ decorators: [
+ (Story) => (
+
+
+
+ ),
+ ],
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};
diff --git a/src/components/features/Theme/ThemeHeader/index.tsx b/src/components/features/Theme/ThemeHeader/index.tsx
new file mode 100644
index 00000000..42f729fc
--- /dev/null
+++ b/src/components/features/Theme/ThemeHeader/index.tsx
@@ -0,0 +1,61 @@
+import React, { useEffect } from 'react';
+import styled from '@emotion/styled';
+import { CenteredContainer } from '@components/common';
+import { useLocation, useNavigate } from 'react-router-dom';
+import { ROUTE_PATH } from '@routes/path';
+
+interface LocationState {
+ title: string;
+ label: string;
+ description?: string;
+ backgroundColor: string;
+}
+
+export default function ThemeHeader() {
+ const location = useLocation();
+ const navigate = useNavigate();
+ const state = location.state as LocationState | null;
+
+ useEffect(() => {
+ if (!state) navigate(ROUTE_PATH.HOME);
+ }, [state, navigate]);
+
+ if (!state) return null;
+
+ const { title, label, description, backgroundColor } = state;
+
+ return (
+
+
+
+ {title}
+ {description}
+
+
+ );
+}
+
+const ThemeHeaderContainer = styled.section<{ color?: string }>`
+ margin-top: 60px;
+ background-color: ${({ color }) => color};
+ padding: 50px 0;
+`;
+
+const Label = styled.p`
+ font-size: 20px;
+ color: #ffffffb3;
+ font-weight: 700;
+`;
+
+const Title = styled.h1`
+ font-size: 30px;
+ font-weight: 700;
+ color: #fff;
+ padding-top: 12px;
+`;
+
+const Description = styled.p`
+ font-size: 24px;
+ color: #ffffff8c;
+ padding-top: 12px;
+`;
diff --git a/src/components/features/Theme/ThemeHeroSection/index.tsx b/src/components/features/Theme/ThemeHeroSection/index.tsx
deleted file mode 100644
index 36cfc038..00000000
--- a/src/components/features/Theme/ThemeHeroSection/index.tsx
+++ /dev/null
@@ -1,88 +0,0 @@
-import styled from '@emotion/styled';
-
-import { Container } from '@/components/common/layouts/Container';
-import { breakpoints } from '@/styles/variants';
-import type { ThemeData } from '@/types';
-import { ThemeMockList } from '@/types/mock';
-
-type Props = {
- themeKey: string;
-};
-
-export const ThemeHeroSection = ({ themeKey }: Props) => {
- const currentTheme = getCurrentTheme(themeKey, ThemeMockList);
-
- if (!currentTheme) {
- return null;
- }
-
- const { backgroundColor, label, title, description } = currentTheme;
-
- return (
-
-
-
- {title}
- {description && {description}}
-
-
- );
-};
-
-const Wrapper = styled.section<{ backgroundColor: string }>`
- padding: 27px 20px 23px;
- width: 100%;
- background-color: ${({ backgroundColor }) => backgroundColor};
-
- @media screen and (min-width: ${breakpoints.sm}) {
- padding: 50px 20px;
- }
-`;
-
-const Label = styled.p`
- font-weight: 700;
- font-size: 13px;
- line-height: 16px;
- color: rgba(255, 255, 255, 0.7);
-
- @media screen and (min-width: ${breakpoints.sm}) {
- font-size: 20px;
- line-height: 24px;
- }
-`;
-
-const Title = styled.h1`
- font-weight: 700;
- color: #fff;
- font-size: 18px;
- line-height: 26px;
- word-break: break-all;
- overflow: hidden;
- text-overflow: ellipsis;
- -webkit-line-clamp: 2;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- font-size: 30px;
- line-height: 40px;
- padding-top: 12px;
- word-break: break-word;
- }
-`;
-
-const Description = styled.p`
- padding-top: 5px;
- font-size: 14px;
- line-height: 20px;
- color: rgba(255, 255, 255, 0.55);
- word-break: break-all;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- padding-top: 12px;
- font-size: 24px;
- line-height: 32px;
- }
-`;
-
-export const getCurrentTheme = (themeKey: string, themeList: ThemeData[]) => {
- return themeList.find((theme) => theme.key === themeKey);
-};
diff --git a/src/context/auth/AuthContext.tsx b/src/context/auth/AuthContext.tsx
new file mode 100644
index 00000000..0368e52a
--- /dev/null
+++ b/src/context/auth/AuthContext.tsx
@@ -0,0 +1,11 @@
+import { createContext } from 'react';
+
+interface AuthContextProps {
+ isAuthenticated: boolean;
+ login: (userName: string) => void;
+ logout: () => void;
+}
+
+const AuthContext = createContext(undefined);
+
+export default AuthContext;
diff --git a/src/context/auth/AuthProvider.tsx b/src/context/auth/AuthProvider.tsx
new file mode 100644
index 00000000..b5aa5360
--- /dev/null
+++ b/src/context/auth/AuthProvider.tsx
@@ -0,0 +1,42 @@
+import React, { ReactNode, useEffect, useState, useMemo, useCallback } from 'react';
+import { useNavigate } from 'react-router-dom';
+import { useSessionStorage } from '@hooks/useSessionStorage';
+import { ROUTE_PATH } from '@routes/path';
+import AuthContext from './AuthContext';
+
+interface AuthProviderProps {
+ children: ReactNode;
+}
+
+export default function AuthProvider({ children }: AuthProviderProps) {
+ const navigate = useNavigate();
+ const [authToken, setAuthToken] = useSessionStorage('authToken', '');
+ const [isAuthenticated, setIsAuthenticated] = useState(!!authToken);
+
+ useEffect(() => {
+ setIsAuthenticated(!!authToken);
+ }, [authToken]);
+
+ const login = useCallback(
+ (userName: string) => {
+ setAuthToken(userName);
+ },
+ [setAuthToken],
+ );
+
+ const logout = useCallback(() => {
+ setAuthToken('');
+ navigate(ROUTE_PATH.HOME);
+ }, [setAuthToken, navigate]);
+
+ const value = useMemo(
+ () => ({
+ isAuthenticated,
+ login,
+ logout,
+ }),
+ [isAuthenticated, login, logout],
+ );
+
+ return {children};
+}
diff --git a/src/context/auth/useAuth.ts b/src/context/auth/useAuth.ts
new file mode 100644
index 00000000..9d1ce7b0
--- /dev/null
+++ b/src/context/auth/useAuth.ts
@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import AuthContext from './AuthContext';
+
+const ERROR_MESSAGE = 'useAuth must be used within an AuthProvider';
+
+export const useAuth = () => {
+ const context = useContext(AuthContext);
+
+ if (!context) throw new Error(ERROR_MESSAGE);
+ return context;
+};
diff --git a/src/context/filter/FilterContext.tsx b/src/context/filter/FilterContext.tsx
new file mode 100644
index 00000000..14ca531b
--- /dev/null
+++ b/src/context/filter/FilterContext.tsx
@@ -0,0 +1,13 @@
+import { createContext } from 'react';
+import { TargetType, WishType } from '@components/features/Home/Filter/constants';
+
+interface FilterContextProps {
+ selectedTarget: TargetType;
+ selectedWish: WishType;
+ selectTarget: (target: TargetType) => void;
+ selectWish: (wish: WishType) => void;
+}
+
+const FilterContext = createContext(undefined);
+
+export default FilterContext;
diff --git a/src/context/filter/FilterProvider.tsx b/src/context/filter/FilterProvider.tsx
new file mode 100644
index 00000000..644ce071
--- /dev/null
+++ b/src/context/filter/FilterProvider.tsx
@@ -0,0 +1,45 @@
+import React, { ReactNode, useState, useMemo, useCallback } from 'react';
+import { TargetType, WishType } from '@components/features/Home/Filter/constants';
+import FilterContext from './FilterContext';
+
+interface FilterState {
+ target: TargetType;
+ wish: WishType;
+}
+
+interface FilterProviderProps {
+ children: ReactNode;
+}
+
+export default function FilterProvider({ children }: FilterProviderProps) {
+ const [filter, setFilter] = useState({
+ target: 'ALL',
+ wish: 'MANY_WISH',
+ });
+
+ const selectTarget = useCallback(
+ (target: TargetType) => {
+ setFilter((prevFilters) => ({ ...prevFilters, target }));
+ },
+ [setFilter],
+ );
+
+ const selectWish = useCallback(
+ (wish: WishType) => {
+ setFilter((prevFilters) => ({ ...prevFilters, wish }));
+ },
+ [setFilter],
+ );
+
+ const value = useMemo(
+ () => ({
+ selectedTarget: filter.target,
+ selectedWish: filter.wish,
+ selectTarget,
+ selectWish,
+ }),
+ [filter, selectTarget, selectWish],
+ );
+
+ return {children};
+}
diff --git a/src/context/filter/useFilter.ts b/src/context/filter/useFilter.ts
new file mode 100644
index 00000000..c4899cfc
--- /dev/null
+++ b/src/context/filter/useFilter.ts
@@ -0,0 +1,11 @@
+import { useContext } from 'react';
+import FilterContext from './FilterContext';
+
+const ERROR_MESSAGE = 'useFilter must be used within an FilterProvider';
+
+export const useFilter = () => {
+ const context = useContext(FilterContext);
+
+ if (!context) throw new Error(ERROR_MESSAGE);
+ return context;
+};
diff --git a/src/hooks/useFetch.ts b/src/hooks/useFetch.ts
new file mode 100644
index 00000000..421d3cb2
--- /dev/null
+++ b/src/hooks/useFetch.ts
@@ -0,0 +1,43 @@
+import { useState, useEffect, useCallback, useMemo } from 'react';
+import { AxiosError, AxiosRequestConfig } from 'axios';
+
+interface FetchState {
+ isLoading: boolean;
+ isError: boolean;
+ data: T | null;
+ error: AxiosError | null;
+}
+
+export default function useFetch(
+ apiCall: (params?: P) => Promise,
+ apiParams?: P,
+ options?: AxiosRequestConfig,
+): FetchState {
+ const [fetchState, setFetchState] = useState>({
+ isLoading: true,
+ isError: false,
+ error: null,
+ data: null,
+ });
+
+ const memoizedApiCall = useCallback(apiCall, [apiCall]);
+ const memoizedParams = useMemo(() => JSON.stringify(apiParams), [apiParams]);
+
+ useEffect(() => {
+ const fetchData = async () => {
+ setFetchState({ isLoading: true, isError: false, data: null, error: null });
+ try {
+ const data = await memoizedApiCall(apiParams);
+ setFetchState({ isLoading: false, isError: false, data, error: null });
+ } catch (error) {
+ const axiosError = error as AxiosError;
+ console.error('Error fetching data: ', error);
+ setFetchState({ isLoading: false, isError: true, data: null, error: axiosError });
+ }
+ };
+
+ fetchData();
+ }, [memoizedApiCall, memoizedParams]);
+
+ return fetchState;
+}
diff --git a/src/hooks/useGoodsItemListQuery.ts b/src/hooks/useGoodsItemListQuery.ts
new file mode 100644
index 00000000..cf53a501
--- /dev/null
+++ b/src/hooks/useGoodsItemListQuery.ts
@@ -0,0 +1,21 @@
+import { getThemesProducts } from '@apis/themes';
+import { useInfiniteQuery } from '@tanstack/react-query';
+import { useMemo } from 'react';
+
+interface useGoodsItemListQueryProps {
+ themeKey: string | undefined;
+ rowsPerPage: number;
+}
+
+export default function useGoodsItemListQuery({ themeKey, rowsPerPage }: useGoodsItemListQueryProps) {
+ const { data, isLoading, isError, error, fetchNextPage, isFetchingNextPage, hasNextPage } = useInfiniteQuery({
+ queryKey: ['themeProduct', themeKey],
+ queryFn: ({ pageParam = '0' }) => getThemesProducts({ themeKey, pageToken: pageParam, maxResults: rowsPerPage }),
+ initialPageParam: '0',
+ getNextPageParam: (lastPage) => lastPage.nextPageToken,
+ });
+
+ const products = useMemo(() => data?.pages.flatMap((page) => page.products) || [], [data]);
+
+ return { products, isLoading, isError, error, fetchNextPage, isFetchingNextPage, hasNextPage };
+}
diff --git a/src/hooks/useInfiniteScroll.ts b/src/hooks/useInfiniteScroll.ts
new file mode 100644
index 00000000..be0ca4bd
--- /dev/null
+++ b/src/hooks/useInfiniteScroll.ts
@@ -0,0 +1,17 @@
+import { useEffect } from 'react';
+import { useInView } from 'react-intersection-observer';
+
+interface useInfiniteScrollProps {
+ condition: boolean;
+ fetchNextPage: () => void;
+}
+
+export default function useInfiniteScroll({ condition, fetchNextPage }: useInfiniteScrollProps) {
+ const { ref, inView } = useInView();
+
+ useEffect(() => {
+ if (inView && condition) fetchNextPage();
+ }, [inView, condition, fetchNextPage]);
+
+ return ref;
+}
diff --git a/src/hooks/useSessionStorage.ts b/src/hooks/useSessionStorage.ts
new file mode 100644
index 00000000..81b1601c
--- /dev/null
+++ b/src/hooks/useSessionStorage.ts
@@ -0,0 +1,24 @@
+import { useState } from 'react';
+
+export function useSessionStorage(key: string, initialValue: string) {
+ const [storedValue, setStoredValue] = useState(() => {
+ try {
+ const item = sessionStorage.getItem(key);
+ return item ?? initialValue;
+ } catch (error) {
+ console.error(error);
+ return initialValue;
+ }
+ });
+
+ const setValue = (value: string) => {
+ try {
+ sessionStorage.setItem(key, value);
+ setStoredValue(value);
+ } catch (error) {
+ console.error(error);
+ }
+ };
+
+ return [storedValue, setValue] as const;
+}
diff --git a/src/hooks/useToggle.ts b/src/hooks/useToggle.ts
new file mode 100644
index 00000000..c755eb12
--- /dev/null
+++ b/src/hooks/useToggle.ts
@@ -0,0 +1,13 @@
+import { useState } from 'react';
+
+type UseToggleHook = [boolean, () => void];
+
+export default function useToggle(initialState: boolean): UseToggleHook {
+ const [isToggle, setIsToggle] = useState(initialState);
+
+ const toggle = () => {
+ setIsToggle((prevIsToggle) => !prevIsToggle);
+ };
+
+ return [isToggle, toggle];
+}
diff --git a/src/index.tsx b/src/index.tsx
index ab5f7ad6..8b702082 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,13 +1,16 @@
-import '@/styles';
-
import React from 'react';
import ReactDOM from 'react-dom/client';
-
-import App from '@/App';
+import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
+import { RouterProvider } from 'react-router-dom';
+import { router } from './routes/router';
const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);
+const queryClient = new QueryClient();
+
root.render(
-
+
+
+
,
);
diff --git a/src/pages/Home/index.tsx b/src/pages/Home/index.tsx
index b9fd8a50..a1ffa8d1 100644
--- a/src/pages/Home/index.tsx
+++ b/src/pages/Home/index.tsx
@@ -1,23 +1,14 @@
-import { Spacing } from '@/components/common/layouts/Spacing';
-import { AiDiscoveryBanner } from '@/components/features/Home/AiDiscoveryBanner';
-import { GoodsRankingSection } from '@/components/features/Home/GoodsRankingSection';
-import { SelectFriendsBanner } from '@/components/features/Home/SelectFriendsBanner';
-import { ThemeCategorySection } from '@/components/features/Home/ThemeCategorySection';
+import React from 'react';
+import Layout from '@components/features/Layout';
+import { FriendSelector, FriendGiftRecommendation, ThemeCategory, TrendingGifts } from '@components/features/Home';
-export const HomePage = () => {
+export default function Home() {
return (
- <>
-
-
-
-
-
-
+
+
+
+
+
+
);
-};
+}
diff --git a/src/pages/Login/index.tsx b/src/pages/Login/index.tsx
index 28c095f8..746230ed 100644
--- a/src/pages/Login/index.tsx
+++ b/src/pages/Login/index.tsx
@@ -1,80 +1,33 @@
+import React from 'react';
import styled from '@emotion/styled';
-import { useState } from 'react';
-import { useSearchParams } from 'react-router-dom';
+import { Image } from '@components/common';
+import LoginForm from '@components/features/Login/LoginForm';
+import kakaoLogo from '@assets/images/kakao-logo.svg';
-import KAKAO_LOGO from '@/assets/kakao_logo.svg';
-import { Button } from '@/components/common/Button';
-import { UnderlineTextField } from '@/components/common/Form/Input/UnderlineTextField';
-import { Spacing } from '@/components/common/layouts/Spacing';
-import { breakpoints } from '@/styles/variants';
-import { authSessionStorage } from '@/utils/storage';
-
-export const LoginPage = () => {
- const [id, setId] = useState('');
- const [password, setPassword] = useState('');
- const [queryParams] = useSearchParams();
-
- const handleConfirm = () => {
- if (!id || !password) {
- alert('์์ด๋์ ๋น๋ฐ๋ฒํธ๋ฅผ ์
๋ ฅํด์ฃผ์ธ์.');
- return;
- }
-
- // TODO: API ์ฐ๋
-
- // TODO: API ์ฐ๋ ์ ๊น์ง ์์ ๋ก๊ทธ์ธ ์ฒ๋ฆฌ
- authSessionStorage.set(id);
-
- const redirectUrl = queryParams.get('redirect') ?? `${window.location.origin}/`;
- return window.location.replace(redirectUrl);
- };
+const IMAGE_ALT = '์นด์นด์ค ๋ก๊ณ ';
+const IMAGE_SIZE = 88;
+export default function Login() {
return (
-
-
-
- setId(e.target.value)} />
-
- setPassword(e.target.value)}
- />
-
-
-
-
-
+
+
+
+
+
+
);
-};
+}
-const Wrapper = styled.div`
- width: 100vw;
+const LoginContainer = styled.section`
height: 100vh;
+ flex-direction: column;
display: flex;
justify-content: center;
align-items: center;
- flex-direction: column;
-`;
-
-const Logo = styled.img`
- width: 88px;
- color: #333;
`;
-const FormWrapper = styled.article`
- width: 100%;
- max-width: 580px;
- padding: 16px;
-
- @media screen and (min-width: ${breakpoints.sm}) {
- border: 1px solid rgba(0, 0, 0, 0.12);
- padding: 60px 52px;
- }
+const ImageContainer = styled.div`
+ display: flex;
+ justify-content: center;
+ align-items: center;
`;
diff --git a/src/pages/MyAccount/index.tsx b/src/pages/MyAccount/index.tsx
index 446257b5..4dd1e329 100644
--- a/src/pages/MyAccount/index.tsx
+++ b/src/pages/MyAccount/index.tsx
@@ -1,46 +1,11 @@
-import styled from '@emotion/styled';
-
-import { Button } from '@/components/common/Button';
-import { Spacing } from '@/components/common/layouts/Spacing';
-import { useAuth } from '@/provider/Auth';
-import { RouterPath } from '@/routes/path';
-import { authSessionStorage } from '@/utils/storage';
-
-export const MyAccountPage = () => {
- const authInfo = useAuth();
-
- const handleLogout = () => {
- authSessionStorage.set(undefined);
-
- const redirectURL = `${window.location.origin}${RouterPath.home}`;
- window.location.replace(redirectURL);
- };
+import React from 'react';
+import Layout from '@components/features/Layout';
+import AccountOverview from '@components/features/Account/AccountOverview';
+export default function MyAccount() {
return (
-
- {authInfo?.name}๋ ์๋
ํ์ธ์!
-
-
+
+
+
);
-};
-
-const Wrapper = styled.div`
- width: 100%;
- padding: 80px 0 120px;
-
- display: flex;
- flex-direction: column;
- align-items: center;
- justify-content: center;
- font-weight: 700;
- font-size: 36px;
-`;
+}
diff --git a/src/pages/Theme/index.tsx b/src/pages/Theme/index.tsx
index 4d02e6c1..26464cfc 100644
--- a/src/pages/Theme/index.tsx
+++ b/src/pages/Theme/index.tsx
@@ -1,22 +1,13 @@
-import { Navigate, useParams } from 'react-router-dom';
-
-import { ThemeGoodsSection } from '@/components/features/Theme/ThemeGoodsSection';
-import { getCurrentTheme, ThemeHeroSection } from '@/components/features/Theme/ThemeHeroSection';
-import { RouterPath } from '@/routes/path';
-import { ThemeMockList } from '@/types/mock';
-
-export const ThemePage = () => {
- const { themeKey = '' } = useParams<{ themeKey: string }>();
- const currentTheme = getCurrentTheme(themeKey, ThemeMockList);
-
- if (!currentTheme) {
- return ;
- }
+import React from 'react';
+import Layout from '@components/features/Layout';
+import GoodsItemList from '@components/features/Theme/GoodsItemList';
+import ThemeHeader from '@components/features/Theme/ThemeHeader';
+export default function Theme() {
return (
- <>
-
-
-
+
+
+
+
);
-};
+}
diff --git a/src/pages/index.ts b/src/pages/index.ts
new file mode 100644
index 00000000..cbfe6139
--- /dev/null
+++ b/src/pages/index.ts
@@ -0,0 +1,5 @@
+export { default as App } from '../App';
+export { default as Home } from './Home';
+export { default as Theme } from './Theme';
+export { default as Login } from './Login';
+export { default as MyAccount } from './MyAccount';
diff --git a/src/provider/Auth/index.tsx b/src/provider/Auth/index.tsx
deleted file mode 100644
index 77cbb73a..00000000
--- a/src/provider/Auth/index.tsx
+++ /dev/null
@@ -1,35 +0,0 @@
-import type { ReactNode } from 'react';
-import { createContext, useContext, useEffect, useState } from 'react';
-
-import { authSessionStorage } from '@/utils/storage';
-
-type AuthInfo = {
- id: string;
- name: string;
- token: string;
-};
-
-export const AuthContext = createContext(undefined);
-
-export const AuthProvider = ({ children }: { children: ReactNode }) => {
- const currentAuthToken = authSessionStorage.get();
- const [isReady, setIsReady] = useState(!currentAuthToken);
-
- const [authInfo, setAuthInfo] = useState(undefined);
-
- useEffect(() => {
- if (currentAuthToken) {
- setAuthInfo({
- id: currentAuthToken, // TODO: ์์๋ก ๋ก๊ทธ์ธ ํ์ด์ง์์ ์
๋ ฅํ ์ด๋ฆ์ ID, token, name์ผ๋ก ์ฌ์ฉ
- name: currentAuthToken,
- token: currentAuthToken,
- });
- setIsReady(true);
- }
- }, [currentAuthToken]);
-
- if (!isReady) return <>;
- return {children};
-};
-
-export const useAuth = () => useContext(AuthContext);
diff --git a/src/routes/components/PrivateRoute.tsx b/src/routes/components/PrivateRoute.tsx
deleted file mode 100644
index 3730598c..00000000
--- a/src/routes/components/PrivateRoute.tsx
+++ /dev/null
@@ -1,15 +0,0 @@
-import { Navigate, Outlet } from 'react-router-dom';
-
-import { useAuth } from '@/provider/Auth';
-
-import { getDynamicPath } from '../path';
-
-export const PrivateRoute = () => {
- const authInfo = useAuth();
-
- if (!authInfo) {
- return ;
- }
-
- return ;
-};
diff --git a/src/routes/components/PrivateRoute/index.tsx b/src/routes/components/PrivateRoute/index.tsx
new file mode 100644
index 00000000..a5642842
--- /dev/null
+++ b/src/routes/components/PrivateRoute/index.tsx
@@ -0,0 +1,10 @@
+import React from 'react';
+import { useAuth } from '@context/auth/useAuth';
+import { ROUTE_PATH } from '@routes/path';
+import { Navigate, Outlet } from 'react-router-dom';
+
+export default function PrivateRoute() {
+ const { isAuthenticated } = useAuth();
+
+ return isAuthenticated ? : ;
+}
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
deleted file mode 100644
index c9348614..00000000
--- a/src/routes/index.tsx
+++ /dev/null
@@ -1,49 +0,0 @@
-import { createBrowserRouter, Navigate, RouterProvider } from 'react-router-dom';
-
-import { Layout } from '@/components/features/Layout';
-import { HomePage } from '@/pages/Home';
-import { LoginPage } from '@/pages/Login';
-import { MyAccountPage } from '@/pages/MyAccount';
-import { ThemePage } from '@/pages/Theme';
-
-import { PrivateRoute } from './components/PrivateRoute';
-import { RouterPath } from './path';
-
-const router = createBrowserRouter([
- {
- path: RouterPath.root,
- element: ,
- children: [
- {
- path: RouterPath.home,
- element: ,
- },
- {
- path: RouterPath.theme,
- element: ,
- },
- {
- path: RouterPath.myAccount,
- element: ,
- children: [
- {
- path: RouterPath.myAccount,
- element: ,
- },
- ],
- },
- {
- path: RouterPath.notFound,
- element: ,
- },
- ],
- },
- {
- path: RouterPath.login,
- element: ,
- },
-]);
-
-export const Routes = () => {
- return ;
-};
diff --git a/src/routes/path.ts b/src/routes/path.ts
index 68fae013..1fe8d53d 100644
--- a/src/routes/path.ts
+++ b/src/routes/path.ts
@@ -1,16 +1,7 @@
-export const RouterPath = {
- root: '/',
- home: '/',
- theme: '/theme/:themeKey',
- myAccount: '/my-account',
- login: '/login',
- notFound: '*',
-};
-
-export const getDynamicPath = {
- theme: (themeKey: string) => RouterPath.theme.replace(':themeKey', themeKey),
- login: (redirect?: string) => {
- const currentRedirect = redirect ?? window.location.href;
- return `${RouterPath.login}?redirect=${encodeURIComponent(currentRedirect)}`;
- },
+export const ROUTE_PATH = {
+ PREV: -1,
+ HOME: '/',
+ THEME: '/theme/:themeKey',
+ LOGIN: '/login',
+ MY_ACCOUNT: '/my-account',
};
diff --git a/src/routes/router.tsx b/src/routes/router.tsx
new file mode 100644
index 00000000..aedf6530
--- /dev/null
+++ b/src/routes/router.tsx
@@ -0,0 +1,35 @@
+import React from 'react';
+import { createBrowserRouter } from 'react-router-dom';
+import { App, Home, Theme, Login, MyAccount } from '@pages/index';
+import PrivateRoute from './components/PrivateRoute';
+import { ROUTE_PATH } from './path';
+
+export const router = createBrowserRouter([
+ {
+ path: ROUTE_PATH.HOME,
+ element: ,
+ children: [
+ {
+ path: ROUTE_PATH.HOME,
+ element: ,
+ },
+ {
+ element: ,
+ children: [
+ {
+ path: ROUTE_PATH.THEME,
+ element: ,
+ },
+ {
+ path: ROUTE_PATH.MY_ACCOUNT,
+ element: ,
+ },
+ ],
+ },
+ {
+ path: ROUTE_PATH.LOGIN,
+ element: ,
+ },
+ ],
+ },
+]);
diff --git a/src/styles/index.ts b/src/styles/index.ts
deleted file mode 100644
index 172be612..00000000
--- a/src/styles/index.ts
+++ /dev/null
@@ -1,3 +0,0 @@
-import './reset.css';
-
-export * as vars from './variants';
diff --git a/src/styles/reset.css b/src/styles/reset.css
deleted file mode 100644
index d335819e..00000000
--- a/src/styles/reset.css
+++ /dev/null
@@ -1,99 +0,0 @@
-html {
- -ms-text-size-adjust: 100%;
- -webkit-text-size-adjust: 100%;
-}
-* {
- box-sizing: border-box;
-}
-abbr,
-blockquote,
-body,
-button,
-dd,
-dl,
-dt,
-fieldset,
-figure,
-form,
-h1,
-h2,
-h3,
-h4,
-h5,
-h6,
-hgroup,
-input,
-legend,
-li,
-ol,
-p,
-pre,
-address,
-caption,
-code,
-figcaption,
-pre,
-th,
-ul {
- margin: 0;
- padding: 0;
- font-weight: 400;
- font-style: normal;
-}
-
-fieldset,
-iframe {
- border: 0;
-}
-caption,
-th {
- text-align: left;
-}
-table {
- border-collapse: collapse;
- border-spacing: 0;
-}
-details,
-main,
-summary {
- display: block;
-}
-audio,
-canvas,
-progress,
-video {
- vertical-align: initial;
-}
-button {
- background: none;
- border: 0;
- box-sizing: initial;
- color: inherit;
- cursor: pointer;
- font: inherit;
- line-height: inherit;
- overflow: visible;
- vertical-align: inherit;
-}
-button:disabled {
- cursor: default;
-}
-:focus {
- outline: 4px solid rgba(0, 125, 250, 0.6);
- outline-offset: 1px;
-}
-:focus[data-focus-method='mouse']:not(input):not(textarea):not(select),
-:focus[data-focus-method='touch']:not(input):not(textarea):not(select) {
- outline: none;
-}
-::-moz-focus-inner {
- border: 0;
- padding: 0;
-}
-
-a {
- text-decoration: none;
-}
-a:focus {
- outline: none;
-}
diff --git a/src/styles/variants/index.ts b/src/styles/variants/index.ts
deleted file mode 100644
index 89e597b4..00000000
--- a/src/styles/variants/index.ts
+++ /dev/null
@@ -1,7 +0,0 @@
-export const breakpoints = {
- initial: '0',
- xs: '520px',
- sm: '768px',
- md: '1024px',
- lg: '1280px',
-};
diff --git a/src/types/index.ts b/src/types/dataTypes.ts
similarity index 60%
rename from src/types/index.ts
rename to src/types/dataTypes.ts
index 9d76b97b..c386a393 100644
--- a/src/types/index.ts
+++ b/src/types/dataTypes.ts
@@ -1,18 +1,4 @@
-export type ThemeData = {
- id: number;
- key: string;
- label: string;
- title: string;
- description?: string;
- backgroundColor: string;
-};
-
-export type RankingFilterOption = {
- targetType: 'ALL' | 'FEMALE' | 'MALE' | 'TEEN';
- rankType: 'MANY_WISH' | 'MANY_RECEIVE' | 'MANY_WISH_RECEIVE';
-};
-
-export type GoodsData = {
+export interface ProductData {
id: number;
name: string;
imageURL: string;
@@ -30,4 +16,21 @@ export type GoodsData = {
name: string;
imageURL: string;
};
-};
+}
+
+export interface ThemeData {
+ id: number;
+ key: string;
+ label: string;
+ title: string;
+ description?: string;
+ imageURL: string;
+ backgroundColor?: string;
+}
+
+export interface MessageCardTemplateData {
+ id: number;
+ defaultTextMessage: string;
+ thumbURL: string;
+ imageURL: string;
+}
diff --git a/src/types/mock.ts b/src/types/mock.ts
deleted file mode 100644
index cdd90cf7..00000000
--- a/src/types/mock.ts
+++ /dev/null
@@ -1,36 +0,0 @@
-import type { GoodsData, ThemeData } from '.';
-
-export const ThemeMockData: ThemeData = {
- id: 1,
- key: 'life_small_gift',
- label: '๊ฐ๋ฒผ์ด ์ ๋ฌผ',
- title: '์์ฐ์ ๊ฐ๋ณ๊ฒ, ๊ฐ๋์ ๋ฌด๊ฒ๊ฒโค๏ธ',
- description: '๋น์ ์ ์ผ์ค๋ฅผ ๋ฝ๋ด์ค ๋ถ๋ด ์๋ ์ ๋ฌผ',
- backgroundColor: '#4b4d50',
-};
-
-export const ThemeMockList = [ThemeMockData];
-
-export const GoodsMockData: GoodsData = {
- id: 123,
- name: 'BBQ ์๋
์นํจ+ํฌ๋ฆผ์น์ฆ๋ณผ+์ฝ๋ผ1.25L',
- imageURL:
- 'https://st.kakaocdn.net/product/gift/product/20231030175450_53e90ee9708f45ffa45b3f7b4bc01c7c.jpg',
- wish: {
- wishCount: 201,
- isWished: false,
- },
- price: {
- basicPrice: 29000,
- discountRate: 0,
- sellingPrice: 29000,
- },
- brandInfo: {
- id: 2088,
- name: 'BBQ',
- imageURL:
- 'https://st.kakaocdn.net/product/gift/gift_brand/20220216170226_38ba26d8eedf450683200d6730757204.png',
- },
-};
-
-export const GoodsMockList: GoodsData[] = Array.from({ length: 21 }, () => GoodsMockData);
diff --git a/src/types/requestTypes.ts b/src/types/requestTypes.ts
new file mode 100644
index 00000000..dddba976
--- /dev/null
+++ b/src/types/requestTypes.ts
@@ -0,0 +1,40 @@
+export interface RankingProductsRequest {
+ targetType?: 'ALL' | 'FEMALE' | 'MALE' | 'TEEN';
+ rankType?: 'MANY_WISH' | 'MANY_RECEIVE' | 'MANY_WISH_RECEIVE';
+}
+
+export interface ThemeProductsRequest {
+ themeKey: string | undefined;
+ pageToken?: string;
+ maxResults?: number;
+}
+
+export interface ProductDetailRequest {
+ productId: string;
+}
+
+export interface ProductOptionsRequest {
+ productId: string;
+}
+
+export interface MyAccountWishProductsRequest {
+ pageToken?: string;
+ maxResults?: number;
+}
+
+export interface PointUpdateRequest {
+ point: number;
+}
+
+export interface ProductOrderRequest {
+ productId: number;
+ productOptionId: number;
+ productQuantity: number;
+ messageCardTemplateId: number;
+ messageCardTextMessage: string;
+ senderId: number;
+ receiverId: number;
+ hasCashReceipt: boolean;
+ cashReceiptType?: 'PERSONAL' | 'BUSINESS';
+ cashReceiptNumber?: string;
+}
diff --git a/src/types/responseTypes.ts b/src/types/responseTypes.ts
new file mode 100644
index 00000000..8ce1dcbc
--- /dev/null
+++ b/src/types/responseTypes.ts
@@ -0,0 +1,62 @@
+import { ProductData, ThemeData, MessageCardTemplateData } from './dataTypes';
+
+export interface RankingProductsResponse {
+ products: ProductData[];
+}
+
+export interface ThemesResponse {
+ themes: ThemeData[];
+}
+
+export interface ThemeProductsResponse {
+ products: ProductData[];
+ nextPageToken: string | null;
+ pageInfo: {
+ totalResults: number;
+ resultsPerPage: number;
+ };
+}
+
+export interface ProductDetailResponse extends ProductData {
+ isAccessableProductPage: boolean;
+ review: {
+ averageRating: number;
+ totalReviewCount: number;
+ };
+ productDescription: {
+ images: string[];
+ };
+ productDetailInfo: {
+ announcements: {
+ displayOrder: number;
+ name: string;
+ value: string;
+ }[];
+ terms: {
+ displayOrder: number;
+ title: string;
+ description: string;
+ }[];
+ };
+}
+
+export interface MessageCardTemplatesResponse {
+ templates: MessageCardTemplateData[];
+}
+
+export interface MyAccountInfoResponse {
+ id: number;
+ name: string;
+ birthday?: string;
+ profileImageURL: string;
+ point: number;
+}
+
+export interface MyAccountWishProductsResponse {
+ products: ProductData[];
+ nextPageToken: string | null;
+ pageInfo: {
+ totalResults: number;
+ resultsPerPage: number;
+ };
+}
diff --git a/src/utils/constants/message.ts b/src/utils/constants/message.ts
new file mode 100644
index 00000000..fa871ce7
--- /dev/null
+++ b/src/utils/constants/message.ts
@@ -0,0 +1,10 @@
+export const ERROR = {
+ DATA_FETCH: '๋ฐ์ดํฐ๋ฅผ ๋ถ๋ฌ์ค๋ ์ค์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค.',
+ NO_PRODUCTS: '๋ณด์ฌ์ค ์ํ์ด ์์ด์!',
+ NOT_FOUND: '์์ฒญํ์ ํ์ด์ง๋ฅผ ์ฐพ์ ์ ์์ต๋๋ค.',
+ SERVER_ERROR: '์๋ฒ์ ๋ฌธ์ ๊ฐ ๋ฐ์ํ์ต๋๋ค. ์ ์ ํ ๋ค์ ์๋ํด์ฃผ์ธ์.',
+ UNAUTHORIZED: '์ธ์ฆ๋์ง ์์ ์ฌ์ฉ์์
๋๋ค. ๋ก๊ทธ์ธ ํ ๋ค์ ์๋ํด์ฃผ์ธ์.',
+ FORBIDDEN: '์ ๊ทผ ๊ถํ์ด ์์ต๋๋ค.',
+ TIMEOUT: '์์ฒญ ์๊ฐ์ด ์ด๊ณผ๋์์ต๋๋ค. ์ ์ ํ ๋ค์ ์๋ํด์ฃผ์ธ์.',
+ CONFLICT: '๋ฐ์ดํฐ ์ถฉ๋์ด ๋ฐ์ํ์ต๋๋ค. ์ ์ ํ ๋ค์ ์๋ํด์ฃผ์ธ์.',
+};
diff --git a/src/utils/getDynamicPath.ts b/src/utils/getDynamicPath.ts
new file mode 100644
index 00000000..01454cf5
--- /dev/null
+++ b/src/utils/getDynamicPath.ts
@@ -0,0 +1,2 @@
+export const getDynamicPath = (path: string, params: { [key: string]: string }): string =>
+ Object.keys(params).reduce((acc, key) => acc.replace(`:${key}`, params[key]), path);
diff --git a/tsconfig.json b/tsconfig.json
index 08acda01..27ce83d9 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,7 @@
{
"compilerOptions": {
- "target": "ES6",
+ "allowImportingTsExtensions": true,
+ "target": "es5",
"lib": ["dom", "dom.iterable", "esnext"],
"allowJs": true,
"skipLibCheck": true,
@@ -8,22 +9,14 @@
"allowSyntheticDefaultImports": true,
"strict": true,
"forceConsistentCasingInFileNames": true,
+ "noFallthroughCasesInSwitch": true,
"module": "esnext",
"moduleResolution": "node",
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
- "jsx": "react-jsx",
- "sourceMap": true,
- "noUnusedLocals": true,
- "noUnusedParameters": true,
- "noFallthroughCasesInSwitch": true,
- "incremental": true,
- "baseUrl": ".",
- "paths": {
- "@/*": ["./src/*"]
- }
+ "jsx": "react-jsx"
},
"include": ["src"],
- "exclude": ["node_modules", "build", "public"]
+ "extends": "./tsconfig.paths.json"
}
diff --git a/tsconfig.paths.json b/tsconfig.paths.json
new file mode 100644
index 00000000..25ac85d9
--- /dev/null
+++ b/tsconfig.paths.json
@@ -0,0 +1,17 @@
+{
+ "compilerOptions": {
+ "baseUrl": ".",
+ "paths": {
+ "@/*": ["./src/*"],
+ "@components/*": ["./src/components/*"],
+ "@assets/*": ["./src/assets/*"],
+ "@hooks/*": ["./src/hooks/*"],
+ "@pages/*": ["./src/pages/*"],
+ "@routes/*": ["./src/routes/*"],
+ "@utils/*": ["./src/utils/*"],
+ "@context/*": ["./src/context/*"],
+ "@internalTypes/*": ["./src/types/*"],
+ "@apis/*": ["./src/apis/*"],
+ }
+ }
+}