4주차 최종 산출물

.husky/pre-commit

@@ -1,2 +1 @@
 npx lint-staged
-npx lint-staged

README.md

@@ -1,9 +1,4 @@
-# Team18_FE
-18조 프론트엔드
+# 🍪 내가 먹은 쿠키 - 18조 FE
 
-### 코드리뷰 질문
-**Week3**
-- 현재 vite로 프로젝트 세팅을 마쳤는데, 더 추천해주실 라이브러리나 프레임워크 등 이 있을까요?
-- 협업을 하면서 알면 좋은 사소한 팁이 있을까요?
-- 현재 팀원들간 설정한 프로젝트 세팅은 아래 노션과 같습니다. 조언해주실 부분이 있나요?
-  https://kibong.notion.site/11100da872ea4854bf0f91908f029037?pvs=4
+## 🙋‍♂️ 4주차 코드리뷰 질문
+- `Modal` 컴포넌트를 구현하면서 텍스트 부분과 버튼 부분에 들어갈 내용은 개발할 때 코드를 작성하는 사람이 자유롭게 작성하여 구성할 수 있도록 `textChildren`과 `buttonChildren`만으로 구성하였는데, 더 적합하거나 지향하는 방식이 있을까요?

package.json

@@ -7,6 +7,7 @@
     "dev": "vite",
     "build": "tsc -b && vite build",
     "lint": "eslint --cache 'src/**/*.{ts,tsx}'",
+    "tsc": "tsc --noEmit",
     "format": "prettier --write --cache 'src/**/*.{ts,tsx}'",
     "lint-staged": "lint-staged",
     "preview": "vite preview",
@@ -18,23 +19,22 @@
   "lint-staged": {
     "**/*.{tsx,ts,jsx,js}": [
       "eslint --fix --cache",
-      "prettier --write --cache"
-    ],
-    "*.js": "eslint --cache --fix",
-    "*.{ts,tsx}": "prettier --write"
+      "prettier --write --cache"      
+    ]
   },
   "dependencies": {
     "@emotion/babel-plugin": "^11.12.0",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@emotion/css": "^11.13.0",
     "@tanstack/react-query": "^5.56.2",
+    "csstype": "^3.1.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "zustand": "^4.5.5"
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^2.0.2",
-    "@emotion/css": "^11.13.0",
     "@eslint/js": "^9.9.0",
     "@storybook/addon-essentials": "^8.3.0",
     "@storybook/addon-interactions": "^8.3.0",

src/App.tsx

@@ -1,12 +1,5 @@
-import GlobalStyles from './assets/styles';
-
 function App() {
-  return (
-    <>
-      <GlobalStyles />
-      <h1>hello world!</h1>
-    </>
-  );
+  return <h1>helloWorld!</h1>;
 }
 
 export default App;

src/assets/styles/emotion.d.ts

@@ -0,0 +1,8 @@
+import '@emotion/react';
+import { PalettesTypes } from './global/palettes';
+
+declare module '@emotion/react' {
+  export interface Theme {
+    palettes: PalettesTypes;
+  }
+}

src/assets/styles/global/palettes.ts

@@ -0,0 +1,6 @@
+export const palettes = {
+  white: '#fff',
+  borderGray: '#e4e5e8',
+};
+
+export type PalettesTypes = typeof palettes;

src/assets/styles/theme.ts

@@ -0,0 +1,8 @@
+import { Theme } from '@emotion/react';
+import { palettes } from './global/palettes';
+
+const theme: Theme = {
+  palettes,
+};
+
+export default theme;

src/components/common/Button/index.stories.tsx

@@ -1,14 +1,20 @@
-import { Meta, StoryObj } from '@storybook/react';
-import Button from '.';
+import type { Meta, StoryObj } from '@storybook/react';
 
-const meta: Meta<typeof Button> = {
+import Button from './index';
+
+const meta = {
   title: 'common/Button',
-  component: Button,
   tags: ['autodocs'],
-};
+  args: {
+    children: '버튼',
+    theme: 'default',
+  },
+  render: (props) => <Button {...props} />,
+} satisfies Meta<typeof Button>;
 
 export default meta;
+type Story = StoryObj<typeof meta>;
 
-type Story = StoryObj<typeof Button>;
-
-export const Primary: Story = {};
+export const Default: Story = {};
+export const Outlined: Story = { args: { theme: 'outlined' } };
+export const TextButton: Story = { args: { theme: 'textbutton' } };

src/components/common/Button/index.tsx

@@ -1,11 +1,48 @@
 import styled from '@emotion/styled';
 
-export default function Button() {
-  return <Container>example</Container>;
+interface Props extends React.ButtonHTMLAttributes<HTMLButtonElement> {
+  theme?: 'default' | 'outlined' | 'textbutton';
 }
 
-const Container = styled.button`
-  border: 1px solid #393939;
-  border-radius: 4px;
-  padding: 4px 12px;
-`;
+export default function Button({ children, ...props }: Props) {
+  return <Wrapper {...props}>{children}</Wrapper>;
+}
+
+const Wrapper = styled.button(
+  {
+    padding: '10px 40px',
+    fontSize: '16px',
+    fontWeight: 'bold',
+    border: 'none',
+    justifyContent: 'center',
+    alignItems: 'center',
+    cursor: 'pointer',
+    transition: 'background-color 200ms',
+  },
+  ({ theme = 'default' }) => {
+    if (theme === 'outlined') {
+      return {
+        backgroundColor: '#fff',
+        color: '#0A65CC',
+        border: '2px solid #0A65CC',
+
+        '&:hover': {
+          backgroundColor: '#6992C0',
+          color: '#fff',
+        },
+      };
+    }
+
+    if (theme === 'textbutton') {
+      return {
+        color: '#0A65CC',
+        backgroundColor: '#fff',
+      };
+    }
+
+    return {
+      color: '#0A65CC',
+      backgroundColor: '#E7F0FA',
+    };
+  },
+);

src/components/common/Card/index.stories.tsx

@@ -0,0 +1,24 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Card from '.';
+
+const meta: Meta<typeof Card> = {
+  title: 'common/Card',
+  component: Card,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Card>;
+
+export const Default: Story = {
+  args: {
+    borderRadius: '12px',
+    children: <h1>Hello World!</h1>,
+  },
+  render: (args) => (
+    <Card {...args} css={{ padding: '12px 24px' }}>
+      <h1>Hello World!</h1>
+    </Card>
+  ),
+};

src/components/common/Card/index.tsx

@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+import { HTMLAttributes, ReactNode } from 'react';
+
+interface Props extends HTMLAttributes<HTMLDivElement> {
+  borderRadius?: string;
+  children: ReactNode;
+}
+
+export default function Card({ borderRadius = '12px', children, ...rest }: Props) {
+  return (
+    <CardContainer borderRadius={borderRadius} {...rest}>
+      {children}
+    </CardContainer>
+  );
+}
+
+const CardContainer = styled.div<{ borderRadius: string }>`
+  display: inline-block;
+  border: 1px solid ${({ theme }) => theme.palettes.white};
+  box-shadow: 0px 12px 32px 0px rgba(24, 25, 28, 0.08);
+  border-radius: ${({ borderRadius }) => borderRadius};
+`;

src/components/common/Flex/index.stories.tsx

@@ -0,0 +1,40 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Flex from '.';
+
+const meta: Meta<typeof Flex> = {
+  title: 'common/Flex',
+  component: Flex,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Flex>;
+
+export const Default: Story = {
+  args: {
+    direction: 'row',
+    justifyContent: 'center',
+    alignItems: 'center',
+    gap: {
+      x: '10px',
+      y: '10px',
+    },
+  },
+  render: (args) => (
+    <Flex {...args}>
+      <div style={boxStyle}>Box 1</div>
+      <div style={boxStyle}>Box 2</div>
+      <div style={boxStyle}>Box 3</div>
+    </Flex>
+  ),
+};
+
+const boxStyle = {
+  width: '100px',
+  height: '100px',
+  backgroundColor: 'lightblue',
+  display: 'flex',
+  alignItems: 'center',
+  justifyContent: 'center',
+};

src/components/common/Flex/index.tsx

@@ -0,0 +1,42 @@
+import styled from '@emotion/styled';
+import type * as CSS from 'csstype';
+import { HTMLAttributes } from 'react';
+
+type FlexGap = {
+  x: string;
+  y: string;
+};
+
+interface FlexProps {
+  direction?: 'column' | 'row';
+  gap?: FlexGap;
+  justifyContent?: CSS.Properties['justifyContent'];
+  alignItems?: CSS.Properties['alignItems'];
+}
+
+type Props = HTMLAttributes<HTMLDivElement> & FlexProps;
+
+export default function Flex({
+  direction = 'row',
+  gap,
+  justifyContent = 'start',
+  alignItems = 'start',
+  children,
+  ...rest
+}: Props) {
+  return (
+    <Container direction={direction} gap={gap} justifyContent={justifyContent} alignItems={alignItems} {...rest}>
+      {children}
+    </Container>
+  );
+}
+
+const Container = styled.div<FlexProps>`
+  width: 100%;
+  display: flex;
+  flex-direction: ${(p) => p.direction};
+  justify-content: ${(p) => p.justifyContent};
+  align-items: ${(p) => p.alignItems};
+  column-gap: ${(p) => p.gap?.x};
+  row-gap: ${(p) => p.gap?.y};
+`;

src/components/common/Input/index.stories.tsx

@@ -0,0 +1,20 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Input from '.';
+
+const meta: Meta<typeof Input> = {
+  title: 'common/Input',
+  component: Input,
+  tags: ['autodocs'],
+};
+
+export default meta;
+
+type Story = StoryObj<typeof Input>;
+
+export const Default: Story = {
+  args: {
+    label: '아이디',
+    placeholder: '아이디를 입력해주세요.',
+  },
+  render: (args) => <Input {...args} css={{ padding: '12px' }} />,
+};