User info desktop/#81

app/(sub-page)/my/page.tsx

@@ -1,14 +1,20 @@
 import LectureSearch from '@/app/ui/lecture/lecture-search';
 import TakenLecture from '@/app/ui/lecture/taken-lecture';
+import UserInfoNavigator, { UserInfoNavigatorSkeleton } from '@/app/ui/user/user-info-navigator/user-info-navigator';
 import ContentContainer from '@/app/ui/view/atom/content-container';
 import Drawer from '@/app/ui/view/molecule/drawer/drawer';
 import { DIALOG_KEY } from '@/app/utils/key/dialog.key';
+import { Suspense } from 'react';
 
 export default function MyPage() {
   return (
     <>
       <ContentContainer className="flex">
-        <div className="hidden lg:w-[30%] lg:block">정보칸</div>
+        <div className="hidden lg:w-[30%] lg:block">
+          <Suspense fallback={<UserInfoNavigatorSkeleton />}>
+            <UserInfoNavigator />
+          </Suspense>
+        </div>
         <div className="w-full lg:w-[70%] lg:px-[20px]">
           <TakenLecture />
         </div>

app/mocks/handlers/user-handler.mock.ts

@@ -33,12 +33,12 @@ export const userHandlers = [
   }),
   http.get<never, never, UserInfoResponse | ErrorResponseData>(`${API_PATH.user}`, async ({ request }) => {
     const accessToken = request.headers.get('Authorization')?.replace('Bearer ', '');
-    if (!accessToken) {
+    if (accessToken === 'undefined' || !accessToken) {
       return HttpResponse.json({ status: 401, message: 'Unauthorized' }, { status: 401 });
     }
 
     const userInfo = mockDatabase.getUserInfo(mockDecryptToken(accessToken).authId);
-    await delay(500);
+    await delay(3000);
 
     if (!userInfo) {
       return HttpResponse.json({ status: 401, message: 'Unauthorized' }, { status: 401 });

app/ui/user/user-info-navigator/user-info-navigator.tsx

@@ -0,0 +1,41 @@
+import Avatar from '../../view/atom/avatar/avatar';
+import Button from '../../view/atom/button/button';
+import { getUserInfo } from '@/app/business/user/user.query';
+import Skeleton from '../../view/atom/skeleton';
+
+export default async function UserInfoNavigator() {
+  const userInfo = await getUserInfo();
+
+  return (
+    <div className="flex flex-col items-center p-4 ">
+      <Avatar className="w-24 h-24" alt="Profile picture" src={'/assets/profile-image.png'} />
+
+      <div className="my-5 text-lg">
+        <span className="font-semibold">{userInfo.studentName}</span>
+        <span>님</span>
+      </div>
+      <div className="mb-3 text-sm">{userInfo.major}</div>
+      <div className="text-sm text-gray-400">{userInfo.studentNumber}</div>
+
+      <div className="mt-9">
+        <Button size="sm" variant="secondary" label="로그아웃" />
+      </div>
+      <div className="mt-2">
+        <Button size="sm" variant="text" label="회원탈퇴하기" />
+      </div>
+    </div>
+  );
+}
+
+export function UserInfoNavigatorSkeleton() {
+  return (
+    <div className="flex flex-col items-center p-4  space-y-3">
+      <Skeleton className="h-24 w-24 rounded-full" />
+      <div className="space-y-6">
+        <Skeleton className="h-4 w-24" />
+        <Skeleton className="h-4 w-32" />
+        <Skeleton className="h-4 w-32" />
+      </div>
+    </div>
+  );
+}

app/ui/view/atom/avatar/avatar.stories.tsx

@@ -0,0 +1,17 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Avatar from './avatar';
+
+const meta = {
+  title: 'ui/view/atom/Avatar',
+  component: Avatar,
+} as Meta<typeof Avatar>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    src: './assets/profile-image.png',
+  },
+};

app/ui/view/atom/avatar/avatar.tsx

@@ -0,0 +1,57 @@
+'use client';
+
+import * as React from 'react';
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+
+import { cn } from '@/app/utils/shadcn/utils';
+
+interface AvatarProps {
+  src: string;
+  fallback?: React.ReactNode;
+  alt?: string;
+  className?: string;
+}
+
+export default function Avatar({ src, fallback, alt, className }: AvatarProps) {
+  return (
+    <AvatarRoot className={className}>
+      <AvatarImage src={src} alt={alt} />
+      <AvatarFallback>{fallback}</AvatarFallback>
+    </AvatarRoot>
+  );
+}
+
+const AvatarRoot = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+));
+AvatarRoot.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-slate-100 dark:bg-slate-800',
+      className,
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;

app/ui/view/atom/skeleton.tsx

@@ -0,0 +1,5 @@
+import { cn } from '@/app/utils/shadcn/utils';
+
+export default function Skeleton({ className, ...props }: React.HTMLAttributes<HTMLDivElement>) {
+  return <div className={cn('animate-pulse rounded-md bg-slate-100 dark:bg-slate-800', className)} {...props} />;
+}

package.json

@@ -26,6 +26,7 @@
     "@heroicons/react": "^2.1.1",
     "@mswjs/http-middleware": "^0.9.2",
     "@radix-ui/react-alert-dialog": "^1.0.5",
+    "@radix-ui/react-avatar": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
     "@radix-ui/react-icons": "^1.3.0",
     "@radix-ui/react-slot": "^1.0.2",