Feature/common feed

src/app/(MainLayout)/@types/commonFeed.ts

@@ -0,0 +1,17 @@
+type CommonFeedStep = '이미지추가' | '게시글작성';
+type FeedImage = {
+  name: string;
+  size: number;
+  src: string;
+  index: number;
+};
+
+type CommonFeedData = {
+  images: FeedImage[];
+  content: string;
+  hashtag: string[];
+};
+
+type CommonFeedPopup = 'confirm' | 'publish' | null;
+
+export type { CommonFeedStep, FeedImage, CommonFeedData, CommonFeedPopup };

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

@@ -0,0 +1,88 @@
+@use '../../../../styles/helpers/index' as *;
+
+.right_content {
+  width: 399px;
+  height: 100%;
+
+  .nickname {
+    padding: 20px;
+    border-bottom: 1px solid $COLOR_GRAY_1;
+    font-size: $FONT_SIZE_20;
+    height: 12%;
+    @include flex-start-center;
+    font-weight: 700;
+
+    img {
+      border-radius: 50%;
+      background-color: $COLOR_GRAY_7;
+    }
+    span {
+      position: relative;
+      top: 5px;
+      height: 32px;
+    }
+  }
+
+  .feed_content {
+    padding: 17px;
+
+    p {
+      font-weight: 700;
+    }
+
+    textarea {
+      width: 100%;
+      height: 150px;
+      margin: 15px 0;
+      font-size: $FONT_SIZE_14;
+    }
+  }
+
+  .prev_btn {
+    position: absolute;
+    width: 175px;
+    height: 50px;
+    bottom: 17px;
+    right: 207px;
+  }
+
+  .next_btn {
+    position: absolute;
+    width: 175px;
+    height: 50px;
+    bottom: 17px;
+    right: 17px;
+  }
+}
+
+.my_interest_list {
+  display: flex;
+  width: 100%;
+  gap: 5px;
+  flex-wrap: wrap;
+  margin-top: 10px;
+
+  .my_interest {
+    @include res--desktop {
+      position: relative;
+      padding: 10px 20px;
+      background-color: $COLOR_GRAY_9;
+      border: 1px solid $COLOR_GRAY_1;
+      border-radius: 10px;
+      transition: background 0.1s;
+      cursor: pointer;
+
+      &:hover {
+        background-color: $COLOR_PRIMARY_2;
+        border-color: $COLOR_PRIMARY_2;
+        color: $COLOR_GRAY_9;
+      }
+    }
+
+    i {
+      position: absolute;
+      left: 1px;
+      top: 1px;
+    }
+  }
+}

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

@@ -0,0 +1,131 @@
+import { ChangeEvent, SetStateAction, useEffect, useState } from 'react';
+import Image from 'next/image';
+import Button from '@/components/common/Button';
+import Typo from '@/components/common/Typo';
+import CircleCloseIcon from '@/assets/icons/circle-close-gray.svg';
+import MyInterestFieldForMyPage from '@/app/my/components/MyInterest/MyInterestFieldForMyPage';
+import If from '@/components/common/If';
+import { CommonFeedData, FeedImage } from '../../@types/commonFeed';
+import ImagePreview from '../ImagePreview/ImagePreview';
+import styles from './AddContent.module.scss';
+
+type AddContentProps = {
+  onPrev?: () => void;
+  onNext?: () => void;
+  images: FeedImage[];
+  currentImage: FeedImage | null;
+  setCurrentImage: React.Dispatch<SetStateAction<FeedImage | null>>;
+  data: CommonFeedData;
+  updateContents: (contents: string) => void;
+  updateHashtags: (hashtags: string[]) => void;
+};
+
+const AddContent = ({
+  onPrev,
+  onNext,
+  images,
+  currentImage,
+  setCurrentImage,
+  data,
+  updateContents,
+  updateHashtags,
+}: AddContentProps) => {
+  const [hashtags, setHashtags] = useState<string[]>([]);
+
+  const removeInterest = (index: number) => {
+    setHashtags((prev) => prev.filter((_, i) => i !== index));
+  };
+
+  const addInterest = (interest: string) => {
+    setHashtags((prev) => [...prev, interest]);
+  };
+
+  useEffect(() => {
+    updateHashtags(hashtags);
+  }, [hashtags]);
+
+  const onChangeTextarea = (e: ChangeEvent<HTMLTextAreaElement>) => {
+    updateContents(e.target.value);
+  };
+
+  return (
+    <>
+      {/* 좌측 영역 */}
+      <ImagePreview
+        images={images}
+        currentImage={currentImage!}
+        setCurrentImage={setCurrentImage}
+      />
+      {/* 우측 영역 */}
+      <div className={styles.right_content}>
+        <div className={styles.nickname}>
+          <Image
+            src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcT4vkwPhD-NHO6sV_3ailgWXjiP_WPM24J3IhkB3xZ-bQ&s"
+            alt=""
+            width="32"
+            height="32"
+          />
+          <Typo as="span" color="gray-2" fontSize="body-16">
+            seongjin
+          </Typo>
+        </div>
+        <div className={styles.feed_content}>
+          <Typo as="p" color="gray-2" fontSize="body-20">
+            게시글 작성
+          </Typo>
+          {/* 컴포넌트화 */}
+          <textarea
+            value={data?.content}
+            onChange={(e: ChangeEvent<HTMLTextAreaElement>) =>
+              onChangeTextarea(e)
+            }
+            placeholder="문구 작성 ..."
+            maxLength={2000}
+          />
+          <Typo as="p" color="gray-2" fontSize="body-20">
+            해시태그 작성
+            <Typo as="span" color="gray-4" fontSize="body-20">
+              (최대 5개)
+            </Typo>
+          </Typo>
+          <ul className={styles.my_interest_list}>
+            {hashtags.map((hashtag, index) => (
+              <button
+                key={hashtag}
+                className={styles.my_interest}
+                onClick={() => removeInterest(index)}
+              >
+                #{hashtag}
+                <i>
+                  <CircleCloseIcon />
+                </i>
+              </button>
+            ))}
+            <If condition={hashtags.length < 5}>
+              <If.True>
+                <MyInterestFieldForMyPage
+                  checkList={hashtags}
+                  addInterestHandler={addInterest}
+                />
+              </If.True>
+            </If>
+          </ul>
+        </div>
+        <div>
+          <Button className={styles.prev_btn} fill="gray" onClick={onPrev}>
+            이전 단계로
+          </Button>
+          <Button
+            disabled={data.content.length === 0}
+            className={styles.next_btn}
+            onClick={onNext}
+          >
+            게시
+          </Button>
+        </div>
+      </div>
+    </>
+  );
+};
+
+export default AddContent;

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

@@ -0,0 +1,98 @@
+@use '../../../../styles/helpers/index' as *;
+
+.right_content {
+  width: 399px;
+  height: 100%;
+
+  .add_img_title {
+    padding: 26px;
+    border-bottom: 1px solid $COLOR_GRAY_1;
+    font-size: $FONT_SIZE_20;
+    height: 12%;
+
+    span {
+      color: $COLOR_GRAY_2;
+    }
+  }
+
+  .image_upload_wrapper {
+    padding: 20px;
+    gap: 25px;
+    @include flex-row;
+    flex-wrap: wrap;
+
+    .image_preview_box {
+      position: relative;
+
+      .feed_image_preview {
+        border: 1px solid $COLOR_GRAY_1;
+        border-radius: 10px;
+        object-fit: cover;
+      }
+
+      .image_remove {
+        position: absolute;
+        width: 14px;
+        height: 14px;
+        left: 6px;
+        top: 6px;
+        cursor: pointer;
+      }
+    }
+
+    .image_upload {
+      border: 1px solid $COLOR_GRAY_1;
+      border-radius: 10px;
+      width: 100px;
+      height: 100px;
+
+      .file_input {
+        display: none;
+      }
+
+      .file_label_wrapper {
+        width: 100%;
+        height: 100%;
+        cursor: pointer;
+
+        .file_label {
+          display: inline-block;
+          width: 100%;
+          height: 100%;
+          @include flex-center;
+          svg {
+            position: absolute;
+          }
+        }
+      }
+    }
+  }
+
+  .add_img {
+    @include flex-column;
+    @include flex-space-between;
+    padding: 25px;
+    height: 88%;
+    .image {
+      border: 1px solid $COLOR_GRAY_1;
+      border-radius: 10px;
+      width: 100px;
+      height: 100px;
+      cursor: pointer;
+
+      svg {
+        position: relative;
+        top: calc(50% - 16px);
+        left: calc(50% - 16px);
+      }
+    }
+  }
+
+  .next_btn {
+    position: absolute;
+    width: 365px;
+    height: 50px;
+    bottom: 17px;
+    right: 17px;
+  }
+}