Merge pull request #21 from KWEBofficial/feature/user-profile-page

Feature/user profile page

src/data/messages.ts

@@ -36,6 +36,8 @@ export const USER_MESSAGE = {
   USER_CLOTHES_NOT_FOUND: '사용자의 옷을 찾을 수 없어요 :(',
   USER_NOT_FOUND: '사용자를 찾을 수 없어요 :(',
 };
+
 export const LEND_MESSAGE = {
   LEND_LIST_FAIL: '대여 내역을 불러오지 못했습니다 :(',
 };
+

src/pages/UserProfile/index.tsx

@@ -0,0 +1,69 @@
+import { useParams } from 'react-router-dom';
+import { useEffect, useState } from 'react';
+import { Box, Grid, Typography } from '@mui/material';
+
+import { UserClothes, UserProfile, getUserClothesAPICall, getUserProfileAPICall } from '../../hooks/api/user/user';
+import ClothPreviewCard from '../../components/ClothesPreviewCard';
+
+export function UserProfilePage() {
+  const { id } = useParams();
+  const userId = Number(id);
+  const [clothes, setClothes] = useState<UserClothes[] | null>(null);
+  const [profile, setProfile] = useState<UserProfile | null>(null);
+  const getUserClothes = async () => {
+    try {
+      const result = await getUserClothesAPICall(userId);
+      setClothes(result);
+    } catch (error) {
+      //
+    }
+  };
+  const getUserProfile = async () => {
+    try {
+      const result = await getUserProfileAPICall(userId);
+      setProfile(result);
+    } catch (error) {
+      //
+    }
+  };
+  useEffect(() => {
+    getUserClothes();
+    getUserProfile();
+  }, [userId]);
+  return (
+    <Box display={'flex'} flexDirection={'column'} alignItems={'center'}>
+      <Box sx={{ mb: 4 }} display={'flex'} flexDirection={'column'} alignItems={'center'}>
+        <Typography sx={{ mt: 5, mb: 0.5 }} variant="h3" fontWeight={'bold'}>
+          {profile?.nickname}
+        </Typography>
+        <Typography variant="h6">{profile?.location}</Typography>
+      </Box>
+
+      {clothes?.length ? (
+        <Box display={'flex'} width={1200}>
+          <Grid container spacing={3} justifyContent={'flex-start'} display={'flex'} flexDirection={'row'}>
+            {clothes.map((cloth) => (
+              <Grid item key={cloth.id}>
+                <ClothPreviewCard
+                  clothesId={cloth.id}
+                  clothesname={cloth.name}
+                  status={cloth.status}
+                  userid={userId}
+                  username={profile?.nickname ?? ''}
+                  isWished={cloth.isWished}
+                  imgsrc={cloth.image ?? ''}
+                />
+              </Grid>
+            ))}
+          </Grid>
+        </Box>
+      ) : (
+        <Box display={'flex'} flexDirection={'column'} alignItems={'center'}>
+          <Typography variant="h6" sx={{ color: 'gray', mt: 5 }}>
+            사용자가 보유한 옷이 없어요
+          </Typography>
+        </Box>
+      )}
+    </Box>
+  );
+}

src/route/index.tsx

@@ -1,5 +1,6 @@
 import { Route, Routes } from 'react-router-dom';
 
+import { UserProfilePage } from '../pages/UserProfile';
 import { RegisterPage } from '../pages/Register';
 import { ProfilePage } from '../pages/Profile';
 import MyPageWish from '../pages/MyPage/wish';
@@ -28,6 +29,7 @@ export function RouteComponent() {
       <Route path="/mypage/apply" element={<MyPageApply />} />
       <Route path="/mypage/lend" element={<MyPageLend />} />
       <Route path="/mypage/wish" element={<MyPageWish />} />
+      <Route path="/user/:id" element={<UserProfilePage />} />
     </Routes>
   );
 }