chore: 폴더 구조 변경

pages/detail/index.tsx

@@ -5,9 +5,9 @@ import { styled } from 'stitches.config';
 import { useMutationDeleteMeeting, useMutationPostApplication, useQueryGetMeeting } from '@api/meeting/hooks';
 import { useRouter } from 'next/router';
 import Loader from '@components/loader/Loader';
-import InformationPanel from '@components/page/meetingDetail/information/InformationPanel';
+import InformationPanel from '@components/page/meetingDetail/Information/InformationPanel';
 import { Tab } from '@headlessui/react';
-import FeedPanel from '@components/page/meetingDetail/feed/FeedPanel';
+import FeedPanel from '@components/page/meetingDetail/Feed/FeedPanel';
 import { Fragment, useState } from 'react';
 
 const enum SelectedTab {

src/components/page/meetingDetail/Feed/DesktopFeedListSkeleton.tsx

@@ -0,0 +1,33 @@
+import { styled } from 'stitches.config';
+import FeedItemSkeleton from './FeedItemSkeleton';
+import { Box } from '@components/box/Box';
+
+interface DesktopFeedListSkeletonProps {
+  row: number;
+  column: number;
+}
+
+const DesktopFeedListSkeleton = ({ row, column }: DesktopFeedListSkeletonProps) => {
+  const count = row * column;
+  const gridTemplateRows = `repeat(${row}, 1fr)`;
+  const gridTemplateColumns = `repeat(${column}, 1fr)`;
+
+  return (
+    <SDesktopFeedListSkeleton style={{ gridTemplateRows, gridTemplateColumns }}>
+      {new Array(count).fill('').map((_, i) => (
+        <div key={i}>
+          <FeedItemSkeleton />
+        </div>
+      ))}
+    </SDesktopFeedListSkeleton>
+  );
+};
+
+export default DesktopFeedListSkeleton;
+
+const SDesktopFeedListSkeleton = styled(Box, {
+  display: 'grid',
+  gap: '24px 30px',
+  margin: '0 auto',
+  mt: '$56',
+});

src/components/page/meetingDetail/Feed/EmptyView.tsx

@@ -0,0 +1,50 @@
+import { Box } from '@components/box/Box';
+import { styled } from 'stitches.config';
+
+interface EmptyViewProps {
+  isMember: boolean;
+}
+
+const EmptyView = ({ isMember }: EmptyViewProps) => {
+  return (
+    <SContent>
+      <p>아직 작성된 피드가 없어요.</p>
+
+      {isMember && (
+        <>
+          <p>첫번째 작성자가 되어볼까요?</p>
+          <button>작성하러 가기</button>
+        </>
+      )}
+    </SContent>
+  );
+};
+
+export default EmptyView;
+
+const SContent = styled(Box, {
+  flexType: 'center',
+  flexDirection: 'column',
+  color: '$gray40',
+  fontStyle: 'T1',
+
+  '@tablet': {
+    fontStyle: 'H4',
+  },
+
+  button: {
+    background: '$black40',
+    color: '$white',
+    mt: '$48',
+    padding: '16px 35.5px',
+    borderRadius: '14px',
+    fontStyle: 'H2',
+
+    '@tablet': {
+      mt: '$32',
+      padding: '$10 $20',
+      borderRadius: '8px',
+      fontStyle: 'H4',
+    },
+  },
+});

src/components/page/meetingDetail/Feed/FeedItem.tsx

@@ -0,0 +1,200 @@
+import AvatarGroup from '@components/avatar/AvatarGroup';
+import { Box } from '@components/box/Box';
+import { Flex } from '@components/util/layout/Flex';
+import { styled } from 'stitches.config';
+import MoreIcon from '@assets/svg/more.svg';
+import LikeDefaultIcon from '@assets/svg/like_default.svg';
+import LikeActiveIcon from '@assets/svg/like_active.svg';
+import Avatar from '@components/avatar/Avatar';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import 'dayjs/locale/ko';
+import { useState } from 'react';
+
+dayjs.extend(relativeTime);
+dayjs.locale('ko');
+
+interface FeedItemProps {
+  profileImage: string;
+  name: string;
+  title: string;
+  contents: string;
+  images?: string[];
+  updatedDate: string;
+  commenterThumbnails?: string[];
+  commentCount: number;
+  likeCount: number;
+}
+
+const FeedItem = ({
+  profileImage,
+  name,
+  title,
+  contents,
+  images,
+  updatedDate,
+  commenterThumbnails,
+  commentCount,
+  likeCount,
+}: FeedItemProps) => {
+  const formattedLikeCount = likeCount > 999 ? '999+' : likeCount;
+  const [like, setLike] = useState(false);
+
+  return (
+    <SFeedItem>
+      <STop>
+        <Flex align="center">
+          <SProfileImage src={profileImage} alt="" />
+          <SName>{name}</SName>
+          <STime>{dayjs(updatedDate).fromNow()}</STime>
+        </Flex>
+        <MoreIcon />
+      </STop>
+
+      <STitle>{title}</STitle>
+      <SContent>{contents}</SContent>
+      {images && <SThumbnail src={images[0]} alt="" />}
+
+      <SBottom>
+        <Flex align="center">
+          {commenterThumbnails && (
+            <AvatarGroup>
+              {commenterThumbnails.map(thumbnail => (
+                <Avatar key={thumbnail} src={thumbnail} alt="" />
+              ))}
+            </AvatarGroup>
+          )}
+          <SCommentWrapper hasComment={commentCount > 0}>
+            <SComment>댓글</SComment>
+            <SCommentCount>{commentCount}</SCommentCount>
+          </SCommentWrapper>
+        </Flex>
+
+        <SLikeButton like={like} onClick={() => setLike(prev => !prev)}>
+          {like ? <LikeActiveIcon /> : <LikeDefaultIcon />}
+          {formattedLikeCount}
+        </SLikeButton>
+      </SBottom>
+    </SFeedItem>
+  );
+};
+
+export default FeedItem;
+
+const SFeedItem = styled(Box, {
+  padding: '$24 $20 $28 $20',
+  color: '$white100',
+  maxWidth: '$380',
+
+  '@tablet': {
+    padding: '$24 0 $28 0',
+    margin: '0 auto',
+    maxWidth: '100%',
+    minWidth: '100%',
+  },
+});
+
+const STop = styled(Box, {
+  display: 'flex',
+  justifyContent: 'space-between',
+  mb: '$12',
+});
+
+const SProfileImage = styled('img', {
+  width: '$32',
+  height: '$32',
+  objectFit: 'cover',
+  borderRadius: '$round',
+  background: '$black60',
+});
+
+const SName = styled('span', {
+  ml: '$8',
+  fontStyle: 'T5',
+});
+
+const STime = styled('span', {
+  ml: '$8',
+  fontStyle: 'T6',
+  color: '$gray100',
+});
+
+const STitle = styled(Box, {
+  mb: '$8',
+  fontStyle: 'H3',
+
+  '@tablet': {
+    fontStyle: 'H4',
+  },
+});
+
+const SContent = styled(Box, {
+  mb: '$20',
+  color: '$gray40',
+  fontStyle: 'B2',
+
+  '@tablet': {
+    fontStyle: 'B3',
+  },
+});
+
+const SThumbnail = styled('img', {
+  display: 'block',
+  mb: '$20',
+  borderRadius: '8px',
+  background: '$black60',
+  width: '100%',
+  maxWidth: '$340',
+  height: 'fit-content',
+
+  '@tablet': {
+    maxWidth: '100%',
+  },
+});
+
+const SBottom = styled(Box, {
+  flexType: 'verticalCenter',
+  justifyContent: 'space-between',
+});
+
+const SCommentWrapper = styled('div', {
+  variants: {
+    hasComment: {
+      true: {
+        transform: 'translateX(-66%)',
+        ml: '$8',
+      },
+    },
+  },
+});
+
+const SComment = styled('span', {
+  fontStyle: 'T5',
+  color: '$gray40',
+});
+
+const SCommentCount = styled('span', {
+  ml: '$4',
+  fontStyle: 'H5',
+});
+
+const SLikeButton = styled('button', {
+  display: 'flex',
+  alignItems: 'center',
+  fontStyle: 'H5',
+
+  variants: {
+    like: {
+      true: {
+        color: '#D70067',
+      },
+      false: {
+        color: '$white100',
+      },
+    },
+  },
+
+  '& > svg': {
+    mr: '$6',
+  },
+});

src/components/page/meetingDetail/Feed/FeedItemSkeleton.tsx

@@ -0,0 +1,87 @@
+import { Flex } from '@components/util/layout/Flex';
+import { Box } from '@components/box/Box';
+import { styled } from 'stitches.config';
+
+const FeedItemSkeleton = () => {
+  return (
+    <SFeedItemSkeleton>
+      <Flex align="center" justify="between" css={{ mb: '$17', '@tablet': { mb: '$12' } }}>
+        <Flex align="center" justify="start">
+          <SProfileImage />
+          <SName />
+        </Flex>
+        <SMore />
+      </Flex>
+
+      <SContent />
+      <SContent />
+
+      <SBottom align="center" justify="between">
+        <SComment />
+        <SLike />
+      </SBottom>
+    </SFeedItemSkeleton>
+  );
+};
+
+export default FeedItemSkeleton;
+
+const SFeedItemSkeleton = styled(Box, {
+  '@desktop': {
+    padding: '$24 $20 $28 $20',
+    background: '#171818',
+    borderRadius: '12px',
+  },
+
+  '@tablet': {
+    padding: '$20 0',
+  },
+});
+
+const Item = styled(Box, {
+  background: '$black60',
+  borderRadius: '8px',
+});
+
+const SProfileImage = styled(Item, {
+  width: '$32',
+  height: '$32',
+  borderRadius: '50%',
+  mr: '$8',
+});
+
+const SName = styled(Item, {
+  width: '$108',
+  height: '$20',
+});
+
+const SMore = styled(Item, {
+  width: '$32',
+  height: '$32',
+});
+
+const SContent = styled(Item, {
+  width: '100%',
+  height: '$24',
+  marginBottom: '8px',
+});
+
+const SBottom = styled(Flex, {
+  mt: '$22',
+
+  '@tablet': {
+    '& > *': {
+      background: '$black80',
+    },
+  },
+});
+
+const SComment = styled(Item, {
+  width: '$85',
+  height: '$20',
+});
+
+const SLike = styled(Item, {
+  width: '$64',
+  height: '$20',
+});