badge 적용

wafflestudio · Sep 16, 2024 · 2bd9e72 · 2bd9e72
1 parent cf39578
commit 2bd9e72
Show file tree

Hide file tree

Showing 8 changed files with 407 additions and 22 deletions.
diff --git a/frontend/lecture/src/components/StackBadge/index.tsx b/frontend/lecture/src/components/StackBadge/index.tsx
@@ -0,0 +1,54 @@
+export const StackBadge = ({
+  stack,
+}: {
+  stack:
+    | 'Zustand'
+    | 'Jotai'
+    | 'Redux'
+    | 'Tanstack Query'
+    | 'SWR'
+    | 'Recoil'
+    | 'MobX'
+    | 'Sangte'
+    | 'Redux Toolkit'
+    | 'React'
+    | 'Claude Sonnet'
+    | 'v0'
+    | 'CSS'
+    | 'styled-components'
+    | 'emotion'
+    | 'Tailwind CSS';
+}) => {
+  const image = {
+    Zustand:
+      'https://user-images.githubusercontent.com/958486/218346783-72be5ae3-b953-4dd7-b239-788a882fdad6.svg',
+    Jotai: 'https://cdn.candycode.com/jotai/jotai-mascot.png',
+    Redux: 'https://redux.js.org/img/redux.svg',
+    'Tanstack Query':
+      'https://seeklogo.com/images/R/react-query-logo-1340EA4CE9-seeklogo.com.png',
+    SWR: null,
+    Recoil:
+      'https://d2eip9sf3oo6c2.cloudfront.net/tags/images/000/001/298/square_480/recoil.png',
+    MobX: 'https://mobx.js.org/assets/mobx.png',
+    Sangte:
+      'https://www.npmjs.com/npm-avatar/eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJhdmF0YXJVUkwiOiJodHRwczovL3MuZ3JhdmF0YXIuY29tL2F2YXRhci8yYjIzMTU0NTBkZjRmNzc3MmM0NTA5ZWQxNDEwNmI1OD9zaXplPTQ5NiZkZWZhdWx0PXJldHJvIn0.sJRQi6w4lEc74LfDpbf1VwBxVP8KEBuqEz601WqDH1s',
+    'Redux Toolkit': 'https://redux.js.org/img/redux.svg',
+    React:
+      'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcQo8BG6UD3b_Fowh4gtwIjw2GPTWQQ30uBy-w&s',
+    'Claude Sonnet':
+      'https://qph.cf2.poecdn.net/main-thumb-pb-1019-200-ecyfizaydihfkxfwhwjlruyjdyoxengr.jpeg',
+    v0: 'https://v0.dev/apple-icon.png?0ef31a19cc582b82',
+    CSS: 'https://upload.wikimedia.org/wikipedia/commons/thumb/6/62/CSS3_logo.svg/768px-CSS3_logo.svg.png',
+    'styled-components': 'https://styled-components.com/logo.png',
+    emotion: 'https://avatars.githubusercontent.com/u/31557565?s=200&v=4',
+    'Tailwind CSS':
+      'https://seeklogo.com/images/T/tailwind-css-logo-5AD4175897-seeklogo.com.png',
+  }[stack];
+
+  return (
+    <span className="inline-flex items-center gap-2 rounded-md bg-slate-200 py-1 pl-2 pr-3 text-xl dark:bg-slate-700">
+      {image !== null && <img src={image} className="inline w-6 rounded" />}
+      <span>{stack}</span>
+    </span>
+  );
+};
diff --git a/frontend/lecture/src/lectures/Architecture/index.tsx b/frontend/lecture/src/lectures/Architecture/index.tsx
@@ -6,6 +6,7 @@ import { CodeSnippet } from '@/components/CodeSnippet';
 import { Description } from '@/components/Description';
 import { ExternalLink } from '@/components/ExternalLink';
 import { Slides } from '@/components/Slides';
+import { StackBadge } from '@/components/StackBadge';
 import { getLectureItem } from '@/lectures';
 
 export const architectureLecture = getLectureItem({
@@ -46,7 +47,10 @@ export const architectureLecture = getLectureItem({
                 특히 요즘은 AI가 굉장히 빠르게 발전하고 있어서, 만드는 건{' '}
                 <strong>진짜</strong> 누구나 합니다
               </div>
-              <div>Claude Sonnet, v0 등등</div>
+              <div>
+                <StackBadge stack="Claude Sonnet" />, <StackBadge stack="v0" />{' '}
+                등등
+              </div>
               <div>
                 (개인 생각) 점점 개발자의 역량은 <strong>잘 만드는 것</strong> +
                 <strong>문제를 풀어내는 역량</strong>이 중요해질 것

diff --git a/frontend/lecture/src/lectures/Future/index.tsx b/frontend/lecture/src/lectures/Future/index.tsx
@@ -0,0 +1,9 @@
+import { Slides } from '@/components/Slides';
+import { getLectureItem } from '@/lectures';
+
+export const futureLecture = getLectureItem({
+  title: '프론트엔드의 현재와 미래',
+  description: '기술 동향 파악하기, 생태계에 참여하기',
+  date: new Date('2024-11-20 20:30:00'),
+  element: <Slides slides={[]} />,
+});
diff --git a/frontend/lecture/src/lectures/Performance/index.tsx b/frontend/lecture/src/lectures/Performance/index.tsx
@@ -145,7 +145,22 @@ export const performanceLecture = getLectureItem({
         },
         { title: '로딩 속도 개선: 용량 줄이기', content: <div>TBD</div> },
         { title: '로딩 속도 개선: 스켈레톤 ui', content: <div>TBD</div> },
-        { title: '로딩 속도 개선: 이미지 최적화', content: <div>TBD</div> },
+        {
+          title: '로딩 속도 개선: SSR (1) CSR 방식에 대한 이해',
+          content: <div>TBD</div>,
+        },
+        {
+          title: '로딩 속도 개선: SSR (2) SSR?',
+          content: <div>TBD</div>,
+        },
+        {
+          title: '로딩 속도 개선: SSR (3) 서버 컴포넌트',
+          content: <div>TBD</div>,
+        },
+        {
+          title: '로딩 속도 개선: SSR (4) 만능일까?',
+          content: <div>비용, 서버 리소스 관리, 프레임워크에 결합</div>,
+        },
       ]}
     />
   ),