docs: Add typedoc to client code for v1.0.0 #26

Author: woorim960

client/app/src/App.tsx

@@ -14,20 +14,21 @@ import {
   VisitorComment,
 } from "dev-portfolio";
 import styled from "styled-components";
+
 import {
   CardInstruction,
   Introduction,
   TeckstackInputInstruction,
   DisplayPortfolioInstruction,
   VisitorCounterInstruction,
+  SkillInstruction,
+  ChannelInstruction,
+  ProgressBarInstruction,
+  ContactInstruction,
 } from "./common";
+import color from "./common/style/theme";
 import useComment from "./hooks/useComment";
 import "./App.css";
-import color from "./common/style/theme";
-import { SkillInstruction } from "./common/instruction/SkillInstruction";
-import { ChannelInstruction } from "./common/instruction/ChannelInstruction";
-import { ProgressBarInstruction } from "./common/instruction/ProgressBarInstruction";
-import { ContactInstruction } from "./common/instruction/ContactInstruction";
 
 function App() {
   /**
@@ -47,7 +48,6 @@ function App() {
     handleCreateComment,
   } = useComment();
 
-  const itemList = [1, 2, 3, 4, 5, 6, 7, 8, 9];
   return (
     /**
      * The 'className' in the <div> tag surrounding the components of 'dev-portfolio' must be 'App'.
@@ -102,7 +102,7 @@ function App() {
       {/**
        * Just introduction for dev-portfolio-app.
        *
-       * If you want view internal of Introduction,
+       * If you want to view internal of Introduction,
        * go to the './src/common/instruction/Introduction.tsx'
        */}
       <Introduction id="['Manual Introduction', 'bx:home-smile']" />
@@ -119,14 +119,19 @@ function App() {
       />
 
       {/**
-       * TechStackInput used only to find the logoName value in the TechStackList.
-       * @component TechStackInput
-       * {@link none}
+       * Just introduction for TechStackInput component.
        *
-       * If you want view internal of TeckstackInputInstruction,
+       * If you want to view internal of TeckstackInputInstruction,
        * go to the './src/common/instruction/TeckstackInputInstruction.tsx'
        */}
       <TeckstackInputInstruction id="['TechStackInput', 'fa:stack-overflow']" />
+
+      {/**
+       * TechStackInput used only to find the logoName value in the TechStackList.
+       *
+       * @component TechStackInput
+       * {@link none}
+       */}
       <TechStackInput />
 
       {/**
@@ -189,14 +194,28 @@ function App() {
         ]}
       />
 
+      {/**
+       * @component ProgressBar
+       * {@link https://github.com/modern-agile-team/dev-portfolio#progressbar}
+       *
+       * If you want to view ProgressBar component,
+       * go to the './src/common/instruction/ProgressBarInstruction.tsx'
+       */}
       <ProgressBarInstruction id="['ProgressBar', 'ci:bar-chart-horizontal']" />
 
+      {/**
+       * @component Skill
+       * {@link https://github.com/modern-agile-team/dev-portfolio#skill}
+       *
+       * If you want to view Skill component,
+       * go to the './src/common/instruction/SkillInstruction.tsx'
+       */}
       <SkillInstruction id="['Skill', 'charm:stack']" />
 
       {/**
        * Just introduction for Carousel, Gallery and Masonry.
        *
-       * If you want view internal of DisplayPortfolioInstruction,
+       * If you want to view internal of DisplayPortfolioInstruction,
        * go to the './src/common/instruction/DisplayPortfolioInstruction.tsx'
        */}
       <DisplayPortfolioInstruction />
@@ -218,7 +237,7 @@ function App() {
        * {@link https://github.com/modern-agile-team/dev-portfolio#gallery}
        */}
       <Gallery id="['Gallery', 'clarity:image-gallery-line']">
-        {itemList.map((idx) => (
+        {[1, 2, 3, 4, 5, 6, 7, 8, 9].map((idx) => (
           <Item
             key={idx}
             hoverdInnerBorderColor={color.mainColor}
@@ -251,7 +270,7 @@ function App() {
        * @component VisitorCounter
        * {@link https://github.com/modern-agile-team/dev-portfolio#visitorcounter}
        *
-       * If you want view Card component,
+       * If you want to view Card component,
        * go to the './src/common/instruction/VisitorCounterInstruction.tsx'
        */}
       <VisitorCounterInstruction id="['VisitorCounter', 'mdi:counter']" />
@@ -283,7 +302,7 @@ function App() {
        * @component Card
        * {@link https://github.com/modern-agile-team/dev-portfolio#card}
        *
-       * If you want view Card component,
+       * If you want to view Card component,
        * go to the './src/common/instruction/CardInstruction.tsx'
        */}
       <CardInstruction id="['Card', 'bi:card-list']" />
@@ -294,13 +313,30 @@ function App() {
        */}
       <Experience id="['Experience', 'carbon:list-boxes']" theme="vertical" />
 
+      {/**
+       * @component Channel
+       * {@link https://github.com/modern-agile-team/dev-portfolio#channel}
+       *
+       * @component Channels
+       * {@link https://github.com/modern-agile-team/dev-portfolio#channels}
+       *
+       * If you want to view Channel and Channels component,
+       * go to the './src/common/instruction/ChannelInstruction.tsx'
+       */}
       <ChannelInstruction id="['Channel', 'fluent:channel-48-filled']" />
+
+      {/**
+       * Just introduction for Contact.
+       *
+       * If you want to view internal of ContactInstruction,
+       * go to the './src/common/instruction/ContactInstruction.tsx'
+       */}
+      <ContactInstruction />
+
       {/**
        * @component Contact
        * {@link https://github.com/modern-agile-team/dev-portfolio#contact}
        */}
-
-      <ContactInstruction />
       <Contact
         id="['Contact', 'fluent:contact-card-20-regular']"
         titleColor={color.pointColor}

client/app/src/common/index.ts

@@ -3,3 +3,7 @@ export { default as CardInstruction } from "./instruction/CardInstruction";
 export { default as DisplayPortfolioInstruction } from "./instruction/DisplayPortfolioInstruction";
 export { default as VisitorCounterInstruction } from "./instruction/VisitorCounterInstruction";
 export { default as TeckstackInputInstruction } from "./instruction/TeckstackInputInstruction";
+export { default as SkillInstruction } from "./instruction/SkillInstruction";
+export { default as ChannelInstruction } from "./instruction/ChannelInstruction";
+export { default as ProgressBarInstruction } from "./instruction/ProgressBarInstruction";
+export { default as ContactInstruction } from "./instruction/ContactInstruction";

client/app/src/common/instruction/ChannelInstruction.tsx

@@ -3,7 +3,17 @@ import React from "react";
 import styled from "styled-components";
 import color from "../style/theme";
 
-export const ChannelInstruction = ({ id }: { id: string }) => {
+/**
+ * @component Channel
+ * {@link https://github.com/modern-agile-team/dev-portfolio#channel}
+ *
+ * @component Channels
+ * {@link https://github.com/modern-agile-team/dev-portfolio#channels}
+ *
+ * If you want to view Channel and Channels component,
+ * go to the './src/common/instruction/ChannelInstruction.tsx'
+ */
+const ChannelInstruction = ({ id }: { id: string }) => {
   return (
     <Wrap id={id}>
       <h1>Channel &amp; Channels</h1>
@@ -30,6 +40,8 @@ export const ChannelInstruction = ({ id }: { id: string }) => {
   );
 };
 
+export default ChannelInstruction;
+
 const Wrap = styled.div`
   padding: 1em 2.2em 0em 2.2em;
   display: flex;

client/app/src/common/instruction/ContactInstruction.tsx

@@ -1,7 +1,13 @@
 import React from "react";
 import styled from "styled-components";
 
-export const ContactInstruction = () => {
+/**
+ * Just introduction for Contact.
+ *
+ * If you want to view internal of ContactInstruction,
+ * go to the './src/common/instruction/ContactInstruction.tsx'
+ */
+const ContactInstruction = () => {
   return (
     <Wrap>
       <h1>Contact</h1>
@@ -17,6 +23,8 @@ export const ContactInstruction = () => {
   );
 };
 
+export default ContactInstruction;
+
 const Wrap = styled.div`
   padding: 3em 2.2em 2em 2.2em;
   display: flex;

client/app/src/common/instruction/Introduction.tsx

@@ -2,6 +2,12 @@ import React from "react";
 import styled from "styled-components";
 import color from "../style/theme";
 
+/**
+ * Just introduction for dev-portfolio-app.
+ *
+ * If you want to view internal of Introduction,
+ * go to the './src/common/instruction/Introduction.tsx'
+ */
 const Introduction = ({ id }: { id: string }) => {
   return (
     <Wrap id={id}>

client/app/src/common/instruction/ProgressBarInstruction.tsx

@@ -3,7 +3,14 @@ import React from "react";
 import styled from "styled-components";
 import color from "../../common/style/theme";
 
-export const ProgressBarInstruction = ({ id }: { id: string }) => {
+/**
+ * @component ProgressBar
+ * {@link https://github.com/modern-agile-team/dev-portfolio#progressbar}
+ *
+ * If you want to view ProgressBar component,
+ * go to the './src/common/instruction/ProgressBarInstruction.tsx'
+ */
+const ProgressBarInstruction = ({ id }: { id: string }) => {
   return (
     <Wrap id={id}>
       <h1>ProgressBar</h1>
@@ -26,6 +33,8 @@ export const ProgressBarInstruction = ({ id }: { id: string }) => {
   );
 };
 
+export default ProgressBarInstruction;
+
 const Wrap = styled.div`
   padding: 1em 2.2em 2em 2.2em;
   display: flex;

client/app/src/common/instruction/SkillInstruction.tsx

@@ -2,7 +2,14 @@ import { Skill } from "dev-portfolio";
 import React from "react";
 import styled from "styled-components";
 
-export const SkillInstruction = ({ id }: { id: string }) => {
+/**
+ * @component Skill
+ * {@link https://github.com/modern-agile-team/dev-portfolio#skill}
+ *
+ * If you want to view Skill component,
+ * go to the './src/common/instruction/SkillInstruction.tsx'
+ */
+const SkillInstruction = ({ id }: { id: string }) => {
   return (
     <Wrap id={id}>
       <h1>Skill</h1>
@@ -26,6 +33,8 @@ export const SkillInstruction = ({ id }: { id: string }) => {
   );
 };
 
+export default SkillInstruction;
+
 const Wrap = styled.div`
   padding: 1em 2.2em 5em 2.2em;
   display: flex;

client/app/src/common/instruction/TeckstackInputInstruction.tsx

@@ -1,6 +1,14 @@
 import React from "react";
 import styled from "styled-components";
 
+/**
+ * TechStackInput used only to find the logoName value in the TechStackList.
+ * @component TechStackInput
+ * {@link none}
+ *
+ * If you want to view internal of TeckstackInputInstruction,
+ * go to the './src/common/instruction/TeckstackInputInstruction.tsx'
+ */
 const TeckstackInputInstruction = ({ id }: { id: string }) => {
   return (
     <Wrap id={id}>

client/app/src/common/style/theme.tsx

@@ -1,9 +1,7 @@
-import { DefaultColor } from "styled-components";
+const color: any = {
+  mainColor: "#111829",
+  pointColor: "#6082ef",
+  lightGrey: "rgb(247, 247, 247)",
+};
 
-const color: DefaultColor = {
-    mainColor:"#111829",
-    pointColor: '#6082ef',
-    lightGrey: 'rgb(247, 247, 247)'
-} 
-
-export default color;
+export default color;