[김법균] Week14

.eslintrc.json

@@ -1,3 +1,3 @@
 {
-  "extends": "next/core-web-vitals"
+  "extends": "next"
 }

components/Account/Account.module.scss

@@ -0,0 +1,22 @@
+.account {
+  display: flex;
+  align-items: center;
+  gap: 6px;
+}
+.userProfileImg {
+  width: 28px;
+  aspect-ratio: 1/1;
+  border-radius: 50%;
+}
+
+.userEmail {
+  width: fit-content;
+  font-size: 14px;
+  @media (max-width: 767px) {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    clip: rect(0 0 0 0);
+    overflow: hidden;
+  }
+}

components/Account/Account.tsx

@@ -0,0 +1,20 @@
+import styles from './Account.module.scss';
+
+interface AccountProps {
+  profileImgSource?: string;
+  userEmail: string;
+}
+
+const Account = ({ profileImgSource, userEmail }: AccountProps) => {
+  return (
+    <div className={styles.account}>
+      <img
+        src={profileImgSource}
+        alt='User Profile'
+        className={styles.userProfileImg}
+      />
+      <span className={styles.userEmail}>{userEmail}</span>
+    </div>
+  );
+};
+export default Account;

components/AuthHeader/AuthHeader.module.css

@@ -0,0 +1,27 @@
+.authPageHeader {
+  display: flex;
+  flex-direction: column;
+  gap: 16px;
+  align-items: center;
+}
+
+.logo {
+  position: relative;
+  width: 218px;
+  height: 38px;
+}
+
+.membershipPromptBar {
+  display: flex;
+  gap: 8px;
+  font-family: inherit;
+}
+
+.membershipPromptText {
+  font-family: inherit;
+}
+
+.membershipPromptLink {
+  text-decoration: underline;
+  color: var(--Linkbrary-primary-color);
+}

components/AuthHeader/AuthHeader.tsx

@@ -0,0 +1,26 @@
+import Link from 'next/link';
+import Image from 'next/image';
+import styles from './AuthHeader.module.css';
+
+interface AuthHeaderProps {
+  text: string;
+  linkText: string;
+  link: string;
+}
+
+export default function AuthHeader({ text, linkText, link }: AuthHeaderProps) {
+  return (
+    <div className={styles.authPageHeader}>
+      <Link href={'/'} className={styles.logo}>
+        <Image src={'/assets/images/logo.svg'} fill alt='Linkbrary' />
+      </Link>
+
+      <div className={styles.membershipPromptBar}>
+        <span className={styles.membershipPromptText}>{text}</span>
+        <Link href={link} className={styles.membershipPromptLink}>
+          {linkText}
+        </Link>
+      </div>
+    </div>
+  );
+}

components/Button/Button.module.css

@@ -0,0 +1,25 @@
+.btn {
+  background-image: linear-gradient(to right, #6d6afe, #6de3fe);
+  padding: 10px 16px;
+  border-radius: 8px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  font-size: 1.125em;
+  font-weight: 600;
+  color: #f5f5f5;
+  text-decoration-line: none;
+  flex-shrink: 0;
+  font-family: Pretendard;
+}
+
+.btn:hover {
+  cursor: pointer;
+}
+
+@media (max-width: 767px) {
+  .btn {
+    padding: 10px 16px;
+    font-size: 14px;
+  }
+}

components/Button/Button.tsx

@@ -0,0 +1,30 @@
+import styles from './Button.module.css';
+
+interface ButtonProps {
+  children?: React.ReactNode;
+  onClick?: () => void;
+  className?: string;
+  type?: 'button' | 'submit' | 'reset' | undefined;
+  disabled?: boolean;
+}
+
+const Button = ({
+  children,
+  onClick,
+  className,
+  type = 'button',
+  disabled = false,
+}: ButtonProps) => {
+  return (
+    <button
+      onClick={onClick}
+      className={`${className} ${styles.btn}`}
+      type={type}
+      disabled={disabled}
+    >
+      {disabled ? '처리중' : children}
+    </button>
+  );
+};
+
+export default Button;

components/FolderToolBar/FolderToolBar.module.scss

@@ -0,0 +1,116 @@
+.folderToolBarContainer {
+  display: flex;
+  flex-direction: column;
+  gap: 24px;
+  width: 1060px;
+
+  .folderToolButtons {
+    display: flex;
+    width: 100%;
+    justify-content: space-between;
+    align-items: center;
+
+    .folderNameButtons {
+      display: flex;
+      flex-wrap: wrap;
+      width: 80%;
+      gap: 8px;
+    }
+  }
+
+  .folderNameDisplay {
+    font-size: 24px;
+    letter-spacing: -0.2px;
+    font-weight: 600;
+  }
+
+  .folderNameBar {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+
+    .utilButtons {
+      display: flex;
+      gap: 12px;
+    }
+  }
+
+  @media (max-width: 1124px) {
+    width: 706px;
+  }
+
+  @media (max-width: 767px) {
+    width: 325px;
+
+    .folderNameBar {
+      flex-direction: column;
+      align-items: flex-start;
+      gap: 12px;
+    }
+  }
+}
+
+.folderNameButton {
+  background-color: #fff;
+  border: 1px solid #6d6afe;
+  padding: 8px 12px;
+  border-radius: 5px;
+  height: 36px;
+
+  &:hover {
+    background-color: #e7effb;
+  }
+}
+
+.focusedButton {
+  background-color: #6d6afe;
+  color: #fff;
+  &:hover {
+    background-color: #6d6afe;
+  }
+}
+
+.utilButton {
+  position: relative;
+  display: flex;
+  gap: 4px;
+  color: #9fa6b2;
+  font-size: 14px;
+  font-weight: 600;
+}
+.utilButtonIcon {
+  position: relative;
+  width: 18px;
+  height: 18px;
+}
+
+.folderAddButton {
+  display: flex;
+  font-weight: 500;
+  gap: 4px;
+  color: #6d6afe;
+
+  .addIconWhite {
+    display: none;
+  }
+
+  @media (max-width: 767px) {
+    position: fixed;
+    bottom: 101px;
+    padding: 8px 24px;
+    left: 50%;
+    transform: translateX(-50%);
+    border-radius: 20px;
+    background-color: #6d6afe;
+    color: #fff;
+    z-index: 1;
+
+    .addIcon {
+      display: none;
+    }
+
+    .addIconWhite {
+      display: block;
+    }
+  }
+}

components/FolderToolBar/FolderToolBar.tsx

@@ -0,0 +1,87 @@
+import FolderToolBarButton from './FolderToolBarButton';
+import styles from './FolderToolBar.module.scss';
+import UtilButton from './UtilButton';
+import { UTIL_BUTTONS_PROPS } from './constants';
+import { FolderObj } from '@/utils/interfaces';
+
+const addIcon = '/assets/images/add_icon.svg';
+const addIconWhite = '/assets/images/add_icon_white.svg';
+interface FolderToolBarProps {
+  folders?: FolderObj[];
+  currentFolderId?: number;
+  folderNameOnClick: (id: number) => void;
+  onFolderNameChangeClick: () => void;
+  onFolderAddClick: () => void;
+  onFolderDeleteClick: () => void;
+  onShare: () => void;
+}
+
+export default function FolderToolBar({
+  folders,
+  currentFolderId,
+  folderNameOnClick,
+  onFolderAddClick,
+  onFolderNameChangeClick,
+  onFolderDeleteClick,
+  onShare,
+}: FolderToolBarProps) {
+  const currentFolder = folders?.find(
+    (folder) => folder.id === currentFolderId
+  );
+  const currentFolderName = currentFolder?.name;
+  UTIL_BUTTONS_PROPS.share.onClick = onShare;
+  UTIL_BUTTONS_PROPS.changeName.onClick = onFolderNameChangeClick;
+  UTIL_BUTTONS_PROPS.delete.onClick = onFolderDeleteClick;
+
+  return (
+    <div className={styles.folderToolBarContainer}>
+      <div className={styles.folderToolButtons}>
+        <ul className={styles.folderNameButtons}>
+          {folders?.map((item) => (
+            <li key={item.id}>
+              <FolderToolBarButton
+                onClick={folderNameOnClick}
+                id={item.id}
+                isFocused={item.id === currentFolderId}
+              >
+                {item.name}
+              </FolderToolBarButton>
+            </li>
+          ))}
+        </ul>
+
+        <button className={styles.folderAddButton} onClick={onFolderAddClick}>
+          <span>폴더 추가</span>
+          <img
+            src={addIcon}
+            alt='폴더 추가 아이콘'
+            className={styles.addIcon}
+          />
+          <img
+            src={addIconWhite}
+            alt='폴더 추가 아이콘'
+            className={styles.addIconWhite}
+          />
+        </button>
+      </div>
+      <div className={styles.folderNameBar}>
+        <span className={styles.folderNameDisplay}>{currentFolderName}</span>
+        <ul className={styles.utilButtons}>
+          {Object.entries(UTIL_BUTTONS_PROPS).map(([key, btn]) => (
+            <li key={btn.id}>
+              {currentFolderId !== -1 && (
+                <UtilButton
+                  imgSrc={btn.imgSrc}
+                  alt={btn.alt}
+                  onClick={btn.onClick}
+                >
+                  {btn.btnText}
+                </UtilButton>
+              )}
+            </li>
+          ))}
+        </ul>
+      </div>
+    </div>
+  );
+}

components/FolderToolBar/FolderToolBarButton.tsx

@@ -0,0 +1,29 @@
+import styles from './FolderToolBar.module.scss';
+
+interface FolderToolBarButtonProps {
+  id: number;
+  children: React.ReactNode;
+  onClick: (id: number) => void;
+  isFocused: boolean;
+}
+
+export default function FolderToolBarButton({
+  id,
+  children,
+  onClick,
+  isFocused,
+}: FolderToolBarButtonProps) {
+  const handleClick = () => {
+    onClick(id);
+  };
+  return (
+    <button
+      onClick={handleClick}
+      className={`${styles.folderNameButton} ${
+        isFocused && styles.focusedButton
+      }`}
+    >
+      {children}
+    </button>
+  );
+}