[박상준] Week15

.gitignore

@@ -26,6 +26,7 @@ yarn-error.log*
 
 # local env files
 .env*.local
+.env
 
 # vercel
 .vercel

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+  "cSpell.words": ["Linkbrary"]
+}

@types/import-env.d.ts

@@ -0,0 +1,5 @@
+declare namespace NodeJS {
+  interface ProcessEnv {
+    NEXT_PUBLIC_BASE_URL: string;
+  }
+}

Portal.tsx

@@ -2,23 +2,13 @@ import React, { ReactElement, useEffect, useState } from 'react';
 import { createPortal } from 'react-dom';
 
 const ModalPortal = ({ children }: { children: ReactElement }) => {
-  const [mounted, setMounted] = useState<boolean>(false);
   const [portalElement, setPortalElement] = useState<HTMLElement | null>(null);
 
   useEffect(() => {
     setPortalElement(document.getElementById('modal'));
   }, []);
 
-  useEffect(() => {
-    setMounted(true);
-    return () => setMounted(false);
-  }, []);
-
-  return (
-    <>
-      {mounted && portalElement ? createPortal(children, portalElement) : null}
-    </>
-  );
+  return <>{portalElement ? createPortal(children, portalElement) : null}</>;
 };
 
 export default ModalPortal;

pages/api/api.ts → api/api.ts

@@ -1,4 +1,17 @@
-import axios from '../../instance/instance';
+import axios from '../instance/instance';
+
+axios.interceptors.request.use(
+  (config) => {
+    const accessToken = localStorage.getItem('token');
+    config.headers['Authorization'] = accessToken;
+
+    return config;
+  },
+  (error) => {
+    console.log(error);
+    return Promise.reject(error);
+  }
+);
 
 export async function getSampleUser() {
   try {
@@ -49,7 +62,17 @@ export async function getFolder(id: string) {
   }
 }
 
-export async function getFolderList(id: string, folderId: number) {
+export async function getFolderData(folderId: string) {
+  try {
+    const { data } = await axios.get(`/folders/${folderId}`);
+    return data.data;
+  } catch (error) {
+    console.error('Error fetching folder:', error);
+    throw error;
+  }
+}
+
+export async function getFolderList(id: string, folderId: string) {
   if (folderId) {
     try {
       const query = `/${id}/links?folderId=${folderId}`;
@@ -85,14 +108,23 @@ export async function getUser(accessToken: string) {
   }
 }
 
+export async function getUserData(id: string) {
+  try {
+    const { data } = await axios.get(`/users/${id}`);
+    return data.data;
+  } catch (error) {
+    console.error('Error fetching user:', error);
+    throw error;
+  }
+}
+
 export async function postSignIn(id: string, password: string) {
   try {
     const { data } = await axios.post('/sign-in', {
       email: id,
       password: password,
     });
     localStorage.setItem('token', data.data.accessToken);
-    window.location.href = '/';
     return data;
   } catch (error) {
     console.error('Error fetching sign-in:', error);
@@ -120,7 +152,6 @@ export async function postSignUp(id: string, password: string) {
     });
     localStorage.setItem('token', data.data.accessToken);
     alert('회원가입이 완료되었습니다!');
-    window.location.href = '/';
     return data;
   } catch (error) {
     console.error('Error fetching sign-in:', error);
@@ -130,53 +161,31 @@ export async function postSignUp(id: string, password: string) {
 
 export async function postFolder(name: string) {
   try {
-    const token = localStorage.getItem('token');
-    const { data } = await axios.post(
-      '/folders',
-      {
-        name: name,
-      },
-      {
-        headers: {
-          Authorization: token,
-        },
-      }
-    );
-    return data;
+    const { data } = await axios.post('/folders', {
+      name: name,
+    });
+    return data.data;
   } catch (error) {
     console.error('Error fetching post folder:', error);
   }
 }
 
-export async function deleteFolder(folderId: number) {
+export async function deleteFolder(folderId: string) {
   try {
     const token = localStorage.getItem('token');
-    const { data } = await axios.delete(`/folders/${folderId}`, {
-      headers: {
-        Authorization: token,
-      },
-    });
+    const { data } = await axios.delete(`/folders/${folderId}`);
     return data;
   } catch (error) {
     console.error('Error fetching post folder:', error);
   }
 }
 
-export async function postLink(folderId: number, url: string) {
+export async function postLink(folderId: string, url: string) {
   try {
-    const token = localStorage.getItem('token');
-    const { data } = await axios.post(
-      '/links',
-      {
-        url: url,
-        folderId: folderId,
-      },
-      {
-        headers: {
-          Authorization: token,
-        },
-      }
-    );
+    const { data } = await axios.post('/links', {
+      url: url,
+      folderId: folderId,
+    });
     return data;
   } catch (error) {
     alert('url과 폴더를 지정해주세요!');
@@ -186,14 +195,21 @@ export async function postLink(folderId: number, url: string) {
 
 export async function deleteLink(linkId: number) {
   try {
-    const token = localStorage.getItem('token');
-    const { data } = await axios.delete(`/links/${linkId}`, {
-      headers: {
-        Authorization: token,
-      },
-    });
+    const { data } = await axios.delete(`/links/${linkId}`);
     return data;
   } catch (error) {
     console.error('Error fetching post folder:', error);
   }
 }
+
+export async function putFolder(folderId: string, name: string) {
+  try {
+    const { data } = await axios.put(`/folders/${folderId}`, {
+      name: name,
+    });
+    return data;
+  } catch (error) {
+    alert('이름 수정에 실패했습니다!');
+    console.error('Error fetching put folder:', error);
+  }
+}

components/Button/Button.styled.ts

@@ -25,12 +25,15 @@ export const Cta = styled.button<ButtonProps>`
   line-height: normal;
   width: ${({ size }) => buttonSize[size]}rem;
   position: relative;
+  white-space: nowrap;
 
   &:hover {
     opacity: 0.8;
   }
 
   @media (max-width: 768px) {
     font-size: 1.4rem;
+    padding: 1rem 1.6rem;
+    width: ${({ size }) => (size === 'lg' ? '100%' : `${buttonSize[size]}rem`)};
   }
 `;

components/Card/Card.styled.ts

@@ -1,38 +1,10 @@
 import styled from 'styled-components';
 
-export const EmptyImg = styled.div`
-  height: 100%;
-  background-color: var(--EmptyArea);
-  border-radius: 1.5rem 1.5rem 0 0;
-  display: flex;
-  justify-content: center;
-  flex-direction: column;
-  align-items: center;
-
-  img {
-    opacity: 0.2;
-    width: 13.3rem;
-    height: 2.4rem;
-  }
-`;
-
-export const ItemImg = styled.div<{ image: string }>`
-  height: 100%;
-  background-image: url(${(props) => props.image});
-  border-radius: 1.5rem 1.5rem 0 0;
-  background-size: cover;
-  background-position: center;
-
-  &:hover {
-    background-size: 150%;
-  }
-`;
-
 export const ItemCard = styled.div`
   width: 34rem;
-  height: 33.4rem;
   display: flex;
   flex-direction: column;
+  align-items: center;
   box-shadow: 0px 5px 25px 0px rgba(0, 0, 0, 0.08);
   border-radius: 1.5rem;
   text-decoration: none;
@@ -49,21 +21,61 @@ export const ItemCard = styled.div`
   }
 `;
 
-export const StarIcon = styled.img`
+export const StarIcon = styled.div`
   width: 3.4rem;
   height: 3rem;
   flex-shrink: 0;
   position: absolute;
   top: 1.5rem;
   right: 1.5rem;
+  z-index: 1;
+`;
+
+export const EmptyImg = styled.div`
+  height: 100%;
+  width: 100%;
+  background-color: var(--EmptyArea);
+  border-radius: 1.5rem 1.5rem 0 0;
+  display: flex;
+  justify-content: center;
+  flex-direction: column;
+  align-items: center;
+
+  img {
+    opacity: 0.2;
+  }
+`;
+
+export const ItemImg = styled.div`
+  position: relative;
+  transition: 0.3s ease;
+  width: 100%;
+  height: 100%;
+  img {
+    object-fit: cover;
+  }
+
+  &:hover {
+    width: 170%;
+  }
+`;
+
+export const ImageArea = styled.div`
+  border-radius: 1.5rem 1.5rem 0 0;
+  height: 23.5rem;
+  width: 100%;
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 `;
 
 export const ItemInfo = styled.div`
   display: flex;
   flex-direction: column;
   padding: 1.5rem 2rem;
   width: 100%;
-  height: 13.5rem;
+  height: 10.5rem;
   gap: 1rem;
   position: relative;
 `;