Style/community#18

src/app/community/page.tsx

@@ -1,4 +1,37 @@
+import CommunityFilter from '@/shared/components/community/CommunityFilter';
+import CommunityHeader from '@/shared/components/community/CommunityHeader';
+import CommunityTab from '@/shared/components/community/CommunityTab';
+import PostCard from '@/shared/components/community/PostCard';
+import WriteBtn from '@/shared/components/community/WriteBtn';
+
 function Page() {
-  return <div></div>;
+  return (
+    <main className="page-layout max-w-1024">
+      <div className="mt-3 mb-10 flex flex-col gap-8 ">
+        <section aria-labelledby="community-heading">
+          <h1 id="community-heading" className="sr-only">
+            커뮤니티 페이지
+          </h1>
+          <CommunityHeader />
+        </section>
+
+        <section
+          aria-label="탭과 글쓰기"
+          className="flex justify-between item-center sm:flex-row flex-col gap-4 mt-1"
+        >
+          <CommunityTab />
+          <WriteBtn />
+        </section>
+
+        <section aria-label="게시물 목록">
+          <CommunityFilter />
+          <PostCard label="레시피" />
+          <PostCard label="팁" />
+          <PostCard label="질문" />
+          <PostCard label="자유" />
+        </section>
+      </div>
+    </main>
+  );
 }
 export default Page;

src/shared/components/InputBox/SelectBox.tsx

@@ -21,7 +21,7 @@ function SelectBox({ ref, option, title }: Props) {
   };
 
   return (
-    <div className="flex flex-col gap-2 relative h-6 w-30">
+    <div className="flex flex-col gap-2 relative h-6">
       <button
         ref={ref}
         className="flex gap-2 cursor-pointer text-base"
@@ -38,7 +38,7 @@ function SelectBox({ ref, option, title }: Props) {
 
       <ul
         className={`w-30 bg-white text-gray-dark p-2 rounded-xl  duration-200  absolute transition-all 
-         ${isOpen ? 'opacity-100 top-8' : 'opacity-0 pointer-events-none top-4'}`}
+         ${isOpen ? 'opacity-100 top-8 right-0' : 'opacity-0 pointer-events-none top-4 right-0'}`}
         role="listbox"
       >
         {option.map((v, i) => (

src/shared/components/community/CommunityFilter.tsx

@@ -0,0 +1,16 @@
+'use client';
+
+import SelectBox from '../InputBox/SelectBox';
+function CommunityFilter() {
+  return (
+    <section
+      className="w-full flex justify-between items-center border-b-1 border-gray-light pb-1.5"
+      aria-label="커뮤니티 정렬 필터"
+    >
+      <p aria-live="polite">100개</p>
+      <SelectBox option={['최신순', '인기순', '댓글순']} title={'최신순'} />
+    </section>
+  );
+}
+
+export default CommunityFilter;

src/shared/components/community/CommunityHeader.tsx

@@ -0,0 +1,12 @@
+import PageHeader from '../pageHeader/PageHeader';
+import headerImg from '@/shared/assets/images/community_page_header.webp';
+
+function CommunityHeader() {
+  return (
+    <section aria-label="커뮤니티 헤더">
+      <PageHeader src={headerImg} title="Community" description="칵테일에 관한 모든 이야기" />
+    </section>
+  );
+}
+
+export default CommunityHeader;

src/shared/components/community/CommunityTab.tsx

@@ -0,0 +1,42 @@
+'use client';
+
+import tw from '@/shared/utills/tw';
+import { useState } from 'react';
+
+const tabItem = [
+  { title: '전체' },
+  { title: '레시피' },
+  { title: '팁' },
+  { title: '질문' },
+  { title: '자유' },
+];
+
+function CommunityTab() {
+  const [selectedIdx, setSelectedIdx] = useState(0);
+
+  return (
+    <section className="relative sm:w-[70%] w-full" aria-label="커뮤니티 탭">
+      <div className="w-full overflow-x-scroll no-scrollbar scroll-smooth">
+        <div className="flex gap-3 w-max" aria-label="커뮤니티 카테고리">
+          {tabItem.map(({ title }, idx) => (
+            <button
+              key={title + idx}
+              role="tab"
+              aria-selected={selectedIdx === idx}
+              tabIndex={selectedIdx === idx ? 0 : -1}
+              onClick={() => setSelectedIdx(idx)}
+              className={tw(
+                `border-1 py-1 px-3 rounded-2xl transition-colors ease-in`,
+                selectedIdx === idx ? 'bg-secondary text-primary' : ''
+              )}
+            >
+              {title}
+            </button>
+          ))}
+        </div>
+      </div>
+    </section>
+  );
+}
+
+export default CommunityTab;

src/shared/components/community/PostCard.tsx

@@ -0,0 +1,44 @@
+import Image from 'next/image';
+import prePost from '@/shared/assets/images/prepost_img.webp';
+import PostLabel from './PostLabel';
+
+function PostCard({ label }: { label: string }) {
+  return (
+    <article className="pt-[30] pb-3 border-b-1 border-gray-light">
+      <PostLabel title={label} />
+
+      <section className="flex items-start justify-between mt-3 cursor-pointer" role="link">
+        <div className="flex flex-col gap-3">
+          <p className="font-bold sm:text-xl text-lg">칵테일 만들 때 준비물</p>
+          <div className="font-light sm:text-[15px] text-sm">
+            <p>칵테일 처음 만들어 보는데 랄랄</p>
+            <p>가나다라마바사아자차카파타하</p>
+          </div>
+          <ul
+            className="flex font-light sm:gap-3 gap-1 sm:text-[14px] text-[12px] text-gray"
+            aria-label="게시글 정보"
+          >
+            <li>실버븬</li>
+            <li aria-hidden="true">|</li>
+            <li>3분 전</li>
+            <li aria-hidden="true">|</li>
+            <li>조회 3</li>
+            <li aria-hidden="true">|</li>
+            <li>댓글 3</li>
+          </ul>
+        </div>
+        <figure className="flex items-start">
+          <Image
+            src={prePost}
+            alt="예비사진"
+            width={120}
+            height={120}
+            className="md:w-[120px] sm:w-[100px] w-[80px] self-start"
+          />
+        </figure>
+      </section>
+    </article>
+  );
+}
+
+export default PostCard;

src/shared/components/community/PostLabel.tsx

@@ -0,0 +1,24 @@
+function PostLabel({ title }: { title: string }) {
+  return (
+    <span
+      role="status"
+      aria-label={title}
+      className={` text-primary py-1 px-2 rounded-md text-sm
+            ${
+              title === '레시피'
+                ? 'bg-[#FFE4E6]'
+                : title === '팁'
+                  ? 'bg-[#EDE9FE]'
+                  : title === '질문'
+                    ? 'bg-[#E0F2FE]'
+                    : title === '자유'
+                      ? 'bg-[#D1FAE5]'
+                      : ''
+            }`}
+    >
+      {title}
+    </span>
+  );
+}
+
+export default PostLabel;

src/shared/components/community/WriteBtn.tsx

@@ -0,0 +1,12 @@
+import Write from '@/shared/assets/icons/edit_28.svg';
+
+function WriteBtn() {
+  return (
+    <button className="flex items-center justify-center py-1 px-2.5 bg-tertiary rounded-lg">
+      <Write />
+      글쓰기
+    </button>
+  );
+}
+
+export default WriteBtn;

src/shared/components/header/DropdownMenu.tsx

@@ -58,9 +58,9 @@ function DropdownMenu({ isClicked, setIsClicked }: Props) {
   };
 
   return (
-    <div
+    <nav
       className="w-full h-screen bg-secondary absolute top-0 left-0 px-[12px] font-serif block sm:hidden"
-      role="menu"
+      role="navigation"
       aria-label="메인 네비게이션 메뉴"
       tabIndex={-1}
       id="mobile-dropdown-menu"
@@ -75,52 +75,53 @@ function DropdownMenu({ isClicked, setIsClicked }: Props) {
           className="w-[62px] md:w-[82px] h-auto"
         />
       </div>
-      <div className="my-5">
-        <ul className="flex flex-col gap-[12px] text-black px-2">
-          {navItem.map(({ label, href }, idx) => (
-            <li
-              className={`font-normal ${pathname === href ? 'pl-1' : 'px-3 py-[12px]'}`}
-              key={href}
+      <ul className="flex flex-col gap-[12px] text-black px-2 my-5">
+        {navItem.map(({ label, href }, idx) => (
+          <li className={`font-normal ${pathname === href ? 'pl-1' : 'px-3 py-[12px]'}`} key={href}>
+            <Link
+              href={href}
+              onNavigate={() => setIsClicked(false)}
+              className={`items-start ${pathname === href ? 'bg-tertiary/70 inline-flex pr-5 p-2 rounded-md text-secondary' : 'hover:text-black/70 flex'}`}
+              aria-current={pathname === href ? 'page' : undefined}
             >
-              <Link
-                href={href}
-                onNavigate={() => setIsClicked(false)}
-                className={`items-start ${pathname === href ? 'bg-tertiary/70 inline-flex pr-5 p-2 rounded-md text-secondary' : 'hover:text-black/70 flex'}`}
-                aria-current={pathname === href ? 'page' : undefined}
+              <span className="text-[20px] mr-3">{idx + 1}. </span>
+              <span
+                className="text-[28px]"
+                ref={(el) => {
+                  textRef.current[idx] = el;
+                }}
+                onMouseEnter={() => handleMouseEnter(idx)}
+                onMouseLeave={() => handleMouseLeave(idx)}
               >
-                <span className="text-[20px] mr-3">{idx + 1}. </span>
-                <span
-                  className="text-[28px]"
-                  ref={(el) => {
-                    textRef.current[idx] = el;
-                  }}
-                  onMouseEnter={() => handleMouseEnter(idx)}
-                  onMouseLeave={() => handleMouseLeave(idx)}
-                >
-                  {label}
-                </span>
-              </Link>
-            </li>
-          ))}
-        </ul>
-      </div>
-      <div className="border border-t-[1px] border-t-gray flex items-center py-[32px] gap-2">
+                {label}
+              </span>
+            </Link>
+          </li>
+        ))}
+      </ul>
+
+      <section
+        aria-label="로그인 로그아웃"
+        className="border border-t-[1px] border-t-gray flex items-center py-[32px] gap-2"
+      >
         <User color="var(--color-primary)" />
         <button type="button" className="text-black font-light text-xl hover:text-black/70">
           로그인/회원가입
         </button>
-      </div>
+      </section>
+
       <div className="absolute top-1.5 left-3">
         <button
           type="button"
+          aria-label="모바일 메뉴 닫기"
           onClick={() => {
             setIsClicked(false);
           }}
         >
           <Close color="var(--color-primary)" className="w-8 h-8" />
         </button>
       </div>
-    </div>
+    </nav>
   );
 }
 

src/shared/styles/global.css

@@ -22,3 +22,8 @@
 .scroll-down {
   transform: translateY(-100%);
 }
+
+.no-scrollbar {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}