ohhako / flashcard Goto Github PK

View Code? Open in Web Editor NEW

1.0 1.0 0.0 596 KB

영어공부를 위한 단어장 모바일 앱

JavaScript 3.78% TypeScript 61.92% Ruby 9.52% Kotlin 11.25% Objective-C 10.01% Objective-C++ 3.53%

flashcard's Introduction

Environment

pods: 1.15.2
ruby: 2.6.10p210
jdk: 17.0.9

Let's run!

Clone repository and run in below commands. you could run application on simulator/emulator

# install dependencies
yarn install
npx pod-install

# run Metro
yarn start

yarn ios
yarn android

Maintaining the main feature

Pull main branch and run below commands. If dependencies(package.json or .lock) are changed, run yarn install && npx pod-install before.

yarn start
yarn ios
yarn android

Unit test

yarn jest

flashcard's People

Contributors

Stargazers

Watchers

flashcard's Issues

feat: 최근에 봤던 카드는 드물게 보여주기

카드 목록에서 어떤 카드를 어떤 순서로 보여줄지 잘 정하는 게 중요할 것 같아요. 일단은 간단하게 아래와 같이 만들고, 단어가 많아지면 좀 더 똑똑한 방식을 도입하면 좋겠습니다.

못외운 카드 중 본지 가장 오래된 카드들을 먼저 보여준다.
외운 카드는 정해진 시간 안에 다시 보여주지 않는다.
한 번 외웠던 카드라도 이후에 사용자가 '못 외웠음'을 고르면 못 외운 카드로 간주한다.

feat: 첫 화면에 'hello'라고 써진 카드 앞면이 나온다

feat: 사용자가 단어 직접 추가하기

아래 기능이 동작하려면 앱 스토리지에 저장하고 불러오는 기능을 구현해야 합니다. #20 이후에 이어갈 작업이에요.

다른 탭에서 사용자가 단어를 직접 추가하기
카드의 앞/뒷면에 보여줄 영어와 한글 입력받기 (영문/한글만 입력하도록 유효성 제한)
'만들기' 버튼을 누르면 홈 화면과 이어진 deck에 카드를 추가하고 입력필드를 초기화 한 후 '성공했어요' 알려주기

다른 화면에서 홈화면 deck에 카드를 추가하는 방식이 두 가지 있을거 같아요. deck을 여기저기 화면에서 참조할 수 있게 이참에 전역상태 Context로 바꾸는건 어떨까요? @kkyueing

화면의 deck 상태를 그대로 유지하고 새 카드를 스토리지에만 추가하기 (단, 홈화면 포커스될 때마다 스토리지를 deck 상태에 덮어씌워야 함)
화면의 deck 상태를 전역상태로 바꾸고 새 카드를 상태/스토지리 두곳에 모두 추가하기

feat: 카드 뒷면에서 외웠음/못외웠음 버튼을 누르면 다음 카드 보여주기

feat: 상태 저장하고 불러오기

#9 (comment) 에서 이어지는 이슈입니다. 현재는 상태가 메모리에만 있어서 앱을 종료하면 모두 사라집니다. 상태를 저장하고 불러오는 로직을 추가해야 합니다.

@OHHAKO 님이 전에 사용해보신 라이브러리인 mmkv를 써서 구현하기로 했습니다.

refactor: AnimatedCard의 애니메이션 props 확장시키기

AnimatedCard 컴포넌트가 애니메이션 관련 스타일 중 opacity, transform.translateY 만 props로 받고있는데요. 다른 프로퍼티가 필요할때마다 props로 추가해야하는 번거로움이 있을거 같아요. 컴포넌트에 스타일을 줄때 보통 스타일 객체를 통째로 넘기는데요. 애니메이션 스타일도 느슨하게 제어할 수 있도록 이런식으로 관리해볼까봐요.

animation 관련 props는 객체로 넘길 수 있도록 바꿔볼게요.

또 애니메이션 로직은 여러개가 하나의 의미있는 단위로 묶일 수 있도록 hook으로 분리하는 작업도 같이하면 어떨까요?

refactor: Card.tsx에 책임을 더 주기

Card.tsx가 현재는 title을 prop으로 가지고 있는데 그 대신 word와 flipped를 받도록 바꾸면 어떨까요? 지금은 앞면을 보여줄지 뒷면을 보여줄지 여부를 App.tsx에서 판단하고 있는데 그 책임을 Card.tsx에게 위임하면 좋을 것 같아서요. 괜찮은 것 같으면 PR을 열어보겠습니다.

feat: 카드 크기를 키우고 버튼을 아래로 옮기기

지금 디자인은 왼쪽처럼 생겼는데 이걸 오른쪽처럼 바꿔보면 어떨까요?

제안하는 이유는 이렇습니다:

카드를 누를 때랑 버튼을 누를 때 엄지손가락이 최소한으로만 움직이면 좋겠습니다.
카드와 버튼이 좀 더 엄지손가락으로 누르기 쉬운 위치(thumbzone)에 있으면 좋겠습니다.

docs: `README.md`에 개발환경 세팅에 대한 내용 넣기

README.md에 개발환경 세팅에 대한 내용이 담기면 좋겠어요. 일단은 맥, iOS, yarn, VS Code 조합을 쓴다고 가정하고 아래 내용을 담아보면 어떨까요?

처음에 1회만 하면 되는 작업
git pull 받은 후에 해야하는 작업
단위 테스트 실행 방법

단어를 외우는 하루 단위 루틴 기획

#9 (comment) 에서 이어지는 이슈입니다.

지수함수로 가면 다음에 보는 시간이 극단적으로 길어지는 일이 있을수도 있지 않을까요? 최악의 경우 단어의 총합도 바닥나서 어느날은 0개일수도 있겠군요. 특정 기간이 지나면 jitter같은 방식으로 1~5일 특정 구간을 무작위로 주는 방법도 있을거 같아요. 혹은 단어를 무한으로 가져온다거나요.

먼저 @kkyueing 님이 말씀하신 방식으로 개선해보아요! 단어 총량을 어떻게 다룰지도 얘기해보고 싶어요.

추가로 하루 외우기의 끝이 정해져 있으면 보상을 느끼기도, 습관을 들이기도 더 쉽지 않을까요?

컨셉도 '하루 20개만 외워라' 라는 의미로 20PerDay 같은 이름도 떠올라요
다 외우고나면 Anki처럼 폭죽같은걸 터뜨려 "하루치 다 외웠다!" 는 감각을 주고싶다.

위 방향으로 기획을 구체화하여 단어를 외우는 하루 단위 루틴을 기획해보면 좋겠습니다. 초안을 댓글로 남겨볼게요 :)

색깔 3개 이하로 들어가 있고 선으로만 그려진 단순한 형태
크기는 512x512 권장

AI야 그려줘

feat: 카드를 쌓인 형태로 보여주기

단어 카드를 외우면서 시각적으로 즐거울 만한 요소를 간단히 넣어볼게요.

카드를 겹겹이 쌓인 스택으로 보여주기
맨 위에 놓인 카드를 외우면 스택에서 사라지기
못 외운 카드는 스택 맨 뒤로 이동하기 (조만간 다시 나타날 수 있음을 암시)