diff --git a/src/styles/Pretendard-Black.woff2 b/public/fonts/Pretendard-Black.woff2 similarity index 100% rename from src/styles/Pretendard-Black.woff2 rename to public/fonts/Pretendard-Black.woff2 diff --git a/src/styles/Pretendard-Bold.woff2 b/public/fonts/Pretendard-Bold.woff2 similarity index 100% rename from src/styles/Pretendard-Bold.woff2 rename to public/fonts/Pretendard-Bold.woff2 diff --git a/src/styles/Pretendard-ExtraBold.woff2 b/public/fonts/Pretendard-ExtraBold.woff2 similarity index 100% rename from src/styles/Pretendard-ExtraBold.woff2 rename to public/fonts/Pretendard-ExtraBold.woff2 diff --git a/src/styles/Pretendard-ExtraLight.woff2 b/public/fonts/Pretendard-ExtraLight.woff2 similarity index 100% rename from src/styles/Pretendard-ExtraLight.woff2 rename to public/fonts/Pretendard-ExtraLight.woff2 diff --git a/src/styles/Pretendard-Light.woff2 b/public/fonts/Pretendard-Light.woff2 similarity index 100% rename from src/styles/Pretendard-Light.woff2 rename to public/fonts/Pretendard-Light.woff2 diff --git a/src/styles/Pretendard-Medium.woff2 b/public/fonts/Pretendard-Medium.woff2 similarity index 100% rename from src/styles/Pretendard-Medium.woff2 rename to public/fonts/Pretendard-Medium.woff2 diff --git a/src/styles/Pretendard-Regular.woff2 b/public/fonts/Pretendard-Regular.woff2 similarity index 100% rename from src/styles/Pretendard-Regular.woff2 rename to public/fonts/Pretendard-Regular.woff2 diff --git a/src/styles/Pretendard-SemiBold.woff2 b/public/fonts/Pretendard-SemiBold.woff2 similarity index 100% rename from src/styles/Pretendard-SemiBold.woff2 rename to public/fonts/Pretendard-SemiBold.woff2 diff --git a/src/styles/Pretendard-Thin.woff2 b/public/fonts/Pretendard-Thin.woff2 similarity index 100% rename from src/styles/Pretendard-Thin.woff2 rename to public/fonts/Pretendard-Thin.woff2 diff --git a/src/app/create/_components/CreateItem.css.ts b/src/app/create/_components/CreateItem.css.ts deleted file mode 100644 index 0a25cda4..00000000 --- a/src/app/create/_components/CreateItem.css.ts +++ /dev/null @@ -1,34 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -export const article = style({ - padding: '16px 20px 30px', -}); - -//body1 -export const label = style({ - marginBottom: '1.6rem', - - fontSize: '1.6rem', - fontWeight: '600', - letterSpacing: '-0.048rem', -}); - -export const required = style({ - marginLeft: '6px', - - fontSize: '1.6rem', - fontWeight: '500', - letterSpacing: '-0.048rem', - color: '#FF5454', -}); - -//body3 -export const description = style({ - marginBottom: '1.6rem', - - fontSize: '1.4rem', - color: '#8A8A8E', - fontWeight: '400', - lineHeight: '2.5rem', - letterSpacing: '-0.042rem', -}); diff --git a/src/app/create/_components/item/AddItemButton.css.ts b/src/app/create/_components/item/AddItemButton.css.ts deleted file mode 100644 index e28b7a6f..00000000 --- a/src/app/create/_components/item/AddItemButton.css.ts +++ /dev/null @@ -1,23 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -export const addButton = style({ - width: '100%', - height: '60px', - - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - gap: '12px', - - //body1 - fontSize: '1.6rem', - fontWeight: '400', - lineHeight: '1.6rem', - letterSpacing: '-0.48px', - color: '#61646B', - - backgroundColor: '#FFF', - - border: 'solid 1px #AFB1B6 ', - borderRadius: '15px', -}); diff --git a/src/app/create/_components/item/Header.css.ts b/src/app/create/_components/item/Header.css.ts deleted file mode 100644 index 15cc5595..00000000 --- a/src/app/create/_components/item/Header.css.ts +++ /dev/null @@ -1,36 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -export const header = style({ - width: '100%', - height: '90px', - paddingLeft: '20px', - paddingRight: '20px', - - position: 'sticky', - top: '0', - left: '0', - zIndex: '10', - - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - justifyContent: 'space-between', - - backgroundColor: '#fff', - - borderBottom: '1px solid rgba(0, 0, 0, 0.10)', -}); - -export const headerTitle = style({ - fontSize: '2rem', -}); - -export const headerNextButton = style({ - fontSize: '1.6rem', - color: '#AFB1B6', - cursor: 'default', -}); - -export const headerNextButtonActive = style({ - fontSize: '1.6rem', -}); diff --git a/src/app/create/_components/item/Items.css.ts b/src/app/create/_components/item/Items.css.ts deleted file mode 100644 index 83581869..00000000 --- a/src/app/create/_components/item/Items.css.ts +++ /dev/null @@ -1,110 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -export const itemsContainer = style({ - display: 'flex', - flexDirection: 'column', - gap: '16px', - - cursor: 'grab', -}); - -export const item = style({ - padding: '12px 18px', - - display: 'flex', - flexDirection: 'column', - gap: '12px', - - backgroundColor: '#fff', - - fontSize: '1.6rem', - border: 'solid 1px #AFB1B6', - borderRadius: '6px', - - transition: 'box-shadow 0.3s ease', - boxShadow: 'rgba(0, 0, 0, 0.1) 0px 2px 2px;', -}); - -export const draggingItem = style([ - item, - { - boxShadow: '0px 20px 50px -5px #AFB1B6', - }, -]); - -export const title = style({ - flexGrow: 1, - - //body1 - fontSize: '1.6rem', - fontWeight: '400', - lineHeight: '1.6rem', - letterSpacing: '-0.48px', - - '::placeholder': { - color: '#AFB1B6', - }, -}); - -export const errorTitle = style([ - title, - { - '::placeholder': { - color: '#FF5454', - }, - }, -]); - -export const comment = style({ - width: '100%', - resize: 'none', - - flexGrow: 1, - - //body2 - fontSize: '1.5rem', - lineHeight: '2.5rem', - letterSpacing: '-0.45px', - - border: 'none', - outline: 'none', - - '::placeholder': { - color: '#AFB1B6', - }, -}); - -export const linkModalChildren = style({ - width: '100%', -}); - -export const linkInput = style([ - title, - { - width: '100%', - padding: '8px', - - border: 'solid 1px #AFB1B6', - borderRadius: '4px', - }, -]); - -export const imageInput = style({ - display: 'none', -}); - -export const countLength = style({ - //body2 - fontSize: '1.5rem', - letterSpacing: '-0.45px', - color: '#61646B', -}); - -export const error = style({ - marginTop: '8px', - marginLeft: '4px', - - flexShrink: '0', - color: '#FF5454', - fontSize: '1.5rem', -}); diff --git a/src/app/create/_components/item/LinkPreview.css.ts b/src/app/create/_components/item/LinkPreview.css.ts deleted file mode 100644 index a7c14b02..00000000 --- a/src/app/create/_components/item/LinkPreview.css.ts +++ /dev/null @@ -1,26 +0,0 @@ -import { style } from '@vanilla-extract/css'; - -export const previewBox = style({ - width: '90px', - height: '90px', - - display: 'flex', - flexDirection: 'column', - justifyContent: 'center', - alignItems: 'center', - - position: 'relative', - - backgroundColor: '#EBF4FF', - - borderRadius: '10px', - whiteSpace: 'pre-wrap', - overflow: 'hidden', - cursor: 'pointer', -}); - -export const clearButton = style({ - position: 'absolute', - top: '5px', - right: '5px', -}); diff --git a/src/app/create/_components/item/LinkPreview.tsx b/src/app/create/_components/item/LinkPreview.tsx deleted file mode 100644 index 85f6c161..00000000 --- a/src/app/create/_components/item/LinkPreview.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import Image from 'next/image'; - -import ClearBlackIcon from '/public/icons/clear_x_black.svg'; -import LinkIcon from '/public/icons/link.svg'; -import * as styles from './LinkPreview.css'; - -interface LinkPreviewProps { - type: 'link' | 'image'; - url?: string; - domain?: string; - imageUrl?: string; - handleClearButtonClick: () => void; -} - -export default function PreviewBox({ type, url, domain, imageUrl, handleClearButtonClick }: LinkPreviewProps) { - const handlePreviewClick = () => { - window.open(url); - }; - - const handleClearClick = (e: React.MouseEvent) => { - e.stopPropagation(); - handleClearButtonClick(); - }; - - return ( -
- {type === 'link' && ( - <> - -

{domain}

- - )} - {type === 'image' && 첨부 이미지} - -
- ); -} diff --git a/src/app/layout.tsx b/src/app/layout.tsx index ca44e808..173904db 100644 --- a/src/app/layout.tsx +++ b/src/app/layout.tsx @@ -1,10 +1,11 @@ 'use client'; import { ReactNode } from 'react'; +import { ToastContainer } from 'react-toastify'; +import Script from 'next/script'; + import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import '@/styles/GlobalStyles.css'; -import Script from 'next/script'; -import { ToastContainer } from 'react-toastify'; const queryClient = new QueryClient(); declare global { diff --git a/src/app/list/create/_components/CreateItem.css.ts b/src/app/list/create/_components/CreateItem.css.ts new file mode 100644 index 00000000..d272219d --- /dev/null +++ b/src/app/list/create/_components/CreateItem.css.ts @@ -0,0 +1,35 @@ +import { style } from '@vanilla-extract/css'; +import { body1, body3 } from '@/styles/font.css'; +import { vars } from '@/styles/theme.css'; + +export const article = style({ + padding: '16px 20px 30px', +}); + +//body1 +export const label = style([ + body1, + { + marginBottom: '1.6rem', + }, +]); + +export const required = style([ + body1, + { + marginLeft: '6px', + + fontWeight: '500', + color: vars.color.red, + }, +]); + +//body3 +export const description = style([ + body3, + { + marginBottom: '1.6rem', + + color: vars.color.gray9, + }, +]); diff --git a/src/app/create/_components/CreateItem.tsx b/src/app/list/create/_components/CreateItem.tsx similarity index 100% rename from src/app/create/_components/CreateItem.tsx rename to src/app/list/create/_components/CreateItem.tsx diff --git a/src/app/create/_components/CreateList.css.ts b/src/app/list/create/_components/CreateList.css.ts similarity index 100% rename from src/app/create/_components/CreateList.css.ts rename to src/app/list/create/_components/CreateList.css.ts diff --git a/src/app/create/_components/CreateList.tsx b/src/app/list/create/_components/CreateList.tsx similarity index 100% rename from src/app/create/_components/CreateList.tsx rename to src/app/list/create/_components/CreateList.tsx diff --git a/src/app/list/create/_components/item/AddItemButton.css.ts b/src/app/list/create/_components/item/AddItemButton.css.ts new file mode 100644 index 00000000..06eb0733 --- /dev/null +++ b/src/app/list/create/_components/item/AddItemButton.css.ts @@ -0,0 +1,23 @@ +import { style } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; +import { body1 } from '@/styles/font.css'; + +export const addButton = style([ + body1, + { + width: '100%', + height: '60px', + + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + gap: '12px', + + color: vars.color.gray9, + + backgroundColor: '#FFF', + + border: 'solid 1px #AFB1B6 ', + borderRadius: '15px', + }, +]); diff --git a/src/app/create/_components/item/AddItemButton.tsx b/src/app/list/create/_components/item/AddItemButton.tsx similarity index 100% rename from src/app/create/_components/item/AddItemButton.tsx rename to src/app/list/create/_components/item/AddItemButton.tsx diff --git a/src/app/list/create/_components/item/Header.css.ts b/src/app/list/create/_components/item/Header.css.ts new file mode 100644 index 00000000..6899135b --- /dev/null +++ b/src/app/list/create/_components/item/Header.css.ts @@ -0,0 +1,33 @@ +import { style, styleVariants } from '@vanilla-extract/css'; +import { vars } from '@/styles/theme.css'; +import { title3, body1 } from '@/styles/font.css'; + +export const header = style({ + width: '100%', + height: '90px', + paddingLeft: '20px', + paddingRight: '20px', + + position: 'sticky', + top: '0', + left: '0', + zIndex: '10', + + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + justifyContent: 'space-between', + + backgroundColor: vars.color.white, + + borderBottom: '1px solid rgba(0, 0, 0, 0.10)', +}); + +export const headerTitle = style([title3]); + +export const baseButton = style([body1]); + +export const headerNextButton = styleVariants({ + active: [baseButton], + inactive: [baseButton, { color: vars.color.gray7, cursor: 'default' }], +}); diff --git a/src/app/create/_components/item/Header.tsx b/src/app/list/create/_components/item/Header.tsx similarity index 86% rename from src/app/create/_components/item/Header.tsx rename to src/app/list/create/_components/item/Header.tsx index b4044a6b..3912271a 100644 --- a/src/app/create/_components/item/Header.tsx +++ b/src/app/list/create/_components/item/Header.tsx @@ -15,7 +15,7 @@ function Header({ onBackClick, isSubmitActive, onSubmitClick }: HeaderProps) {

리스트 생성