Skip to content

Commit bef0686

Browse files
EunbinJungEunbinJung
committed
Squashed commit of the following:
commit 643a5f2 Author: mtm-git1018 <[email protected]> Date: Fri Sep 26 09:41:04 2025 +0900 Feat/칵테일 상세페이지#17 (#59) * [style]레시피 상세페이지 * [style]레시피 상세페이지 헤더 * [style]추천리스트 * [style]레시피 상세페이지 * [style]칵테일 상세페이지 * [style] 상세페이지 컴포넌트 정리 * [fix] 경로수정 * [refactor] PageHeader 수정 commit 38cde08 Author: ahk0413 <[email protected]> Date: Fri Sep 26 00:04:49 2025 +0900 [feat] 로그인 기능 구현 (#63) - 로그아웃 이슈는 추후 논의 필요 * [refactor] modal store 삭제 * [feat] 쿠키 저장 구현중... * [feat] 로그인 쿠키저장하여 이전페이지 이동 완료 * [docs] 의미없는 폴더 삭제
1 parent f60b9b4 commit bef0686

File tree

19 files changed

+210
-15
lines changed

19 files changed

+210
-15
lines changed

‎src/app/recipe/[id]/page.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,11 @@
1+
import DetailMain from '@/domains/recipe/details/DetailMain';
12
import StarBg from '@/shared/components/starBg/StarBg';
23

34
function page() {
45
return (
5-
<div className="w-full">
6-
<StarBg className="h-200 lg:h-202" />
6+
<div className="w-full relative">
7+
<StarBg className="absolute top-0 left-0 h-200 lg:h-200" />
8+
<DetailMain />
79
</div>
810
);
911
}

‎src/app/recipe/page.tsx‎

Lines changed: 4 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import PageHeader from '@/shared/components/pageHeader/PageHeader';
22
import { Metadata } from 'next';
3-
import Glass from '@/shared/assets/images/recipe_page_header.webp';
43
import SelectBox from '@/shared/components/InputBox/SelectBox';
54
import Input from '@/shared/components/InputBox/Input';
6-
import CocktailList from '@/shared/components/recipePage/cocktailList/CocktailList';
7-
import Accordion from './components/Accordion';
5+
6+
import Accordion from '../../domains/recipe/components/main/Accordion';
7+
import CocktailList from '@/domains/recipe/CocktailList';
88

99
export const metadata: Metadata = {
1010
title: 'SSOUL | 칵테일레시피',
@@ -15,11 +15,7 @@ function Page() {
1515
return (
1616
<div className="w-full">
1717
<section>
18-
<PageHeader
19-
src={Glass}
20-
title="Cocktail Recipes"
21-
description="다양하고 재밌는 칵테일 레시피"
22-
/>
18+
<PageHeader title="Cocktail Recipes" description="다양하고 재밌는 칵테일 레시피" />
2319
</section>
2420
<div className="page-layout max-w-1224 mt-6">
2521
<section className="flex flex-col-reverse items-start gap-6 md:flex-row md:justify-between md:items-center ">

‎src/shared/components/recipePage/cocktailCard/CocktailCard.tsx‎ renamed to ‎src/domains/recipe/CocktailCard.tsx‎

File renamed without changes.

‎src/shared/components/recipePage/cocktailList/CocktailList.tsx‎ renamed to ‎src/domains/recipe/CocktailList.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
'use client';
2-
import CocktailCard from '../cocktailCard/CocktailCard';
2+
import CocktailCard from './CocktailCard';
33

44
function CocktailList() {
55
// const [data,setData] = useState([])

‎src/domains/recipe/components/details/BackBtn.tsx‎

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
'use client';
2+
import Back from '@/shared/assets/icons/back_36.svg';
3+
import { useRouter } from 'next/navigation';
4+
5+
function BackBtn() {
6+
const router = useRouter();
7+
console.log(router);
8+
9+
return (
10+
<button type="button" className="z-1" onClick={router.back} aria-label="뒤로가기">
11+
<Back />
12+
</button>
13+
);
14+
}
15+
export default BackBtn;

‎src/app/recipe/components/Accordion.tsx‎ renamed to ‎src/domains/recipe/components/main/Accordion.tsx‎

File renamed without changes.

‎src/domains/recipe/details/DetailItem.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import PostLabel from '@/shared/components/community/PostLabel';
2+
import Image from 'next/image';
3+
import Short from '@/shared/assets/icons/short_36.svg';
4+
import Example from '@/shared/assets/images/dummy/exampleCocktail.png';
5+
6+
function DetailItem() {
7+
return (
8+
<div className="flex flex-col items-center">
9+
<div
10+
className="flex flex-col gap-3 relative md:flex-row md:justify-between
11+
md:ml-15 md:w-150
12+
lg:ml-30 lg:w-187.5 h-50"
13+
>
14+
<div className="flex flex-col gap-1 items-center md:items-end">
15+
<span>
16+
<PostLabel title="레시피" />
17+
</span>
18+
<h2 className="font-serif font-bold text-3xl lg:text-4xl text-secondary">
19+
Old Fashioned
20+
</h2>
21+
<h2 className="font-serif font-bold text-right text-xl lg:text-4xl text-secondary">
22+
올드 패션드
23+
</h2>
24+
</div>
25+
26+
<p className="w-70 text-base mr-5 md:text-sm md:mr-0 lg:text-base md:self-end text-secondary md:w-70 lg:w-100">
27+
쿠바 아바나의 전설적인 바 엘 플로리디타(El Floridita).이곳에서 노벨문학상 작가 어니스트
28+
헤밍웨이가 즐겨 찾던 특별한 한 잔이 탄생했습니다.
29+
</p>
30+
<span className="absolute w-0.5 h-11 -bottom-15 left-1/2 -translate-x-1/2 z-2 bg-secondary md:bg-transparent"></span>
31+
<span className="absolute w-3 h-3 rounded-full -bottom-16 z-2 left-1/2 -translate-x-1/2 bg-secondary md:bg-transparent"></span>
32+
</div>
33+
34+
<div
35+
className="rounded-2xl mt-12
36+
[filter:drop-shadow(0_0_20px_rgba(255,255,255,0.3))]
37+
"
38+
>
39+
<Image src={Example} alt="" width="300" height="375" />
40+
</div>
41+
42+
<dl className="flex flex-col mt-5 gap-3 w-75">
43+
<div className="flex gap-3 items-center">
44+
<dt className="flex gap-2">
45+
<p className="text-base text-nowrap">도수</p>
46+
<span>|</span>
47+
</dt>
48+
<dd className="flex gap-3 items-center">
49+
<p className="text-xs">24.8%</p>
50+
<div className="w-49 h-3 rounded-full overflow-hidden border-[0.5px] border-gray relative">
51+
<div
52+
className="absolute top-0 left-0 w-10 h-3
53+
bg-linear-to-r from-[#FFCA8D] to-[#FA2424]
54+
"
55+
></div>
56+
</div>
57+
</dd>
58+
</div>
59+
<div className="flex items-center gap-3">
60+
<dt className="flex gap-2 items-center">
61+
<p>글래스 타입</p>
62+
<span>|</span>
63+
</dt>
64+
<dd className="flex items-center gap-2">
65+
<Short />
66+
<p>숏 드링크</p>
67+
</dd>
68+
</div>
69+
</dl>
70+
</div>
71+
);
72+
}
73+
export default DetailItem;

‎src/domains/recipe/details/DetailMain.tsx‎

Lines changed: 43 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
import DetailItem from './DetailItem';
2+
import DetailRecipe from './DetailRecipe';
3+
import DetailsHeader from './DetailsHeader';
4+
import SsuryShake from '@/shared/assets/ssury/ssury_make.webp';
5+
import SsuryDrink from '@/shared/assets/ssury/ssury_drink.webp';
6+
import Image from 'next/image';
7+
8+
function DetailMain() {
9+
return (
10+
<div className="max-w-1024 page-layout">
11+
<DetailsHeader />
12+
13+
<article className="flex flex-col items-center mt-4 lg:mt-0">
14+
<span className="md:bg-secondary w-1 h-100 -translate-y-19 absolute top-0 left-1/2 -translate-x-1/2 md: z-2"></span>
15+
<span className="h-3 w-3 rounded-full absolute top-80 left-1/2 -translate-x-1/2 z-99 md:bg-secondary"></span>
16+
<DetailItem />
17+
</article>
18+
19+
<section className="mt-20 flex flex-col gap-5">
20+
<div className="border-b-1 h-18 border-white">
21+
<div className="flex items-center gap-3">
22+
<Image src={SsuryShake} alt="" width="48" height="48" />
23+
<h3 className="text-3xl font-bold">레시피</h3>
24+
</div>
25+
</div>
26+
<DetailRecipe />
27+
</section>
28+
29+
<section className="mt-20">
30+
<div className="border-b-1 h-18 border-white">
31+
<div className="flex items-center gap-3">
32+
<Image src={SsuryDrink} alt="" width="48" height="48" />
33+
<h3 className="text-3xl font-bold">추천리스트</h3>
34+
</div>
35+
</div>
36+
{/* 여기에 컴포넌트 */}
37+
</section>
38+
39+
<section>{/* 여기에 댓글 컴포넌트 */}</section>
40+
</div>
41+
);
42+
}
43+
export default DetailMain;

‎src/domains/recipe/details/DetailRecipe.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
function DetailRecipe() {
2+
return (
3+
<div className="flex flex-col md:flex-row px-5 gap-5">
4+
<article className="flex flex-col gap-4 w-[50%]">
5+
<h4 className="text-2xl font-bold">재료</h4>
6+
<ul className="flex flex-col gap-2">
7+
<li className="text-lg">
8+
럼 <span className="text-sm text-white/80">1 1/2oz | 90ml</span>
9+
</li>
10+
<li className="text-lg">
11+
심플시럽 <span className="text-sm text-white/80">1/2oz | 30ml</span>
12+
</li>
13+
<li className="text-lg">
14+
라임 <span className="text-sm text-white/80">1/2개</span>
15+
</li>
16+
<li className="text-lg">
17+
자몽 <span className="text-sm text-white/80">1/2개</span>
18+
</li>
19+
</ul>
20+
</article>
21+
22+
<span className="border-t-1 pt-5 md:border-l-1 md:border-t-0 md:px-10 border-white">
23+
<article className="flex flex-col gap-4 ">
24+
<h4 className="text-2xl font-bold">만드는 법</h4>
25+
<ol className="flex flex-col gap-2 pl-4 list-decimal">
26+
<li>셰이커에 라임즙을 착즙기로 짜 넣습니다</li>
27+
<li>셰이커에 자몽즙을 착즙기로 짜 넣습니다</li>
28+
<li>셰이커에 재료를 넣습니다</li>
29+
<li>셰이킹 후 잔에 따라줍니다</li>
30+
</ol>
31+
</article>
32+
</span>
33+
</div>
34+
);
35+
}
36+
export default DetailRecipe;

‎src/domains/recipe/details/DetailsHeader.tsx‎

Lines changed: 16 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
import Share from '@/shared/components/share/Share';
2+
import Keep from '@/shared/components/keep/Keep';
3+
import BackBtn from '../components/details/BackBtn';
4+
5+
function DetailsHeader() {
6+
return (
7+
<div className="mt-4 flex items-center justify-between ">
8+
<BackBtn />
9+
<div className="flex items-center gap-3">
10+
<Share />
11+
<Keep />
12+
</div>
13+
</div>
14+
);
15+
}
16+
export default DetailsHeader;

0 commit comments

Comments
 (0)