feat-fe: 공용 Button 컴포넌트 (#28)

* chore: 초기세팅 1. webpack + typescript + react 초기 세팅 2. PandaCSS 세팅 3. Storybook 세팅 4. RTL 세팅 5. Lint + Prettier 세팅 * chore: 초기 세팅 수정 * chore: 세팅 피드백 반영 * chore: eslint import rule 추가 * chore: PandaCSS용 ESLint 플러그인 추가 * Create draft PR for #27 * Create draft PR for #27 * chore: 초기세팅 1. webpack + typescript + react 초기 세팅 2. PandaCSS 세팅 3. Storybook 세팅 4. RTL 세팅 5. Lint + Prettier 세팅 * chore: 초기 세팅 수정 * chore: 세팅 피드백 반영 * chore: eslint import rule 추가 * chore: PandaCSS용 ESLint 플러그인 추가 * chore: eslint ts, tsx 설정 추가 * feat: Applicant Card 빌드 * chore: PandaCSS를 emotion으로 대체 * docs: issue templates 별 개행 추가 * docs: fix issue label * feat: Github Action을 이용한 CI 기능 구현 (#18) * feat(action): 프로젝트-이슈-브랜치 자동화 초기 세팅 * feat(branch-create): 브랜치 및 PR 생성 규칙 적용 * fix(automation): github 토큰 인증 비활성화 * chore: 자동화 repo 타겟 branch를 master에서 main으로 변경 * refactor: issue - branch 자동화 과정 branch 명명 소스 변경 issue 제목 -> issue body * fix(automation): github 토큰 인증 활성화 * fix(automation): github 토큰 변경 * fix(automation): github 토큰 권한 추가 명시 * fix(automation): github 토큰 변경 * fix: 접근 projects명 수정 * fix: 접근 Option명 수정 * fix: 접근 Option명 수정 * chore: github-project-automation-plus version 변경 * chore: github-project-automation-plus version 변경 * chore: Projects Status명 영문화 * chore: Github Token 수정 * fix: PR 템플릿 설정 오타 수정 * refactor: Project (Classic) 기능 제거 후 Projects 기능으로 변경 * chore: actions app 버전 수정 * refactor: Projects 연동 기능 제거 * refactor: issue comment 메세지 변경 * fix: 변수 오타 수정 * refactor: 환경변수 scope 변경 * refactor: 환경변수 변경 * chore: PR url 타겟팅 환경변수 변경 * Update project-manage-issue.yml * test: 테스트용 code line 추가 * chore: 디버깅용 echo문 추가 * Update project-manage-issue.yml * Update project-manage-issue.yml * refactor: 변수 위치 수정 및 프로퍼티 경로 수정 * fix: 오류 수정 * refactor: PR Link 연결 Comment 기능 제거 * refactor: 미사용 전역 환경변수 제거 * refactor: Action bot 메세지 수정 및 Description 내용 PR 복사 기능 추가 * refactor: Action bot 메세지 수정 및 PR 링크 추가 * feat: github id와 slack id 매핑 * feat: PR review 요청 Slack mention 연동 기능 구현 * Update mention-to-slack.yml * chore: action trigger 수정 * refactor: 불필요 line 제거 및 트리거 추가 * refactor: workflow file명 변경 * chore: trigger 대상 브랜치 추가 * refactor: 슬랙 멘션 연동 기능 전면 수정 * chore: github - slack ID 매핑 정보 * chore: action trigger 추가 * chore: checkout 추가 * chore: 주석 제거 * fix: json 읽기 오류 대응 수정 * fix: 오류 수정 * chore: 마지막 쉼표 제거 * chore: 디버깅용 출력문 추가 * refactor: 전송 메세지 개행 추가 변경 * fix: json 형식 메세지 재수정 * refactor: 파일명 변경 및 발신 메세지 수정 * refactor: 발신 메세지에 발신인 포함 및 메세지 수정 * refactor: 디버깅 코드 제거 및 변수 변경 * fix: 발신, 수신자 Slack ID 지정 step 추가 * chore: 메세지 변경 * refactor: 미사용 환경설정 파일 삭제 * chore: comment 메세지 수정 * chore: 프로젝트 secrets와 동기화 * chore: Action 제목 수정 * refactor: 파일명 변경 * feat: 이슈 할당 시 진행 알림 Slack으로 전송 기능 구현 * chore(issue-automation): CI workflow 실행 조건 추가 및 name 한국어로 수정 * chore: slack 리뷰 요청 workflow trigger event 삭제 * chore: PR review 요청 타겟 브랜치 main -> 전체로 변경 * chore: PR review 요청 타겟 브랜치 변경 * feat: 이슈 완료 Slack 알림 기능 구현 * chore: Slack ID env 배정 payload 수정 * chore: Issue closed 기능 assignee payload 수정 * feat: dropdown Chevron 아이콘 추가 및 props 설정 * chore: pandacss 설정 삭제 * Create draft PR for #27 * Create draft PR for #27 * chore: ThemeProvider 설정 * feat: 공용 Button 컴포넌트 * refactor: Button과 IconButton 컴포넌트 분리 --------- Co-authored-by: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Co-authored-by: Seongjin Hong <hongseongjin.to@gmail.com> Co-authored-by: Seongjin Hong <mail@seongjin.me> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Kim Da Eun <midekuna@gmail.com> Co-authored-by: Kwoun Ki Ho <73146678+Chocochip101@users.noreply.github.com> Co-authored-by: Do Yeop Kim <113661364+Dobby-Kim@users.noreply.github.com>
woowacourse-teams · Jul 16, 2024 · 1cd2e1f · 1cd2e1f
1 parent 6c29c93
commit 1cd2e1f
Show file tree

Hide file tree

Showing 13 changed files with 476 additions and 7 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -8,17 +8,25 @@
   "globals": {
     "browser": true
   },
-  "extends": ["eslint:recommended", "plugin:@typescript-eslint/recommended", "airbnb", "airbnb/hooks"],
+  "extends": [
+    "eslint:recommended",
+    "plugin:@typescript-eslint/recommended",
+    "plugin:@pandacss/recommended",
+    "airbnb",
+    "airbnb/hooks"
+  ],
   "plugins": ["react", "react-hooks", "@typescript-eslint", "import", "jsx-a11y"],
   "rules": {
     "no-console": "warn",
-    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".js", ".tsx", ".ts"] }],
-    "react/react-in-jsx-scope": "off",
+    "@pandacss/no-debug": "error",
+    "react/jsx-filename-extension": [1, { "extensions": [".jsx", ".js"] }],
     "react/jsx-uses-react": "off",
     "react/jsx-uses-vars": "warn",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
     "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
+    "react/require-default-props": "off",
+    "react/jsx-wrap-multilines": "off",
 
     "import/extensions": [
       "error",

diff --git a/panda.config.ts b/panda.config.ts
@@ -0,0 +1,24 @@
+import { defineConfig } from '@pandacss/dev';
+
+export default defineConfig({
+  // Whether to use css reset
+  preflight: true,
+
+  // Where to look for your css declarations
+  include: ['./src/**/*.{js,jsx,ts,tsx}', './pages/**/*.{js,jsx,ts,tsx}'],
+
+  // Files to exclude
+  exclude: [],
+
+  // Useful for theme customization
+  theme: {
+    extend: {},
+  },
+
+  // The output directory for your css system
+  outdir: './src/styled-system',
+
+  // styled 태그 사용을 위한 설정
+  syntax: 'template-literal',
+  jsxFramework: 'react',
+});
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,5 +1,29 @@
+import plusIcon from '@assets/images/plus.svg';
 import ApplicantCard from './components/ApplicantCard';
 
+import styled from '@emotion/styled';
+import IconButton from './components/IconButton';
+
+const AppContainer = styled.div`
+  width: 100vw;
+  height: 100vh;
+`;
+
 export default function App() {
-  return <ApplicantCard />;
+  return (
+    <AppContainer>
+      <ApplicantCard />
+      <IconButton
+        type="button"
+        onClick={() => console.log('clicked')}
+        size="sm"
+        outline={true}
+      >
+        <img
+          src={plusIcon}
+          alt="플러스 아이콘"
+        />
+      </IconButton>
+    </AppContainer>
+  );
 }
diff --git a/src/assets/images/cat.svg b/src/assets/images/cat.svg
diff --git a/src/assets/images/plus.svg b/src/assets/images/plus.svg
diff --git a/src/components/Button/index.tsx b/src/components/Button/index.tsx
@@ -1,3 +1,17 @@
-export default function Button() {
-  return <div>렛서 판다 붐은 온다</div>;
+import React, { PropsWithChildren } from 'react';
+import S from './style';
+
+export default function Button({
+  children,
+  onClick,
+  type = 'button',
+}: PropsWithChildren<React.ComponentProps<'button'>>) {
+  return (
+    <S.Button
+      type={type}
+      onClick={onClick}
+    >
+      {children}
+    </S.Button>
+  );
 }
diff --git a/src/components/Button/style.ts b/src/components/Button/style.ts
@@ -0,0 +1,18 @@
+import styled from '@emotion/styled';
+
+export type ButtonSize = 'sm' | 'md' | 'lg';
+
+const Button = styled.button`
+  border: none;
+  background-color: transparent;
+
+  &:hover {
+    cursor: pointer;
+  }
+`;
+
+const S = {
+  Button,
+};
+
+export default S;
diff --git a/src/components/IconButton/index.tsx b/src/components/IconButton/index.tsx
@@ -0,0 +1,30 @@
+import { PropsWithChildren } from 'react';
+import Button from '../Button';
+import S, { IconButtonStyleProps } from './style';
+
+type IconButtonProps = IconButtonStyleProps & React.ComponentProps<'button'>;
+
+export default function IconButton({
+  type,
+  onClick,
+
+  children,
+  size,
+  outline = true,
+  borderRadius = '0.8rem',
+}: PropsWithChildren<IconButtonProps>) {
+  return (
+    <Button
+      type={type}
+      onClick={onClick}
+    >
+      <S.IconWrapper
+        size={size}
+        outline={outline}
+        borderRadius={borderRadius}
+      >
+        {children}
+      </S.IconWrapper>
+    </Button>
+  );
+}
diff --git a/src/components/IconButton/style.ts b/src/components/IconButton/style.ts
@@ -0,0 +1,38 @@
+import styled from '@emotion/styled';
+import { ButtonSize } from '../Button/style';
+
+const IconSizeMap = {
+  lg: '4.8rem',
+  md: '3.6rem',
+  sm: '2.4rem',
+};
+
+export interface IconButtonStyleProps {
+  size: ButtonSize;
+  outline?: boolean;
+  borderRadius?: string;
+}
+
+const IconWrapper = styled.div<IconButtonStyleProps>`
+  display: flex;
+  align-items: center;
+
+  padding: '0.4rem';
+  border-radius: ${({ borderRadius }) => borderRadius};
+  border: ${({ outline, theme }) => (outline ? `1px solid ${theme.colors.grayscale[300]}` : 'none')};
+
+  img {
+    display: block;
+    width: ${({ size }) => IconSizeMap[size]};
+  }
+
+  &:hover {
+    background-color: ${({ theme }) => theme.colors.grayscale[200]};
+  }
+`;
+
+const S = {
+  IconWrapper,
+};
+
+export default S;
diff --git a/src/main.tsx b/src/main.tsx
@@ -1,10 +1,17 @@
 import React from 'react';
 import ReactDOM from 'react-dom/client';
 
+import { Global, ThemeProvider } from '@emotion/react';
+import theme from './styles/theme';
+import globalStyles from './styles/globalStyles';
+
 import App from './App';
 
 ReactDOM.createRoot(document.getElementById('root')!).render(
   <React.StrictMode>
-    <App />
+    <ThemeProvider theme={theme}>
+      <Global styles={globalStyles()} />
+      <App />
+    </ThemeProvider>
   </React.StrictMode>,
 );