greatsumini / pickk-app Goto Github PK

작업할 경로
ex : src/controllers/login, src/services/login

구현물의 기능
Login 관련 logic을 담당하는 Controller.
authUser등등으로 구성됨!

작업할 경로
src/components/channel

구현물의 기능
id를 통해 해당 채널의 데이터를 불러와서 보여준다.
자신의 채널이라면 채널 데이터를 수정할 수 있게한다.

주의사항/사이드이펙트 (선택)
없음

버그 설명
ios simulator에서 포스트 와 랭킹 아이템 쿼리시 네트워킹에러 발생

To Reproduce
Steps to reproduce the behavior:

1. react-native run-ios실행
2. 포스트나 랭킹 스크린 보기

Expected behavior
네트워크 문제없이 리스트 아이템 화면에 출력

Screenshots

pickk-cli에서 참고할 파일
pages/orders/[id]/refund.tsx
components/orders/claim/refund/phase1/item-info.tsx
components/orders/claim/refund/phase1/refund-policy.tsx

새로 생성될 파일
order-refund/index.tsx
order-refund/phase1/index.tsx
order-refund/phase1/product-info.tsx
order-refund/phase1/refund-policy.tsx

수정될 파일
order-claim/footer.tsx
->
order-claim/footer/index.tsx
order-claim/footer/price-row.tsx

pickk-cli 참고 코드
pages/mypage/questions.tsx
src/components/mypage/questions/list.tsx
src/components/mypage/questions/list-header.tsx
src/components/mypage/questions/question/index.tsx
src/components/mypage/questions/question/index.tsx

새로 생성되는 파일
src/components/my-question-list/index.tsx
src/components/my-question-list/date-header.tsx
src/components/my-question-list/card.tsx
src/components/my-question-list/description.tsx

작업할 경로
ex : src/modules/navigation/header/main

구현물의 기능

스크롤 상태에 따라 유동적으로 높이, 타이틀 폰트 사이즈가 변함.
맨 오른쪽의 검색 버튼은 고정이고 다른 버튼들을 추가할 수 있음.
type Props = {
title:string;
buttons?:React.ReactElement[];
}
로 예상중

주의사항/사이드이펙트 (선택)
없다.

0.63.2 버전으로 업그레이드

Pressable 지원
TextInput 한글 입력 버그 수정 등등
개선점이 꽤 되기 때문에 이번 기회에 업그레이드하겠음

해결책
numColumns, style prop 추가

@react-native-community/picker 를 사용
상세 스펙은 디자인 시스템 정리 후에 추가

pickk-cli 참고 파일
pages/orders/index.tsx
src/components/order/list/item/index.tsx
src/components/order/list/item/header.tsx
src/components/order/item/index.tsx
src/components/order/list/item/footer.tsx
src/components/order/item/item-description.tsx

생성될 파일
src/components/order-list/index.tsx
src/components/order-list/item/index.tsx
src/components/order-list/item/header.tsx
src/components/order-list/item/card.tsx
src/components/order-list/item/footer.tsx
src/components/order-list/item/description.tsx

OrderItem list service 이용해 데이터 받고 디자인 구현해 화면에 띄우기

작업할 경로
src/modules/header
src/components/ranking-list

구현물의 기능
랭킹리스트에 헤더를 추가한다.
헤더에 아이콘들로 구성된 필터를 적용한다.
적용된 필터를 통해 리스트를 보여준다.

주의사항/사이드이펙트 (선택)
없음

pickk-cli 참고 파일
src/component/organisms/common/header/back.tsx

생성되는 파일
src/modules/molecules/header/back.tsx

@invertase/react-native-apple-authentication 패키지 사용
참고 블로그 : https://coding-dahee.tistory.com/156

작업할 경로
ex : src/components/search

구현물의 기능
검색 스크린의 헤더 및 검색 기능 구현

주의사항/사이드이펙트 (선택)
없음

한글
Noto Sans KR
font-weight 400, 500, 700

영문, 숫자
Montserrat
font-weight 400, 500, 600, 700

작업할 경로
src/components/home/heaer, exhibition

구현물의 기능
헤더, 퀵메뉴, 추천LOOK를 구현한다.

1. SWRConfig 추가
2. useRequest, usePageRequest, useAxiosRequest 추가
3. SWRPageList, SWRFlatList 추가

react-native-fbsdk를 사용한다. (https://github.com/facebook/react-native-fbsdk)

Cart, OrderSheet를 커버한다.
구조는 웹과 동일하다.

문제점
현재 가격 설정 필터가 비어있음

해결책
지그재그와 유사하게 필터 만들기

작업할 경로
src/components/post-view
src/components/post-list/card

구현물의 기능
post-list/card를 눌렀을 시에 post-view 스크린으로 가도록 한다.
post-list/card으로 부터 데이터를 받아서 헤더를 보여준다.

완성할 부분

주의사항/사이드이펙트 (선택)
없음

pickk-cli 참고 코드
pages/orders/[id]/cancel.tsx
src/components/orders/claim/header.tsx
src/components/orders/claim/reason.tsx
src/components/orders/claim/footer.tsx
src/coponents/orders/section/index.tsx
src/components/orders/cancel/product/list.tsx
src/components/orders/cancel/product/index.tsx
src/components/orders/cancel/product/description.tsx

새로 만들어질 파일들
modules/molecules/section.tsx
src/components/order-cancel/index.tsx
src/components/order-claim/header.tsx
src/components/order-claim/reason.tsx
src/components/order-claim/footer.tsx
src/components/order-cancel/product/list.tsx
src/components/order-cancel/product/brand-card.tsx
src/components/order-cancel/product/card.tsx
src/components/order-cancel/product/description.tsx

전역적으로 적용되는 context.
현재는 me, signIn, signOut 기능을 제공한다.

1. 전역으로 적용됨
2. method : signIn, signUp, signOut
3. field : user - users_me 결과를 저장하고 있음.

작업할 경로
ex : src/components/login/phase0

구현물의 기능
facebook login 요청 후 응답을 받아온다.
신규 유저면 Phase1으로 이동하고 기존 유저면 로그인 처리를 한다.

작업할 경로
src/components/home/carousel

구현물의 기능
indexer를 포함한 carousel

어떤 라이브러리 사용할지 or 구현할지 결정
및 적용

pickk-cli에서 참고할 코드
src/services/OrderItem/index.ts
src/services/OrderItem/config.ts

추가되는 파일
src/services/OrderItem/index.ts
src/services/OrderItem/config.ts

작업할 경로
src/components/search

구현물의 기능
navType과 postType에 따라 원하는 정보를 서버에서 가져와 보여준다.

주의사항/사이드이펙트 (선택)
없음

https://www.notion.so/sumins/molecules-Section-1c75fc2696054109ab2011fbdbaf64fc

바뀐 디자인으로 구현

생성할 파일 경로
src/modules/list/page, src/modules/list/scroll

구현물의 기능
서버에서 데이터의 목록을 가져와 listItem component들의 props로 mapping 시켜준다.

주의사항/사이드이펙트 (선택)
아직은 없음.

pickk-cli 참고 파일
pages/questions/[id].tsx
src/components/question/index.tsx
src/components/question/item-part.tsx
src/components/question/question-part.tsx
src/components/question/question-part/answer-part.tsx

새로 생성되는 파일
src/components/question-detail/index.tsx
src/components/question-detail/card/item.tsx
src/components/question-detail/card/question.tsx
src/components/question-detail/card/answer.tsx

작업할 경로
src/components/post-list/index.tsx
src/components/post-list/filter
src/modules/navigation/drawer/bottom

구현물의 기능

1. post list 에서 필터에 의해 걸러진 데이터를 서버에서 가져온다.
2. drawer를 만들어 필터 옵션을 보여주고, 필터옵션을 선택하면 적용될 수 있다.

주의사항/사이드이펙트 (선택)
postListScreen에서 쿼리문에 필터가 추가될 것입니다.

pickk-cli 참고 파일
pages/item/[id]/questions/edit.tsx
src/components/item/shop/questions/edit/item-info.tsx
src/components/item/shop/questions/edit/section/type.tsx
src/components/item/shop/questions/edit/section/title.tsx
src/components/item/shop/questions/edit/section/content.tsx
src/components/item/shop/questions/edit/section/phone.tsx
src/components/item/shop/questions/edit/section/secret.tsx

새로 생성될 파일
src/components/question-edit/index.tsx
src/components/question-edit/item-card.tsx

작업할 경로
?? (업데이트 예정)

구현물의 기능
전역 상태 관리를 위한 Apollo local cache storage 사용법을 익히고, 구현한다.
유저정보들을 저장한다.

주의사항/사이드이펙트 (선택)
없음.

작업할 경로
src/components/post-list/card/

구현물의 기능
포스트의 데이터를 필요한 만큼 props로 가져와 보여준다.

작업할 경로
src/module/carousel

구현물의 기능
스와이프로 앞, 뒤로 이동할 수 있다.
각 card를 클릭할 수 있다.
indicator : 몇번째인지 표시해준다.
indexer : 총 몇 장중 현재 card가 몇번째인지를 보여준다.

웹 구현 링크
index
indicator
indexer

pickk-cli 참고 파일
pages/orders/[id]/exchange.tsx

src/components/orders/claim/exchange/progress/bar.tsx
src/components/orders/claim/exchange/progress/node.tsx

src/components/orders/claim/exchange/phase0/item-info.tsx
src/components/orders/claim/exchange/phase0/option-select.tsx

src/components/orders/claim/exchange/phase1/exchange-policy.tsx
src/components/orders/claim/exchange/phase1/item-info.tsx
src/components/orders/claim/exchange/phase1/tracking-code.tsx
src/components/orders/claim/sent-checker.tsx

새로 생성될 파일
src/components/order-exchange/index.tsx

src/components/order-exchange/progress/bar.tsx
src/components/order-exchange/progress/node.tsx

src/components/order-exchange/phase0/index.tsx
src/components/order-exchange/phase0/product-card.tsx
src/components/order-exchange/phase0/option-select.tsx

src/components/order-exchange/phase1/index.tsx
src/components/order-exchange/phase1/product-card.tsx
src/components/order-exchange/phase1/exchange-policy.tsx
src/components/order-exchange/phase1/tracking-code.tsx
src/components/order-claim/sent-checker.tsx

Type
Primary, Secondary, Etc

Filled(optional) default : true
true -> fill
false -> Line | Text

Disabled(optional) default : false
true -> disabled
false -> enable

Block(optional) default : true
true -> block ) flex : 1
false -> inline ) padding : 8px 12px