[FE] issue323: 컴포넌트 개선

frontend/cypress/e2e/CreateStudyFormValidation.cy.tsx

@@ -24,7 +24,7 @@ describe('스터디 개설 페이지 폼 유효성 테스트', () => {
 
   const minText = 'a';
   const maxText30 = 'abcdefghijklmnopqrstuvwxyzabcd';
-  const redBorderCss = '1px solid rgb(255, 0, 0)';
+  const redBorderCss = '1px solid rgb(239, 94, 81)';
   const border = 'border';
 
   it(`스터디 제목은 최소 ${TITLE_LENGTH.MIN.VALUE}글자에서 최대 ${TITLE_LENGTH.MAX.VALUE}글자까지 입력할 수 있다.`, () => {

frontend/src/App.tsx

@@ -11,8 +11,6 @@ import { Navigate, Route, Routes } from 'react-router-dom';
 
 import { PATH } from '@constants';
 
-import tw from '@utils/tw';
-
 import { useAuth } from '@hooks/useAuth';
 
 import { Footer, Header, Main } from '@layout';
@@ -24,7 +22,7 @@ const App = () => {
 
   return (
     <div>
-      <Header css={tw`fixed top-0 left-0 right-0 z-2`} />
+      <Header />
       <Main>
         <Routes>
           <Route path={PATH.MAIN} element={<MainPage />} />
@@ -76,7 +74,7 @@ const App = () => {
           <Route path="*" element={<ErrorPage />} />
         </Routes>
       </Main>
-      <Footer marginBottom={'0'} />
+      <Footer />
     </div>
   );
 };

frontend/src/components/avatar/Avatar.stories.tsx

@@ -1,22 +1,17 @@
 import type { Story } from '@storybook/react';
 
-import Avatar from '@components/avatar/Avatar';
-import type { AvatarProps } from '@components/avatar/Avatar';
+import Avatar, { type AvatarProps } from '@components/avatar/Avatar';
 
 export default {
   title: 'Components/Avatar',
   component: Avatar,
-  argTypes: {
-    profileImg: { controls: 'text' },
-    profileAlt: { controls: 'text' },
-  },
 };
 
 const Template: Story<AvatarProps> = props => <Avatar {...props} />;
 
 export const Default = Template.bind({});
 Default.args = {
-  profileImg:
-    'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80',
-  profileAlt: '프로필 이미지',
+  src: 'https://images.unsplash.com/photo-1438761681033-6461ffad8d80?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1770&q=80',
+  name: '프로필 이미지',
+  size: 'sm',
 };

frontend/src/components/avatar/Avatar.style.tsx

@@ -1,52 +1,16 @@
-import { SerializedStyles, css } from '@emotion/react';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import type { AvatarProps } from '@components/avatar/Avatar';
+import type { CssLength } from '@custom-types';
 
-const dynamicSize = {
-  xs: css`
-    width: 30px;
-    min-width: 30px;
-    height: 30px;
-  `,
-  sm: css`
-    width: 36px;
-    min-width: 36px;
-    height: 36px;
-  `,
-  md: css`
-    width: 42px;
-    min-width: 42px;
-    height: 42px;
-  `,
-  lg: css`
-    width: 65px;
-    min-width: 65px;
-    height: 65px;
-  `,
+type StyledAvatarProps = {
+  size: CssLength;
 };
 
-type DynamicImageContainerFn = (props: Pick<AvatarProps, 'size'>) => SerializedStyles;
-
-const dynamicImageContainer: DynamicImageContainerFn = props => css`
-  ${dynamicSize[props.size]}
-`;
-
-export const Avatar = styled.div`
-  ${({ theme }) => css`
-    width: 36px;
-    min-width: 36px;
-    height: 36px;
-    border-radius: ${theme.radius.circle};
-    box-shadow: 0 1px 5px 0 ${theme.colors.secondary.dark};
-    overflow: hidden;
-    transition: opacity 0.2s ease;
-
-    &:hover,
-    &:active {
-      opacity: 0.9;
-    }
+export const Avatar = styled.div<StyledAvatarProps>`
+  ${({ size }) => css`
+    width: ${size};
+    min-width: ${size};
+    height: ${size};
   `}
-
-  ${dynamicImageContainer}
 `;

frontend/src/components/avatar/Avatar.tsx

@@ -1,20 +1,27 @@
-import type { MakeOptional } from '@custom-types';
+import type { CssLength, MakeOptional } from '@custom-types';
 
 import * as S from '@components/avatar/Avatar.style';
-import CenterImage from '@components/center-image/CenterImage';
+import Image from '@components/image/Image';
 
 export type AvatarProps = {
-  profileImg: string;
-  profileAlt: string;
-  size: 'xs' | 'sm' | 'md' | 'lg';
+  src: string;
+  name: string;
+  size: keyof typeof AVATAR_SIZE;
+};
+
+export const AVATAR_SIZE: Record<'sm' | 'md' | 'lg' | 'xl', CssLength> = {
+  sm: '30px',
+  md: '36px',
+  lg: '42px',
+  xl: '65px',
 };
 
 type OptionalAvatarProps = MakeOptional<AvatarProps, 'size'>;
 
-const Avatar: React.FC<OptionalAvatarProps> = ({ size = 'sm', profileImg, profileAlt }) => {
+const Avatar: React.FC<OptionalAvatarProps> = ({ size = 'md', src, name }) => {
   return (
-    <S.Avatar size={size}>
-      <CenterImage src={profileImg} alt={profileAlt} />
+    <S.Avatar size={AVATAR_SIZE[size]}>
+      <Image shape="circular" src={src} alt={name} width={AVATAR_SIZE[size]} height={AVATAR_SIZE[size]} />
     </S.Avatar>
   );
 };

frontend/src/components/button-group/ButtonGroup.stories.tsx

@@ -0,0 +1,30 @@
+import type { Story } from '@storybook/react';
+
+import ButtonGroup, { type ButtonGroupProps } from '@components/button-group/ButtonGroup';
+import BoxButton from '@components/button/box-button/BoxButton';
+
+export default {
+  title: 'Components/ButtonGroup',
+  component: ButtonGroup,
+};
+
+const Template: Story<ButtonGroupProps> = props => (
+  <ButtonGroup {...props}>
+    <BoxButton type="button">hi</BoxButton>
+    <BoxButton type="button" fluid variant="secondary">
+      hi
+    </BoxButton>
+    <BoxButton type="button" disabled>
+      hi
+    </BoxButton>
+  </ButtonGroup>
+);
+
+export const Default = Template.bind({});
+Default.args = {
+  orientation: 'vertical',
+  gap: '8px',
+  width: '200px',
+  height: '100px',
+};
+Default.parameters = { controls: { exclude: ['children'] } };

frontend/src/components/button-group/ButtonGroup.style.tsx

@@ -1,20 +1,24 @@
 import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
-import type { ButtonGroupProps } from '@components/button-group/ButtonGroup';
+import type { MakeRequired } from '@custom-types';
 
-const dynamicStyle: Record<ButtonGroupProps['variation'], any> = {
-  'flex-start': css`
-    justify-content: flex-start;
-  `,
-  'flex-end': css`
-    justify-content: flex-end;
-  `,
-};
+import { ButtonGroupProps } from './ButtonGroup';
 
-export const ButtonGroup = styled.div<ButtonGroupProps>`
-  ${({ variation }) => css`
+type StyledButtonGroupProps = MakeRequired<
+  Pick<ButtonGroupProps, 'orientation' | 'gap' | 'height' | 'width' | 'justifyContent' | 'alignItems'>,
+  'gap' | 'height' | 'orientation' | 'width'
+>;
+
+export const ButtonGroup = styled.div<StyledButtonGroupProps>`
+  ${({ orientation, gap, width, height, justifyContent, alignItems }) => css`
     display: flex;
-    ${dynamicStyle[variation]}
+    ${orientation === 'vertical' && 'flex-direction: column;'}
+    gap: ${gap};
+    ${justifyContent && `justify-content: ${justifyContent};`}
+    ${alignItems && `align-items: ${alignItems};`}
+
+    width: ${width};
+    height: ${height};
   `}
 `;

frontend/src/components/button-group/ButtonGroup.tsx

@@ -1,18 +1,35 @@
-import type { MakeOptional } from '@custom-types';
+import type { CssLength } from '@custom-types';
 
 import * as S from '@components/button-group/ButtonGroup.style';
 
 export type ButtonGroupProps = {
-  className?: string;
   children: React.ReactNode;
-  variation: 'flex-start' | 'flex-end';
+  width?: CssLength;
+  height?: CssLength;
+  orientation?: 'vertical' | 'horizontal';
+  justifyContent?: 'flex-start' | 'flex-end' | 'center' | 'space-between';
+  alignItems?: 'flex-start' | 'flex-end' | 'center' | 'space-between';
+  gap?: CssLength;
 };
 
-type OptionalButtonGroupProps = MakeOptional<ButtonGroupProps, 'variation'>;
-
-const ButtonGroup: React.FC<OptionalButtonGroupProps> = ({ className, children, variation = 'flex-end' }) => {
+const ButtonGroup: React.FC<ButtonGroupProps> = ({
+  children,
+  width = '100%',
+  height = 'fit-content',
+  orientation = 'horizontal',
+  justifyContent,
+  alignItems,
+  gap = 0,
+}) => {
   return (
-    <S.ButtonGroup className={className} variation={variation}>
+    <S.ButtonGroup
+      width={width}
+      height={height}
+      orientation={orientation}
+      gap={gap}
+      justifyContent={justifyContent}
+      alignItems={alignItems}
+    >
       {children}
     </S.ButtonGroup>
   );