https://github.com/pacocoursey/cmdk

• 전체 검색 용 컴포넌트
• 레이아웃 에 포함 될 컴포넌트

as-is

• 현재는 gray scale / primary 등의 색만 지정해놓은 상태

to-be

• secondary

• radix-color 에서 각 색 scale 별로 사용 용도를 지정해놓은게 있음 [참고](color palette). 여기 보고 각 색을 css variable 로 선언해서 추후 사용하기 간편한 형태로 만들것

• secondary: crimson

• tertiary: yellow

• https://web.dev/keyboard-access/

nextjs 버전을 최신으로 올린다음부터 안됨

이미 이슈잉이 되어있고, (근본적인 해결은 아니지만) concurrently 를 활용한 해결 방안 존재

참고

• 메인 타이틀
• 글자색 변경할 수 있는 텍스트 컴포넌트

• toc

• 댓글

• 이전 / 다음 으로 이동

• mdx 콘텐츠의 최대 영역 다시 정하기

  • 지금은 1280이 최대. 일반적인 사이트라면 괜찮겠지만, 만들고보니 보기에 좋지 않다.
  • mdx 공식 문서도 markdown 으로 만들어져있다..! 해당 사이트가 가지고 있는 크기 + table of contents 의 영역을 잡으면 될듯함
  • 여기보다 mdn 사이트의 영역이 더 괜찮을듯
  • 분석을 해보니 문제는 두개. 1. 영역이 너무 넓다. 2. 메인 콘텐츠의 내용이 정중앙에 위치하지 않는다.

• 인덱스 페이지라 함은, 폴더의 내용을 보여주는 페이지
• 현재 존재하는 인덱스 페이지는 아래 5개. 각각이 다른 디자인을 해줘야할거같다.
  • root
  • blog
  • snippet
  • archives
  • mdx-sketch

#21 에서 contentlayer 를 이용해 data 를 변수로 저장함. 해당 변수를 이용 각 페이지에서 사용할 정보 만들기

모바일( ~ 768px)

• 햄버거

태블릿 이상 ( 769px ~ )

• 지금과 동일하게

간단히... github 로 연결

기존 폴더구조를 재귀적으로 돌면서 폴더 정리 & mdx 파일 찾아오는 로직을 contentlayer 로 변경
(contenetlayer 가 직접 type 을 생성해줌)

todo

• contentlayer 를 이용한 mdx rendering
  • code highlight
• next-mdx-remote 제거
• 코드 정리
• contentlayer 문서 참고
  • mdx-bundler 설치 필요

as-is

• next remote 를 이용해 데이터를 serializing 하고 정보를 파싱.

to-be

• contentlayer 가 이미 generate 한 데이터 사용
• 현재 문제는 contentlayer 에서 제공하는 훅을 이용해 컴포넌트를 생성 & generated 된 데이터를 넣어도 아무런 정보가 렌더링 되지 않음.

1. 현재 class 명으로 관리하는 theme 을 data-attributes 로 수정. class 명은 해당 tag 의 역할 지정. 상태에 관한 정보는 가능한 class 가 아니라 data-attribute 사용
2. theme provider 구현

• theme 을 상태로써 관리할 수 있게 수정

3. themeScript 수정

https://ui.shadcn.com/doc 에서 theme button 참고

백그라운드 색이 들어가있는게 너무 구리다

• 12 칼럼 / 16칼럼 등...
• carbon design system

as-is

• context 로 관리하는 device 가 resize 이벤트로 관리되고있음 -> 구림.

to-be

• match media 로 수정

as-is
카드 컴포넌트 전체를 a 의 after 속성이 차지하고 있어서 텍스트 셀렉이 불가능

to-be

• after 속성 제거
• js 이용

root 404 페이지 만들기

• 참고: https://beta.nextjs.org/docs/api-reference/notfound

문제

현재 posts 폴더에 있는 mdx 파일을 읽어서 페이지를 그려주고있음. 즉 ssg 가 되어야한다.
하지만 npm run build 를 돌려보면 ssg 가 아닌 모든 페이지가 ssr 로 그려지고 있음

원인

cookie 함수 때문이다. 여기를 읽어보면 cookie 함수는 dynamic rendering 을 만든다고 있음

엮이는 문제

지금 cookie 를 사용하는 이유는 사용자의 쿠키에 저장되어있는 theme 값을 보고 theme 이 설정되어있다면 그에 맞춰 html 의 class 명을 세팅해준다.

해결방안

• script 를 사용해서, client 에서 해결한다.
• root layout 에 들어가는 client component 에서...

현재 client-side 에서 incr 하는중
서버에서 ip 확인 후 incr 하는 로직 넣기

아직 redis 개념이 없음. 학습 후 todo 작성

production 에서 동작안함

as-is

• 앵커 텍스트를 누르면 해당 태그로 scroll 이 이동한다. 문제는 스티키 헤더가 생기면서 스티키 헤더에 텍스트가 가림

to-be

• 브라우저 기본의 scroll 을 이용하는게 아니라 js 로 구현
• scroll padding 을 이용하면 됨 참고

-atom 으로 사용할 다형성 컴포넌트 구현

• 다형성 컴포넌트를 이용해 typo 에 as 프롭

todo

• Polymorphic 아토믹 컴포넌트 구현

• typography

  • props
    • variants
    • weight
    • color
    • text ellipsis

todo

• types.ts 에서 정의한 커스텀 타입 제거 후 contentlayer 에서 가져온 Post 타입으로 변경
• contentlayer 의 Post 타입 수정 및 mdx 파일에 적용

1. 모바일 메뉴 리스트 z-index 쌓임스택 조절
2. sticky hover

• hover 수도클래스가 들어가는 모든 곳 탐색해서 수정
• 이 때 중요한건 active로 hover 의 effect 를 넣어줘야만함.

3. color

디자인

• 색
• 사이즈

입체효과 주기

0-plugins

• third party libraries

1-theme

• all absolute values
• css variable

2-base

• sass utility
• mixin...

3-page

• pages

4-components

• component

https://medium.com/@ogonzal87/how-i-made-a-themeable-design-system-for-my-professional-brand-oskrhq-ds-1c10f5b87587

https://github.com/ogonzal87/oskrhq-ds/tree/master/src/styles

https://vimeo.com/282266378

todo

• posts폴더에 존재하는 파일을 가져온다.