Feature #48 : History, CodeViewer 리팩터링 (#49)

* style(#48):  기본 margin, padding 제거

* refactor(#48):  change CodeViewValue interface

* refactor(#48):  현재 선택한 코드뷰 UI 수정

* refactor(#48):  CodeViewer 마크다운의 경우와 코드의 경우 UI 분리

* refactor(#48):  History interface 변경

apps/frontend/src/app/style/github.css

@@ -6,7 +6,6 @@
   line-height: 1.6;
   color: #24292e;
   background-color: #ffffff;
-  padding: 1em;
 }
 
 /* Headings */

apps/frontend/src/feature/CodeView/CodeSideBar.tsx

@@ -6,19 +6,19 @@ import { useCodeViewActionContext, useCodeViewContext } from './useCodeViewConte
 type CodeSideBarProps = HTMLProps<HTMLDivElement>;
 
 export function CodeSideBar({ className, ...props }: CodeSideBarProps) {
-  const { value } = useCodeViewContext();
+  const { value, current } = useCodeViewContext();
   const setCurrentCode = useCodeViewActionContext();
 
   return (
-    <div className={cn('flex flex-col rounded-lg shadow-md m-2 py-2 h-full', className)} {...props}>
+    <div className={cn('flex flex-col rounded-lg shadow-md py-2 h-full', className)} {...props}>
       {value.map((v, i) => (
         <Button
           variant={'link'}
-          className={cn('flex items-start p-1 px-4')}
-          key={v.fileName}
+          className={cn('flex justify-start', current === i && 'bg-gray-100')}
+          key={v.filename}
           onClick={() => setCurrentCode(i)}
         >
-          {v.fileName}
+          {v.filename}
         </Button>
       ))}
     </div>

apps/frontend/src/feature/CodeView/CodeViewProvider.tsx

@@ -5,10 +5,11 @@ import { CodeViewActionContext, CodeViewContext } from './useCodeViewContext';
 type CodeViewProviderProps = {
   value: CodeViewValue[];
   children: React.ReactNode;
+  current?: number;
 };
 
-export function CodeViewProvider({ value, children }: CodeViewProviderProps) {
-  const [current, setCurrent] = useState(0);
+export function CodeViewProvider({ value, children, current: currentIndex = 0 }: CodeViewProviderProps) {
+  const [current, setCurrent] = useState(currentIndex);
   const setCurrentCode = (index: number) => setCurrent(index);
 
   return (

apps/frontend/src/feature/CodeView/CodeViewer.tsx

@@ -8,13 +8,34 @@ type CodeViewerProps = {
   theme?: 'github-light' | 'github-dark';
 } & HTMLProps<HTMLDivElement>;
 
+const LANGUAGES_EXT = {
+  typescript: 'ts',
+  ts: 'ts',
+  javascript: 'js',
+  js: 'js'
+} as const;
+
+const getLanguage = (language: string) => {
+  return LANGUAGES_EXT[language as keyof typeof LANGUAGES_EXT];
+};
+
+// TODO : 아주 막연하게 구현된 컴포넌트, 추후에 스타일 리팩터링 필요
 export function CodeViewer({ children, className, ...props }: CodeViewerProps) {
   const { value, current } = useCodeViewContext();
 
+  const language = getLanguage(value[current].language);
+
+  const content = language ? `\`\`\`${language}\n ${value[current].content}\n \`\`\`` : value[current].content;
+
   return (
     <Markdown
-      className={cn('w-full h-full [&>figure]:h-full [&>figure>pre]:h-full rounded-lg shadow-lg m-2', className)}
-      markdown={children || value[current].code}
+      className={cn(
+        'w-full h-full rounded-lg shadow-lg',
+        language ? '[&>figure]:h-full [&>figure>pre]:h-full [&>figure>pre]:m-0' : 'p-2',
+        'overflow-scroll',
+        className
+      )}
+      markdown={children || content}
       {...props}
     />
   );

apps/frontend/src/feature/CodeView/index.tsx

@@ -5,9 +5,9 @@ import { CodeViewProvider } from './CodeViewProvider';
 import '@froxy/react-markdown/github.css';
 
 export interface CodeViewValue {
-  fileName: string;
-  ext: string;
-  code: string;
+  filename: string;
+  language: string;
+  content: string;
 }
 
 export const CodeView = Object.assign(CodeViewProvider, { SideBar: CodeSideBar, Viewer: CodeViewer });

apps/frontend/src/feature/History/index.tsx

@@ -3,12 +3,24 @@ import { Heading, Text } from '@froxy/design/components';
 import { cn } from '@froxy/design/utils';
 import { FormatDateKey, Time } from '@/shared/components/Time';
 
+export const HISTORY_STATUS = {
+  SUCCESS: 'SUCCESS',
+  ERROR: 'ERROR',
+  PENDING: 'PENDING'
+} as const;
+
+export const HISTORY_STATUS_COLOR = {
+  [HISTORY_STATUS.SUCCESS]: 'bg-green-500',
+  [HISTORY_STATUS.ERROR]: 'bg-orange-500',
+  [HISTORY_STATUS.PENDING]: 'bg-sky-500'
+} as const;
+
+type HistoryStatus = (typeof HISTORY_STATUS)[keyof typeof HISTORY_STATUS];
 export interface HistoryType {
   id: string;
   title: string;
-  body: string;
   date: Date;
-  status: boolean;
+  status: HistoryStatus;
 }
 
 const HistoryContext = createContext<HistoryType | null>(null);
@@ -44,20 +56,12 @@ export function HistoryTitle({ className, ...props }: HistoryTitleProps) {
   );
 }
 
-type HistoryBodyProps = ComponentProps<typeof Text>;
-
-export function HistoryBody(props: HistoryBodyProps) {
-  const { body } = useHistoryContext();
-
-  return <Text {...props}>{body}</Text>;
-}
-
 type HistoryStatusIconProps = { current?: boolean } & HTMLProps<HTMLDivElement>;
 
 export function HistoryStatusIcon({ className, current, ...props }: HistoryStatusIconProps) {
   const { status } = useHistoryContext();
 
-  const color = status ? 'bg-green-500' : 'bg-orange-500';
+  const color = HISTORY_STATUS_COLOR[status];
 
   return (
     <div className={cn('relative flex h-5 w-5', className)} {...props}>
@@ -76,7 +80,7 @@ export function HistoryStatusLabel({ className, ...props }: HistoryStatusLabelPr
 
   return (
     <Text size="sm" variant="muted" className={cn(className)} {...props}>
-      {status ? 'success' : 'error'}
+      {status.toLocaleLowerCase()}
     </Text>
   );
 }
@@ -97,7 +101,6 @@ export function HistoryDate({ className, ...props }: HistoryDateProps) {
 
 export const History = Object.assign(HistoryProvider, {
   Title: HistoryTitle,
-  Body: HistoryBody,
   StatusIcon: HistoryStatusIcon,
   StatusLabel: HistoryStatusLabel,
   Date: HistoryDate

apps/frontend/src/widget/HistoryList.tsx

@@ -11,7 +11,7 @@ type HistoryListProps = {
 
 export function HistoryList({ historyList, className }: HistoryListProps) {
   return (
-    <div className={cn('shadow-md p-5 m-5 rounded-lg w-1/3', className)}>
+    <div className={cn('shadow-md p-5 rounded-lg w-1/3', className)}>
       <div className="flex items-baseline justify-between mb-10">
         <Heading size="lg">Run History</Heading>
         <Button size={'sm'} variant={'link'}>