Atties - Frontend

폴더 구조 📁

전체 구조

├── .yarn
├── .storybook              #
├── public                  #
├── src                     #
    ├── @types              #
    ├── apis                #
    ├── components          #
        ├── common          #
        ├── auction         #
        ├── auth            #
        └── ...             #
    ├── features            #
    ├── hooks               #
    ├── pages               #
    ├── stories             #
    ├── styles              #
    ├── utils               #
├── README.md               #
└── ...

apis

Api 요청과 관련한 함수들 입니다.

.
├── apis
│   ├── _axios
│       └── instance.ts      # api instance를 만들어서 사용합니다.
│   ├── admin                # api class를 만들고 비동기 함수들을 작성합니다.
│   ├── artwork
│   ├── aution
└── ...

components

공통 컴포넌트와 페이지 단위로 필요한 컴포넌트로 분리하여 관리합니다.

.
├── ...
├── components
│ ├── common
│   ├── Button
│   ├── Layout
│   ├── Input
│   ├── Modal
│   └── ...
│ ├── auction
│ ├── chat
│ ├── exhibition
│ └── ...
└── ...

hooks

useQuery, useMutation으로 mapping한 query, mutation hook들과 개별 hook들을 작성합니다.

  .
├── ...
├── hooks
│ ├── mutations
│ ├── queries
│ ├── useCountDown.ts
│ ├── useInterval.ts
│ └── ...
└── ...

컨밴션 🌈

📄 네이밍 컨벤션

📄 타입스크립트 컨밴션

📄 Git 컨밴션

프로젝트 기술스택 🛠

• Language : Typescript
• Framework : Next.js
• Package Manager : yarn-berry
• State Management : React Query, Redux Toolkit
• Styling : TailwindCSS, tailwind-styled-components, HeadlessUI, Swiper
• Forms : React Hook Form
• Formatter : ESLint, Prettier
• Library : axios, sockJS, momentJS

우리의 성장기...

🗝️ 카카오, 네이버 소셜 로그인

🧿 axios instance로 api 요청 전후 및 error 핸들링

💧 react-query 제대로 알고 사용하기

🐽 Intersection Observer API와 react-query 사용하여 무한스크롤 구현

🎨 tailwind-styled-component

💬 채팅, stompjs, socketjs

🧡 스토리북 in nextjs and tailwind

👣 @types 폴더에서 전역 type 정의