YAPP-Github · kongnayeon · Feb 15, 2025 · Feb 14, 2025 · Feb 14, 2025 · Feb 14, 2025
diff --git a/...app/(prompt)/edit/[agentId]/[postGroupId]/detail/_components/PostEditor/PostEditor.css.ts b/...app/(prompt)/edit/[agentId]/[postGroupId]/detail/_components/PostEditor/PostEditor.css.ts
@@ -1,11 +1,11 @@
-import { tokens } from '@repo/theme';
+import { vars } from '@repo/theme';
 import { style } from '@vanilla-extract/css';
 
 export const wrapper = style({
   width: '100%',
   height: '100%',
-  border: `0.2rem solid ${tokens.colors.grey50}`,
-  borderRadius: tokens.radius[16],
+  border: `0.2rem solid ${vars.colors.grey50}`,
+  borderRadius: vars.borderRadius[16],
   display: 'flex',
   flexDirection: 'column',
 });
@@ -14,7 +14,7 @@ export const toolBar = style({
   display: 'flex',
   justifyContent: 'space-between',
   padding: '1.6rem 1.2rem',
-  borderBottom: `0.2rem solid ${tokens.colors.grey50}`,
+  borderBottom: `0.2rem solid ${vars.colors.grey50}`,
 });
 
 export const saveArea = style({
@@ -38,7 +38,7 @@ export const textarea = style({
   lineHeight: '170%',
   letterSpacing: '-0.032rem',
   fontWeight: 'medium',
-  fontSize: `${tokens.typography.fontSize[16]}`,
+  fontSize: `${vars.typography.fontSize[16]}`,
   width: '100%',
   resize: 'none',
   overflow: 'visible',

diff --git a/...dit/[agentId]/[postGroupId]/log/[postId]/_components/LogContentItem/LogContentItem.css.ts b/...dit/[agentId]/[postGroupId]/log/[postId]/_components/LogContentItem/LogContentItem.css.ts
@@ -1,4 +1,4 @@
-import { tokens } from '@repo/theme';
+import { vars } from '@repo/theme';
 import { style } from '@vanilla-extract/css';
 
 export const wrapper = style({
@@ -8,9 +8,9 @@ export const wrapper = style({
   display: 'flex',
   flexDirection: 'column',
   gap: '0.8rem',
-  borderRadius: `${tokens.radius[10]}`,
+  borderRadius: `${vars.borderRadius[10]}`,
   ':hover': {
-    backgroundColor: `${tokens.colors.grey25}`,
+    backgroundColor: `${vars.colors.grey25}`,
   },
 });
 

diff --git a/...rompt)/edit/[agentId]/[postGroupId]/log/[postId]/_components/LogSidebar/LogSidebar.css.ts b/...rompt)/edit/[agentId]/[postGroupId]/log/[postId]/_components/LogSidebar/LogSidebar.css.ts
@@ -1,11 +1,11 @@
-import { tokens } from '@repo/theme';
+import { vars } from '@repo/theme';
 import { style } from '@vanilla-extract/css';
 
 export const sidebarWrapper = style({
   width: '42.3rem',
   height: '100vh',
   flexShrink: '0',
-  backgroundColor: `${tokens.colors.grey0}`,
+  backgroundColor: `${vars.colors.grey}`,
 });
 
 export const closeArea = style({

diff --git a/apps/web/src/app/globals.css b/apps/web/src/app/globals.css
@@ -15,12 +15,16 @@ body {
   max-width: 100vw;
   overflow-x: hidden;
   font-size: 62.5%;
+
+  @media (max-width: 1680px) {
+    font-size: 50%;
+  }
 }
 
 body {
   color: var(--foreground);
   background: var(--background);
-  font-family: Arial, Helvetica, sans-serif;
+  font-family: var(--font-pretendard);
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   font-size: 1.6rem;

diff --git a/apps/web/src/app/home/Home.tsx b/apps/web/src/app/home/Home.tsx
@@ -0,0 +1,212 @@
+'use client';
+
+import { MainBreadcrumbItem, NavBar } from '@web/components/common';
+import { AccountSidebar } from './_components/AccountSidebar/AccountSidebar';
+import { useScroll } from '@web/hooks';
+import { ROUTES } from '@web/routes';
+import { Breadcrumb } from '@repo/ui/Breadcrumb';
+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>({
+    threshold: 100,
+  });
+
+  const profileImageUrl = '';
+  return (
+    <div className={background} ref={scrollRef}>
+      <NavBar
+        leftAddon={
+          <Breadcrumb>
+            <Breadcrumb.Item>
+              <MainBreadcrumbItem href={ROUTES.HOME} />
+            </Breadcrumb.Item>
+          </Breadcrumb>
+        }
+        rightAddon={
+          <Dropdown>
+            <Dropdown.Trigger>
+              {isNil(profileImageUrl) ? (
+                <div className={image} />
+              ) : (
+                <Image
+                  className={image}
+                  width={40}
+                  height={40}
+                  src={profileImageUrl}
+                  alt={''}
+                />
+              )}
+            </Dropdown.Trigger>
+            <Dropdown.Content align="right">
+              <Dropdown.Item value="option1" className={dropdownItem}>
+                <Icon name="clock" size="2.4rem" color="grey400" />
+                <Text fontSize={18} fontWeight="medium" color="grey1000">
+                  수정하기
+                </Text>
+              </Dropdown.Item>
+            </Dropdown.Content>
+          </Dropdown>
+        }
+        isScrolled={isScrolled}
+      />
+      <div className={content}>
+        <AccountSidebar />
+        <div className={cardContent}>
+          <GradientAnimatedText className={animatedText}>
+            한 번의 설정으로 끝없이 흘러가는 콘텐츠
+          </GradientAnimatedText>
+
+          <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/_components/AccountItem/AccountItem.css.ts b/apps/web/src/app/home/_components/AccountItem/AccountItem.css.ts
@@ -0,0 +1,44 @@
+import { vars } from '@repo/theme';
+import { style } from '@vanilla-extract/css';
+
+export const wrapper = style({
+  display: 'flex',
+  gap: '2rem',
+  alignItems: 'center',
+  padding: '1.6rem 1.2rem',
+  cursor: 'pointer',
+  ':hover': {
+    marginLeft: '0.8rem',
+  },
+});
+
+export const image = style({
+  borderRadius: '100%',
+  width: '6rem',
+  height: '6rem',
+  backgroundColor: vars.colors.grey25,
+  border: `0.1rem solid ${vars.colors.grey200}`,
+  objectFit: 'cover',
+});
+
+export const emptyImage = style({
+  borderRadius: '100%',
+  width: '6rem',
+  height: '6rem',
+  border: `0.1rem solid ${vars.colors.grey200}`,
+  backgroundColor: vars.colors.grey25,
+  flexShrink: 0,
+});
+
+export const agentPlanBadge = style({
+  display: 'flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  gap: '0.4rem',
+});
+
+export const textWrapper = style({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+});