프로젝트 소개

• aiffel 부분 클론 프로젝트
• 개발 인원 : 1인 (이연성)
• 개발 기간 : 22.03.02 ~ 03.05 (3일)

[구현한 화면]

선정 이유

• Select, Dropdown , Text, Input, TextArea 등 컴포넌트 재사용화

프로젝트 설치 및 실행 방법

 node -v
 v16.15.0

// client 실행

npm install
npm run start

// json-server 실행

cd json-server-test
npm install global json-server
npm start

프로젝트 관리

Jira를 이용해 할 일을 관리했습니다.

프로젝트 구조

├── json-server-test
├── public
├── src
│   ├── assets
│   │   ├── ic-active-like.png
│   │   ├── ...
│   │   └── index.ts
│   ├── components
│   │   ├── BackIcon
│   │   │   └── index.tsx
│   │   ├── Button
│   │   │   └── index.tsx
│   │   ├── Dropdown
│   │   │   ├── components
│   │   │   │   ├── Item.tsx
│   │   │   │   ├── Layout.tsx
│   │   │   │   ├── List.tsx
│   │   │   │   └── Trigger.tsx
│   │   │   └── index.tsx
│   │   ├── Header
│   │   │   └── index.tsx
│   │   ├── Input
│   │   │   ├── components
│   │   │   │   ├── Layout.tsx
│   │   │   │   ├── Right.tsx
│   │   │   │   └── Value.tsx
│   │   │   └── index.tsx
│   │   ├── Label
│   │   │   └── index.tsx
│   │   ├── Layout
│   │   │   └── index.tsx
│   │   ├── Pagination
│   │   │   └── index.tsx
│   │   ├── SearchBar
│   │   │   └── index.tsx
│   │   ├── Select
│   │   │   ├── components
│   │   │   │   ├── Input.tsx
│   │   │   │   └── Layout.tsx
│   │   │   └── index.tsx
│   │   ├── Text
│   │   │   ├── components
│   │   │   │   ├── TextLarge.tsx
│   │   │   │   ├── TextLayout.tsx
│   │   │   │   ├── TextMedium.tsx
│   │   │   │   ├── TextRegular.tsx
│   │   │   │   └── TextSmall.tsx
│   │   │   └── index.tsx
│   │   ├── TextArea
│   │   │   ├── components
│   │   │   │   ├── Layout.tsx
│   │   │   │   └── Value.tsx
│   │   │   └── index.tsx
│   │   └── index.ts
│   ├── pages
│   │   ├── Forum
│   │   │   ├── components
│   │   │   │   └── ForumList
│   │   │   │       └── index.tsx
│   │   │   ├── index.tsx
│   │   │   └── queries
│   │   │       ├── useGetForumListQuery.ts
│   │   │       └── useGetPageListQuery.ts
│   │   ├── ForumDetail
│   │   │   ├── index.tsx
│   │   │   └── queries
│   │   │       ├── useDeleteForumQuery.ts
│   │   │       ├── useGetForumDetailQuery.ts
│   │   │       └── usePatchLikeToggleQuery.ts
│   │   ├── ForumWrite
│   │   │   ├── index.tsx
│   │   │   └── queries
│   │   │       └── usePostForumQuery.ts
│   │   ├── Login
│   │   │   ├── index.tsx
│   │   │   └── queries
│   │   │       └── useLoginQuery.ts
│   │   └── index.ts
│   ├── redux
│   │   └── modules
│   │       ├── auth.ts
│   │       ├── forum.ts
│   │       └── index.ts
│   ├── styles
│   │   ├── GlobalStyle.ts
│   │   ├── flex.ts
│   │   └── mixins.ts
│   ├── types
│   │   ├── images.d.ts
│   │   └── payloadTypes.ts
│   └── utils
│   │   ├── formatPageArray.ts
│   │   └── regExp.ts
│   │
│   ├── index.tsx
│   └── Routes.tsx
├── package-lock.json
├── package.json
└── tsconfig.json

사용한 기술 스택

• 클라이언트 상태는 redux, 서버 상태는 react-query로 관리했습니다.
• json-server 를 활용하여 dummy server를 활용하였습니다.

- React, Typescript
- 상태 관리 : redux, react-query
- 스타일 : styled-components
- 기타 라이브러리 : json-server, react-route-dom 등

컴포넌트를 만들 때 고려한 내용

• 아토믹 디자인 패턴 (참고글)

공통 컴포넌트를 만들 때 Atomic Deign Pattern와 합성 컴포넌트 패턴 을 활용했습니다.

• 서브 컴포넌트로 분해한 후, 필요한 것만 조합해서 사용

// component/Input/index.ts

const Input = Object.assign(Layout, {
  Label,
  Value,
  Right,
});

export default Input;

--------------------------------------------

// component/Select/Value

function SelectInput({ isSelect, onClick, ...restProps }: ISelectInputProps) {
  return (
    <Input title={restProps.title} onClick={onClick}>
      <Input.Value readOnly {...restProps} />
      <Input.Right>
        <Arrow isSelect={isSelect}>
          <img alt="arrow down" src={selectIcon} />
        </Arrow>
      </Input.Right>
    </Input>
  );
}

export default SelectInput;

구현 사항

1. Private Route

• 로그인 상태에 따른 페이지 권환 기능
• 로그인 시 유저 정보 전역 상태 관리

2. Search & Pagination 기능

• Redux client store 사용 ( filteredList 및 list state 관리)
• searchBar component 생성 후 최적화 input value debounce 적용
• pagination component 생성 및 검색에 따른 pagination 기능 적용

3. 질문 등록

• 공통 Select , Dropdown Component 구현
• 등록하기 버튼 validation

4. 좋아요 및 삭제 기능

• json-server 활용 좋아요 및 삭제 기능 구현