saseungg / second-hand

우리 동네 중고 거래 마켓

🥕 세컨드 핸드 - 중고거래 서비스

• 중고 거래 서비스 웹 구현 프로젝트
• 팀 구성: FE 2, BE 2
• 기간: 2023.06.01 ~ 2023.06.30 (한달)
• 팀레포 보러가기 | 팀노션 보러가기

🎥 기능 데모

데스크톱뷰	로그인	홈화면

카테고리	상품 등록	상품 삭제	상품 상태 변경	관심상품 등록

🛠️ 주요 기술

• React.js: 웹 UI 라이브러리
• TypeScript: 정적 타입 사용 및 코드 에러 검출
• styled-components: css-in-js를 통한 컴포넌트 스타일 관리
• storybook: 컴포넌트 UI 테스트
• ESLint & Prettier: 코드 컨벤션 검사 및 코드 포맷팅

👥 협업

• 코딩 컨벤션
• 브랜치 전략, 이슈, 커밋, PR
• 코드 리뷰 후 merge 진행: PR 보러가기

📂 프로젝트 구조

📦 public                                # 정적 파일들이 위치하는 디렉토리
├─ .storybook                            # Storybook 설정 파일
├─ src                                   # 소스 코드가 위치하는 디렉토리
│  ├─ assets                            # 이미지 및 기타 자원 파일들
│  ├─ components                        # 컴포넌트 파일 - UI 구성 요소들
│  │   ├─ common                        # 공통으로 사용되는 컴포넌트들
│  │   └─ ...                           # 페이지별 컴포넌트들
│  ├─ context                           # 상태 관리를 위한 컨텍스트 파일들
│  │   ├─ themeContext.tsx              # 다크모드 테마 관련 컨텍스트
│  │   └─ userContext.tsx               # 유저 로그인 상태 관련 컨텍스트
│  ├─ hooks                             # 커스텀 훅 파일들
│  │   ├─ useFetch.ts                   # 데이터 페치 관련 커스텀 훅
│  │   └─ useIntersectionObserver.ts    # 무한 스크롤 타겟 감지 커스텀 훅
│  ├─ pages                             # 페이지 컴포넌트들
│  ├─ styles                            # 전역 스타일 설정 및 컬러, 타이포 시스템 정리
│  │   ├─ color.ts                      # 컬러 시스템 정의
│  │   ├─ font.ts                       # 타이포시스템 정의 
│  │   └─ GlobalStyle.ts                # 전역 스타일 설정
│  ├─ utils                             # 공통으로 사용하는 유틸리티 함수들
│  ├─ App.tsx                           # 애플리케이션 컴포넌트
│  └─ index.tsx                         # 엔트리 포인트 파일
├─ .env                                  # 환경 변수 설정 파일
├─ .eslintrc.json                        # ESLint 설정 파일
├─ prettierrc                            # Prettier 설정 파일
├─ craco.config.js                       # Craco 설정 파일
├─ package-lock.json                     # npm 패키지 의존성 파일
├─ package.json                          # npm 패키지 의존성 및 프로젝트 상세 파일
├─ README.md                             # README 파일
├─ tsconfig.json                         # 타입스크립트 설정 파일
└─ tsconfig.paths.json                   # 절대 경로 설정 파일

🗺️ 아키텍처

second-hand's Issues

[server] oauth 로그인 api 구현

✨ 진행할 작업

oauthorazationcode를 받아서 토큰을 받아오는 api를 짠다.

📝 TODO

• api 명세서 작성
• api 로직 구현

🎸 기타

[client] top 스크롤 커스텀 훅 분리 및 페이지별 스크롤 유무에 따른 위치 흔들림 해결하기

☑️ 진행할 작업

• top 스크롤 커스텀 훅 분리
• 페이지별 스크롤 유무에 따른 위치 흔들림 해결하기

📝TODO

• 스크롤 내렸을 때 topbutton 등장하도록 하기
• 커스텀 훅 분리
• 스크롤 유무에 따른 위치 흔들림 해결
• fetch시 로딩 페이지 위로 올라가는 문제 해결

⚙️기타

[client] 이미지 최적화

☑️ 진행할 작업

이미지 최적화

📝TODO

• 상품 디테일 이미지 사이즈 수정
• webP 변환
• 이미지 사이즈 고정값으로 저장할 수 있도록 수정

⚙️기타

[client] sticky로 header와 footer 고정시키기

☑️ 진행할 작업

• layout 페이지별이 아닌 전체 컴포넌트에 묶어주기
• sticky로 header와 footer 묶어주기

📝TODO

• sticky로 header와 footer 묶어주기
• 레이아웃 컴포넌트 전체 묶어주기 (feat app.ts)
• top 버튼, 글 작성 버튼 위치값 고정 시키기
• 백그라운드 배경 고정시키기

🧐 고민사항

• sticky를 사용해서 header와 footer를 고정하니 문제들이 발생했음.
• 스크롤을 빠르게 내렸을 떄 위치가 깜빡거림 (고정되는 위치가 스크롤에 따라 결정되기 떄문에)
• fixed로도 처리가 가능한데 다양한 에러들을 해결하면서까지 sticky를 고집해야할 이유가 없어 fixed를 사용하기로 결정

[client] sticky가 아닌 fixed로 header, footer 고정시키기 (내부 스크롤 없애기)

☑️ 진행할 작업

• sticky를 사용하면서 생기는 문제들(깨짐 현상, 위치값 고정시키기에 한계가 있음) fixed를 사용하기로 결정
  • #5
• 대신 내부 스크롤을 제외시킬 거임 (원래 목적)

📝TODO

• 내부 스크롤 제외시키기
• fixed를 사용하여 header, footer 고정
• 탑 버튼, 상품등록 버튼 고정시키기
• 백그라운드 고정시키기
• 카테고리에 스크롤 적용
• 미디어쿼리가 1024px 이하로 줄어들었을때 높이값이 줄어드는 문제 해결

⚙️ 이후 할 작업들

• 스크롤 있는 페이지와 없는 페이지 밀리는 현상 해결하기
• 내부 스크롤 삭제로 탑버튼 스크롤 먹히지 않는 문제 해결하기
• 커스텀 훅 분리

[client] 새상품 등록 추가 안되는 문제 해결

☑️ 진행할 작업

새상품 등록 추가 안되는 문제 해결

원인

useNavigate를 함수내에 선언해줬음.. 이런 실수를..하다뉘

[client] 페이지별 레이아웃 해제 후 라우터 상단에 레이아웃 적용

☑️ 진행할 작업

• 라우터 상단에 레이아웃 컴포넌트 적용

📝TODO

• 페이지별 적용했던 레이아웃 해제
• 라우터 부모요소로 레이아웃 컴포넌트 적용

[client] 클라이언트, 서버 배포

☑️ 진행할 작업

클라이언트와 서버를 배포한다.

📝TODO

• heroku를 이용해서 서버 배포
• netilfy를 이용해서 웹서버 배포

⚙️기타

[client] MSW를 사용에 대한 고민

☑️ 진행할 작업

서버가 닫힌 현재 리팩토링 작업을 할 수 있도록 MSW 설정

📝TODO

• MSW 설치
• oauth 설정
• 목록 데이터 get
• region 데이터

⚙️기타

oauth도 msw를 이용해서 token을 가져올 수 있는지가 몰라서 한번 찾아봐야할 것 같다.

🧐 고민과정

msw로는 동적인 데이터를 처리하기가 어려움. post 처리를 해보고 싶은데 msw로는 반영이 안되고 정적인 데이터만 관리가 가능하기 때문에 서버가 중단된 현재 리팩토링을 하고 배포를 하려면 동적인 데이터를 처리해야된다고 생각.
고로 서버를 직접 만들어야겠다는 생각이 들었다.

[client] 데스크톱 화면 뷰 구성 및 스타일 수정

이슈 삭제 후 다시 생성해서 커밋 안딸려옴 (원래 이슈 번호 2)

☑️ 진행할 작업

기존 레이아웃을 모바일 화면에 맞춘 레이아웃 사이즈로 고정시키고 데스크톱 화면일 경우 다른 상호작용을 할 수 있도록 화면 구성

📝TODO

• 레이아웃 컴포넌트 구현
• 페이지별 레이아웃 적용
• 미디어 쿼리를 이용해서 뷰포트 사이즈가 커졌을 시 레이아웃 처리
• 스크롤, top button 스타일 수정
• Product item 좋아요, 채팅 스타일 수정
• 아이콘 사이즈 props 설정
• 레이아웃 적용으로 인해 깨지는 스타일 수정
• 모달 루트 위치 수정
• 드롭다운, 팝업 스타일 수정

⚙️기타

고민 거리 : 데스크톱 화면일 시 어떤 기능을 처리할지 고민해보기

[client] 전체 디자인 수정

이슈 삭제 후 다시 생성해서 커밋 안딸려옴 (원래 이슈 번호 14)

☑️ 진행할 작업

클론이 아닌 secondhand 만의 디자인을 가질 수 있도록 수정

📝TODO

• favicon 수정
• 타이틀 수정, 백그라운드
• 포인트 컬러 수정

⚙️기타

목데이터 테스트

☑️ 진행할 작업

📝TODO

⚙️기타

FE 브랜치에 있는 백엔드 코드 삭제

☑️ 진행할 작업

FE 브랜치에 있는 백엔드 폴더를 삭제한다.

[client] createObjectURL vs FileReader 비교

☑️ 진행할 작업

createObjectURL과 FileReader를 둘 다 적용해보고 성능을 비교해본다.

📝TODO

• FileReader 방식으로 적용해보기
• createObjectURL에 revoke 적용해서 메모리 해제
• 둘의 장단점을 도출해서 결론 내리기

⚙️기타

createObject가 성능면에서 더 좋다고는 하는데 직접 비교해보고 체감하기 위해 FileReader 버전으로도 구현해보기로했다.

[server] express 서버 초기 설정

☑️ 진행할 작업

express 통한 서버 구축

📝TODO

• express, mongoDB 학습
• mongodb와 mongoose 설치
• mongodb 생성
• api 명세서 작성
• express 초기 설정

⚙️기타

초기 설정을 하고 api 추가로 올리자!