[Wip] 공통 컴포넌트 제작(4-1) UserContentBlock

.storybook/main.ts

@@ -7,7 +7,8 @@ const config: StorybookConfig = {
     '@storybook/addon-essentials',
     '@storybook/addon-onboarding',
     '@storybook/addon-interactions',
-    '@chakra-ui/storybook-addon'
+    '@chakra-ui/storybook-addon',
+    'storybook-addon-react-router-v6'
   ],
   framework: {
     name: '@storybook/react-vite',

package.json

@@ -52,6 +52,7 @@
     "lint-staged": "^15.2.0",
     "prettier": "^3.1.1",
     "storybook": "^7.6.6",
+    "storybook-addon-react-router-v6": "^2.0.10",
     "typescript": "^5.2.2",
     "vite": "^5.0.8",
     "vitest": "^1.1.0"

src/components/Footer/index.tsx

@@ -1,5 +1,5 @@
 import { DEFAULT_HEADER_HEIGHT, DEFAULT_WIDTH } from '@/constants/style';
-import { Flex } from '@chakra-ui/react';
+import { Flex, FlexProps } from '@chakra-ui/react';
 import {
   MdHome,
   MdEmojiEvents,
@@ -9,15 +9,7 @@ import {
 } from 'react-icons/md';
 import TextIconButton from '../common/TextIconButton';
 
-interface FooterProps {
-  width?: number | string;
-  height?: number | string;
-}
-
-const Footer = ({
-  width = DEFAULT_WIDTH,
-  height = DEFAULT_HEADER_HEIGHT,
-}: FooterProps) => {
+const Footer = ({ ...props }: FlexProps) => {
   return (
     <Flex
       pl="31px"
@@ -27,8 +19,9 @@ const Footer = ({
       borderColor="gray.450"
       align="center"
       bg="gray.50"
-      w={typeof width === 'string' ? width : `${width}px`}
-      h={typeof height === 'string' ? height : `${height}px`}
+      w={DEFAULT_WIDTH}
+      h={DEFAULT_HEADER_HEIGHT}
+      {...props}
     >
       {/* [{icon:MdHome, textContent:"홈"}, ...]  이렇게 받아와서 map을 돌려도 좋아보입니다*/}
       <TextIconButton TheIcon={MdHome} textContent="홈" />

src/components/common/UserContentBlock/index.tsx

@@ -0,0 +1,107 @@
+import { DEFAULT_PAGE_PADDING, DEFAULT_WIDTH } from '@/constants/style';
+import {
+  Avatar,
+  AvatarBadge,
+  Flex,
+  FlexProps,
+  Text,
+  VStack,
+} from '@chakra-ui/react';
+import { useNavigate } from 'react-router-dom';
+
+interface UserContentBlockProps extends FlexProps {
+  userImage?: string;
+  userImageSize?: string | number;
+  isOnline?: boolean;
+  username: string;
+  content: string;
+  subContent?: string;
+  usernameFontSize?: string | number;
+  contentFontSize?: string | number;
+  href?: string;
+  onSubContentClick?: () => void;
+}
+
+const UserContentBlock = ({
+  userImage = '',
+  userImageSize = '50px',
+  href,
+  content,
+  isOnline,
+  subContent,
+  onSubContentClick,
+  username = '테스트용',
+  usernameFontSize = '1.4rem',
+  contentFontSize = '1.2rem',
+  ...props
+}: UserContentBlockProps) => {
+  const navigate = useNavigate();
+  const onNavigate = () => navigate(`${href}`);
+  return (
+    <Flex
+      w={DEFAULT_WIDTH}
+      align="center"
+      gap="17px"
+      onClick={() => href && onNavigate()}
+      cursor="pointer"
+      pl={DEFAULT_PAGE_PADDING}
+      pr={DEFAULT_PAGE_PADDING}
+      {...props}
+    >
+      <Avatar
+        src={userImage}
+        boxSize={
+          userImageSize && typeof userImageSize === 'string'
+            ? userImageSize
+            : `${userImageSize}px`
+        }
+        boxShadow="0px 5px 15px -5px gray"
+      >
+        {isOnline ? (
+          <AvatarBadge
+            boxSize="14px"
+            border="2px solid white"
+            bg="green.100"
+            right="5%"
+            bottom="5%"
+          />
+        ) : null}
+      </Avatar>
+      <VStack flex="1" align="left" color="black">
+        <Flex w="100%" position="relative">
+          <Text
+            fontWeight="semibold"
+            fontSize={
+              typeof usernameFontSize === 'string'
+                ? usernameFontSize
+                : `${usernameFontSize}px`
+            }
+          >
+            {username}
+          </Text>
+          <Text
+            fontSize="1.2rem"
+            position="absolute"
+            right="0"
+            zIndex="normal"
+            cursor={onSubContentClick && 'pointer'}
+            onClick={() => onSubContentClick && onSubContentClick()}
+          >
+            {subContent}
+          </Text>
+        </Flex>
+        <Text
+          fontSize={
+            typeof contentFontSize === 'string'
+              ? contentFontSize
+              : `${contentFontSize}px`
+          }
+        >
+          {content}
+        </Text>
+      </VStack>
+    </Flex>
+  );
+};
+
+export default UserContentBlock;

src/pages/MainPage/index.tsx

@@ -5,7 +5,7 @@ import GuestProfile from '@/pages/MainPage/GuestProfile';
 import LoginProfile from '@/pages/MainPage/LoginProfile';
 
 interface MainPageProps {
-  isLoggedIn: boolean;
+  isLoggedIn?: boolean;
 }
 
 const MainPage = ({ isLoggedIn = false }: MainPageProps) => {

src/stories/components/UserContentBlock.stories.ts

@@ -0,0 +1,50 @@
+import UserContentBlock from '@/components/common/UserContentBlock';
+import { Meta, StoryObj } from '@storybook/react';
+import { withRouter } from 'storybook-addon-react-router-v6';
+const meta: Meta<typeof UserContentBlock> = {
+  component: UserContentBlock,
+  decorators: [withRouter],
+  argTypes: {
+    width: {
+      control: 'number',
+    },
+    height: {
+      control: 'number',
+    },
+    username: {
+      control: 'text',
+    },
+    content: {
+      control: 'text',
+    },
+    isOnline: {
+      control: 'boolean',
+    },
+    userImage: {
+      control: 'text',
+    },
+    usernameFontSize: {
+      control: 'number',
+    },
+    contentFontSize: {
+      control: 'number',
+    },
+    subContent: {
+      control: 'text',
+    },
+  },
+};
+
+export default meta;
+type Story = StoryObj<typeof UserContentBlock>;
+
+export const Deafult: Story = {
+  args: {
+    width: 428,
+    height: 80,
+    username: '테스트닉',
+    content: '테스트용 내용',
+    isOnline: true,
+    subContent: '7일 전',
+  },
+};

src/theme/index.ts

@@ -35,6 +35,9 @@ export const theme = extendTheme({
     red: {
       100: '#EF4444',
     },
+    green: {
+      100: '#44DE82',
+    },
     black: '#222222',
 
     white: '#FFFFFF',
@@ -64,4 +67,7 @@ export const theme = extendTheme({
   sizes: {
     icon: '2.4rem',
   },
+  zIndices: {
+    normal: 100,
+  },
 });