Skip to content

Commit

Permalink
Merge branch 'develop' into feature/#3
Browse files Browse the repository at this point in the history
  • Loading branch information
@suehub
suehub committed Nov 15, 2023
2 parents db44820 + 748d3a8 commit 44ce258
Showing 1 changed file with 149 additions and 117 deletions.
266 changes: 149 additions & 117 deletions src/components/Main/GameLists/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@ import useFetch from "../../../hooks/useFetch";
import useFireFetch from "../../../hooks/useFireFetch";
import { DocumentData } from "firebase/firestore";
import GameCard from "../GameCard";
import { useNavigate } from "react-router-dom";
import { useRecoilValue } from "recoil";
import UserConfigModal from "../../../components/Main/UserConfigModal";
import { useAuth } from "../../../hooks/useAuth";
import { authState } from "../../../recoil/atoms/authState";

interface ResponseValue {
accessToken: string; // 사용자 접근 토큰
Expand Down Expand Up @@ -67,6 +72,10 @@ interface GameRoom {
type ChatResponseValue = { chats: Chat[] };

const GameLists = () => {
const { isAuthenticated } = useRecoilValue(authState);
const { logout } = useAuth();
const navigate = useNavigate();
const [isUserConfigModalOpen, setIsUserConfigModalOpen] = useState(false);
const [token, setToken] = useState<ResponseValue>();
const [gameLists, setGameLists] = useState<(GameRoom | DocumentData)[]>([]);
const fireFetch = useFireFetch();
Expand Down Expand Up @@ -105,6 +114,15 @@ const GameLists = () => {
setGameLists(list);
};

const toggleUserConfigModal = () => {
setIsUserConfigModalOpen(!isUserConfigModalOpen);
};

const handleLogout = () => {
logout();
navigate("/");
};

useEffect(() => {
if (firebaseGameListsData && dbGame) {
mergeGameListsData(firebaseGameListsData, dbGame);
Expand All @@ -118,128 +136,142 @@ const GameLists = () => {
}
}, []);

return (
<Container
maxW="container.xl"
background="url(/src/assets/logo1.png) no-repeat left top #ecedee"
display="flex"
width="100%"
padding="10"
>
<Box
flex="7"
if (isAuthenticated) {
return (
<Container
maxW="container.xl"
background="url(/src/assets/logo1.png) no-repeat left top #ecedee"
display="flex"
flexDirection="column"
rowGap="5"
paddingRight="10"
width="100%"
padding="10"
>
<Box display="flex" justifyContent="space-between" paddingBottom="5">
<Text fontSize="3xl" fontWeight="800">
라이어 게임
</Text>
<Button
bg="blackAlpha.800"
color="white"
_hover={{ bg: "blackAlpha.900" }}
>
방 만들기
</Button>
</Box>
<Box overflowY="auto" maxHeight="350px">
<Grid templateColumns="repeat(2, 1fr)" gap={3}>
{gameLists.map((game) => (
<GameCard key={game.id} game={game} />
))}
</Grid>
</Box>
<Box bg="white" borderRadius="5">
<Box height="200px"></Box>
<InputGroup size="md">
<Input pr="5rem" placeholder="Enter password" />
<InputRightElement width="5.5rem">
<Button h="1.75rem" size="sm" textTransform="uppercase">
enter
</Button>
</InputRightElement>
</InputGroup>
<Box
flex="7"
display="flex"
flexDirection="column"
rowGap="5"
paddingRight="10"
>
<Box display="flex" justifyContent="space-between" paddingBottom="5">
<Text fontSize="3xl" fontWeight="800">
라이어 게임
</Text>
<Button
bg="blackAlpha.800"
color="white"
_hover={{ bg: "blackAlpha.900" }}
>
방 만들기
</Button>
</Box>
<Box overflowY="auto" maxHeight="350px">
<Grid templateColumns="repeat(2, 1fr)" gap={3}>
{gameLists.map((game) => (
<GameCard key={game.id} game={game} />
))}
</Grid>
</Box>
<Box bg="white" borderRadius="5">
<Box height="200px"></Box>
<InputGroup size="md">
<Input pr="5rem" placeholder="Enter password" />
<InputRightElement width="5.5rem">
<Button h="1.75rem" size="sm" textTransform="uppercase">
enter
</Button>
</InputRightElement>
</InputGroup>
</Box>
</Box>
</Box>
<Box flex="2" display="flex" flexDirection="column" rowGap="5">
<Card height="160px" padding="5" rowGap="5">
<Box
display="flex"
alignItems="center"
justifyContent="space-between"
>
<Box display="flex" alignItems="center" columnGap="3">
<Image
boxSize="50px"
objectFit="cover"
borderRadius="full"
src={userInfo?.user.picture}
alt="Dan Abramov"
/>
<Text>{userInfo?.user.name}</Text>
<Box flex="2" display="flex" flexDirection="column" rowGap="5">
<Card height="160px" padding="5" rowGap="5">
<Box
display="flex"
alignItems="center"
justifyContent="space-between"
>
<Box display="flex" alignItems="center" columnGap="3">
<Image
boxSize="50px"
objectFit="cover"
borderRadius="full"
src={userInfo?.user.picture}
alt="Dan Abramov"
/>
<Text>{userInfo?.user.name}</Text>
</Box>
<Box display="flex" columnGap="2">
{/* 설정 아이콘 버튼 */}
<button onClick={toggleUserConfigModal}>
<IoSettingsOutline />
</button>

{/* 사용자 설정 모달 */}
{isUserConfigModalOpen && (
<UserConfigModal
isOpen={isUserConfigModalOpen}
onClose={toggleUserConfigModal}
/>
)}
<BiBell />
</Box>
</Box>
<Box display="flex" columnGap="2">
<IoSettingsOutline />
<BiBell />
<Button
onClick={handleLogout}
width="71px"
height="32px"
fontSize="14px"
bg="blackAlpha.800"
color="white"
margin="0 auto"
_hover={{ bg: "blackAlpha.900", fontWeight: "800" }}
>
로그아웃
</Button>
</Card>
<Card padding="3" height="515">
<Text fontSize="large" fontWeight="800" textAlign="center">
유저 목록
</Text>
<Box
display="flex"
flexDirection="column"
rowGap="5"
paddingY="3"
overflowY="auto"
maxHeight="500px"
>
{loading ? (
<p>loading...</p>
) : (
userList?.map((user, index) => (
<Box
display="flex"
alignItems="center"
columnGap="2"
backgroundColor="blackAlpha.100"
paddingX="3"
paddingY="1"
borderRadius="5"
key={index}
>
<Image
boxSize="35px"
objectFit="cover"
borderRadius="full"
src={user.picture}
alt="Dan Abramov"
/>
<Text>{user.name}</Text>
</Box>
))
)}
</Box>
</Box>
<Button
width="71px"
height="32px"
fontSize="14px"
bg="blackAlpha.800"
color="white"
margin="0 auto"
_hover={{ bg: "blackAlpha.900", fontWeight: "800" }}
>
로그아웃
</Button>
</Card>
<Card padding="3" height="515">
<Text fontSize="large" fontWeight="800" textAlign="center">
유저 목록
</Text>
<Box
display="flex"
flexDirection="column"
rowGap="5"
paddingY="3"
overflowY="auto"
maxHeight="500px"
>
{loading ? (
<p>loading...</p>
) : (
userList?.map((user, index) => (
<Box
display="flex"
alignItems="center"
columnGap="2"
backgroundColor="blackAlpha.100"
paddingX="3"
paddingY="1"
borderRadius="5"
key={index}
>
<Image
boxSize="35px"
objectFit="cover"
borderRadius="full"
src={user.picture}
alt="Dan Abramov"
/>
<Text>{user.name}</Text>
</Box>
))
)}
</Box>
</Card>
</Box>
</Container>
);
</Card>
</Box>
</Container>
);
}
};

export default GameLists;

0 comments on commit 44ce258

Please sign in to comment.