Merge pull request #305 from marie1016/Next-김주은-sprint10

[김주은] sprint10

components/CommentsList.module.css

@@ -0,0 +1,57 @@
+.contentWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.content {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: left;
+  color: #1f2937;
+  margin: 0;
+}
+
+.profile {
+  display: flex;
+  gap: 8px;
+  margin: 24px 0;
+  border-bottom: 1px solid #e5e7eb;
+  padding-bottom: 12px;
+}
+
+.writer {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.nickname {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  color: #4b5563;
+  margin: 0;
+}
+
+.time {
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 18px;
+  color: #9ca3af;
+  margin: 0;
+}
+
+.emptyImg {
+  margin: 40px auto 16px;
+}
+
+.emptyTitle {
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 26px;
+  text-align: center;
+  color: #9ca3af;
+  margin: 16px auto 48px;
+}

components/CommentsList.tsx

@@ -0,0 +1,50 @@
+import CommentType from "@/types/types";
+import Image from "next/image";
+import styles from "./CommentsList.module.css";
+
+interface CommentProps {
+  comment: CommentType;
+}
+
+export function CommentsList({ comment }: CommentProps) {
+  const createdDate = new Date(comment.createdAt);
+  const updatedDate = new Date(comment.updatedAt);
+
+  const timeDifference = updatedDate.getTime() - createdDate.getTime();
+
+  const hoursDifference = Math.ceil(timeDifference / (1000 * 60 * 60));
+
+  return (
+    <>
+      <section className={styles.contentWrapper}>
+        <p className={styles.content}>{comment.content}</p>
+        <Image src="/ic_modify.png" alt="수정 아이콘" width={24} height={24} />
+      </section>
+      <section className={styles.profile}>
+        <Image src="/profile.png" alt="프로필 이미지" width={32} height={32} />
+        <div className={styles.writer}>
+          <p className={styles.nickname}>{comment.writer.nickname}</p>
+          <p className={styles.time}>{hoursDifference}시간 전</p>
+        </div>
+      </section>
+    </>
+  );
+}
+
+export function CommentEmpty() {
+  return (
+    <>
+      <Image
+        src="/Img_reply_empty.png"
+        className={styles.emptyImg}
+        alt="아직 댓글이 없어요 이미지"
+        width={140}
+        height={140}
+      />
+      <p className={styles.emptyTitle}>
+        아직 댓글이 없어요, <br />
+        지금 댓글을 달아보세요!
+      </p>
+    </>
+  );
+}

components/Container.module.css

@@ -0,0 +1 @@
+

components/Container.tsx

@@ -0,0 +1,17 @@
+import styles from "./Container.module.css";
+interface ContainerProps {
+  className?: string;
+  page?: boolean;
+  children?: React.ReactNode;
+}
+
+export default function Container({
+  className = "",
+  page = false,
+  children,
+}: ContainerProps) {
+  const classNames = `${styles.container} ${
+    page ? styles.page : ""
+  } ${className}`;
+  return <div className={classNames}>{children}</div>;
+}

components/Dropdown.module.css

@@ -30,6 +30,7 @@
   text-align: left;
   color: #1f2937;
   margin-bottom: 9px;
+  z-index: 1000;
 }
 
 .sortImage {

components/Dropdown.tsx

@@ -12,7 +12,7 @@ const Dropdown = ({ options, selectedValue, onSelect }: DropdownProps) => {
   const [isOpen, setIsOpen] = useState(false);
 
   const toggleDropdown = () => {
-    setIsOpen(!isOpen);
+    setIsOpen((prev) => !prev);
   };
 
   // 옵션 선택 시 실행되는 함수

components/FileInput.module.css

@@ -0,0 +1,48 @@
+.fileWrapper {
+  width: 1200px;
+  margin: 0 auto;
+  display: flex;
+  gap: 24px;
+  position: relative;
+}
+
+.file {
+  width: 282px;
+  height: 282px;
+  border-radius: 12px;
+  border: none;
+  background-color: #f3f4f6;
+}
+
+.plusIcon {
+  position: relative;
+  top: 99px;
+  left: 117px;
+}
+
+.iconTitle {
+  position: absolute;
+  top: 159px;
+  left: 104px;
+  font-size: 16px;
+  font-weight: 400;
+  line-height: 24px;
+  color: #9ca3af;
+  margin: 0;
+}
+
+.preview {
+  border: none;
+  border-radius: 12px;
+}
+
+.button {
+  background: none;
+  border: none;
+}
+
+.XIcon {
+  position: absolute;
+  left: 556px;
+  top: 8px;
+}