-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #96 from team-nabi/NABI-271
🎉 채팅 관련 UI 및 로직
- Loading branch information
Showing
14 changed files
with
237 additions
and
70 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
{ | ||
"extends": [ | ||
"development" | ||
], | ||
"hints": { | ||
"axe/structure": [ | ||
"default", | ||
{ | ||
"list": "off" | ||
} | ||
] | ||
} | ||
} |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
import React, { useState } from 'react' | ||
import Image from 'next/image' | ||
import Button from '@/components/ui/button' | ||
import Input from '@/components/ui/input' | ||
import Assets from '@/config/assets' | ||
|
||
const ChatInput = ({ | ||
onSubmit, | ||
}: { | ||
onSubmit: (_newMessage: string) => void | ||
}) => { | ||
const [newMessage, setNewMessage] = useState<string>('') | ||
|
||
const onChange = (e: React.ChangeEvent<HTMLInputElement>) => { | ||
e.preventDefault() | ||
setNewMessage(e.target.value) | ||
} | ||
|
||
const onSubmitMessage = (e: React.FormEvent<HTMLFormElement>) => { | ||
e.preventDefault() | ||
if (!newMessage.trim()) return | ||
|
||
onSubmit(newMessage) | ||
setNewMessage('') | ||
} | ||
|
||
return ( | ||
<form | ||
onSubmit={onSubmitMessage} | ||
className="absolute bottom-0 grid items-center w-full grid-cols-5 p-4 align-middle h-chat_input" | ||
> | ||
<div className="col-span-1" /> | ||
<Input | ||
onChange={onChange} | ||
value={newMessage} | ||
type="text" | ||
placeholder="메세지를 입력하세요." | ||
className="col-span-3" | ||
/> | ||
<div className="flex justify-center col-span-1"> | ||
<Button | ||
type="submit" | ||
variant={null} | ||
className="transition-opacity hover:opacity-70" | ||
> | ||
<Image src={Assets.sendIcon} alt="발송" /> | ||
</Button> | ||
</div> | ||
</form> | ||
) | ||
} | ||
|
||
export default ChatInput |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,79 @@ | ||
import React, { forwardRef, memo } from 'react' | ||
import { TYPOGRAPHY } from '@/styles/sizes' | ||
import type { Message } from '@/types/message' | ||
import { cn } from '@/utils' | ||
|
||
type ChatListProps = { | ||
messages: Message[] | ||
currentUserNickname?: string | ||
} | ||
|
||
type ChatProps = { | ||
message: Message | ||
isMyMessage: boolean | ||
} | ||
|
||
const ChatList = forwardRef<HTMLDivElement, ChatListProps>( | ||
({ messages, currentUserNickname }, ref) => { | ||
return ( | ||
<ul className="flex flex-col w-full h-full gap-1"> | ||
{messages.map((message: Message) => { | ||
return ( | ||
<Chat | ||
key={message.id} | ||
message={message} | ||
isMyMessage={message.sender === currentUserNickname} | ||
/> | ||
) | ||
})} | ||
{messages.length === 0 && ( | ||
<h1 className="text-red-500">채팅을 시작해보세요!</h1> | ||
)} | ||
<div className="invisible" ref={ref} /> | ||
</ul> | ||
) | ||
}, | ||
) | ||
ChatList.displayName = 'ChatList' | ||
|
||
export default memo(ChatList) | ||
|
||
const Chat = ({ message, isMyMessage }: ChatProps) => { | ||
return isMyMessage ? ( | ||
<MyChat message={message} /> | ||
) : ( | ||
<OtherChat message={message} /> | ||
) | ||
} | ||
|
||
const MyChat = ({ message }: Pick<ChatProps, 'message'>) => { | ||
return ( | ||
<li className={cn('flex flex-row gap-2 justify-end')}> | ||
<p className={cn('mt-auto break-keep', TYPOGRAPHY.description)}> | ||
{message.createdAt.toDate().toLocaleTimeString().slice(0, -3)} | ||
</p> | ||
<div | ||
className={ | ||
'p-2 text-black rounded-lg max-w-[75%] w-fit bg-background-secondary-color' | ||
} | ||
> | ||
{message.text} | ||
</div> | ||
</li> | ||
) | ||
} | ||
|
||
const OtherChat = ({ message }: Pick<ChatProps, 'message'>) => { | ||
return ( | ||
<li className={cn('flex flex-row gap-2 mr-auto justify-start')}> | ||
<div | ||
className={'p-2 text-white rounded-lg max-w-[75%] bg-primary-color '} | ||
> | ||
{message.text} | ||
</div> | ||
<p className={cn('mt-auto break-keep', TYPOGRAPHY.description)}> | ||
{message.createdAt.toDate().toLocaleTimeString().slice(0, -3)} | ||
</p> | ||
</li> | ||
) | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,13 @@ | ||
const firebaseConfig = { | ||
apiKey: process.env.NEXT_PUBLIC_FIREBASE_API_KEY, | ||
authDomain: process.env.NEXT_PUBLIC_FIREBASE_AUTH_DOMAIN, | ||
projectId: process.env.NEXT_PUBLIC_FIREBASE_PROJECT_ID, | ||
storageBucket: process.env.NEXT_PUBLIC_STORAGE_BUCKET, | ||
messagingSenderId: process.env.NEXT_PUBLIC_MESSAGING_SENDER_ID, | ||
appId: process.env.NEXT_PUBLIC_APP_ID, | ||
} | ||
|
||
const CHAT_LIMIT = 200 //TODO: 제한 개수 수정 또는 불러오는 법? | ||
|
||
export default firebaseConfig | ||
export { CHAT_LIMIT } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,10 @@ | ||
import { Timestamp } from 'firebase/firestore' | ||
|
||
interface Message { | ||
text: string | ||
createdAt: Timestamp | ||
sender: string | ||
id: string | ||
} | ||
|
||
export type { Message } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters