[정지성] Week13

.babelrc

@@ -0,0 +1,4 @@
+{
+  "presets": ["next/babel"],
+  "plugins": ["babel-plugin-styled-components"]
+}

components/Addlink/index.module.css

@@ -0,0 +1,62 @@
+.addLinkBar {
+  position: relative;
+  margin: 0 auto;
+  width: 80rem;
+  display: flex;
+  align-items: center;
+  background-color: var(--light-blue);
+
+  @media (max-width: 1123px) {
+    width: 70.4rem;
+  }
+
+  @media (max-width: 767px) {
+    width: 32.5rem;
+  }
+}
+
+.addLinkInput {
+  width: 100%;
+  padding: 2rem 3.8rem 2rem 5.2rem;
+  border-radius: 1rem;
+  border: 1px solid var(--primary);
+  background-color: var(--white);
+  font-size: 1.4rem;
+  display: flex;
+  justify-content: center;
+
+  @media (min-width: 768px) {
+    padding-left: 4.2rem;
+    font-size: 1.6rem;
+    line-height: 150%;
+  }
+}
+
+.addLinkBar::placeholder {
+  color: var(--gray60);
+}
+
+.addLinkIcon {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  left: 1.6rem;
+}
+
+.addLinkButton {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+
+  cursor: pointer;
+  padding: 1rem 1.55rem;
+  background-image: linear-gradient(135deg, var(--primary) 0%, #6ae3fe 100%);
+  border-radius: 0.8rem;
+  color: #f5f5f5;
+  font-size: 1.4rem;
+  font-weight: 600;
+  position: absolute;
+  right: 2rem;
+  top: 55%;
+  transform: translateY(-50%);
+}

components/Addlink/index.tsx

@@ -0,0 +1,63 @@
+import styled from 'styled-components';
+import { useState, ChangeEvent } from 'react';
+import ModalAddToFolder from '@/components/modal/ModalAddToFolder';
+import styles from '@/components/Addlink/index.module.css';
+import addLinkIcon from '@/public/link.svg';
+import Image from 'next/image';
+
+const AddlinkContainer = styled.div`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 100%;
+  height: 24.4rem;
+  padding: 2rem 0 6rem;
+  background-color: var(--light-blue);
+`;
+
+function Addlink() {
+  const [isModalOpen, setIsModalOpen] = useState(false);
+  const [targetName, setTargetName] = useState('');
+
+  function handleClickButton() {
+    setIsModalOpen((prev) => !prev);
+  }
+  function handleChange(event: ChangeEvent<HTMLInputElement>) {
+    setTargetName(event.target.value);
+  }
+  function handleCloseModal() {
+    setIsModalOpen(false); // 모달을 닫습니다.
+  }
+
+  return (
+    <AddlinkContainer>
+      <div className={styles.addLinkBar}>
+        <input
+          type="search"
+          className={styles.addLinkInput}
+          placeholder="링크를 추가해 보세요."
+          value={targetName}
+          onChange={handleChange}
+        />
+        <Image
+          src={addLinkIcon}
+          className={styles.addLinkIcon}
+          alt="링크 추가 아이콘"
+        />
+        <button className={styles.addLinkButton} onClick={handleClickButton}>
+          추가하기
+        </button>
+        {isModalOpen && (
+          <ModalAddToFolder
+            title={'폴더에 추가'}
+            targetName={targetName}
+            isModalOpen={isModalOpen}
+            onClose={handleCloseModal}
+          />
+        )}
+      </div>
+    </AddlinkContainer>
+  );
+}
+
+export default Addlink;

components/Cards/index.module.css

@@ -0,0 +1,81 @@
+.card {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
+  border-radius: 10px;
+}
+
+.card_txt_div_body {
+  margin: 0.8rem 0;
+  font-size: 1.2rem;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  white-space: normal;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
+.left_time_p {
+  font-size: 1.4rem;
+  color: var(--text-content-gray);
+}
+
+.card_txt_div_body {
+  font-size: 1.6rem;
+}
+
+.card_txt_date {
+  font-size: 1.4rem;
+  color: var(--text-content-black);
+  margin-bottom: 1rem;
+}
+
+.card_txt_div {
+  padding: 1.5rem 2rem;
+}
+
+.noLinkText {
+  font-size: 1.6rem;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  grid-column: span 3;
+}
+.card_img_div {
+  position: relative;
+  width: 34rem;
+  height: 20rem;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+}
+
+.card_img {
+  width: 34rem;
+  height: 20rem;
+  object-fit: cover;
+  border-top-left-radius: 10px;
+  border-top-right-radius: 10px;
+
+  @media (max-width: 767px) {
+    width: 32.5rem;
+  }
+}
+
+.card_grid_container {
+  display: grid;
+  grid-template-columns: repeat(3, 34rem);
+  grid-template-rows: 33.4rem;
+  column-gap: 2rem;
+  row-gap: 2.5rem;
+  margin: 0 auto;
+
+  @media (max-width: 1123px) {
+    grid-template-columns: repeat(2, 34rem);
+  }
+
+  @media (max-width: 767px) {
+    grid-template-columns: 32.5rem;
+  }
+}

components/Cards/index.tsx

@@ -0,0 +1,77 @@
+import { useFetch } from '@/hooks/useFetch';
+import { formatDate, generateTimeText } from '@/hooks/date';
+import styles from '@/components/Cards/index.module.css';
+import Image from 'next/image';
+import { SyntheticEvent } from 'react';
+
+export interface Link {
+  id: string;
+  url: string;
+  imageSource?: string;
+  title: string;
+  createdAt: Date;
+  description: string;
+}
+
+interface FolderData {
+  folder: {
+    links: Link[];
+  };
+}
+
+const AddThumbnail = (e: SyntheticEvent<HTMLImageElement, Event>) => {
+  e.currentTarget.src = '/thumbnail.svg';
+};
+
+function Cards({ url }: { url: string }) {
+  // props를 비구조화 할당하여 사용
+  const CardData = useFetch<FolderData>(url);
+
+  return (
+    <div className={styles.card_grid_container}>
+      {CardData ? (
+        CardData.folder.links.map((link: Link) => (
+          <a href={link.url} key={link.id}>
+            <div className={styles.card}>
+              <div className={styles.card_img_div}>
+                {link.imageSource ? (
+                  <img
+                    src={link.imageSource}
+                    className={styles.card_img}
+                    alt={link.title}
+                    onError={AddThumbnail}
+                  />
+                ) : (
+                  <Image
+                    width="320"
+                    height="200"
+                    src={'/thumbnail.svg'}
+                    className={styles.card_img}
+                    alt="thumbnail_img"
+                  />
+                )}
+              </div>
+              <div className={styles.card_txt_div}>
+                <div className={styles.card_txt_div_top}>
+                  <p className={styles.left_time_p}>
+                    {generateTimeText(link.createdAt)}
+                  </p>
+                </div>
+                <div className={styles.card_txt_div_body}>
+                  <p className={styles.card_txt_div_body}>{link.description}</p>
+                </div>
+                <div className={styles.card_txt_date}>
+                  {formatDate(link.createdAt)}
+                </div>
+              </div>
+            </div>
+          </a>
+        ))
+      ) : (
+        <div className={styles.noLinkText}>저장된 링크가 없습니다</div>
+      )}
+    </div>
+  );
+}
+
+export default Cards;