Merge pull request #72 from Duri-Salon/feat(duri)/AIstyling-ui(DURI-301)

[feat] AI 스타일링 UI 구현 / API 연결

apps/duri/src/App.tsx

@@ -8,6 +8,9 @@ import { Global } from '@emotion/react';
 
 import PetDiary from '@pages/Diary';
 import PetDiaryDetail from '@pages/Diary/DiaryDetail';
+import DooriAI from '@pages/DooriAI';
+import DooriAIResult from '@pages/DooriAI/AIResult';
+import AIStyling from '@pages/DooriAI/AIStyling';
 import Home from '@pages/Home';
 import LoginPage from '@pages/Login';
 import MyPage from '@pages/My';
@@ -44,6 +47,17 @@ function App() {
 
         <Route path="/" element={<Home />} />
         <Route path="/shop" element={<Shop />} />
+        <Route path="shop/:shopId " />
+
+        <Route path="/ai" element={<DooriAI />} />
+        <Route path="/ai/styling" element={<AIStyling />} />
+        <Route path="/ai/result" element={<DooriAIResult />} />
+
+        <Route path="/portfolio/:designerId" element={<Portfolio />} />
+        <Route
+          path="/portfolio/:designerId/:portfolioId"
+          element={<PortfolioDetail />}
+        />
 
         <Route element={<PrivateRoute />}>
           <Route path="/onboarding" element={<StartPage />} />
@@ -55,21 +69,6 @@ function App() {
 
           <Route path="/shop/request" element={<RequestPage />} />
 
-          <Route path="/portfolio/:designerId" element={<Portfolio />} />
-          <Route
-            path="/portfolio/:designerId/:portfolioId"
-            element={<PortfolioDetail />}
-          />
-
-          <Route path="/quotation" element={<QuotationPage />} />
-          <Route
-            path="/quotation/:quotationReqId"
-            element={<QuotationDetailPage />}
-          />
-
-          <Route path="/diary" element={<PetDiary />} />
-          <Route path="/diary/:diaryId" element={<PetDiaryDetail />} />
-
           <Route path="/my" element={<MyPage />} />
           <Route path="/my/pet" element={<MyPetPage />} />
           <Route path="/my/pet/modify" element={<MyPetModifyPage />} />
@@ -80,6 +79,15 @@ function App() {
           <Route path="/my/review/:reviewId" element={<MyReviewDetailPage />} />
           <Route path="/my/review/write" element={<ReviewWritePage />} />
           <Route path="/my/review/modify" element={<ReviewModifyPage />} />
+
+          <Route path="/quotation" element={<QuotationPage />} />
+          <Route
+            path="/quotation/:quotationReqId"
+            element={<QuotationDetailPage />}
+          />
+
+          <Route path="/diary" element={<PetDiary />} />
+          <Route path="/diary/:diaryId" element={<PetDiaryDetail />} />
         </Route>
       </Routes>
     </BrowserRouter>

apps/duri/src/components/dooriAI/AIHeader.tsx

@@ -0,0 +1,28 @@
+import {
+  Doori,
+  FilledHome,
+  HeightFitFlex,
+  Text,
+  theme,
+  WidthFitFlex,
+} from '@duri-fe/ui';
+import styled from '@emotion/styled';
+
+export const AIHeader = () => {
+  return (
+    <HeightFitFlex justify="space-between" margin="0 0 43px" padding="0 6px 0">
+      <WidthFitFlex gap={13}>
+        <Doori width={75} color={theme.palette.White} />
+        <TitleTypo typo="Heading" colorCode={theme.palette.White}>
+          AI
+        </TitleTypo>
+      </WidthFitFlex>
+      <a href="/">
+        <FilledHome width={19} color={theme.palette.White} />
+      </a>
+    </HeightFitFlex>
+  );
+};
+const TitleTypo = styled(Text)`
+  font-size: (26 / 16) rem;
+`;

apps/duri/src/pages/DooriAI/AIResult.tsx

@@ -0,0 +1,52 @@
+import { useLocation } from 'react-router-dom';
+
+import { AIHeader } from '@duri/components/dooriAI/AIHeader';
+import {
+  Flex,
+  FrontBtn,
+  Image,
+  MobileLayout,
+  Save,
+  Text,
+  theme,
+} from '@duri-fe/ui';
+import styled from '@emotion/styled';
+
+const DooriAIResult = () => {
+  const location = useLocation();
+  const { resultImage } = location.state;
+  const handleImageSave = () => {
+    const link = document.createElement('a');
+    link.href = resultImage;
+    link.download = 'duri-ai-styling-result.jpg';
+    document.body.appendChild(link);
+    link.click();
+    document.body.removeChild(link);
+  };
+
+  return (
+    <MobileLayout backgroundColor={theme.palette.Black}>
+      <Flex direction="column" padding="40px 20px">
+        <AIHeader />
+        <Image src={resultImage} borderRadius={16} alt="ai styling result" />
+        <Text typo="Caption1" colorCode={theme.palette.White} margin="19px 0 0">
+          사진이 마음에 든다면 저장할수 있어요🐶
+        </Text>
+      </Flex>
+      <SaveButton height="53px" onClick={handleImageSave}>
+        <Save width={19} />
+        <Text typo="Body2">저장하기</Text>
+      </SaveButton>
+    </MobileLayout>
+  );
+};
+
+export default DooriAIResult;
+
+const SaveButton = styled(FrontBtn)`
+  position: fixed;
+  bottom: 0;
+  height: 53px;
+  border-radius: 0;
+  gap: 6px;
+`;