7, 8주차 산출물 (#70)

* Update README.md

* Refactor/#47 6주차 코드리뷰 리팩토링 (#48)

* refactor: separate style and prop-related constants

* refactor: remove lambda function

* refactor: restructure SignUp and RecruitmentHeader components

* feat: separate Button and Text component of SignIn

* feat: add SignUpText component

* refactor: remove auth page's barrel file

* Feat/#42, #43 지원자 목록 페이지 및 팝업 구현 (#51)

* feat: 지원자 목록 페이지 구현

* feat: 지원자 목록 페이지 스토리북 생성

* refactor: ApplicantList 테이블 컴포넌트 분리

* feat: Applicants path 설정

* feat: 지원자 목록 페이지에 계약 관련 팝업 추가

* fix: 이미지 경로 수정 및 불필요한 태그 제거

* refactor: MyAccount 페이지 구조 변경 및 CompanyRecruitments로 파일명 변경

- 기존 MyAccount 페이지를 CompanyRecruitments로 이름 변경
- 새로운 MyAccount 페이지 구현을 위해 기존 페이지의 역할 변경

* refactor: visaRegistration 관련 파일 구조 변경

- visaRegistration 페이지를 src/pages/employee에서 src/pages로 이동
- 관련 기능을 src/features/employee/visaRegistration에서 src/features/visaRegistration으로 이동

* feat: Table 컴포넌트 구현

* feat: 변경된 고용주 마이페이지 구현

* refactor: 회사 관련 공통 기능을 features/companies로 이동 및 CompanyInfo 수정

* refactor: CompanyRecruitments 페이지 이름을 MyCompany로 변경

* feat: EmployerMyAccount path 설정

* refactor: 불필요한 코드 삭제 및 폴더명 일관성 있게 변경

* Feat/#50 Select 컴포넌트 구현 (#53)

* feat: add Select component

* feat: add useGlobalSelect and useSelect

* refactor: move directory

* refactor: EmployerMyAccount 페이지에서 mock 데이터 분리 및 코드 정리

* refactor: visaRegistration 및 applicants 페이지의 mock, style 파일 분리

* refactor: RecruitmentList 컴포넌트 리팩토링 및 RecruitmentsTable 분리

* refactor: CompanyInfo 반응형 디자인 수정

* refactor: 외국인 번호 및 비자 발급 일자 등록 페이지 스타일 수정

* refactor: Header 컴포넌트의 닉네임 버튼을 사용자 프로필 이미지로 변경

* Refactor/#54 Modal 컴포넌트 재설계 (#55)

* chore: add loadable component package

* feat: implement modal management system with context and dynamic loading

* refactor: 코드 리뷰 반영

- formValid를 useMemo로 관리
- validateForeignerNumber 함수를 별도 파일로 분리

* Feat/#56 메인 페이지 API 연동 (#57)

* chore: setting mockServiceWorker

* feat: add useFetchRecruitments hooks and recruitmentsMockHandler

* feat: add useFetchSlides hooks and slidesMockHandler

* feat: add Spinner component

* feat: add AsyncBoundary component

* chore: add msw-storybook-addon

* Feat/#58 OAuth 구글 로그인 구현 (#59)

* feat: add useGoogleOAuth hook

* feat: add Loading page

* chore: add MemoryRouter to decorators

* Feat/#60 가입자 정보 선택 API 연동 (#61)

* feat: add useRegister hook

* fix: change role prop value

* style: Button 컴포넌트 Props 이름변경 theme->design

* feat: 근로자마이페이지 아이콘 설정

* feat: 근로자 마이페이지 구현

* feat: 근로자마이페이지 라우터 설정

* style: Button props 이름 변경

* feat: msw 세팅 및 API path 작성

* feat: 구인글 등록 API 연결 및 msw 세팅

* fix: 구인글 업로드 mock 핸들러 수정

* feat: 근로자 마이페이지 mock 핸들러 추가

* feat: 근로자 마이페이지 API 연결 및 msw 설정

* feat: 이력서 페이지 구현 (#63)

- react-hook-form 을 사용했습니다.
- api 명세서에 맞게 이름,주소,번호,경력,자기소개,한국어실력을 필수값으로 받게 했습니다.

Co-authored-by: kangkibong <[email protected]>

* fix: change button prop

* feat: add GitHub Actions workflow for linting and type checking

---------

Co-authored-by: yimsebin <[email protected]>
Co-authored-by: Kim Jian <[email protected]>
Co-authored-by: KimJi-An <[email protected]>
Co-authored-by: LEE YONGJIN <[email protected]>

.env.development

@@ -0,0 +1,3 @@
+VITE_BASE_URL=/
+VITE_GOOGLE_AUTH_CLIENT_ID=268837811477-28b8i24r1sb0aroltho84ia6jecj74h7.apps.googleusercontent.com
+VITE_GOOGLE_AUTH_REDIRECT_URI=http://localhost:5173/loading

.github/workflows/lint.yaml

@@ -0,0 +1,43 @@
+name: Lint and Type Check
+
+on:
+  pull_request:
+    # 모든 브랜치에 대해 PR 시 실행
+    branches:
+      - '**'
+  push:
+    # 모든 브랜치에 대해 푸시 시 실행
+    branches:
+      - '**'
+
+jobs:
+  lint:
+    name: Lint and Type Check
+    runs-on: ubuntu-latest
+
+    steps:
+      # Checkout the repository
+      - name: Checkout repository
+        uses: actions/checkout@v3
+
+      # Set up Node.js environment
+      - name: Set up Node.js
+        uses: actions/setup-node@v3
+        with:
+          node-version: '18'
+
+      # Install dependencies
+      - name: Install dependencies
+        run: npm ci
+
+      # Run ESLint to check for linting errors
+      - name: Run ESLint
+        run: npm run lint
+
+      # Run Prettier to check formatting
+      - name: Run Prettier Check
+        run: npm run format -- --check
+
+      # Run TypeScript compiler to check for type errors
+      - name: Run TypeScript Check
+        run: npm run tsc

.storybook/preview.tsx

@@ -1,6 +1,11 @@
 import React from 'react';
 import type { Preview } from '@storybook/react';
 import AppProviders from '../src/components/providers/index.provider';
+import { initialize, mswLoader } from 'msw-storybook-addon';
+import { handlers } from '../src/mocks/handlers';
+import { MemoryRouter } from 'react-router-dom';
+
+initialize();
 
 const preview: Preview = {
   parameters: {
@@ -10,15 +15,21 @@ const preview: Preview = {
         date: /Date$/i,
       },
     },
+    msw: {
+      handlers: [...handlers],
+    },
   },
   tags: ['autodocs'],
   decorators: [
     (Story) => (
-      <AppProviders>
-        <Story />
-      </AppProviders>
+      <MemoryRouter>
+        <AppProviders>
+          <Story />
+        </AppProviders>
+      </MemoryRouter>
     ),
   ],
+  loaders: [mswLoader],
 };
 
 export default preview;

README.md

@@ -1 +1,42 @@
-# 🍪 내가 먹은 쿠키 - 18조 FE
+# 🍪 내가 먹은 쿠키 - 18조 FE
+
+## 🙋‍♂️ 6주차 코드리뷰 질문
+- 하나의 파일 내에서 함수 표현식과 선언식을 같이 사용해도 되는지 궁금합니다.
+- 기존 Weekly 브랜치에 components 경로에 `RoleModal` 컴포넌트가 있다고 가정하면, 해당 Weekly브랜치를 통해 새로 분기된 Feat 브랜치에 기존 components에 `RoleModal` 컴포넌트를 features 경로에 옮기고 두 브랜치를 머지하게되면 두개의 파일이 생기게 됩니다. 이를 해결하려면 어떻게 해야하나요?
+
+## 🙋‍♂️ 5주차 코드리뷰 질문
+- 하나의 페이지 내에서만 여러번 사용되는 공통 컴포넌트의 경우, components/common 폴더에 공통 컴포넌트로 만들어 취급하는 것이 좋은지, 혹은 해당 페이지 코드 파일이 위치한 폴더에 컴포넌트를 만들거나 해당 페이지 코드 파일 하단에 작성하는 등 colocation 원칙을 적용해서 가까이 위치시키는 것이 좋을지 궁금합니다.
+- `Header` 컴포넌트에서 다른 theme을 가진 버튼들에 공통된 스타일을 적용하면서, 특정 버튼에만 추가적인 스타일을 주는 작업을 했습니다. 아래와 같이 각 버튼에 공통적으로 적용될 스타일을 `commonButtonStyles`로 정의하고, `theme=default`인 버튼에만 추가 스타일을 적용해보았는데, 제가 구현한 방식보다 더 괜찮은 방법이 있는지 궁금합니다.
+```jsx
+const commonButtonStyles = css`
+  white-space: nowrap;
+  border-radius: 4px;
+`;
+```
+```
+<Button theme="outlined" css={[commonButtonStyles]}>
+  채용공고 등록
+</Button>
+<Button theme="textbutton" css={[commonButtonStyles]}>
+   닉네임
+</Button>
+<Button
+  css={[
+    commonButtonStyles,
+    css`
+      background-color: #0a65cc;
+      color: #fff;
+    `,
+   ]}
+>
+  로그아웃
+</Button>
+```
+- 태블릿(`768px`)과 모바일(`480px`)에서 반응형을 고려하여 `breakpoints`를 정의하였고, 이를 보다 명시적으로 활용하기 위해 `responsiveStyles` 함수를 구현했습니다.
+멘토님께서는 보통 반응형 스타일링을 구현할 때 어떤 방식을 사용하시나요?
+혹시 제가 사용한 `responsiveStyles` 함수보다 효율적이거나 코드의 가독성을 높일 수 있는 더 나은 방법이 있을까요? 멘토님이 추천하는 방법이나 일반적으로 사용되는 best practice 또한 궁금합니다.
+- 현재 `Modal` 컴포넌트를 사용할 때마다 `useToggle` 커스텀 훅을 함께 사용해야 해서, 모달을 제어하기 위한 코드가 흩어져 있는 느낌입니다. 이렇게 되면 모달 관련 로직으로 인해서 단일 책임 원칙에 어긋난다는 생각이 들곤 합니다.
+보다 나은 방식으로 `Modal` 컴포넌트를 동작시킬 수 있는 방법이 있을까요? `useToggle`처럼 모달을 제어하는 로직을 간소화하고, 모달 컴포넌트 자체가 스스로 상태를 관리하거나 쉽게 제어 가능한 형태로 구현할 수 있는지 궁금합니다.
+
+## 🙋‍♂️ 4주차 코드리뷰 질문
+- `Modal` 컴포넌트를 구현하면서 텍스트 부분과 버튼 부분에 들어갈 내용은 개발할 때 코드를 작성하는 사람이 자유롭게 작성하여 구성할 수 있도록 `textChildren`과 `buttonChildren`만으로 구성하였는데, 더 적합하거나 지향하는 방식이 있을까요

eslint.config.js

@@ -21,6 +21,8 @@ export default tseslint.config(
       ...reactHooks.configs.recommended.rules,
       'react-refresh/only-export-components': ['warn', { allowConstantExport: true }],
       'react-refresh/only-export-components': 'off',
+      'react-hooks/rules-of-hooks': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
     },
   },
 );