> OSSCA Yorkie TIL(4) - 살면서 처음으로 이슈 해결해보기

오픈소스 컨트리뷰톤을 진행하면서 단 한번이라도 PR을 해보고 싶었다.
어느날 우연히 이슈 탭을 구경하다가 '할만하겠다!'라는 느낌이 든 good first issue를 발견했다.
내가 거대한 실수를 할까봐 무서웠지만 요키팀 사람들과의 모각코 때 창희멘토님이 응원을 해주셔서 용기를 내보았다. 원래 처음은 다 어려운 것이라고 했다.

이런식으로 말을 달면 이슈를 찜꽁할 수 있도록 assign을 해준다.

01. 머리를 굴려보자.

해야 하는 것

(PC가 다크모드) → 들어가면 코드페어가 다크모드
새로고침해도 다크모드 → 설정을 바꾸면 그때는 화이트모드
다른 방 들어가도 화이트모드
(PC가 화이트모드) → 들어가면 코드페어가 화이트모드

window.matchMedia를 쓰면 해결할 수 있다고 검색 결과 그래서 도전하기로 했다.

02. 코드를 고쳐보자!

a. `yorkie-team/codepair` fork

작업을 하기 위해서 Fork 버튼을 눌러서 내 작업을 하기 위해 가져간다.

clone the forked repository

git clone https://github.com/crescent-stdio/codepair.git

그리고 포크 뜬 레포지토리를 클론해서 작업하는 곳에 들고 온다.

b. 고쳤다

/src/features/settingSlices.ts

const SettingModel = new BrowserStorage<SettingState>('$$codepair$$setting');
const prefersDark: boolean = window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;
 
const initialState: SettingState = SettingModel.getValue({
	menu: {
	theme: Theme.Light,
	theme: prefersDark ? Theme.Dark : Theme.Light,
	codeKeyMap: CodeKeyMap.Sublime,
	tabSize: TabSize.Two,
},

set the theme to dark if the user's system is dark

BrowserStorage를 이용하면 된다고 창희님께서 이야기 하셔서 그 부분을 참고했다.

개발자 모드에서의 로컬 스토리지의 모습. $$codepair$$setting이라는 값에 테마 값이 있다.

브라우저 → 개발자 모드 → '애플리케이션' 탭 → 로컬 스토리지
- initialState에 담겨진 SettingModel 내용이 저기에 있었다.
src/features/settingSlices.ts 파일에 prefersDark라는 변수를 만들었다.
- 이 변수는 true 또는 false 값을 갖는 boolean 타입이어서 타입을 저렇게 썼다.
- window.matchMedia && window.matchMedia('(prefers-color-scheme: dark)').matches;를 쓰면 해결한다고 해서 데리고 왔다.
initialState에서 처음에 정의를 하고 그 다음에 세팅이 바꾸면 바뀌어지는 모습으로 진행하는 것으로 봉서 initialState의 theme를 prefersDark의 값에 따라 Theme.Dark 또는 Theme.Light로 설정해놓았다.

03. Commit & Push

그냥 커밋을 하면 안되고 CONTRIBUTING.md에서 요구하는 대로 맞춰서 해야 한다.

중요한 부분은 다음과 같다.

CONTRIBUTING.md

### Format of the commit message
We follow a rough convention for commit messages that is designed to answer two questions: what changed and why. The subject line should feature the what and the body of the commit should describe the why.
 
'''
Remove the synced seq when detaching the document
 
To collect garbage like CRDT tombstones left on the document, all
the changes should be applied to other replicas before GC. For this
, if the document is no longer used by this client, it should be
detached.
'''
The first line is the subject and should be no longer than 70 characters, the second line is always blank, and other lines should be wrapped at 80 characters. This allows the message to be easier to read on GitHub as well as in various git tools.

Respect system theme

If the user's system is dark, the editor theme is dark when user first visited

다음과 같이 커밋메세지를 썼다.
GitKraken에서는 Summary와 Description부분에 나눠서 썼다.

기본으로 보이는 모습

커밋메세지 'Respect system theme'밑에 'If the user's system is dark, the editor theme is dark when user first visited'도 적혀 있다.

펼쳤을 때의 모습

그리고 커밋한 것을 푸시하면 된다!

04. Full requests!

Yorkie의 메인테이너이신 영택님의 도움을 받아 진행했다.

저 초록색 버튼을 누르고 하라는 대로 했다.
그리고 내용을 적어야 한다.

What this PR does / why we need it?

If the user's system is dark, the editor theme is dark when user first visited

Any background context you want to provide?

What are the relevant tickets?

Fixes #214

Checklist

Added relevant tests or not required
Didn't break anything

네이버 카페 등업 양식처럼 양식을 채우면 된다.
나는 커밋메세지 그대로 넣으면 될 것 같아서 그대로 넣었다.
- Fixes #이 있는데 여기에 이슈 번호를 넣으면 된다.
- 그러면 나중에 이게 받아들여졌을 때 자동으로 이슈는 닫히게 된다. 신기함!!!!
그리고 제출!!
체크리스트는 제출 후 체크해도 유효하다.

CLA를 사인하라고 한다.
저 초록이 버튼이 원래는 빨간색으로 되어있었다.

CLA 사인, Please agree to the CLA for yorkie-team/codepair

사인하러 들어가면 다음과 같이 보인다.
밑에 있는 Agree버튼 눌렀다.

친절히 코드리뷰 해주시고 코멘트 남겨주셨다.
그렇게 머지가 되었다!!

Respect system theme #216

이슈가 자동으로 닫힌 것을 볼 수 있다!

05. 후기

와아아아아아아아아아

mdn/translated-content: Fix typo #7039

사실 그 전에 Yorkie Docs 읽으면서 궁금한 단어들 검색하다가 발견한 오타를 mdn에다가 수정 요청한 적이 있었다.
Yorkie에 기여하기 전에 풀리퀘를 도전해본다는 의미로 살짝 고쳐서 한 것이 억셉된 적이 있었는데, 이번에는 짧지만 내가 짠 코드가 들어가는 것이니깐 조금은 부담감이 컸었다.
하지만 요키팀의 도움으로 할 수 있게 되어서 좋았다!! 너무 감사드린다.
컨트리뷰톤 남은 기간동안 최대한 도움을 주고 싶어졌다! 부족하지만 도전 많이 해보고 싶다.