Skip to content

Commit

Permalink
feat: 쪽지 관련 UI 업데이트 (#112)
Browse files Browse the repository at this point in the history
  • Loading branch information
@jinoov
jinoov committed Jul 18, 2024
1 parent 97e64dc commit 31833b8
Show file tree
Hide file tree
Showing 5 changed files with 63 additions and 172 deletions.
4 changes: 2 additions & 2 deletions apps/web-client/src/components/members/MemberDetail/MemberDetailContent.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -52,8 +52,8 @@ export default function MemberDetailContent({ loginId }: { loginId: string }) {
const onMessageButtonClick = () => {
if (confirm(`${member.name}님과의 대화를 시작할까요?`)) {
mutate(undefined, {
onSuccess: (conversationId) => {
history.push(`/${MENU.MESSAGE}/${conversationId}/${MENU.MESSAGE_FORM}`);
onSuccess: ({id }) => {
history.push(`/${MENU.MESSAGE}/${id}/${MENU.MESSAGE_FORM}`);
},
});
}
Expand Down
46 changes: 22 additions & 24 deletions apps/web-client/src/components/message/MessageAllListContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,10 @@
import { Button, List, Space, Typography } from 'antd';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { useHistory } from 'react-router-dom';
import { Link, useHistory } from 'react-router-dom';
import { createStyles } from 'antd-style';
import { ConversationControllerService, queryKey, useAppSuspenseQuery } from '~/lib/api-v2';
import { dayjs } from '~/lib/utils/dayjs';
import { MENU } from '~/constants/menus';

const useStyles = createStyles(({ css }) => ({
wrapper: css`
Expand Down Expand Up @@ -29,27 +32,20 @@ const useStyles = createStyles(({ css }) => ({
font-weight: 700;
font-size: 20px;
`,
listItemLink: css`
padding: 12px 0;
width: 100%;
`,
}));

export default function MessageAllListContent() {
const { styles } = useStyles();
const history = useHistory();

// TODO: API 호출로 대체
const data = [
{
title: 'Ant Design Title 1',
},
{
title: 'Ant Design Title 2',
},
{
title: 'Ant Design Title 3',
},
{
title: 'Ant Design Title 4',
},
];
const { data } = useAppSuspenseQuery({
queryKey: queryKey.conversation.all,
queryFn: ConversationControllerService.getAllConversationsUsingGet,
});

return (
<Space direction="vertical" className={styles.fullWidth} size="large">
Expand All @@ -58,21 +54,23 @@ export default function MessageAllListContent() {
<Button shape="circle" type="text" onClick={() => history.goBack()}>
<ArrowLeftOutlined />
</Button>
<Typography.Text className={styles.topBoxName}>대화목록</Typography.Text>
<Typography.Text className={styles.topBoxName}>대화 목록</Typography.Text>
</Space>
</Space>
<List
itemLayout="horizontal"
dataSource={data}
renderItem={() => (
renderItem={(item) => (
<List.Item>
<Space direction="vertical" className={styles.fullWidth}>
<Space className={styles.metaInfo}>
<Typography.Text className={styles.messageType}>받은 쪽지</Typography.Text>
<Typography.Text>2023.08.15 19:20:50</Typography.Text>
<Link to={`/${MENU.MESSAGE}/${item.id}`} className={styles.listItemLink}>
<Space direction="vertical" className={styles.fullWidth}>
<Space className={styles.metaInfo}>
<Typography.Text className={styles.messageType}>{item.otherLoginID}</Typography.Text>
<Typography.Text>{dayjs(item.lastMessage?.sentAt).format('YYYY-MM-DD HH:mm:ss')}</Typography.Text>
</Space>
<Typography.Text>{item.lastMessage?.content}</Typography.Text>
</Space>
<Typography.Text>내용내용내용</Typography.Text>
</Space>
</Link>
</List.Item>
)}
/>
Expand Down
91 changes: 36 additions & 55 deletions apps/web-client/src/components/message/MessageListContent.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,19 +1,12 @@
import { Button, List, Space, Typography } from 'antd';
import { createStyles } from 'antd-style';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { Link, useHistory } from 'react-router-dom';
import { Block, WhiteBlock } from '~/styles/common/Block.styles';
import { Link, useHistory, useParams } from 'react-router-dom';
import { MENU } from '~/constants/menus';
import { useAppSuspenseQuery, queryKey, ConversationControllerService } from '~/lib/api-v2';
import { dayjs } from '~/lib/utils/dayjs';

const useStyles = createStyles(({ css }) => ({
whiteBlock: css`
padding: 30px 20px;
`,
wrapper: css`
width: 100%;
max-width: 1200px;
box-sizing: border-box;
`,
fullWidth: css`
width: 100%;
`,
Expand All @@ -40,53 +33,41 @@ export default function MessageListContent() {
const { styles } = useStyles();
const history = useHistory();

const data = [
{
title: 'Ant Design Title 1',
},
{
title: 'Ant Design Title 2',
},
{
title: 'Ant Design Title 3',
},
{
title: 'Ant Design Title 4',
},
];
const { conversationId } = useParams<{ conversationId: string }>();

const { data } = useAppSuspenseQuery({
queryKey: queryKey.conversation.all,
queryFn: () => ConversationControllerService.viewConversationUsingGet({ conversationId }),
});

return (
<Block>
<WhiteBlock className={styles.whiteBlock}>
<Space direction="vertical" className={styles.fullWidth} size="large">
<Space className={styles.topBox}>
<Space>
<Button shape="circle" type="text" onClick={() => history.goBack()}>
<ArrowLeftOutlined />
</Button>
<Typography.Text className={styles.topBoxName}>익명</Typography.Text>
</Space>
<Link to={`/${MENU.MY_PAGE}/${MENU.MESSAGE_FORM}`}>
<Button>쪽지 보내기</Button>
</Link>
</Space>
<List
itemLayout="horizontal"
dataSource={data}
renderItem={() => (
<List.Item>
<Space direction="vertical" className={styles.fullWidth}>
<Space className={styles.metaInfo}>
<Typography.Text className={styles.messageType}>받은 쪽지</Typography.Text>
<Typography.Text>2023.08.15 19:20:50</Typography.Text>
</Space>
<Typography.Text>내용내용내용</Typography.Text>
</Space>
</List.Item>
)}
/>
<Space direction="vertical" className={styles.fullWidth} size="large">
<Space className={styles.topBox}>
<Space>
<Button shape="circle" type="text" onClick={() => history.goBack()}>
<ArrowLeftOutlined />
</Button>
<Typography.Text className={styles.topBoxName}>대화 상세</Typography.Text>
</Space>
</WhiteBlock>
</Block>
<Link to={`/${MENU.MESSAGE}/${conversationId}/${MENU.MESSAGE_FORM}`}>
<Button>쪽지 보내기</Button>
</Link>
</Space>
<List
itemLayout="horizontal"
dataSource={data}
renderItem={(item) => (
<List.Item>
<Space direction="vertical" className={styles.fullWidth}>
<Space className={styles.metaInfo}>
<Typography.Text className={styles.messageType}>{item.sentByStarter ? '보낸 쪽지' : '받은 쪽지'}</Typography.Text>
<Typography.Text>{dayjs(item.sentAt).format('YYYY-MM-DD HH:mm:ss')}</Typography.Text>
</Space>
<Typography.Text>{item.content}</Typography.Text>
</Space>
</List.Item>
)}
/>
</Space>
);
}
2 changes: 1 addition & 1 deletion apps/web-client/src/components/message/MessageListView.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const useStyles = createStyles(({ css }) => ({
`,
}));

export default function MessageAllListView() {
export default function MessageListView() {
const { styles } = useStyles();

return (
Expand Down
92 changes: 2 additions & 90 deletions apps/web-client/src/pages/message/MessageListPage.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,93 +1,5 @@
import { Button, List, Space, Typography } from 'antd';
import { createStyles } from 'antd-style';
import { ArrowLeftOutlined } from '@ant-design/icons';
import { Link, useHistory, useParams } from 'react-router-dom';
import { Block, WhiteBlock } from '~/styles/common/Block.styles';
import { MENU } from '~/constants/menus';

const useStyles = createStyles(({ css }) => ({
whiteBlock: css`
padding: 30px 20px;
`,
wrapper: css`
width: 100%;
max-width: 1200px;
box-sizing: border-box;
`,
fullWidth: css`
width: 100%;
`,
metaInfo: css`
justify-content: space-between;
width: 100%;
`,
messageType: css`
font-weight: 700;
`,
topBox: css`
justify-content: space-between;
align-items: center;
width: 100%;
`,
topBoxName: css`
margin-bottom: 0;
font-weight: 700;
font-size: 20px;
`,
}));
import MessageListView from '~/components/message/MessageListView';

export default function MyPageMessageListPage() {
const { styles } = useStyles();
const history = useHistory();
const { conversationId } = useParams<{ conversationId: string }>();

const data = [
{
title: 'Ant Design Title 1',
},
{
title: 'Ant Design Title 2',
},
{
title: 'Ant Design Title 3',
},
{
title: 'Ant Design Title 4',
},
];

return (
<Block>
<WhiteBlock className={styles.whiteBlock}>
<Space direction="vertical" className={styles.fullWidth} size="large">
<Space className={styles.topBox}>
<Space>
<Button shape="circle" type="text" onClick={() => history.goBack()}>
<ArrowLeftOutlined />
</Button>
<Typography.Text className={styles.topBoxName}>익명</Typography.Text>
</Space>
<Link to={`/${MENU.MESSAGE}/${conversationId}/${MENU.MESSAGE_FORM}`}>
<Button>쪽지 보내기</Button>
</Link>
</Space>
<List
itemLayout="horizontal"
dataSource={data}
renderItem={() => (
<List.Item>
<Space direction="vertical" className={styles.fullWidth}>
<Space className={styles.metaInfo}>
<Typography.Text className={styles.messageType}>받은 쪽지</Typography.Text>
<Typography.Text>2023.08.15 19:20:50</Typography.Text>
</Space>
<Typography.Text>내용내용내용</Typography.Text>
</Space>
</List.Item>
)}
/>
</Space>
</WhiteBlock>
</Block>
);
return <MessageListView />;
}

0 comments on commit 31833b8

Please sign in to comment.