diff --git a/src/app/recipe/[id]/page.tsx b/src/app/recipe/[id]/page.tsx index 9d89ac4..13e9e9e 100644 --- a/src/app/recipe/[id]/page.tsx +++ b/src/app/recipe/[id]/page.tsx @@ -1,9 +1,11 @@ +import DetailMain from '@/domains/recipe/details/DetailMain'; import StarBg from '@/shared/components/starBg/StarBg'; function page() { return ( -
- +
+ +
); } diff --git a/src/app/recipe/page.tsx b/src/app/recipe/page.tsx index 9f5e417..1103019 100644 --- a/src/app/recipe/page.tsx +++ b/src/app/recipe/page.tsx @@ -1,10 +1,10 @@ import PageHeader from '@/shared/components/pageHeader/PageHeader'; import { Metadata } from 'next'; -import Glass from '@/shared/assets/images/recipe_page_header.webp'; import SelectBox from '@/shared/components/InputBox/SelectBox'; import Input from '@/shared/components/InputBox/Input'; -import CocktailList from '@/shared/components/recipePage/cocktailList/CocktailList'; -import Accordion from './components/Accordion'; + +import Accordion from '../../domains/recipe/components/main/Accordion'; +import CocktailList from '@/domains/recipe/CocktailList'; export const metadata: Metadata = { title: 'SSOUL | 칵테일레시피', @@ -15,11 +15,7 @@ function Page() { return (
- +
diff --git a/src/shared/components/recipePage/cocktailCard/CocktailCard.tsx b/src/domains/recipe/CocktailCard.tsx similarity index 100% rename from src/shared/components/recipePage/cocktailCard/CocktailCard.tsx rename to src/domains/recipe/CocktailCard.tsx diff --git a/src/shared/components/recipePage/cocktailList/CocktailList.tsx b/src/domains/recipe/CocktailList.tsx similarity index 93% rename from src/shared/components/recipePage/cocktailList/CocktailList.tsx rename to src/domains/recipe/CocktailList.tsx index 2c5ede9..1b0200a 100644 --- a/src/shared/components/recipePage/cocktailList/CocktailList.tsx +++ b/src/domains/recipe/CocktailList.tsx @@ -1,5 +1,5 @@ 'use client'; -import CocktailCard from '../cocktailCard/CocktailCard'; +import CocktailCard from './CocktailCard'; function CocktailList() { // const [data,setData] = useState([]) diff --git a/src/domains/recipe/components/details/BackBtn.tsx b/src/domains/recipe/components/details/BackBtn.tsx new file mode 100644 index 0000000..de2d467 --- /dev/null +++ b/src/domains/recipe/components/details/BackBtn.tsx @@ -0,0 +1,15 @@ +'use client'; +import Back from '@/shared/assets/icons/back_36.svg'; +import { useRouter } from 'next/navigation'; + +function BackBtn() { + const router = useRouter(); + console.log(router); + + return ( + + ); +} +export default BackBtn; diff --git a/src/app/recipe/components/Accordion.tsx b/src/domains/recipe/components/main/Accordion.tsx similarity index 100% rename from src/app/recipe/components/Accordion.tsx rename to src/domains/recipe/components/main/Accordion.tsx diff --git a/src/domains/recipe/details/DetailItem.tsx b/src/domains/recipe/details/DetailItem.tsx new file mode 100644 index 0000000..6c44a27 --- /dev/null +++ b/src/domains/recipe/details/DetailItem.tsx @@ -0,0 +1,73 @@ +import PostLabel from '@/shared/components/community/PostLabel'; +import Image from 'next/image'; +import Short from '@/shared/assets/icons/short_36.svg'; +import Example from '@/shared/assets/images/dummy/exampleCocktail.png'; + +function DetailItem() { + return ( +
+
+
+ + + +

+ Old Fashioned +

+

+ 올드 패션드 +

+
+ +

+ 쿠바 아바나의 전설적인 바 엘 플로리디타(El Floridita).이곳에서 노벨문학상 작가 어니스트 + 헤밍웨이가 즐겨 찾던 특별한 한 잔이 탄생했습니다. +

+ + +
+ +
+ +
+ +
+
+
+

도수

+ | +
+
+

24.8%

+
+
+
+
+
+
+
+

글래스 타입

+ | +
+
+ +

숏 드링크

+
+
+
+
+ ); +} +export default DetailItem; diff --git a/src/domains/recipe/details/DetailMain.tsx b/src/domains/recipe/details/DetailMain.tsx new file mode 100644 index 0000000..ee30a44 --- /dev/null +++ b/src/domains/recipe/details/DetailMain.tsx @@ -0,0 +1,43 @@ +import DetailItem from './DetailItem'; +import DetailRecipe from './DetailRecipe'; +import DetailsHeader from './DetailsHeader'; +import SsuryShake from '@/shared/assets/ssury/ssury_make.webp'; +import SsuryDrink from '@/shared/assets/ssury/ssury_drink.webp'; +import Image from 'next/image'; + +function DetailMain() { + return ( +
+ + +
+ + + +
+ +
+
+
+ +

레시피

+
+
+ +
+ +
+
+
+ +

추천리스트

+
+
+ {/* 여기에 컴포넌트 */} +
+ +
{/* 여기에 댓글 컴포넌트 */}
+
+ ); +} +export default DetailMain; diff --git a/src/domains/recipe/details/DetailRecipe.tsx b/src/domains/recipe/details/DetailRecipe.tsx new file mode 100644 index 0000000..ed6decd --- /dev/null +++ b/src/domains/recipe/details/DetailRecipe.tsx @@ -0,0 +1,36 @@ +function DetailRecipe() { + return ( +
+
+

재료

+
    +
  • + 럼 1 1/2oz | 90ml +
    • +
  • + 심플시럽 1/2oz | 30ml +
    • +
  • + 라임 1/2개 +
    • +
  • + 자몽 1/2개 +
    • +
+
+ + +
+

만드는 법

+
    +
  1. 셰이커에 라임즙을 착즙기로 짜 넣습니다
    2. +
  2. 셰이커에 자몽즙을 착즙기로 짜 넣습니다
    3. +
  3. 셰이커에 재료를 넣습니다
    4. +
  4. 셰이킹 후 잔에 따라줍니다
    5. +
+
+ +
+ ); +} +export default DetailRecipe; diff --git a/src/domains/recipe/details/DetailsHeader.tsx b/src/domains/recipe/details/DetailsHeader.tsx new file mode 100644 index 0000000..84911ef --- /dev/null +++ b/src/domains/recipe/details/DetailsHeader.tsx @@ -0,0 +1,16 @@ +import Share from '@/shared/components/share/Share'; +import Keep from '@/shared/components/keep/Keep'; +import BackBtn from '../components/details/BackBtn'; + +function DetailsHeader() { + return ( +
+ +
+ + +
+
+ ); +} +export default DetailsHeader; diff --git a/src/shared/assets/icons/back_36.svg b/src/shared/assets/icons/back_36.svg new file mode 100644 index 0000000..d31c1cc --- /dev/null +++ b/src/shared/assets/icons/back_36.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/assets/icons/classic_36.svg b/src/shared/assets/icons/classic_36.svg new file mode 100644 index 0000000..a7abf3d --- /dev/null +++ b/src/shared/assets/icons/classic_36.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/assets/icons/long_36.svg b/src/shared/assets/icons/long_36.svg new file mode 100644 index 0000000..f3250ac --- /dev/null +++ b/src/shared/assets/icons/long_36.svg @@ -0,0 +1,4 @@ + + + + diff --git a/src/shared/assets/icons/shooter_36.svg b/src/shared/assets/icons/shooter_36.svg new file mode 100644 index 0000000..e33c72e --- /dev/null +++ b/src/shared/assets/icons/shooter_36.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/assets/icons/short_36.svg b/src/shared/assets/icons/short_36.svg new file mode 100644 index 0000000..7046e11 --- /dev/null +++ b/src/shared/assets/icons/short_36.svg @@ -0,0 +1,3 @@ + + + diff --git a/src/shared/assets/images/community_page_header.webp b/src/shared/assets/images/community_page_header.webp deleted file mode 100644 index 4ef858a..0000000 Binary files a/src/shared/assets/images/community_page_header.webp and /dev/null differ diff --git a/src/shared/assets/images/recipe_page_header.webp b/src/shared/assets/images/recipe_page_header.webp deleted file mode 100644 index 1bdbf4f..0000000 Binary files a/src/shared/assets/images/recipe_page_header.webp and /dev/null differ diff --git a/src/shared/components/community/CommunityHeader.tsx b/src/shared/components/community/CommunityHeader.tsx index 956376d..49d291d 100644 --- a/src/shared/components/community/CommunityHeader.tsx +++ b/src/shared/components/community/CommunityHeader.tsx @@ -1,10 +1,9 @@ import PageHeader from '../pageHeader/PageHeader'; -import headerImg from '@/shared/assets/images/community_page_header.webp'; function CommunityHeader() { return (
- +
); } diff --git a/src/shared/components/keep/Keep.tsx b/src/shared/components/keep/Keep.tsx index fb7fd18..21352a3 100644 --- a/src/shared/components/keep/Keep.tsx +++ b/src/shared/components/keep/Keep.tsx @@ -1,3 +1,4 @@ +'use client'; import KeepIcon from '@/shared/assets/icons/keep_36.svg'; import KeepIconActive from '@/shared/assets/icons/keep_active_36.svg'; import { useState } from 'react'; diff --git a/src/shared/components/pageHeader/PageHeader.tsx b/src/shared/components/pageHeader/PageHeader.tsx index eb0a654..27a3825 100644 --- a/src/shared/components/pageHeader/PageHeader.tsx +++ b/src/shared/components/pageHeader/PageHeader.tsx @@ -1,17 +1,14 @@ -import Image, { StaticImageData } from 'next/image'; import StarBg from '../starBg/StarBg'; interface Props { - src: StaticImageData; title: string; description: string; } -function PageHeader({ src, title, description }: Props) { +function PageHeader({ title, description }: Props) { return (
-

{title} diff --git a/src/shared/components/share/Share.tsx b/src/shared/components/share/Share.tsx index f1f292f..9a7b549 100644 --- a/src/shared/components/share/Share.tsx +++ b/src/shared/components/share/Share.tsx @@ -15,8 +15,8 @@ function Share({ onClick, variants = 'default', title, content }: Props) { type="button" className={ variants == 'community' - ? 'w-13.75 h-13.75 flex-center border-1 border-white rounded-full' - : '' + ? 'w-13.75 h-13.75 flex-center border-1 border-white rounded-full z-1' + : 'z-1' } aria-label="공유하기" onClick={onClick}