feat-fe: 프로세스 생성 (#40)

* Create draft PR for #39 * 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> * Create draft PR for #39 * feat-fe: UI Dropdown 컴포넌트 빌드 (#43) * Create draft PR for #42 * 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> * feat: Dropdown 및 IconDropdown 컴포넌트 구현 * feat: Dropdown 컴포넌트 구현 --------- Co-authored-by: Jeongwoo Park <121204715+lurgi@users.noreply.github.com> Co-authored-by: Seongjin Hong <hongseongjin.to@gmail.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> * feat: ProcessAddButton, ProcessAddForm 추가 * Create draft PR for #39 * feat: ProcessAddButton, ProcessAddForm 추가 * Create draft PR for #39 --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> 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: 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 · a7fe1bb · a7fe1bb
1 parent 4e03290
commit a7fe1bb
Show file tree

Hide file tree

Showing 5 changed files with 193 additions and 0 deletions.
diff --git a/.eslintrc.json b/.eslintrc.json
@@ -23,11 +23,16 @@
     "react/jsx-uses-vars": "warn",
     "react-hooks/rules-of-hooks": "error",
     "react-hooks/exhaustive-deps": "warn",
+    "react/jsx-wrap-multilines": "off",
     "import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
     "react/require-default-props": "off",
     "react/jsx-wrap-multilines": "off",
     "react/react-in-jsx-scope": "off",
 
+    "jsx-a11y/label-has-associated-control": "off",
+
+    "jsx-a11y/label-has-associated-control": "off",
+
     "import/extensions": [
       "error",
       {

diff --git a/src/components/ProcessAddButton/index.tsx b/src/components/ProcessAddButton/index.tsx
@@ -0,0 +1,42 @@
+import { useState } from 'react';
+
+import plusIcon from '@assets/images/plus.svg';
+import ProcessAddForm from '@components/ProcessAddForm';
+import IconButton from '@components/IconButton';
+
+import S from './style';
+
+export default function ProcessAddButton() {
+  const [isToggled, setIsToggled] = useState(false);
+
+  const toggleProcessAddForm = () => {
+    setIsToggled((prev) => !prev);
+  };
+
+  return (
+    <S.Container>
+      <S.HorizontalLine />
+
+      {isToggled ? (
+        <ProcessAddForm
+          priorProcessId={0}
+          toggleForm={toggleProcessAddForm}
+        />
+      ) : (
+        <IconButton
+          type="button"
+          onClick={toggleProcessAddForm}
+          size="sm"
+          outline
+        >
+          <img
+            src={plusIcon}
+            alt="플러스 아이콘"
+          />
+        </IconButton>
+      )}
+
+      <S.HorizontalLine />
+    </S.Container>
+  );
+}
diff --git a/src/components/ProcessAddButton/style.ts b/src/components/ProcessAddButton/style.ts
@@ -0,0 +1,22 @@
+import styled from '@emotion/styled';
+
+const Container = styled.div`
+  display: flex;
+  align-items: flex-start;
+`;
+
+const HorizontalLine = styled.div`
+  width: 2.4rem;
+  height: 0.2rem;
+
+  margin-top: 1.2rem;
+
+  background-color: ${({ theme }) => theme.colors.grayscale[400]};
+`;
+
+const S = {
+  Container,
+  HorizontalLine,
+};
+
+export default S;
diff --git a/src/components/ProcessAddForm/index.tsx b/src/components/ProcessAddForm/index.tsx
@@ -0,0 +1,72 @@
+import React, { FormEvent, useState } from 'react';
+import S from './style';
+
+interface ProcessAddForm {
+  processName: string;
+  processDescription: string;
+  priorProcessId: number;
+}
+
+interface ProcessAddFormProps {
+  priorProcessId: number;
+  toggleForm: () => void;
+}
+
+export default function ProcessAddForm({ priorProcessId, toggleForm }: ProcessAddFormProps) {
+  const [formState, setFormState] = useState<ProcessAddForm>({
+    processName: '',
+    processDescription: '',
+    priorProcessId,
+  });
+
+  const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const { name, value } = e.target;
+    setFormState((prev) => ({
+      ...prev,
+      [name]: value,
+    }));
+  };
+
+  const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+    e.preventDefault();
+    console.log(formState);
+  };
+
+  return (
+    <S.Form onSubmit={handleSubmit}>
+      <S.Label htmlFor="processName">프로세스 이름</S.Label>
+      <S.Input
+        value={formState?.processName}
+        onChange={handleChange}
+        id="processName"
+        name="processName"
+        type="text"
+        placeholder="프로세스 이름"
+      />
+
+      <S.Label htmlFor="processDescription">프로세스 설명</S.Label>
+      <S.Input
+        value={formState?.processDescription}
+        onChange={handleChange}
+        id="processDescription"
+        name="processDescription"
+        type="text"
+        placeholder="프로세스 설명"
+      />
+
+      <S.FormButton
+        type="submit"
+        color="secondary"
+        onClick={toggleForm}
+      >
+        취소
+      </S.FormButton>
+      <S.FormButton
+        type="submit"
+        color="primary"
+      >
+        추가
+      </S.FormButton>
+    </S.Form>
+  );
+}
diff --git a/src/components/ProcessAddForm/style.ts b/src/components/ProcessAddForm/style.ts
@@ -0,0 +1,52 @@
+import styled from '@emotion/styled';
+
+const Form = styled.form`
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 0.8rem;
+
+  padding: 2.4rem 1.6rem;
+
+  border-radius: 0.8rem;
+  border: 0.1rem solid ${({ theme }) => theme.colors.grayscale[300]};
+  background-color: ${({ theme }) => theme.colors.grayscale[100]};
+`;
+
+const Label = styled.label`
+  margin-top: 0.8rem;
+
+  font-size: 1.4rem;
+  font-weight: 700;
+`;
+
+const Input = styled.input`
+  font-size: 1.4rem;
+  color: ${({ theme }) => theme.colors.grayscale[900]};
+  padding: 0.8rem;
+
+  &:focus {
+    outline: none;
+  }
+`;
+
+const FormButton = styled.button<{ color: 'primary' | 'secondary' }>`
+  border: none;
+  border-radius: 0.8rem;
+
+  width: 100%;
+  padding: 1rem;
+
+  color: ${({ color, theme }) => (color === 'primary' ? theme.colors.grayscale[50] : theme.colors.grayscale[900])};
+  background-color: ${({ color, theme }) =>
+    color === 'primary' ? theme.colors.purplescale[700] : theme.colors.grayscale[300]};
+`;
+
+const S = {
+  Form,
+  Label,
+  Input,
+  FormButton,
+};
+
+export default S;