Style/community#18

package.json

@@ -10,7 +10,7 @@
     "build": "next build",
     "start": "next start",
     "lint": "eslint . --ext .ts,.tsx,.js,.jsx"
-  }, 
+  },
   "lint-staged": {
     "*.{js,jsx,ts,tsx}": [
       "prettier --write",
@@ -20,6 +20,7 @@
   "dependencies": {
     "class-variance-authority": "^0.7.1",
     "gsap": "^3.13.0",
+    "lottie-react": "^2.4.1",
     "next": "15.5.3",
     "react": "19.1.0",
     "react-dom": "19.1.0",

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>community</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/app/design-system/page.tsx

@@ -12,6 +12,7 @@ import SelectBox from '@/shared/components/InputBox/SelectBox';
 import LikeBtn from '@/shared/components/like/LikeBtn';
 import Share from '@/shared/components/share/Share';
 import Keep from '@/shared/components/keep/Keep';
+import Spinner from '@/shared/components/spinner/Spinner';
 
 function Page() {
   const [isModalOpen, setModalOpen] = useState(false);
@@ -154,6 +155,11 @@ function Page() {
           <Keep />
         </div>
       </div>
+
+      <div className="space-y-3">
+        <h2 className="text-2xl font-semibold pb-1">Spinner</h2>
+        <Spinner />
+      </div>
     </div>
   );
 }

src/app/recipe/page.tsx

@@ -1,4 +1,22 @@
+import PageHeader from '@/shared/components/pageHeader/PageHeader';
+import { Metadata } from 'next';
+import Glass from '@/shared/assets/images/recipe_page_header.png';
+
+export const metadata: Metadata = {
+  title: 'SSOUL | 칵테일레시피',
+  description: '칵테일 레시피가 궁금하신 분들을 위한 레시피 페이지',
+};
+
 function Page() {
-  return <div>recipe</div>;
+  return (
+    <div className="w-full">
+      <PageHeader
+        src={Glass}
+        title="Cocktail Recipes"
+        description="다양하고 재밌는 칵테일 레시피"
+      />
+      <div className="page-layout max-w-1224"></div>
+    </div>
+  );
 }
 export default Page;

src/shared/assets/lottie/loading.json

@@ -0,0 +1 @@
+{"v":"5.7.8","fr":30,"ip":0,"op":121,"w":1080,"h":1080,"nm":"3GWS5M 22","ddd":0,"assets":[],"layers":[{"ddd":0,"ind":1,"ty":4,"nm":"Shape Layer 2","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[540,540,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0]],"o":[[0,0],[0,0]],"v":[[-122,333],[78,333]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.925490255917,0.117647066303,0.141176470588,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":28,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":5,"s":[0]},{"t":20,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":86,"s":[0]},{"t":101,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":5,"op":185,"st":5,"bm":0},{"ddd":0,"ind":2,"ty":4,"nm":"Layer 3","tt":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[517.547,873.309,0],"ix":2,"l":2},"a":{"a":0,"k":[-22.453,333.309,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[0,0],[0,0],[0,0]],"o":[[0,0],[0,0],[0,0],[0,0],[0,0]],"v":[[-119.516,325.931],[74.609,325.931],[74.609,340.686],[-119.516,340.686],[-119.516,325.931]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.960784316063,0.674509823322,0.800000011921,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":5,"op":185,"st":5,"bm":0},{"ddd":0,"ind":3,"ty":4,"nm":"Shape Layer 1","td":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[540,540,0],"ix":2,"l":2},"a":{"a":0,"k":[0,0,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-10,4.5],[-5.5,27.5],[0,21],[0,0],[6,46],[-4.5,40.5],[0,0],[0,0],[0,0],[0,-30],[14,-27],[0,0],[-6,-17],[-39,-7],[0,0]],"o":[[0,0],[10,-4.5],[3.661,-18.306],[0,-22.522],[0,0],[-2.407,-18.452],[4.5,-40.5],[0,0],[0,0],[0,0],[0,30],[-18.717,36.096],[0,0],[13,14],[20.67,3.71],[0,0]],"v":[[-122.5,329],[-62.5,322.5],[-39.5,293.5],[-39.5,239.5],[-41.5,173],[-110.5,112.5],[-107.5,-16.5],[-96,-181],[-14,-180.5],[52,-180],[64,1],[59.5,126],[-3.5,173.5],[-1.5,308.5],[47,330],[78,328]],"c":false},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"st","c":{"a":0,"k":[0.925490255917,0.117647066303,0.141176470588,1],"ix":3},"o":{"a":0,"k":100,"ix":4},"w":{"a":0,"k":28,"ix":5},"lc":1,"lj":1,"ml":4,"bm":0,"nm":"Stroke 1","mn":"ADBE Vector Graphic - Stroke","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Shape 1","np":3,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"tm","s":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":0,"s":[0]},{"t":20,"s":[100]}],"ix":1},"e":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":81,"s":[0]},{"t":101,"s":[100]}],"ix":2},"o":{"a":0,"k":0,"ix":3},"m":1,"ix":2,"nm":"Trim Paths 1","mn":"ADBE Vector Filter - Trim","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":4,"ty":4,"nm":"Layer 2","tt":1,"sr":1,"ks":{"o":{"a":0,"k":100,"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":0,"k":[517.539,612.7,0],"ix":2,"l":2},"a":{"a":0,"k":[-22.461,72.7,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[13.044,22.155],[-1.092,18.064],[0,0],[0,0],[-46.383,0],[0,0],[0,0],[9.179,-15.586],[24.603,-7.157],[0,0],[-18.75,0.229],[0,0],[0,0],[0,0],[9.863,12.032],[0,0],[0,0],[0,0],[-12.227,20.771],[0.846,14.215],[0,0],[43.187,0],[0,0],[-7.207,-12.259],[-23.705,-3.88],[0,0],[0,0],[0,0],[14.347,-4.451],[0,0],[0,0],[0,0],[-13.875,13.386]],"o":[[0,0],[-24.586,-7.157],[-9.162,-15.586],[0,0],[0,0],[46.366,0],[0,0],[0,0],[1.093,18.064],[-13.025,22.155],[0,0],[13.892,13.386],[0,0],[0,0],[0,0],[-14.364,-4.451],[0,0],[0,0],[0,0],[23.721,-3.88],[7.222,-12.259],[0,0],[-43.204,0],[0,0],[-0.863,14.215],[12.227,20.771],[0,0],[0,0],[0,0],[-9.88,12.032],[0,0],[0,0],[0,0],[18.733,0.229],[0,0]],"v":[[-50.682,302.911],[-50.682,182.234],[-109.961,136.666],[-122.4,85.36],[-105.494,-190.591],[-92.011,-190.591],[47.105,-190.591],[60.588,-190.591],[77.478,85.36],[65.038,136.666],[5.759,182.234],[5.759,302.911],[60.083,321.432],[74.609,321.252],[74.609,335.991],[24.868,335.991],[-12.483,311.731],[-13.625,310.313],[-13.625,166.501],[-9.403,165.8],[48.312,126.835],[58.127,86.534],[42.329,-171.189],[-87.25,-171.189],[-103.033,86.534],[-93.233,126.835],[-35.537,165.8],[-31.281,166.501],[-31.281,310.313],[-32.423,311.731],[-69.774,335.991],[-119.516,335.991],[-119.516,321.252],[-105.005,321.432],[-50.682,302.911]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.960784316063,0.674509823322,0.800000011921,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":5,"ty":4,"nm":"Layer 5","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":35,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.158],"y":[0]},"t":40,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":75,"s":[100]},{"t":85,"s":[0]}],"ix":11},"r":{"a":0,"k":0,"ix":10},"p":{"a":1,"k":[{"i":{"x":0.92,"y":0.997},"o":{"x":0.553,"y":0},"t":35,"s":[435.215,214.417,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.391,"y":0.951},"o":{"x":0.079,"y":0.008},"t":45,"s":[435.215,369.417,0],"to":[0,0,0],"ti":[0,0,0]},{"i":{"x":0.847,"y":1},"o":{"x":0.573,"y":0.122},"t":50,"s":[435.215,337.417,0],"to":[0,0,0],"ti":[0,0,0]},{"t":55,"s":[435.215,349.417,0]}],"ix":2,"l":2},"a":{"a":0,"k":[-104.785,-190.583,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[-7.973,45.274],[0,0],[35.509,-4.648],[0,0]],"o":[[46.269,-4.907],[0,0],[-7.531,34.513],[0,0],[0,0]],"v":[[-93.691,-87.049],[-2.244,-172.428],[-22.054,-172.428],[-93.691,-106.628],[-93.691,-87.049]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.92549020052,0.109803922474,0.141176477075,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false},{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[46.757,0],[0,46.774],[-46.775,0],[0,-46.775]],"o":[[-46.775,0],[0,-46.775],[46.757,0],[0,46.774]],"v":[[-104.776,-105.895],[-189.473,-190.591],[-104.776,-275.27],[-20.098,-190.591]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ind":1,"ty":"sh","ix":2,"ks":{"a":0,"k":{"i":[[57.501,0],[0,-57.503],[-57.52,0],[0,57.502]],"o":[[-57.52,0],[0,57.502],[57.501,0],[0,-57.503]],"v":[[-104.776,-294.705],[-208.907,-190.591],[-104.776,-86.461],[-0.663,-190.591]],"c":true},"ix":2},"nm":"Path 2","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.956862747669,0.505882382393,0.1254902035,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 2","np":3,"cix":2,"bm":0,"ix":2,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0},{"ddd":0,"ind":6,"ty":4,"nm":"Layer 4","sr":1,"ks":{"o":{"a":1,"k":[{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":22,"s":[0]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.159],"y":[0]},"t":27,"s":[100]},{"i":{"x":[0.667],"y":[1]},"o":{"x":[0.333],"y":[0]},"t":75,"s":[100]},{"t":85,"s":[0]}],"ix":11},"r":{"a":1,"k":[{"i":{"x":[0.837],"y":[0.989]},"o":{"x":[0.544],"y":[0]},"t":22,"s":[33]},{"t":37,"s":[0]}],"ix":10},"p":{"a":1,"k":[{"i":{"x":0.837,"y":0.984},"o":{"x":0.544,"y":0},"t":22,"s":[874.764,60.517,0],"to":[-36.333,16,0],"ti":[38.167,-12.333,0]},{"i":{"x":0.208,"y":0.811},"o":{"x":0.07,"y":0.017},"t":37,"s":[656.764,156.517,0],"to":[-38.167,12.333,0],"ti":[0,0,0]},{"i":{"x":0.893,"y":1},"o":{"x":0.78,"y":0.344},"t":44,"s":[645.764,134.517,0],"to":[0,0,0],"ti":[-1.833,-3.667,0]},{"t":51,"s":[656.764,156.517,0]}],"ix":2,"l":2},"a":{"a":0,"k":[116.764,-383.483,0],"ix":1,"l":2},"s":{"a":0,"k":[100,100,100],"ix":6,"l":2}},"ao":0,"shapes":[{"ty":"gr","it":[{"ind":0,"ty":"sh","ix":1,"ks":{"a":0,"k":{"i":[[0,0],[0,0],[9.897,-39.895],[0,0],[-6.586,-1.287],[0,0],[-27.847,-0.831],[0,0],[0,0]],"o":[[0,0],[-37.79,-1.125],[0,0],[6.032,3.506],[0,0],[7.499,-30.161],[0,0],[0,0],[0,0]],"v":[[208.198,-398.328],[153.451,-399.943],[66.831,-345.864],[-58.67,158.414],[-39.597,165.033],[86.282,-341.104],[152.767,-379.922],[207.514,-378.325],[208.198,-398.328]],"c":true},"ix":2},"nm":"Path 1","mn":"ADBE Vector Shape - Group","hd":false},{"ty":"fl","c":{"a":0,"k":[0.776470601559,0.494117647409,0.705882370472,1],"ix":4},"o":{"a":0,"k":100,"ix":5},"r":1,"bm":0,"nm":"Fill 1","mn":"ADBE Vector Graphic - Fill","hd":false},{"ty":"tr","p":{"a":0,"k":[0,0],"ix":2},"a":{"a":0,"k":[0,0],"ix":1},"s":{"a":0,"k":[100,100],"ix":3},"r":{"a":0,"k":0,"ix":6},"o":{"a":0,"k":100,"ix":7},"sk":{"a":0,"k":0,"ix":4},"sa":{"a":0,"k":0,"ix":5},"nm":"Transform"}],"nm":"Group 1","np":2,"cix":2,"bm":0,"ix":1,"mn":"ADBE Vector Group","hd":false}],"ip":0,"op":180,"st":0,"bm":0}],"markers":[]}

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;