Refactor/#23: MobileView 375px에서 420px로 확장 대응 (#24)

* refactor: Button 컴포넌트 Emotion 다형성 컴포넌트 방식으로 변경 및 속성 추가

* refactor: TabLayout 420px 변경 대응

* refactor: Badge 컴포넌트 children 타입 number 추가

* refactor: Header maxWidth 420px 로 변경

* refactor: navigation maxWidth 420px로 변경

* refactor: ImageView 컴포넌트 추가

Image가 예약어인 관계로 ImageView로 네이밍을 한다.

* refactor: BottomSheet 420px 대응 및 내부 요소에 따라 높이 자동 조절토록 변경

* feat: Profile 관련 누락된 SVG 컴포넌트 추가

* storybook: SVG Profile Storybook 추가

* refactor: Badge 컴포넌트 children을 ReactNode 타입으로 확장

* storybook: ImageView 컴포넌트 스토리북 추가

* chore: 0.4.6 버저닝 업데이트

* storybook: Button 컴포넌트 수정사항 대응

* refactor: default image SVG 컴포넌트 대신 PNG 파일로 export 하여 ImageView 컴포넌트와 활용하여 사용

* chore: 0.4.7 버전 배포

* chore: 0.4.8 버전 배포 잘못된 default image 수정하여 재배포

package.json

@@ -1,7 +1,7 @@
 {
   "name": "concept-be-design-system",
   "description": "컨셉비 디자인 시스템",
-  "version": "0.4.5",
+  "version": "0.4.8",
   "type": "module",
   "main": "dist/index.js",
   "module": "dist/index.js",

src/App.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 
-import { Spacer } from '.';
+import { Button, Spacer } from '.';
 import Child from './Child';
 import CheckboxContainer from './components/CheckboxContainer/CheckboxContainer';
 import Dropdown from './components/Dropdown/Dropdown';
@@ -149,6 +149,8 @@ const App = () => {
         ))}
       </Dropdown>
 
+      <Button>버튼 테스트</Button>
+
       <CheckboxContainer
         label="가입 목적"
         checkboxKey="goal"

src/components/Badge/Badge.tsx

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { ComponentPropsWithoutRef, ElementType } from 'react';
+import { ComponentPropsWithoutRef, ElementType, ReactNode } from 'react';
 
 import { ColorType } from '../../styles/theme';
 
@@ -10,7 +10,7 @@ type Props<T extends ElementType> = {
   as?: T;
   backgroundColor?: BackgroundColorType;
   fontColor?: FontColorType;
-  children: string;
+  children: ReactNode;
 } & ComponentPropsWithoutRef<T>;
 
 const Badge = <T extends ElementType>({

src/components/BottomSheet/BottomSheet.tsx

@@ -33,16 +33,18 @@ const BottomSheetWrapper = styled.div<{ isOpen: boolean }>`
   bottom: ${(props) => (props.isOpen ? '0' : '-100vh')};
   left: 0;
   right: 0;
+  margin: 0 auto;
+  width: auto;
+  height: max-content;
+  max-width: 420px;
+  max-height: 90%;
+  min-height: 70%;
   background-color: #fff;
-  height: 80%;
-  transition: bottom 0.3s ease-in-out;
-  overflow: auto;
   box-shadow: 0 -2px 4px rgba(0, 0, 0, 0.2);
-  z-index: 9999;
   border-radius: 14px 14px 0 0;
-  max-width: 375px;
-  width: auto;
-  margin: 0 auto;
+  overflow: auto;
+  z-index: 9999;
+  transition: bottom 0.3s ease-in-out;
 `;
 
 const Overlay = styled.div`

src/components/Button/Button.tsx

@@ -1,49 +1,48 @@
 import styled from '@emotion/styled';
-import {
-  ComponentPropsWithoutRef,
-  ReactNode,
-  ElementType,
-  MouseEventHandler,
-} from 'react';
 
-type Props<T extends ElementType> = {
-  children: ReactNode;
-  as?: T;
-  onClick?: MouseEventHandler<HTMLButtonElement>;
-  isGrayOut?: boolean;
-} & ComponentPropsWithoutRef<T>;
-
-const Button = <T extends ElementType>({
-  as,
-  onClick = () => {},
-  isGrayOut = false,
-  children,
-  ...attributes
-}: Props<T>) => {
-  const tag = as || 'button';
+import { convertCSS } from '../..';
 
-  return (
-    <Wrapper as={tag} onClick={onClick} isGrayOut={isGrayOut} {...attributes}>
-      {children}
-    </Wrapper>
-  );
-};
-
-export default Button;
+export interface Props {
+  width?: number | string;
+  height?: number | string;
+  minWidth?: number | string;
+  minHeight?: number | string;
+  maxWidth?: number | string;
+  maxHeight?: number | string;
+  padding?: string;
+  paddingTop?: number | string;
+  paddingRight?: number | string;
+  paddingBottom?: number | string;
+  paddingLeft?: number | string;
+  isGrayOut?: boolean;
+}
 
-const Wrapper = styled.button<{ isGrayOut: boolean }>`
+const Button = styled.button<Props>`
   display: flex;
   justify-content: center;
   align-items: center;
+  border: none;
+  border-radius: 6px;
+  cursor: pointer;
+  width: ${({ width }) => (width ? convertCSS(width) : '100%')};
+  height: ${({ height }) => height && convertCSS(height)};
+  min-width: ${({ minWidth }) => minWidth && convertCSS(minWidth)};
+  min-height: ${({ minHeight }) => minHeight && convertCSS(minHeight)};
+  max-width: ${({ maxWidth }) => maxWidth && convertCSS(maxWidth)};
+  max-height: ${({ maxHeight }) => maxHeight && convertCSS(maxHeight)};
   background-color: ${({ isGrayOut, theme }) =>
     isGrayOut ? theme.color.bg1 : theme.color.c1};
   color: ${({ isGrayOut, theme }) =>
     isGrayOut ? theme.color.b : theme.color.w1};
-  border: none;
-  border-radius: 6px;
   font-size: ${({ theme }) => theme.font.suit16sb.fontSize}px;
   font-weight: ${({ theme }) => theme.font.suit16sb.fontWeight};
-  width: 100%;
-  padding: 17px 28px;
-  cursor: pointer;
+  padding: ${({ padding }) => (padding ? padding : '17px 28px')};
+  padding-top: ${({ paddingTop }) => paddingTop && convertCSS(paddingTop)};
+  padding-right: ${({ paddingRight }) =>
+    paddingRight && convertCSS(paddingRight)};
+  padding-bottom: ${({ paddingBottom }) =>
+    paddingBottom && convertCSS(paddingBottom)};
+  padding-left: ${({ paddingLeft }) => paddingLeft && convertCSS(paddingLeft)};
 `;
+
+export default Button;

src/components/Header/Header.tsx

@@ -35,7 +35,7 @@ const Wrapper = styled.header<{ main?: boolean }>`
   position: fixed;
   box-sizing: border-box;
   width: 100%;
-  max-width: 375px;
+  max-width: 420px;
   top: 0;
   z-index: 1;
 `;

src/components/ImageView/ImageView.tsx

@@ -0,0 +1,58 @@
+import styled from '@emotion/styled';
+import { ImgHTMLAttributes, SyntheticEvent } from 'react';
+
+import { convertCSS } from '../..';
+
+interface Props extends ImgHTMLAttributes<HTMLImageElement> {
+  width?: number | string;
+  height?: number | string;
+  maxWidth?: number | string;
+  maxHeight?: number | string;
+  objectFit?: string;
+  borderRadius?: number | string;
+  ratio?: string;
+  defaultSrc?: string;
+}
+const ImageView = ({
+  src,
+  alt,
+  width = '100%',
+  height = '100%',
+  maxWidth,
+  maxHeight,
+  objectFit = 'cover',
+  borderRadius,
+  ratio,
+  defaultSrc,
+}: Props) => {
+  return (
+    <StyledImage
+      src={src}
+      alt={alt}
+      width={width}
+      height={height}
+      maxWidth={maxWidth}
+      maxHeight={maxHeight}
+      objectFit={objectFit}
+      borderRadius={borderRadius}
+      ratio={ratio}
+      onError={(e: SyntheticEvent<HTMLImageElement, Event>) => {
+        if (defaultSrc) e.currentTarget.src = defaultSrc;
+      }}
+    />
+  );
+};
+
+const StyledImage = styled.img<Props>`
+  display: block;
+  width: ${({ width }) => width && convertCSS(width)};
+  height: ${({ height }) => height && convertCSS(height)};
+  max-width: ${({ maxWidth }) => maxWidth && convertCSS(maxWidth)};
+  max-height: ${({ maxHeight }) => maxHeight && convertCSS(maxHeight)};
+  object-fit: ${({ objectFit }) => objectFit};
+  border-radius: ${({ borderRadius }) =>
+    borderRadius && convertCSS(borderRadius)};
+  aspect-ratio: ${({ ratio }) => ratio};
+`;
+
+export default ImageView;

src/components/Navigation/Navigation.tsx

@@ -28,7 +28,7 @@ const Wrapper = styled.div`
   width: 100%;
   left: 50%;
   transform: translateX(-50%);
-  max-width: 375px;
+  max-width: 420px;
 `;
 
 const NavBackImg = styled.img`

src/components/TabLayout/TabLayout.tsx

@@ -11,14 +11,18 @@ interface TabProps {
 
 interface Props {
   width?: number | string;
+  maxWidth?: number | string;
   height?: number | string;
+  maxHeight?: number | string;
   tabBoxHeight?: number | string;
   children: ReactNode;
 }
 
 const TabLayout = ({
-  width = 375,
-  height = 400,
+  width,
+  maxWidth,
+  height,
+  maxHeight,
   tabBoxHeight = 50,
   children,
   ...attributes
@@ -29,7 +33,7 @@ const TabLayout = ({
   const [position, setPosition] = useState(0);
 
   return (
-    <Wrapper width={width} {...attributes}>
+    <Wrapper width={width} maxWidth={maxWidth} {...attributes}>
       <TabBoxesWrapper tabBoxHeight={tabBoxHeight}>
         {childrenElements.map((children, idx) => (
           <TabBox
@@ -44,7 +48,7 @@ const TabLayout = ({
       {childrenElements.map(
         (children, idx) =>
           position === idx && (
-            <TabPanel key={children.key} height={height}>
+            <TabPanel key={children.key} height={height} maxHeight={maxHeight}>
               {children}
             </TabPanel>
           ),
@@ -57,8 +61,9 @@ TabLayout.Tab = Tab;
 
 export default TabLayout;
 
-const Wrapper = styled.div<{ width: number | string }>`
+const Wrapper = styled.div<Partial<Props>>`
   width: ${({ width }) => width && convertCSS(width)};
+  max-width: ${({ maxWidth }) => maxWidth && convertCSS(maxWidth)};
   margin: 0 auto;
   position: relative;
 `;
@@ -84,7 +89,8 @@ const TabBox = styled.div<{ active: boolean }>`
   box-sizing: border-box;
 `;
 
-const TabPanel = styled.div<{ height: number | string }>`
+const TabPanel = styled.div<Partial<Props>>`
   width: 100%;
   height: ${({ height }) => height && convertCSS(height)};
+  max-height: ${({ maxHeight }) => maxHeight && convertCSS(maxHeight)};
 `;

src/index.ts

@@ -1,5 +1,8 @@
 import PNGAgreementBackground from './assets/image/agreement_bg.png';
 import PNGBottomBackground from './assets/image/bottom_bg.png';
+import PNGDefaultProfileInfo100 from './assets/image/default_login_profile.png';
+import PNGDefaultProfileBackground from './assets/image/default_profile_background.png';
+import PNGDefaultProfileInfo36 from './assets/image/default_profile_info.png';
 import PNGErrorBackground from './assets/image/error_back.png';
 import PNGIdeaBackground1 from './assets/image/idea_back_1.png';
 import PNGIdeaBackground2 from './assets/image/idea_back_2.png';
@@ -16,6 +19,7 @@ import Dropdown from './components/Dropdown/Dropdown';
 import Field from './components/Field/Field';
 import Flex from './components/Flex/Flex';
 import Header from './components/Header/Header';
+import ImageView from './components/ImageView/ImageView';
 import Navigation from './components/Navigation/Navigation';
 import RadioContainer from './components/RadioContainer/RadioContainer';
 import Spacer from './components/Spacer/Spacer';
@@ -71,8 +75,6 @@ export { ReactComponent as SVGLoginImageWrite } from './assets/svg/login/image_w
 export { ReactComponent as SVGLoginNaver } from './assets/svg/login/naver.svg';
 export { ReactComponent as SVGLoginKakao } from './assets/svg/login/kakao.svg';
 export { ReactComponent as SVGLoginLogo } from './assets/svg/login/login_logo.svg';
-export { ReactComponent as SVGLoginDefaultImage } from './assets/svg/login/default_image.svg';
-export { ReactComponent as SVGLoginDefaultProfile } from './assets/svg/login/default_profile.svg';
 
 export { ReactComponent as SVGFeedWrite40 } from './assets/svg/feed/write40.svg';
 export { ReactComponent as SVGFeedLike } from './assets/svg/feed/like.svg';
@@ -84,6 +86,9 @@ export { ReactComponent as SVGFeedUnLike } from './assets/svg/feed/unlike.svg';
 export { ReactComponent as SVGFeedUnScrap } from './assets/svg/feed/unscrap.svg';
 export { ReactComponent as SVGMore24 } from './assets/svg/feed/more.svg';
 
+export { ReactComponent as SVGProfileMessageDots } from './assets/svg/profile/message_dots_circle.svg';
+export { ReactComponent as SVGProfileBookOpen } from './assets/svg/profile/book_open.svg';
+
 export {
   Badge,
   BottomSheet,
@@ -95,6 +100,7 @@ export {
   Field,
   Flex,
   Header,
+  ImageView,
   Navigation,
   RadioContainer,
   Spacer,
@@ -117,4 +123,7 @@ export {
   PNGIdeaBackground4,
   PNGIdeaBackground5,
   PNGErrorBackground,
+  PNGDefaultProfileInfo36,
+  PNGDefaultProfileInfo100,
+  PNGDefaultProfileBackground,
 };

src/stories/Badge.stories.tsx

@@ -1,7 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 
 import Badge from '../components/Badge/Badge';
-import { useEffect, useRef, useState } from 'react';
+import { ReactNode, useEffect, useRef, useState } from 'react';
 
 const meta = {
   title: 'Components/Badge',
@@ -55,7 +55,7 @@ export const Sample: Story = {
   },
   render: ({ children, backgroundColor, fontColor }) => {
     const timerId = useRef<NodeJS.Timeout | null>(null);
-    const [badges, setBadges] = useState<string[]>([
+    const [badges, setBadges] = useState<ReactNode[]>([
       '서비스기획',
       '영상디자인',
       '시각디자인',