Feature #115 codeviewer

apps/frontend/src/feature/codeView/component/CodeSideBar.tsx

@@ -10,7 +10,7 @@ export function CodeSideBar({ className, ...props }: CodeSideBarProps) {
   const setCurrentCode = useCodeViewActionContext();
 
   return (
-    <div className={cn('flex flex-col rounded-lg shadow-md py-2 h-full', className)} {...props}>
+    <div className={cn('flex flex-col rounded-lg shadow-md py-2 h-full overflow-scroll', className)} {...props}>
       {value.map((v, i) => (
         <Button
           variant={'link'}

apps/frontend/src/feature/codeView/component/CodeViewProvider.tsx

@@ -10,6 +10,7 @@ type CodeViewProviderProps = {
 
 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/component/CodeViewer.tsx

@@ -1,6 +1,7 @@
 import { HTMLProps } from 'react';
 import { cn } from '@froxy/design/utils';
 import { Markdown } from '@froxy/react-markdown';
+import { Text } from '@/components';
 import { useCodeViewContext } from '@/feature/codeView/hook';
 
 type CodeViewerProps = {
@@ -9,33 +10,78 @@ type CodeViewerProps = {
 } & HTMLProps<HTMLDivElement>;
 
 const LANGUAGES_EXT = {
-  typescript: 'ts',
+  TypeScript: 'ts',
   ts: 'ts',
-  javascript: 'js',
-  js: 'js'
+  Ts: 'ts',
+  JavaScript: 'js',
+  Js: 'js',
+  js: 'js',
+  json: 'json',
+  JSON: 'json'
 } as const;
 
-const getLanguage = (language: string) => {
-  return LANGUAGES_EXT[language as keyof typeof LANGUAGES_EXT];
+const CANT_VIEW_EXT = [
+  'png',
+  'jpg',
+  'jpeg',
+  'gif',
+  'svg',
+  'bmp',
+  'webp',
+  'ico',
+  'tiff',
+  'tif',
+  'raw',
+  'heif',
+  'heic',
+  'apng',
+  'avif',
+  'jxl',
+  'mp4',
+  'mov',
+  'avi',
+  'wmv',
+  'flv',
+  'mkv',
+  'webm'
+];
+
+const getCode = (ext: string): (typeof LANGUAGES_EXT)[keyof typeof LANGUAGES_EXT] | undefined => {
+  return LANGUAGES_EXT[ext as keyof typeof LANGUAGES_EXT];
 };
 
 // TODO : 아주 막연하게 구현된 컴포넌트, 추후에 스타일 리팩터링 필요
-export function CodeViewer({ children, className, ...props }: CodeViewerProps) {
+export function CodeViewer({ className, ...props }: CodeViewerProps) {
   const { value, current } = useCodeViewContext();
 
-  const language = getLanguage(value[current].language);
+  const file = value[current];
+  const content = file?.content || '';
+  const filename = file?.filename || '';
+  const ext = filename.split('.')?.pop() || '';
+
+  const language = getCode(ext);
+
+  const markdown = language ? `\`\`\`${language}\n${file.content}\n \`\`\`` : content;
 
-  const content = language ? `\`\`\`${language}\n ${value[current].content}\n \`\`\`` : value[current].content;
+  if (CANT_VIEW_EXT.includes(ext))
+    return (
+      <div className={cn('w-full h-full rounded-lg shadow-lg text-sm flex flex-col items-center justify-center')}>
+        <img src={'/image/logoIcon.svg'} alt={filename} className="w-40 h-40 object-contain" />
+        <Text>지원하지 않는 확장자입니다.</Text>
+      </div>
+    );
 
   return (
     <Markdown
       className={cn(
-        'w-full h-full rounded-lg shadow-lg',
-        language ? '[&>figure]:h-full [&>figure>pre]:h-full [&>figure>pre]:m-0' : 'p-2',
+        'w-full h-full rounded-lg shadow-lg text-sm bg-[#f6f8fa]',
+        language
+          ? '[&>figure]:h-full [&>figure]:w-full [&>figure>pre]:h-full [&>figure>pre]:w-full [&>figure>pre]:m-0'
+          : 'p-2',
         'overflow-scroll',
         className
       )}
-      markdown={children || content}
+      markdown={markdown}
       {...props}
     />
   );

apps/frontend/src/feature/lotus/component.tsx

@@ -84,9 +84,11 @@ export function LotusLink({ children, className }: LotusLinkProps) {
 type LotusLogoProps = HTMLProps<HTMLImageElement>;
 
 export function LotusLogo({ className, ...props }: LotusLogoProps) {
-  const { logo, title } = useLotusContext();
+  const { title, author } = useLotusContext();
 
-  return <img src={logo} alt={title} className={cn('w-16 h-16 rounded-full', className)} {...props} />;
+  const image = author?.profile || '/image/logoIcon.svg';
+
+  return <img src={image} alt={title} className={cn('w-16 h-16 rounded-full', className)} {...props} />;
 }
 
 export function LotusProvider({ children, lotus }: { children: React.ReactNode; lotus: LotusType }) {

apps/frontend/src/widget/Header.tsx

@@ -13,6 +13,8 @@ export function Header() {
     navigate({ to: '/lotus' });
   };
 
+  const image = data?.profile || '/image/exampleImage.jpeg';
+
   return (
     <header className="flex justify-center mb-7 w-full shadow-md">
       <div className="w-full max-w-screen-xl py-5 px-4 sm:px-6 lg:px-8 flex justify-between items-center">
@@ -28,7 +30,7 @@ export function Header() {
                 <LogoutButton />
               </div>
 
-              <img className="w-10 h-10 rounded-full" src="/image/exampleImage.jpeg" alt="프로필 사진" />
+              <img className="w-10 h-10 rounded-full" src={image} alt="프로필 사진" />
             </>
           ) : (
             <LoginButton variant={'default'}>Login</LoginButton>

apps/frontend/src/widget/lotusCreate/SuspenseGistFiles.tsx

@@ -1,16 +1,18 @@
 import { CodeView } from '@/feature/codeView';
 import { useUserGistFileSuspenseQuery } from '@/feature/user/query';
 
+import '@/app/style/github.css';
+
 export function SuspenseGistFiles({ gistId }: { gistId: string }) {
   const { data: files } = useUserGistFileSuspenseQuery({ gistId });
 
-  const readmeIndex = files.findIndex(({ filename }) => filename === 'README.md');
+  const defaultIndex = files.findIndex(({ filename }) => filename === 'README.md') || 0;
 
   return (
-    <CodeView value={files} current={readmeIndex}>
-      <div className="flex github gap-6 w-full h-[600px] mt-20 pb-10 overflow-hidden">
+    <CodeView value={files} current={defaultIndex}>
+      <div className="flex github gap-6 w-full h-[600px] mt-20 pb-10 px-2 overflow-hidden">
         <CodeView.SideBar className="h-full min-w-48" />
-        <CodeView.Viewer className="block h-[600px]" />
+        <CodeView.Viewer className="block h-full" />
       </div>
     </CodeView>
   );

apps/frontend/src/widget/lotusDetail/SuspenseLotusFiles.tsx

@@ -6,13 +6,13 @@ export function SuspenseLotusFiles({ id }: { id: string }) {
     data: { files }
   } = useLotusSuspenseQuery({ id });
 
-  const readmeIndex = files.findIndex(({ filename }) => filename === 'README.md');
+  const defaultIndex = files.findIndex(({ filename }) => filename === 'README.md');
 
   return (
-    <CodeView value={files} current={readmeIndex}>
-      <div className="flex github gap-6 w-full h-[600px] pb-10 overflow-hidden">
+    <CodeView value={files} current={defaultIndex}>
+      <div className="flex github gap-4 w-full h-[600px] pb-10 px-2 overflow-hidden">
         <CodeView.SideBar className="h-full min-w-48" />
-        <CodeView.Viewer className="block h-[600px]" />
+        <CodeView.Viewer className="block h-full" />
       </div>
     </CodeView>
   );