Feat/#41 ProjectInviteModal을 추가합니다. (#42)

* refactor: 버튼의 스타일을 변경합니다. * refactor: breakWordText 스타일 추가합니다. * feat: ProjectInviteModal 모달을 추가합니다.
dnd-side-project · Sep 13, 2024 · fe3e518 · fe3e518
1 parent 26ae68f
commit fe3e518
Show file tree

Hide file tree

Showing 15 changed files with 265 additions and 35 deletions.
diff --git a/app/(app)/project/index.tsx b/app/(app)/project/index.tsx
@@ -1,12 +1,39 @@
-import { View } from 'react-native';
+import { useRouter } from 'expo-router';
+import { useState } from 'react';
+import { SafeAreaView } from 'react-native';
 
+import SolidButton from '@/components/common/button/SolidButton';
 import Typography from '@/components/common/typography';
+import ProjectInviteModal from '@/components/project/ProjectInviteModal';
 
 function Project() {
+  const [visible, setVisible] = useState(false);
+  const router = useRouter();
+
+  const data = {
+    project_name: '위프로',
+    project_profile: 'https://picsum.photos/200',
+    member_length: 6,
+  };
+
+  const onRequestClose = () => {
+    setVisible(false);
+    router.replace('/project');
+  };
+
   return (
-    <View>
+    <SafeAreaView
+      style={{ flex: 1, display: 'flex', justifyContent: 'center', alignItems: 'center' }}>
+      <ProjectInviteModal
+        project_name={data.project_name}
+        project_profile={data.project_profile}
+        member_length={data.member_length}
+        visible={visible}
+        onRequestClose={onRequestClose}
+      />
+      <SolidButton onPress={() => setVisible(true)}>초대 링크 있음</SolidButton>
       <Typography>Project</Typography>
-    </View>
+    </SafeAreaView>
   );
 }
 

diff --git a/app/(beforeLogin)/onboarding.tsx b/app/(beforeLogin)/onboarding.tsx
@@ -68,7 +68,8 @@ function Onboarding() {
       </S.OnBoardingWrapper>
       <S.ButtonBox>
         <SolidButton
-          size='full'
+          size='large'
+          full
           onPress={handleStep}>
           다음
         </SolidButton>

diff --git a/src/components/common/button/Button.style.tsx b/src/components/common/button/Button.style.tsx
@@ -2,9 +2,10 @@ import styled, { type ReactNativeStyle } from '@emotion/native';
 
 import { flexDirectionRowItemsCenter, flexItemCenter } from '@/styles/common';
 
-export const Container = styled.View<{ $sizeStyle: ReactNativeStyle }>`
-  ${({ $sizeStyle }) => $sizeStyle}
+export const Container = styled.View<{ $sizeStyle: ReactNativeStyle; $full: boolean }>`
+  ${({ $sizeStyle }) => $sizeStyle};
   position: relative;
+  width: ${({ $full }) => ($full ? '100%' : 'fit-content')};
   overflow: hidden;
   border-radius: 30px;
 `;

diff --git a/src/components/common/button/OutLineButton.stories.tsx b/src/components/common/button/OutLineButton.stories.tsx
@@ -20,7 +20,7 @@ const OutLineButtonMeta: Meta<typeof OutLineButton> = {
       description: '버튼의 사이즈를 결정합니다.',
       control: {
         type: 'select',
-        options: ['full', 'large', 'medium', 'small'],
+        options: ['large', 'medium', 'small'],
       },
     },
     disabled: {
@@ -29,11 +29,17 @@ const OutLineButtonMeta: Meta<typeof OutLineButton> = {
         type: 'boolean',
       },
     },
+    full: {
+      description: '버튼의 가로 길이 폭을 결정합니다.',
+      control: {
+        type: 'boolean',
+      },
+    },
   },
   args: {
     children: '버튼',
     type: 'primary',
-    size: 'full',
+    size: 'large',
     disabled: false,
   },
 };

diff --git a/src/components/common/button/OutlineButton.tsx b/src/components/common/button/OutlineButton.tsx
@@ -22,20 +22,13 @@ const typeStyle: Record<CustomButtonProps['type'], ReactNativeStyle> = {
 };
 
 const sizeStyle: Record<CustomButtonProps['size'], ReactNativeStyle> = {
-  full: css`
-    width: 100%;
-    height: 48px;
-  `,
   large: css`
-    width: fit-content;
     height: 48px;
   `,
   medium: css`
-    width: fit-content;
     height: 40px;
   `,
   small: css`
-    width: fit-content;
     height: 32px;
   `,
 };
@@ -48,19 +41,22 @@ const disabledStyle = {
 };
 
 function OutLineButton({
-  size = 'full',
+  size = 'large',
   type = 'primary',
   disabled = false,
   LeftIcon,
   RightIcon,
   children,
+  full = false,
   ...rest
 }: PropsNeedChildren<ButtonProps>) {
   const { textSize, iconSize } = useButtonStyle(size);
   const { color } = useButtonTextColor(type, disabled);
 
   return (
-    <S.Container $sizeStyle={sizeStyle[size]}>
+    <S.Container
+      $full={full}
+      $sizeStyle={sizeStyle[size]}>
       <S.Button
         $typeStyle={typeStyle[type]}
         $disabledStyle={disabledStyle.css}

diff --git a/src/components/common/button/SolidButton.stories.tsx b/src/components/common/button/SolidButton.stories.tsx
@@ -20,7 +20,7 @@ const PrimaryButtonMeta: Meta<typeof SolidButton> = {
       description: '버튼의 사이즈를 결정합니다.',
       control: {
         type: 'select',
-        options: ['large', 'medium', 'small', 'full'],
+        options: ['large', 'medium', 'small'],
       },
     },
     disabled: {
@@ -29,6 +29,12 @@ const PrimaryButtonMeta: Meta<typeof SolidButton> = {
         type: 'boolean',
       },
     },
+    full: {
+      description: '버튼의 가로 길이 폭을 결정합니다.',
+      control: {
+        type: 'boolean',
+      },
+    },
   },
   args: {
     children: '버튼',

diff --git a/src/components/common/button/SolidButton.tsx b/src/components/common/button/SolidButton.tsx
@@ -19,20 +19,13 @@ const typeStyle: Record<CustomButtonProps['type'], ReactNativeStyle> = {
 };
 
 const sizeStyle: Record<CustomButtonProps['size'], ReactNativeStyle> = {
-  full: css`
-    width: 100%;
-    height: 48px;
-  `,
   large: css`
-    width: fit-content;
     height: 48px;
   `,
   medium: css`
-    width: fit-content;
     height: 40px;
   `,
   small: css`
-    width: fit-content;
     height: 32px;
   `,
 };
@@ -45,9 +38,10 @@ const disabledStyle = {
 };
 
 function SolidButton({
-  size = 'full',
+  size = 'large',
   type = 'primary',
   disabled = false,
+  full = false,
   LeftIcon,
   RightIcon,
   children,
@@ -56,7 +50,9 @@ function SolidButton({
   const { textSize, iconSize } = useButtonStyle(size);
   const color = disabled ? disabledStyle.color : '#FFFFFF';
   return (
-    <S.Container $sizeStyle={sizeStyle[size]}>
+    <S.Container
+      $full={full}
+      $sizeStyle={sizeStyle[size]}>
       {type === 'primary' && !disabled && (
         <BackGround
           colors={['#7C71F5', '#6E9DF5']}

diff --git a/src/components/common/button/TextButton.stories.tsx b/src/components/common/button/TextButton.stories.tsx
@@ -20,7 +20,7 @@ const TextButtonMeta: Meta<typeof TextButton> = {
       description: '버튼의 사이즈를 결정합니다.',
       control: {
         type: 'select',
-        options: ['full', 'large', 'medium', 'small'],
+        options: ['large', 'medium', 'small'],
       },
     },
     disabled: {
@@ -33,7 +33,7 @@ const TextButtonMeta: Meta<typeof TextButton> = {
   args: {
     children: '버튼',
     type: 'primary',
-    size: 'full',
+    size: 'large',
     disabled: false,
   },
 };

diff --git a/src/components/common/button/TextButton.tsx b/src/components/common/button/TextButton.tsx
@@ -8,14 +8,14 @@ import type { PropsNeedChildren } from '@/types';
 import * as S from './Button.style';
 
 function TextButton({
-  size = 'full',
+  size = 'large',
   type = 'primary',
   disabled = false,
   LeftIcon,
   RightIcon,
   children,
   ...rest
-}: PropsNeedChildren<ButtonProps>) {
+}: PropsNeedChildren<Omit<ButtonProps, 'full'>>) {
   const { textSize, iconSize } = useButtonStyle(size);
   const { color } = useButtonTextColor(type, disabled);
 

diff --git a/src/components/common/button/button.type.ts b/src/components/common/button/button.type.ts
@@ -5,7 +5,8 @@ import type { IconProps } from '@/types';
 
 export type CustomButtonProps = {
   type: 'primary' | 'secondary';
-  size: 'large' | 'medium' | 'small' | 'full';
+  size: 'large' | 'medium' | 'small';
+  full: boolean;
   disabled: boolean;
 };
 

diff --git a/src/components/common/typography/index.tsx b/src/components/common/typography/index.tsx
@@ -8,6 +8,7 @@ type Props = TextProps & {
   variant: keyof typeof TypographyStyle;
   fontWeight: keyof typeof FontWeightStyle;
   color: string;
+  breakWord?: boolean;
 };
 
 const FontWeightStyle = {
@@ -92,13 +93,19 @@ const TypographyStyle = {
   `,
 };
 
+const breakWordText = css`
+  width: 100%;
+  word-wrap: break-word;
+`;
+
 const CustomText = styled.Text<Props>`
-  ${({ variant }) => TypographyStyle[variant]}
+  ${({ variant }) => TypographyStyle[variant]};
   ${({ fontWeight }) =>
     fontWeight === 'semiBold' && !isMobile
       ? FontWeightStyle['normal']
-      : FontWeightStyle[fontWeight]}
-  ${({ color }) => (color ? `color: ${color};` : '')}
+      : FontWeightStyle[fontWeight]};
+  ${({ color }) => (color ? `color: ${color};` : '')};
+  ${({ breakWord }) => breakWord && breakWordText}
 `;
 
 /**
@@ -107,6 +114,7 @@ const CustomText = styled.Text<Props>`
  * @param variant  텍스트의 크기, 자간, 줄간 등의 스타일을 지정합니다.
  * @param fontWeight 글씨 굵기 속성을 지정합니다.
  * @param color 글씨의 색깔을 선택합니다.
+ * @param breakWord 글씨의 줄바꿈을 제거합니다.
  * @param rest  나머지 추가 속성들을 받아옵니다.
  * @constructor
  */
@@ -115,13 +123,15 @@ function Typography({
   variant = 'Label1/Normal',
   fontWeight = 'normal',
   color = 'black',
+  breakWord = false,
   ...rest
 }: Partial<Props>) {
   return (
     <CustomText
       variant={variant}
       fontWeight={fontWeight}
       color={color}
+      breakWord={breakWord}
       {...rest}>
       {children}
     </CustomText>

diff --git a/src/components/project/ProjectInviteModal.stories.tsx b/src/components/project/ProjectInviteModal.stories.tsx
@@ -0,0 +1,40 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { useState } from 'react';
+import { View } from 'react-native';
+
+import SolidButton from '@/components/common/button/SolidButton';
+import ProjectInviteModal from '@/components/project/ProjectInviteModal';
+
+const ProjectInviteModalMeta: Meta<typeof ProjectInviteModal> = {
+  title: 'project/ProjectInviteModal',
+  component: ProjectInviteModal,
+  argTypes: {},
+};
+
+export default ProjectInviteModalMeta;
+
+export const Primary: StoryObj<typeof ProjectInviteModal> = {
+  args: {
+    project_name: '위프로',
+    project_profile: 'https://picsum.photos/200',
+    member_length: 6,
+  },
+  render: (args) => {
+    const [show, setShow] = useState(false);
+
+    const onRequestClose = () => {
+      setShow(false);
+    };
+
+    return (
+      <View style={{ flex: 1 }}>
+        <SolidButton onPress={() => setShow(true)}>버튼 열기</SolidButton>
+        <ProjectInviteModal
+          {...args}
+          visible={show}
+          onRequestClose={onRequestClose}
+        />
+      </View>
+    );
+  },
+};