Merge pull request #7 from TOY-2-9/T29-21--fetchUser

Feat: 유저 목록 불러오기 및 간단한 css

src/app/users/page.tsx

@@ -0,0 +1,61 @@
+'use client';
+import { SearchUser } from '@/components/Users/SearchUser';
+import { UserItem } from '@/components/Users/UserItem';
+import { instance } from '@/lib/api';
+import { useEffect, useState } from 'react';
+import styled from 'styled-components';
+
+interface User {
+    id: string;
+    password: string;
+    name: string;
+    picture: string;
+    chats: string[];
+}
+
+export default function Users() {
+    const [users, setUsers] = useState<User[] | []>([]);
+    const getUsers = async () => {
+        try {
+            const res = await instance.get<any, User[]>('/users');
+            setUsers(res);
+        } catch (error) {
+            console.log(error);
+        }
+    };
+
+    useEffect(() => {
+        getUsers();
+    }, []);
+
+    return (
+        <UsersWrap>
+            <div className="header-text_wrap">
+                <HeaderText>사용자 목록</HeaderText>
+            </div>
+            <SearchUser />
+            <UserList>
+                {users &&
+                    users.map((user: User) => {
+                        return <UserItem key={user.id} user={user} />;
+                    })}
+            </UserList>
+        </UsersWrap>
+    );
+}
+
+const UsersWrap = styled.div`
+    padding: 3rem;
+
+    display: flex;
+    flex-direction: column;
+    gap: 10;
+`;
+
+const HeaderText = styled.h1`
+    color: #00956e;
+`;
+
+const UserList = styled.div`
+    margin-top: 2rem;
+`;

src/components/Users/SearchUser.tsx

@@ -0,0 +1,7 @@
+export const SearchUser = () => {
+    return (
+        <div className="search_wrap">
+            <input className="search" type="text" placeholder="사용자를 검색해보세요" />
+        </div>
+    );
+};

src/components/Users/UserItem.tsx

@@ -0,0 +1,57 @@
+'use client';
+import styled from 'styled-components';
+
+interface User {
+    id: string;
+    password: string;
+    name: string;
+    picture: string;
+    chats: string[];
+}
+
+export const UserItem = ({ user }: { user: User }) => {
+    const { name, picture } = user;
+    return (
+        <User>
+            <UserImg src={picture} />
+            <UserInfo>
+                <h2>{name}</h2>
+                <p>online</p>
+            </UserInfo>
+        </User>
+    );
+};
+
+const User = styled.div`
+    display: flex;
+    flex-direction: row;
+    margin-bottom: 2rem;
+    gap: 2.5rem;
+
+    border-radius: 20px;
+
+    box-shadow: 0px 4px 30px 0px rgba(0, 0, 0, 0.15);
+    background-color: white;
+
+    padding: 1rem 2rem;
+
+    cursor: pointer;
+
+    &:hover {
+        opacity: 70%;
+        transition: 0.4s;
+    }
+`;
+
+const UserImg = styled.img`
+    width: 60px;
+    height: 60px;
+    border-radius: 70%;
+    overflow: hidden;
+
+    margin-top: 5px;
+`;
+
+const UserInfo = styled.div`
+    line-height: 10px;
+`;