[김법균] 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/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>
+  );
+}

components/FolderToolBar/UtilButton.tsx

@@ -0,0 +1,25 @@
+import styles from './FolderToolBar.module.scss';
+import Image from 'next/image';
+
+interface UtilButtonProps {
+  imgSrc: string;
+  children: React.ReactNode;
+  onClick: () => void;
+  alt: string;
+}
+
+export default function UtilButton({
+  imgSrc,
+  children,
+  onClick,
+  alt,
+}: UtilButtonProps) {
+  return (
+    <button className={styles.utilButton} onClick={onClick}>
+      <div className={styles.utilButtonIcon}>
+        <Image src={imgSrc} alt={alt} fill />
+      </div>
+      {children}
+    </button>
+  );
+}

components/FolderToolBar/constants.ts

@@ -0,0 +1,37 @@
+const shareIcon = '/assets/images/share_icon.svg';
+const penIcon = '/assets/images/pen_icon.svg';
+const deleteIcon = '/assets/images/delete_icon.svg';
+
+interface UtilButtonProp {
+  imgSrc: string;
+  btnText: string;
+  alt: string;
+  id: number;
+  onClick: () => void;
+}
+
+const noop = () => {};
+
+export const UTIL_BUTTONS_PROPS: { [key: string]: UtilButtonProp } = {
+  share: {
+    imgSrc: shareIcon,
+    btnText: '공유',
+    alt: '공유 아이콘',
+    id: 1,
+    onClick: noop,
+  },
+  changeName: {
+    imgSrc: penIcon,
+    btnText: '이름 변경',
+    alt: '이름 변경 아이콘',
+    id: 2,
+    onClick: noop,
+  },
+  delete: {
+    imgSrc: deleteIcon,
+    btnText: '삭제',
+    alt: '삭제 아이콘',
+    id: 3,
+    onClick: noop,
+  },
+};

components/Header/Header.tsx

@@ -2,17 +2,48 @@ import Button from '../Button/Button';
 import Image from 'next/image';
 import styles from './Header.module.css';
 import Link from 'next/link';
+
+import Account from '@/components/Account/Account';
+import { useUserInfo } from '@/contexts/UserInfoContext';
+import { axiosInstance } from '@/utils/axiosInstance';
+import { useEffect } from 'react';
 export default function Header() {
+  const { userInfo, setUserInfo } = useUserInfo();
+  const loadUser = async () => {
+    const accessToken = localStorage.getItem('accessToken');
+    if (accessToken) {
+      const response = await axiosInstance.get('/users', {
+        headers: {
+          Authorization: `Bearer ${accessToken}`,
+        },
+      });
+      setUserInfo(response.data.data[0]);
+    }
+  };
+
+  useEffect(() => {
+    loadUser();
+  }, []);
+
   return (
     <>
       <header className={styles.headerContainer}>
         <div className={styles.headerBar}>
           <Link className={styles.logoImageContainer} href={`/`}>
             <Image src='/assets/images/logo.svg' alt='Logo' fill />
           </Link>
-          <Link href={'/signin'}>
-            <Button className={styles.signInButton}>로그인</Button>
-          </Link>
+
+          {userInfo ? (
+            <Account
+              profileImgSource={userInfo.image_source}
+              userEmail={userInfo.email}
+            />
+          ) : (
+            <Link href={'/signin'}>
+              <Button className={styles.signInButton}>로그인</Button>
+            </Link>
+          )}
+
         </div>
       </header>
     </>