[김은재] Week14

api/folder.ts

@@ -1,4 +1,5 @@
 import { BASE_URL } from "@/constants/url";
+import navEntireTab from "@/constants/folderNav";
 
 export const getFolderNavInfo = async () => {
   try {
@@ -17,7 +18,7 @@ export const getFolderNavInfo = async () => {
 
 export const getFolderListInfo = async (id: number) => {
   let query = "/api/users/1/links";
-  if (id !== 9999) {
+  if (id !== navEntireTab) {
     query = `${query}?folderId=${id}`;
   }
 

api/user.ts

@@ -0,0 +1,73 @@
+import { BASE_URL } from "@/constants/url";
+
+const POST_HEADER = {
+  "Content-Type": "application/json",
+};
+
+interface SignUserData {
+  email: string;
+  password: string;
+}
+
+export const getSignInProfile = async (userToken: string) => {
+  let result = null;
+
+  try {
+    const response = await fetch(`${BASE_URL}/api/users`, {
+      headers: {
+        Authorization: `Bearer ${userToken}`,
+      },
+    });
+    if (!response.ok) {
+      throw new Error(`${response.status}`);
+    }
+
+    result = await response.json();
+  } catch (error) {
+    if (error instanceof Error) alert(`${error.message}에러 발생!`);
+  }
+
+  return result;
+};
+
+export const postSign = async (apiUrl: string, userData: SignUserData) => {
+  let result = null;
+
+  try {
+    const response = await fetch(`${BASE_URL}/api/${apiUrl}`, {
+      method: "POST",
+      headers: POST_HEADER,
+      body: JSON.stringify(userData),
+    });
+    if (!response.ok && response.status !== 400) {
+      throw new Error(`${response.status}`);
+    }
+
+    result = await response.json();
+  } catch (error) {
+    if (error instanceof Error) alert(`${error.message}에러 발생!`);
+  }
+
+  return result;
+};
+
+export const postCheckEmail = async (email: string) => {
+  let result = null;
+
+  try {
+    const response = await fetch(`${BASE_URL}/api/check-email`, {
+      method: "POST",
+      headers: POST_HEADER,
+      body: JSON.stringify({ email: email }),
+    });
+    if (!response.ok && response.status !== 409) {
+      throw new Error(`${response.status}`);
+    }
+
+    result = await response.json();
+  } catch (error) {
+    if (error instanceof Error) alert(`${error.message}에러 발생!`);
+  }
+
+  return result;
+};

components/common/Button.styled.ts

@@ -33,6 +33,16 @@ const byTypeStyle: any = css<{ usetype: string }>`
       line-height: 19.09px;
       background: #ff5b56;
     `}
+    ${({ usetype }) =>
+    usetype === "sign" &&
+    css`
+      width: 100%;
+      font-size: 18px;
+      padding: 16px 20px;
+      font-weight: 600;
+      line-height: 21.48px;
+      margin: 30px 0 0;
+    `}
 `;
 
 export const Button = styled.button<{ usetype: string }>`
@@ -43,4 +53,9 @@ export const Button = styled.button<{ usetype: string }>`
   border: none;
   text-decoration: none;
   ${byTypeStyle}
+
+  &:disabled {
+    background: gray;
+    cursor: default;
+  }
 `;

components/common/Button.tsx

@@ -1,9 +1,20 @@
 import * as S from "./Button.styled";
 import { ButtonProps } from "@/types/Button";
 
-const Button = ({ children, type, handleButtonClick }: ButtonProps) => {
+const Button = ({
+  children,
+  btnType = "button",
+  type,
+  handleButtonClick,
+  disabled = false,
+}: ButtonProps) => {
   return (
-    <S.Button type="button" usetype={type} onClick={handleButtonClick}>
+    <S.Button
+      type={btnType}
+      usetype={type}
+      onClick={handleButtonClick}
+      disabled={disabled}
+    >
       {children}
     </S.Button>
   );

components/common/KebabList.styled.ts

@@ -1,21 +1,21 @@
-import styled from 'styled-components';
+import styled from "styled-components";
 
 export const KebabList = styled.ul`
-    position: absolute;
-    top: 16px;
-    right: 16px;
-    box-shadow: 0px 2px 8px 0px #3332361A;
-    background-color: #FFFFFF;
-`
+  position: absolute;
+  top: 16px;
+  right: 16px;
+  box-shadow: 0px 2px 8px 0px #3332361a;
+  background-color: #ffffff;
+`;
 
 export const KebabListItem = styled.li`
-    padding: 7px 12px;
-    text-align: center;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 16.71px;
-    &:hover {
-        color: #6D6AFE;
-        background-color: #E7EFFB;
-    }
-`
+  padding: 7px 12px;
+  text-align: center;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 16.71px;
+  &:hover {
+    color: #6d6afe;
+    background-color: #e7effb;
+  }
+`;

components/common/Link.tsx

@@ -16,7 +16,7 @@ const Link = ({ linkInfo, isSetting }: LinkItemParam) => {
     e.preventDefault();
     e.stopPropagation();
 
-    isKebabOpen ? setIsKebabOpen(false) : setIsKebabOpen(true);
+    setIsKebabOpen(!isKebabOpen);
   };
 
   return (

components/common/LinkList.tsx

@@ -5,10 +5,13 @@ import { LinkItem, LinkParam } from "@/types/Link";
 const SharedList = ({ listInfo, isSetting }: LinkParam) => {
   return (
     <S.ContentListBox>
-      {listInfo.map((link: LinkItem) => {
-        return <Link key={link.id} linkInfo={link} isSetting={isSetting} />;
-      })}
-      {listInfo.length === 0 && <span>저장된 링크가 없습니다.</span>}
+      {listInfo.length === 0 ? (
+        <span>저장된 링크가 없습니다.</span>
+      ) : (
+        listInfo.map((link: LinkItem) => {
+          return <Link key={link.id} linkInfo={link} isSetting={isSetting} />;
+        })
+      )}
     </S.ContentListBox>
   );
 };

components/common/modal/modalContent/FolderAddModalContent.tsx

@@ -5,7 +5,9 @@ const FolderAddModalContent = () => {
   return (
     <S.FolderAddContent>
       <input type="text" placeholder="내용 입력" />
-      <Button type="folderAdd_modal">추가하기</Button>
+      <Button btnType="button" type="folderAdd_modal">
+        추가하기
+      </Button>
     </S.FolderAddContent>
   );
 };

components/common/modal/modalContent/FolderDeleteContent.tsx

@@ -1,7 +1,11 @@
 import Button from "@/components/common/Button";
 
 const FolderDeleteContent = () => {
-  return <Button type="folderDelete_modal">삭제하기</Button>;
+  return (
+    <Button btnType="button" type="folderDelete_modal">
+      삭제하기
+    </Button>
+  );
 };
 
 export default FolderDeleteContent;

components/common/modal/modalContent/LinkAddContent.styled.ts

@@ -7,27 +7,25 @@ export const Content = styled.div`
   width: 100%;
 `;
 
-export const FolderList = styled.div`
-  > ul {
-    > li {
-      padding: 8px;
-      display: flex;
-      justify-content: space-between;
-      cursor: pointer;
+export const FolderList = styled.ul`
+  > li {
+    padding: 8px;
+    display: flex;
+    justify-content: space-between;
+    cursor: pointer;
 
-      &:hover {
-        background: #f0f6ff;
-      }
+    &:hover {
+      background: #f0f6ff;
+    }
 
-      &.selected {
-        background: #f0f6ff;
-      }
+    &.selected {
+      background: #f0f6ff;
+    }
 
-      > p {
-        display: flex;
-        gap: 8px;
-        align-items: center;
-      }
+    > p {
+      display: flex;
+      gap: 8px;
+      align-items: center;
     }
   }
 `;
@@ -37,6 +35,7 @@ export const NavName = styled.span`
   font-weight: 400;
   line-height: 24px;
 `;
+
 export const LinkCount = styled.span`
   color: #9fa6b2;
   font-size: 14px;

components/common/modal/modalContent/LinkAddContent.tsx

@@ -38,32 +38,30 @@ const LinkAddContent = () => {
   return (
     <S.Content>
       <S.FolderList>
-        <ul>
-          {navList.map((navItem: INavItem, i) => {
-            return (
-              <li
-                key={navItem.id}
-                onClick={() => handleSelectFolder(i)}
-                ref={() => {
-                  selectedFoler.current[i] = navItem.id;
-                }}
-                className={
-                  selectedFoler.current[i] === currentSelectedFolder
-                    ? "selected"
-                    : ""
-                }
-              >
-                <p>
-                  <S.NavName>{navItem.name}</S.NavName>
-                  <S.LinkCount>{navItem.link?.count}개 링크</S.LinkCount>
-                </p>
-                {selectedFoler.current[i] === currentSelectedFolder && (
-                  <Image src={checkIcon} alt="폴더 선택 아이콘" />
-                )}
-              </li>
-            );
-          })}
-        </ul>
+        {navList.map((navItem: INavItem, i) => {
+          return (
+            <li
+              key={navItem.id}
+              onClick={() => handleSelectFolder(i)}
+              ref={() => {
+                selectedFoler.current[i] = navItem.id;
+              }}
+              className={
+                selectedFoler.current[i] === currentSelectedFolder
+                  ? "selected"
+                  : ""
+              }
+            >
+              <p>
+                <S.NavName>{navItem.name}</S.NavName>
+                <S.LinkCount>{navItem.link?.count}개 링크</S.LinkCount>
+              </p>
+              {selectedFoler.current[i] === currentSelectedFolder && (
+                <Image src={checkIcon} alt="폴더 선택 아이콘" />
+              )}
+            </li>
+          );
+        })}
       </S.FolderList>
       {isLoading && <div>폴더 목록 불러오는중...</div>}
       {isLoading || <Button type="linkAdd_modal">추가하기</Button>}