From 22d9b3bdbf794cec3aedb75d937bc540717e0a47 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Tue, 6 Aug 2024 18:51:46 +0900 Subject: [PATCH 01/18] =?UTF-8?q?refactor:Chat=EA=B3=BC=20ChatBubble=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Chat/Chat.tsx | 14 +++++------ .../ChatBubble/ChatBubble.stories.tsx | 14 +++++++++++ .../components/ChatBubble/ChatBubble.style.ts | 23 +++++++++++++++++++ .../src/components/ChatBubble/ChatBubble.tsx | 20 ++++++++++++++++ 4 files changed, 64 insertions(+), 7 deletions(-) create mode 100644 frontend/src/components/ChatBubble/ChatBubble.stories.tsx create mode 100644 frontend/src/components/ChatBubble/ChatBubble.style.ts create mode 100644 frontend/src/components/ChatBubble/ChatBubble.tsx diff --git a/frontend/src/components/Chat/Chat.tsx b/frontend/src/components/Chat/Chat.tsx index cf8d4b899..7e3178fc4 100644 --- a/frontend/src/components/Chat/Chat.tsx +++ b/frontend/src/components/Chat/Chat.tsx @@ -1,23 +1,23 @@ import { chatMessageStyle, messageContainer, - messageStyle, senderStyle, timeStyle, } from './Chatstyle'; -import { Chat } from '@_types/index'; +import { Chat as ChatType } from '@_types/index'; +import { PropsWithChildren } from 'react'; import UserPreview from '@_components/UserPreview/UserPreview'; import { formatHhmmToKoreanWithPrefix } from '@_utils/formatters'; import { useTheme } from '@emotion/react'; -export interface ChatMessageProps { - chat: Chat; +export interface ChatMessageProps extends PropsWithChildren { + chat: ChatType; } export default function Chat(props: ChatMessageProps) { - const { chat } = props; - const { content, nickname, time, isMyMessage } = chat; + const { chat, children } = props; + const { nickname, time, isMyMessage } = chat; const theme = useTheme(); return (
@@ -25,7 +25,7 @@ export default function Chat(props: ChatMessageProps) {
{nickname} -
{content}
+ {children} {formatHhmmToKoreanWithPrefix(time)} diff --git a/frontend/src/components/ChatBubble/ChatBubble.stories.tsx b/frontend/src/components/ChatBubble/ChatBubble.stories.tsx new file mode 100644 index 000000000..57b1b1c65 --- /dev/null +++ b/frontend/src/components/ChatBubble/ChatBubble.stories.tsx @@ -0,0 +1,14 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import ChatBubble from './ChatBubble'; + +const meta: Meta = { + component: ChatBubble, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { isMyMessage: true, children: '안녕' }, +}; diff --git a/frontend/src/components/ChatBubble/ChatBubble.style.ts b/frontend/src/components/ChatBubble/ChatBubble.style.ts new file mode 100644 index 000000000..22baf74f6 --- /dev/null +++ b/frontend/src/components/ChatBubble/ChatBubble.style.ts @@ -0,0 +1,23 @@ +import { Theme, css } from '@emotion/react'; + +export const chatBubble = ({ + theme, + backgroundColor, + isMyMessage, +}: { + theme: Theme; + isMyMessage: boolean; + backgroundColor?: string; +}) => css` + ${theme.typography.b4}; + display: inline-block; + + max-width: 25rem; + padding: 10px; + + word-break: break-all; + + background-color: ${backgroundColor || theme.semantic.primary}; + border-radius: ${isMyMessage ? '12px' : 0} ${isMyMessage ? 0 : '12px'} 12px + 12px; +`; diff --git a/frontend/src/components/ChatBubble/ChatBubble.tsx b/frontend/src/components/ChatBubble/ChatBubble.tsx new file mode 100644 index 000000000..bf8ddf7fa --- /dev/null +++ b/frontend/src/components/ChatBubble/ChatBubble.tsx @@ -0,0 +1,20 @@ +import * as S from './ChatBubble.style'; + +import { PropsWithChildren } from 'react'; +import { useTheme } from '@emotion/react'; + +interface ChatBubbleProps extends PropsWithChildren { + isMyMessage: boolean; + backgroundColor?: string; +} + +export default function ChatBubble(props: ChatBubbleProps) { + const { isMyMessage, backgroundColor, children } = props; + const theme = useTheme(); + + return ( +
+ {children} +
+ ); +} From 99ec9fc41da052f75147204b2d77b1ad7ace7eee Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Tue, 6 Aug 2024 18:52:11 +0900 Subject: [PATCH 02/18] =?UTF-8?q?refactor:Chat=EA=B3=BC=20ChatBubble=20?= =?UTF-8?q?=EB=B6=84=EB=A6=AC?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/Chat/Chatstyle.ts | 22 ---------------------- 1 file changed, 22 deletions(-) diff --git a/frontend/src/components/Chat/Chatstyle.ts b/frontend/src/components/Chat/Chatstyle.ts index 0da416a2c..c8d2c3f42 100644 --- a/frontend/src/components/Chat/Chatstyle.ts +++ b/frontend/src/components/Chat/Chatstyle.ts @@ -25,28 +25,6 @@ export const senderStyle = ({ theme }: { theme: Theme }) => css` color:${theme.colorPalette.grey[900]}; `; -export const messageStyle = ({ - theme, - isMyMessage, -}: { - theme: Theme; - isMyMessage: boolean; -}) => css` - ${theme.typography.b4}; - display: inline-block; - - max-width: 25rem; - padding: 10px; - - word-break: break-all; - - background-color: ${isMyMessage - ? theme.colorPalette.yellow[200] - : theme.colorPalette.orange[100]}; - border-radius: ${isMyMessage ? '12px' : 0} ${isMyMessage ? 0 : '12px'} 12px - 12px; -`; - export const timeStyle = ({ theme }: { theme: Theme }) => css` ${theme.typography.c3} color:${theme.colorPalette.grey[400]}; From b78423b66841bf382c113ab612c224e56401ac82 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Tue, 6 Aug 2024 18:52:30 +0900 Subject: [PATCH 03/18] =?UTF-8?q?feat:Chat=20=ED=83=80=EC=9E=85=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 | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/frontend/src/types/index.d.ts b/frontend/src/types/index.d.ts index 21874184d..8ba64f081 100644 --- a/frontend/src/types/index.d.ts +++ b/frontend/src/types/index.d.ts @@ -50,7 +50,6 @@ export type TempMoimInputInfo = Omit< | 'authorNickname' | 'isZzimed' >; - export interface Chat { chatId: number; content: string; @@ -58,4 +57,6 @@ export interface Chat { nickname: string; date: string; time: string; + isConfirmChat: boolean; + chatType: 'BASIC' | 'PLACE' | 'DATETIME'; } From 59722c20f005c5188980bbf640306a6f4f3b0aba Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Tue, 6 Aug 2024 18:53:24 +0900 Subject: [PATCH 04/18] =?UTF-8?q?feat(ChatLIst):=20=EC=B1=84=ED=8C=85=20?= =?UTF-8?q?=ED=83=80=EC=9E=85=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EB=B6=84?= =?UTF-8?q?=EA=B8=B0=EC=B2=98=EB=A6=AC=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ChatChildren/ChatChildren.style.tsx | 6 ++ .../ChatBubble/ChatChildren/ChatChildren.tsx | 60 ++++++++++++ .../components/ChatList/ChatList.stories.tsx | 92 ++++++++++--------- frontend/src/components/ChatList/ChatList.tsx | 11 ++- 4 files changed, 122 insertions(+), 47 deletions(-) create mode 100644 frontend/src/components/ChatBubble/ChatChildren/ChatChildren.style.tsx create mode 100644 frontend/src/components/ChatBubble/ChatChildren/ChatChildren.tsx diff --git a/frontend/src/components/ChatBubble/ChatChildren/ChatChildren.style.tsx b/frontend/src/components/ChatBubble/ChatChildren/ChatChildren.style.tsx new file mode 100644 index 000000000..86baa8e51 --- /dev/null +++ b/frontend/src/components/ChatBubble/ChatChildren/ChatChildren.style.tsx @@ -0,0 +1,6 @@ +import { Theme, css } from '@emotion/react'; + +export const grey400C2 = ({ theme }: { theme: Theme }) => css` + ${theme.typography.c2} + color:${theme.colorPalette.grey[400]} +`; diff --git a/frontend/src/components/ChatBubble/ChatChildren/ChatChildren.tsx b/frontend/src/components/ChatBubble/ChatChildren/ChatChildren.tsx new file mode 100644 index 000000000..288f3bd4b --- /dev/null +++ b/frontend/src/components/ChatBubble/ChatChildren/ChatChildren.tsx @@ -0,0 +1,60 @@ +import * as S from './ChatChildren.style'; + +import { + formatHhmmToKoreanWithPrefix, + formatYyyymmddToKorean, +} from '@_utils/formatters'; + +import { Chat } from '@_types/index'; +import ChatBubble from '@_components/ChatBubble/ChatBubble'; +import { useTheme } from '@emotion/react'; + +interface ChatChildrenProps { + chat: Chat; +} +export const ChatChildren = (props: ChatChildrenProps) => { + const { chat } = props; + const theme = useTheme(); + if (chat.chatType === 'PLACE') { + return ( + +
{'장소가 확정되었습니다!'}
+
{chat.content}
+ + ); + } + if (chat.chatType === 'DATETIME') { + const [yyyymmdd, hhmm] = chat.content.split(' '); + return ( + +
+ {'날짜와 시간이 확정되었습니다!'} +
+
+ {formatYyyymmddToKorean(yyyymmdd, '-')} +
+
+ {formatHhmmToKoreanWithPrefix(hhmm, ':')} +
+ + ); + } + return ( + + {chat.content} + + ); +}; diff --git a/frontend/src/components/ChatList/ChatList.stories.tsx b/frontend/src/components/ChatList/ChatList.stories.tsx index b5e96a973..2450e6e98 100644 --- a/frontend/src/components/ChatList/ChatList.stories.tsx +++ b/frontend/src/components/ChatList/ChatList.stories.tsx @@ -14,100 +14,104 @@ export const Default: Story = { chats: [ { chatId: 1, - content: '안녕하세요! 오늘 날씨 어때요?', + content: '안녕하세요! 어떻게 지내세요?', + isMyMessage: true, nickname: '홍길동', date: '2024-08-01', time: '10:00', - isMyMessage: false, + isConfirmChat: false, + chatType: 'BASIC', }, { chatId: 2, - content: '안녕하세요! 저는 괜찮아요.', + content: '안녕하세요! 잘 지내고 있어요.', + isMyMessage: false, nickname: '김철수', date: '2024-08-01', time: '10:01', - isMyMessage: true, + isConfirmChat: true, + chatType: 'BASIC', }, { chatId: 3, - content: '요즘 어떤 일 하고 계세요?', + content: '2024-08-01 15:00', + isMyMessage: true, nickname: '홍길동', date: '2024-08-01', - time: '10:02', - isMyMessage: false, + time: '10:05', + isConfirmChat: false, + chatType: 'DATETIME', }, { chatId: 4, - content: '프로젝트 작업 중이에요.', + content: '2024-08-01 15:00', + isMyMessage: false, nickname: '김철수', date: '2024-08-01', - time: '10:03', - isMyMessage: true, + time: '10:06', + isConfirmChat: true, + chatType: 'DATETIME', }, { chatId: 5, - content: '주말에 만나서 이야기해요.', + content: '카페 A에서 만날까요?', + isMyMessage: true, nickname: '홍길동', date: '2024-08-01', - time: '10:04', - isMyMessage: false, + time: '10:10', + isConfirmChat: false, + chatType: 'PLACE', }, { chatId: 6, - content: '좋아요! 그때 봅시다.', + content: '강남역 스타벅스에서 만나는 건 어떨까요?', + isMyMessage: false, nickname: '김철수', date: '2024-08-01', - time: '10:05', - isMyMessage: true, + time: '10:12', + isConfirmChat: true, + chatType: 'PLACE', }, { chatId: 7, - content: '다음 주에 발표 준비 잘 하고 있나요?', + content: '오늘 날씨가 좋네요!', + isMyMessage: true, nickname: '홍길동', date: '2024-08-01', - time: '10:06', - isMyMessage: false, + time: '10:15', + isConfirmChat: false, + chatType: 'BASIC', }, { chatId: 8, - content: '네, 열심히 하고 있어요.', + content: '네, 정말 좋습니다!', + isMyMessage: false, nickname: '김철수', date: '2024-08-01', - time: '10:07', - isMyMessage: true, + time: '10:16', + isConfirmChat: true, + chatType: 'BASIC', }, { chatId: 9, - content: '도움 필요하면 언제든지 말해요.', + content: '2024-08-02 10:00', + isMyMessage: true, nickname: '홍길동', date: '2024-08-01', - time: '10:08', - isMyMessage: false, + time: '10:20', + isConfirmChat: false, + chatType: 'DATETIME', }, { chatId: 10, - content: '감사합니다! 도움 요청할게요.', + content: '2024-08-02 10:00', + isMyMessage: false, nickname: '김철수', date: '2024-08-01', - time: '10:09', - isMyMessage: true, - }, - { - chatId: 11, - content: '여러분~ 싸우지 마세요', - nickname: '테바', - date: '2024-08-01', - time: '12:12', - isMyMessage: false, + time: '10:21', + isConfirmChat: true, + chatType: 'DATETIME', }, ], }, - - decorators: (Story) => { - return ( -
- -
- ); - }, }; diff --git a/frontend/src/components/ChatList/ChatList.tsx b/frontend/src/components/ChatList/ChatList.tsx index 7963f26ad..39356210a 100644 --- a/frontend/src/components/ChatList/ChatList.tsx +++ b/frontend/src/components/ChatList/ChatList.tsx @@ -1,6 +1,7 @@ import { useEffect, useRef } from 'react'; import Chat from '@_components/Chat/Chat'; +import { ChatChildren } from '@_components/ChatBubble/ChatChildren/ChatChildren'; import { Chat as ChatType } from '@_types/index'; import { list } from './ChatList.style'; import { useTheme } from '@emotion/react'; @@ -21,9 +22,13 @@ export default function ChatList(props: ChatListProps) { return (
- {chats.map((chat) => ( - - ))} + {chats.map((chat) => { + return ( + + + + ); + })}
); From 63d1cf78d391d53ea851c1362b80ba41315e3639 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Tue, 6 Aug 2024 20:37:58 +0900 Subject: [PATCH 05/18] =?UTF-8?q?feat:chattingPreview=20=EC=88=98=EC=A0=95?= =?UTF-8?q?=EC=82=AC=ED=95=AD=EC=97=90=20=EB=A7=9E=EA=B2=8C=20=EA=B5=AC?= =?UTF-8?q?=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ChatBubbleSvg/ChatBubbleSvg.tsx | 22 +++++++ .../ChattingPreview.stories.tsx | 52 ++++++++++++++++- .../ChattingPreview/ChattingPreview.style.ts | 57 ++++++++++++++++++- .../ChattingPreview/ChattingPreview.tsx | 48 +++++++++++----- .../ChattingPreviewWrapper.tsx | 24 -------- .../UserPreviewList/UserPreviewList.style.ts | 2 +- frontend/src/constants/poclies.ts | 1 + frontend/src/pages/ChatPage/ChatPage.tsx | 23 +++----- frontend/src/types/index.d.ts | 9 +++ 9 files changed, 183 insertions(+), 55 deletions(-) create mode 100644 frontend/src/components/ChatBubbleSvg/ChatBubbleSvg.tsx delete mode 100644 frontend/src/components/ChattingPreviewWrapper/ChattingPreviewWrapper.tsx diff --git a/frontend/src/components/ChatBubbleSvg/ChatBubbleSvg.tsx b/frontend/src/components/ChatBubbleSvg/ChatBubbleSvg.tsx new file mode 100644 index 000000000..e2bde649d --- /dev/null +++ b/frontend/src/components/ChatBubbleSvg/ChatBubbleSvg.tsx @@ -0,0 +1,22 @@ +interface ChatBubbleSvgProps { + color?: string; +} + +export default function ChatBubbleSvg(props: ChatBubbleSvgProps) { + const { color } = props; + + return ( + + + + ); +} diff --git a/frontend/src/components/ChattingPreview/ChattingPreview.stories.tsx b/frontend/src/components/ChattingPreview/ChattingPreview.stories.tsx index 6f8149b8b..fffed60bc 100644 --- a/frontend/src/components/ChattingPreview/ChattingPreview.stories.tsx +++ b/frontend/src/components/ChattingPreview/ChattingPreview.stories.tsx @@ -9,6 +9,54 @@ const meta: Meta = { export default meta; type Story = StoryObj; -export const Default: Story = { - args: {}, +export const NoContent: Story = { + args: { + chatPreview: { + moimId: 3, + title: '운동 모임', + currentPeople: 10, + beforeMoim: true, + lastContent: '', + unreadContentCount: 0, + }, + }, +}; + +export const HasContent: Story = { + args: { + chatPreview: { + moimId: 2, + title: '독서 클럽', + currentPeople: 8, + beforeMoim: true, + lastContent: '이번 주 독서 토론은 어떤 책으로 할까요?', + unreadContentCount: 1, + }, + }, +}; + +export const Over300UnreadMessage: Story = { + args: { + chatPreview: { + moimId: 2, + title: '독서 클럽', + currentPeople: 8, + beforeMoim: true, + lastContent: '이번 주 독서 토론은 어떤 책으로 할까요?', + unreadContentCount: 301, + }, + }, +}; + +export const AfterMoim: Story = { + args: { + chatPreview: { + moimId: 2, + title: '독서 클럽', + currentPeople: 8, + beforeMoim: false, + lastContent: '이번 주 독서 토론은 어떤 책으로 할까요?', + unreadContentCount: 1, + }, + }, }; diff --git a/frontend/src/components/ChattingPreview/ChattingPreview.style.ts b/frontend/src/components/ChattingPreview/ChattingPreview.style.ts index 961937200..cc94b774e 100644 --- a/frontend/src/components/ChattingPreview/ChattingPreview.style.ts +++ b/frontend/src/components/ChattingPreview/ChattingPreview.style.ts @@ -1,6 +1,12 @@ import { Theme, css } from '@emotion/react'; -export const container = css` +export const container = ({ + beforeMoim, + theme, +}: { + beforeMoim: boolean; + theme: Theme; +}) => css` display: flex; align-items: center; justify-content: space-between; @@ -9,16 +15,65 @@ export const container = css` height: 10rem; padding: 2rem; + border: 0.3rem solid; + border-color: ${beforeMoim + ? theme.colorPalette.orange[100] + : theme.colorPalette.yellow[100]}; border-radius: 25px; box-shadow: 0 0 10px 0 #00000040; `; +export const titleContainer = css` + display: flex; + gap: 1rem; + align-items: center; +`; + +export const tag = ({ + theme, + beforeMoim, +}: { + theme: Theme; + beforeMoim: boolean; +}) => css` + ${theme.typography.small} + display: flex; + align-items: center; + justify-content: center; + + height: 24px; + padding: 0.2rem 0.6rem; + + color: ${beforeMoim + ? theme.colorPalette.white[100] + : theme.colorPalette.yellow[800]}; + + background-color: ${beforeMoim + ? theme.colorPalette.orange[100] + : theme.colorPalette.yellow[50]}; + border-radius: 1rem; +`; + +export const messageContainer = css` + display: flex; + flex-direction: column; + gap: 0.4rem; + justify-content: space-evenly; +`; + export const peopleContainer = css` display: flex; flex-direction: column; align-items: flex-end; `; +export const unreadContentContainer = css` + display: flex; + flex-direction: row; + gap: 0.5rem; + align-items: flex-start; +`; + export const smallGrey400 = ({ theme }: { theme: Theme }) => css` ${theme.typography.small} color:${theme.colorPalette.grey[400]} diff --git a/frontend/src/components/ChattingPreview/ChattingPreview.tsx b/frontend/src/components/ChattingPreview/ChattingPreview.tsx index 3764f8cdc..52c1ced57 100644 --- a/frontend/src/components/ChattingPreview/ChattingPreview.tsx +++ b/frontend/src/components/ChattingPreview/ChattingPreview.tsx @@ -1,41 +1,63 @@ import { container, + messageContainer, peopleContainer, smallGrey400, + tag, + titleContainer, + unreadContentContainer, } from './ChattingPreview.style'; -import { MoimInfo } from '@_types/index'; +import ChatBubbleSvg from '@_components/ChatBubbleSvg/ChatBubbleSvg'; +import { ChattingPreview as ChattingPreviewType } from '@_types/index'; +import POLICES from '@_constants/poclies'; import UserPreviewList from '@_components/UserPreviewList/UserPreviewList'; import { useMemo } from 'react'; import { useTheme } from '@emotion/react'; interface ChattingPreviewProps { - moim: MoimInfo; - lastChat?: string; + chatPreview: ChattingPreviewType; onClick: () => void; } export default function ChattingPreview(props: ChattingPreviewProps) { - const { lastChat, moim, onClick } = props; + const { chatPreview, onClick } = props; + const { title, beforeMoim, lastContent, unreadContentCount, currentPeople } = + chatPreview; const theme = useTheme(); const imageUrls = useMemo( - () => new Array(moim.currentPeople + 1).fill(''), + () => new Array(chatPreview.currentPeople + 1).fill(''), // TODO:participation.profile 구현되면 아래 코드로 변경 // () => moim.participants.map((participation) => participation.profile), - [moim], + [chatPreview.currentPeople], ); return ( -
-
-

{moim.title}

- {lastChat && {lastChat}} +
+
+
+

{title}

+
+ {beforeMoim ? '모임 전' : '모임 후'} +
+
+ {lastContent && ( + {lastContent} + )} + {unreadContentCount > 0 && ( +
+ + + {unreadContentCount > POLICES.maxUnreadMessageCount + ? POLICES.maxUnreadMessageCount + '+' + : unreadContentCount} + +
+ )}
- {`${moim.currentPeople + 1}명`} + {`${currentPeople + 1}명`}
diff --git a/frontend/src/components/ChattingPreviewWrapper/ChattingPreviewWrapper.tsx b/frontend/src/components/ChattingPreviewWrapper/ChattingPreviewWrapper.tsx deleted file mode 100644 index 489dad432..000000000 --- a/frontend/src/components/ChattingPreviewWrapper/ChattingPreviewWrapper.tsx +++ /dev/null @@ -1,24 +0,0 @@ -import ChattingPreview from '@_components/ChattingPreview/ChattingPreview'; -import { MoimInfo } from '@_types/index'; -import useChats from '@_hooks/queries/useChat'; - -interface ChattingPreviewWrapperProps { - moim: MoimInfo; - onClick: () => void; -} - -export default function ChattingPreviewWrapper( - props: ChattingPreviewWrapperProps, -) { - const { moim, onClick } = props; - const { chats, isLoading } = useChats(moim.moimId); - return isLoading ? ( - <> - ) : ( - - ); -} diff --git a/frontend/src/components/UserPreviewList/UserPreviewList.style.ts b/frontend/src/components/UserPreviewList/UserPreviewList.style.ts index aebfc3a73..af169e752 100644 --- a/frontend/src/components/UserPreviewList/UserPreviewList.style.ts +++ b/frontend/src/components/UserPreviewList/UserPreviewList.style.ts @@ -7,7 +7,7 @@ export const list = ({ size, length }: { size: string; length: number }) => css` flex-direction: row; align-items: center; - width: calc(${size}*${0.5 + 0.5 * length}); + width: calc(${size}*${0.5 + 0.5 * Math.min(length, 3)}); & > div:first-child { z-index: 3; diff --git a/frontend/src/constants/poclies.ts b/frontend/src/constants/poclies.ts index 295352c54..3947b5c3b 100644 --- a/frontend/src/constants/poclies.ts +++ b/frontend/src/constants/poclies.ts @@ -15,6 +15,7 @@ const POLICES = { hhmmRegex: /^([01]\d|2[0-3]):([0-5]\d)$/, maxMessageLength: 10000, + maxUnreadMessageCount: 300, }; export default POLICES; diff --git a/frontend/src/pages/ChatPage/ChatPage.tsx b/frontend/src/pages/ChatPage/ChatPage.tsx index 5480f4bfb..b02323a3d 100644 --- a/frontend/src/pages/ChatPage/ChatPage.tsx +++ b/frontend/src/pages/ChatPage/ChatPage.tsx @@ -1,16 +1,15 @@ import ChattingPreviewLayout from '@_layouts/ChattingPreviewLayout/ChattingPreviewLayout'; -import ChattingPreviewWrapper from '@_components/ChattingPreviewWrapper/ChattingPreviewWrapper'; -import useMyMoims from '@_hooks/queries/useMyMoim'; -import { useNavigate } from 'react-router-dom'; - -import { useTheme } from '@emotion/react'; import NavigationBar from '@_components/NavigationBar/NavigationBar'; import NavigationBarWrapper from '@_layouts/components/NavigationBarWrapper/NavigationBarWrapper'; +import { useTheme } from '@emotion/react'; + +// import useMyMoims from '@_hooks/queries/useMyMoim'; +// import { useNavigate } from 'react-router-dom'; export default function ChatPage() { const theme = useTheme(); - const { moims, isLoading } = useMyMoims(); - const navigate = useNavigate(); + // const { moims, isLoading } = useMyMoims(); + // const navigate = useNavigate(); return ( @@ -19,14 +18,10 @@ export default function ChatPage() { - {!isLoading && + {/* {!isLoading && moims?.map((moim, id) => ( - navigate(`/chatting-room/${moim.moimId}`)} - /> - ))} + + ))} */} diff --git a/frontend/src/types/index.d.ts b/frontend/src/types/index.d.ts index 8ba64f081..f3e8dd5b8 100644 --- a/frontend/src/types/index.d.ts +++ b/frontend/src/types/index.d.ts @@ -50,6 +50,15 @@ export type TempMoimInputInfo = Omit< | 'authorNickname' | 'isZzimed' >; + +export interface ChattingPreview { + moimId: number; + title: string; + currentPeople: number; + beforeMoim: boolean; + lastContent: string; + unreadContentCount: number; +} export interface Chat { chatId: number; content: string; From 0c202f4f78d0c2dbed0e0a5e936373eb8f443c81 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 7 Aug 2024 14:40:42 +0900 Subject: [PATCH 06/18] =?UTF-8?q?fix:=20coloredTypography=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/common/theme/coloredTypography.ts | 4 +- frontend/src/common/theme/theme.style.ts | 6 ++- frontend/src/common/theme/theme.type.ts | 53 ++++++++++--------- frontend/src/emotion.d.ts | 7 ++- 4 files changed, 39 insertions(+), 31 deletions(-) diff --git a/frontend/src/common/theme/coloredTypography.ts b/frontend/src/common/theme/coloredTypography.ts index 986ba61e8..f7b288591 100644 --- a/frontend/src/common/theme/coloredTypography.ts +++ b/frontend/src/common/theme/coloredTypography.ts @@ -1,13 +1,13 @@ import { ColoredTypography, Typography } from './theme.type'; +import { SerializedStyles, css } from '@emotion/react'; import { Entries } from '@_types/index'; -import { css } from '@emotion/react'; import typography from './typography'; const coloredTypography: ColoredTypography = ( Object.entries(typography) as Entries ).reduce((object, [key, style]) => { - object[key] = (fontColor: string) => { + object[key] = (fontColor: string | SerializedStyles) => { return css` ${style} color:${fontColor}; diff --git a/frontend/src/common/theme/theme.style.ts b/frontend/src/common/theme/theme.style.ts index 7ec338c03..3109cbb1f 100644 --- a/frontend/src/common/theme/theme.style.ts +++ b/frontend/src/common/theme/theme.style.ts @@ -1,12 +1,14 @@ import { Theme } from './theme.type'; -import typography from './typography'; import colorPalette from './colorPalette'; -import semantic from './semantic'; +import coloredTypography from './coloredTypography'; import layout from './layout'; +import semantic from './semantic'; +import typography from './typography'; export const theme: Theme = { colorPalette, typography, semantic, layout, + coloredTypography, }; diff --git a/frontend/src/common/theme/theme.type.ts b/frontend/src/common/theme/theme.type.ts index 9970743c2..c8823d499 100644 --- a/frontend/src/common/theme/theme.type.ts +++ b/frontend/src/common/theme/theme.type.ts @@ -11,9 +11,9 @@ export interface Colors { } export interface Semantic { - primary: string; - secondary: string; - disabled: string; + primary: string | SerializedStyles; + secondary: string | SerializedStyles; + disabled: string | SerializedStyles; } export interface Typography { @@ -43,29 +43,29 @@ export interface Typography { } export interface ColoredTypography { - h1: (fontColor: string) => SerializedStyles; - h2: (fontColor: string) => SerializedStyles; - h3: (fontColor: string) => SerializedStyles; - h4: (fontColor: string) => SerializedStyles; - h5: (fontColor: string) => SerializedStyles; - s1: (fontColor: string) => SerializedStyles; - s2: (fontColor: string) => SerializedStyles; - b1: (fontColor: string) => SerializedStyles; - b2: (fontColor: string) => SerializedStyles; - b3: (fontColor: string) => SerializedStyles; - b4: (fontColor: string) => SerializedStyles; - c1: (fontColor: string) => SerializedStyles; - c2: (fontColor: string) => SerializedStyles; - c3: (fontColor: string) => SerializedStyles; - label: (fontColor: string) => SerializedStyles; - ButtonFont: (fontColor: string) => SerializedStyles; - Typeface: (fontColor: string) => SerializedStyles; - Giant: (fontColor: string) => SerializedStyles; - Large: (fontColor: string) => SerializedStyles; - Medium: (fontColor: string) => SerializedStyles; - small: (fontColor: string) => SerializedStyles; - Tiny: (fontColor: string) => SerializedStyles; - tag: (fontColor: string) => SerializedStyles; + h1: (fontColor: string | SerializedStyles) => SerializedStyles; + h2: (fontColor: string | SerializedStyles) => SerializedStyles; + h3: (fontColor: string | SerializedStyles) => SerializedStyles; + h4: (fontColor: string | SerializedStyles) => SerializedStyles; + h5: (fontColor: string | SerializedStyles) => SerializedStyles; + s1: (fontColor: string | SerializedStyles) => SerializedStyles; + s2: (fontColor: string | SerializedStyles) => SerializedStyles; + b1: (fontColor: string | SerializedStyles) => SerializedStyles; + b2: (fontColor: string | SerializedStyles) => SerializedStyles; + b3: (fontColor: string | SerializedStyles) => SerializedStyles; + b4: (fontColor: string | SerializedStyles) => SerializedStyles; + c1: (fontColor: string | SerializedStyles) => SerializedStyles; + c2: (fontColor: string | SerializedStyles) => SerializedStyles; + c3: (fontColor: string | SerializedStyles) => SerializedStyles; + label: (fontColor: string | SerializedStyles) => SerializedStyles; + ButtonFont: (fontColor: string | SerializedStyles) => SerializedStyles; + Typeface: (fontColor: string | SerializedStyles) => SerializedStyles; + Giant: (fontColor: string | SerializedStyles) => SerializedStyles; + Large: (fontColor: string | SerializedStyles) => SerializedStyles; + Medium: (fontColor: string | SerializedStyles) => SerializedStyles; + small: (fontColor: string | SerializedStyles) => SerializedStyles; + Tiny: (fontColor: string | SerializedStyles) => SerializedStyles; + tag: (fontColor: string | SerializedStyles) => SerializedStyles; } export interface Layout { default: SerializedStyles; @@ -76,4 +76,5 @@ export interface Theme { typography: Typography; semantic: Semantic; layout: Layout; + coloredTypography: ColoredTypography; } diff --git a/frontend/src/emotion.d.ts b/frontend/src/emotion.d.ts index 6512b0b09..3878252a1 100644 --- a/frontend/src/emotion.d.ts +++ b/frontend/src/emotion.d.ts @@ -1,4 +1,8 @@ -import { Colors, Typography } from '@_common/theme/theme.type'; +import { + ColoredTypography, + Colors, + Typography, +} from '@_common/theme/theme.type'; declare module '@emotion/react' { export interface Theme { @@ -6,5 +10,6 @@ declare module '@emotion/react' { typography: Typography; semantic: Semantic; layout: Layout; + coloredTypography: ColoredTypography; } } From 50473c9343a424597b3c1db1d280d13e4ce93564 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 7 Aug 2024 14:41:01 +0900 Subject: [PATCH 07/18] =?UTF-8?q?feat:=20ChatMenuItem=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ChatMenuItem/ChatMenuItem.stories.tsx | 15 +++++++++++ .../ChatMenuItem/ChatMenuItem.style.ts | 25 +++++++++++++++++++ .../components/ChatMenuItem/ChatMenuItem.tsx | 24 ++++++++++++++++++ 3 files changed, 64 insertions(+) create mode 100644 frontend/src/components/ChatMenuItem/ChatMenuItem.stories.tsx create mode 100644 frontend/src/components/ChatMenuItem/ChatMenuItem.style.ts create mode 100644 frontend/src/components/ChatMenuItem/ChatMenuItem.tsx diff --git a/frontend/src/components/ChatMenuItem/ChatMenuItem.stories.tsx b/frontend/src/components/ChatMenuItem/ChatMenuItem.stories.tsx new file mode 100644 index 000000000..f583f3d94 --- /dev/null +++ b/frontend/src/components/ChatMenuItem/ChatMenuItem.stories.tsx @@ -0,0 +1,15 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import ChatMenuItem from './ChatMenuItem'; +import Plus from '@_common/assets/plus.svg'; + +const meta: Meta = { + component: ChatMenuItem, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { icon: , description: '더하기' }, +}; diff --git a/frontend/src/components/ChatMenuItem/ChatMenuItem.style.ts b/frontend/src/components/ChatMenuItem/ChatMenuItem.style.ts new file mode 100644 index 000000000..61ba87944 --- /dev/null +++ b/frontend/src/components/ChatMenuItem/ChatMenuItem.style.ts @@ -0,0 +1,25 @@ +import { Theme, css } from '@emotion/react'; + +export const item = css` + display: flex; + flex-direction: column; + align-items: center; + + width: 7.5rem; + height: 8rem; +`; + +export const button = ({ theme }: { theme: Theme }) => { + return css` + display: flex; + align-items: center; + justify-content: space-evenly; + + width: 5.6rem; + height: 5.6rem; + + background-color: ${theme.colorPalette.orange[50]}; + border: ${theme.colorPalette.orange[300]} 0.2rem solid; + border-radius: 15%; + `; +}; diff --git a/frontend/src/components/ChatMenuItem/ChatMenuItem.tsx b/frontend/src/components/ChatMenuItem/ChatMenuItem.tsx new file mode 100644 index 000000000..69e1c7d1c --- /dev/null +++ b/frontend/src/components/ChatMenuItem/ChatMenuItem.tsx @@ -0,0 +1,24 @@ +import * as S from './ChatMenuItem.style'; + +import { PropsWithChildren, ReactNode } from 'react'; + +import { useTheme } from '@emotion/react'; + +interface ChatMenuItemProps extends PropsWithChildren { + icon: ReactNode; + description: string; +} + +export default function ChatMenuItem(props: ChatMenuItemProps) { + const { icon, description } = props; + const theme = useTheme(); + + return ( +
+
{icon}
+ + {description} + +
+ ); +} From c7503e3ab2d57eb7161afca993c567836c67e6a1 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 7 Aug 2024 14:41:11 +0900 Subject: [PATCH 08/18] =?UTF-8?q?feat:ChatBottomMenu=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ChatBottomMenu/ChatBottomMenu.stories.tsx | 41 +++++++++++++++++++ .../ChatBottomMenu/ChatBottomMenu.style.ts | 11 +++++ .../ChatBottomMenu/ChatBottomMenu.tsx | 11 +++++ 3 files changed, 63 insertions(+) create mode 100644 frontend/src/components/ChatBottomMenu/ChatBottomMenu.stories.tsx create mode 100644 frontend/src/components/ChatBottomMenu/ChatBottomMenu.style.ts create mode 100644 frontend/src/components/ChatBottomMenu/ChatBottomMenu.tsx diff --git a/frontend/src/components/ChatBottomMenu/ChatBottomMenu.stories.tsx b/frontend/src/components/ChatBottomMenu/ChatBottomMenu.stories.tsx new file mode 100644 index 000000000..9dd32aaaf --- /dev/null +++ b/frontend/src/components/ChatBottomMenu/ChatBottomMenu.stories.tsx @@ -0,0 +1,41 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import ChatBottomMenu from './ChatBottomMenu'; +import ChatMenuItem from '@_components/ChatMenuItem/ChatMenuItem'; +import { Fragment } from 'react'; +import Plus from '@_common/assets/plus.svg'; +import { css } from '@emotion/react'; + +const meta: Meta = { + component: ChatBottomMenu, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: { + children: ( + + } description="더하기" /> + } description="더하기" /> + } description="더하기" /> + } description="더하기" /> + } description="더하기" /> + } description="더하기" /> + } description="더하기" /> + } description="더하기" /> + } description="더하기" /> + + ), + }, + decorators: (Story) => ( +
+ +
+ ), +}; diff --git a/frontend/src/components/ChatBottomMenu/ChatBottomMenu.style.ts b/frontend/src/components/ChatBottomMenu/ChatBottomMenu.style.ts new file mode 100644 index 000000000..62f692617 --- /dev/null +++ b/frontend/src/components/ChatBottomMenu/ChatBottomMenu.style.ts @@ -0,0 +1,11 @@ +import { Theme, css } from '@emotion/react'; + +export const menu = ({ theme }: { theme: Theme }) => css` + display: flex; + flex-wrap: wrap; + gap: 2rem; + + width: 100%; + + background-color: ${theme.colorPalette.white[100]}; +`; diff --git a/frontend/src/components/ChatBottomMenu/ChatBottomMenu.tsx b/frontend/src/components/ChatBottomMenu/ChatBottomMenu.tsx new file mode 100644 index 000000000..56c9d5ef1 --- /dev/null +++ b/frontend/src/components/ChatBottomMenu/ChatBottomMenu.tsx @@ -0,0 +1,11 @@ +import * as S from './ChatBottomMenu.style'; + +import { PropsWithChildren } from 'react'; +import { useTheme } from '@emotion/react'; + +export default function ChatBottomMenu(props: PropsWithChildren) { + const { children } = props; + const theme = useTheme(); + + return
{children}
; +} From 4f7d70e3cfc8b27f0c4b643116eb4b9a5d20fdd6 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 7 Aug 2024 14:51:55 +0900 Subject: [PATCH 09/18] =?UTF-8?q?feat:=20=EC=B1=84=ED=8C=85=EB=A9=94?= =?UTF-8?q?=EB=89=B4=EC=97=90=20=EB=93=A4=EC=96=B4=EA=B0=88=20=EC=95=84?= =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/Icons/CalenderClock.tsx | 35 +++++++++++++++++++ frontend/src/components/Icons/Picker.tsx | 25 +++++++++++++ 2 files changed, 60 insertions(+) create mode 100644 frontend/src/components/Icons/CalenderClock.tsx create mode 100644 frontend/src/components/Icons/Picker.tsx diff --git a/frontend/src/components/Icons/CalenderClock.tsx b/frontend/src/components/Icons/CalenderClock.tsx new file mode 100644 index 000000000..38f7b997c --- /dev/null +++ b/frontend/src/components/Icons/CalenderClock.tsx @@ -0,0 +1,35 @@ +import { useTheme } from '@emotion/react'; + +interface CalenderClockProps { + color?: string; +} + +export default function CalenderClock(props: CalenderClockProps) { + const { color } = props; + const theme = useTheme(); + + return ( + + + + + + ); +} diff --git a/frontend/src/components/Icons/Picker.tsx b/frontend/src/components/Icons/Picker.tsx new file mode 100644 index 000000000..0274303c6 --- /dev/null +++ b/frontend/src/components/Icons/Picker.tsx @@ -0,0 +1,25 @@ +import { useTheme } from '@emotion/react'; + +interface PickerProps { + color?: string; +} + +export default function Picker(props: PickerProps) { + const { color } = props; + const theme = useTheme(); + + return ( + + + + ); +} From 352e13d5c8f4fe7703f968d910f27a218c996cb5 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 7 Aug 2024 16:07:26 +0900 Subject: [PATCH 10/18] =?UTF-8?q?fix:=20=EC=9D=B8=ED=84=B0=ED=8E=98?= =?UTF-8?q?=EC=9D=B4=EC=8A=A4=20=EB=B3=80=EA=B2=BD=EC=9C=BC=EB=A1=9C=20?= =?UTF-8?q?=EC=9D=B8=ED=95=9C=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20arg?= =?UTF-8?q?s=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/Chat/Chat.stories.tsx | 2 ++ .../ChatBottomMenu/ChatBottomMenu.stories.tsx | 26 ++++++++++++-- .../ChattingRoomLayout.stories.tsx | 35 ++++++++++++------- 3 files changed, 49 insertions(+), 14 deletions(-) diff --git a/frontend/src/components/Chat/Chat.stories.tsx b/frontend/src/components/Chat/Chat.stories.tsx index 5814ee268..8027331db 100644 --- a/frontend/src/components/Chat/Chat.stories.tsx +++ b/frontend/src/components/Chat/Chat.stories.tsx @@ -17,6 +17,8 @@ export const Default: Story = { nickname: '테바', date: '2024-08-01', time: '12:12', + isConfirmChat: true, + chatType: 'BASIC', isMyMessage: false, }, }, diff --git a/frontend/src/components/ChatBottomMenu/ChatBottomMenu.stories.tsx b/frontend/src/components/ChatBottomMenu/ChatBottomMenu.stories.tsx index 9dd32aaaf..79f3e851b 100644 --- a/frontend/src/components/ChatBottomMenu/ChatBottomMenu.stories.tsx +++ b/frontend/src/components/ChatBottomMenu/ChatBottomMenu.stories.tsx @@ -12,17 +12,39 @@ const meta: Meta = { export default meta; type Story = StoryObj; - -export const Default: Story = { +export const Two: Story = { args: { children: ( } description="더하기" /> } description="더하기" /> + + ), + }, + decorators: (Story) => ( +
+ +
+ ), +}; + +export const Nine: Story = { + args: { + children: ( + + } description="더하기" /> } description="더하기" /> } description="더하기" /> } description="더하기" /> } description="더하기" /> + } + description="더하기rrrrrrrrrrrrrrrrrrrrrrrrrrrrrr" + /> } description="더하기" /> } description="더하기" /> } description="더하기" /> diff --git a/frontend/src/layouts/ChattingRoomLayout/ChattingRoomLayout.stories.tsx b/frontend/src/layouts/ChattingRoomLayout/ChattingRoomLayout.stories.tsx index 2bd4754b5..6d38865ca 100644 --- a/frontend/src/layouts/ChattingRoomLayout/ChattingRoomLayout.stories.tsx +++ b/frontend/src/layouts/ChattingRoomLayout/ChattingRoomLayout.stories.tsx @@ -1,5 +1,6 @@ import type { Meta, StoryObj } from '@storybook/react'; +import { Chat } from '@_types/index'; import ChatList from '@_components/ChatList/ChatList'; import ChattingFooter from '@_components/ChattingFooter/ChattingFooter'; import ChattingRoomLayout from './ChattingRoomLayout'; @@ -11,11 +12,12 @@ const meta: Meta = { export default meta; type Story = StoryObj; -const chats = [ +const chats: Chat[] = [ { chatId: 1, content: '안녕하세요! 오늘 날씨 어때요?', - memberId: 101, + isConfirmChat: false, + chatType: 'BASIC', nickname: '홍길동', date: '2024-08-01', time: '10:00', @@ -24,7 +26,8 @@ const chats = [ { chatId: 2, content: '안녕하세요! 저는 괜찮아요.', - memberId: 102, + isConfirmChat: false, + chatType: 'BASIC', nickname: '김철수', date: '2024-08-01', time: '10:01', @@ -33,7 +36,8 @@ const chats = [ { chatId: 3, content: '요즘 어떤 일 하고 계세요?', - memberId: 101, + isConfirmChat: false, + chatType: 'BASIC', nickname: '홍길동', date: '2024-08-01', time: '10:02', @@ -42,7 +46,8 @@ const chats = [ { chatId: 4, content: '프로젝트 작업 중이에요.', - memberId: 102, + isConfirmChat: false, + chatType: 'BASIC', nickname: '김철수', date: '2024-08-01', time: '10:03', @@ -51,7 +56,8 @@ const chats = [ { chatId: 5, content: '주말에 만나서 이야기해요.', - memberId: 101, + isConfirmChat: false, + chatType: 'BASIC', nickname: '홍길동', date: '2024-08-01', time: '10:04', @@ -60,7 +66,8 @@ const chats = [ { chatId: 6, content: '좋아요! 그때 봅시다.', - memberId: 102, + isConfirmChat: false, + chatType: 'BASIC', nickname: '김철수', date: '2024-08-01', time: '10:05', @@ -69,7 +76,8 @@ const chats = [ { chatId: 7, content: '다음 주에 발표 준비 잘 하고 있나요?', - memberId: 101, + isConfirmChat: false, + chatType: 'BASIC', nickname: '홍길동', date: '2024-08-01', time: '10:06', @@ -78,7 +86,8 @@ const chats = [ { chatId: 8, content: '네, 열심히 하고 있어요.', - memberId: 102, + isConfirmChat: false, + chatType: 'BASIC', nickname: '김철수', date: '2024-08-01', time: '10:07', @@ -87,7 +96,8 @@ const chats = [ { chatId: 9, content: '도움 필요하면 언제든지 말해요.', - memberId: 101, + isConfirmChat: false, + chatType: 'BASIC', nickname: '홍길동', date: '2024-08-01', time: '10:08', @@ -96,7 +106,8 @@ const chats = [ { chatId: 10, content: '감사합니다! 도움 요청할게요.', - memberId: 102, + isConfirmChat: false, + chatType: 'BASIC', nickname: '김철수', date: '2024-08-01', time: '10:09', @@ -121,7 +132,7 @@ export const Default: Story = { - {}} /> + {}} onMenuClick={() => {}} />
From 0240a7180b1238092bb61e3579bf82c6076d4441 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 7 Aug 2024 16:08:05 +0900 Subject: [PATCH 11/18] =?UTF-8?q?test(ChatMenuItem):=EC=8A=A4=ED=86=A0?= =?UTF-8?q?=EB=A6=AC=EB=B6=81=20=ED=85=8C=EC=8A=A4=ED=8A=B8=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/components/ChatMenuItem/ChatMenuItem.stories.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/frontend/src/components/ChatMenuItem/ChatMenuItem.stories.tsx b/frontend/src/components/ChatMenuItem/ChatMenuItem.stories.tsx index f583f3d94..756e6c732 100644 --- a/frontend/src/components/ChatMenuItem/ChatMenuItem.stories.tsx +++ b/frontend/src/components/ChatMenuItem/ChatMenuItem.stories.tsx @@ -13,3 +13,7 @@ type Story = StoryObj; export const Default: Story = { args: { icon: , description: '더하기' }, }; + +export const LineBreak: Story = { + args: { icon: , description: '더하기기기기기ㅣ기기기기ㅣ기' }, +}; From 4a1287274729306c83d3c642bf951ab3a9bb41d5 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 7 Aug 2024 16:08:28 +0900 Subject: [PATCH 12/18] =?UTF-8?q?feat:=20=EC=B1=84=ED=8C=85=EB=B0=A9?= =?UTF-8?q?=EC=9D=98=20=ED=95=98=EB=8B=A8=20=EB=A9=94=EB=89=B4=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 --- .../ChatBottomMenu/ChatBottomMenu.style.ts | 2 ++ .../ChatMenuItem/ChatMenuItem.style.ts | 11 +++++--- .../components/ChatMenuItem/ChatMenuItem.tsx | 19 ++++++++----- .../ChattingFooter/ChattingFooter.tsx | 8 ++++-- .../ChattingRoomPage/ChattingRoomPage.tsx | 27 ++++++++++++++++--- 5 files changed, 52 insertions(+), 15 deletions(-) diff --git a/frontend/src/components/ChatBottomMenu/ChatBottomMenu.style.ts b/frontend/src/components/ChatBottomMenu/ChatBottomMenu.style.ts index 62f692617..d493bdfbf 100644 --- a/frontend/src/components/ChatBottomMenu/ChatBottomMenu.style.ts +++ b/frontend/src/components/ChatBottomMenu/ChatBottomMenu.style.ts @@ -6,6 +6,8 @@ export const menu = ({ theme }: { theme: Theme }) => css` gap: 2rem; width: 100%; + min-height: 40vh; + padding: 2rem; background-color: ${theme.colorPalette.white[100]}; `; diff --git a/frontend/src/components/ChatMenuItem/ChatMenuItem.style.ts b/frontend/src/components/ChatMenuItem/ChatMenuItem.style.ts index 61ba87944..a98ebfbdb 100644 --- a/frontend/src/components/ChatMenuItem/ChatMenuItem.style.ts +++ b/frontend/src/components/ChatMenuItem/ChatMenuItem.style.ts @@ -4,9 +4,7 @@ export const item = css` display: flex; flex-direction: column; align-items: center; - - width: 7.5rem; - height: 8rem; + width: 7rem; `; export const button = ({ theme }: { theme: Theme }) => { @@ -23,3 +21,10 @@ export const button = ({ theme }: { theme: Theme }) => { border-radius: 15%; `; }; + +export const textBox = css` + user-select: none; + width: 100%; + text-align: center; + word-break: keep-all; +`; diff --git a/frontend/src/components/ChatMenuItem/ChatMenuItem.tsx b/frontend/src/components/ChatMenuItem/ChatMenuItem.tsx index 69e1c7d1c..c43388ebe 100644 --- a/frontend/src/components/ChatMenuItem/ChatMenuItem.tsx +++ b/frontend/src/components/ChatMenuItem/ChatMenuItem.tsx @@ -1,24 +1,29 @@ import * as S from './ChatMenuItem.style'; -import { PropsWithChildren, ReactNode } from 'react'; - +import { ReactNode } from 'react'; import { useTheme } from '@emotion/react'; -interface ChatMenuItemProps extends PropsWithChildren { +interface ChatMenuItemProps { icon: ReactNode; description: string; + onClick?: () => void; } export default function ChatMenuItem(props: ChatMenuItemProps) { - const { icon, description } = props; + const { icon, description, onClick } = props; const theme = useTheme(); return ( -
+
{icon}
- +
{description} - +
); } diff --git a/frontend/src/components/ChattingFooter/ChattingFooter.tsx b/frontend/src/components/ChattingFooter/ChattingFooter.tsx index d42b825c6..f5f5ab7f8 100644 --- a/frontend/src/components/ChattingFooter/ChattingFooter.tsx +++ b/frontend/src/components/ChattingFooter/ChattingFooter.tsx @@ -14,11 +14,12 @@ import X from '@_common/assets/x.svg'; import { useTheme } from '@emotion/react'; interface ChattingFooterProps { + onMenuClick: () => void; onSubmit: (message: string) => void; } export default function ChattingFooter(props: ChattingFooterProps) { - const { onSubmit } = props; + const { onSubmit, onMenuClick } = props; const [isMenuClicked, setIsMenuClicked] = useState(false); const [message, setMessage] = useState(''); const theme = useTheme(); @@ -30,7 +31,10 @@ export default function ChattingFooter(props: ChattingFooterProps) { 필요한 점: 테마 적용(백그라운드 컬러 설정 어려움)+disabled를 optional로 주기 */} diff --git a/frontend/src/pages/ChattingRoomPage/ChattingRoomPage.tsx b/frontend/src/pages/ChattingRoomPage/ChattingRoomPage.tsx index 5961ae0b7..43277d6b1 100644 --- a/frontend/src/pages/ChattingRoomPage/ChattingRoomPage.tsx +++ b/frontend/src/pages/ChattingRoomPage/ChattingRoomPage.tsx @@ -1,19 +1,24 @@ +import { useMemo, useState } from 'react'; import { useNavigate, useParams } from 'react-router-dom'; import Back from '@_common/assets/back.svg'; +import CalenderClock from '@_components/Icons/CalenderClock'; +import ChatBottomMenu from '@_components/ChatBottomMenu/ChatBottomMenu'; import ChatList from '@_components/ChatList/ChatList'; +import ChatMenuItem from '@_components/ChatMenuItem/ChatMenuItem'; import ChattingFooter from '@_components/ChattingFooter/ChattingFooter'; import ChattingRoomLayout from '@_layouts/ChattingRoomLayout/ChattingRoomLayout'; +import Picker from '@_components/Icons/Picker'; import useChats from '@_hooks/queries/useChat'; +import useMoims from '@_hooks/queries/useMoims'; import useSendMessage from '@_hooks/mutaions/useSendMessage'; import { useTheme } from '@emotion/react'; -import useMoims from '@_hooks/queries/useMoims'; -import { useMemo } from 'react'; export default function ChattingRoomPage() { const theme = useTheme(); const params = useParams(); const navigate = useNavigate(); + const [isMenuOpened, setIsMenuOpened] = useState(false); const moimId = +(params.moimId || '0'); const { moims } = useMoims(); @@ -39,7 +44,23 @@ export default function ChattingRoomPage() { - + setIsMenuOpened(!isMenuOpened)} + /> + {isMenuOpened && ( + + } + description="장소 정하기" + onClick={() => alert('장소정하기')} + /> + } + description="날짜/시간 정하기" + /> + + )} ); From a56cffa85413286532f219da7077cf7fff06d821 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 7 Aug 2024 20:34:54 +0900 Subject: [PATCH 13/18] =?UTF-8?q?refactor:chatBubble=20Icons=EB=A1=9C=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/{ChatBubbleSvg => Icons}/ChatBubbleSvg.tsx | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename frontend/src/components/{ChatBubbleSvg => Icons}/ChatBubbleSvg.tsx (100%) diff --git a/frontend/src/components/ChatBubbleSvg/ChatBubbleSvg.tsx b/frontend/src/components/Icons/ChatBubbleSvg.tsx similarity index 100% rename from frontend/src/components/ChatBubbleSvg/ChatBubbleSvg.tsx rename to frontend/src/components/Icons/ChatBubbleSvg.tsx From c82aeab3063c4e4f088fed4a99a8cee0725b27f2 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 7 Aug 2024 20:35:25 +0900 Subject: [PATCH 14/18] =?UTF-8?q?fix(ChattingPreview):=20=EB=B0=B0?= =?UTF-8?q?=EA=B2=BD=20=EC=83=89=EA=B9=94=20=EC=95=88=EB=93=A4=EC=96=B4?= =?UTF-8?q?=EA=B0=80=EB=8D=98=20=EB=B2=84=EA=B7=B8=20=EC=88=98=EC=A0=95?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- frontend/src/components/ChattingPreview/ChattingPreview.style.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/frontend/src/components/ChattingPreview/ChattingPreview.style.ts b/frontend/src/components/ChattingPreview/ChattingPreview.style.ts index cc94b774e..f60bd2dd6 100644 --- a/frontend/src/components/ChattingPreview/ChattingPreview.style.ts +++ b/frontend/src/components/ChattingPreview/ChattingPreview.style.ts @@ -15,6 +15,7 @@ export const container = ({ height: 10rem; padding: 2rem; + background-color: ${theme.colorPalette.white[100]}; border: 0.3rem solid; border-color: ${beforeMoim ? theme.colorPalette.orange[100] From c787df679ae4ba6eb1701d5d9e3e8a830af383e1 Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 7 Aug 2024 20:35:38 +0900 Subject: [PATCH 15/18] =?UTF-8?q?feat:=EB=AA=A8=EB=8B=AC=20=EC=BB=B4?= =?UTF-8?q?=ED=8F=AC=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 --- frontend/src/components/Modal/Modal.style.tsx | 52 +++++++++++++++++++ frontend/src/components/Modal/Modal.tsx | 44 ++++++++++++++++ 2 files changed, 96 insertions(+) create mode 100644 frontend/src/components/Modal/Modal.style.tsx create mode 100644 frontend/src/components/Modal/Modal.tsx diff --git a/frontend/src/components/Modal/Modal.style.tsx b/frontend/src/components/Modal/Modal.style.tsx new file mode 100644 index 000000000..cefd54590 --- /dev/null +++ b/frontend/src/components/Modal/Modal.style.tsx @@ -0,0 +1,52 @@ +import { Theme, css } from '@emotion/react'; + +export const dimmer = ({ hasDarkDimmer }: { hasDarkDimmer?: boolean }) => css` + position: fixed; + top: 0; + left: 0; + + width: 100vw; + height: 100vh; + + background-color: ${hasDarkDimmer ? 'rgba(0,0,0,23%)' : 'transparent'}; +`; + +export const content = ({ + position, + theme, +}: { + position: 'bottom' | 'center'; + theme: Theme; +}) => { + const defaultStyle = css` + position: fixed; + + max-width: 100%; + padding: 2.4rem 3.2rem; + + background-color: ${theme.colorPalette.white[100]}; + border-radius: 1rem; + box-shadow: 0 0 10px rgb(0 0 0 / 25%); + `; + if (position === 'center') { + return css` + ${defaultStyle} + top: 50%; + left: 50%; + transform: translate(-50%, -50%); + `; + } + if (position === 'bottom') { + return css` + ${defaultStyle} + bottom: 0; + left: 50%; + transform: translateX(-50%); + + margin: 0 auto; + + border-bottom-right-radius: 0; + border-bottom-left-radius: 0; + `; + } +}; diff --git a/frontend/src/components/Modal/Modal.tsx b/frontend/src/components/Modal/Modal.tsx new file mode 100644 index 000000000..25d0fc486 --- /dev/null +++ b/frontend/src/components/Modal/Modal.tsx @@ -0,0 +1,44 @@ +import * as S from './Modal.style'; + +import { KeyboardEvent, PropsWithChildren, useEffect } from 'react'; + +import { useTheme } from '@emotion/react'; + +interface ModalProps extends PropsWithChildren { + onClose: () => void; + hasDarkDimmer?: boolean; + position?: 'center' | 'bottom'; +} + +export default function Modal(props: ModalProps) { + const { + onClose, + children, + hasDarkDimmer = true, + position = 'center', + } = props; + + const theme = useTheme(); + useEffect(() => { + if (!onClose) return; + const handleModalKeyDown = (e: KeyboardEvent) => { + if (e.key === 'Escape') { + onClose(); + } + }; + + //@ts-expect-error:KeyboardEvent가 안먹음 + window.addEventListener('keydown', handleModalKeyDown); + }, [onClose]); + + return ( +
+
e.stopPropagation()} + > + {children} +
+
+ ); +} From 648a952e55592459ef7f439e22de7f87b95da75f Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 7 Aug 2024 20:35:59 +0900 Subject: [PATCH 16/18] =?UTF-8?q?feat:=20=EC=B1=84=ED=8C=85=EB=B0=A9=20?= =?UTF-8?q?=EB=82=B4=20=EB=AA=A8=EB=8B=AC=20=EC=BB=A8=ED=85=90=EC=B8=A0=20?= =?UTF-8?q?=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../DateTimeModalContent.stories.tsx | 14 +++ .../DateTimeModalContent.style.ts | 27 ++++++ .../DateTimeModalContent.tsx | 86 +++++++++++++++++++ .../PlaceModalContent.stories.tsx | 14 +++ .../PlaceModalContent.style.ts | 27 ++++++ .../PlaceModalContent/PlaceModalContent.tsx | 64 ++++++++++++++ 6 files changed, 232 insertions(+) create mode 100644 frontend/src/components/DateTimeModalContent/DateTimeModalContent.stories.tsx create mode 100644 frontend/src/components/DateTimeModalContent/DateTimeModalContent.style.ts create mode 100644 frontend/src/components/DateTimeModalContent/DateTimeModalContent.tsx create mode 100644 frontend/src/components/PlaceModalContent/PlaceModalContent.stories.tsx create mode 100644 frontend/src/components/PlaceModalContent/PlaceModalContent.style.ts create mode 100644 frontend/src/components/PlaceModalContent/PlaceModalContent.tsx diff --git a/frontend/src/components/DateTimeModalContent/DateTimeModalContent.stories.tsx b/frontend/src/components/DateTimeModalContent/DateTimeModalContent.stories.tsx new file mode 100644 index 000000000..de06d83b6 --- /dev/null +++ b/frontend/src/components/DateTimeModalContent/DateTimeModalContent.stories.tsx @@ -0,0 +1,14 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import DateTimeModalContent from './DateTimeModalContent'; + +const meta: Meta = { + component: DateTimeModalContent, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/frontend/src/components/DateTimeModalContent/DateTimeModalContent.style.ts b/frontend/src/components/DateTimeModalContent/DateTimeModalContent.style.ts new file mode 100644 index 000000000..0f75aa80c --- /dev/null +++ b/frontend/src/components/DateTimeModalContent/DateTimeModalContent.style.ts @@ -0,0 +1,27 @@ +import { Theme, css } from '@emotion/react'; + +export const content = ({ theme }: { theme: Theme }) => css` + display: flex; + flex-direction: column; + width: 75vw; + background-color: ${theme.semantic.white}; +`; + +export const buttonContainer = css` + display: flex; + flex-direction: row; + gap: 1rem; + justify-content: space-evenly; + + height: 4rem; + margin: 1rem; +`; + +export const buttonWrapper = css` + width: 75%; + + button { + height: 5rem; + padding: 0; + } +`; diff --git a/frontend/src/components/DateTimeModalContent/DateTimeModalContent.tsx b/frontend/src/components/DateTimeModalContent/DateTimeModalContent.tsx new file mode 100644 index 000000000..7dc7ff7fb --- /dev/null +++ b/frontend/src/components/DateTimeModalContent/DateTimeModalContent.tsx @@ -0,0 +1,86 @@ +import * as S from './DateTimeModalContent.style'; + +import { ChangeEvent, useMemo, useState } from 'react'; + +import Button from '@_components/Button/Button'; +import LabeledInput from '@_components/Input/MoimInput'; +import POLICES from '@_constants/poclies'; +import { useTheme } from '@emotion/react'; + +interface PlaceModalContentProps { + onCancel: () => void; + onConfirm: ({ date, time }: { date: string; time: string }) => void; +} + +const validateDate = (date: string) => { + if (date === '') { + return true; + } + const nowDate = new Date(); + const nowDateYyyymmdd = `${nowDate.getFullYear()}-${(nowDate.getMonth() + 1).toString().padStart(2, '00')}-${nowDate.getDate().toString().padStart(2, '00')}`; + return date >= nowDateYyyymmdd && POLICES.yyyymmddDashRegex.test(date); +}; + +const validateTime = (time: string) => { + if (time === '') { + return false; + } + return POLICES.hhmmRegex.test(time); +}; + +export default function DateTimeModalContent(props: PlaceModalContentProps) { + const { onCancel, onConfirm } = props; + const [date, setDate] = useState(''); + const [time, setTime] = useState(''); + + const theme = useTheme(); + + const isValidDate = useMemo(() => validateDate(date), [date]); + const isValidTime = useMemo(() => validateTime(time), [time]); + return ( +
+ ) => { + setDate(e.target.value); + }} + type="date" + /> + ) => { + setTime(e.target.value); + }} + type="time" + /> +
+
+ +
+
+ +
+
+
+ ); +} diff --git a/frontend/src/components/PlaceModalContent/PlaceModalContent.stories.tsx b/frontend/src/components/PlaceModalContent/PlaceModalContent.stories.tsx new file mode 100644 index 000000000..0337b79dd --- /dev/null +++ b/frontend/src/components/PlaceModalContent/PlaceModalContent.stories.tsx @@ -0,0 +1,14 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import PlaceModalContent from './PlaceModalContent'; + +const meta: Meta = { + component: PlaceModalContent, +}; + +export default meta; +type Story = StoryObj; + +export const Default: Story = { + args: {}, +}; diff --git a/frontend/src/components/PlaceModalContent/PlaceModalContent.style.ts b/frontend/src/components/PlaceModalContent/PlaceModalContent.style.ts new file mode 100644 index 000000000..0f75aa80c --- /dev/null +++ b/frontend/src/components/PlaceModalContent/PlaceModalContent.style.ts @@ -0,0 +1,27 @@ +import { Theme, css } from '@emotion/react'; + +export const content = ({ theme }: { theme: Theme }) => css` + display: flex; + flex-direction: column; + width: 75vw; + background-color: ${theme.semantic.white}; +`; + +export const buttonContainer = css` + display: flex; + flex-direction: row; + gap: 1rem; + justify-content: space-evenly; + + height: 4rem; + margin: 1rem; +`; + +export const buttonWrapper = css` + width: 75%; + + button { + height: 5rem; + padding: 0; + } +`; diff --git a/frontend/src/components/PlaceModalContent/PlaceModalContent.tsx b/frontend/src/components/PlaceModalContent/PlaceModalContent.tsx new file mode 100644 index 000000000..78f4760aa --- /dev/null +++ b/frontend/src/components/PlaceModalContent/PlaceModalContent.tsx @@ -0,0 +1,64 @@ +import * as S from './PlaceModalContent.style'; + +import { ChangeEvent, useMemo, useState } from 'react'; + +import Button from '@_components/Button/Button'; +import LabeledInput from '@_components/Input/MoimInput'; +import { useTheme } from '@emotion/react'; + +interface PlaceModalContentProps { + onCancel: () => void; + onConfirm: (string: string) => void; +} + +export default function PlaceModalContent(props: PlaceModalContentProps) { + const { onCancel, onConfirm } = props; + const [place, setPlace] = useState(''); + + const theme = useTheme(); + + const submitHandler = useMemo(() => { + return () => { + if (place.length < 1) return; + onConfirm(place); + setPlace(''); + }; + }, [place, onConfirm]); + + return ( +
+ ) => { + setPlace(e.target.value); + }} + max={100} + value={place} + /> +
+
+ +
+
+ +
+
+ + ); +} From f2db6f51a5be40fa32f98c666cd22a904fc0b2af Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 7 Aug 2024 20:36:14 +0900 Subject: [PATCH 17/18] =?UTF-8?q?feat:=20api=EB=A5=BC=20=EC=A0=9C=EC=99=B8?= =?UTF-8?q?=ED=95=9C=20=EC=B1=84=ED=8C=85=EB=B0=A9=20=EC=B6=94=EA=B0=80=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=EC=82=AC=ED=95=AD=20=EA=B5=AC=ED=98=84?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ChattingRoomPage/ChattingRoomPage.tsx | 45 +++++++++++++++++-- 1 file changed, 41 insertions(+), 4 deletions(-) diff --git a/frontend/src/pages/ChattingRoomPage/ChattingRoomPage.tsx b/frontend/src/pages/ChattingRoomPage/ChattingRoomPage.tsx index 43277d6b1..74e59144d 100644 --- a/frontend/src/pages/ChattingRoomPage/ChattingRoomPage.tsx +++ b/frontend/src/pages/ChattingRoomPage/ChattingRoomPage.tsx @@ -8,28 +8,56 @@ import ChatList from '@_components/ChatList/ChatList'; import ChatMenuItem from '@_components/ChatMenuItem/ChatMenuItem'; import ChattingFooter from '@_components/ChattingFooter/ChattingFooter'; import ChattingRoomLayout from '@_layouts/ChattingRoomLayout/ChattingRoomLayout'; +import DateTimeModalContent from '@_components/DateTimeModalContent/DateTimeModalContent'; +import Modal from '@_components/Modal/Modal'; import Picker from '@_components/Icons/Picker'; +import PlaceModalContent from '@_components/PlaceModalContent/PlaceModalContent'; import useChats from '@_hooks/queries/useChat'; import useMoims from '@_hooks/queries/useMoims'; import useSendMessage from '@_hooks/mutaions/useSendMessage'; import { useTheme } from '@emotion/react'; +type ModalContent = 'place' | 'datetime'; + export default function ChattingRoomPage() { const theme = useTheme(); const params = useParams(); const navigate = useNavigate(); - const [isMenuOpened, setIsMenuOpened] = useState(false); + const [isMenuOpen, setIsMenuOpen] = useState(false); const moimId = +(params.moimId || '0'); const { moims } = useMoims(); const { chats } = useChats(moimId); const { mutate: handleSendMessage } = useSendMessage(moimId); + const [nowModalContent, setNowModalContent] = useState('place'); + const [isModalOpen, setIsModalOpen] = useState(false); const moimTitle = useMemo( () => moims?.find((moim) => moim.moimId === moimId)?.title, [moims, moimId], ); + const modal = useMemo(() => { + if (nowModalContent === 'datetime') + return ( + setIsModalOpen(false)}> + setIsModalOpen(false)} + onConfirm={() => setIsModalOpen(false)} + /> + + ); + if (nowModalContent === 'place') + return ( + setIsModalOpen(false)}> + setIsModalOpen(false)} + onConfirm={() => setIsModalOpen(false)} + /> + + ); + }, [nowModalContent]); + return ( @@ -46,22 +74,31 @@ export default function ChattingRoomPage() { setIsMenuOpened(!isMenuOpened)} + onMenuClick={() => setIsMenuOpen(!isMenuOpen)} /> - {isMenuOpened && ( + {isMenuOpen && ( } description="장소 정하기" - onClick={() => alert('장소정하기')} + onClick={() => { + setNowModalContent('place'); + setIsModalOpen(true); + }} /> } description="날짜/시간 정하기" + onClick={() => { + setNowModalContent('datetime'); + setIsModalOpen(true); + }} /> )} + + {isModalOpen && modal} ); } From 3b9e7482fe5a4cd06ac21e497f96ff98fbd3158e Mon Sep 17 00:00:00 2001 From: ss0526100 Date: Wed, 7 Aug 2024 20:39:38 +0900 Subject: [PATCH 18/18] =?UTF-8?q?refactor:chatBubble=20Icons=EB=A1=9C=20?= =?UTF-8?q?=EC=9C=84=EC=B9=98=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/ChattingPreview/ChattingPreview.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/components/ChattingPreview/ChattingPreview.tsx b/frontend/src/components/ChattingPreview/ChattingPreview.tsx index 52c1ced57..bd082de18 100644 --- a/frontend/src/components/ChattingPreview/ChattingPreview.tsx +++ b/frontend/src/components/ChattingPreview/ChattingPreview.tsx @@ -8,7 +8,7 @@ import { unreadContentContainer, } from './ChattingPreview.style'; -import ChatBubbleSvg from '@_components/ChatBubbleSvg/ChatBubbleSvg'; +import ChatBubbleSvg from '@_components/Icons/ChatBubbleSvg'; import { ChattingPreview as ChattingPreviewType } from '@_types/index'; import POLICES from '@_constants/poclies'; import UserPreviewList from '@_components/UserPreviewList/UserPreviewList';