Merge branch 'develop' of https://github.com/f-lab-edu/Prostargram-fr…

…ontend into feature/connect-api-sign-up

src/app/(MainLayout)/components/BasicFeedContent/BasicFeedContent.module.scss

@@ -0,0 +1,11 @@
+.image_wrap {
+  position: relative;
+  width: 630px;
+  height: 500px;
+
+  img {
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+  }
+}

src/app/(MainLayout)/components/BasicFeedContent/BasicFeedContent.tsx

@@ -0,0 +1,22 @@
+import Slide from '../Slide';
+import styles from './BasicFeedContent.module.scss';
+
+type BasicFeedContentProps = {
+  images: string[];
+};
+
+const BasicFeedContent = ({ images }: BasicFeedContentProps) => {
+  return (
+    <Slide>
+      {images.map((image) => {
+        return (
+          <div className={styles.image_wrap}>
+            <img src={image} alt="feed_image" />
+          </div>
+        );
+      })}
+    </Slide>
+  );
+};
+
+export default BasicFeedContent;

src/app/(MainLayout)/components/DebateContent/DebateContent.module.scss

@@ -0,0 +1,56 @@
+@use '../../../../styles/helpers/index' as *;
+
+.blue {
+  background-color: rgba(43, 89, 195, 0.3);
+}
+
+.red {
+  background-color: rgba(211, 101, 130, 0.3);
+}
+
+.container {
+  flex: 1;
+  border-right: 1px solid $COLOR_GRAY_2;
+
+  &:last-of-type {
+    border-right: none;
+  }
+
+  .debate_container {
+    position: relative;
+    height: 200px;
+    border-bottom: 1px solid $COLOR_GRAY_2;
+
+    @include flex-center;
+
+    h2 {
+      font-size: $FONT_SIZE_32;
+      font-weight: bold;
+      color: $COLOR_GRAY_2;
+    }
+
+    .vote_count {
+      position: absolute;
+      top: 20px;
+      left: 20px;
+      gap: 5px;
+
+      @include flex-center;
+    }
+
+    .vote {
+      position: absolute;
+      width: 100%;
+      height: 200px;
+      top: 0;
+      left: 0;
+      opacity: 0.5;
+      border-right: 1px solid $COLOR_GRAY_2;
+    }
+  }
+
+  .comment_container {
+    height: 539px;
+    overflow: scroll;
+  }
+}

src/app/(MainLayout)/components/DebateContent/DebateContent.tsx

@@ -0,0 +1,84 @@
+import clsx from 'clsx';
+
+import { digitNumberFormatter } from '@/utils/formatter';
+
+import BlueFlag from '@/assets/icons/blue_flag.svg';
+import BlueFillFlag from '@/assets/icons/blue_flag_fill.svg';
+import RedFlag from '@/assets/icons/red_flag.svg';
+import RedFillFlag from '@/assets/icons/red_flag_fill.svg';
+import FeedCommentList from '../FeedCommentList';
+
+import styles from './DebateContent.module.scss';
+import FeedCommentWriteInput from '../FeedCommentWriteInput';
+import { DebateOptionType } from '../../types/feed';
+
+interface DebateContentProps {
+  postId: number;
+  index: number;
+  option: DebateOptionType;
+  isSelected?: boolean;
+  ratio: number;
+  disabled?: boolean;
+}
+
+const FLAG_SET = {
+  BLUE: {
+    NORMAL: BlueFlag,
+    FILL: BlueFillFlag,
+  },
+  RED: {
+    NORMAL: RedFlag,
+    FILL: RedFillFlag,
+  },
+};
+
+const DebateContent = ({
+  postId,
+  index,
+  option,
+  ratio,
+  isSelected,
+  disabled,
+}: DebateContentProps) => {
+  const { optionContent, voteCount } = option;
+
+  const currentFlagType = index === 1 ? 'BLUE' : ('RED' as const);
+  const FLAG = FLAG_SET[currentFlagType];
+
+  const currentColor = currentFlagType === 'BLUE' ? styles.blue : styles.red;
+
+  return (
+    <div className={styles.container}>
+      <div className={clsx(styles.debate_container, currentColor)}>
+        <h2>{optionContent}</h2>
+        <div className={styles.vote_count}>
+          {isSelected ? <FLAG.FILL /> : <FLAG.NORMAL />}
+          {digitNumberFormatter(voteCount)}
+        </div>
+        <div
+          className={clsx(styles.vote, currentColor)}
+          style={{ width: `${ratio}%` }}
+        />
+      </div>
+      <div className={styles.comment_container}>
+        <FeedCommentList
+          feedId={postId.toString()}
+          feedCommentIds={['1', '2', '3']}
+        />
+      </div>
+      <div>
+        <FeedCommentWriteInput
+          postId={1}
+          placeholder={
+            disabled
+              ? '댓글 달기...'
+              : '다른 의견에 동의하셔서 입력하실 수 없습니다.'
+          }
+          disabled={!disabled}
+        />
+      </div>
+    </div>
+  );
+};
+
+export default DebateContent;

src/app/(MainLayout)/components/DebateContent/index.ts

@@ -0,0 +1 @@
+export { default } from './DebateContent';

src/app/(MainLayout)/components/DebateFeedContent/DebateFeedContent.module.scss

@@ -0,0 +1,42 @@
+@use '../../../../styles/helpers/index' as *;
+
+@mixin flag_icon {
+  position: absolute;
+  width: 24px;
+  height: 24px;
+}
+
+.debate_wrap {
+  position: relative;
+  width: 630px;
+  height: 500px;
+  @include flex-column;
+
+  .blue_area {
+    width: 100%;
+    height: 50%;
+    background-color: rgba(43, 89, 195, 0.3);
+    font-weight: bold;
+    @include flex-center;
+
+    svg {
+      @include flag_icon;
+      top: 15px;
+      left: 15px;
+    }
+  }
+
+  .red_area {
+    width: 100%;
+    height: 50%;
+    background-color: rgba(211, 101, 130, 0.3);
+    font-weight: bold;
+    @include flex-center;
+
+    svg {
+      @include flag_icon;
+      top: calc(50% + 15px);
+      left: 15px;
+    }
+  }
+}

src/app/(MainLayout)/components/DebateFeedContent/DebateFeedContent.tsx

@@ -0,0 +1,30 @@
+import BlueFlag from '@/assets/icons/blue_flag.svg';
+import RedFlag from '@/assets/icons/red_flag.svg';
+import Typo from '@/components/common/Typo';
+import { Post } from '../../types/feed';
+import styles from './DebateFeedContent.module.scss';
+
+type DebateFeedContentProps = {
+  debate: Post;
+};
+
+const DebateFeedContent = ({ debate }: DebateFeedContentProps) => {
+  return (
+    <div className={styles.debate_wrap}>
+      <div className={styles.blue_area}>
+        <Typo as="div" fontSize="body-32" textAlign="center">
+          {debate?.options?.[0].optionContent}
+        </Typo>
+        <BlueFlag />
+      </div>
+      <div className={styles.red_area}>
+        <Typo as="div" fontSize="body-32" textAlign="center">
+          {debate?.options?.[1].optionContent}
+        </Typo>
+        <RedFlag />
+      </div>
+    </div>
+  );
+};
+
+export default DebateFeedContent;

src/app/(MainLayout)/components/Feed/Feed.module.scss

@@ -0,0 +1,9 @@
+@use '../../../../styles/helpers/index' as *;
+
+.feed_container {
+  width: 630px;
+  height: auto;
+  min-height: 800px;
+  border-radius: 15px;
+  box-shadow: 3px 3px 10px 0px rgba(0, 0, 0, 0.25);
+}

src/app/(MainLayout)/components/Feed/Feed.tsx

@@ -0,0 +1,21 @@
+import styles from './Feed.module.scss';
+import FeedTop from '../FeedTop/FeedTop';
+import { MainFeed } from '../../types/feed';
+import FeedBottom from '../FeedBottom/FeedBottom';
+import FeedCenter from '../FeedCenter/FeedCenter';
+
+type FeedProps = {
+  feed: MainFeed;
+};
+
+const Feed = ({ feed }: FeedProps) => {
+  return (
+    <div className={styles.feed_container}>
+      <FeedTop feed={feed} />
+      <FeedCenter post={feed.post} />
+      <FeedBottom feed={feed} />
+    </div>
+  );
+};
+
+export default Feed;

src/app/(MainLayout)/components/FeedBottom/FeedBottom.module.scss

@@ -0,0 +1,6 @@
+@use '../../../../styles/helpers/index' as *;
+
+.feed_bottom {
+  padding: 15px 20px;
+  background-color: $COLOR_WHITE;
+}

src/app/(MainLayout)/components/FeedBottom/FeedBottom.tsx

@@ -0,0 +1,19 @@
+import { MainFeed } from '../../types/feed';
+import FeedContentBox from '../FeedContentBox/FeedContentBox';
+import FeedCountBox from '../FeedCountBox/FeedCountBox';
+import styles from './FeedBottom.module.scss';
+
+type FeedBottomProps = {
+  feed: MainFeed;
+};
+
+const FeedBottom = ({ feed }: FeedBottomProps) => {
+  return (
+    <div className={styles.feed_bottom}>
+      <FeedCountBox post={feed.post} />
+      <FeedContentBox feed={feed} />
+    </div>
+  );
+};
+
+export default FeedBottom;

src/app/(MainLayout)/components/FeedCenter/FeedCenter.module.scss

@@ -0,0 +1,6 @@
+@use '../../../../styles/helpers/index' as *;
+
+.feed_center {
+  height: 500px;
+  background-color: rgba(238, 238, 238, 1);
+}

src/app/(MainLayout)/components/FeedCenter/FeedCenter.tsx

@@ -0,0 +1,27 @@
+import { Post } from '../../types/feed';
+import BasicFeedContent from '../BasicFeedContent/BasicFeedContent';
+import DebateFeedContent from '../DebateFeedContent/DebateFeedContent';
+import styles from './FeedCenter.module.scss';
+
+const MOCK_IMAGE_URL = [
+  'https://flexible.img.hani.co.kr/flexible/normal/960/960/imgdb/resize/2019/0121/00501111_20190121.JPG',
+  'https://www.fitpetmall.com/wp-content/uploads/2023/10/shutterstock_1938687109-1.png',
+  'https://health.chosun.com/site/data/img_dir/2024/06/07/2024060701516_0.jpg',
+];
+
+type FeedCenterProps = {
+  post: Post;
+};
+
+const FeedCenter = ({ post }: FeedCenterProps) => {
+  return (
+    <div className={styles.feed_center}>
+      {post.postType === 'BASIC' && (
+        <BasicFeedContent images={MOCK_IMAGE_URL} />
+      )}
+      {post.postType === 'DEBATE' && <DebateFeedContent debate={post} />}
+    </div>
+  );
+};
+
+export default FeedCenter;

src/app/(MainLayout)/components/FeedComment/FeedComment.module.scss

@@ -0,0 +1,51 @@
+@use '../../../../styles/helpers/index' as *;
+
+.container {
+  margin-bottom: 1rem;
+}
+
+.reply_container {
+  margin-bottom: 1.75rem;
+}
+
+.profile_wrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-bottom: 5px;
+
+  .profile_nickname {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+    font-weight: bold;
+    color: $COLOR_GRAY_2;
+  }
+
+  .profile {
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    overflow: hidden;
+  }
+}
+
+.feed_content {
+  margin-bottom: 10px;
+  font-size: $FONT_SIZE_14;
+  color: $COLOR_GRAY_2;
+  line-height: 1.25rem;
+  white-space: pre-line;
+  word-wrap: break-word;
+}
+
+.feed_coment_info {
+  display: flex;
+  gap: 20px;
+  font-size: $FONT_SIZE_14;
+  color: $COLOR_GRAY_4;
+
+  .replay_write_button {
+    cursor: pointer;
+  }
+}