[조유담] week13

components/folder/data-access-folder/index.js

@@ -0,0 +1,2 @@
+export * from "./useGetFolder";
+export * from "./useGetFolders";

components/folder/data-access-folder/useGetFolder.ts

@@ -0,0 +1,13 @@
+import { SampleFolderRawData } from "folder/type";
+import { mapFolderData } from "folder/util-map";
+import { useAsync } from "sharing/util";
+import { axiosInstance } from "sharing/util";
+
+export const useGetFolder = () => {
+  const getFolder = () => axiosInstance.get<{ folder: SampleFolderRawData }>("sample/folder");
+  const { loading, error, data } = useAsync(getFolder);
+
+  const folderData = mapFolderData(data?.folder);
+
+  return { loading, error, data: folderData };
+};

components/folder/data-access-folder/useGetFolders.ts

@@ -0,0 +1,14 @@
+import { FolderRawData } from "folder/type";
+import { mapFoldersData } from "folder/util-map/mapFoldersData";
+import { axiosInstance } from "sharing/util";
+import { useAsync } from "sharing/util";
+
+export const useGetFolders = () => {
+  const getFolders = () => axiosInstance.get<{ data: FolderRawData[] }>("users/1/folders");
+  const { loading, error, data } = useAsync(getFolders);
+
+  const folders = mapFoldersData(data?.data);
+  const sortedFolders = folders.sort((a, b) => a?.id - b?.id);
+
+  return { loading, error, data: sortedFolders };
+};

components/folder/feature-folder-tool-bar/FolderToolBar.module.scss

@@ -0,0 +1,67 @@
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  row-gap: 1.2rem;
+
+  @include tablet {
+    display: grid;
+    grid-template-areas:
+      "folders folders add-button"
+      "folder-name buttons buttons";
+    justify-content: space-between;
+    align-items: center;
+    row-gap: 2.4rem;
+    column-gap: 1.2rem;
+  }
+}
+
+.folders {
+  grid-area: folders;
+  display: flex;
+  flex-wrap: wrap;
+  column-gap: 0.8rem;
+  row-gap: 1.2rem;
+  flex-grow: 1;
+}
+
+.add-button {
+  grid-area: add-button;
+
+  position: fixed;
+  bottom: 10.1rem;
+  left: 50%;
+  transform: translateX(-50%);
+  z-index: $z-index-fab;
+
+  @include tablet {
+    justify-self: flex-end;
+
+    position: static;
+    transform: none;
+  }
+}
+
+.folder-name {
+  grid-area: folder-name;
+  margin-top: 1.6rem;
+  font-size: 2rem;
+  font-weight: 600;
+  letter-spacing: -0.02rem;
+
+  @include tablet {
+    margin-top: 0;
+    font-size: 2.4rem;
+  }
+}
+
+.buttons {
+  justify-self: flex-start;
+  grid-area: buttons;
+  display: flex;
+  column-gap: 1.2rem;
+
+  @include tablet {
+    justify-self: flex-end;
+  }
+}

components/folder/feature-folder-tool-bar/FolderToolBar.tsx

@@ -0,0 +1,131 @@
+import styles from "./FolderToolBar.module.scss";
+import classNames from "classnames/bind";
+import { AddFolderButton } from "folder/ui-add-folder-button";
+import { FolderButton } from "folder/ui-folder-button";
+import { IconAndTextButton } from "sharing/ui-icon-and-text-button";
+import {
+  ALL_LINKS_TEXT,
+  BUTTONS,
+  KAKAO_SHARE_DATA,
+  MODALS_ID,
+} from "./constant";
+import { ALL_LINKS_ID } from "link/data-access-link/constant";
+import { KeyboardEvent, useState } from "react";
+import { ShareModal } from "folder/ui-share-modal";
+import { InputModal } from "sharing/ui-input-modal";
+import { AlertModal } from "sharing/ui-alert-modal";
+import { Folder, SelectedFolderId } from "folder/type";
+import { copyToClipboard, useKakaoSdk } from "sharing/util";
+
+const cx = classNames.bind(styles);
+
+type FolderToolBarProps = {
+  folders: Folder[];
+  selectedFolderId: SelectedFolderId;
+  onFolderClick: (folderId: SelectedFolderId) => void;
+};
+
+export const FolderToolBar = ({
+  folders,
+  selectedFolderId,
+  onFolderClick,
+}: FolderToolBarProps) => {
+  const { shareKakao } = useKakaoSdk();
+  const [currentModal, setCurrentModal] = useState<string | null>(null);
+  const [inputValue, setInputValue] = useState<string>("");
+
+  const folderName =
+    ALL_LINKS_ID === selectedFolderId
+      ? ALL_LINKS_TEXT
+      : folders?.find(({ id }) => id === selectedFolderId)?.name ?? "";
+  //const shareLink = `${window.location.origin}/shared?user=1&folder=${selectedFolderId}`;
+  const shareLink = `${undefined}/shared?user=1&folder=${selectedFolderId}`;
+
+  const closeModal = () => setCurrentModal(null);
+  const handleKeyDown = (event: KeyboardEvent<HTMLDivElement>) => {
+    if (event.key === "Escape") {
+      closeModal();
+    }
+  };
+  const handleKakaoClick = () => {
+    shareKakao({ url: shareLink, ...KAKAO_SHARE_DATA });
+  };
+  const handleFacebookClick = () =>
+    window.open(`http://www.facebook.com/sharer.php?u=${shareLink}`);
+  const handleLinkCopyClick = () => copyToClipboard(shareLink);
+
+  return (
+    <div className={cx("container")}>
+      <div className={cx("folders")}>
+        <FolderButton
+          key={ALL_LINKS_ID}
+          text={ALL_LINKS_TEXT}
+          onClick={() => onFolderClick(ALL_LINKS_ID)}
+          isSelected={ALL_LINKS_ID === selectedFolderId}
+        />
+        {folders?.map(({ id, name }) => (
+          <FolderButton
+            key={id}
+            text={name}
+            onClick={() => onFolderClick(id)}
+            isSelected={id === selectedFolderId}
+          />
+        ))}
+      </div>
+      <div className={cx("add-button")}>
+        <AddFolderButton onClick={() => setCurrentModal(MODALS_ID.addFolder)} />
+        <InputModal
+          isOpen={currentModal === MODALS_ID.addFolder}
+          title="폴더 추가"
+          placeholder="내용 입력"
+          buttonText="추가하기"
+          onCloseClick={closeModal}
+          onKeyDown={handleKeyDown}
+          value={inputValue}
+          onChange={(event) => setInputValue(event.target.value)}
+        />
+      </div>
+      <h2 className={cx("folder-name")}>{folderName}</h2>
+      {selectedFolderId !== ALL_LINKS_ID && (
+        <div className={cx("buttons")}>
+          {BUTTONS.map(({ text, iconSource, modalId }) => (
+            <IconAndTextButton
+              key={text}
+              text={text}
+              iconSource={iconSource}
+              onClick={() => setCurrentModal(modalId)}
+            />
+          ))}
+          <ShareModal
+            isOpen={currentModal === MODALS_ID.share}
+            folderName={folderName}
+            onKakaoClick={handleKakaoClick}
+            onFacebookClick={handleFacebookClick}
+            onLinkCopyClick={handleLinkCopyClick}
+            onCloseClick={closeModal}
+            onKeyDown={handleKeyDown}
+          />
+          <InputModal
+            isOpen={currentModal === MODALS_ID.rename}
+            title="폴더 이름 변경"
+            placeholder="내용 입력"
+            buttonText="변경하기"
+            onCloseClick={closeModal}
+            onKeyDown={handleKeyDown}
+            value={inputValue}
+            onChange={(event) => setInputValue(event.target.value)}
+          />
+          <AlertModal
+            isOpen={currentModal === MODALS_ID.delete}
+            title="폴더 삭제"
+            description={folderName}
+            buttonText="삭제하기"
+            onCloseClick={closeModal}
+            onKeyDown={handleKeyDown}
+            onClick={() => {}}
+          />
+        </div>
+      )}
+    </div>
+  );
+};

components/folder/feature-folder-tool-bar/constant.js

@@ -0,0 +1,32 @@
+export const MODALS_ID = {
+  addFolder: "addFolder",
+  share: "share",
+  rename: "rename",
+  delete: "delete",
+};
+
+export const BUTTONS = [
+  {
+    iconSource: "images/share.svg",
+    text: "공유",
+    modalId: MODALS_ID.share,
+  },
+  {
+    iconSource: "images/pen.svg",
+    text: "이름 변경",
+    modalId: MODALS_ID.rename,
+  },
+  {
+    iconSource: "images/trash.svg",
+    text: "삭제",
+    modalId: MODALS_ID.delete,
+  },
+];
+
+export const ALL_LINKS_TEXT = "전체";
+
+export const KAKAO_SHARE_DATA = {
+  title: "Linkbrary",
+  description: "링크를 저장하고 공유하는 가장 쉬운 방법",
+  imageUrl: "https://codeit-frontend.codeit.com/static/images/brand/og_tag.png",
+};

components/folder/feature-folder-tool-bar/index.js

@@ -0,0 +1 @@
+export * from "./FolderToolBar";

components/folder/type.ts

@@ -0,0 +1,32 @@
+import { SampleLinkRawData } from "link/type";
+
+export type SampleFolderRawData = {
+  id: number;
+  name: string;
+  owner: {
+    id: number;
+    name: string;
+    profileImageSource: string;
+  };
+  links: SampleLinkRawData[];
+};
+
+export type FolderRawData = {
+  id: number;
+  created_at: string;
+  name: string;
+  user_id: number;
+  link: {
+    count: number;
+  };
+};
+
+export type Folder = {
+  id: number;
+  createdAt: string;
+  name: string;
+  userId: number;
+  linkCount: number;
+};
+
+export type SelectedFolderId = number | "all";

components/folder/ui-add-folder-button/AddFolderButton.module.scss

@@ -0,0 +1,28 @@
+.container {
+  display: flex;
+  align-items: center;
+  column-gap: 0.4rem;
+  font-size: 1.6rem;
+  font-weight: 500;
+
+  height: 3.5rem;
+  padding: 0 2.4rem;
+  border-radius: 2rem;
+  border: 0.1rem solid $color-white;
+  background-color: $color-primary;
+  color: $color-gray10;
+
+  @include tablet {
+    padding: 0;
+    background-color: transparent;
+    color: $color-primary;
+  }
+}
+
+.icon {
+  fill: $color-gray10;
+
+  @include tablet {
+    fill: $color-primary;
+  }
+}

components/folder/ui-add-folder-button/AddFolderButton.tsx

@@ -0,0 +1,19 @@
+import styles from "./AddFolderButton.module.scss";
+import classNames from "classnames/bind";
+import AddIcon from "./add.svg";
+import { MouseEventHandler } from "react";
+
+const cx = classNames.bind(styles);
+
+type AddFolderButtonProps = {
+  onClick: MouseEventHandler<HTMLButtonElement>;
+};
+
+export const AddFolderButton = ({ onClick }: AddFolderButtonProps) => {
+  return (
+    <button className={cx("container")} onClick={onClick}>
+      <span>폴더 추가</span>
+      <AddIcon className={cx("icon")} />
+    </button>
+  );
+};

components/folder/ui-add-folder-button/index.js

@@ -0,0 +1 @@
+export * from "./AddFolderButton";

components/folder/ui-folder-button/FolderButton.module.scss

@@ -0,0 +1,25 @@
+.container {
+  display: flex;
+  align-items: center;
+  height: 3.1rem;
+  padding: 0 1rem;
+  border-radius: 0.5rem;
+  border: 0.1rem solid $color-primary;
+  font-size: 1.4rem;
+  transition: all 0.3s ease-in-out;
+
+  @include tablet {
+    height: 3.7rem;
+    padding: 0 1.2rem;
+    font-size: 1.6rem;
+  }
+
+  &:hover {
+    background-color: $color-gray10;
+  }
+
+  &.selected {
+    background-color: $color-primary;
+    color: $color-white;
+  }
+}