Fix/portfolio design (#89)

* fix: portfolio card design error * fix: portfolio url api 사용 방식 변경
wafflestudio · Aug 7, 2023 · 3d6df60 · 3d6df60
1 parent 3e78f48
commit 3d6df60
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 8 deletions.
diff --git a/src/apis/portfolio.ts b/src/apis/portfolio.ts
@@ -1,5 +1,5 @@
 import { PortfolioFile, PortfolioLink } from "../types/apiTypes";
-import { deleteRequest, getRequest, postRequest } from "./utility";
+import { deleteRequest, getRequest, postRequest, putRequest } from "./utility";
 
 export const getPortfolioFiles = () =>
   getRequest<{ items: PortfolioFile[] }>(`/portfolios/file`);
@@ -8,7 +8,14 @@ export const getPortfolioLinks = () =>
   getRequest<{ items: PortfolioLink[] }>(`/portfolios/url`);
 
 export const postPortfolioLink = (url: string) =>
-  postRequest(`/portfolios/url?url=${url}`, {});
+  postRequest(`/portfolios/url`, {
+    url,
+  });
+
+export const putPortfolioLink = (linkId: number, url: string) =>
+  putRequest(`/portfolios/url/${linkId}`, {
+    url,
+  });
 
 export const deletePortfolioLink = (linkId: number) =>
   deleteRequest(`/portfolios/url/${linkId}`, {});

diff --git a/src/components/rookie/Progress/PortfolioCard.tsx b/src/components/rookie/Progress/PortfolioCard.tsx
@@ -10,6 +10,7 @@ import {
   getPortfolioLinks,
   postPortfolioFile,
   postPortfolioLink,
+  putPortfolioLink,
   uploadPortfolioFileToS3,
 } from "../../../apis/portfolio";
 import { LoadingBackgroundBlink } from "../../../lib/loading";
@@ -158,6 +159,7 @@ export default function PortfolioCard() {
         <div>링크 첨부</div>
         {linksInput.map((input, index) => (
           <LinkInput
+            key={index}
             placeholder="https://example.com"
             value={input.url}
             onChange={(e) => {
@@ -166,14 +168,20 @@ export default function PortfolioCard() {
               setLinksInput(copy);
             }}
             onBlur={() => {
-              if (input.url.length < 1) return;
+              if (input.url.length < 1) {
+                if (input.id === null) return;
+                deletePortfolioLink(input.id).finally(() => {
+                  void queryClient.refetchQueries(["portfolio", "links"]);
+                });
+                return;
+              }
+
               if (input.id === null) {
                 postPortfolioLink(input.url).finally(() => {
                   void queryClient.refetchQueries(["portfolio", "links"]);
                 });
               } else {
-                deletePortfolioLink(input.id)
-                  .then(() => postPortfolioLink(input.url))
+                putPortfolioLink(input.id, input.url)
                   .catch((e) => console.log(e))
                   .finally(() => {
                     void queryClient.refetchQueries(["portfolio", "links"]);
@@ -202,8 +210,7 @@ const Card = styled.li<{
 }>`
   position: relative;
   display: flex;
-  // width: 840px;
-  width: 565px;
+  width: 840px;
   height: 193px;
   flex-shrink: 0;
   border-radius: 5px;
@@ -227,7 +234,7 @@ const FileSection = styled.div`
   display: flex;
   flex-direction: column;
   align-items: flex-start;
-  // border-right: 1px solid #f6f6f6;
+  border-right: 1px solid #f6f6f6;
   gap: 8px;
   color: #404040;
 `;
@@ -289,6 +296,7 @@ const DeleteButton = styled.button`
   align-items: center;
   justify-content: center;
   cursor: pointer;
+  padding: 10px;
   &:hover {
     opacity: 0.5;
   }