[FE] 공지 스레드 컴포넌트 구현

frontend/src/assets/png/index.ts

@@ -0,0 +1 @@
+export { default as noticeThreadBackground } from './notice-thread-background.png';

frontend/src/assets/svg/index.ts

@@ -5,3 +5,7 @@ export { ReactComponent as DeleteIcon } from './delete.svg';
 export { ReactComponent as EditIcon } from './edit.svg';
 export { ReactComponent as LogoIcon } from './logo.svg';
 export { ReactComponent as PlusIcon } from './plus.svg';
+export { ReactComponent as ClockIcon } from './clock.svg';
+export { ReactComponent as ArrowExpandMoreIcon } from './arrow-expand-more.svg';
+export { ReactComponent as ArrowExpandLessIcon } from './arrow-expand-less.svg';
+export { ReactComponent as MegaphoneIcon } from './megaphone.svg';

frontend/src/components/ExpandButton/ExpandButton.stories.tsx

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import ExpandButton from './ExpandButton';
+
+/**
+ * `ExpandButton` 은 스레드 및 공지 스레드에서의 펼치기/접기 기능을 사용하기 위한 버튼입니다.
+ *  기본적으로 `position: absolute` 가 적용되어 있으며 부모 요소의 최하단에 배치됩니다.
+ */
+const meta = {
+  title: 'Feed/ExpandButton',
+  component: ExpandButton,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => {
+      return (
+        <div
+          style={{
+            position: 'relative',
+            padding: '120px',
+            backgroundColor: '#404040',
+            border: '1px solid #000',
+          }}
+        >
+          <Story />
+        </div>
+      );
+    },
+  ],
+} satisfies Meta<typeof ExpandButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+/**
+ * 검은 배경은 단지 컴포넌트의 랜더링 결과 잘 보이게 하기 위함이며, 실제로는 컴포넌트에 포함되지 않습니다.
+ */
+export const NotExpanded: Story = {
+  args: {
+    isExpanded: false,
+  },
+};
+
+export const Expanded: Story = {
+  args: {
+    isExpanded: true,
+  },
+};

frontend/src/components/ExpandButton/ExpandButton.styled.ts

@@ -0,0 +1,29 @@
+import { styled, css } from 'styled-components';
+
+export const Container = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  width: 100%;
+  height: 100%;
+  padding-top: 40px;
+`;
+
+export const expandButton = css`
+  position: absolute;
+  bottom: 0;
+  right: 0;
+
+  width: 100%;
+  height: 100px;
+  padding: 10px;
+
+  background: linear-gradient(
+    to top,
+    ${({ theme }) => theme.color.WHITE} 50%,
+    transparent
+  );
+
+  color: ${({ theme }) => theme.color.BLACK};
+`;

frontend/src/components/ExpandButton/ExpandButton.tsx

@@ -0,0 +1,42 @@
+import * as S from './ExpandButton.styled';
+import Button from '~/components/common/Button/Button';
+import Text from '~/components/common/Text/Text';
+import { ArrowExpandMoreIcon, ArrowExpandLessIcon } from '~/assets/svg';
+
+interface ExpandButtonProps {
+  isExpanded: boolean;
+  onClick?: () => void;
+}
+
+const ExpandButton = (props: ExpandButtonProps) => {
+  const { isExpanded, onClick } = props;
+
+  return (
+    <Button
+      type="button"
+      variant="plain"
+      css={S.expandButton}
+      onClick={onClick}
+    >
+      <S.Container>
+        {isExpanded ? (
+          <>
+            <Text weight="bold" size="lg">
+              접기
+            </Text>
+            <ArrowExpandLessIcon />
+          </>
+        ) : (
+          <>
+            <Text weight="bold" size="lg">
+              펼치기
+            </Text>
+            <ArrowExpandMoreIcon />
+          </>
+        )}
+      </S.Container>
+    </Button>
+  );
+};
+
+export default ExpandButton;

frontend/src/components/NoticeTag/NoticeTag.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import NoticeTag from './NoticeTag';
+
+/**
+ * `NoticeTag` 는 공지 여부임을 표시하는 카테고리 컴포넌트입니다.
+ */
+const meta = {
+  title: 'Feed/NoticeTag',
+  component: NoticeTag,
+  tags: ['autodocs'],
+} satisfies Meta<typeof NoticeTag>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    size: 'md',
+  },
+};
+
+/**
+ * 이 사이즈는 모아보기 페이지에서 사용될 사이즈입니다.
+ */
+export const Small: Story = {
+  args: {
+    size: 'sm',
+  },
+};

frontend/src/components/NoticeTag/NoticeTag.styled.ts

@@ -0,0 +1,23 @@
+import { styled, css } from 'styled-components';
+import type { NoticeTagProps } from './NoticeTag';
+
+export const TagContainer = styled.div<NoticeTagProps>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  column-gap: 8px;
+
+  width: ${({ size = 'md' }) => (size === 'md' ? '150px' : '42px')};
+  height: 42px;
+
+  border-radius: 18px;
+  background-color: ${({ theme }) => theme.color.PRIMARY};
+
+  box-shadow: 0 0 10px ${({ theme }) => theme.color.GRAY400};
+
+  ${({ css }) => css}
+`;
+
+export const tagLabel = css`
+  color: ${({ theme }) => theme.color.WHITE};
+`;

frontend/src/components/NoticeTag/NoticeTag.tsx

@@ -0,0 +1,27 @@
+import * as S from './NoticeTag.styled';
+import { MegaphoneIcon } from '~/assets/svg';
+import type { CSSProp } from 'styled-components';
+import Text from '~/components/common/Text/Text';
+import type { NoticeTagSize } from '~/types/size';
+
+export interface NoticeTagProps {
+  size?: NoticeTagSize;
+  css?: CSSProp;
+}
+
+const NoticeTag = (props: NoticeTagProps) => {
+  const { size, css } = props;
+
+  return (
+    <S.TagContainer size={size} css={css}>
+      <MegaphoneIcon />
+      {size === 'md' && (
+        <Text size="lg" weight="bold" css={S.tagLabel}>
+          중요 공지
+        </Text>
+      )}
+    </S.TagContainer>
+  );
+};
+
+export default NoticeTag;

frontend/src/components/NoticeThread/NoticeThread.stories.tsx

@@ -0,0 +1,74 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import NoticeThread from './NoticeThread';
+
+/**
+ * `NoticeThread` 는 피드 메뉴에서 사용될 공지 스레드 컴포넌트입니다.
+ *  피드 메뉴와 모아보기 페이지에서의 두 UI를 모두 제공합니다.
+ */
+const meta = {
+  title: 'Feed/NoticeThread',
+  component: NoticeThread,
+  tags: ['autodocs'],
+  decorators: [
+    (Story) => {
+      return (
+        <div
+          style={{
+            padding: '50px',
+            backgroundColor: '#eee',
+          }}
+        >
+          <Story />
+        </div>
+      );
+    },
+  ],
+} satisfies Meta<typeof NoticeThread>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    author: '요술토끼',
+    profileImageSrc: 'https://i.imgur.com/gZJ1nHJ.png',
+    createdAt: '2022-03-04 12:34',
+    content: '안녕하세요! 잘 부탁드립니다.',
+  },
+};
+
+export const TooLongContent: Story = {
+  args: {
+    author: '요술토끼',
+    profileImageSrc: 'https://i.imgur.com/gZJ1nHJ.png',
+    createdAt: '2022-03-04 12:34',
+    content:
+      'The Enigmatic Nature of Quantum Entanglement: Unraveling the Mysteries of Nonlocality\n\nIntroduction\n\nQuantum entanglement, a cornerstone phenomenon in quantum mechanics, has baffled physicists and philosophers alike since its discovery in the early 20th century. This essay delves into the intricacies of quantum entanglement, exploring its counterintuitive properties and profound implications on our understanding of reality. We shall embark on a journey through the mysterious realm of nonlocality, where seemingly disconnected particles share an inexplicable, instantaneous connection, defying classical notions of causality and locality.\n\nI. Historical Background and Quantum Entanglement Basics\n\nThe concept of quantum entanglement first emerged in 1935, as Erwin Schrödinger famously described it as "spooky action at a distance." The basic idea involves the entangling of two or more quantum particles, such as photons or electrons, in a way that their quantum states become inextricably linked. Once entangled, the particles exhibit a peculiar behavior - any change to the state of one particle instantaneously affects the state of its entangled partner, regardless of the spatial separation between them.\n\nII. Nonlocality and Bells Inequality\n\nThe nonlocality inherent in quantum entanglement challenges the classical principles of locality and causality. John Bells groundbreaking work in the 1960s led to the formulation of Bells inequality, a mathematical criterion to test whether quantum mechanics adheres to local realism or if it must embrace nonlocality.\n\nIII. Entanglement and the Measurement Problem\n\nThe measurement problem, a central conundrum in quantum mechanics, becomes even more enigmatic in the context of quantum entanglement. When we observe one of the entangled particles, it collapses into a definite state, instantaneously determining the state of its entangled partner, regardless of the distance between them. This raises philosophical questions about the nature of reality, the role of the observer, and the existence of multiple realities or parallel universes.\n\nIV. Quantum Entanglement and Quantum Computing\n\nThe mind-boggling implications of quantum entanglement extend far beyond philosophical debates. The field of quantum computing exploits the phenomenon of entanglement to perform computations exponentially faster than classical computers. Quantum bits, or qubits, in a superposition of states can be entangled to enhance information processing capabilities, revolutionizing various industries, including cryptography, optimization, and drug discovery.\n\nV. Entanglement and Spacetime\n\nQuantum entanglement also intertwines with the fabric of spacetime, as suggested by recent theoretical research. Some physicists propose that entanglement may have a crucial role in understanding quantum gravity, reconciling the macroscopic world of general relativity with the microscopic world of quantum mechanics. The entanglement entropy is believed to be linked to the holographic principle, providing a deeper understanding of the fundamental nature of our universe.\n\nConclusion\n\nIn conclusion, quantum entanglement stands as one of the most profound and bewildering phenomena in modern physics. Its inherent nonlocality challenges the very fabric of reality, forcing us to reconsider our classical intuitions about causality and locality. From philosophical dilemmas to groundbreaking technological applications, quantum entanglement continues to push the boundaries of our knowledge, enticing us with the promise of unraveling the deepest secrets of the cosmos. The enigma of entanglement reminds us that there are still uncharted territories in the universe, waiting for the curious minds of future generations to explore and understand fully.',
+  },
+};
+
+/**
+ * 이 사이즈는 모아보기 페이지에서 쓰일 사이즈입니다. 글 내용과 공지 아이콘을 제외한 나머지 정보가 생략됩니다.
+ */
+export const Small: Story = {
+  args: {
+    author: '요술토끼',
+    profileImageSrc: 'https://i.imgur.com/gZJ1nHJ.png',
+    createdAt: '2022-03-04 12:34',
+    size: 'sm',
+    content:
+      '모아보기 페이지에서는 최소한의 정보만 표시합니다. 이 글 내용을 제외한 나머지 정보가 보이지 않죠?',
+  },
+};
+
+export const SmallWithTooLongContent: Story = {
+  args: {
+    author: '요술토끼',
+    profileImageSrc: 'https://i.imgur.com/gZJ1nHJ.png',
+    createdAt: '2022-03-04 12:34',
+    size: 'sm',
+    content:
+      'The Enigmatic Nature of Quantum Entanglement: Unraveling the Mysteries of Nonlocality\n\nIntroduction\n\nQuantum entanglement, a cornerstone phenomenon in quantum mechanics, has baffled physicists and philosophers alike since its discovery in the early 20th century. This essay delves into the intricacies of quantum entanglement, exploring its counterintuitive properties and profound implications on our understanding of reality. We shall embark on a journey through the mysterious realm of nonlocality, where seemingly disconnected particles share an inexplicable, instantaneous connection, defying classical notions of causality and locality.\n\nI. Historical Background and Quantum Entanglement Basics\n\nThe concept of quantum entanglement first emerged in 1935, as Erwin Schrödinger famously described it as "spooky action at a distance." The basic idea involves the entangling of two or more quantum particles, such as photons or electrons, in a way that their quantum states become inextricably linked. Once entangled, the particles exhibit a peculiar behavior - any change to the state of one particle instantaneously affects the state of its entangled partner, regardless of the spatial separation between them.\n\nII. Nonlocality and Bells Inequality\n\nThe nonlocality inherent in quantum entanglement challenges the classical principles of locality and causality. John Bells groundbreaking work in the 1960s led to the formulation of Bells inequality, a mathematical criterion to test whether quantum mechanics adheres to local realism or if it must embrace nonlocality.\n\nIII. Entanglement and the Measurement Problem\n\nThe measurement problem, a central conundrum in quantum mechanics, becomes even more enigmatic in the context of quantum entanglement. When we observe one of the entangled particles, it collapses into a definite state, instantaneously determining the state of its entangled partner, regardless of the distance between them. This raises philosophical questions about the nature of reality, the role of the observer, and the existence of multiple realities or parallel universes.\n\nIV. Quantum Entanglement and Quantum Computing\n\nThe mind-boggling implications of quantum entanglement extend far beyond philosophical debates. The field of quantum computing exploits the phenomenon of entanglement to perform computations exponentially faster than classical computers. Quantum bits, or qubits, in a superposition of states can be entangled to enhance information processing capabilities, revolutionizing various industries, including cryptography, optimization, and drug discovery.\n\nV. Entanglement and Spacetime\n\nQuantum entanglement also intertwines with the fabric of spacetime, as suggested by recent theoretical research. Some physicists propose that entanglement may have a crucial role in understanding quantum gravity, reconciling the macroscopic world of general relativity with the microscopic world of quantum mechanics. The entanglement entropy is believed to be linked to the holographic principle, providing a deeper understanding of the fundamental nature of our universe.\n\nConclusion\n\nIn conclusion, quantum entanglement stands as one of the most profound and bewildering phenomena in modern physics. Its inherent nonlocality challenges the very fabric of reality, forcing us to reconsider our classical intuitions about causality and locality. From philosophical dilemmas to groundbreaking technological applications, quantum entanglement continues to push the boundaries of our knowledge, enticing us with the promise of unraveling the deepest secrets of the cosmos. The enigma of entanglement reminds us that there are still uncharted territories in the universe, waiting for the curious minds of future generations to explore and understand fully.',
+  },
+};

frontend/src/components/NoticeThread/NoticeThread.styled.ts

@@ -0,0 +1,66 @@
+import { styled, css } from 'styled-components';
+import { noticeThreadBackground } from '~/assets/png';
+
+interface BoardProps {
+  isExpanded: boolean;
+  height: number;
+}
+
+export const ThreadContainer = styled.div`
+  position: relative;
+`;
+
+export const Thread = styled.div<BoardProps>`
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  row-gap: 20px;
+  position: relative;
+
+  width: 100%;
+  min-height: 200px;
+  max-height: ${({ height }) => height}px;
+  padding: 26px;
+  padding-bottom: ${({ isExpanded }) => (isExpanded ? '90px' : '26px')};
+
+  border-radius: 40px;
+  box-shadow: 0 0 16px ${({ theme }) => theme.color.GRAY300};
+  background-image: url(${noticeThreadBackground});
+  background-size: 100%;
+
+  transition: 0.3s;
+`;
+
+export const ThreadHeader = styled.header`
+  display: flex;
+  align-items: center;
+  column-gap: 8px;
+
+  width: 100%;
+  height: 36px;
+`;
+
+export const ProfileImage = styled.img`
+  width: 36px;
+  height: 36px;
+
+  border-radius: 8px;
+`;
+
+export const ContentWrapper = styled.div``;
+
+export const Divider = styled.span`
+  display: inline-block;
+
+  width: 1.5px;
+  height: 20px;
+  margin: 0 4px;
+
+  background-color: ${({ theme }) => theme.color.GRAY400};
+`;
+
+export const primaryNoticeTag = css`
+  position: absolute;
+  top: 22px;
+  right: -18px;
+`;