From d205416137d8e6ed47c363dbb39eed3429c863c8 Mon Sep 17 00:00:00 2001 From: dbswl701 Date: Wed, 18 Jun 2025 00:28:35 +0900 Subject: [PATCH 1/8] =?UTF-8?q?feat:=20DMList=20=ED=98=B8=EC=B6=9C=20api?= =?UTF-8?q?=20=EC=97=B0=EA=B2=B0(=EB=B0=B1=EC=97=94=EB=93=9C=20=EC=97=85?= =?UTF-8?q?=EB=8D=B0=EC=9D=B4=ED=8A=B8=20=EC=9D=B4=ED=9B=84=20=EC=88=98?= =?UTF-8?q?=EC=A0=95=20=ED=95=84=EC=9A=94)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/service/feature/channel/api/channelAPI.ts | 38 +++++++++++++++---- .../channel/hook/query/useChannelQuery.ts | 13 ++++++- src/service/feature/channel/types/channel.ts | 33 ++++++++++++---- src/service/feature/chat/index.ts | 7 +++- .../feature/common/axios/axiosInstance.ts | 9 +++-- src/view/layout/LayoutWithSidebar.tsx | 8 ++-- .../components/channel/DirectMessages.tsx | 17 ++++----- .../pages/Friends/components/UserCard.tsx | 30 +++++++-------- 8 files changed, 104 insertions(+), 51 deletions(-) diff --git a/src/service/feature/channel/api/channelAPI.ts b/src/service/feature/channel/api/channelAPI.ts index a36ba56..bb1298f 100644 --- a/src/service/feature/channel/api/channelAPI.ts +++ b/src/service/feature/channel/api/channelAPI.ts @@ -1,4 +1,5 @@ import { createAxiosInstance } from '@service/feature/common/axios/axiosInstance'; +import { Channel2, DMDetail } from '../types/channel'; const axios = createAxiosInstance(); @@ -8,7 +9,10 @@ export const getChannelList = async (teamId: string) => { }; export const createChannel = async ({ - teamId, categoryId, name, channelType, + teamId, + categoryId, + name, + channelType, }: { teamId: string; categoryId: number; @@ -37,14 +41,19 @@ export const deleteChannel = async ({ return res.data; }; -export const moveChannel = async (teamId: string, categoryId: number, channelId: number, body: { - destCategoryId: number; - prevChannelId: number; - nextChannelId: number; -}) => { +export const moveChannel = async ( + teamId: string, + categoryId: number, + channelId: number, + body: { + destCategoryId: number; + prevChannelId: number; + nextChannelId: number; + }, +) => { const res = await axios.patch( `/teams/${teamId}/categories/${categoryId}/channels/${channelId}`, - body + body, ); return res.data; }; @@ -63,3 +72,18 @@ export const editChannel = async ({ ); return res.data; }; + +export const getDMDetail = async (channelId: number): Promise => { + const res = await axios.get(`/channels/${channelId}`); + return res.data.data; +}; + +export const getDMList = async (): Promise => { + const res = await axios.get(`/channels/me`); + return res.data.data; +}; + +export const createDM = async (memberIds: string[]) => { + const res = await axios.post(`/channels/members`, memberIds); + return res.data.data; +}; diff --git a/src/service/feature/channel/hook/query/useChannelQuery.ts b/src/service/feature/channel/hook/query/useChannelQuery.ts index 15510a1..2a3299f 100644 --- a/src/service/feature/channel/hook/query/useChannelQuery.ts +++ b/src/service/feature/channel/hook/query/useChannelQuery.ts @@ -1,5 +1,8 @@ import { useQuery } from '@tanstack/react-query'; -import { getChannelList } from '@service/feature/channel/api/channelAPI.ts'; +import { + getChannelList, + getDMList, +} from '@service/feature/channel/api/channelAPI.ts'; import { Channel } from '@service/feature/channel/types/channel.ts'; // response 형식이 다름. 임시로 설정하여 사용중 @@ -11,3 +14,11 @@ export const useChannelListQuery = (serverId: string) => { staleTime: 1000 * 60 * 5, }); }; + +export const useDMListQuery = () => { + return useQuery({ + queryKey: ['DMList'], + queryFn: getDMList, + staleTime: 1000 * 60 * 5, + }); +}; diff --git a/src/service/feature/channel/types/channel.ts b/src/service/feature/channel/types/channel.ts index 4eb89d4..e3e2317 100644 --- a/src/service/feature/channel/types/channel.ts +++ b/src/service/feature/channel/types/channel.ts @@ -8,6 +8,30 @@ export type ChannelType = 'text' | 'voice' | 'event'; // [key: string]: unknown; // } +export interface DMDetail { + channel: Channel2; + channelMembers: ChannelMember[]; +} + +export interface ChannelMember { + id: string; + nickname: string; + name: string; + avatarUrl: string; + state: 'ONLINE' | 'OFFLINE'; + createdAt: string; +} + +// 팀 서버 상세 조회에서 불러오는 channel 타입도 이것. 추후 아래 Channel 타입에서 이걸로 변경해야 할 듯 +export interface Channel2 { + id: number; + name: string; + position: number; + type: string; + accessType: string; + chatId: string; +} + export interface Channel { categoriesView: CategoriesView[]; team: Team; @@ -32,12 +56,5 @@ export interface Team { export interface TeamMembers { id: number; role: 'OWNER' | 'MEMBER'; - memberInfo: { - id: string; - nickname: string; - name: string; - avatarUrl: string; - state: 'OFFLINE' | 'ONLINE'; - createdAt: string; - }; + memberInfo: ChannelMember; } diff --git a/src/service/feature/chat/index.ts b/src/service/feature/chat/index.ts index 3381ff6..7cecc98 100644 --- a/src/service/feature/chat/index.ts +++ b/src/service/feature/chat/index.ts @@ -1,7 +1,10 @@ export { useChat } from './hook/useChat'; -export { useChannelListQuery } from '../channel/hook/query/useChannelQuery.ts'; +export { + useChannelListQuery, + useDMListQuery, +} from '../channel/hook/query/useChannelQuery.ts'; export { useMessageHistory } from './hook/useMessageHistory'; export { useSendMessage } from './hook/useSendMessage'; export { useSocket } from './context/useSocket'; export { SocketProvider } from './context/SocketProvider'; -export * from './store/chatSlice'; \ No newline at end of file +export * from './store/chatSlice'; diff --git a/src/service/feature/common/axios/axiosInstance.ts b/src/service/feature/common/axios/axiosInstance.ts index 89dde4e..84987d6 100644 --- a/src/service/feature/common/axios/axiosInstance.ts +++ b/src/service/feature/common/axios/axiosInstance.ts @@ -6,7 +6,8 @@ import { getCookie } from '../../auth/lib/getCookie'; export type ServiceType = 'members' | 'teams' | 'dialog'; const API_CONFIG = { - BASE_DOMAIN: 'https://flowchat.shop:30200', + // BASE_DOMAIN: 'https://flowchat.shop:30200', + BASE_DOMAIN: 'http://flowchat.shop:30100', HEADERS: { JSON: 'application/json', }, @@ -59,15 +60,15 @@ export const createAxiosInstance = (): AxiosInstance => { } return config; }, - (error) => Promise.reject(error) + (error) => Promise.reject(error), ); instance.interceptors.response.use( (response: AxiosResponse) => response, - handleAxiosError + handleAxiosError, ); return instance; }; -export default createAxiosInstance; \ No newline at end of file +export default createAxiosInstance; diff --git a/src/view/layout/LayoutWithSidebar.tsx b/src/view/layout/LayoutWithSidebar.tsx index 9e99579..be9f845 100644 --- a/src/view/layout/LayoutWithSidebar.tsx +++ b/src/view/layout/LayoutWithSidebar.tsx @@ -14,15 +14,15 @@ const LayoutWithSidebar = () => { -
-
- {[ - { - id: 'sdfsdf', - name: '사용자3', - state: 'DND', - avatarUrl: 'profile', - }, - ].map((user) => ( + {data?.map((user) => ( ))} diff --git a/src/view/pages/Friends/components/UserCard.tsx b/src/view/pages/Friends/components/UserCard.tsx index 137e757..21ddf43 100644 --- a/src/view/pages/Friends/components/UserCard.tsx +++ b/src/view/pages/Friends/components/UserCard.tsx @@ -8,23 +8,17 @@ import { } from 'src/service/feature/friend/hook/useFriendQuery.ts'; import MoreMenu from './MoreMenu.tsx'; import { Check, EllipsisVertical, X } from 'lucide-react'; +import { Channel2 } from '@service/feature/channel/types/channel.ts'; interface UserCardProps { status?: string; - isActive: boolean; + isActive?: boolean; className?: string; friendshipId: number; type?: 'sent' | 'received' | 'message'; openMenuId?: number | null; setOpenMenuId?: React.Dispatch>; - user: - | FriendInfoData - | { - avatarUrl: string; - state: string; - name: string; - id: string; - }; + user: Channel2; } const UserCard = ({ @@ -39,10 +33,13 @@ const UserCard = ({ }: UserCardProps) => { const navigation = useNavigate(); - const { id, name, avatarUrl, state: isOnline } = user; + // const { id, name, avatarUrl, state: isOnline } = user; + const { name, chatId } = user; + + console.log('user: ', user); const handleClick = () => { - navigation(`/channels/@me/${id}`); + navigation(`/channels/@me/${chatId}`); }; // 친구 요청 취소 @@ -58,8 +55,8 @@ const UserCard = ({
@@ -67,12 +64,13 @@ const UserCard = ({
{user.name} -
+ {/*
-
+
*/}

From 456af196b1611d0e8412b3bd1a349221523d61b6 Mon Sep 17 00:00:00 2001 From: dbswl701 Date: Wed, 18 Jun 2025 02:09:38 +0900 Subject: [PATCH 2/8] =?UTF-8?q?style:=20=EC=95=84=EC=9D=B4=EC=BD=98=20?= =?UTF-8?q?=EC=83=89=EC=83=81=20=EB=93=B1=20=EC=9E=90=EC=9E=98=ED=95=9C=20?= =?UTF-8?q?=EC=88=98=EC=A0=95=EC=82=AC=ED=95=AD=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/view/components/layout/sidebar/top/TopSidebar.tsx | 4 ++-- src/view/layout/sidebar/components/team/ChatServer.tsx | 2 +- src/view/pages/Friends/components/Navigation.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/view/components/layout/sidebar/top/TopSidebar.tsx b/src/view/components/layout/sidebar/top/TopSidebar.tsx index bcfa752..ee409ec 100644 --- a/src/view/components/layout/sidebar/top/TopSidebar.tsx +++ b/src/view/components/layout/sidebar/top/TopSidebar.tsx @@ -1,6 +1,6 @@ import { useState } from 'react'; import Inbox from '../components/top/Inbox'; -import { Archive } from 'lucide-react'; +import { InboxIcon } from 'lucide-react'; const TopSidebar = () => { const [toggle, setToggle] = useState(false); @@ -13,7 +13,7 @@ const TopSidebar = () => { className='w-8 h-8 p-1 rounded-full hover:bg-[#42454A]' onClick={() => setToggle((prev) => !prev)} > - + {toggle && }

diff --git a/src/view/layout/sidebar/components/team/ChatServer.tsx b/src/view/layout/sidebar/components/team/ChatServer.tsx index e7bcb2a..27525c2 100644 --- a/src/view/layout/sidebar/components/team/ChatServer.tsx +++ b/src/view/layout/sidebar/components/team/ChatServer.tsx @@ -26,7 +26,7 @@ export default function ChatServer({ !server &&
me
)} {server?.iconUrl ? ( - {server.name} + {server.name} ) : (
{server?.name}
)} diff --git a/src/view/pages/Friends/components/Navigation.tsx b/src/view/pages/Friends/components/Navigation.tsx index 01e6416..578f982 100644 --- a/src/view/pages/Friends/components/Navigation.tsx +++ b/src/view/pages/Friends/components/Navigation.tsx @@ -27,7 +27,7 @@ const Navigation = ({ activeButton, setActiveButton }: NavigationProps) => {
-

친구

+

친구

From 9cf0685ec4d49849e83bc51feba526167f326fcc Mon Sep 17 00:00:00 2001 From: dbswl701 Date: Wed, 18 Jun 2025 02:11:00 +0900 Subject: [PATCH 3/8] =?UTF-8?q?fix:=20=ED=8C=80=20=EC=83=9D=EC=84=B1=20?= =?UTF-8?q?=EB=AA=A8=EB=8B=AC=20=EB=8B=A4=EC=8B=9C=20=EC=97=B4=20=EB=95=8C?= =?UTF-8?q?=20=EC=B4=88=EA=B8=B0=ED=99=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/view/components/common/Modal.tsx | 13 +++++++++++-- .../layout/sidebar/components/team/AddTeamModal.tsx | 12 +++++++++--- src/view/pages/Friends/components/SearchFriends.tsx | 2 +- 3 files changed, 21 insertions(+), 6 deletions(-) diff --git a/src/view/components/common/Modal.tsx b/src/view/components/common/Modal.tsx index 6823415..2d7092a 100644 --- a/src/view/components/common/Modal.tsx +++ b/src/view/components/common/Modal.tsx @@ -114,7 +114,7 @@ Modal.Title = ({ onClick={() => context?.setIsOpen(false)} className='mr-1 group' > - + )}
@@ -237,10 +237,12 @@ Modal.ProTip = ({ children }: { children: string }) => { Modal.Footer = ({ onSubmit, + onClose, backBtnText, submitBtnText, }: { onSubmit: () => void; + onClose?: () => void; backBtnText?: string; submitBtnText?: string; }) => { @@ -252,10 +254,17 @@ Modal.Footer = ({ onSubmit(); }; + const handleClose = () => { + if (onClose) { + onClose(); + } + context.setIsOpen(false); + }; + return (
); }; From 56fefc325a9e74aa2f5db20d8a4fd858d1593d0f Mon Sep 17 00:00:00 2001 From: dbswl701 Date: Wed, 18 Jun 2025 02:12:38 +0900 Subject: [PATCH 4/8] =?UTF-8?q?feat:=20DMList=20=EB=B0=B1=EC=97=94?= =?UTF-8?q?=EB=93=9C=20=EC=9D=91=EB=8B=B5=20=ED=98=95=EC=8B=9D=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD=EC=97=90=20=EB=94=B0=EB=A5=B8=20=EC=88=98=EC=A0=95=20?= =?UTF-8?q?=EB=B0=8F=202=EB=AA=85=20=EC=9D=B4=EC=83=81=EC=9D=B8=20?= =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20=EB=B0=98=EC=98=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/service/feature/channel/api/channelAPI.ts | 4 +- src/service/feature/channel/types/channel.ts | 4 + .../components/channel/DirectMessages.tsx | 18 ++-- .../pages/Friends/components/DMUserCard.tsx | 91 +++++++++++++++++++ 4 files changed, 105 insertions(+), 12 deletions(-) create mode 100644 src/view/pages/Friends/components/DMUserCard.tsx diff --git a/src/service/feature/channel/api/channelAPI.ts b/src/service/feature/channel/api/channelAPI.ts index bb1298f..d8eba6b 100644 --- a/src/service/feature/channel/api/channelAPI.ts +++ b/src/service/feature/channel/api/channelAPI.ts @@ -1,5 +1,5 @@ import { createAxiosInstance } from '@service/feature/common/axios/axiosInstance'; -import { Channel2, DMDetail } from '../types/channel'; +import { DMDetail, DMList } from '../types/channel'; const axios = createAxiosInstance(); @@ -78,7 +78,7 @@ export const getDMDetail = async (channelId: number): Promise => { return res.data.data; }; -export const getDMList = async (): Promise => { +export const getDMList = async (): Promise => { const res = await axios.get(`/channels/me`); return res.data.data; }; diff --git a/src/service/feature/channel/types/channel.ts b/src/service/feature/channel/types/channel.ts index e3e2317..785f346 100644 --- a/src/service/feature/channel/types/channel.ts +++ b/src/service/feature/channel/types/channel.ts @@ -13,6 +13,10 @@ export interface DMDetail { channelMembers: ChannelMember[]; } +export interface DMList extends Channel2 { + channelMembers: ChannelMember[]; +} + export interface ChannelMember { id: string; nickname: string; diff --git a/src/view/layout/sidebar/components/channel/DirectMessages.tsx b/src/view/layout/sidebar/components/channel/DirectMessages.tsx index 76ae341..cd002b7 100644 --- a/src/view/layout/sidebar/components/channel/DirectMessages.tsx +++ b/src/view/layout/sidebar/components/channel/DirectMessages.tsx @@ -1,7 +1,7 @@ -import UserCard from '@pages/Friends/components/UserCard'; import { useDMListQuery } from '@service/feature/chat'; import { useParams } from 'react-router-dom'; import { Plus } from 'lucide-react'; +import DMUserCard from '@pages/Friends/components/DMUserCard'; const DirectMessages = () => { const params = useParams(); @@ -12,7 +12,6 @@ const DirectMessages = () => { if (isLoading) return
Loading...
; if (error) return
에러 발생
; - console.log('DM list 출력: ', data); const handlePlus = () => { console.log('plus 버튼 클릭'); }; @@ -24,20 +23,19 @@ const DirectMessages = () => { DIRECT MESSAGES

- {data?.map((user) => ( - ( + ))}
diff --git a/src/view/pages/Friends/components/DMUserCard.tsx b/src/view/pages/Friends/components/DMUserCard.tsx new file mode 100644 index 0000000..0f29d8c --- /dev/null +++ b/src/view/pages/Friends/components/DMUserCard.tsx @@ -0,0 +1,91 @@ +import { useNavigate } from 'react-router-dom'; +import { DMList } from '@service/feature/channel/types/channel.ts'; + +interface UserCardProps { + isActive?: boolean; + className?: string; + channel: DMList; +} + +const DMUserCard = ({ channel, isActive, className }: UserCardProps) => { + const navigation = useNavigate(); + + // 만약 맴버가 여러명이면 맴버 순서대로 2명 프로필 노출 + // const user = channel.channelMembers; + + // 백엔드 개발 완료되기 전 임시 데이터 + const user = [ + { id: 0, state: 'ONLINE' }, + // { id: 1, state: 'OFFLINE' }, + ]; + + const memberSize = user.length; + + const handleClick = () => { + navigation(`/channels/@me/${channel.chatId}`); + }; + + return ( +
+
+
+ {memberSize === 1 ? ( +
+ {channel.name} +
+
+ ) : ( +
+ {channel.name} +
+ {channel.name} +
+
+ )} +
+
+

+ {channel.name} +

+ {memberSize !== 1 ? ( +
+

+ 맴버 {memberSize}명 +

+
+ ) : null} +
+
+
+ ); +}; + +export default DMUserCard; From a567954e2fe3601d6784fe32fc511eded806099b Mon Sep 17 00:00:00 2001 From: dbswl701 Date: Wed, 18 Jun 2025 17:39:15 +0900 Subject: [PATCH 5/8] =?UTF-8?q?feat:=20DMUserCard=EC=99=80=20=EB=B6=84?= =?UTF-8?q?=EB=A6=AC=ED=95=98=EB=A9=B4=EC=84=9C=20Friend=EC=9D=98=20UserCa?= =?UTF-8?q?rd=EB=8F=84=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/service/feature/friend/types/friend.ts | 13 +- .../pages/Friends/components/FriendCard.tsx | 123 +++++++++++++-- .../pages/Friends/components/FriendList.tsx | 13 +- .../pages/Friends/components/UserCard.tsx | 148 ------------------ 4 files changed, 123 insertions(+), 174 deletions(-) delete mode 100644 src/view/pages/Friends/components/UserCard.tsx diff --git a/src/service/feature/friend/types/friend.ts b/src/service/feature/friend/types/friend.ts index ada328b..ea6f2ed 100644 --- a/src/service/feature/friend/types/friend.ts +++ b/src/service/feature/friend/types/friend.ts @@ -1,14 +1,7 @@ +import { ChannelMember } from '@service/feature/channel/types/channel'; + export interface FriendData { friendshipId: 8; friendshipDateTime: string; - friendshipInfo: FriendInfoData; -} - -export interface FriendInfoData { - id: string; - nickname: string; - name: string; - avatarUrl: string; - state: 'ONLINE' | 'OFFLINE'; - createdAt: string; + friendshipInfo: ChannelMember; } diff --git a/src/view/pages/Friends/components/FriendCard.tsx b/src/view/pages/Friends/components/FriendCard.tsx index 986cda0..21e217a 100644 --- a/src/view/pages/Friends/components/FriendCard.tsx +++ b/src/view/pages/Friends/components/FriendCard.tsx @@ -1,30 +1,127 @@ -import UserCard from '@pages/Friends/components/UserCard'; -import { FriendData } from 'src/service/feature/friend/types/friend'; +import { Check, EllipsisVertical, X } from 'lucide-react'; +import { + useAcceptFriend, + useCancelFriend, + useRefuseFriend, +} from '@service/feature/friend/hook/useFriendQuery'; +import MoreMenu from './MoreMenu'; +import { ChannelMember } from '@service/feature/channel/types/channel'; +import { useNavigate } from 'react-router-dom'; const FriendCard = ({ user, + friendshipId, type = 'message', openMenuId, setOpenMenuId, }: { - user: FriendData; + user: ChannelMember; + friendshipId: number; type?: 'sent' | 'received' | 'message'; onToggle?: () => void; openMenuId?: number | null; setOpenMenuId?: React.Dispatch>; }) => { + const navigation = useNavigate(); + + const { id, name, state, avatarUrl } = user; + + // TODO: 추후 chatId 받아오는 방식 고려. + // 현재는 DM 채널과 유저를 매칭시킬 수 있는 방법이 없음. + const handleClick = () => { + navigation(`/channels/@me/${id}`); + }; + + // 친구 요청 취소 + const { mutate: cancleFriendMutate } = useCancelFriend(); + + // 친구 요청 수락 + const { mutate: acceptFriendMutate } = useAcceptFriend(); + + // 친구 요청 거절 + const { mutate: refuseFriendMutate } = useRefuseFriend(); + return (
- +
+
+
+ {user.name} +
+
+
+

+ {name} +

+ {status ? ( +
+ {status ? ( +

+ {status} +

+ ) : null} +
+ ) : null} +
+
+ {type === 'message' && ( + +
+ +
+ + )} + {type === 'sent' && ( + + )} + + {type === 'received' && ( +
+ + +
+ )} +
); }; diff --git a/src/view/pages/Friends/components/FriendList.tsx b/src/view/pages/Friends/components/FriendList.tsx index 37652e5..99890e3 100644 --- a/src/view/pages/Friends/components/FriendList.tsx +++ b/src/view/pages/Friends/components/FriendList.tsx @@ -89,7 +89,12 @@ export default function FriendList({ activeButton }: NavigationProps) {

{searchData.sent?.map((user: FriendData, idx: number) => ( - + ))} {searchData.sent?.length === 0 && ( ( ))} @@ -134,7 +140,8 @@ export default function FriendList({ activeButton }: NavigationProps) { searchData.map((user: FriendData, idx: number) => ( diff --git a/src/view/pages/Friends/components/UserCard.tsx b/src/view/pages/Friends/components/UserCard.tsx deleted file mode 100644 index dbaefb3..0000000 --- a/src/view/pages/Friends/components/UserCard.tsx +++ /dev/null @@ -1,148 +0,0 @@ -import { useNavigate } from 'react-router-dom'; -import { FriendInfoData } from 'src/service/feature/friend/types/friend.ts'; -import Icon from '@components/common/Icon.tsx'; -import { - useAcceptFriend, - useCancelFriend, - useRefuseFriend, -} from 'src/service/feature/friend/hook/useFriendQuery.ts'; -import MoreMenu from './MoreMenu.tsx'; -import { Check, EllipsisVertical, X } from 'lucide-react'; -import { Channel2 } from '@service/feature/channel/types/channel.ts'; - -interface UserCardProps { - status?: string; - isActive?: boolean; - className?: string; - friendshipId: number; - type?: 'sent' | 'received' | 'message'; - openMenuId?: number | null; - setOpenMenuId?: React.Dispatch>; - user: Channel2; -} - -const UserCard = ({ - user, - status, - isActive, - className, - type, - friendshipId, - setOpenMenuId, - openMenuId, -}: UserCardProps) => { - const navigation = useNavigate(); - - // const { id, name, avatarUrl, state: isOnline } = user; - const { name, chatId } = user; - - console.log('user: ', user); - - const handleClick = () => { - navigation(`/channels/@me/${chatId}`); - }; - - // 친구 요청 취소 - const { mutate: cancleFriendMutate } = useCancelFriend(); - - // 친구 요청 수락 - const { mutate: acceptFriendMutate } = useAcceptFriend(); - - // 친구 요청 거절 - const { mutate: refuseFriendMutate } = useRefuseFriend(); - - return ( -
-
-
- {user.name} - {/*
- -
*/} -
-
-

- {name} -

- {status ? ( -
- {status ? ( -

- {status} -

- ) : null} -
- ) : null} -
-
- {type === 'message' && ( - - - - )} - {type === 'sent' && ( - - )} - - {type === 'received' && ( -
- - -
- )} -
- ); -}; - -export default UserCard; From 54975f78aa1dbbb52b282511e46a82e42ec0b59e Mon Sep 17 00:00:00 2001 From: dbswl701 Date: Wed, 18 Jun 2025 17:39:53 +0900 Subject: [PATCH 6/8] =?UTF-8?q?feat:=20DMList=EC=97=90=20=EC=8A=A4?= =?UTF-8?q?=EC=BC=88=EB=A0=88=ED=86=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../sidebar/channel/DirectChannelSidebar.tsx | 24 ++++++++++-- .../components/channel/DirectMessages.tsx | 38 +++++-------------- .../components/channel/SidebarLayout.tsx | 6 +-- .../components/skeletons/SkeletonDMList.tsx | 15 ++++++++ 4 files changed, 49 insertions(+), 34 deletions(-) create mode 100644 src/view/layout/sidebar/components/skeletons/SkeletonDMList.tsx diff --git a/src/view/layout/sidebar/channel/DirectChannelSidebar.tsx b/src/view/layout/sidebar/channel/DirectChannelSidebar.tsx index f01513d..83e8eae 100644 --- a/src/view/layout/sidebar/channel/DirectChannelSidebar.tsx +++ b/src/view/layout/sidebar/channel/DirectChannelSidebar.tsx @@ -1,15 +1,33 @@ import { SidebarLayout } from '../components/channel/SidebarLayout.tsx'; import ChannelNavigation from '../components/channel/ChannelNavigation.tsx'; import DirectMessages from '../components/channel/DirectMessages.tsx'; +import { Plus } from 'lucide-react'; const DirectChannelSidebar = () => { + const handlePlus = () => { + console.log('plus 버튼 클릭'); + }; return ( -
- +
+
+
+

+ DIRECT MESSAGES +

+ +
+ +
); }; -export default DirectChannelSidebar; \ No newline at end of file +export default DirectChannelSidebar; diff --git a/src/view/layout/sidebar/components/channel/DirectMessages.tsx b/src/view/layout/sidebar/components/channel/DirectMessages.tsx index cd002b7..7ca8a13 100644 --- a/src/view/layout/sidebar/components/channel/DirectMessages.tsx +++ b/src/view/layout/sidebar/components/channel/DirectMessages.tsx @@ -1,7 +1,7 @@ import { useDMListQuery } from '@service/feature/chat'; import { useParams } from 'react-router-dom'; -import { Plus } from 'lucide-react'; import DMUserCard from '@pages/Friends/components/DMUserCard'; +import SkeletonDMList from '../skeletons/SkeletonDMList'; const DirectMessages = () => { const params = useParams(); @@ -9,36 +9,18 @@ const DirectMessages = () => { const userId = params.channelId; const { data, isLoading, error } = useDMListQuery(); - if (isLoading) return
Loading...
; + if (isLoading) return ; if (error) return
에러 발생
; - const handlePlus = () => { - console.log('plus 버튼 클릭'); - }; - return ( -
-
-

- DIRECT MESSAGES -

- -
-
- {data?.map((channel) => ( - - ))} -
+
+ {data?.map((channel) => ( + + ))}
); }; diff --git a/src/view/layout/sidebar/components/channel/SidebarLayout.tsx b/src/view/layout/sidebar/components/channel/SidebarLayout.tsx index 3ae342a..07a1536 100644 --- a/src/view/layout/sidebar/components/channel/SidebarLayout.tsx +++ b/src/view/layout/sidebar/components/channel/SidebarLayout.tsx @@ -1,7 +1,7 @@ export const SidebarLayout = ({ children }: { children: React.ReactNode }) => ( -
-
+
+
{children}
-); \ No newline at end of file +); diff --git a/src/view/layout/sidebar/components/skeletons/SkeletonDMList.tsx b/src/view/layout/sidebar/components/skeletons/SkeletonDMList.tsx new file mode 100644 index 0000000..b935e8a --- /dev/null +++ b/src/view/layout/sidebar/components/skeletons/SkeletonDMList.tsx @@ -0,0 +1,15 @@ +const SkeletonDMList = () => { + return ( +
+
+
+
+
+
+
+
+
+ ); +}; + +export default SkeletonDMList; From cd24b46f41d74a4261c035feefedb7e3a9b3cd99 Mon Sep 17 00:00:00 2001 From: dbswl701 Date: Wed, 18 Jun 2025 17:40:26 +0900 Subject: [PATCH 7/8] =?UTF-8?q?feat:=20=ED=8C=80=20=EC=82=AC=EC=9D=B4?= =?UTF-8?q?=EB=93=9C=EB=B0=94=EC=97=90=20=EC=8A=A4=EC=BC=88=EB=A0=88?= =?UTF-8?q?=ED=86=A4=20=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/skeletons/SkeletonTeamSidebar.tsx | 14 ++++++++++++++ .../layout/sidebar/components/team/ChatServer.tsx | 5 ++++- src/view/layout/sidebar/team/TeamSidebar.tsx | 6 +++++- 3 files changed, 23 insertions(+), 2 deletions(-) create mode 100644 src/view/layout/sidebar/components/skeletons/SkeletonTeamSidebar.tsx diff --git a/src/view/layout/sidebar/components/skeletons/SkeletonTeamSidebar.tsx b/src/view/layout/sidebar/components/skeletons/SkeletonTeamSidebar.tsx new file mode 100644 index 0000000..8a3f608 --- /dev/null +++ b/src/view/layout/sidebar/components/skeletons/SkeletonTeamSidebar.tsx @@ -0,0 +1,14 @@ +const SkeletonTeamSidebar = () => { + return ( +
+
+
+
+
+
+
+
+ ); +}; + +export default SkeletonTeamSidebar; diff --git a/src/view/layout/sidebar/components/team/ChatServer.tsx b/src/view/layout/sidebar/components/team/ChatServer.tsx index 27525c2..904103e 100644 --- a/src/view/layout/sidebar/components/team/ChatServer.tsx +++ b/src/view/layout/sidebar/components/team/ChatServer.tsx @@ -23,7 +23,10 @@ export default function ChatServer({ {isAdd ? ( ) : ( - !server &&
me
+ // TODO: 추후 개인 프로필 사진으로 교체 + !server && ( + {'다이렉트 + ) )} {server?.iconUrl ? ( {server.name} diff --git a/src/view/layout/sidebar/team/TeamSidebar.tsx b/src/view/layout/sidebar/team/TeamSidebar.tsx index 1e0d681..3a2801a 100644 --- a/src/view/layout/sidebar/team/TeamSidebar.tsx +++ b/src/view/layout/sidebar/team/TeamSidebar.tsx @@ -2,13 +2,14 @@ import AddTeamModal from '../components/team/AddTeamModal.tsx'; import { useNavigate, useParams } from 'react-router-dom'; import { useTeamListQuery } from '@service/feature/team/hook/query/useTeamServiceQuery.ts'; import ChatServer from '../components/team/ChatServer.tsx'; +import SkeletonTeamSidebar from '../components/skeletons/SkeletonTeamSidebar.tsx'; const TeamSidebar = () => { const params = useParams(); const channelId = params.serverId; const navigate = useNavigate(); - const { data: servers } = useTeamListQuery() + const { data: servers, isLoading, error } = useTeamListQuery(); const handleChannel = (id: string) => { if (id === '') { @@ -18,6 +19,9 @@ const TeamSidebar = () => { } }; + if (isLoading) return ; + if (error) return
에러
; + return (
{/* 자기 채널 */} From 5b77bba8e53c046d4c3a735c8112a08d00cc2af8 Mon Sep 17 00:00:00 2001 From: dbswl701 Date: Wed, 18 Jun 2025 18:02:42 +0900 Subject: [PATCH 8/8] =?UTF-8?q?style:=20=EB=A0=88=EC=9D=B4=EC=95=84?= =?UTF-8?q?=EC=9B=83=20=EC=8A=A4=ED=83=80=EC=9D=BC=20=EB=B3=80=EA=B2=BD=20?= =?UTF-8?q?=EB=B0=8F=20=EC=BB=A4=EC=8A=A4=ED=85=80=20=ED=81=B4=EB=9E=98?= =?UTF-8?q?=EC=8A=A4=EB=A1=9C=20=EB=B3=80=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../layout/sidebar/components/top/ForYou.tsx | 4 ++-- .../layout/sidebar/components/top/Mention.tsx | 2 +- .../layout/sidebar/components/top/Message.tsx | 9 ++------- src/view/layout/LayoutWithSidebar.tsx | 8 ++++---- .../components/skeletons/SkeletonDMList.tsx | 14 +++++++------- .../components/skeletons/SkeletonTeamSidebar.tsx | 12 ++++++------ src/view/pages/Friends/FriendsPage.tsx | 2 +- src/view/pages/Friends/components/AddFriend.tsx | 2 +- src/view/pages/Friends/components/FriendCard.tsx | 12 ++++++------ src/view/pages/Friends/components/MoreMenu.tsx | 8 ++++---- .../components/Skeletons/SkeletonFriendList.tsx | 6 +++--- .../pages/auth/signup/components/SignupPanel.tsx | 2 +- tailwind.config.js | 1 + 13 files changed, 39 insertions(+), 43 deletions(-) diff --git a/src/view/components/layout/sidebar/components/top/ForYou.tsx b/src/view/components/layout/sidebar/components/top/ForYou.tsx index 60c4963..e7dcbbd 100644 --- a/src/view/components/layout/sidebar/components/top/ForYou.tsx +++ b/src/view/components/layout/sidebar/components/top/ForYou.tsx @@ -50,11 +50,11 @@ const ForYou = ({
); diff --git a/src/view/components/layout/sidebar/components/top/Mention.tsx b/src/view/components/layout/sidebar/components/top/Mention.tsx index 4f93e55..c6f3bf5 100644 --- a/src/view/components/layout/sidebar/components/top/Mention.tsx +++ b/src/view/components/layout/sidebar/components/top/Mention.tsx @@ -51,7 +51,7 @@ const Mention = ({
{/* 닫기로 수정 */}