From 33ea6513e397a61dcaf2b12424c5db706e4741b0 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 30 Jul 2024 23:24:34 +0900 Subject: [PATCH 01/24] =?UTF-8?q?chore:=20svg=20import=20=EB=B0=A9?= =?UTF-8?q?=EC=8B=9D=20url=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/custom.d.ts | 5 +++++ frontend/webpack.common.js | 12 +++++++++++- 2 files changed, 16 insertions(+), 1 deletion(-) diff --git a/frontend/src/custom.d.ts b/frontend/src/custom.d.ts index 48397087a..82ca1de9a 100644 --- a/frontend/src/custom.d.ts +++ b/frontend/src/custom.d.ts @@ -6,6 +6,11 @@ declare module '*.woff2' { const src: string; export default src; } + +declare module '*.svg?url' { + const content: string; + export default content; +} declare module '*.svg' { import React = require('react'); export const ReactComponent: React.FC>; diff --git a/frontend/webpack.common.js b/frontend/webpack.common.js index 330a15a76..3964cb1c4 100644 --- a/frontend/webpack.common.js +++ b/frontend/webpack.common.js @@ -44,7 +44,17 @@ module.exports = { rules: [ { test: /\.svg$/i, - use: ['@svgr/webpack'], + oneOf: [ + { + use: ['@svgr/webpack'], + issuer: /\.[jt]sx?$/, + resourceQuery: { not: [/url/] }, + }, + { + type: 'asset/resource', + resourceQuery: /url/, + } + ] }, { test: /\.(png|jpe?g|gif|webp|woff2)$/i, From 695204dc770d8145d6514c75d6b90c742dfa7c1d Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 30 Jul 2024 23:30:32 +0900 Subject: [PATCH 02/24] =?UTF-8?q?fix:=20storybook=20=EC=84=A4=EC=A0=95?= =?UTF-8?q?=EC=97=90=20svg=20=EC=B2=98=EB=A6=AC=20=EB=B0=A9=EC=8B=9D=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/.storybook/main.ts | 25 ++++++++++++++++++++++++- 1 file changed, 24 insertions(+), 1 deletion(-) diff --git a/frontend/.storybook/main.ts b/frontend/.storybook/main.ts index bf3e37456..335e0e5b9 100644 --- a/frontend/.storybook/main.ts +++ b/frontend/.storybook/main.ts @@ -54,7 +54,30 @@ const config: StorybookConfig = { presets: [require.resolve('@emotion/babel-preset-css-prop')], }, }); - + if (config.module?.rules) { + config.module = config.module || {}; + config.module.rules = config.module.rules || []; + const imageRule = config.module.rules.find((rule) => + rule?.['test']?.test('.svg'), + ); + if (imageRule) { + imageRule['exclude'] = /\.svg$/; + } + config.module.rules.push({ + test: /\.svg$/i, + oneOf: [ + { + use: ['@svgr/webpack'], + issuer: /\.[jt]sx?$/, + resourceQuery: { not: [/url/] }, + }, + { + type: 'asset/resource', + resourceQuery: /url/, + }, + ], + }); + } return config; }, }; From 4cafa68ea7aaaa98d84830a9d055ac818d3e8ee1 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 30 Jul 2024 23:31:04 +0900 Subject: [PATCH 03/24] =?UTF-8?q?feat:=20empty=5Fprofile.svg=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/common/assets/empty_profile.svg | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 frontend/src/common/assets/empty_profile.svg diff --git a/frontend/src/common/assets/empty_profile.svg b/frontend/src/common/assets/empty_profile.svg new file mode 100644 index 000000000..ecb9cc7fa --- /dev/null +++ b/frontend/src/common/assets/empty_profile.svg @@ -0,0 +1,4 @@ + + + + From 843415d0ac28afdc8a648f3db3827f4c4a6969ca Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 30 Jul 2024 23:32:14 +0900 Subject: [PATCH 04/24] =?UTF-8?q?feat:=20ProfileFrame=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Profile/ProfileFrame.style.ts | 26 +++++++++++++++++++ .../src/components/Profile/ProfileFrame.tsx | 26 +++++++++++++++++++ 2 files changed, 52 insertions(+) create mode 100644 frontend/src/components/Profile/ProfileFrame.style.ts create mode 100644 frontend/src/components/Profile/ProfileFrame.tsx diff --git a/frontend/src/components/Profile/ProfileFrame.style.ts b/frontend/src/components/Profile/ProfileFrame.style.ts new file mode 100644 index 000000000..91c8eb13c --- /dev/null +++ b/frontend/src/components/Profile/ProfileFrame.style.ts @@ -0,0 +1,26 @@ +import { css } from '@emotion/react'; + +type Size = string | number | undefined; + +export const profileFrame = (width: Size, height: Size) => { + return css` + overflow: hidden; + display: flex; + align-items: center; + justify-content: center; + + width: ${width}; + height: ${height}; + + border: 0.5rem solid orange; + border-radius: 300rem; + `; +}; + +export const profileImage = () => { + return css` + width: 100%; + height: 100%; + object-fit: cover; + `; +}; diff --git a/frontend/src/components/Profile/ProfileFrame.tsx b/frontend/src/components/Profile/ProfileFrame.tsx new file mode 100644 index 000000000..e4879b73f --- /dev/null +++ b/frontend/src/components/Profile/ProfileFrame.tsx @@ -0,0 +1,26 @@ +import { ImgHTMLAttributes } from 'react'; +import * as S from './ProfileFrame.style'; +import EmptyProfile from '@_common/assets/empty_profile.svg?url'; + +interface ProfileFrameProps extends ImgHTMLAttributes { + width: string | number | undefined; + height: string | number | undefined; +} +export default function ProfileFrame(props: ProfileFrameProps) { + const { width, height, onError, ...args } = props; + + const handleError = ( + event: React.SyntheticEvent, + ) => { + if (onError) { + onError(event); + } + event.currentTarget.src = EmptyProfile; + }; + + return ( +
+ +
+ ); +} From f40582bfc42a9bb8b86a085e9831bdb2e836c17b Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 30 Jul 2024 23:32:39 +0900 Subject: [PATCH 05/24] =?UTF-8?q?test:=20ProfileFrame=20Storybook=20?= =?UTF-8?q?=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Profile/ProfileFrame.stories.tsx | 40 +++++++++++++++++++ 1 file changed, 40 insertions(+) create mode 100644 frontend/src/components/Profile/ProfileFrame.stories.tsx diff --git a/frontend/src/components/Profile/ProfileFrame.stories.tsx b/frontend/src/components/Profile/ProfileFrame.stories.tsx new file mode 100644 index 000000000..358edfb09 --- /dev/null +++ b/frontend/src/components/Profile/ProfileFrame.stories.tsx @@ -0,0 +1,40 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import ProfileFrame from './ProfileFrame'; +import EmptyProfile from '@_common/assets/empty_profile.svg'; +import Plus from '@_common/assets/tabler_plus.svg?url'; + +const meta = { + component: ProfileFrame, + title: 'Components/ProfileFrame', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + width: '7rem', + height: '7rem', + src: EmptyProfile, + }, + render: (args) => , +}; + +export const WithCustomImage: Story = { + args: { + width: '7rem', + height: '7rem', + src: Plus, + }, + render: (args) => , +}; + +export const WithErrorHandling: Story = { + args: { + width: '7rem', + height: '7rem', + src: 'invalid-url.jpg', // 오류를 발생시키기 위한 잘못된 URL + }, + render: (args) => , +}; From f2987584f66a528c37de5edb213b70b6e8d98b8d Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 30 Jul 2024 23:35:30 +0900 Subject: [PATCH 06/24] =?UTF-8?q?feat:=20ProfileBox=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Profile/ProfileBox.style.ts | 15 +++++++++++++++ frontend/src/components/Profile/ProfileBox.tsx | 18 ++++++++++++++++++ 2 files changed, 33 insertions(+) create mode 100644 frontend/src/components/Profile/ProfileBox.style.ts create mode 100644 frontend/src/components/Profile/ProfileBox.tsx diff --git a/frontend/src/components/Profile/ProfileBox.style.ts b/frontend/src/components/Profile/ProfileBox.style.ts new file mode 100644 index 000000000..6ae1e10a9 --- /dev/null +++ b/frontend/src/components/Profile/ProfileBox.style.ts @@ -0,0 +1,15 @@ +import { css, Theme } from '@emotion/react'; + +export const ProfileBox = css` + display: flex; + flex-direction: column; + gap: 0.4rem; + align-items: center; + + width: auto; + width: fit-content; +`; + +export const ProfileName = (props: { theme: Theme }) => css` + ${props.theme.typography.s2} +`; diff --git a/frontend/src/components/Profile/ProfileBox.tsx b/frontend/src/components/Profile/ProfileBox.tsx new file mode 100644 index 000000000..996bacab0 --- /dev/null +++ b/frontend/src/components/Profile/ProfileBox.tsx @@ -0,0 +1,18 @@ +import ProfileFrame from './ProfileFrame'; +import * as S from './ProfileBox.style'; +import { useTheme } from '@emotion/react'; + +interface ProfileBoxProps { + name: string; + src: string; +} +export default function ProfileBox(props: ProfileBoxProps) { + const { name, src } = props; + const theme = useTheme(); + return ( +
+ +
{name}
+
+ ); +} From c4270c46e4f4610b56b8396a794cbe546137d07b Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Tue, 30 Jul 2024 23:35:58 +0900 Subject: [PATCH 07/24] =?UTF-8?q?test:=20ProfileBox=20Storybook=20?= =?UTF-8?q?=EC=BD=94=EB=93=9C=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Profile/ProfileBox.stories.tsx | 37 +++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 frontend/src/components/Profile/ProfileBox.stories.tsx diff --git a/frontend/src/components/Profile/ProfileBox.stories.tsx b/frontend/src/components/Profile/ProfileBox.stories.tsx new file mode 100644 index 000000000..d4367642e --- /dev/null +++ b/frontend/src/components/Profile/ProfileBox.stories.tsx @@ -0,0 +1,37 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import ProfileBox from './ProfileBox'; +import EmptyProfile from '@_common/assets/empty_profile.svg'; +import Plus from '@_common/assets/tabler_plus.svg?url'; + +const meta = { + component: ProfileBox, + title: 'Components/ProfileBox', +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + name: '치코', + src: EmptyProfile, + }, + render: (args) => , +}; + +export const WithCustomImage: Story = { + args: { + name: '치코', + src: Plus, + }, + render: (args) => , +}; + +export const WithErrorHandling: Story = { + args: { + name: '치코', + src: 'invalid-url.jpg', // 오류를 발생시키기 위한 잘못된 URL + }, + render: (args) => , +}; From b42900ee5b3288945254ec70dc11132e0a24830f Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 10:30:42 +0900 Subject: [PATCH 08/24] =?UTF-8?q?faet:=20ProfileList=20=EC=BB=B4=ED=8F=AC?= =?UTF-8?q?=EB=84=8C=ED=8A=B8=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProfileList/ProfileList.style.ts | 17 +++++++++++++++++ .../components/ProfileList/ProfileList.tsx | 19 +++++++++++++++++++ 2 files changed, 36 insertions(+) create mode 100644 frontend/src/components/ProfileList/ProfileList.style.ts create mode 100644 frontend/src/components/ProfileList/ProfileList.tsx diff --git a/frontend/src/components/ProfileList/ProfileList.style.ts b/frontend/src/components/ProfileList/ProfileList.style.ts new file mode 100644 index 000000000..cde6e5bc6 --- /dev/null +++ b/frontend/src/components/ProfileList/ProfileList.style.ts @@ -0,0 +1,17 @@ +import { css } from '@emotion/react'; + +export const ProfileContanier = css` + scrollbar-width: none; /* Firefox 현재 no-unsupported-browser-features 경고 발생 중 추후 확인 필요 */ + + overflow: auto hidden; + display: flex; + gap: 20px; + + width: auto; + + -ms-overflow-style: none; + + &::-webkit-scrollbar { + display: none; + } +`; diff --git a/frontend/src/components/ProfileList/ProfileList.tsx b/frontend/src/components/ProfileList/ProfileList.tsx new file mode 100644 index 000000000..70ba78afb --- /dev/null +++ b/frontend/src/components/ProfileList/ProfileList.tsx @@ -0,0 +1,19 @@ +import ProfileBox from '@_components/Profile/ProfileBox'; +import * as S from './ProfileList.style'; +import EmptyProfile from '@_common/assets/empty_profile.svg'; + +export default function ProfileList() { + //TODO 데이터 타입이 정해질 경우 수정 예정 + return ( +
+ + + + + + + + +
+ ); +} From f381cccc79de6442b603f638e859a26233a89674 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 10:31:33 +0900 Subject: [PATCH 09/24] =?UTF-8?q?test:=20ProfileList=20Storybook=20?= =?UTF-8?q?=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=9E=91=EC=84=B1?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProfileList/ProfileList.stories.tsx | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) create mode 100644 frontend/src/components/ProfileList/ProfileList.stories.tsx diff --git a/frontend/src/components/ProfileList/ProfileList.stories.tsx b/frontend/src/components/ProfileList/ProfileList.stories.tsx new file mode 100644 index 000000000..852135b7a --- /dev/null +++ b/frontend/src/components/ProfileList/ProfileList.stories.tsx @@ -0,0 +1,16 @@ +import { Meta, StoryObj } from '@storybook/react/*'; +import ProfileList from './ProfileList'; + +const meta = { + title: 'components/ProfileList', + component: ProfileList, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: {}, + render: (args) => , +}; From e394169bbe301c9a208e21125da247b36703ba4b Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 12:38:54 +0900 Subject: [PATCH 10/24] =?UTF-8?q?feat:=20Participation=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/types/index.d.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/frontend/src/types/index.d.ts b/frontend/src/types/index.d.ts index a2a33a06a..7bb95c485 100644 --- a/frontend/src/types/index.d.ts +++ b/frontend/src/types/index.d.ts @@ -12,6 +12,12 @@ export interface MoimInfo { description?: string; } +export interface Participation { + nickname: string; + profile: string; + role: 'moimer' | 'moimee'; +} + export type MoimInputInfo = Omit< MoimInfo, 'moimId' | 'currentPeople' | 'participants' From 173743e26e17de5def9c654a7c34b4ca0e2b1e54 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 12:40:09 +0900 Subject: [PATCH 11/24] =?UTF-8?q?feat:=20ProfileList=EA=B0=80=20participan?= =?UTF-8?q?ts=EB=B0=B0=EC=97=B4=20=EC=A0=95=EB=B3=B4=EB=A5=BC=20=EB=A0=8C?= =?UTF-8?q?=EB=8D=94=EB=A7=81=ED=95=98=EB=8F=84=EB=A1=9D=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProfileList/ProfileList.stories.tsx | 45 ++++++++++++++++++- .../components/ProfileList/ProfileList.tsx | 28 +++++++----- 2 files changed, 61 insertions(+), 12 deletions(-) diff --git a/frontend/src/components/ProfileList/ProfileList.stories.tsx b/frontend/src/components/ProfileList/ProfileList.stories.tsx index 852135b7a..78b14dd11 100644 --- a/frontend/src/components/ProfileList/ProfileList.stories.tsx +++ b/frontend/src/components/ProfileList/ProfileList.stories.tsx @@ -11,6 +11,49 @@ export default meta; type Story = StoryObj; export const Default: Story = { - args: {}, + args: { + participants: [ + { + nickname: '치코', + profile: '', + role: 'moimer', + }, + { + nickname: '치코', + profile: '', + role: 'moimer', + }, + { + nickname: '치코', + profile: '', + role: 'moimer', + }, + { + nickname: '치코', + profile: '', + role: 'moimer', + }, + { + nickname: '치코', + profile: '', + role: 'moimer', + }, + { + nickname: '치코', + profile: '', + role: 'moimer', + }, + { + nickname: '치코', + profile: '', + role: 'moimer', + }, + { + nickname: '치코', + profile: '', + role: 'moimer', + }, + ], + }, render: (args) => , }; diff --git a/frontend/src/components/ProfileList/ProfileList.tsx b/frontend/src/components/ProfileList/ProfileList.tsx index 70ba78afb..6672ba566 100644 --- a/frontend/src/components/ProfileList/ProfileList.tsx +++ b/frontend/src/components/ProfileList/ProfileList.tsx @@ -1,19 +1,25 @@ import ProfileBox from '@_components/Profile/ProfileBox'; import * as S from './ProfileList.style'; -import EmptyProfile from '@_common/assets/empty_profile.svg'; +import { Participation } from '@_types/index'; + +interface ProfileListProps { + participants: Participation[]; +} + +export default function ProfileList(props: ProfileListProps) { + const { participants } = props; -export default function ProfileList() { - //TODO 데이터 타입이 정해질 경우 수정 예정 return (
- - - - - - - - + {participants.map((participant) => { + return ( + + ); + })}
); } From c86e5f713971d7f2ac6cc05f78907b8a46605df7 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 13:18:32 +0900 Subject: [PATCH 12/24] =?UTF-8?q?refactor:=20ProfileBox=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20=EB=AA=85=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- ...fileBox.stories.tsx => ProfileCard.stories.tsx} | 14 +++++++------- .../{ProfileBox.style.ts => ProfileCard.style.ts} | 2 +- .../Profile/{ProfileBox.tsx => ProfileCard.tsx} | 10 +++++----- 3 files changed, 13 insertions(+), 13 deletions(-) rename frontend/src/components/Profile/{ProfileBox.stories.tsx => ProfileCard.stories.tsx} (67%) rename frontend/src/components/Profile/{ProfileBox.style.ts => ProfileCard.style.ts} (89%) rename frontend/src/components/Profile/{ProfileBox.tsx => ProfileCard.tsx} (54%) diff --git a/frontend/src/components/Profile/ProfileBox.stories.tsx b/frontend/src/components/Profile/ProfileCard.stories.tsx similarity index 67% rename from frontend/src/components/Profile/ProfileBox.stories.tsx rename to frontend/src/components/Profile/ProfileCard.stories.tsx index d4367642e..2a07bde57 100644 --- a/frontend/src/components/Profile/ProfileBox.stories.tsx +++ b/frontend/src/components/Profile/ProfileCard.stories.tsx @@ -1,12 +1,12 @@ import type { Meta, StoryObj } from '@storybook/react'; -import ProfileBox from './ProfileBox'; +import ProfileCard from './ProfileCard'; import EmptyProfile from '@_common/assets/empty_profile.svg'; import Plus from '@_common/assets/tabler_plus.svg?url'; const meta = { - component: ProfileBox, - title: 'Components/ProfileBox', -} satisfies Meta; + component: ProfileCard, + title: 'Components/ProfileCard', +} satisfies Meta; export default meta; @@ -17,7 +17,7 @@ export const Default: Story = { name: '치코', src: EmptyProfile, }, - render: (args) => , + render: (args) => , }; export const WithCustomImage: Story = { @@ -25,7 +25,7 @@ export const WithCustomImage: Story = { name: '치코', src: Plus, }, - render: (args) => , + render: (args) => , }; export const WithErrorHandling: Story = { @@ -33,5 +33,5 @@ export const WithErrorHandling: Story = { name: '치코', src: 'invalid-url.jpg', // 오류를 발생시키기 위한 잘못된 URL }, - render: (args) => , + render: (args) => , }; diff --git a/frontend/src/components/Profile/ProfileBox.style.ts b/frontend/src/components/Profile/ProfileCard.style.ts similarity index 89% rename from frontend/src/components/Profile/ProfileBox.style.ts rename to frontend/src/components/Profile/ProfileCard.style.ts index 6ae1e10a9..db3c9c150 100644 --- a/frontend/src/components/Profile/ProfileBox.style.ts +++ b/frontend/src/components/Profile/ProfileCard.style.ts @@ -1,6 +1,6 @@ import { css, Theme } from '@emotion/react'; -export const ProfileBox = css` +export const ProfileCard = css` display: flex; flex-direction: column; gap: 0.4rem; diff --git a/frontend/src/components/Profile/ProfileBox.tsx b/frontend/src/components/Profile/ProfileCard.tsx similarity index 54% rename from frontend/src/components/Profile/ProfileBox.tsx rename to frontend/src/components/Profile/ProfileCard.tsx index 996bacab0..58498ae96 100644 --- a/frontend/src/components/Profile/ProfileBox.tsx +++ b/frontend/src/components/Profile/ProfileCard.tsx @@ -1,17 +1,17 @@ import ProfileFrame from './ProfileFrame'; -import * as S from './ProfileBox.style'; +import * as S from './ProfileCard.style'; import { useTheme } from '@emotion/react'; -interface ProfileBoxProps { +interface ProfileCardProps { name: string; src: string; } -export default function ProfileBox(props: ProfileBoxProps) { +export default function ProfileBox(props: ProfileCardProps) { const { name, src } = props; const theme = useTheme(); return ( -
- +
+
{name}
); From eba83fca51ce2b341631d0e44d937a85a201a5d2 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 13:29:04 +0900 Subject: [PATCH 13/24] =?UTF-8?q?feat:=20crown.svg=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/common/assets/crown.svg | 3 +++ 1 file changed, 3 insertions(+) create mode 100644 frontend/src/common/assets/crown.svg diff --git a/frontend/src/common/assets/crown.svg b/frontend/src/common/assets/crown.svg new file mode 100644 index 000000000..3cda192a2 --- /dev/null +++ b/frontend/src/common/assets/crown.svg @@ -0,0 +1,3 @@ + + + From 8b6f68d412815590d5c76d2e2889d73e06e0c4b3 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 13:29:30 +0900 Subject: [PATCH 14/24] =?UTF-8?q?feat:=20role=EC=97=90=20=EB=94=B0?= =?UTF-8?q?=EB=A5=B8=20crown=20=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/Profile/ProfileFrame.style.ts | 21 ++++++++++++++++--- .../src/components/Profile/ProfileFrame.tsx | 16 +++++++++----- 2 files changed, 29 insertions(+), 8 deletions(-) diff --git a/frontend/src/components/Profile/ProfileFrame.style.ts b/frontend/src/components/Profile/ProfileFrame.style.ts index 91c8eb13c..07b209ca2 100644 --- a/frontend/src/components/Profile/ProfileFrame.style.ts +++ b/frontend/src/components/Profile/ProfileFrame.style.ts @@ -1,6 +1,12 @@ import { css } from '@emotion/react'; -type Size = string | number | undefined; +type Size = number; + +export const profileBox = () => { + return css` + width: fit-content; + `; +}; export const profileFrame = (width: Size, height: Size) => { return css` @@ -9,8 +15,8 @@ export const profileFrame = (width: Size, height: Size) => { align-items: center; justify-content: center; - width: ${width}; - height: ${height}; + width: ${width}rem; + height: ${height}rem; border: 0.5rem solid orange; border-radius: 300rem; @@ -24,3 +30,12 @@ export const profileImage = () => { object-fit: cover; `; }; + +export const profileCrown = (width: Size) => { + return css` + position: relative; + top: 1rem; + left: ${width / 2 - (3 * (width / 8)) / 2}rem; + width: ${3 * (width / 8)}rem; + `; +}; diff --git a/frontend/src/components/Profile/ProfileFrame.tsx b/frontend/src/components/Profile/ProfileFrame.tsx index e4879b73f..980f7a9c3 100644 --- a/frontend/src/components/Profile/ProfileFrame.tsx +++ b/frontend/src/components/Profile/ProfileFrame.tsx @@ -1,13 +1,16 @@ import { ImgHTMLAttributes } from 'react'; import * as S from './ProfileFrame.style'; import EmptyProfile from '@_common/assets/empty_profile.svg?url'; +import Crown from '@_common/assets/crown.svg?url'; +import { Role } from '@_types/index'; interface ProfileFrameProps extends ImgHTMLAttributes { - width: string | number | undefined; - height: string | number | undefined; + role?: Role; + width: number; + height: number; } export default function ProfileFrame(props: ProfileFrameProps) { - const { width, height, onError, ...args } = props; + const { width, height, onError, role, ...args } = props; const handleError = ( event: React.SyntheticEvent, @@ -19,8 +22,11 @@ export default function ProfileFrame(props: ProfileFrameProps) { }; return ( -
- +
+ {role === 'moimer' ? : ''} +
+ +
); } From f847e03e0c802562f63c7c632a22fd589faf0126 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 13:29:51 +0900 Subject: [PATCH 15/24] =?UTF-8?q?test:=20crown=20=EC=9D=B4=EB=AF=B8?= =?UTF-8?q?=EC=A7=80=20=ED=85=8C=EC=8A=A4=ED=8A=B8=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Profile/ProfileFrame.stories.tsx | 22 ++++++++++++++----- 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/Profile/ProfileFrame.stories.tsx b/frontend/src/components/Profile/ProfileFrame.stories.tsx index 358edfb09..6c3b7072a 100644 --- a/frontend/src/components/Profile/ProfileFrame.stories.tsx +++ b/frontend/src/components/Profile/ProfileFrame.stories.tsx @@ -14,17 +14,27 @@ type Story = StoryObj; export const Default: Story = { args: { - width: '7rem', - height: '7rem', + width: 7, + height: 7, src: EmptyProfile, }, render: (args) => , }; +export const WithCustomImageAndCrown: Story = { + args: { + width: 7, + height: 7, + src: Plus, + role: 'moimer', + }, + render: (args) => , +}; + export const WithCustomImage: Story = { args: { - width: '7rem', - height: '7rem', + width: 7, + height: 7, src: Plus, }, render: (args) => , @@ -32,8 +42,8 @@ export const WithCustomImage: Story = { export const WithErrorHandling: Story = { args: { - width: '7rem', - height: '7rem', + width: 7, + height: 7, src: 'invalid-url.jpg', // 오류를 발생시키기 위한 잘못된 URL }, render: (args) => , From 9ed261c945ff3e79b322dd505877acf3a95119a0 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 13:30:19 +0900 Subject: [PATCH 16/24] =?UTF-8?q?feat=20:=20Participation=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=EC=97=90=20role=20=ED=83=80=EC=9E=85=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/types/index.d.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/frontend/src/types/index.d.ts b/frontend/src/types/index.d.ts index 7bb95c485..8e3111005 100644 --- a/frontend/src/types/index.d.ts +++ b/frontend/src/types/index.d.ts @@ -15,9 +15,11 @@ export interface MoimInfo { export interface Participation { nickname: string; profile: string; - role: 'moimer' | 'moimee'; + role: Role; } +export type Role = 'moimer' | 'moimee'; + export type MoimInputInfo = Omit< MoimInfo, 'moimId' | 'currentPeople' | 'participants' From 14ae4ee90268a059fba2bfbe6bcfa2cef89ba915 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 13:47:58 +0900 Subject: [PATCH 17/24] =?UTF-8?q?refactor:=20ProfileCardProps=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Profile/ProfileCard.tsx | 15 ++++++++++----- .../src/components/ProfileList/ProfileList.tsx | 10 ++-------- 2 files changed, 12 insertions(+), 13 deletions(-) diff --git a/frontend/src/components/Profile/ProfileCard.tsx b/frontend/src/components/Profile/ProfileCard.tsx index 58498ae96..7eb69df7e 100644 --- a/frontend/src/components/Profile/ProfileCard.tsx +++ b/frontend/src/components/Profile/ProfileCard.tsx @@ -1,18 +1,23 @@ import ProfileFrame from './ProfileFrame'; import * as S from './ProfileCard.style'; import { useTheme } from '@emotion/react'; +import { Participation } from '@_types/index'; interface ProfileCardProps { - name: string; - src: string; + profile: Participation; } export default function ProfileBox(props: ProfileCardProps) { - const { name, src } = props; + const { profile } = props; const theme = useTheme(); return (
- -
{name}
+ +
{profile.nickname}
); } diff --git a/frontend/src/components/ProfileList/ProfileList.tsx b/frontend/src/components/ProfileList/ProfileList.tsx index 6672ba566..a2734bfe3 100644 --- a/frontend/src/components/ProfileList/ProfileList.tsx +++ b/frontend/src/components/ProfileList/ProfileList.tsx @@ -1,4 +1,4 @@ -import ProfileBox from '@_components/Profile/ProfileBox'; +import ProfileBox from '@_components/Profile/ProfileCard'; import * as S from './ProfileList.style'; import { Participation } from '@_types/index'; @@ -12,13 +12,7 @@ export default function ProfileList(props: ProfileListProps) { return (
{participants.map((participant) => { - return ( - - ); + return ; })}
); From 0ac6d4d119753a5feee0384844ec2fa052fe6935 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 13:48:47 +0900 Subject: [PATCH 18/24] =?UTF-8?q?test:=20ProfileCardProps=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EB=B3=80=EA=B2=BD=EC=97=90=20=EB=94=B0=EB=A5=B8=20?= =?UTF-8?q?=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../Profile/ProfileCard.stories.tsx | 21 +++++++++++++------ 1 file changed, 15 insertions(+), 6 deletions(-) diff --git a/frontend/src/components/Profile/ProfileCard.stories.tsx b/frontend/src/components/Profile/ProfileCard.stories.tsx index 2a07bde57..0cc0aba4c 100644 --- a/frontend/src/components/Profile/ProfileCard.stories.tsx +++ b/frontend/src/components/Profile/ProfileCard.stories.tsx @@ -14,24 +14,33 @@ type Story = StoryObj; export const Default: Story = { args: { - name: '치코', - src: EmptyProfile, + profile: { + nickname: '치코', + src: EmptyProfile, + role: 'moimee', + }, }, render: (args) => , }; export const WithCustomImage: Story = { args: { - name: '치코', - src: Plus, + profile: { + nickname: '치코', + src: Plus, + role: 'moimee', + }, }, render: (args) => , }; export const WithErrorHandling: Story = { args: { - name: '치코', - src: 'invalid-url.jpg', // 오류를 발생시키기 위한 잘못된 URL + profile: { + nickname: '치코', + src: 'invalid-url.jpg', // 오류를 발생시키기 위한 잘못된 URL + role: 'moimee', + }, }, render: (args) => , }; From be06975c54dda11960c510be9886cf94f60b3aca Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 13:49:24 +0900 Subject: [PATCH 19/24] =?UTF-8?q?refactor:=20Participation=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=EC=9D=98=20profile=EC=9D=84=20src=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/types/index.d.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/types/index.d.ts b/frontend/src/types/index.d.ts index 8e3111005..a034bad3e 100644 --- a/frontend/src/types/index.d.ts +++ b/frontend/src/types/index.d.ts @@ -14,7 +14,7 @@ export interface MoimInfo { export interface Participation { nickname: string; - profile: string; + src: string; role: Role; } From 262b51b9947b8d17158b1ae933ae50f26214c08f Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 13:49:46 +0900 Subject: [PATCH 20/24] =?UTF-8?q?test:=20Participation=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=EC=9D=98=20profile=EC=9D=84=20src=EB=A1=9C=20?= =?UTF-8?q?=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ProfileList/ProfileList.stories.tsx | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/frontend/src/components/ProfileList/ProfileList.stories.tsx b/frontend/src/components/ProfileList/ProfileList.stories.tsx index 78b14dd11..6dce559ec 100644 --- a/frontend/src/components/ProfileList/ProfileList.stories.tsx +++ b/frontend/src/components/ProfileList/ProfileList.stories.tsx @@ -15,42 +15,42 @@ export const Default: Story = { participants: [ { nickname: '치코', - profile: '', + src: '', role: 'moimer', }, { nickname: '치코', - profile: '', - role: 'moimer', + src: '', + role: 'moimee', }, { nickname: '치코', - profile: '', + src: '', role: 'moimer', }, { nickname: '치코', - profile: '', + src: '', role: 'moimer', }, { nickname: '치코', - profile: '', + src: '', role: 'moimer', }, { nickname: '치코', - profile: '', + src: '', role: 'moimer', }, { nickname: '치코', - profile: '', + src: '', role: 'moimer', }, { nickname: '치코', - profile: '', + src: '', role: 'moimer', }, ], From b39721453e21f4e4eb7b44663dcc4fcab74eb3fb Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 13:50:26 +0900 Subject: [PATCH 21/24] =?UTF-8?q?feat:=20ProfileCard=EC=9D=98=20item=20?= =?UTF-8?q?=EC=A0=95=EB=A0=AC=20=EB=B0=A9=EC=8B=9D=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Profile/ProfileCard.style.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/Profile/ProfileCard.style.ts b/frontend/src/components/Profile/ProfileCard.style.ts index db3c9c150..a3a9ef677 100644 --- a/frontend/src/components/Profile/ProfileCard.style.ts +++ b/frontend/src/components/Profile/ProfileCard.style.ts @@ -5,6 +5,7 @@ export const ProfileCard = css` flex-direction: column; gap: 0.4rem; align-items: center; + justify-content: flex-end; width: auto; width: fit-content; From 2539e3f714ee4d45adf73aace0d571d0904f78b6 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 14:03:10 +0900 Subject: [PATCH 22/24] =?UTF-8?q?refactor:=20profileCrown=20=EC=84=A4?= =?UTF-8?q?=EB=AA=85=20=EC=A3=BC=EC=84=9D=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Profile/ProfileFrame.style.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/Profile/ProfileFrame.style.ts b/frontend/src/components/Profile/ProfileFrame.style.ts index 07b209ca2..298547bec 100644 --- a/frontend/src/components/Profile/ProfileFrame.style.ts +++ b/frontend/src/components/Profile/ProfileFrame.style.ts @@ -31,6 +31,7 @@ export const profileImage = () => { `; }; +// 크라운 이미지를 가운데 정렬하기 위한 css export const profileCrown = (width: Size) => { return css` position: relative; From 4f271482e1ff6e3fe2318e31929d382850c28709 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 16:50:01 +0900 Subject: [PATCH 23/24] =?UTF-8?q?refactor:=20ProfileBox=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=EB=84=8C=ED=8A=B8=20ProfileCard=EB=A1=9C=20=EC=9D=B4?= =?UTF-8?q?=EB=A6=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/ProfileList/ProfileList.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/frontend/src/components/ProfileList/ProfileList.tsx b/frontend/src/components/ProfileList/ProfileList.tsx index a2734bfe3..ca53cd9d9 100644 --- a/frontend/src/components/ProfileList/ProfileList.tsx +++ b/frontend/src/components/ProfileList/ProfileList.tsx @@ -1,4 +1,4 @@ -import ProfileBox from '@_components/Profile/ProfileCard'; +import ProfileCard from '@_components/Profile/ProfileCard'; import * as S from './ProfileList.style'; import { Participation } from '@_types/index'; @@ -12,7 +12,7 @@ export default function ProfileList(props: ProfileListProps) { return (
{participants.map((participant) => { - return ; + return ; })}
); From b5eb8bddd1e98efd10fa467830a2f4fba4567759 Mon Sep 17 00:00:00 2001 From: jaeml06 Date: Wed, 31 Jul 2024 16:50:41 +0900 Subject: [PATCH 24/24] =?UTF-8?q?feat:=20TODO=20=EC=A3=BC=EC=84=9D=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/ProfileList/ProfileList.style.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/ProfileList/ProfileList.style.ts b/frontend/src/components/ProfileList/ProfileList.style.ts index cde6e5bc6..1fe21844b 100644 --- a/frontend/src/components/ProfileList/ProfileList.style.ts +++ b/frontend/src/components/ProfileList/ProfileList.style.ts @@ -1,7 +1,7 @@ import { css } from '@emotion/react'; export const ProfileContanier = css` - scrollbar-width: none; /* Firefox 현재 no-unsupported-browser-features 경고 발생 중 추후 확인 필요 */ + scrollbar-width: none; /* TODO Firefox 현재 no-unsupported-browser-features 경고 발생 중 추후 확인 필요 */ overflow: auto hidden; display: flex;