wafflestudio · woohm402 · Aug 28, 2024 · Aug 28, 2024
@@ -10,6 +10,9 @@ import { Environment } from '@/pages/Environment/lecture';
 import { Home } from '@/pages/home';
 import { OTAssignment } from '@/pages/OT/assignment';
 import { OT } from '@/pages/OT/lecture';
+import { ReactBasicAssignment } from '@/pages/ReactBasic/assignment';
+import { ReactBasic } from '@/pages/ReactBasic/lecture';
+import { WebBasic } from '@/pages/WebBasic/lecture';
 import { formatDate } from '@/utils/utils';
 
 const pages: (
@@ -41,7 +44,7 @@ const pages: (
   },
   {
     type: 'assignment',
-    title: '코모 인증샷',
+    title: 'OT 과제',
     due: new Date('2024-09-25'),
     path: '/como-1',
     element: <OTAssignment />,
@@ -63,26 +66,33 @@ const pages: (
   },
   {
     type: 'lecture',
-    title: '웹, html, css, js',
-    description: 'html, css, js의 역할과 동작',
+    title: '웹과 언어',
+    description: '웹의 역사, html, css, js의 역할과 동작, typescript의 필요성',
     date: new Date('2024-09-25'),
-    path: '/web-html-css-js',
-    element: <div>TBD</div>,
+    path: '/web-html-css-js-ts',
+    element: <WebBasic />,
   },
   {
     type: 'lecture',
-    title: '타입스크립트',
-    description: 'typescript 기초',
+    title: '리액트 맛보기',
+    description: 'typescript 기초, React 의 JSX / state / props',
     date: new Date('2024-09-25'),
-    path: '/typescript',
-    element: <div>TBD</div>,
+    path: '/react-basic',
+    element: <ReactBasic />,
+  },
+  {
+    type: 'assignment',
+    title: '리액트 기초 과제',
+    due: new Date('2024-10-09'),
+    path: '/react-basic-assignment',
+    element: <ReactBasicAssignment />,
   },
   {
     type: 'lecture',
     title: '리액트',
-    description: '리액트의 철학, props와 state, hooks',
+    description: '리액트의 철학, 상태 설계, Context, Hook',
     date: new Date('2024-10-02'),
-    path: '/react-basic',
+    path: '/react',
     element: <div>TBD</div>,
   },
   {

@@ -6,10 +6,15 @@ export const CodeSnippet = ({
   language,
 }: {
   code: string[];
-  language: 'shell' | 'json';
+  language: 'shell' | 'json' | 'html' | 'css' | 'javascript' | 'typescript';
 }) => {
   return (
-    <Prism language={language} style={darcula} showLineNumbers>
+    <Prism
+      language={language}
+      style={darcula}
+      showLineNumbers
+      customStyle={{ fontSize: 16 }}
+    >
       {code.join('\n')}
     </Prism>
   );

@@ -0,0 +1,14 @@
+export const SlideContent = ({
+  title,
+  content,
+}: {
+  title: string;
+  content: string;
+}) => {
+  return (
+    <div className="mb-10 flex flex-col gap-2">
+      <h2 className="text-2xl">{title}</h2>
+      <p className="mt-4 pl-8 text-xl">{content}</p>
+    </div>
+  );
+};
@@ -0,0 +1,22 @@
+import { ReactNode } from 'react';
+
+export const AssetDescriptionLayout = ({
+  asset: asset,
+  description,
+}: {
+  asset: ReactNode;
+  description: string[];
+}) => {
+  return (
+    <div className="grid grid-cols-[4fr_6fr] gap-8">
+      <div>
+        <ul className="flex flex-col gap-6">
+          {description.map((d) => (
+            <li key={d}>{d}</li>
+          ))}
+        </ul>
+      </div>
+      <div>{asset}</div>
+    </div>
+  );
+};
@@ -1,15 +1,26 @@
+import { ExternalLink } from '@/components/ExternalLink';
+
 export const OTAssignment = () => {
   return (
     <div className="flex h-full items-center justify-center">
       <ul className="flex list-disc flex-col gap-4 pl-10">
-        <li>설문지 작성 완료 (~오늘)</li>
-        <li>조원 확인 및 채널/DM방 개설 (~내일)</li>
+        <li>조원 확인 및 채널/DM방 개설 (~오늘)</li>
         <li>
-          다음 세미나 전까지 코모 1회{' '}
+          다음 세미나 전까지 코모 1회 진행 후 #frontend-잡담 채널에 인증샷
+          업로드
+          <br />
           <b className="text-base text-slate-500">
             설입이면 세상과 연애하기, 할리스, 커피어반, 커피빈, 관정 스터디룸,
             토즈모임센터 등
           </b>
+          <br />
+          <b className="text-base text-slate-500">얼굴은 안 나와도 됩니다.</b>
+        </li>
+        <li>
+          벨로퍼트와 함께 하는 모던 리액트 1-16 까지 튜토리얼 진행하면서 개념
+          정리하고, 정리한 내용 마크다운 형태로 #frontend-잡담 채널에 업로드
+          <br />
+          <ExternalLink href="https://react.vlpt.us/" />
         </li>
       </ul>
     </div>

@@ -29,6 +29,22 @@ export const OT = () => {
         { title: '세미나 목표', content: <SeminarContent /> },
         { title: '세미나 목표', content: <SeminarGoal /> },
         { title: '세미나 목표', content: <SeminarDiff /> },
+        {
+          title: '과제',
+          content: (
+            <div className="flex flex-col gap-8 text-3xl">
+              <p>
+                세미나에서 하나도 안 알려줘놓고
+                <br />
+                <br />
+                <i>할수있죠? 화이팅!</i>
+                <br />
+                <br />
+                하는 과제
+              </p>
+            </div>
+          ),
+        },
         { title: '조별과제', content: <Team /> },
         { title: '평가', content: <Grade /> },
       ]}

@@ -0,0 +1,20 @@
+import { ExternalLink } from '@/components/ExternalLink';
+import { InlineCode } from '@/components/InlineCode';
+
+export const ReactBasicAssignment = () => {
+  return (
+    <div>
+      <h1>게임 만들기</h1>
+      <ul>
+        <li>
+          지뢰찾기, 2048, 네모로직 중 하나를 선택해서 구현한다 (예시:{' '}
+          <ExternalLink href="https://play2048.co/" label="2048" />
+        </li>
+        <li>
+          개인 레포에서 <InlineCode code="yarn create vite" /> 로 새 프로젝트를
+          만들고, 개인 레포에 푸시한다
+        </li>
+      </ul>
+    </div>
+  );
+};
@@ -0,0 +1,92 @@
+import { CodeSnippet } from '@/components/CodeSnippet';
+import { AssetDescriptionLayout } from '@/components/SlideLayout';
+import { Slides } from '@/components/Slides';
+
+export const ReactBasic = () => {
+  return (
+    <Slides
+      slides={[
+        {
+          title: 'React란?',
+          content: (
+            <AssetDescriptionLayout
+              description={[
+                'UI 작업을 더 쉽게 도와주는 라이브러리',
+                '상태를 기반으로 한 선언적인 코드',
+              ]}
+              asset={
+                <>
+                  <h2>리액트 없이</h2>
+                  <CodeSnippet
+                    language="javascript"
+                    code={[
+                      `// React 없이`,
+                      `document`,
+                      `  .getElementById('button')`,
+                      `  .addEventListener(() => {`,
+                      `    const countElement = document.getElementById('count');`,
+                      `    const currentCount = parseInt(countElement.innerText, 10);`,
+                      `    countElement.innerText = (currentCount + 1).toString();`,
+                      `  });`,
+                    ]}
+                  />
+                  <CodeSnippet
+                    language="html"
+                    code={[
+                      `<div>`,
+                      `  <button id="button">Increase</button>`,
+                      `  <div id="count">0</div>`,
+                      `</div>`,
+                    ]}
+                  />
+                  <h2>리액트로</h2>
+                  <CodeSnippet
+                    language="typescript"
+                    code={[
+                      `const [count, setCount] = useState(0);`,
+                      ``,
+                      `return (`,
+                      `  <div>`,
+                      `    <button onClick={() => setCount(count + 1)}>Increase</button>`,
+                      `    <div>{count}</div>`,
+                      `  </div>`,
+                      `);`,
+                    ]}
+                  />
+                </>
+              }
+            />
+          ),
+        },
+        {
+          title: 'TypeScript와 JavaScript의 차이',
+          content: (
+            <AssetDescriptionLayout
+              description={['정적 타입 검사를 수행해 준다!']}
+              asset={
+                <>
+                  <CodeSnippet
+                    language="javascript"
+                    code={[
+                      `// JavaScript`,
+                      `const getName = (person) => person.name;`,
+                      `getName({ nmae: 'Hyunmin' }); // undefined`,
+                    ]}
+                  />
+                  <CodeSnippet
+                    language="typescript"
+                    code={[
+                      `// TypeScript`,
+                      `const getName = (person: { name: string }) => person.name;`,
+                      `getName({ nmae: 'Hyunmin' }); // Type Error`,
+                    ]}
+                  />
+                </>
+              }
+            />
+          ),
+        },
+      ]}
+    />
+  );
+};