Skip to content

Commit

Permalink
Merge pull request #90 from MOVIEJOJO7/feature/#77
Browse files Browse the repository at this point in the history 
Feat : Header, User Search 외 디자인 변경사항들 수정
  • Loading branch information
@LikeFireAndSky
LikeFireAndSky authored Nov 16, 2023
2 parents 29e6a9b + 4c94d8c commit 0c0cfa8
Show file tree
Hide file tree
Showing 29 changed files with 263 additions and 242 deletions.
2 changes: 1 addition & 1 deletion Components/Common/AsyncLoading/AsyncLoading.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@ const AsyncLoadingProvider = () => {
return (
<>
{asyncLoading && (
<div className="absolute top-0 left-0 bottom-0 right-0 z-[999] bg-opacity-70 w-full h-screen flex justify-center items-center bg-gray-700">
<div className="absolute top-0 left-0 bottom-0 right-0 z-[9999] bg-opacity-70 w-full h-screen flex justify-center items-center bg-gray-700">
<AsyncSpinner />
</div>
)}
Expand Down
0 Components/Button.tsx → Components/Common/Button.tsx
View file
File renamed without changes.
4 changes: 2 additions & 2 deletions Components/Common/Footer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,7 +23,7 @@ const Footer = () => {
};

return (
<div className="w-full sm:w-[425px] h-14 flex justify-around items-center bg-primary mx-auto fixed inset-x-0 bottom-0">
<div className="w-full sm:w-[425px] h-14 flex justify-around items-center bg-primary mx-auto absolute inset-x-0 bottom-0">
<Tooltip
content="유저들 👋"
animate={{
Expand Down Expand Up @@ -95,7 +95,7 @@ const Footer = () => {
<Button
type="button"
onClick={handleLogout}
className="flex justify-center items-center bg-orange-900"
className="flex justify-center items-center bg-secondary text-chat"
>
로그아웃
</Button>
Expand Down
30 changes: 26 additions & 4 deletions Components/Common/Header.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,17 +4,34 @@ import Image from 'next/image';
import Link from 'next/link';
import { usePathname } from 'next/navigation';
import React from 'react';
import icon_left from '@/public/icon_arrow_left.svg';

const Header = () => {
const pathname = usePathname();
let headerInfo = friends;
if (pathname === '/open') headerInfo = open;
else if (pathname === '/private') headerInfo = privates;
else if (pathname === '/search') headerInfo = search;

return (
<header className="flex w-full justify-between align-center py-3 bg-bglight">
<header
className={`flex relative w-full px-3 h-14 text-bgfill ${
headerInfo === search ? 'justify-center' : 'justify-between'
} align-center py-3 bg-bglight`}
>
{headerInfo === search && (
<Link href={'/open'}>
<Image
src={icon_left}
alt="뒤로가기"
width={25}
height={25}
className="absolute left-0"
/>
</Link>
)}
<strong className="text-3xl">{headerInfo.Heading}</strong>
<headerInfo.HeaderUl />
{headerInfo !== search && <headerInfo.HeaderUl />}
</header>
);
};
Expand All @@ -38,8 +55,8 @@ const UsersUl = () => {

const OpenUl = () => {
return (
<ul className="flex align-center gap-3">
<li className="flex align-center cursor-pointer">
<ul className="flex gap-3">
<li className="flex cursor-pointer items-center">
<Link href={'/searchmychat'}>
<Image
width={25}
Expand Down Expand Up @@ -68,4 +85,9 @@ const open = {
Heading: '오픈캣톡',
};

const search = {
HeaderUl: OpenUl,
Heading: '오픈채팅방',
};

export default Header;
0 Components/Wrapper.tsx → Components/Common/Wrapper.tsx
View file
File renamed without changes.
2 changes: 1 addition & 1 deletion Components/Join/DropZone/DropZone.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ const DropZone = ({ setFn, baseImageUrl }: DropZoneProps) => {
className="w-full h-full"
/>
) : (
<div className="w-full h-full flex flex-col justify-center items-center bg-white "></div>
<div className="w-full h-full flex flex-col justify-center items-center bg-bglight "></div>
)}
</div>
<Image
Expand Down
51 changes: 23 additions & 28 deletions Components/Open/ChatDivder/ChatDivider.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,41 +43,36 @@ const ChatDivder = ({ myChatList }: ChatListProps) => {
const { PersonalChat, MultiChat } = filterChat(chatList.chats);
return (
<>
<Tabs
value="personal"
className="overflow-y-scroll flex flex-col items-center w-full"
>
<div className="w-[95%] shadow-md">
<TabsHeader className=" w-72 bg-white">
{data.map((item) => (
<Tab
key={item.value}
value={item.value}
activeClassName="text-blue-500"
>
<div className="w-full flex items-center gap-2">
<Image
src={item.svg}
alt="candice"
width={10}
height={10}
className="rounded-full w-4 h-4 object-contain"
/>
<p>{item.label}</p>
</div>
</Tab>
))}
</TabsHeader>
</div>
<Tabs value="personal" className="h-full px-3">
<TabsHeader>
{data.map((item) => (
<Tab
key={item.value}
value={item.value}
activeClassName="text-blue-500"
>
<div className="w-full flex items-center gap-2">
<Image
src={item.svg}
alt="candice"
width={10}
height={10}
className="rounded-full w-4 h-4 object-contain"
/>
<p>{item.label}</p>
</div>
</Tab>
))}
</TabsHeader>
<TabsBody className="h-full">
<TabPanel value="personal" className="min-h-[calc(80vh)]">
<TabPanel value="personal" className="h-full overflow-y-scroll">
{PersonalChat.length ? (
<ChatList myChatList={PersonalChat} accessToken={accessToken} />
) : (
<h1 className="mx-auto my-2">개인 채팅방이 없습니다.</h1>
)}
</TabPanel>
<TabPanel value="multi" className="min-h-[calc(80vh)]">
<TabPanel value="multi" className="h-full overflow-y-scroll">
{MultiChat.length ? (
<ChatList myChatList={MultiChat} accessToken={accessToken} />
) : (
Expand Down
69 changes: 31 additions & 38 deletions Components/Open/ChatDivder/ChatDividerOpen.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,44 +35,37 @@ const OpenChatDivider = ({ myChatList }: ChatListProps) => {

const { PublicChat } = filterChat(chatList.chats);
return (
<>
<Tabs
value="open"
className="overflow-y-scroll w-full flex flex-col items-center"
>
<div className="w-[95%] shadow-md">
<TabsHeader className="w-56 bg-white">
{data.map((item) => (
<Tab
key={item.value}
value={item.value}
activeClassName="text-blue-500"
>
<div className="w-full flex items-center gap-2">
<Image
src={icon_people}
alt="candice"
width={10}
height={10}
className="rounded-full w-4 h-4 object-contain"
/>
<p>{item.label}</p>
</div>
</Tab>
))}
</TabsHeader>
</div>
<TabsBody>
<TabPanel value="open" className="min-h-[calc(80vh)]">
{PublicChat.length ? (
<ChatList myChatList={PublicChat} accessToken={accessToken} />
) : (
<h1 className="mx-auto my-2">오픈채팅방이 없습니다.</h1>
)}
</TabPanel>
</TabsBody>
</Tabs>
</>
<Tabs value="open" className="h-full px-3">
<TabsHeader>
{data.map((item) => (
<Tab
key={item.value}
value={item.value}
activeClassName="text-blue-500"
>
<div className="w-full flex items-center gap-2">
<Image
src={icon_people}
alt="candice"
width={10}
height={10}
className="rounded-full w-4 h-4 object-contain"
/>
<p>{item.label}</p>
</div>
</Tab>
))}
</TabsHeader>
<TabsBody className="h-full">
<TabPanel value="open" className="h-full overflow-y-scroll ">
{PublicChat.length ? (
<ChatList myChatList={PublicChat} accessToken={accessToken} />
) : (
<h1 className="mx-auto my-2">오픈채팅방이 없습니다.</h1>
)}
</TabPanel>
</TabsBody>
</Tabs>
);
};

Expand Down
4 changes: 3 additions & 1 deletion Components/Open/ChatGenerator/ChatGenerator.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,8 +16,10 @@ import { Inputs } from './ChatGenerator.type';
import { useFetchPostNewChat } from '@/hooks/Open/useFetchPostNewChat';
import { useCurrentSearchParams } from '@/hooks/Open/useCurrentSearchParmas';
import { getCookie } from '@/Components/Login/Cookie';
import useAsyncLoading from '@/hooks/Open/useAsyncLoading';

const ChatGenerator = () => {
const loadingControl = useAsyncLoading();
const accessToken = getCookie('accessToken');
const mutation = useFetchPostNewChat(accessToken);
const params = useCurrentSearchParams('type');
Expand All @@ -38,12 +40,12 @@ const ChatGenerator = () => {
};

const onSubmit: SubmitHandler<Inputs> = (data) => {
loadingControl(true);
mutation.mutate({
name: data.name,
users: data.users,
isPrivate: checkIsPrivateChat(),
});
handleModalClose();
};

const handleModalClose = () => {
Expand Down
2 changes: 1 addition & 1 deletion Components/Open/ChatGenerator/ChatGeneratorMenu/ChatGeneratorMenu.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,7 +22,7 @@ const ChatGeneratorMenu = ({ register }: RegisterFn) => {
return (
<Menu>
<MenuHandler>
<Button className="w-full">유저 초대하기</Button>
<Button className="w-full bg-secondary text-chat">유저 초대하기</Button>
</MenuHandler>
<MenuList className="absolute z-[62] max-h-64">
<MenuItem className="text-center text-xl font-bold">유저들</MenuItem>
Expand Down
10 changes: 5 additions & 5 deletions Components/Open/ChatList/ChatItem/ChatItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,33 +43,33 @@ const ChatItem = ({ chat }: ChatItemProps) => {
<div className="flex flex-row">
<Typography
variant="h6"
className="whitespace-normal text-chat mr-2"
className="whitespace-normal text-xs text-chat mr-2"
>
{chat.name}
</Typography>
<Typography
color="gray"
className=" flex gap-1 items-center text-xs font-thin"
className=" flex gap-1 items-center text-[8px] font-thin"
>
<Image
src={icon_people}
alt="candice"
width={10}
height={10}
className="rounded-full w-4 h-4 object-contain"
className="rounded-full w-3 h-3 object-contain"
/>
{`${chat.users.length}명 참여`}
</Typography>
</div>
<Typography
variant="small"
color="gray"
className="font-normal truncate"
className="font-normal truncate text-xs"
>
{`${koreanTime(chat.updatedAt)}`}
</Typography>
</div>
<Typography variant="h6" className="font-normal text-chat">
<Typography variant="h6" className="font-normal text-xs text-chat">
{chat.latestMessage
? chat.latestMessage.text
: '아직 채팅이 없습니다.'}
Expand Down
4 changes: 3 additions & 1 deletion Components/Open/ChatList/ChatList.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ import { DragDropContext, DropResult } from '@hello-pangea/dnd';
import { useFetchPatchDeleteChat } from '@/hooks/Open/useFetchPatchDeleteChat';
import ChatDroppableDelete from './ChatDroppable/ChatDroppableDelete';
import ChatDroppableList from './ChatDroppable/ChatDroppableList';
import useAsyncLoading from '@/hooks/Open/useAsyncLoading';

const setNewListData = (
sourceColumn: SourceColumnProps,
Expand All @@ -35,6 +36,7 @@ const setNewListData = (
};

const ChatList = ({ myChatList, accessToken }: ChatListProps) => {
const loadingControl = useAsyncLoading();
const mutation = useFetchPatchDeleteChat(accessToken as string);

const idAddedfilteredChatList = myChatList.map(
Expand Down Expand Up @@ -110,7 +112,7 @@ const ChatList = ({ myChatList, accessToken }: ChatListProps) => {
setNewListData(sourceColumn, newTaskIds, listData, setListData);

const queryId = myChatList[deleteChatIndex].id;
console.log(queryId);
loadingControl(true);
mutation.mutate({
chatId: queryId,
});
Expand Down
8 changes: 4 additions & 4 deletions Components/Open/SpeedDial/SpeedDial.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,18 +23,18 @@ const SpeedDialWithTextInside = () => {
};

return (
<div className="absolute z-50 bottom-3 right-3">
<div className="absolute shadow-xl rounded-full w-fit h-fit z-50 bottom-3 right-3">
<SpeedDial>
<SpeedDialHandler>
<div className="flex flex-col justify-center items-center text-center text-sm rounded-full shadow-2xl hover:scale-105 transition-all duration-500 ease-in-out w-16 h-16 bg-primary cursor-pointer">
<div className="flex flex-col justify-center items-center text-center text-sm rounded-full hover:scale-105 transition-all duration-500 ease-in-out w-16 h-16 bg-primary cursor-pointer">
채팅
<br />
만들기
</div>
</SpeedDialHandler>
<SpeedDialContent>
<SpeedDialAction
className="h-16 w-16"
className="h-16 w-16 shadow-md"
onClick={() => handleOpenModal('open')}
>
<Link href={`?${new URLSearchParams({ type: 'open' })}`}>
Expand All @@ -44,7 +44,7 @@ const SpeedDialWithTextInside = () => {
</Link>
</SpeedDialAction>
<SpeedDialAction
className="h-16 w-16"
className="h-16 w-16 shadow-md"
onClick={() => handleOpenModal('private')}
>
<Link href={`?${new URLSearchParams({ type: 'private' })}`}>
Expand Down
Loading

0 comments on commit 0c0cfa8

Please sign in to comment.