feat(apps/web): Home 페이지 퍼블리싱

YAPP-Github · Feb 14, 2025 · 535a49a · 535a49a
1 parent d75f6de
commit 535a49a
Show file tree

Hide file tree

Showing 2 changed files with 194 additions and 3 deletions.
diff --git a/apps/web/src/app/home/Home.tsx b/apps/web/src/app/home/Home.tsx
@@ -5,12 +5,29 @@ import { AccountSidebar } from './_components/AccountSidebar/AccountSidebar';
 import { useScroll } from '@web/hooks';
 import { ROUTES } from '@web/routes';
 import { Breadcrumb } from '@repo/ui/Breadcrumb';
-import { background, dropdownItem, image } from './page.css';
+import {
+  animatedText,
+  background,
+  cardContent,
+  content,
+  dropdownItem,
+  image,
+  cardColumn,
+  cardRow,
+  flexColumn,
+} from './page.css';
 import { Dropdown } from '@repo/ui/Dropdown';
 import Image from 'next/image';
 import { Icon } from '@repo/ui/Icon';
 import { Text } from '@repo/ui/Text';
 import { isNil } from '@repo/ui/utils';
+import { GradientAnimatedText } from '@repo/ui/GradientAnimatedText';
+import CreateImage from '@web/assets/images/createImage.webp';
+import { CTACard } from './_components/CTACard/CTACard';
+import { PersonalCard } from './_components/PersonalCard/PersonalCard';
+import { UploadContentCard } from './_components/UploadContentCard/UploadContentCard';
+import { ContentGroupCard } from './_components/ContentGroupCard/ContentGroupCard';
+import { Spacing } from '@repo/ui/Spacing';
 
 export default function Home() {
   const [scrollRef, isScrolled] = useScroll<HTMLDivElement>({
@@ -55,8 +72,141 @@ export default function Home() {
         }
         isScrolled={isScrolled}
       />
+      <div className={content}>
+        <AccountSidebar />
+        <div className={cardContent}>
+          <GradientAnimatedText className={animatedText}>
+            한 번의 설정으로 끝없이 흘러가는 콘텐츠
+          </GradientAnimatedText>
 
-      <AccountSidebar />
+          <div className={cardColumn}>
+            <div className={cardRow}>
+              <div className={flexColumn}>
+                {/* 주제 생성 카드 */}
+                <CTACard
+                  text={'자동으로 글을 만들어보세요'}
+                  buttonText={'주제 생성하기'}
+                  onButtonClick={function (): void {
+                    throw new Error('Function not implemented.');
+                  }}
+                  imageSrc={CreateImage}
+                />
+                <Spacing size={16} />
+                {/* 개인화 설정 카드 */}
+                <PersonalCard
+                  text={'개인화 설정'}
+                  domain="활동 분야"
+                  tone="CASUAL"
+                  introduction="글을 생성할 때 계정과 관련된 업데이트나 소식을 참고하고
+특정 활동 분야에 집중하거나, 특정 말투를 사용하여 글을 만들 수 있어요"
+                  onIconClick={function (): void {
+                    throw new Error('Function not implemented.');
+                  }}
+                />
+              </div>
+
+              {/* 업로드 예약 일정 카드 */}
+              <UploadContentCard
+                text={'업로드 예약 일정'}
+                onMoreButtonClick={function (): void {
+                  throw new Error('Function not implemented.');
+                }}
+                onItemClick={(id) => {
+                  console.log('클릭한 아이템 id:', id);
+                }}
+                items={[
+                  {
+                    id: 1,
+                    createdAt: '2025-01-01T00:00:00.000Z',
+                    updatedAt: '2025-01-01T00:00:00.000Z',
+                    displayOrder: 1,
+                    summary: '오늘 점심 메뉴는 두부김치',
+                    content: '엄청나게 긴 본문',
+                    postImages: [
+                      {
+                        id: 1,
+                        postId: 1,
+                        url: 'https://~',
+                      },
+                    ],
+                    status: 'GENERATED',
+                    uploadTime: '2025-01-01T00:00:00.000Z',
+                  },
+                  {
+                    id: 2,
+                    createdAt: '2025-01-01T00:00:00.000Z',
+                    updatedAt: '2025-01-01T00:00:00.000Z',
+                    displayOrder: 2,
+                    summary: '오늘 점심 메뉴는 두부김치2',
+                    content: '엄청나게 긴 본문2',
+                    postImages: [
+                      {
+                        id: 2,
+                        postId: 2,
+                        url: 'https://~',
+                      },
+                    ],
+                    status: 'GENERATED',
+                    uploadTime: '2025-01-01T00:00:00.000Z',
+                  },
+                ]}
+              />
+            </div>
+
+            {/* 생성된 주제 카드 */}
+            <ContentGroupCard
+              text="생성된 주제"
+              postGroups={[
+                {
+                  id: 1,
+                  topic: '점심 메뉴 추천',
+                  purpose: 'OPINION',
+                  reference: 'NONE',
+                  newsCategory: 'ENVIRONMENT',
+                  thumbnailImageUrl:
+                    'https://instead-dev.s3.ap-northeast-2.amazonaws.com/post-group/019504d8-92ee-713e-aea0-347ce4d7bebf',
+                  length: 'SHORT',
+                  content: "'이런 메뉴는 어떨까?'와 같은 마무리 멘트",
+                  eof: false,
+                  createdAt: '2025-01-01T00:00:00.000Z',
+                },
+                {
+                  id: 2,
+                  topic: '점심 메뉴 추천 2',
+                  purpose: 'HUMOR',
+                  reference: 'NONE',
+                  newsCategory: 'GAME',
+                  thumbnailImageUrl:
+                    'https://instead-dev.s3.ap-northeast-2.amazonaws.com/post-group/019504d8-92ee-713e-aea0-347ce4d7bebf',
+                  length: 'SHORT',
+                  content: "'이런 메뉴는 어떨까?'와 같은 마무리 멘트",
+                  eof: false,
+                  createdAt: '2025-01-01T00:00:00.000Z',
+                },
+                {
+                  id: 3,
+                  topic: '점심 메뉴 추천 3',
+                  purpose: 'HUMOR',
+                  reference: 'NONE',
+                  newsCategory: 'GAME',
+                  thumbnailImageUrl:
+                    'https://instead-dev.s3.ap-northeast-2.amazonaws.com/post-group/019504d8-92ee-713e-aea0-347ce4d7bebf',
+                  length: 'SHORT',
+                  content: "'이런 메뉴는 어떨까?'와 같은 마무리 멘트",
+                  eof: false,
+                  createdAt: '2025-01-01T00:00:00.000Z',
+                },
+              ]}
+              onItemClick={function (id: number | string): void {
+                throw new Error('Function not implemented.');
+              }}
+              onItemRemove={function (id: number | string): void {
+                throw new Error('Function not implemented.');
+              }}
+            />
+          </div>
+        </div>
+      </div>
     </div>
   );
 }
diff --git a/apps/web/src/app/home/page.css.ts b/apps/web/src/app/home/page.css.ts
@@ -3,11 +3,30 @@ import { style } from '@vanilla-extract/css';
 
 export const background = style({
   maxWidth: '100%',
-  minHeight: '100vh',
+  height: '100vh',
   margin: '0 auto',
+  paddingTop: '8rem',
   background:
     'linear-gradient(0deg, #F6F7FC 0%, #F6F7FC 100%), linear-gradient(180deg, #F8F8FF 0%, #F4F5F9 48.16%, #E9F0FA 84.19%)',
+  overflow: 'hidden',
+});
+
+export const content = style({
+  display: 'flex',
+  width: '100%',
+  height: 'calc(100vh - 8rem)',
+  margin: '0 auto',
+});
+
+export const cardContent = style({
+  display: 'flex',
+  minWidth: '128rem',
+  width: '100%',
+  alignItems: 'center',
+  flexDirection: 'column',
+  gap: '4.8rem',
   overflow: 'auto',
+  paddingLeft: '1.6rem',
 });
 
 export const image = style({
@@ -25,3 +44,25 @@ export const dropdownItem = style({
   alignItems: 'center',
   gap: '1rem',
 });
+
+export const animatedText = style({
+  display: 'flex',
+  alignItems: 'center',
+  height: 'fit-content',
+});
+
+export const cardRow = style({
+  display: 'flex',
+  gap: '2.4rem',
+});
+
+export const cardColumn = style({
+  display: 'flex',
+  flexDirection: 'column',
+  gap: '2.4rem',
+});
+
+export const flexColumn = style({
+  display: 'flex',
+  flexDirection: 'column',
+});