From c7e0e213d642df2ecf203270af9b01764d1fc36d Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 11 Sep 2023 20:14:04 +0900 Subject: [PATCH 01/20] Add shopPage --- .../src/PageContainer/ShopPage/index.stories.tsx | 13 +++++++++++++ .../client/src/PageContainer/ShopPage/index.tsx | 7 +++++++ projects/client/src/PageContainer/ShopPage/style.ts | 1 + projects/client/src/PageContainer/index.ts | 1 + projects/client/src/app/shop/page.tsx | 5 +++++ 5 files changed, 27 insertions(+) create mode 100644 projects/client/src/PageContainer/ShopPage/index.stories.tsx create mode 100644 projects/client/src/PageContainer/ShopPage/index.tsx create mode 100644 projects/client/src/PageContainer/ShopPage/style.ts create mode 100644 projects/client/src/PageContainer/index.ts create mode 100644 projects/client/src/app/shop/page.tsx diff --git a/projects/client/src/PageContainer/ShopPage/index.stories.tsx b/projects/client/src/PageContainer/ShopPage/index.stories.tsx new file mode 100644 index 00000000..00c46b25 --- /dev/null +++ b/projects/client/src/PageContainer/ShopPage/index.stories.tsx @@ -0,0 +1,13 @@ +'use client'; + +import ShopPage from '.'; +import type { Meta, StoryObj } from '@storybook/react'; + +export default { + title: 'client/Page/ShopPage', + component: ShopPage, +} as Meta; + +type Story = StoryObj; + +export const Primary: Story = {}; diff --git a/projects/client/src/PageContainer/ShopPage/index.tsx b/projects/client/src/PageContainer/ShopPage/index.tsx new file mode 100644 index 00000000..48e2cda1 --- /dev/null +++ b/projects/client/src/PageContainer/ShopPage/index.tsx @@ -0,0 +1,7 @@ +'use client'; + +import * as S from './style'; + +const ShopPage = () =>
; + +export default ShopPage; diff --git a/projects/client/src/PageContainer/ShopPage/style.ts b/projects/client/src/PageContainer/ShopPage/style.ts new file mode 100644 index 00000000..5f62ee2a --- /dev/null +++ b/projects/client/src/PageContainer/ShopPage/style.ts @@ -0,0 +1 @@ +import styled from '@emotion/styled'; diff --git a/projects/client/src/PageContainer/index.ts b/projects/client/src/PageContainer/index.ts new file mode 100644 index 00000000..7757cf57 --- /dev/null +++ b/projects/client/src/PageContainer/index.ts @@ -0,0 +1 @@ +export { default as ShopPage } from './ShopPage'; diff --git a/projects/client/src/app/shop/page.tsx b/projects/client/src/app/shop/page.tsx new file mode 100644 index 00000000..6f98cc11 --- /dev/null +++ b/projects/client/src/app/shop/page.tsx @@ -0,0 +1,5 @@ +import { ShopPage } from 'client/PageContainer'; + +export default function Shop() { + return ; +} From 962dee55adce0b9382f21384cb8a21aa9e1d9ead Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Mon, 11 Sep 2023 20:14:39 +0900 Subject: [PATCH 02/20] Update storybook --- projects/storybook/.storybook/main.js | 1 + 1 file changed, 1 insertion(+) diff --git a/projects/storybook/.storybook/main.js b/projects/storybook/.storybook/main.js index 30c82ee3..07abc103 100644 --- a/projects/storybook/.storybook/main.js +++ b/projects/storybook/.storybook/main.js @@ -12,6 +12,7 @@ function getAbsolutePath(value) { const config = { stories: [ '../../client/src/components/**!(node_modules)/*.stories.@(js|jsx|ts|tsx)', + '../../client/src/PageContainer/**!(node_modules)/*.stories.@(js|jsx|ts|tsx)', '../../admin/src/components/**!(node_modules)/*.stories.@(js|jsx|ts|tsx)', '../../admin/src/PageContainer/**!(node_modules)/*.stories.@(js|jsx|ts|tsx)', '../../../packages/common/src/components/**/*.stories.@(js|jsx|ts|tsx)', From cea923e848a18712626ac8089328c902d13a6b52 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 12 Sep 2023 00:17:44 +0900 Subject: [PATCH 03/20] Add shop page --- .../src/PageContainer/ShopPage/index.tsx | 13 +++++- .../src/PageContainer/ShopPage/style.ts | 44 +++++++++++++++++++ 2 files changed, 56 insertions(+), 1 deletion(-) diff --git a/projects/client/src/PageContainer/ShopPage/index.tsx b/projects/client/src/PageContainer/ShopPage/index.tsx index 48e2cda1..e616d223 100644 --- a/projects/client/src/PageContainer/ShopPage/index.tsx +++ b/projects/client/src/PageContainer/ShopPage/index.tsx @@ -2,6 +2,17 @@ import * as S from './style'; -const ShopPage = () =>
; +import { slicePoint } from 'common'; + +const ShopPage = () => ( + + 현재 마일리지 + + {slicePoint(1000)} + M + + 선택하기 + +); export default ShopPage; diff --git a/projects/client/src/PageContainer/ShopPage/style.ts b/projects/client/src/PageContainer/ShopPage/style.ts index 5f62ee2a..93f88c07 100644 --- a/projects/client/src/PageContainer/ShopPage/style.ts +++ b/projects/client/src/PageContainer/ShopPage/style.ts @@ -1 +1,45 @@ import styled from '@emotion/styled'; + +export const PageWrapper = styled.div` + width: 100vw; + display: flex; + align-items: center; + flex-direction: column; + padding-top: 60px; +`; + +export const MiledgeTitle = styled.h2` + ${({ theme }) => theme.typo.h2}; + color: ${({ theme }) => theme.color.black}; + font-weight: 500; +`; + +export const FlexWrapper = styled.div` + display: flex; + gap: 4px; + margin-top: 27px; +`; + +export const MilidgePoint = styled.span` + ${({ theme }) => theme.typo.title}; + color: ${({ theme }) => theme.color.black}; + font-weight: 500; +`; + +export const MilidgeUnit = styled(MiledgeTitle)` + margin-top: 15px; +`; + +export const SelectButton = styled.button` + ${({ theme }) => theme.typo.button}; + color: ${({ theme }) => theme.color.white}; + font-weight: 600; + + width: 400px; + height: 70px; + border-radius: 10px; + background: ${({ theme }) => theme.color.primary}; + border: 0; + cursor: pointer; + margin-top: 100px; +`; From 3baf9e1c3c5c8aad7717fe5cc8d7084d21837383 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 12 Sep 2023 00:35:55 +0900 Subject: [PATCH 04/20] Add icons --- projects/admin/src/assets/index.ts | 2 ++ .../admin/src/assets/svg/CheckBoxIcon.tsx | 19 +++++++++++++++++++ .../admin/src/assets/svg/CheckedBoxIcon.tsx | 13 +++++++++++++ 3 files changed, 34 insertions(+) create mode 100644 projects/admin/src/assets/index.ts create mode 100644 projects/admin/src/assets/svg/CheckBoxIcon.tsx create mode 100644 projects/admin/src/assets/svg/CheckedBoxIcon.tsx diff --git a/projects/admin/src/assets/index.ts b/projects/admin/src/assets/index.ts new file mode 100644 index 00000000..629669b8 --- /dev/null +++ b/projects/admin/src/assets/index.ts @@ -0,0 +1,2 @@ +export { default as CheckBoxIcon } from './svg/CheckBoxIcon'; +export { default as CheckedBoxIcon } from './svg/CheckedBoxIcon'; diff --git a/projects/admin/src/assets/svg/CheckBoxIcon.tsx b/projects/admin/src/assets/svg/CheckBoxIcon.tsx new file mode 100644 index 00000000..9b444970 --- /dev/null +++ b/projects/admin/src/assets/svg/CheckBoxIcon.tsx @@ -0,0 +1,19 @@ +const CheckBoxIcon = () => ( + + + + +); + +export default CheckBoxIcon; diff --git a/projects/admin/src/assets/svg/CheckedBoxIcon.tsx b/projects/admin/src/assets/svg/CheckedBoxIcon.tsx new file mode 100644 index 00000000..088a3bfe --- /dev/null +++ b/projects/admin/src/assets/svg/CheckedBoxIcon.tsx @@ -0,0 +1,13 @@ +const CheckedBoxIcon = () => ( + + + +); + +export default CheckedBoxIcon; From 9dcd5be924e225126abb8fd642c2ad0e7c9c087f Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 12 Sep 2023 00:36:13 +0900 Subject: [PATCH 05/20] Add shopItem --- .../src/components/ShopItem/index.stories.ts | 14 +++++++ .../client/src/components/ShopItem/index.tsx | 16 +++++++ .../client/src/components/ShopItem/style.ts | 42 +++++++++++++++++++ 3 files changed, 72 insertions(+) create mode 100644 projects/client/src/components/ShopItem/index.stories.ts create mode 100644 projects/client/src/components/ShopItem/index.tsx create mode 100644 projects/client/src/components/ShopItem/style.ts diff --git a/projects/client/src/components/ShopItem/index.stories.ts b/projects/client/src/components/ShopItem/index.stories.ts new file mode 100644 index 00000000..79e5127f --- /dev/null +++ b/projects/client/src/components/ShopItem/index.stories.ts @@ -0,0 +1,14 @@ +'use client'; + +import ShopItem from '.'; + +import type { Meta, StoryObj } from '@storybook/react'; + +export default { + title: 'client/ShopItem', + component: ShopItem, +} as Meta; + +type Story = StoryObj; + +export const Primary: Story = {}; diff --git a/projects/client/src/components/ShopItem/index.tsx b/projects/client/src/components/ShopItem/index.tsx new file mode 100644 index 00000000..6908c45e --- /dev/null +++ b/projects/client/src/components/ShopItem/index.tsx @@ -0,0 +1,16 @@ +'use client'; + +import * as S from './style'; + +import Image from 'next/image'; + +const Example = () => ( +
+ + + + +
+); + +export default Example; diff --git a/projects/client/src/components/ShopItem/style.ts b/projects/client/src/components/ShopItem/style.ts new file mode 100644 index 00000000..510c1d92 --- /dev/null +++ b/projects/client/src/components/ShopItem/style.ts @@ -0,0 +1,42 @@ +import styled from '@emotion/styled'; + +export const ImageWrapper = styled.div` + width: 12.5rem; + height: 12.5rem; + border-radius: 0.625rem; + background: ${({ theme }) => theme.color.gray['040']}; + overflow: hidden; + position: relative; + + img { + object-fit: cover; + } +`; + +export const CheckBox = styled.div` + position: absolute; +`; + +export const ItemName = styled.span` + ${({ theme }) => theme.typo.body2}; + color: ${({ theme }) => theme.color.gray['070']}; + font-weight: 400; + margin: 12px 0 4px; +`; + +export const FlexWrapper = styled.div` + display: flex; + gap: 4px; +`; + +export const MilidgePoint = styled.span` + ${({ theme }) => theme.typo.body1}; + color: ${({ theme }) => theme.color.black}; + font-weight: 500; +`; + +export const MilidgeUnit = styled.span` + ${({ theme }) => theme.typo.body3}; + color: ${({ theme }) => theme.color.black}; + font-weight: 400; +`; From a215e1fccf40c95cad18804f73b461e2bd04bb9b Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 12 Sep 2023 00:38:16 +0900 Subject: [PATCH 06/20] Update shopItemType --- packages/types/src/shopItem.ts | 1 + projects/client/src/components/ShopItem/index.tsx | 10 ++++++++-- 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/packages/types/src/shopItem.ts b/packages/types/src/shopItem.ts index 71764901..d6361e17 100644 --- a/packages/types/src/shopItem.ts +++ b/packages/types/src/shopItem.ts @@ -3,4 +3,5 @@ export interface ShopItemType { name: string; text: string; price: number; + image: string; } diff --git a/projects/client/src/components/ShopItem/index.tsx b/projects/client/src/components/ShopItem/index.tsx index 6908c45e..3011366d 100644 --- a/projects/client/src/components/ShopItem/index.tsx +++ b/projects/client/src/components/ShopItem/index.tsx @@ -4,7 +4,13 @@ import * as S from './style'; import Image from 'next/image'; -const Example = () => ( +import { ShopItemType } from 'types'; + +interface ShopItemProps { + data: ShopItemType; +} + +const ShopItem = () => (
@@ -13,4 +19,4 @@ const Example = () => (
); -export default Example; +export default ShopItem; From 816907d4b3c9550480333f3e7e77690df289c36d Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 12 Sep 2023 00:40:17 +0900 Subject: [PATCH 07/20] Update checkBoxIcon --- projects/{admin => client}/src/assets/index.ts | 0 projects/{admin => client}/src/assets/svg/CheckBoxIcon.tsx | 0 .../{admin => client}/src/assets/svg/CheckedBoxIcon.tsx | 0 projects/client/src/components/ShopItem/index.tsx | 6 ++++-- 4 files changed, 4 insertions(+), 2 deletions(-) rename projects/{admin => client}/src/assets/index.ts (100%) rename projects/{admin => client}/src/assets/svg/CheckBoxIcon.tsx (100%) rename projects/{admin => client}/src/assets/svg/CheckedBoxIcon.tsx (100%) diff --git a/projects/admin/src/assets/index.ts b/projects/client/src/assets/index.ts similarity index 100% rename from projects/admin/src/assets/index.ts rename to projects/client/src/assets/index.ts diff --git a/projects/admin/src/assets/svg/CheckBoxIcon.tsx b/projects/client/src/assets/svg/CheckBoxIcon.tsx similarity index 100% rename from projects/admin/src/assets/svg/CheckBoxIcon.tsx rename to projects/client/src/assets/svg/CheckBoxIcon.tsx diff --git a/projects/admin/src/assets/svg/CheckedBoxIcon.tsx b/projects/client/src/assets/svg/CheckedBoxIcon.tsx similarity index 100% rename from projects/admin/src/assets/svg/CheckedBoxIcon.tsx rename to projects/client/src/assets/svg/CheckedBoxIcon.tsx diff --git a/projects/client/src/components/ShopItem/index.tsx b/projects/client/src/components/ShopItem/index.tsx index 3011366d..c84a0448 100644 --- a/projects/client/src/components/ShopItem/index.tsx +++ b/projects/client/src/components/ShopItem/index.tsx @@ -6,15 +6,17 @@ import Image from 'next/image'; import { ShopItemType } from 'types'; +import { CheckBoxIcon, CheckedBoxIcon } from 'client/assets'; + interface ShopItemProps { data: ShopItemType; } -const ShopItem = () => ( +const ShopItem: React.FC = ({ data }) => (
- + {data.name}
); From 38f200bfb3887904b4b852215df5c8328ac6327b Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 12 Sep 2023 00:46:20 +0900 Subject: [PATCH 08/20] Update storybook --- .../client/src/components/ShopItem/index.stories.ts | 13 ++++++++++++- projects/client/src/components/ShopItem/index.tsx | 7 +++++-- projects/storybook/tsconfig.json | 3 ++- 3 files changed, 19 insertions(+), 4 deletions(-) diff --git a/projects/client/src/components/ShopItem/index.stories.ts b/projects/client/src/components/ShopItem/index.stories.ts index 79e5127f..cc984bbe 100644 --- a/projects/client/src/components/ShopItem/index.stories.ts +++ b/projects/client/src/components/ShopItem/index.stories.ts @@ -11,4 +11,15 @@ export default { type Story = StoryObj; -export const Primary: Story = {}; +export const Primary: Story = { + args: { + data: { + itemId: 'id', + name: '자장면', + text: '자장면', + price: 5000, + image: + 'https://mblogthumb-phinf.pstatic.net/MjAxNzAxMjNfNDkg/MDAxNDg1MTYwMTQ1MDc5.H7I84KnCb0_U0Fb312NMMk10dbmNhdMb45jDiNYs13Eg.e3185KBkHafPDJpOjsZ7vvvH741l0TzEt2vVNvePS7Mg.JPEG.china_lab/shutterstock_524181190.jpg?type=w800', + }, + }, +}; diff --git a/projects/client/src/components/ShopItem/index.tsx b/projects/client/src/components/ShopItem/index.tsx index c84a0448..a7ae03f1 100644 --- a/projects/client/src/components/ShopItem/index.tsx +++ b/projects/client/src/components/ShopItem/index.tsx @@ -7,6 +7,7 @@ import Image from 'next/image'; import { ShopItemType } from 'types'; import { CheckBoxIcon, CheckedBoxIcon } from 'client/assets'; +import { slicePoint } from 'common'; interface ShopItemProps { data: ShopItemType; @@ -15,8 +16,10 @@ interface ShopItemProps { const ShopItem: React.FC = ({ data }) => (
- - {data.name} + + + + {data.name}
); diff --git a/projects/storybook/tsconfig.json b/projects/storybook/tsconfig.json index 06be31c6..bcfff14c 100644 --- a/projects/storybook/tsconfig.json +++ b/projects/storybook/tsconfig.json @@ -5,7 +5,8 @@ "baseUrl": ".", "paths": { "common/*": ["../../packages/common/src/*"], - "admin/*": ["../admin/src/*"] + "admin/*": ["../admin/src/*"], + "client/*": ["../client/src/*"] } }, "include": ["**/*.ts", "**/*.tsx"], From 4ab52ad75bb7bf1de538ff2ae0ea39af39ccb4b2 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 12 Sep 2023 00:52:08 +0900 Subject: [PATCH 09/20] Update style --- projects/client/src/components/ShopItem/index.tsx | 9 +++++++-- projects/client/src/components/ShopItem/style.ts | 6 ++++++ 2 files changed, 13 insertions(+), 2 deletions(-) diff --git a/projects/client/src/components/ShopItem/index.tsx b/projects/client/src/components/ShopItem/index.tsx index a7ae03f1..9131aeac 100644 --- a/projects/client/src/components/ShopItem/index.tsx +++ b/projects/client/src/components/ShopItem/index.tsx @@ -14,14 +14,19 @@ interface ShopItemProps { } const ShopItem: React.FC = ({ data }) => ( -
+ {data.name} -
+ {data.name} + + {slicePoint(data.price)} + M + + ); export default ShopItem; diff --git a/projects/client/src/components/ShopItem/style.ts b/projects/client/src/components/ShopItem/style.ts index 510c1d92..cca1193c 100644 --- a/projects/client/src/components/ShopItem/style.ts +++ b/projects/client/src/components/ShopItem/style.ts @@ -1,5 +1,10 @@ import styled from '@emotion/styled'; +export const Wrapper = styled.div` + display: flex; + flex-direction: column; +`; + export const ImageWrapper = styled.div` width: 12.5rem; height: 12.5rem; @@ -27,6 +32,7 @@ export const ItemName = styled.span` export const FlexWrapper = styled.div` display: flex; gap: 4px; + align-items: center; `; export const MilidgePoint = styled.span` From 1ee523506d3427ef43898e8e0a43238c872d82a6 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 12 Sep 2023 00:55:02 +0900 Subject: [PATCH 10/20] Update icon name --- projects/client/src/assets/index.ts | 2 +- projects/client/src/assets/svg/CheckBoxIcon.tsx | 6 ------ projects/client/src/assets/svg/CheckedBoxIcon.tsx | 6 ++++++ projects/client/src/components/ShopItem/style.ts | 4 ++++ 4 files changed, 11 insertions(+), 7 deletions(-) diff --git a/projects/client/src/assets/index.ts b/projects/client/src/assets/index.ts index 629669b8..9316b3a3 100644 --- a/projects/client/src/assets/index.ts +++ b/projects/client/src/assets/index.ts @@ -1,2 +1,2 @@ -export { default as CheckBoxIcon } from './svg/CheckBoxIcon'; export { default as CheckedBoxIcon } from './svg/CheckedBoxIcon'; +export { default as CheckBoxIcon } from './svg/CheckBoxIcon'; diff --git a/projects/client/src/assets/svg/CheckBoxIcon.tsx b/projects/client/src/assets/svg/CheckBoxIcon.tsx index 9b444970..c8b73fe6 100644 --- a/projects/client/src/assets/svg/CheckBoxIcon.tsx +++ b/projects/client/src/assets/svg/CheckBoxIcon.tsx @@ -7,12 +7,6 @@ const CheckBoxIcon = () => ( fill='none' > - ); diff --git a/projects/client/src/assets/svg/CheckedBoxIcon.tsx b/projects/client/src/assets/svg/CheckedBoxIcon.tsx index 088a3bfe..3d7b86a1 100644 --- a/projects/client/src/assets/svg/CheckedBoxIcon.tsx +++ b/projects/client/src/assets/svg/CheckedBoxIcon.tsx @@ -7,6 +7,12 @@ const CheckedBoxIcon = () => ( fill='none' > + ); diff --git a/projects/client/src/components/ShopItem/style.ts b/projects/client/src/components/ShopItem/style.ts index cca1193c..d6fbfb29 100644 --- a/projects/client/src/components/ShopItem/style.ts +++ b/projects/client/src/components/ShopItem/style.ts @@ -2,6 +2,7 @@ import styled from '@emotion/styled'; export const Wrapper = styled.div` display: flex; + width: 200px; flex-direction: column; `; @@ -20,6 +21,9 @@ export const ImageWrapper = styled.div` export const CheckBox = styled.div` position: absolute; + z-index: 2; + top: 8px; + left: 8px; `; export const ItemName = styled.span` From edc7c1d4a89856e1e185866dbbc4adff52df8605 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 12 Sep 2023 01:08:32 +0900 Subject: [PATCH 11/20] Update px -> rem --- .../client/src/PageContainer/ShopPage/style.ts | 16 ++++++++-------- projects/client/src/components/ShopItem/style.ts | 10 +++++----- 2 files changed, 13 insertions(+), 13 deletions(-) diff --git a/projects/client/src/PageContainer/ShopPage/style.ts b/projects/client/src/PageContainer/ShopPage/style.ts index 93f88c07..03cff9bc 100644 --- a/projects/client/src/PageContainer/ShopPage/style.ts +++ b/projects/client/src/PageContainer/ShopPage/style.ts @@ -5,7 +5,7 @@ export const PageWrapper = styled.div` display: flex; align-items: center; flex-direction: column; - padding-top: 60px; + padding-top: 3.75rem; `; export const MiledgeTitle = styled.h2` @@ -16,8 +16,8 @@ export const MiledgeTitle = styled.h2` export const FlexWrapper = styled.div` display: flex; - gap: 4px; - margin-top: 27px; + gap: 0.25rem; + margin-top: 1.6875rem; `; export const MilidgePoint = styled.span` @@ -27,7 +27,7 @@ export const MilidgePoint = styled.span` `; export const MilidgeUnit = styled(MiledgeTitle)` - margin-top: 15px; + margin-top: 0.9375rem; `; export const SelectButton = styled.button` @@ -35,11 +35,11 @@ export const SelectButton = styled.button` color: ${({ theme }) => theme.color.white}; font-weight: 600; - width: 400px; - height: 70px; - border-radius: 10px; + width: 25rem; + height: 4.375rem; + border-radius: 0.625rem; background: ${({ theme }) => theme.color.primary}; border: 0; cursor: pointer; - margin-top: 100px; + margin-top: 6.25rem; `; diff --git a/projects/client/src/components/ShopItem/style.ts b/projects/client/src/components/ShopItem/style.ts index d6fbfb29..dcc1a07a 100644 --- a/projects/client/src/components/ShopItem/style.ts +++ b/projects/client/src/components/ShopItem/style.ts @@ -2,7 +2,7 @@ import styled from '@emotion/styled'; export const Wrapper = styled.div` display: flex; - width: 200px; + width: 12.5rem; flex-direction: column; `; @@ -22,20 +22,20 @@ export const ImageWrapper = styled.div` export const CheckBox = styled.div` position: absolute; z-index: 2; - top: 8px; - left: 8px; + top: 0.5rem; + left: 0.5rem; `; export const ItemName = styled.span` ${({ theme }) => theme.typo.body2}; color: ${({ theme }) => theme.color.gray['070']}; font-weight: 400; - margin: 12px 0 4px; + margin: 0.75rem 0 0.25rem; `; export const FlexWrapper = styled.div` display: flex; - gap: 4px; + gap: 0.25rem; align-items: center; `; From 6e4fc2f8d0eded6f77526c0b77326cb69571eff7 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 12 Sep 2023 01:12:23 +0900 Subject: [PATCH 12/20] Add list --- .../src/PageContainer/ShopPage/index.tsx | 42 +++++++++++++++++++ .../src/PageContainer/ShopPage/style.ts | 5 +++ projects/client/src/components/index.ts | 1 + 3 files changed, 48 insertions(+) diff --git a/projects/client/src/PageContainer/ShopPage/index.tsx b/projects/client/src/PageContainer/ShopPage/index.tsx index e616d223..a0256932 100644 --- a/projects/client/src/PageContainer/ShopPage/index.tsx +++ b/projects/client/src/PageContainer/ShopPage/index.tsx @@ -4,6 +4,43 @@ import * as S from './style'; import { slicePoint } from 'common'; +import { ShopItem } from 'client/components'; + +const list = [ + { + itemId: 'id', + name: '자장면', + text: '자장면', + price: 5000, + image: + 'https://mblogthumb-phinf.pstatic.net/MjAxNzAxMjNfNDkg/MDAxNDg1MTYwMTQ1MDc5.H7I84KnCb0_U0Fb312NMMk10dbmNhdMb45jDiNYs13Eg.e3185KBkHafPDJpOjsZ7vvvH741l0TzEt2vVNvePS7Mg.JPEG.china_lab/shutterstock_524181190.jpg?type=w800', + }, + { + itemId: 'id', + name: '자장면', + text: '자장면', + price: 5000, + image: + 'https://mblogthumb-phinf.pstatic.net/MjAxNzAxMjNfNDkg/MDAxNDg1MTYwMTQ1MDc5.H7I84KnCb0_U0Fb312NMMk10dbmNhdMb45jDiNYs13Eg.e3185KBkHafPDJpOjsZ7vvvH741l0TzEt2vVNvePS7Mg.JPEG.china_lab/shutterstock_524181190.jpg?type=w800', + }, + { + itemId: 'id', + name: '자장면', + text: '자장면', + price: 5000, + image: + 'https://mblogthumb-phinf.pstatic.net/MjAxNzAxMjNfNDkg/MDAxNDg1MTYwMTQ1MDc5.H7I84KnCb0_U0Fb312NMMk10dbmNhdMb45jDiNYs13Eg.e3185KBkHafPDJpOjsZ7vvvH741l0TzEt2vVNvePS7Mg.JPEG.china_lab/shutterstock_524181190.jpg?type=w800', + }, + { + itemId: 'id', + name: '자장면', + text: '자장면', + price: 5000, + image: + 'https://mblogthumb-phinf.pstatic.net/MjAxNzAxMjNfNDkg/MDAxNDg1MTYwMTQ1MDc5.H7I84KnCb0_U0Fb312NMMk10dbmNhdMb45jDiNYs13Eg.e3185KBkHafPDJpOjsZ7vvvH741l0TzEt2vVNvePS7Mg.JPEG.china_lab/shutterstock_524181190.jpg?type=w800', + }, +]; + const ShopPage = () => ( 현재 마일리지 @@ -11,6 +48,11 @@ const ShopPage = () => ( {slicePoint(1000)} M + + {list.map((item, index) => ( + + ))} + 선택하기 ); diff --git a/projects/client/src/PageContainer/ShopPage/style.ts b/projects/client/src/PageContainer/ShopPage/style.ts index 03cff9bc..e56b2081 100644 --- a/projects/client/src/PageContainer/ShopPage/style.ts +++ b/projects/client/src/PageContainer/ShopPage/style.ts @@ -43,3 +43,8 @@ export const SelectButton = styled.button` cursor: pointer; margin-top: 6.25rem; `; + +export const ItemList = styled.div` + display: flex; + gap: 52px; +`; diff --git a/projects/client/src/components/index.ts b/projects/client/src/components/index.ts index 5415efe6..3897c67f 100644 --- a/projects/client/src/components/index.ts +++ b/projects/client/src/components/index.ts @@ -1 +1,2 @@ export { default as Example } from './Example'; +export { default as ShopItem } from './ShopItem'; From 71624e1e7c28af027f363d613ada1d21ce6a090b Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 12 Sep 2023 01:15:09 +0900 Subject: [PATCH 13/20] Update style --- .../client/src/PageContainer/ShopPage/index.tsx | 13 ++++++++----- .../client/src/PageContainer/ShopPage/style.ts | 15 ++++++++++++++- projects/client/src/components/ShopItem/style.ts | 1 + 3 files changed, 23 insertions(+), 6 deletions(-) diff --git a/projects/client/src/PageContainer/ShopPage/index.tsx b/projects/client/src/PageContainer/ShopPage/index.tsx index a0256932..612b89c2 100644 --- a/projects/client/src/PageContainer/ShopPage/index.tsx +++ b/projects/client/src/PageContainer/ShopPage/index.tsx @@ -48,11 +48,14 @@ const ShopPage = () => ( {slicePoint(1000)} M - - {list.map((item, index) => ( - - ))} - + + 상품 + + {list.map((item, index) => ( + + ))} + + 선택하기 ); diff --git a/projects/client/src/PageContainer/ShopPage/style.ts b/projects/client/src/PageContainer/ShopPage/style.ts index e56b2081..8c05fbf5 100644 --- a/projects/client/src/PageContainer/ShopPage/style.ts +++ b/projects/client/src/PageContainer/ShopPage/style.ts @@ -5,7 +5,7 @@ export const PageWrapper = styled.div` display: flex; align-items: center; flex-direction: column; - padding-top: 3.75rem; + padding: 3.75rem 0 14.75rem; `; export const MiledgeTitle = styled.h2` @@ -44,6 +44,19 @@ export const SelectButton = styled.button` margin-top: 6.25rem; `; +export const ListWrapper = styled.div` + display: flex; + flex-direction: column; + gap: 24px; + margin-top: 100px; +`; + +export const ItemText = styled.span` + ${({ theme }) => theme.typo.h4}; + color: ${({ theme }) => theme.color.black}; + font-weight: 600; +`; + export const ItemList = styled.div` display: flex; gap: 52px; diff --git a/projects/client/src/components/ShopItem/style.ts b/projects/client/src/components/ShopItem/style.ts index dcc1a07a..2afa8656 100644 --- a/projects/client/src/components/ShopItem/style.ts +++ b/projects/client/src/components/ShopItem/style.ts @@ -4,6 +4,7 @@ export const Wrapper = styled.div` display: flex; width: 12.5rem; flex-direction: column; + cursor: pointer; `; export const ImageWrapper = styled.div` From 5798b379792faf693e68da76d3a671345c5155e9 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 12 Sep 2023 01:15:49 +0900 Subject: [PATCH 14/20] Update icon --- projects/client/src/assets/svg/CheckBoxIcon.tsx | 2 +- projects/client/src/assets/svg/CheckedBoxIcon.tsx | 3 ++- 2 files changed, 3 insertions(+), 2 deletions(-) diff --git a/projects/client/src/assets/svg/CheckBoxIcon.tsx b/projects/client/src/assets/svg/CheckBoxIcon.tsx index c8b73fe6..7dc36223 100644 --- a/projects/client/src/assets/svg/CheckBoxIcon.tsx +++ b/projects/client/src/assets/svg/CheckBoxIcon.tsx @@ -6,7 +6,7 @@ const CheckBoxIcon = () => ( viewBox='0 0 18 18' fill='none' > - + ); diff --git a/projects/client/src/assets/svg/CheckedBoxIcon.tsx b/projects/client/src/assets/svg/CheckedBoxIcon.tsx index 3d7b86a1..fa2155e8 100644 --- a/projects/client/src/assets/svg/CheckedBoxIcon.tsx +++ b/projects/client/src/assets/svg/CheckedBoxIcon.tsx @@ -6,7 +6,8 @@ const CheckedBoxIcon = () => ( viewBox='0 0 18 18' fill='none' > - + + Date: Tue, 12 Sep 2023 01:20:53 +0900 Subject: [PATCH 15/20] Update props type --- .../src/PageContainer/ShopPage/index.tsx | 50 ++++++++++++------- .../client/src/components/ShopItem/index.tsx | 8 +-- 2 files changed, 36 insertions(+), 22 deletions(-) diff --git a/projects/client/src/PageContainer/ShopPage/index.tsx b/projects/client/src/PageContainer/ShopPage/index.tsx index 612b89c2..f6129d06 100644 --- a/projects/client/src/PageContainer/ShopPage/index.tsx +++ b/projects/client/src/PageContainer/ShopPage/index.tsx @@ -1,10 +1,11 @@ 'use client'; import * as S from './style'; +import { ShopItem } from 'client/components'; import { slicePoint } from 'common'; -import { ShopItem } from 'client/components'; +import { useState } from 'react'; const list = [ { @@ -41,23 +42,34 @@ const list = [ }, ]; -const ShopPage = () => ( - - 현재 마일리지 - - {slicePoint(1000)} - M - - - 상품 - - {list.map((item, index) => ( - - ))} - - - 선택하기 - -); +const ShopPage = () => { + const [itemStatus, setItemStatus] = useState([]); + + const onItemClick = (index: number) => {}; + + return ( + + 현재 마일리지 + + {slicePoint(1000)} + M + + + 상품 + + {list.map((item, index) => ( + + ))} + + + 선택하기 + + ); +}; export default ShopPage; diff --git a/projects/client/src/components/ShopItem/index.tsx b/projects/client/src/components/ShopItem/index.tsx index 9131aeac..f50b0f2b 100644 --- a/projects/client/src/components/ShopItem/index.tsx +++ b/projects/client/src/components/ShopItem/index.tsx @@ -11,13 +11,15 @@ import { slicePoint } from 'common'; interface ShopItemProps { data: ShopItemType; + onItemClick: (index: number) => void; + index: number; } -const ShopItem: React.FC = ({ data }) => ( - +const ShopItem: React.FC = ({ data, onItemClick, index }) => ( + onItemClick(index)}> - + {data.name} From 53f2a92e3e780978c3bf01afc4c20977f3254bf7 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 12 Sep 2023 01:26:20 +0900 Subject: [PATCH 16/20] Update stroke --- projects/client/src/assets/svg/CheckedBoxIcon.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/client/src/assets/svg/CheckedBoxIcon.tsx b/projects/client/src/assets/svg/CheckedBoxIcon.tsx index fa2155e8..dd2fedc0 100644 --- a/projects/client/src/assets/svg/CheckedBoxIcon.tsx +++ b/projects/client/src/assets/svg/CheckedBoxIcon.tsx @@ -11,8 +11,8 @@ const CheckedBoxIcon = () => ( ); From be54c459ca5573a9fbd28ca221303a7a1de04159 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Tue, 12 Sep 2023 01:35:51 +0900 Subject: [PATCH 17/20] Update itemStatusChange --- .../client/src/PageContainer/ShopPage/index.tsx | 13 +++++++++++-- projects/client/src/PageContainer/ShopPage/style.ts | 6 +++--- projects/client/src/components/ShopItem/index.tsx | 11 +++++++++-- 3 files changed, 23 insertions(+), 7 deletions(-) diff --git a/projects/client/src/PageContainer/ShopPage/index.tsx b/projects/client/src/PageContainer/ShopPage/index.tsx index f6129d06..b824c37d 100644 --- a/projects/client/src/PageContainer/ShopPage/index.tsx +++ b/projects/client/src/PageContainer/ShopPage/index.tsx @@ -5,7 +5,7 @@ import { ShopItem } from 'client/components'; import { slicePoint } from 'common'; -import { useState } from 'react'; +import { useEffect, useState } from 'react'; const list = [ { @@ -45,7 +45,15 @@ const list = [ const ShopPage = () => { const [itemStatus, setItemStatus] = useState([]); - const onItemClick = (index: number) => {}; + const onItemClick = (index: number) => { + const newItemStatus = [...itemStatus]; + newItemStatus[index] = !newItemStatus[index]; + setItemStatus(newItemStatus); + }; + + useEffect(() => { + setItemStatus(new Array(list.length).fill(false)); + }, []); return ( @@ -63,6 +71,7 @@ const ShopPage = () => { onItemClick={onItemClick} key={item.itemId + index} data={item} + itemStatus={itemStatus[index]} /> ))} diff --git a/projects/client/src/PageContainer/ShopPage/style.ts b/projects/client/src/PageContainer/ShopPage/style.ts index 8c05fbf5..d4121849 100644 --- a/projects/client/src/PageContainer/ShopPage/style.ts +++ b/projects/client/src/PageContainer/ShopPage/style.ts @@ -47,8 +47,8 @@ export const SelectButton = styled.button` export const ListWrapper = styled.div` display: flex; flex-direction: column; - gap: 24px; - margin-top: 100px; + gap: 1.5rem; + margin-top: 6.25rem; `; export const ItemText = styled.span` @@ -59,5 +59,5 @@ export const ItemText = styled.span` export const ItemList = styled.div` display: flex; - gap: 52px; + gap: 3.25rem; `; diff --git a/projects/client/src/components/ShopItem/index.tsx b/projects/client/src/components/ShopItem/index.tsx index f50b0f2b..39b818b0 100644 --- a/projects/client/src/components/ShopItem/index.tsx +++ b/projects/client/src/components/ShopItem/index.tsx @@ -8,18 +8,25 @@ import { ShopItemType } from 'types'; import { CheckBoxIcon, CheckedBoxIcon } from 'client/assets'; import { slicePoint } from 'common'; +import { useEffect } from 'react'; interface ShopItemProps { data: ShopItemType; onItemClick: (index: number) => void; index: number; + itemStatus: boolean; } -const ShopItem: React.FC = ({ data, onItemClick, index }) => ( +const ShopItem: React.FC = ({ + data, + onItemClick, + index, + itemStatus, +}) => ( onItemClick(index)}> - + {itemStatus ? : } {data.name} From 0df3c8517a84e491b3d48075f68bc6ab8bb30036 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Wed, 13 Sep 2023 01:22:04 +0900 Subject: [PATCH 18/20] Delete useless code --- projects/client/src/components/ShopItem/index.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/projects/client/src/components/ShopItem/index.tsx b/projects/client/src/components/ShopItem/index.tsx index 39b818b0..48a336eb 100644 --- a/projects/client/src/components/ShopItem/index.tsx +++ b/projects/client/src/components/ShopItem/index.tsx @@ -1,14 +1,13 @@ 'use client'; import * as S from './style'; - -import Image from 'next/image'; +import { CheckBoxIcon, CheckedBoxIcon } from 'client/assets'; import { ShopItemType } from 'types'; -import { CheckBoxIcon, CheckedBoxIcon } from 'client/assets'; import { slicePoint } from 'common'; -import { useEffect } from 'react'; + +import Image from 'next/image'; interface ShopItemProps { data: ShopItemType; From d60450947d1e878e2bcec16f781bfe176c0d6189 Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Wed, 13 Sep 2023 00:03:45 +0900 Subject: [PATCH 19/20] Update line --- projects/client/src/components/ShopItem/style.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/projects/client/src/components/ShopItem/style.ts b/projects/client/src/components/ShopItem/style.ts index 2afa8656..93f00f06 100644 --- a/projects/client/src/components/ShopItem/style.ts +++ b/projects/client/src/components/ShopItem/style.ts @@ -1,8 +1,8 @@ import styled from '@emotion/styled'; export const Wrapper = styled.div` - display: flex; width: 12.5rem; + display: flex; flex-direction: column; cursor: pointer; `; @@ -22,9 +22,9 @@ export const ImageWrapper = styled.div` export const CheckBox = styled.div` position: absolute; - z-index: 2; top: 0.5rem; left: 0.5rem; + z-index: 2; `; export const ItemName = styled.span` From bfebdb98f759aa57673833cd1da0aa20e3d3a78e Mon Sep 17 00:00:00 2001 From: Lee-Seungje Date: Thu, 14 Sep 2023 00:30:10 +0900 Subject: [PATCH 20/20] Update line --- projects/client/src/PageContainer/ShopPage/style.ts | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/projects/client/src/PageContainer/ShopPage/style.ts b/projects/client/src/PageContainer/ShopPage/style.ts index d4121849..3a4d117d 100644 --- a/projects/client/src/PageContainer/ShopPage/style.ts +++ b/projects/client/src/PageContainer/ShopPage/style.ts @@ -2,10 +2,10 @@ import styled from '@emotion/styled'; export const PageWrapper = styled.div` width: 100vw; + padding: 3.75rem 0 14.75rem; display: flex; align-items: center; flex-direction: column; - padding: 3.75rem 0 14.75rem; `; export const MiledgeTitle = styled.h2` @@ -38,10 +38,10 @@ export const SelectButton = styled.button` width: 25rem; height: 4.375rem; border-radius: 0.625rem; - background: ${({ theme }) => theme.color.primary}; border: 0; - cursor: pointer; margin-top: 6.25rem; + background: ${({ theme }) => theme.color.primary}; + cursor: pointer; `; export const ListWrapper = styled.div`