diff --git a/src/assets/logo.svg b/src/assets/logo.svg index 0fd284fd..5436497a 100644 --- a/src/assets/logo.svg +++ b/src/assets/logo.svg @@ -1,13 +1,5 @@ - + 펀잇 로고 - - - - - - - - - + diff --git a/src/components/Common/Header/Header.tsx b/src/components/Common/Header/Header.tsx index 3278c15e..cf9125dd 100644 --- a/src/components/Common/Header/Header.tsx +++ b/src/components/Common/Header/Header.tsx @@ -1,19 +1,20 @@ import { Link } from 'react-router-dom'; -import { container } from './header.css'; +import { container, link } from './header.css'; import SvgIcon from '../Svg/SvgIcon'; import Logo from '@/assets/logo.svg'; import { PATH } from '@/constants/path'; +import { vars } from '@/styles/theme.css'; const Header = () => { return (
- + - - + +
); diff --git a/src/components/Common/Header/header.css.ts b/src/components/Common/Header/header.css.ts index bdf74a01..0cf38495 100644 --- a/src/components/Common/Header/header.css.ts +++ b/src/components/Common/Header/header.css.ts @@ -9,8 +9,15 @@ export const container = style({ alignItems: 'center', width: '100%', height: 50, - maxWidth: 400, + maxWidth: 440, + padding: '0 20px', backgroundColor: '#fff', transform: 'translateX(-50%)', zIndex: 1001, }); + +export const link = style({ + display: 'flex', + justifyContent: 'center', + alignItems: 'center', +}); diff --git a/src/components/Common/Indicator/Indicator.tsx b/src/components/Common/Indicator/Indicator.tsx new file mode 100644 index 00000000..6798145f --- /dev/null +++ b/src/components/Common/Indicator/Indicator.tsx @@ -0,0 +1,7 @@ +import { container } from './indicator.css'; + +const Indicator = () => { + return
; +}; + +export default Indicator; diff --git a/src/components/Common/Indicator/indicator.css.ts b/src/components/Common/Indicator/indicator.css.ts new file mode 100644 index 00000000..fa00800e --- /dev/null +++ b/src/components/Common/Indicator/indicator.css.ts @@ -0,0 +1,5 @@ +import { style } from '@vanilla-extract/css'; + +export const container = style({ + height: 34, +}); diff --git a/src/components/Common/NavigationBar/NavigationBar.tsx b/src/components/Common/NavigationBar/NavigationBar.tsx index 9c3d9165..0ec99652 100644 --- a/src/components/Common/NavigationBar/NavigationBar.tsx +++ b/src/components/Common/NavigationBar/NavigationBar.tsx @@ -1,9 +1,11 @@ import { NavLink } from 'react-router-dom'; import { menuName, container, link, list } from './navigationBar.css'; +import Indicator from '../Indicator/Indicator'; import SvgIcon from '../Svg/SvgIcon'; import { NAVIGATION_MENU } from '@/constants'; +import { vars } from '@/styles/theme.css'; const NavigationBar = () => { return ( @@ -18,8 +20,8 @@ const NavigationBar = () => { variant={variant} width={28} height={28} - fill={isActive ? '#ffb017' : '#a0a0a0'} - stroke={isActive ? '#ffb017' : '#a0a0a0'} + fill={isActive ? vars.colors.primary : vars.colors.gray2} + stroke={isActive ? vars.colors.primary : vars.colors.gray2} /> {name} @@ -28,6 +30,7 @@ const NavigationBar = () => { ))} + ); }; diff --git a/src/components/Common/NavigationBar/navigationBar.css.ts b/src/components/Common/NavigationBar/navigationBar.css.ts index 9a93b834..312af5e2 100644 --- a/src/components/Common/NavigationBar/navigationBar.css.ts +++ b/src/components/Common/NavigationBar/navigationBar.css.ts @@ -1,3 +1,4 @@ +import { vars } from '@/styles/theme.css'; import { style, styleVariants } from '@vanilla-extract/css'; export const container = style({ @@ -5,18 +6,17 @@ export const container = style({ bottom: 0, left: '50%', width: '100%', - maxWidth: 400, - height: 70, - backgroundColor: '#fff', + maxWidth: 440, + backgroundColor: vars.colors.white, transform: 'translateX(-50%)', }); export const list = style({ display: 'flex', justifyContent: 'space-around', - alignItems: 'center', - height: '100%', - border: '1px solid #f9f9f9', + alignItems: 'flex-end', + height: 60, + borderTop: `1px solid ${vars.colors.border.light}`, }); export const link = style({ @@ -30,10 +30,9 @@ export const link = style({ const menuNameBase = style({ fontSize: 11, textAlign: 'center', - lineHeight: 1.4, }); export const menuName = styleVariants({ - active: [menuNameBase, { color: '#ffb017' }], - default: [menuNameBase, { color: '#a0a0a0' }], + active: [menuNameBase, { color: vars.colors.primary }], + default: [menuNameBase, { color: vars.colors.gray3 }], }); diff --git a/src/components/Common/PageHeader/pageHeader.css.ts b/src/components/Common/PageHeader/pageHeader.css.ts index 1dc215e1..3422c38a 100644 --- a/src/components/Common/PageHeader/pageHeader.css.ts +++ b/src/components/Common/PageHeader/pageHeader.css.ts @@ -5,7 +5,7 @@ export const container = style({ top: 0, left: '50%', width: '100%', - maxWidth: 400, + maxWidth: 440, height: 50, display: 'flex', justifyContent: 'space-between', diff --git a/src/components/Common/TopBar/topBar.css.ts b/src/components/Common/TopBar/topBar.css.ts index 4101c69b..c743e336 100644 --- a/src/components/Common/TopBar/topBar.css.ts +++ b/src/components/Common/TopBar/topBar.css.ts @@ -6,7 +6,7 @@ export const container = style({ top: 0, left: '50%', width: '100%', - maxWidth: 400, + maxWidth: 440, height: 50, display: 'flex', justifyContent: 'space-between', diff --git a/src/components/Common/index.ts b/src/components/Common/index.ts index 30b5d588..6c66972c 100644 --- a/src/components/Common/index.ts +++ b/src/components/Common/index.ts @@ -25,5 +25,6 @@ export { default as PageHeader } from './PageHeader/PageHeader'; export { default as Badge } from './Badge/Badge'; export { default as WriteButton } from './WriteButton/WriteButton'; export { default as Text } from './Text/Text'; +export { default as Indicator } from './Indicator/Indicator'; export { default as TopBar } from './TopBar/TopBar'; export { default as ShowAllButton } from './ShowAllButton/ShowAllButton'; diff --git a/src/components/Layout/DefaultLayout.tsx b/src/components/Layout/Layout.tsx similarity index 59% rename from src/components/Layout/DefaultLayout.tsx rename to src/components/Layout/Layout.tsx index 38d93dd0..932f5ff2 100644 --- a/src/components/Layout/DefaultLayout.tsx +++ b/src/components/Layout/Layout.tsx @@ -1,14 +1,14 @@ import type { PropsWithChildren } from 'react'; -import { defaultLayout } from './layout.css'; +import { main } from './layout.css'; import Header from '../Common/Header/Header'; import NavigationBar from '../Common/NavigationBar/NavigationBar'; -const DefaultLayout = ({ children }: PropsWithChildren) => { +const Layout = ({ children }: PropsWithChildren) => { return ( <>
-
+
{children}
@@ -16,4 +16,4 @@ const DefaultLayout = ({ children }: PropsWithChildren) => { ); }; -export default DefaultLayout; +export default Layout; diff --git a/src/components/Layout/MinimalLayout.tsx b/src/components/Layout/MinimalLayout.tsx deleted file mode 100644 index 4149cd5b..00000000 --- a/src/components/Layout/MinimalLayout.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import type { PropsWithChildren } from 'react'; - -import { minimalLayout } from './layout.css'; - -const MinimalLayout = ({ children }: PropsWithChildren) => { - return
{children}
; -}; - -export default MinimalLayout; diff --git a/src/components/Layout/index.ts b/src/components/Layout/index.ts index 767b1deb..2a6bad83 100644 --- a/src/components/Layout/index.ts +++ b/src/components/Layout/index.ts @@ -1,3 +1,2 @@ -export { default as DefaultLayout } from './DefaultLayout'; -export { default as MinimalLayout } from './MinimalLayout'; +export { default as Layout } from './Layout'; export { default as AuthLayout } from './AuthLayout'; diff --git a/src/components/Layout/layout.css.ts b/src/components/Layout/layout.css.ts index 6ad970c0..82af27a0 100644 --- a/src/components/Layout/layout.css.ts +++ b/src/components/Layout/layout.css.ts @@ -1,9 +1,5 @@ import { style } from '@vanilla-extract/css'; -export const defaultLayout = style({ +export const main = style({ padding: '50px 0 70px', }); - -export const minimalLayout = style({ - paddingTop: 50, -}); diff --git a/src/components/Review/ReviewItem/ReviewItem.stories.tsx b/src/components/Review/ReviewItem/ReviewItem.stories.tsx index 6312e774..3151656b 100644 --- a/src/components/Review/ReviewItem/ReviewItem.stories.tsx +++ b/src/components/Review/ReviewItem/ReviewItem.stories.tsx @@ -13,7 +13,7 @@ const meta: Meta = { }, decorators: [ (Story) => ( -
+
), diff --git a/src/components/Review/ReviewTagSheet/reviewTagSheet.css.ts b/src/components/Review/ReviewTagSheet/reviewTagSheet.css.ts index c069c38c..bce3cf0c 100644 --- a/src/components/Review/ReviewTagSheet/reviewTagSheet.css.ts +++ b/src/components/Review/ReviewTagSheet/reviewTagSheet.css.ts @@ -27,7 +27,7 @@ export const registerButtonWrapper = style({ alignItems: 'flex-end', width: '100%', height: 70, - maxWidth: 400, + maxWidth: 440, padding: '0 20px', borderTop: `1px solid ${vars.colors.border.default}`, backgroundColor: vars.colors.background.default, diff --git a/src/components/Search/SearchInput/searchInput.css.ts b/src/components/Search/SearchInput/searchInput.css.ts index b05790d1..3f5b0eee 100644 --- a/src/components/Search/SearchInput/searchInput.css.ts +++ b/src/components/Search/SearchInput/searchInput.css.ts @@ -1,38 +1,36 @@ +import { vars } from '@/styles/theme.css'; import { style } from '@vanilla-extract/css'; export const inputContainer = style({ position: 'relative', - width: 343, }); export const searchInput = style({ - position: 'absolute', width: '90%', height: 40, padding: '10px 0 10px 18px', - color: '#232527', - background: '#efefef', + background: vars.colors.background.category, borderRadius: '20px 0 0 20px', fontSize: '1.4rem', outline: 'none', selectors: { '&:placeholder': { - color: '#808080', + color: vars.colors.gray3, }, }, }); export const tagInputWrapper = style({ - position: 'relative', - top: 6, + position: 'absolute', + top: 5, left: 6, display: 'flex', alignItems: 'baseline', gap: 6, width: 'fit-content', padding: '5px 12px', - background: '#FFFFFF', + background: vars.colors.white, borderRadius: 20, }); @@ -45,6 +43,6 @@ export const iconWrapperButton = style({ width: '10%', height: 40, paddingLeft: 4, - background: '#efefef', + background: vars.colors.background.category, borderRadius: '0 20px 20px 0', }); diff --git a/src/pages/NotFoundPage.tsx b/src/pages/NotFoundPage.tsx index ca001c5a..7fc78284 100644 --- a/src/pages/NotFoundPage.tsx +++ b/src/pages/NotFoundPage.tsx @@ -2,12 +2,12 @@ import { Heading, Link, Spacing } from '@fun-eat/design-system'; import { Link as RouterLink } from 'react-router-dom'; import styled from 'styled-components'; -import { DefaultLayout } from '@/components/Layout'; +import { Layout } from '@/components/Layout'; import { PATH } from '@/constants/path'; const NotFoundPage = () => { return ( - + 존재하지 않는 페이지입니다 @@ -15,7 +15,7 @@ const NotFoundPage = () => { 홈으로 가기 - + ); }; diff --git a/src/pages/ProductDetailPage/productDetailPage.css.ts b/src/pages/ProductDetailPage/productDetailPage.css.ts index 7e8701b7..7c78071a 100644 --- a/src/pages/ProductDetailPage/productDetailPage.css.ts +++ b/src/pages/ProductDetailPage/productDetailPage.css.ts @@ -2,7 +2,7 @@ import { vars } from '@/styles/theme.css'; import { style } from '@vanilla-extract/css'; export const main = style({ - paddingBottom: 70, + padding: '50px 0 70px', }); export const section = style({ @@ -25,7 +25,7 @@ export const linkWrapper = style({ alignItems: 'flex-end', width: '100%', height: 70, - maxWidth: 400, + maxWidth: 440, padding: '0 20px', border: `1px solid ${vars.colors.border.default}`, backgroundColor: vars.colors.background.default, diff --git a/src/pages/ProductListPage/ProductListPage.tsx b/src/pages/ProductListPage/ProductListPage.tsx index 4b000f45..5221ef9a 100644 --- a/src/pages/ProductListPage/ProductListPage.tsx +++ b/src/pages/ProductListPage/ProductListPage.tsx @@ -4,7 +4,7 @@ import cx from 'classnames'; import { Suspense, useState } from 'react'; import { useLocation, useParams } from 'react-router-dom'; -import { categoryButton, listSection, selectButton, selectSection, sortButton } from './productListPage.css'; +import { categoryButton, listSection, main, selectButton, selectSection, sortButton } from './productListPage.css'; import NotFoundPage from '../NotFoundPage'; import { ErrorBoundary, ErrorComponent, Loading, PageHeader, SelectOptionList, SvgIcon } from '@/components/Common'; @@ -48,32 +48,34 @@ export const ProductListPage = () => { <> -
- - -
+
+
+ + +
-
- - }> - - - -
+
+ + }> + + + +
+
{activeSheet === 'sort' && ( diff --git a/src/pages/ProductListPage/productListPage.css.ts b/src/pages/ProductListPage/productListPage.css.ts index f792b5ff..faa1fea7 100644 --- a/src/pages/ProductListPage/productListPage.css.ts +++ b/src/pages/ProductListPage/productListPage.css.ts @@ -3,6 +3,10 @@ import { createVar, style, styleVariants } from '@vanilla-extract/css'; const categoryBorder = createVar(); const categoryColor = createVar(); +export const main = style({ + paddingTop: 50, +}); + export const selectSection = style({ display: 'flex', gap: 8, diff --git a/src/pages/ProductSearchListPage/ProductSearchListPage.tsx b/src/pages/ProductSearchListPage/ProductSearchListPage.tsx index fa9f1b8b..9592eec0 100644 --- a/src/pages/ProductSearchListPage/ProductSearchListPage.tsx +++ b/src/pages/ProductSearchListPage/ProductSearchListPage.tsx @@ -9,7 +9,7 @@ import { useIntersectionObserver } from '@/hooks/common'; import { useInfiniteProductSearchResultsQuery } from '@/hooks/queries/search'; export const ProductSearchListPage = () => { - const [searchParams, setSearchParams] = useSearchParams(); + const [searchParams] = useSearchParams(); const searchQuery = searchParams.get('query') || ''; const { @@ -29,10 +29,10 @@ export const ProductSearchListPage = () => { -
+
-
-
+
+
); }; diff --git a/src/pages/ProductSearchListPage/productSearchListPage.css.ts b/src/pages/ProductSearchListPage/productSearchListPage.css.ts index e9c77ff4..bd2a56cc 100644 --- a/src/pages/ProductSearchListPage/productSearchListPage.css.ts +++ b/src/pages/ProductSearchListPage/productSearchListPage.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; export const container = style({ - padding: '0 20px', + padding: '50px 20px 20px', marginTop: 28, }); diff --git a/src/pages/RecipeDetailPage/RecipeDetailPage.tsx b/src/pages/RecipeDetailPage/RecipeDetailPage.tsx index 7df2ae24..26584049 100644 --- a/src/pages/RecipeDetailPage/RecipeDetailPage.tsx +++ b/src/pages/RecipeDetailPage/RecipeDetailPage.tsx @@ -17,9 +17,12 @@ import { recipeProductsCount, thirdProductImage, bottomSheetWrapper, + main, + contentSection, + commentSection, } from './recipeDetailPage.css'; -import { ErrorBoundary, ErrorComponent, Loading, SectionTitle, SvgIcon, Text } from '@/components/Common'; +import { ErrorBoundary, ErrorComponent, Loading, SvgIcon, Text, TopBar } from '@/components/Common'; import { MemberImage } from '@/components/Members'; import { ProductOverviewList } from '@/components/Product'; import { CommentForm, CommentList, RecipeFavoriteButton } from '@/components/Recipe'; @@ -42,77 +45,91 @@ export const RecipeDetailPage = () => { return ( <> -
- - -
- -
- - {author.nickname} - - - {getFormattedDate(createdAt)} - -
-
-
    - {images.map((image, index) => ( -
  • - {`${title} -
    • - ))} -
-
-
-
- + + + + + +
+
+
+ +
+ + {author.nickname} + + + {getFormattedDate(createdAt)} +
- - 이런 상품들을 사용했어요! -
-
    - {displaySlice(true, products, 3).map(({ id, name, image }, idx) => ( -
  • +
      + {images.map((image, index) => ( +
    • 3 && idx === 2 ? thirdProductImage : ''} - width={48} - height={48} - alt={name} + alt={`${title} 꿀조합 사진 ${index}`} + width={335} + height={290} /> - {idx === 2 && ( - - +{products.length - 3} - - )}
      • ))}
    -
-
-
-
-
-
- - - - {content} - - -
- - - - }> -
- +
+
+
+ +
+ + 이런 상품들을 사용했어요! +
- - -
+
    + {displaySlice(true, products, 3).map(({ id, name, image }, idx) => ( +
  • + 3 && idx === 2 ? thirdProductImage : ''} + width={48} + height={48} + alt={name} + /> + {idx === 2 && ( + + +{products.length - 3} + + )} +
    • + ))} +
+
+ + +
+ +
+ + + + {content} + +
+ +
+ +
+ + + }> +
+ +
+ + +
+ +
diff --git a/src/pages/RecipeDetailPage/recipeDetailPage.css.ts b/src/pages/RecipeDetailPage/recipeDetailPage.css.ts index 61a35d62..9c962d38 100644 --- a/src/pages/RecipeDetailPage/recipeDetailPage.css.ts +++ b/src/pages/RecipeDetailPage/recipeDetailPage.css.ts @@ -10,8 +10,23 @@ export const flexColContainer = style({ flexDirection: 'column', }); +export const main = style({ + paddingTop: 50, +}); + export const container = style({ padding: '0 20px', + margin: '10px 0', +}); + +export const contentSection = style({ + padding: '0 20px', + margin: '12px 0 24px', +}); + +export const commentSection = style({ + padding: '0 20px', + margin: '12px 0 32px', }); export const authorWrapper = style({ diff --git a/src/pages/RecipePage/RecipePage.tsx b/src/pages/RecipePage/RecipePage.tsx index 59883016..5fc33168 100644 --- a/src/pages/RecipePage/RecipePage.tsx +++ b/src/pages/RecipePage/RecipePage.tsx @@ -58,7 +58,7 @@ export const RecipePage = () => {
- + { - const [searchParams, setSearchParams] = useSearchParams(); + const [searchParams] = useSearchParams(); const searchQuery = searchParams.get('query') || ''; const { data: searchResponse, fetchNextPage, hasNextPage } = useInfiniteRecipeSearchResultsQuery(searchQuery); @@ -30,14 +30,16 @@ export const RecipeSearchListPage = () => { -
    - {recipes.map((recipe) => ( -
  • - -
    • - ))} -
-
+
+
    + {recipes.map((recipe) => ( +
  • + +
    • + ))} +
+
+
); }; diff --git a/src/pages/RecipeSearchListPage/recipeSearchListPage.css.ts b/src/pages/RecipeSearchListPage/recipeSearchListPage.css.ts index 5b47dfb5..8991a701 100644 --- a/src/pages/RecipeSearchListPage/recipeSearchListPage.css.ts +++ b/src/pages/RecipeSearchListPage/recipeSearchListPage.css.ts @@ -1,5 +1,9 @@ import { style } from '@vanilla-extract/css'; +export const main = style({ + paddingTop: 50, +}); + export const listWrapper = style({ display: 'grid', gridTemplateColumns: '1fr 1fr', diff --git a/src/pages/ReviewRegisterPage/reviewRegisterPage.css.ts b/src/pages/ReviewRegisterPage/reviewRegisterPage.css.ts index 408efe7b..318c9543 100644 --- a/src/pages/ReviewRegisterPage/reviewRegisterPage.css.ts +++ b/src/pages/ReviewRegisterPage/reviewRegisterPage.css.ts @@ -1,6 +1,6 @@ import { style } from '@vanilla-extract/css'; export const section = style({ - padding: '0 20px', + padding: '50px 20px 0', margin: '16px 0 32px', }); diff --git a/src/pages/SearchPage/SearchPage.tsx b/src/pages/SearchPage/SearchPage.tsx index d3b3a001..02882c17 100644 --- a/src/pages/SearchPage/SearchPage.tsx +++ b/src/pages/SearchPage/SearchPage.tsx @@ -1,7 +1,7 @@ import { useQueryErrorResetBoundary } from '@tanstack/react-query'; import { Suspense, useEffect, useState } from 'react'; -import { badgeContainer, searchWrapper, searchResultTitle, searchSection, subTitle } from './searchPage.css'; +import { badgeContainer, searchWrapper, searchResultTitle, searchSection, subTitle, main } from './searchPage.css'; import { Text, Badge, ErrorBoundary, ErrorComponent, Loading, PageHeader } from '@/components/Common'; import { @@ -49,78 +49,85 @@ export const SearchPage = () => { return ( <> -
- -
-
- - - {!isSubmitted && debouncedSearchQuery && isAutocompleteOpen && ( - - }> - - - - )} -
-
- {isSubmitted && searchQuery ? ( - <> + + +
+
+
+ + + {!isSubmitted && debouncedSearchQuery && isAutocompleteOpen && ( + + }> + + + + )} +
+
+ {isSubmitted && searchQuery ? ( + <> +
+ + 상품 바로가기 + + + }> + + + +
+
+
+ + 꿀!조합 바로가기 + + + }> + + + +
+ + ) : (
- - 상품 바로가기 + + 최근 검색어 - - }> - - - -
-
-
- - 꿀!조합 바로가기 +
+ {recentSearchedKeywords?.map((keyword, index) => ( + + ))} +
+ + 추천 태그 - - }> - - - -
- - ) : ( -
- - 최근 검색어 - -
- {recentSearchedKeywords?.map((keyword, index) => ( - - ))} -
- - 추천 태그 - -
- {RECOMMENDED_TAGS.map(({ id, name }) => ( - - ))} +
+ {RECOMMENDED_TAGS.map(({ id, name }) => ( + + ))} +
-
- )} -
+ )} +
+ ); }; diff --git a/src/pages/SearchPage/TagSearchResultPage.tsx b/src/pages/SearchPage/TagSearchResultPage.tsx index 52bd54d2..d69e43f5 100644 --- a/src/pages/SearchPage/TagSearchResultPage.tsx +++ b/src/pages/SearchPage/TagSearchResultPage.tsx @@ -1,6 +1,6 @@ import { Suspense } from 'react'; -import { searchResultTitle, searchSection } from './searchPage.css'; +import { form, formWrapper, searchResultTitle, searchSection } from './searchPage.css'; import { ErrorBoundary, ErrorComponent, Loading, Text } from '@/components/Common'; import { SearchInput, TagSearchResultList } from '@/components/Search'; @@ -10,26 +10,28 @@ export const TagSearchResultPage = () => { const { inputRef, searchQuery, isSubmitted, handleSearchQuery, handleSearchForm } = useSearch(); return ( -
-
- - -
+ <> +
+
+ + +
+
- '{searchQuery}'가 포함된 상품 + '{searchQuery}'가 포함된 상품 }> -
-
+ + ); }; diff --git a/src/pages/SearchPage/searchPage.css.ts b/src/pages/SearchPage/searchPage.css.ts index 6bc5b065..309abba1 100644 --- a/src/pages/SearchPage/searchPage.css.ts +++ b/src/pages/SearchPage/searchPage.css.ts @@ -1,13 +1,27 @@ import { globalStyle, style } from '@vanilla-extract/css'; +export const main = style({ + paddingTop: 50, +}); + +export const formWrapper = style({ + display: 'flex', + alignItems: 'center', + height: 50, + padding: '0 20px', +}); + +export const form = style({ + flexGrow: 1, +}); + export const searchSection = style({ padding: '0 20px', }); export const searchWrapper = style({ padding: '0 20px', - marginTop: 60, - marginBottom: 20, + margin: '24px 0 27px', }); export const tagSearchWrapper = style({ @@ -16,7 +30,7 @@ export const tagSearchWrapper = style({ }); export const subTitle = style({ - marginTop: 28, + marginTop: 24, }); export const searchResultTitle = style({ diff --git a/src/router/App.tsx b/src/router/App.tsx index 86b3da9a..c29cad8a 100644 --- a/src/router/App.tsx +++ b/src/router/App.tsx @@ -3,25 +3,23 @@ import { Suspense } from 'react'; import { Outlet } from 'react-router-dom'; import { ErrorBoundary, ErrorComponent, Loading } from '@/components/Common'; -import { MinimalLayout, DefaultLayout } from '@/components/Layout'; +import { Layout } from '@/components/Layout'; import { useRouteChangeTracker } from '@/hooks/common'; interface AppProps { - layout?: 'default' | 'minimal'; + hasLayout?: boolean; } -const App = ({ layout = 'default' }: AppProps) => { +const App = ({ hasLayout = false }: AppProps) => { const { reset } = useQueryErrorResetBoundary(); useRouteChangeTracker(); - if (layout === 'minimal') { + if (!hasLayout) { return ( }> - - - + ); @@ -30,9 +28,9 @@ const App = ({ layout = 'default' }: AppProps) => { return ( }> - + - + ); diff --git a/src/router/index.tsx b/src/router/index.tsx index d09f5b14..acd76684 100644 --- a/src/router/index.tsx +++ b/src/router/index.tsx @@ -4,12 +4,11 @@ import App from './App'; import { AuthLayout } from '@/components/Layout'; import { PATH } from '@/constants/path'; -import CategoryProvider from '@/contexts/CategoryContext'; import ReviewFormProvider from '@/contexts/ReviewFormContext'; import NotFoundPage from '@/pages/NotFoundPage'; const router = createBrowserRouter([ - /** 로그인이 안되었다면 로그인 페이지로 리다이렉트 */ + /** 멤버 접근 페이지 */ { path: '/', element: ( @@ -53,18 +52,6 @@ const router = createBrowserRouter([ return { Component: MemberRecipePage }; }, }, - ], - }, - /** 로그인이 안되었다면 로그인 페이지로 리다이렉트하면서 헤더만 있는 레이아웃 */ - { - path: '/', - element: ( - - - - ), - errorElement: , - children: [ { path: `${PATH.RECIPE}/:recipeId`, async lazy() { @@ -76,14 +63,10 @@ const router = createBrowserRouter([ }, ], }, - /** 헤더와 네비게이션 바가 있는 기본 레이아웃 */ + /** 레이아웃이 있는 페이지 */ { path: '/', - element: ( - - - - ), + element: , errorElement: , children: [ { @@ -118,10 +101,10 @@ const router = createBrowserRouter([ }, ], }, - /** 헤더, 네비게이션 모두 없는 레이아웃 */ + /** 로그인 페이지 */ { path: '/', - element: , + element: , errorElement: , children: [ { @@ -140,14 +123,10 @@ const router = createBrowserRouter([ }, ], }, - /** 네비게이션과 헤더(검색 아이콘이 없는)가 있는 레이아웃 */ + /** 상품 페이지 */ { path: '/', - element: ( - - - - ), + element: , errorElement: , children: [ { @@ -159,18 +138,6 @@ const router = createBrowserRouter([ return { Component: ProductListPage }; }, }, - ], - }, - /** 네비게이션 바 없이 헤더만 있는 레이아웃 */ - { - path: '/', - element: ( - - - - ), - errorElement: , - children: [ { path: `${PATH.PRODUCT_LIST}/detail/:productId`, async lazy() { @@ -180,6 +147,14 @@ const router = createBrowserRouter([ return { Component: ProductDetailPage }; }, }, + ], + }, + /** 검색 페이지 */ + { + path: '/', + element: , + errorElement: , + children: [ { path: PATH.SEARCH, async lazy() { @@ -216,11 +191,12 @@ const router = createBrowserRouter([ }, ], }, + /** 상품 리뷰 페이지 */ { path: '/', element: ( - + ), errorElement: , diff --git a/src/styles/reset.css.ts b/src/styles/reset.css.ts index dfbcb014..f083a548 100644 --- a/src/styles/reset.css.ts +++ b/src/styles/reset.css.ts @@ -4,7 +4,7 @@ globalStyle('#root', { display: 'flex', flexDirection: 'column', height: '100vh', - maxWidth: 400, + maxWidth: 440, margin: '0 auto', lineHeight: 1.4, }); diff --git a/src/types/recipe.ts b/src/types/recipe.ts index 1e5179cd..ce26dbe8 100644 --- a/src/types/recipe.ts +++ b/src/types/recipe.ts @@ -15,6 +15,7 @@ export interface RecipeDetail extends Recipe { totalPrice: number; favorite: boolean; favoriteCount: number; + products: RecipeProduct[]; } export interface Recipe {