From 5444da528b75af8975caf3957d1494058e5d9327 Mon Sep 17 00:00:00 2001 From: sirldev Date: Thu, 23 May 2024 02:20:57 +0900 Subject: [PATCH] feat: Update pages --- frontend/app/layout.tsx | 5 +- .../CodeSpaceEditor/codespace.module.css | 9 +-- frontend/components/CodeSpaceEditor/index.tsx | 29 ++++---- .../LandingSection/FeatureGrid/index.tsx | 67 ++++++++++++------- frontend/components/LandingSection/index.tsx | 13 ++-- .../components/TemplateHub/HubItems/index.tsx | 12 ++++ frontend/components/UsePage/Result/index.tsx | 7 +- .../components/UsePage/UserInput/Index.tsx | 6 +- 8 files changed, 89 insertions(+), 59 deletions(-) diff --git a/frontend/app/layout.tsx b/frontend/app/layout.tsx index 7f68763300..160ea4eec3 100644 --- a/frontend/app/layout.tsx +++ b/frontend/app/layout.tsx @@ -15,8 +15,9 @@ import { ColorSchemeScript, MantineProvider, createTheme } from '@mantine/core'; import { NavigationProgress } from '@mantine/nprogress'; export const metadata: Metadata = { - title: 'StackOrderFlow - 자연어 기반 AWS CloudFormation 템플릿 생성 서비스', - description: '자연어 기반 AWS CloudFormation 템플릿 생성 서비스', + title: + 'StackOrderFlow - 자연어 기반 AWS CloudFormation 템플릿 생성 AI 어시스턴트', + description: '자연어 기반 AWS CloudFormation 템플릿 생성 AI 어시스턴트', icons: { icon: '/icon.png', }, diff --git a/frontend/components/CodeSpaceEditor/codespace.module.css b/frontend/components/CodeSpaceEditor/codespace.module.css index 17276c9157..d03a376bc5 100644 --- a/frontend/components/CodeSpaceEditor/codespace.module.css +++ b/frontend/components/CodeSpaceEditor/codespace.module.css @@ -9,13 +9,8 @@ .inner { position: relative; - padding-top: rem(200px); - padding-bottom: rem(120px); - - @media (max-width: $mantine-breakpoint-sm) { - padding-bottom: rem(80px); - padding-top: rem(80px); - } + padding-top: rem(20px); + padding-bottom: rem(12px); } .code-wrapper { diff --git a/frontend/components/CodeSpaceEditor/index.tsx b/frontend/components/CodeSpaceEditor/index.tsx index b89bd2ac2c..e786e02eee 100644 --- a/frontend/components/CodeSpaceEditor/index.tsx +++ b/frontend/components/CodeSpaceEditor/index.tsx @@ -19,7 +19,6 @@ import { import { useDisclosure } from '@mantine/hooks'; import { IconCheck, IconCopy, IconX } from '@tabler/icons-react'; import { useEffect, useState } from 'react'; -import { NavigationProgress, nprogress } from '@mantine/nprogress'; const code = `{ "AWSTemplateFormatVersion": "2010-09-09", @@ -168,26 +167,22 @@ const code = `{ } `; -export default function CodeSpaceEditor() { +export default function CodeSpaceEditor({ + template = code, +}: { + template?: string; +}) { const [visible, { toggle }] = useDisclosure(false); - const [loading, setLoading] = useState(true); - const [valid, setValid] = useState(false); - - useEffect(() => { - if (loading) { - nprogress.start(); - } else { - nprogress.complete(); - } - }, [loading]); + const [loading, setLoading] = useState(false); + const [valid, setValid] = useState(true); return (
- + - + {({ copied, copy }) => ( - + {/* - + */}
diff --git a/frontend/components/LandingSection/FeatureGrid/index.tsx b/frontend/components/LandingSection/FeatureGrid/index.tsx index 2437941dad..3cee33ca06 100644 --- a/frontend/components/LandingSection/FeatureGrid/index.tsx +++ b/frontend/components/LandingSection/FeatureGrid/index.tsx @@ -12,48 +12,69 @@ import { IconUser, IconMessage2, IconLock, + IconSocial, + IconFilter, + IconCodeDots, + IconRepeat, + IconHammer, } from '@tabler/icons-react'; import classes from './featuregrid.module.css'; export const FEATURE = [ { - icon: IconGauge, - title: '진입 장벽 제거', - description: - '복잡한 CloudFormation의 문법과 방대한 문서 학습 필요 없이, 모든 사용자가 클라우드 리소스를 쉽게 관리할 수 있습니다.', + icon: IconCodeDots, + title: 'Template Generator', + description: ( + <> + RAG 기법, 프롬프트, Validation API를 사용하여 정확한 템플릿 파일을 + 생성합니다. +
+ 템플릿 파일이 유효하지 않은 경우, 에러 메세지를 기반으로 템플릿 파일을 + 재생성하여 정확도를 향상합니다. + + ), }, { - icon: IconUser, - title: '자연어 분석', + icon: IconFilter, + title: 'Validation API', description: - '사용자가 자연어로 필요한 인프라를 설명하면, AI가 이를 분석하여 필요한 CloudFormation 템플릿을 자동으로 생성합니다.', + 'AWS CLI의 validate-template 명령어를 기반한 자체 Validation API를 통해 템플릿 파일의 높은 신뢰성을 보장합니다.', }, + { - icon: IconCookie, - title: 'Secure by default', + icon: IconSocial, + title: 'Template Hub', description: - 'Although it still can’t fly, its jumping power is outstanding, in Alola the mushrooms on Paras don’t grow up quite right', + '생성한 템플릿을 공유하고, 다른 사용자가 생성한 템플릿 파일을 AWS 리소스 기반으로 검색할 수 있습니다.', }, ]; export const DIFFERENCE = [ { - icon: IconLock, - title: 'CloudFormation 특화', + icon: IconHammer, + title: '생산성 증가', description: - 'RAG 기술을 적용하여 사용자의 요구에 가장 관련성 높은 정보를 검색하고 이를 바탕으로 템플릿을 생성합니다.', + '7,000개가 넘는 AWS CloudFormation의 문서를 읽고 이해하는 데 약 18일이 소요됩니다. StackOrderFlow를 사용하면 20초 안에 AWS 리소스를 배포할 수 있습니다.', }, { icon: IconGauge, - title: 'Template Hub', - description: - '사용자들은 Template Hub를 통해 생성한 템플릿을 공유할 수 있으며, 다른 사용자들의 프롬프트와 템플릿을 참고할 수 있습니다.', + title: '정확도 증가', + description: ( + <> + StackOrderFlow는 GPT-4 대비 65% 높은 정확도를 + 보여줍니다. +
+ 또한, 생성된 템플릿 파일은{' '} + 사용자 요구사항의 94% 이상을 충족하여 요청된 내용을 잘 + 반영합니다. + + ), }, { - icon: IconCookie, - title: '유효성 검증', + icon: IconRepeat, + title: '재사용성 증가', description: - '템플릿 파일의 유효성 검증 기능을 통해서 신뢰도가 높은 템플릿 파일을 생성합니다.', + '템플릿 허브에서 다른 사용자가 생성한 템플릿 파일을 검색하고 활용함으로써 재사용성을 높일 수 있습니다.', }, ]; @@ -97,13 +118,13 @@ export default function FeaturesGrid() { gradient={{ from: 'blue', to: 'cyan' }} inherit > - Feature + Primary Features {' '} - Stack OrderFlow는 다음과 같은 특징을 가지고 있습니다. + StackOrderFlow는 다음과 같은 주요 기능을 가지고 있습니다. @@ -124,13 +145,13 @@ export default function FeaturesGrid() { gradient={{ from: 'blue', to: 'cyan' }} inherit > - Differences + Anticipated benefits {' '} - 왜 다른 챗봇이 아닌 Stack OrderFlow를 사용해야 할까요? + StackOrderFlow는 다음과 같은 기대 효과를 가지고 있습니다. diff --git a/frontend/components/LandingSection/index.tsx b/frontend/components/LandingSection/index.tsx index 3da11b75e0..2f171828bb 100644 --- a/frontend/components/LandingSection/index.tsx +++ b/frontend/components/LandingSection/index.tsx @@ -24,14 +24,15 @@ export default function LandingSection() { fully featured {' '} React components and hooks library */} - 쉽고, 빠르게, 실수없이
- AWS를 시작하세요 + 쉽게, 빠르게, 부담없이
+ AWS 리소스를 관리하세요 {/*
AWS CloudFormation
템플릿을 생성해보세요. */} - 필요한 리소스들을 입력하세요. 사용자의 자연어 입력을 분석하여 AWS - CloudFormation 템플릿을 자동으로 생성해 줍니다. + 자연어를 통해 생성된 CloudFormation 템플릿을 통해 +
+ 원하는 클라우드 인프라를 구성하세요. @@ -69,9 +70,9 @@ export default function LandingSection() { - + {/* - + */} ); } diff --git a/frontend/components/TemplateHub/HubItems/index.tsx b/frontend/components/TemplateHub/HubItems/index.tsx index af16100a6b..253a9f3379 100644 --- a/frontend/components/TemplateHub/HubItems/index.tsx +++ b/frontend/components/TemplateHub/HubItems/index.tsx @@ -15,6 +15,7 @@ import { Grid, SimpleGrid, Paper, + Flex, } from '@mantine/core'; import {} from '@tabler/icons-react'; import Link from 'next/link'; @@ -99,6 +100,17 @@ export default function HubItems({ templates }: { templates: any[] }) { )); + if (templates.length === 0) { + return ( + + 해당 리소스를 사용하는 템플릿 파일이 없어요. + + + ); + } + return ( - + /> */} + + 설명 diff --git a/frontend/components/UsePage/UserInput/Index.tsx b/frontend/components/UsePage/UserInput/Index.tsx index 47cee18f04..71cfff425f 100644 --- a/frontend/components/UsePage/UserInput/Index.tsx +++ b/frontend/components/UsePage/UserInput/Index.tsx @@ -50,8 +50,10 @@ export default function UserInput({ 프로젝트에 적용되어야 하는 특정 제약사항이나 필요 조건이 있다면, 이를 - 분명히 명시해 주세요. 예를 들어, 특정 지역에서만 리소스를 생성해야 - 하거나, 비용 제한이 있는 경우 등입니다. + 분명히 명시해 주세요. +
+ 예를 들어, 특정 지역에서만 리소스를 생성해야 하거나, 비용 제한이 있는 + 경우 등입니다.