Skip to content

Commit 46049e7

Browse files
EunbinJungmtm-git1018ahk0413
committed
Style/community#18 (#62)
* [chore] 메타데이터 추가 * [fix] 수정 * [fix] 스크롤 수정 * [fix] 레이아웃 수정 * [style] 커뮤니티 상세 ui * [style]레시피페이지 * [style]recipe페이지 * [style]칵테일페이지 * [style]페이지 수정사항 수정 * [style]레시피페이지 * [style]recipe페이지 * [feat]selectBox컴포넌트 다양화 * [style] select박스 정렬 * [style] 수정사항 반영 * [style] 수정 * [style]recipe페이지 * [feat]selectBox컴포넌트 다양화 * [feat] StarBg컴포넌트 * [feat] 라벨 컴포넌트 분리 * [feat]selectBox컴포넌트 다양화 * [design] 채팅 폼 ui * [feat] 레이아웃 footer 로직 추가 * [style] 취향 추천페이지 작업 * [style] layout 양옆 padding 값 수정 * [style] 라디오, input, 쑤리 챗, 나의 챗 컴포넌트 작업 * [feat] keep 버튼 이벤트 전파 막기 추가 * [feat] scrollTopbtn 취향추천 페이지에서 none 처리 * [style] 카드 컴포넌트 구현 완료 * [feat] 스크롤 탑 버튼 throttle 추가 * [design] 헤더 아이콘 hover / 페이지 이동시 추가 * [fix] 헤더아이콘 경고 이슈 해결 * [design] toast 줄바꿈 예시 추가 * [feat] auth 관련 store 생성 * [feat] 로그인 상태에 따라 로직 추가 * [feat] 로그인 시 전페이지로 이동하도록 로직 추가 / 모달 store 추가 * [feat] 소셜로그인 로직 수정 (api 대기중) * [text] 로그인 기능구현중 테스트 * [style] 불필요한 코드 제거 * [style] 커뮤니티 상세페이지 UI * [fix] 수정 * [fix] 수정 * [style] 별배경 추가 * [refactor] 닫힐때 애니메이션 나오게 수정 * [refactor] createPortal 추가 * [feat] 로그인 기능 구현 (#63) - 로그아웃 이슈는 추후 논의 필요 * [refactor] modal store 삭제 * [feat] 쿠키 저장 구현중... * [feat] 로그인 쿠키저장하여 이전페이지 이동 완료 * [docs] 의미없는 폴더 삭제 * [chore] next.config.ts파일 * [fix] 클라이언트 페이지 선언 * [fix] 빌드에러 * [fix] z-index 주기 * 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] 의미없는 폴더 삭제 * 수정 * 수정 * 오류 해결 --------- Co-authored-by: mtm1018 <[email protected]> Co-authored-by: ahk0413 <[email protected]> Co-authored-by: ahk0413 <[email protected]>
1 parent 369d577 commit 46049e7

File tree

14 files changed

+334
-0
lines changed

14 files changed

+334
-0
lines changed

‎src/app/recipe/Accordion.tsx‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
'use client';
2+
3+
import SelectBox from '@/shared/components/InputBox/SelectBox';
4+
5+
const selectOption = [
6+
{
7+
id: 'abv',
8+
option: ['', '약한 도수', '가벼운 도수', '중간 도수', '센 도수', '매우 센 도수'],
9+
title: '도수',
10+
},
11+
{
12+
id: 'base',
13+
option: ['', '위스키', '진', '럼', '보드카', '데킬라', '리큐르'],
14+
title: '베이스',
15+
},
16+
{
17+
id: 'glass',
18+
option: ['', '클래식', '롱', '슈터', '숏'],
19+
title: '글라스',
20+
},
21+
];
22+
23+
function Accordion() {
24+
return (
25+
<ul className="flex gap-6">
26+
{selectOption.map(({ id, option, title }, i) => {
27+
return (
28+
<li key={i}>
29+
<SelectBox option={option} title={title} id={id} groupKey="filter" />
30+
</li>
31+
);
32+
})}
33+
</ul>
34+
);
35+
}
36+
export default Accordion;

‎src/domains/community/main/detail/CocktailTag.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Tag from '@/shared/assets/icons/tag_30.svg';
2+
3+
function CocktailTag() {
4+
return (
5+
<div
6+
role="list"
7+
className="flex sm:gap-5 gap-2 sm:flex-row flex-col justify-center sm:items-center items-start sm:mb-0 mb-2 transition-all ease-in"
8+
>
9+
<p className="flex gap-1 items-center justify-center text-sm text-secondary">
10+
<Tag />
11+
칵테일태그
12+
</p>
13+
<ul className="flex text-sm gap-2 items-center text-primary font-light">
14+
<li className="bg-[#FFE4E6] px-2 py-[1px] rounded-md">올드패션</li>
15+
<li className="bg-[#EDE9FE] px-2 py-[1px] rounded-md">미도리 샤워</li>
16+
</ul>
17+
</div>
18+
);
19+
}
20+
21+
export default CocktailTag;

‎src/domains/community/main/detail/DetailContent.tsx‎

Lines changed: 44 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,44 @@
1+
import Image from 'next/image';
2+
import prePost from '@/shared/assets/images/prepost_img.webp';
3+
import PostInfo from '../PostInfo';
4+
import CocktailTag from './CocktailTag';
5+
import DetailTabMobile from './tab/DetailTabMobile';
6+
7+
function DetailContent() {
8+
return (
9+
<section className="mt-5 flex flex-col items-start w-full gap-3 border-b-1 border-gray pb-10 relative">
10+
<figure className="flex items-center justify-center sm:justify-start mb-5 max-h-120">
11+
<Image src={prePost} alt="더미 이미지" height={600} className="sm:w-auto w-full" />
12+
</figure>
13+
<article className="flex flex-col gap-1 mb-5">
14+
<p>내용은 이거입니다 하하하</p>
15+
<p>그런가요 안녕하세요</p>
16+
<br />
17+
<p>글입니다다다다다다다다다다다다</p>
18+
<p>내용은 이거입니다 하하하</p>
19+
<p>그런가요 안녕하세요</p>
20+
<br />
21+
<p>글입니다다다다다다다다다다다다</p>
22+
<p>내용은 이거입니다 하하하</p>
23+
<p>그런가요 안녕하세요</p>
24+
<br />
25+
<p>글입니다다다다다다다다다다다다</p>
26+
<p>내용은 이거입니다 하하하</p>
27+
<p>그런가요 안녕하세요</p>
28+
<br />
29+
<p>글입니다다다다다다다다다다다다</p>
30+
<p>내용은 이거입니다 하하하</p>
31+
<p>그런가요 안녕하세요</p>
32+
<br />
33+
<p>글입니다다다다다다다다다다다다</p>
34+
</article>
35+
<CocktailTag />
36+
<PostInfo />
37+
<div className="block md:hidden mt-2">
38+
<DetailTabMobile />
39+
</div>
40+
</section>
41+
);
42+
}
43+
44+
export default DetailContent;

‎src/domains/community/main/detail/DetailHeader.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import Label from '../../label/Label';
2+
import EditDelete from './EditDelete';
3+
4+
function DetailHeader() {
5+
return (
6+
<section className="mt-15 flex justify-between items-center">
7+
<Label title="팁" />
8+
<EditDelete use="post" />
9+
</section>
10+
);
11+
}
12+
13+
export default DetailHeader;

‎src/domains/community/main/detail/DetailTitle.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
import Profile from './Profile';
2+
3+
function DetailTitle() {
4+
return (
5+
<section className="flex flex-col gap-4 mt-3">
6+
<h1 className="sm:text-3xl text-2xl">칵테일 만들 때 준비물</h1>
7+
<Profile />
8+
</section>
9+
);
10+
}
11+
12+
export default DetailTitle;

‎src/domains/community/main/detail/EditDelete.tsx‎

Lines changed: 25 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,25 @@
1+
function EditDelete({ use }: { use: 'post' | 'comment' }) {
2+
return (
3+
<div
4+
role="group"
5+
aria-label="게시글 수정 및 삭제"
6+
className="flex sm:gap-3 gap-1 sm:text-[14px] text-[12px] text-gray"
7+
>
8+
<button
9+
type="button"
10+
className={`hover:text-white transition-colors ${use === 'comment' ? ' underline underline-offset-4' : ''}`}
11+
>
12+
수정
13+
</button>
14+
<span aria-hidden="true">|</span>
15+
<button
16+
type="button"
17+
className={`hover:text-white transition-colors ${use === 'comment' ? ' underline underline-offset-4' : ''}`}
18+
>
19+
삭제
20+
</button>
21+
</div>
22+
);
23+
}
24+
25+
export default EditDelete;

‎src/domains/community/main/detail/Profile.tsx‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
function Profile() {
2+
return (
3+
<div className="flex gap-2 items-center justify-start">
4+
<div className="w-7 h-7 rounded-full bg-secondary" aria-label="작성자 칵테일 아이콘"></div>
5+
<span aria-label="작성자 이름" className="text-sm">
6+
실버븬
7+
</span>
8+
</div>
9+
);
10+
}
11+
12+
export default Profile;

‎src/domains/community/main/detail/comment/CommentHeader.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
import EditDelete from '../EditDelete';
2+
import Profile from '../Profile';
3+
4+
function CommentHeader() {
5+
return (
6+
<div className="flex items-center justify-between">
7+
<div className="flex items-center gap-3">
8+
<Profile />
9+
<span className="text-sm">|</span>
10+
<p className="text-sm text-gray">3분 전</p>
11+
</div>
12+
<EditDelete use="comment" />
13+
</div>
14+
);
15+
}
16+
17+
export default CommentHeader;

‎src/domains/community/main/detail/comment/CommentList.tsx‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
import CommentHeader from './CommentHeader';
2+
3+
function CommentList() {
4+
return (
5+
<ul aria-label="댓글 목록" className="flex flex-col mt-6">
6+
<li className="border-b-1 border-gray py-3">
7+
<article>
8+
<CommentHeader />
9+
<div className="mt-4">
10+
<p>정말 대단하시네요</p>
11+
</div>
12+
</article>
13+
</li>
14+
<li className="border-b-1 border-gray py-3">
15+
<article>
16+
<CommentHeader />
17+
<div className="mt-4">
18+
<p>정말 대단하시네요</p>
19+
</div>
20+
</article>
21+
</li>
22+
</ul>
23+
);
24+
}
25+
26+
export default CommentList;

‎src/domains/community/main/detail/comment/DetailComment.tsx‎

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import Button from '@/shared/components/button/Button';
2+
import Input from '../../../InputBox/Input';
3+
4+
function DetailComment() {
5+
return (
6+
<section aria-label="댓글" className="mt-6 w-full">
7+
<div className="w-full relative mt-5">
8+
<Input placeholder="댓글로 의견을 남겨주세요" id="community-comment" className="w-full" />
9+
<Button
10+
color="purple"
11+
className="absolute right-2 top-1/2 -translate-y-1/2 w-13 h-7 text-sm pt-1.5"
12+
size="auto"
13+
>
14+
입력
15+
</Button>
16+
</div>
17+
</section>
18+
);
19+
}
20+
21+
export default DetailComment;

0 commit comments

Comments
 (0)