Merge pull request #169 from keemsebin/feature#136

동아리 피드 전체조회/개별조회

next.config.js

@@ -1,13 +1,18 @@
 /** @type {import('next').NextConfig} */
 const nextConfig = {
   images: {
-    domains: ['ddingdong-file.s3.ap-northeast-2.amazonaws.com', 'github.com'],
+    domains: [
+      'd2syrtcctrfiup.cloudfront.net',
+      'ddingdong-file.s3.ap-northeast-2.amazonaws.com',
+      'github.com',
+    ],
   },
   reactStrictMode: true,
 };
 
 module.exports = nextConfig;
 
+// eslint-disable-next-line @typescript-eslint/no-var-requires
 const { withSentryConfig } = require('@sentry/nextjs');
 
 module.exports = withSentryConfig(

package.json

@@ -27,6 +27,7 @@
     "clsx": "^2.1.0",
     "embla-carousel-autoplay": "^8.0.0-rc22",
     "embla-carousel-react": "^8.0.0-rc22",
+    "hls.js": "^1.5.15",
     "lucide-react": "^0.331.0",
     "next": "13.2.4",
     "react": "18.2.0",

src/apis/index.ts

@@ -16,7 +16,6 @@ import {
   NewClub,
   DeleteClub,
   UpdateClub,
-  Member,
   UpdateMember,
 } from '@/types/club';
 import { DeleteDocument, Document, DocumentDetail } from '@/types/document';
@@ -28,6 +27,7 @@ import {
   User,
 } from '@/types/event';
 
+import { Feed, FeedDetail } from '@/types/feed';
 import {
   DeleteFixComment,
   Fix,
@@ -147,6 +147,22 @@ export async function getDocumentInfo(
   return await api.get(`/documents/${documentId}`);
 }
 
+export async function getAllFeeds(): Promise<AxiosResponse<Feed[], unknown>> {
+  return await api.get('/feeds');
+}
+
+export async function getClubFeed(
+  clubId: number,
+): Promise<AxiosResponse<Feed[], unknown>> {
+  return await api.get(`/clubs/${clubId}/feeds`);
+}
+
+export async function getFeedDetail(
+  feedId: number,
+): Promise<AxiosResponse<FeedDetail, unknown>> {
+  return await api.get(`/feeds/${feedId}`);
+}
+
 export async function createNotice(noticeData: FormData) {
   const token = noticeData.get('token');
 
@@ -229,7 +245,6 @@ export async function uploadMembers(formdata: FormData) {
 }
 
 export async function updateMembers({ member, id, token }: UpdateMember) {
-  console;
   return await api.patch(`/club/my/club-members/${id}`, member, {
     headers: {
       Authorization: 'Bearer ' + token,

src/components/club/ClubInfo.tsx

@@ -0,0 +1,103 @@
+import Image from 'next/image';
+import { parseImgUrl } from '@/utils/parse';
+
+export type ClubInfoDetail = {
+  introduceImageUrls: string[];
+  introduction: string;
+  activity: string;
+  ideal: string;
+};
+
+export default function ClubInfo({
+  introduceImageUrls,
+  introduction,
+  activity,
+  ideal,
+}: ClubInfoDetail) {
+  function checkUrl(strUrl: string) {
+    const expUrl = /https?:\/\/[^\s"]/;
+    return expUrl.test(strUrl);
+  }
+  function parseUrl(line: string) {
+    if (checkUrl(line)) {
+      const words = line.split(' ');
+      const elements = words.map((word, index) => {
+        return checkUrl(word) ? (
+          <a
+            key={`urlWord${index}`}
+            href={word}
+            target="_blank"
+            rel="noopener noreferrer"
+            className="truncate whitespace-pre-line pr-1 underline underline-offset-1"
+          >
+            {word}
+          </a>
+        ) : (
+          <span key={`urlWord${index}`} className="pr-1">
+            {word}
+          </span>
+        );
+      });
+      return <div className="flex">{elements}</div>;
+    } else {
+      return <span>{line}</span>;
+    }
+  }
+
+  const parsedImg = introduceImageUrls[0] && parseImgUrl(introduceImageUrls[0]);
+
+  return (
+    <main className="w-full lg:w-[70%]">
+      <section className="mt-6 md:mt-8">
+        <div
+          className={`${
+            introduceImageUrls.length === 0 && `hidden`
+          } mt-6 md:mt-8`}
+        >
+          <div className="my-2 text-lg font-bold md:text-xl">
+            동아리 소개 이미지
+          </div>
+          {parsedImg && (
+            <Image
+              src={parsedImg}
+              width={1000}
+              height={500}
+              priority
+              alt="동아리 소개 사진"
+              className={`${
+                introduceImageUrls.length === 0 && `hidden`
+              } max-h-[50vh] rounded-2xl object-scale-down`}
+            />
+          )}
+        </div>
+
+        <div className="mt-6 text-lg font-bold md:mt-8 md:text-xl">
+          우리 동아리를 소개할게요
+        </div>
+        <div className="mt-1 bg-white text-base font-medium text-gray-500 md:mt-2 md:text-lg">
+          {introduction?.split('\n').map((line: string, index: number) => (
+            <p key={index}>{parseUrl(line)}</p>
+          ))}
+        </div>
+      </section>
+      <section className="mt-6 md:mt-8">
+        <div className="text-lg font-bold md:text-xl">이런 활동을 해요</div>
+        <ul className="ml-5 mt-1 list-disc text-base font-medium text-gray-500 md:mt-1.5 md:text-lg">
+          {activity?.split('\n').map((line: string, index: number) => (
+            <li key={index}>{line}</li>
+          ))}
+        </ul>
+      </section>
+      <section className="mt-6 md:mt-8">
+        <div className="text-lg font-bold md:text-xl">
+          이런 분과 함께하고 싶어요
+        </div>
+        <ul className="ml-5 mt-1 list-disc text-base font-medium text-gray-500 md:mt-1.5 md:text-lg">
+          {ideal?.split('\n').map((line: string, index: number) => (
+            <li key={index}>{line}</li>
+          ))}
+        </ul>
+      </section>
+    </main>
+  );
+}

src/components/common/Drawer.tsx

@@ -21,12 +21,12 @@ export default function Drawer({ children, isOpen, setIsOpen }: DrawerProps) {
     >
       <section
         className={
-          ' delay-400 absolute left-0 top-0 h-full w-screen max-w-lg transform bg-white shadow-xl transition-all duration-500 ease-in-out  ' +
+          ' delay-400 absolute right-0 top-0 h-full w-screen max-w-lg transform bg-white shadow-xl transition-all duration-500 ease-in-out  ' +
           (isOpen ? ' translate-x-0 ' : ' translate-x-full ')
         }
       >
         <article className="relative flex h-16 w-full justify-between">
-          <header className="flex w-full justify-between bg-blue-600 p-4 text-lg font-bold">
+          <header className="flex w-full justify-between bg-blue-600 px-6 text-lg font-bold">
             <Image
               src={MiniLogo}
               width={1544}

src/components/common/Modal.tsx

@@ -9,6 +9,7 @@ type ModalProps = {
   closeModal: () => void;
   title?: React.ReactNode;
   closeButton?: boolean;
+  feed?: boolean;
 };
 
 export default function Modal({
@@ -18,19 +19,26 @@ export default function Modal({
   closeModal,
   modalRef,
   title,
+  feed = false,
 }: ModalProps) {
   if (!visible) return <></>;
 
   return (
     <ModalPortal>
-      <div className="fixed left-0 top-0 z-50 flex h-screen w-screen items-center justify-center bg-black bg-opacity-10">
+      <div
+        className={`fixed left-0 top-0 z-50 flex h-screen w-screen items-center justify-center bg-black ${
+          feed ? 'bg-opacity-40' : 'bg-opacity-10'
+        }`}
+      >
         <div
-          className="z-60 relative m-5 max-h-[80%] w-full max-w-lg overflow-y-scroll overscroll-y-contain rounded-lg bg-white shadow md:overflow-y-auto"
+          className={`z-60 relative m-5  w-full overflow-y-scroll rounded-lg bg-white shadow md:overflow-y-auto ${
+            feed ? 'max-w-3xl md:h-[70%]' : 'max-h-[80%] max-w-lg '
+          }`}
           ref={modalRef}
         >
           <div
             className={`flex items-center justify-between rounded-t ${
-              title ? `border-b p-5` : 'p-2'
+              title && `border-b p-5`
             }`}
           >
             <h1
@@ -49,7 +57,7 @@ export default function Modal({
               <Image src={CancelImg} alt="close-button" />
             </button>
           </div>
-          <div className="space-y-6 p-6">{children}</div>
+          <div className={` ${!feed && 'space-y-6  p-6'}`}>{children}</div>
         </div>
       </div>
     </ModalPortal>

src/components/common/Skeleton.tsx

@@ -0,0 +1,3 @@
+export default function Skeleton() {
+  return <div className="h-full w-full animate-pulse bg-gray-300"></div>;
+}