Skip to content

Commit 9b2f69d

Browse files
EunbinJungmtm-git1018ahk0413
authored
Style/community#18 (#66)
* [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] 의미없는 폴더 삭제 * 수정 * 수정 * 오류 해결 * [style] 간단 css 수정 * [docs] 폴더정리 * [fix] 경로수정 * [fix]경로수정 * [fix]경로수정 * [fix]경로수정 * [chore] format * [fix] 경로 수정 * [chore] 폴더구조 변경 * [refactor] react-use 사용으로 스크롤 이벤트 최적화 * [fix] 의존성 추가 * 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]> * [docs] 폴더정리 * [fix]경로수정 * [fix]경로수정 * 경로수정 * 폴더오류 * 오류수정 --------- Co-authored-by: mtm1018 <[email protected]> Co-authored-by: ahk0413 <[email protected]> Co-authored-by: ahk0413 <[email protected]>
1 parent eca2a15 commit 9b2f69d

File tree

12 files changed

+466
-67
lines changed

12 files changed

+466
-67
lines changed

‎package-lock.json‎

Lines changed: 273 additions & 3 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
"next": "15.5.3",
2525
"react": "19.1.0",
2626
"react-dom": "19.1.0",
27-
"react-hot-toast": "^2.6.0"
27+
"react-hot-toast": "^2.6.0",
28+
"react-use": "^17.6.0"
2829
},
2930
"devDependencies": {
3031
"@eslint/eslintrc": "^3",

‎src/app/community/page.tsx‎

Lines changed: 6 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,9 @@
1-
import CommunityFilter from '@/domains/community/CommunityFilter';
2-
import CommunityTab from '@/domains/community/CommunityTab';
3-
import PostCard from '@/domains/community/PostCard';
4-
import WriteBtn from '@/domains/community/WriteBtn';
1+
2+
import CommunityFilter from '@/domains/community/main/CommunityFilter';
3+
import CommunityTab from '@/domains/community/main/CommunityTab';
4+
import PostCard from '@/domains/community/main/PostCard';
5+
import WriteBtn from '@/domains/community/main/WriteBtn';
6+
57
import PageHeader from '@/domains/shared/pageHeader/PageHeader';
68
import { Metadata } from 'next';
79

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

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import Image from 'next/image';
22
import prePost from '@/shared/assets/images/prepost_img.webp';
3-
import PostInfo from '../PostInfo';
3+
4+
import PostInfo from '../main/PostInfo';
5+
46
import CocktailTag from './CocktailTag';
57
import DetailTabMobile from './tab/DetailTabMobile';
68

‎src/domains/community/main/CommunityFilter.tsx‎

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
'use client';
2+
3+
import SelectBox from '../../shared/select-box/SelectBox';
4+
5+
function CommunityFilter() {
6+
return (
7+
<section
8+
className="w-full flex justify-between items-center border-b-1 border-gray-light pb-1.5"
9+
aria-label="커뮤니티 정렬 필터"
10+
>
11+
<p aria-live="polite">100개</p>
12+
<SelectBox option={['최신순', '인기순', '댓글순']} title={'최신순'} />
13+
</section>
14+
);
15+
}
16+
17+
export default CommunityFilter;

‎src/domains/community/main/CommunityHeader.tsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import PageHeader from '../../shared/pageHeader/PageHeader';
2+
3+
function CommunityHeader() {
4+
return (
5+
<section aria-label="커뮤니티 헤더">
6+
<PageHeader title="Community" description="칵테일에 관한 모든 이야기" />
7+
</section>
8+
);
9+
}
10+
11+
export default CommunityHeader;

‎src/domains/community/main/CommunityTab.tsx‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
'use client';
2+
3+
import tw from '@/shared/utills/tw';
4+
import { useState } from 'react';
5+
6+
const tabItem = [
7+
{ title: '전체' },
8+
{ title: '레시피' },
9+
{ title: '팁' },
10+
{ title: '질문' },
11+
{ title: '자유' },
12+
];
13+
14+
function CommunityTab() {
15+
const [selectedIdx, setSelectedIdx] = useState(0);
16+
17+
return (
18+
<section className="relative sm:w-[70%] w-full" aria-label="커뮤니티 탭">
19+
<div className="w-full overflow-x-scroll no-scrollbar scroll-smooth">
20+
<div className="flex gap-3 w-max" aria-label="커뮤니티 카테고리">
21+
{tabItem.map(({ title }, idx) => (
22+
<button
23+
key={title + idx}
24+
role="tab"
25+
aria-selected={selectedIdx === idx}
26+
tabIndex={selectedIdx === idx ? 0 : -1}
27+
onClick={() => setSelectedIdx(idx)}
28+
className={tw(
29+
`border-1 py-1 px-3 rounded-2xl transition-colors ease-in`,
30+
selectedIdx === idx ? 'bg-secondary text-primary' : 'hover:bg-secondary/20'
31+
)}
32+
>
33+
{title}
34+
</button>
35+
))}
36+
</div>
37+
</div>
38+
</section>
39+
);
40+
}
41+
42+
export default CommunityTab;

‎src/domains/community/main/PostCard.tsx‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
import Image from 'next/image';
2+
import prePost from '@/shared/assets/images/prepost_img.webp';
3+
4+
import PostInfo from './PostInfo';
5+
import Label from '../../shared/label/Label';
6+
7+
function PostCard({ label }: { label: string }) {
8+
return (
9+
<article className="pt-[30] pb-3 border-b-1 border-gray-light">
10+
<Label title={label} />
11+
12+
<section className="flex items-start justify-between mt-3 cursor-pointer" role="link">
13+
<div className="flex flex-col gap-3">
14+
<p className="font-bold sm:text-xl text-lg">칵테일 만들 때 준비물</p>
15+
<div className="font-light sm:text-[15px] text-sm">
16+
<p>칵테일 처음 만들어 보는데 랄랄</p>
17+
<p>가나다라마바사아자차카파타하</p>
18+
</div>
19+
<PostInfo hasUserName={true} />
20+
</div>
21+
<figure className="flex items-start">
22+
<Image
23+
src={prePost}
24+
alt="예비사진"
25+
width={120}
26+
height={120}
27+
className="md:w-[120px] sm:w-[100px] w-[80px] self-start"
28+
/>
29+
</figure>
30+
</section>
31+
</article>
32+
);
33+
}
34+
35+
export default PostCard;

‎src/domains/community/main/PostInfo.tsx‎

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
function PostInfo({ hasUserName = false }: { hasUserName?: boolean }) {
2+
return (
3+
<ul
4+
className="flex font-light sm:gap-3 gap-1 sm:text-[14px] text-[12px] text-gray"
5+
aria-label="게시글 정보"
6+
>
7+
{hasUserName && (
8+
<>
9+
<li>실버븬</li>
10+
<li aria-hidden="true">|</li>
11+
</>
12+
)}
13+
<li>3분 전</li>
14+
<li aria-hidden="true">|</li>
15+
<li>조회 3</li>
16+
<li aria-hidden="true">|</li>
17+
<li>댓글 3</li>
18+
</ul>
19+
);
20+
}
21+
22+
export default PostInfo;

‎src/domains/community/main/WriteBtn.tsx‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
'use client';
2+
3+
import Write from '@/shared/assets/icons/edit_28.svg';
4+
import { useRouter } from 'next/navigation';
5+
import Button from '@/shared/components/button/Button';
6+
7+
type RouterType = ReturnType<typeof useRouter>;
8+
9+
function WriteBtn() {
10+
const router = useRouter();
11+
12+
const handleClick = (router: RouterType) => {
13+
router.push('/community/write');
14+
};
15+
16+
return (
17+
<Button
18+
type="button"
19+
size="auto"
20+
className="flex items-center justify-center py-1 px-2.5 bg-tertiary rounded-lg text-white"
21+
onClick={() => handleClick(router)}
22+
aria-label="새 글 작성"
23+
>
24+
<Write aria-hidden />
25+
글쓰기
26+
</Button>
27+
);
28+
}
29+
30+
export default WriteBtn;

0 commit comments

Comments
 (0)