[권주현] Week13

.gitignore

@@ -4,6 +4,7 @@
 /node_modules
 /.pnp
 .pnp.js
+.yarn/install-state.gz
 
 # testing
 /coverage

README.md

@@ -1,40 +1,56 @@
-This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app).
-
-## Getting Started
-
-First, run the development server:
-
-```bash
-npm run dev
-# or
-yarn dev
-# or
-pnpm dev
-# or
-bun dev
-```
-
-Open [http://localhost:3000](http://localhost:3000) with your browser to see the result.
-
-You can start editing the page by modifying `pages/index.tsx`. The page auto-updates as you edit the file.
-
-[API routes](https://nextjs.org/docs/api-routes/introduction) can be accessed on [http://localhost:3000/api/hello](http://localhost:3000/api/hello). This endpoint can be edited in `pages/api/hello.ts`.
-
-The `pages/api` directory is mapped to `/api/*`. Files in this directory are treated as [API routes](https://nextjs.org/docs/api-routes/introduction) instead of React pages.
-
-This project uses [`next/font`](https://nextjs.org/docs/basic-features/font-optimization) to automatically optimize and load Inter, a custom Google Font.
-
-## Learn More
-
-To learn more about Next.js, take a look at the following resources:
-
-- [Next.js Documentation](https://nextjs.org/docs) - learn about Next.js features and API.
-- [Learn Next.js](https://nextjs.org/learn) - an interactive Next.js tutorial.
-
-You can check out [the Next.js GitHub repository](https://github.com/vercel/next.js/) - your feedback and contributions are welcome!
-
-## Deploy on Vercel
-
-The easiest way to deploy your Next.js app is to use the [Vercel Platform](https://vercel.com/new?utm_medium=default-template&filter=next.js&utm_source=create-next-app&utm_campaign=create-next-app-readme) from the creators of Next.js.
-
-Check out our [Next.js deployment documentation](https://nextjs.org/docs/deployment) for more details.
+## Styles
+
+### Week7
+
+1. 상단 네비게이션 바, 푸터를 랜딩 페이지와 동일한 스타일과 규칙으로 만듭니다. (week 1 ~ 3 요구사항 참고)
+2. Static, no image, Hover 상태 디자인을 보여주는 카드 컴포넌트를 만듭니다.
+3. Hover 상태에서 이미지가 기본 크기의 130%로 변합니다.
+4. 카드 컴포넌트를 클릭하면 해당 링크로 새로운 창을 띄워서 이동합니다.
+5. Tablet에서 카드 리스트가 화면의 너비 1124px를 기준으로 이상일 때는 3열로 작을 때는 2열로 배치됩니다.
+6. Tablet, Mobile에서 좌우 최소 여백은 32px 입니다.
+
+### Week8
+
+1. 반응형을 위한 스타일코드들을 리팩토링 합니다.
+
+## API & Logic
+
+### Week7
+
+1. 상단 네비게이션 바에 프로필 영역의 데이터는 https://bootcamp-api.codeit.kr/docs 에 명세된 “/api/sample/user”를 활용합니다.
+2. 상단 네비게이션 바에 프로필 영역의 데이터가 없는 경우 “로그인” 버튼이 보이도록 만듭니다.
+3. 폴더 소유자, 폴더 이름 영역, 링크들에 대한 데이터는 “/api/sample/folder”를 활용합니다.
+4. 커스텀 hook을 만들어 사용합니다.(선택)
+5. shared 페이지는 외부 유저에게 자신의 폴더 데이터 하나를 공유할 때 유저가 보게되는 화면 입니다.
+6. 카드 컴포넌트에서 createdAt 데이터 기준으로 현재 Date와 차이에 따라 아래와 같은 규칙으로 설정해 주세요.
+   - 2분 미만은 “1 minute ago”
+   - 59분 이하는 “OO minutes ago”
+   - 60분 이상은 “1 hour ago”
+   - 23시간 이하는 “OO hours ago”
+   - 24시간 이상은 “1 day ago”
+   - 30일 이하는 “OO days ago”
+   - 31일 이상은 “1 month ago”
+   - 11달 이하는 “OO months ago”
+   - 12달 이상은 “1 year ago”
+   - OO달 이상은 “{OO/12(소수점 버린 정수)} years ago”
+
+### Week8
+
+1. useEffect 훅의 내부로직과 디펜던스를 올바르게 수정합니다.
+2. api와 util함수들을 디렉토리를 따로 생성해 관리를 쉽게 합니다.
+3. GNB의 네이밍을 더 목적에 맞게 수정합니다.
+4. 시간경과 함수의 하드코딩이 된 부분을 더 명확하고 깔끔하게 수정합니다.
+5. 시간경과 함수의 조건문을 수정합니다.
+
+### Week13
+
+1. 기존의 프로젝트를 nextjs로 마이그레이션 합니다.
+2. 폴더페이지에서 아이디가 있는 폴더로 변경했을 때 전체폴더로 돌아갈 수 없는 문제를 해결합니다.
+3. 검색바의 기능을 구현합니다.
+4. 로그인, 회원가입에 필요한 인풋을 구현합니다.
+5. 기존의 react-router-dom으로 구현했던 쿼리파라미터 관련 로직을 next의 useRouter로 변경합니다.
+
+### Week14
+
+1. 소셜공유 로직을 분리합니다.
+2. 모달 컴포넌트를 더 명확하고 간단하게 리팩토링합니다.

components/Avatar/Avatar.module.css

@@ -0,0 +1,18 @@
+.avatar {
+  position: relative;
+  margin-right: 6px;
+}
+
+.avatar img {
+  border-radius: 100%;
+}
+
+.small {
+  width: 35px;
+  height: 35px;
+}
+
+.medium {
+  width: 100px;
+  height: 100px;
+}

components/Avatar/index.tsx

@@ -0,0 +1,23 @@
+import Image from "next/image";
+import classNames from "classnames";
+import styles from "@/components/Avatar/Avatar.module.css";
+
+interface AvatarProps {
+  src: string;
+  size: string;
+}
+
+function Avatar({ src, size }: AvatarProps) {
+  const avatarClass = classNames(styles.avatar, {
+    [styles.small]: size === "small",
+    [styles.medium]: size === "medium",
+  });
+
+  return (
+    <div className={avatarClass}>
+      <Image fill src={src} alt="avatar" />
+    </div>
+  );
+}
+
+export default Avatar;

components/FolderController/FoldersController.module.css

@@ -0,0 +1,16 @@
+.container {
+  width: 1060px;
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) and (max-width: 1199px) {
+  .container {
+    width: 705px;
+  }
+}
+
+@media (min-width: 375px) and (max-width: 767px) {
+  .container {
+    width: 325px;
+  }
+}

components/FolderController/index.tsx

@@ -0,0 +1,74 @@
+import { useState } from "react";
+import { useRouter } from "next/router";
+import useAsync from "@/lib/useAsync";
+import { FolderData, LinkData, getLinksByUserIdAndFolderId } from "@/lib/api";
+import SearchBar from "@/components/SearchBar";
+import FoldersList from "@/components/FoldersList";
+import FolderLinkCards from "@/components/FolderLinkCards";
+import styles from "@/components/FolderController/FoldersController.module.css";
+
+interface FoldersControllerProps {
+  folders: FolderData[];
+  userId: number;
+}
+
+function FoldersController({ folders, userId }: FoldersControllerProps) {
+  const [searchedLinks, setSearchedLinks] = useState<LinkData[] | null>(null);
+  const [selectedFolderId, setSelectedFolderId] = useState<number | null>(null);
+  const router = useRouter();
+  const {
+    value: links,
+    isLoading,
+    error,
+  } = useAsync<LinkData[]>(
+    getLinksByUserIdAndFolderId,
+    userId,
+    selectedFolderId
+  );
+
+  const handleClickFolder = (folderId: number | null) => {
+    router.push({
+      pathname: router.pathname,
+      query: { ...router.query, folderId },
+    });
+
+    if (!folderId) {
+      router.push({
+        pathname: router.pathname,
+      });
+    }
+
+    setSelectedFolderId(folderId);
+  };
+
+  const handleSearchByKeyword = (keyword: string) => {
+    if (!links) return console.log("링크가 존재하지 않습니다!");
+    const searchedLink = links?.filter((link) => link.title?.includes(keyword));
+    if (!searchedLink) return console.log("해당 링크가 존재하지 않습니다!");
+    setSearchedLinks(searchedLink);
+  };
+
+  return (
+    <section className={styles.container}>
+      <SearchBar onSearch={handleSearchByKeyword} />
+      {isLoading ? (
+        <div>Loading...</div>
+      ) : error ? (
+        <div>Error loading data.</div>
+      ) : (
+        links && (
+          <>
+            <FoldersList
+              handleClick={handleClickFolder}
+              folders={folders}
+              selectedFolderId={selectedFolderId}
+            />
+            <FolderLinkCards links={links} searchedLinks={searchedLinks} />
+          </>
+        )
+      )}
+    </section>
+  );
+}
+
+export default FoldersController;

components/FolderLinkCard/index.tsx

@@ -0,0 +1,94 @@
+import { ReactElement, useState } from "react";
+import Image from "next/image";
+import { LinkData } from "@/lib/api";
+import { displayCreatedTime, formatDateString } from "@/lib/dateUtils";
+import Modal from "@/components/Modal";
+import styles from "@/components/LinkCard.module.css";
+import { FaRegStar } from "react-icons/fa";
+import { GoKebabHorizontal } from "react-icons/go";
+import LinkDeleteForm from "../Modal/childrens/LinkDeleteForm";
+import LinkAddToFolderForm from "../Modal/childrens/LinkAddToFolderForm";
+
+interface FolderLinkCardProps {
+  link: LinkData;
+}
+
+interface ActionTypes {
+  [actionType: string]: ReactElement;
+}
+
+function FolderLinkCard({ link }: FolderLinkCardProps) {
+  const [onModal, setOnModal] = useState(false);
+  const [modalContent, setModalContent] = useState<ReactElement | null>(null);
+
+  const handleClickModal = (actionType: string) => {
+    const actionTypes: ActionTypes = {
+      deleteLink: <LinkDeleteForm />,
+      addLink: <LinkAddToFolderForm />,
+    };
+
+    setModalContent(actionTypes[actionType]);
+    setOnModal(true);
+  };
+
+  const { url, description, title, created_at, image_source } = link;
+
+  const createdTime = displayCreatedTime(created_at);
+  const createdAtFormat = formatDateString(created_at);
+
+  const src = image_source || "/card-default.png";
+
+  const handleToggleDropDown = (e: React.MouseEvent<HTMLButtonElement>) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    const button = e.currentTarget;
+    const linkInfo = button.closest(`.${styles.linkInfo}`);
+    const dropdown = linkInfo?.querySelector(`.${styles.dropdown}`);
+
+    dropdown?.classList.toggle(styles.hidden);
+  };
+
+  return (
+    <div className={styles.linkContainer}>
+      <a href={url} target="_blank" rel="noreferrer">
+        <div className={styles.imageWrapper}>
+          <div className={styles.linkImage}>
+            <Image
+              fill
+              src={src}
+              alt={title || "링크 카드"}
+              style={{ objectFit: "cover" }}
+              sizes="(max-width: 767px) 325px, 340px"
+              priority
+            />
+          </div>
+          <FaRegStar className={styles.starIcon} />
+        </div>
+      </a>
+      <div className={styles.linkInfo}>
+        <div className={styles.linkInfoContent}>
+          <div>{createdTime}</div>
+          <button onClick={handleToggleDropDown} className={styles.kebabButton}>
+            <GoKebabHorizontal />
+          </button>
+        </div>
+        <div className={styles.linkInfoContent}>{description}</div>
+        <div className={styles.linkInfoContent}>{createdAtFormat}</div>
+        <div className={`${styles.dropdown} ${styles.hidden}`}>
+          <button onClick={() => handleClickModal("deleteLink")}>
+            삭제하기
+          </button>
+          <button onClick={() => handleClickModal("addLink")}>
+            폴더에 추가
+          </button>
+        </div>
+      </div>
+      {onModal && (
+        <Modal onClick={() => setOnModal(false)}>{modalContent}</Modal>
+      )}
+    </div>
+  );
+}
+
+export default FolderLinkCard;

components/FolderLinkCards/index.tsx

@@ -0,0 +1,32 @@
+import { LinkData } from "@/lib/api";
+import FolderLinkCard from "@/components/FolderLinkCard";
+import styles from "@/components/LinkCards.module.css";
+
+interface FolderLinkCardsProps {
+  links: LinkData[];
+  searchedLinks: LinkData[] | null;
+}
+
+function FolderLinkCards({ links, searchedLinks }: FolderLinkCardsProps) {
+  return (
+    <>
+      {links.length > 0 ? (
+        <section className={styles.container}>
+          <ul className={styles.linkList}>
+            {(searchedLinks ? searchedLinks : links).map((link) => (
+              <li key={link.id}>
+                <FolderLinkCard link={link} />
+              </li>
+            ))}
+          </ul>
+        </section>
+      ) : (
+        <div className={`${styles.container} ${styles.empty}`}>
+          저장된 링크가 없습니다.
+        </div>
+      )}
+    </>
+  );
+}
+
+export default FolderLinkCards;