From 24571da34a375e433a04f4422b5ed16a16100d6d Mon Sep 17 00:00:00 2001
From: 7beunseo <kimes0403@gmail.com>
Date: Tue, 15 Oct 2024 13:34:11 +0900
Subject: [PATCH 01/12] =?UTF-8?q?=F0=9F=92=84=20Design:=20DeveloperPositio?=
 =?UTF-8?q?n=20=ED=85=8D=EC=8A=A4=ED=8A=B8=EA=B0=80=20=EA=B8=B8=20?=
 =?UTF-8?q?=EA=B2=BD=EC=9A=B0=20css=20=EA=B9=A8=EC=A7=90=20=ED=95=B4?=
 =?UTF-8?q?=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/workdetail/developer/Developer.style.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/src/components/workdetail/developer/Developer.style.js b/src/components/workdetail/developer/Developer.style.js
index 88f9da3..0d7b6d4 100644
--- a/src/components/workdetail/developer/Developer.style.js
+++ b/src/components/workdetail/developer/Developer.style.js
@@ -68,6 +68,7 @@ export const DeveloperPosition = styled.div`
   font-family: 'Pretendard-Regular';
   color: #696969;
   margin: 0px;
+  flex: 1;
 
     @media (max-width: 1500px) {
     font-size: 20px;

From 6e4822a602f50d64463cdb8d59ccf0bf04ec951f Mon Sep 17 00:00:00 2001
From: 7beunseo <kimes0403@gmail.com>
Date: Tue, 15 Oct 2024 13:39:34 +0900
Subject: [PATCH 02/12] =?UTF-8?q?=E2=99=BB=EF=B8=8F=20Refactor:=20url=20?=
 =?UTF-8?q?=EC=9D=B4=20null=EC=9D=BC=20=EA=B2=BD=EC=9A=B0=20=EC=95=84?=
 =?UTF-8?q?=EC=9D=B4=EC=BD=98=20=EC=B6=9C=EB=A0=A5=ED=95=98=EC=A7=80=20?=
 =?UTF-8?q?=EC=95=8A=EC=9D=8C?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../workdetail/mobile/WorkIntroduce.jsx       | 21 ++++++++++++------
 .../rightcomponent/RightContent.jsx           | 22 +++++++++++++------
 2 files changed, 29 insertions(+), 14 deletions(-)

diff --git a/src/components/workdetail/mobile/WorkIntroduce.jsx b/src/components/workdetail/mobile/WorkIntroduce.jsx
index 6e57ff1..df99c94 100644
--- a/src/components/workdetail/mobile/WorkIntroduce.jsx
+++ b/src/components/workdetail/mobile/WorkIntroduce.jsx
@@ -49,14 +49,21 @@ export default function WorkIntroduce({ data }) {
         <W.TeamItem>
           <W.TeamTitle>{data.teamName}</W.TeamTitle>
           <W.LinkTo>
-            <a href={data.instagramUrl}>
-              <img src={Instagram} alt="instagram" />
-            </a>
-            <a href={data.githubUrl}>
-              <img src={Github} alt="github" />
-            </a>
+            {data.instagramUrl && (
+              <a href={data.instagramUrl}>
+                <img src={Instagram} alt="instagram" />
+              </a>
+            )}
+            
+            {data.githubUrl && (
+              <a href={data.githubUrl}>
+                <img src={Github} alt="github" />
+              </a>
+            )}
 
-            <ViewSite deployUrl={data.deployUrl} src={viewSiteImage}/>
+            {data.deployUrl && (
+              <ViewSite deployUrl={data.deployUrl} src={viewSiteImage} />
+            )}
           </W.LinkTo>
         </W.TeamItem>
         {data.developers.map((d) => (
diff --git a/src/components/workdetail/rightcomponent/RightContent.jsx b/src/components/workdetail/rightcomponent/RightContent.jsx
index 52b28ae..05911ec 100644
--- a/src/components/workdetail/rightcomponent/RightContent.jsx
+++ b/src/components/workdetail/rightcomponent/RightContent.jsx
@@ -20,13 +20,21 @@ export default function RightContent({ data }) {
         <R.TeamItem>
           <R.TeamTitle>{data.teamName}</R.TeamTitle>
           <R.LinkTo>
-            <a href={data.instagramUrl}>
-              <img src={Instagram} alt="instagram" />
-            </a>
-            <a href={data.githubUrl}>
-              <img src={Github} alt="github" />
-            </a>
-            <ViewSite deployUrl={data.deployUrl} src={viewSiteImage}/>
+            {data.instagramUrl && (
+                <a href={data.instagramUrl}>
+                  <img src={Instagram} alt="instagram" />
+                </a>
+              )}
+              
+              {data.githubUrl && (
+                <a href={data.githubUrl}>
+                  <img src={Github} alt="github" />
+                </a>
+              )}
+
+              {data.deployUrl && (
+                <ViewSite deployUrl={data.deployUrl} src={viewSiteImage} />
+              )}
           </R.LinkTo>
         </R.TeamItem>
         <R.DeveloperWrapper>

From 89fee77c98fb3bd39f03f582a058e245dc208fbd Mon Sep 17 00:00:00 2001
From: nadomolayohehe <siyun778@naver.com>
Date: Wed, 16 Oct 2024 19:45:54 +0900
Subject: [PATCH 03/12] :lipstick: Guest Book ui update

Guest Book ui update
---
 src/components/guestBook/MessageCard.style.js   | 17 +++++++++--------
 .../guestBook/MessageInputSection.style.js      | 13 +++++++------
 src/components/guestBook/Pagination.style.js    | 12 ++++++++----
 3 files changed, 24 insertions(+), 18 deletions(-)

diff --git a/src/components/guestBook/MessageCard.style.js b/src/components/guestBook/MessageCard.style.js
index 73327e5..676e27f 100644
--- a/src/components/guestBook/MessageCard.style.js
+++ b/src/components/guestBook/MessageCard.style.js
@@ -21,7 +21,7 @@ export const CardContainer = styled.div`
 //cd 이미지 및 관련 내용 
 export const CDContainer = styled.div`
   width: 24vw;
-  height: 50vh;
+  height: 24vw;
   background-image: url(${(props) => props.src});
   background-size: cover;
   background-position: center;
@@ -33,13 +33,13 @@ export const CDContainer = styled.div`
 
   @media (max-width:768px) {
     width:40vw;
-    height:25vh;
+    height:40vw;
     margin:2%;
   }
 
   @media (min-width: 769px) and (max-width: 1024px) {
     width: 30vw; /* 아이패드에서 이미지 크기 조정 */
-    height: 40vh;
+    height: 30vw;
     margin:0 auto ;
   }
 `;
@@ -97,14 +97,15 @@ export const MessageText = styled.p`
   position: absolute;
   top: 18%; 
   left:15%;
-  max-height:33vh;
-  width:16vw;
+  max-height:95%;
+  width:70%;
+  height:60%;
   overflow:auto; 
   z-index: 10;
 
   /* 스크롤바 스타일링 (Webkit 기반 브라우저용) */
     &::-webkit-scrollbar {
-      width: 0.7vw; /* 스크롤바 너비 */
+      width: 0.6vw; /* 스크롤바 너비 */
     }
     &::-webkit-scrollbar-thumb {
       background-color: rgba(0, 0, 0, 0.5); /* 스크롤바 색상 */
@@ -129,8 +130,8 @@ export const MessageText = styled.p`
   
   @media (min-width: 769px) and (max-width: 1024px) {
     font-size: 1em;
-    width: 20vw;
-    height:23vh;
+    width: 40%;
+    height:50%;  
     top: 18%;
   }
   
diff --git a/src/components/guestBook/MessageInputSection.style.js b/src/components/guestBook/MessageInputSection.style.js
index f26492e..8943430 100644
--- a/src/components/guestBook/MessageInputSection.style.js
+++ b/src/components/guestBook/MessageInputSection.style.js
@@ -9,7 +9,7 @@ export const Container = styled.div`
   margin: 0 auto;
   padding: 0 10%;
   position: relative;
-  height: 100vh;
+  height: 90vh;
 
   @media (max-width: 768px) {
     width: 100%;
@@ -23,6 +23,7 @@ export const Container = styled.div`
   @media (min-width: 769px) and (max-width: 1024px) {
     width:100%;
     padding: 0 10%;
+    max-height: 90vh;
   }
 `;
 
@@ -198,8 +199,8 @@ export const TextArea = styled.textarea`
   font-family: 'Pretendard';
   font-style: normal;
   font-weight: 400;
-  width: 24vw;
-  height: 42vh;
+  width: 70%;
+  height: 58%;
   border: none;
   color: black;
   background: transparent;
@@ -231,9 +232,9 @@ export const TextArea = styled.textarea`
   }
 
   @media (min-width: 769px) and (max-width: 1024px) {
-    width: 27vw;
-    height: 31vh;
-    top: 14%;
+    width: 70%;
+    height: 63%;
+    top: 20%;
   }
 `;
 
diff --git a/src/components/guestBook/Pagination.style.js b/src/components/guestBook/Pagination.style.js
index 59b2fee..f119bf2 100644
--- a/src/components/guestBook/Pagination.style.js
+++ b/src/components/guestBook/Pagination.style.js
@@ -8,19 +8,23 @@ export const PaginationContainer = styled.div`
   margin: 20px;
   color: #ffffff; 
   margin-bottom:4%;
+  flex-wrap: nowrap; 
 
 
   @media (max-width: 768px) {
-    width :80vw;
+    width :100%;
     margin-top:6%;
     text-align:center;
+    flex-wrap: nowrap; 
+
   }
 
   @media (min-width: 769px) and (max-width: 1024px) {
-    width: 90%;
+    width: 100%;
     margin:0 auto;
     text-align:center;
     justify-content:center;
+    flex-wrap: nowrap; 
   }
 
 
@@ -47,12 +51,12 @@ export const PageButton = styled.button.withConfig({
   }
 
    @media (max-width:768px){
-      padding:3%;
+      padding:2%;
       font-size:0.7em;
    }
 
    @media (min-width: 769px) and (max-width: 1024px) {
-    padding: 0 10px;
+    padding: 0 1%;
     font-size: 1.2em;
   }
 `;

From 197c1d8cea12674a6f192d27925acd328f44ddbf Mon Sep 17 00:00:00 2001
From: nadomolayohehe <siyun778@naver.com>
Date: Wed, 16 Oct 2024 20:11:27 +0900
Subject: [PATCH 04/12] :lipstick: Footer padding update

Footer padding update
---
 src/components/footer/Footer.style.js        | 3 ++-
 src/components/guestBook/Pagination.style.js | 2 +-
 2 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/src/components/footer/Footer.style.js b/src/components/footer/Footer.style.js
index fc4ce9d..1f5324c 100644
--- a/src/components/footer/Footer.style.js
+++ b/src/components/footer/Footer.style.js
@@ -12,6 +12,7 @@ export const FooterContainer = styled.footer`
 
   @media(max-width: 768px) {
     font-size: 0.8em;
+    margin : 0;
 
   }
 
@@ -29,6 +30,7 @@ export const FooterTop = styled.div`
   @media(max-width: 768px) {
     flex-direction: column;
     margin-top:5%;
+    padding:5% 0;
   }
 
 `;
@@ -214,7 +216,6 @@ export const UrlContainer = styled.div`
 
     img{
       height : 5vh;
-      width: 8vw;
       }
   }
 
diff --git a/src/components/guestBook/Pagination.style.js b/src/components/guestBook/Pagination.style.js
index 59b2fee..8d6173b 100644
--- a/src/components/guestBook/Pagination.style.js
+++ b/src/components/guestBook/Pagination.style.js
@@ -12,7 +12,7 @@ export const PaginationContainer = styled.div`
 
   @media (max-width: 768px) {
     width :80vw;
-    margin-top:6%;
+    margin-top:20%;
     text-align:center;
   }
 

From 36ae9db0560dbd338decf518907018bad5bd5c5a Mon Sep 17 00:00:00 2001
From: nadomolayohehe <siyun778@naver.com>
Date: Wed, 16 Oct 2024 20:28:13 +0900
Subject: [PATCH 05/12] :lipstick: Footer ui update

Footer ui update
---
 src/components/footer/Footer.style.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/footer/Footer.style.js b/src/components/footer/Footer.style.js
index 1f5324c..070c7e4 100644
--- a/src/components/footer/Footer.style.js
+++ b/src/components/footer/Footer.style.js
@@ -25,12 +25,12 @@ export const FooterTop = styled.div`
   width: 100%;
   max-width: 85vw;
   margin: 0 auto;
-  padding: 1% 5%;
+  padding: 0% 5%;
 
   @media(max-width: 768px) {
     flex-direction: column;
     margin-top:5%;
-    padding:5% 0;
+    padding :0;
   }
 
 `;

From 73fe77bf152aadf5e4ec1f052a89ff2063ce77b5 Mon Sep 17 00:00:00 2001
From: nadomolayohehe <siyun778@naver.com>
Date: Thu, 17 Oct 2024 12:36:54 +0900
Subject: [PATCH 06/12] =?UTF-8?q?:lipstick:=20Guest=20Book=20inputSection?=
 =?UTF-8?q?=20height=20=EC=A1=B0=EC=A0=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Guest Book inputSection height 조절
---
 src/components/guestBook/MessageInputSection.style.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/src/components/guestBook/MessageInputSection.style.js b/src/components/guestBook/MessageInputSection.style.js
index 8943430..515ad71 100644
--- a/src/components/guestBook/MessageInputSection.style.js
+++ b/src/components/guestBook/MessageInputSection.style.js
@@ -5,25 +5,27 @@ export const Container = styled.div`
   justify-content: space-between;
   align-items: flex-start;
   width: 100%;
+  height:85vh;
   color: white;
   margin: 0 auto;
   padding: 0 10%;
   position: relative;
-  height: 90vh;
+
 
   @media (max-width: 768px) {
     width: 100%;
     flex-direction: column;
     align-items: center;
     padding: 0 2%;
-    height:0%;
+    height:50%;
   }
     
 
   @media (min-width: 769px) and (max-width: 1024px) {
     width:100%;
     padding: 0 10%;
-    max-height: 90vh;
+    min-height: 110vh; 
+
   }
 `;
 

From b5e62d2ffde5951cc287fb7ab0084bd64cd36d9a Mon Sep 17 00:00:00 2001
From: nadomolayohehe <siyun778@naver.com>
Date: Thu, 17 Oct 2024 12:51:30 +0900
Subject: [PATCH 07/12] =?UTF-8?q?:lipstick:=20Guest=20Book=20from=20?=
 =?UTF-8?q?=EA=B2=B9=EC=B9=98=EB=8A=94=EA=B1=B0=20=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

guest Book from 겹치는거 해결
---
 src/components/guestBook/MessageCard.style.js         | 6 +++---
 src/components/guestBook/MessageInputSection.style.js | 8 ++++----
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/components/guestBook/MessageCard.style.js b/src/components/guestBook/MessageCard.style.js
index 676e27f..8d2ea75 100644
--- a/src/components/guestBook/MessageCard.style.js
+++ b/src/components/guestBook/MessageCard.style.js
@@ -46,7 +46,7 @@ export const CDContainer = styled.div`
 
 export const ToText = styled.p`
   color: black;
-  font-size: 1.5em;
+  font-size: 1.2em;
   text-align: left;
   position: absolute;
   top: 5%;
@@ -68,7 +68,7 @@ export const ToText = styled.p`
 
 export const FromText = styled.p`
   color: black;
-  font-size: 1.5em;
+  font-size: 1.2em;
   text-align: right; 
   position: absolute; 
   bottom: 5%;
@@ -83,7 +83,7 @@ export const FromText = styled.p`
   }
 
   @media (min-width: 769px) and (max-width: 1024px) {
-    font-size: 1.2em;
+    font-size: 1.1em;
     right: 8%;
     bottom:15%;
   }
diff --git a/src/components/guestBook/MessageInputSection.style.js b/src/components/guestBook/MessageInputSection.style.js
index 515ad71..3c1e701 100644
--- a/src/components/guestBook/MessageInputSection.style.js
+++ b/src/components/guestBook/MessageInputSection.style.js
@@ -136,7 +136,7 @@ export const Label = styled.label`
 
   &.from-label {
     bottom: 5%;
-    right: -30%;
+    right: -15%;
   }
 
   @media (max-width: 768px) {
@@ -149,7 +149,7 @@ export const Label = styled.label`
 
     &.from-label {
       bottom: 5%;
-      right: -17%;
+      right: -5%;
     }
   }
 
@@ -206,7 +206,7 @@ export const TextArea = styled.textarea`
   border: none;
   color: black;
   background: transparent;
-  font-size: 1.4em;
+  font-size: 1.1em;
   resize: none;
   text-align: left;
   z-index: 10;
@@ -230,7 +230,7 @@ export const TextArea = styled.textarea`
     height: 60%;
     top: 20%;
     left:15%;
-    font-size: 1.1em;
+    font-size: 0.8em;
   }
 
   @media (min-width: 769px) and (max-width: 1024px) {

From edbc1bdedfb98c7ccb8938005a26bd7f7eac4bde Mon Sep 17 00:00:00 2001
From: nadomolayohehe <siyun778@naver.com>
Date: Thu, 17 Oct 2024 13:14:25 +0900
Subject: [PATCH 08/12] =?UTF-8?q?:lipstick:=20Guest=20Book=20from=20label?=
 =?UTF-8?q?=20length=20=EC=A1=B0=EC=A0=88?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Guest Book from label length 조절
---
 src/components/guestBook/MessageInputSection.jsx      | 2 +-
 src/components/guestBook/MessageInputSection.style.js | 7 +++++--
 2 files changed, 6 insertions(+), 3 deletions(-)

diff --git a/src/components/guestBook/MessageInputSection.jsx b/src/components/guestBook/MessageInputSection.jsx
index f54aa45..b74f0bb 100644
--- a/src/components/guestBook/MessageInputSection.jsx
+++ b/src/components/guestBook/MessageInputSection.jsx
@@ -75,7 +75,7 @@ const MessageInputSection = ({ onSendMessage, onViewGuestBook }) => {
           onChange={(e) => setNewMessage({ ...newMessage, message: e.target.value })}
          
         />
-        <Label className='from-label'>
+        <Label className='from-label'length={newMessage.from.length}>
           <HighlightedText>From.</HighlightedText>
           <Input className='from'
           type="text" 
diff --git a/src/components/guestBook/MessageInputSection.style.js b/src/components/guestBook/MessageInputSection.style.js
index e9bd201..3ad2427 100644
--- a/src/components/guestBook/MessageInputSection.style.js
+++ b/src/components/guestBook/MessageInputSection.style.js
@@ -135,7 +135,8 @@ export const Label = styled.label`
 
   &.from-label {
     bottom: 5%;
-    right: -15%;
+    right: ${({ length }) => `calc(-35% + ${length * 0.5}em)`}; /* 입력된 글자의 길이에 따라 위치 조정 */
+
   }
 
   @media (max-width: 768px) {
@@ -148,7 +149,8 @@ export const Label = styled.label`
 
     &.from-label {
       bottom: 5%;
-      right: -5%;
+      right:${({ length }) => `calc(-20% + ${length * 0.35}em)`};
+     
     }
   }
 
@@ -161,6 +163,7 @@ export const Label = styled.label`
 
     &.from-label {
       bottom: 5%;
+      right:${({ length }) => `calc(-25% + ${length * 0.35}em)`};
     }
   }
 `;

From 35a332247c23dfe1ac9eb43ff87c0bd995d291b5 Mon Sep 17 00:00:00 2001
From: alwn8918 <alwn8918@gmail.com>
Date: Fri, 25 Oct 2024 23:42:17 +0900
Subject: [PATCH 09/12] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20=ED=83=80=EC=9D=B4?=
 =?UTF-8?q?=ED=8B=80=20overflow=EC=9D=BC=20=EB=95=8C=20=EC=95=A0=EB=8B=88?=
 =?UTF-8?q?=EB=A9=94=EC=9D=B4=EC=85=98=20=EC=A0=81=EC=9A=A9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/worklist/WorkItem.jsx      | 24 +++++++++++++++++++++--
 src/components/worklist/WorkItem.style.js | 24 +++++++++++++++++++++--
 2 files changed, 44 insertions(+), 4 deletions(-)

diff --git a/src/components/worklist/WorkItem.jsx b/src/components/worklist/WorkItem.jsx
index 0194750..7a6102e 100644
--- a/src/components/worklist/WorkItem.jsx
+++ b/src/components/worklist/WorkItem.jsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect, useRef, useState } from 'react';
 import * as W from './WorkItem.style';
 import { useNavigate } from 'react-router-dom';
 
@@ -10,6 +10,20 @@ const WorkItem = React.memo(function ({
   slideIndex,
 }) {
   const navigate = useNavigate();
+  const titleRef = useRef(null);
+  const [isOverflow, setIsOverflow] = useState(false);
+
+  // overflow 여부 체크
+  useEffect(() => {
+    if (titleRef.current) {
+      setIsOverflow(
+        titleRef.current.scrollWidth > titleRef.current.clientWidth,
+      );
+    }
+  }, [slideIndex]); // dataIndex가 변경될 때마다 확인
+
+  // 슬라이드가 변경될 때마다 애니메이션을 재시작하기 위해 key를 변경
+  const titleKey = `${dataIndex}-${isOverflow}`; // 고유 키 생성
 
   if (!data || !data[dataIndex]) {
     return null;
@@ -35,7 +49,13 @@ const WorkItem = React.memo(function ({
       </div>
       <W.Card>
         <img alt={title} src={image} />
-        {isCenterSlide && <W.Title>{title}</W.Title>}
+        <W.titleContainer>
+          {isCenterSlide && (
+            <W.Title key={titleKey} ref={titleRef} isOverflow={isOverflow}>
+              {title}
+            </W.Title>
+          )}
+        </W.titleContainer>
         {isCenterSlide && <W.Team>{team}</W.Team>}
       </W.Card>
     </W.Container>
diff --git a/src/components/worklist/WorkItem.style.js b/src/components/worklist/WorkItem.style.js
index 7412804..981ea23 100644
--- a/src/components/worklist/WorkItem.style.js
+++ b/src/components/worklist/WorkItem.style.js
@@ -1,4 +1,4 @@
-import styled from 'styled-components';
+import styled, { keyframes } from 'styled-components';
 
 export const Container = styled.div`
   transition: all 300ms ease;
@@ -60,7 +60,22 @@ export const Card = styled.div`
   }
 `;
 
+export const titleContainer = styled.div`
+  width: 100%;
+  overflow: hidden;
+`;
+
+const animate = keyframes`
+  0% {
+    transform: translateX(0);
+  }
+  100% {
+    transform: translateX(-250%);
+  }
+`;
+
 export const Title = styled.p`
+  width: 100%;
   color: white;
   text-align: center;
   font-family: Pretendard;
@@ -69,7 +84,12 @@ export const Title = styled.p`
   font-weight: 700;
   line-height: normal;
   margin-bottom: 5px;
-  white-space: pre;
+  white-space: nowrap;
+  display: inline-block;
+
+  padding-left: ${(props) => (props.isOverflow ? '100%' : '0')};
+  animation: ${(props) => (props.isOverflow ? animate : 'none')} 10s linear
+    infinite;
 
   @media (max-width: 1920px) {
     font-size: 28px;

From ba3192919bc1b73949cf48e97e5da0c2d24260a4 Mon Sep 17 00:00:00 2001
From: 7beunseo <kimes0403@gmail.com>
Date: Sat, 26 Oct 2024 01:53:09 +0900
Subject: [PATCH 10/12] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20id=20=EA=B0=92=20?=
 =?UTF-8?q?=ED=8C=8C=EB=9D=BC=EB=AF=B8=ED=84=B0=20=ED=8F=AC=ED=95=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/App.jsx                                   |  2 +-
 .../workdetail/mobile/WorkIntroduce.jsx       |  5 +++-
 src/components/worklist/WorkItem.jsx          |  2 +-
 src/pages/WorkDetail.jsx                      | 29 ++++++++++---------
 4 files changed, 22 insertions(+), 16 deletions(-)

diff --git a/src/App.jsx b/src/App.jsx
index ce09bf0..8ee9266 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -45,7 +45,7 @@ function App() {
             <Route path="/" element={<Main />} />
             <Route path="/about" element={<About />} />
             <Route path="/work-list" element={<WorkList />} />
-            <Route path="/work-detail" element={<WorkDetail />} />
+            <Route path="/:id" element={<WorkDetail />} />  {/* id를 URL 파라미터로 사용 */}
             <Route path="/guestbook" element={<GuestBook />} />
             <Route path="/about-hidden" element={<HiddenAbout />} />
           </Routes>
diff --git a/src/components/workdetail/mobile/WorkIntroduce.jsx b/src/components/workdetail/mobile/WorkIntroduce.jsx
index df99c94..15d5a1f 100644
--- a/src/components/workdetail/mobile/WorkIntroduce.jsx
+++ b/src/components/workdetail/mobile/WorkIntroduce.jsx
@@ -42,7 +42,10 @@ export default function WorkIntroduce({ data }) {
       </W.WorkTitleWrapper>
       <W.ImageWrapper>
         <LeftButton position="top" onClick={handlePrevClick} />
-        <Image src={data.images[currentImageIndex].url} />
+          {/* 이미지가 있는 경우에만 Image 컴포넌트를 렌더링 */}
+            {data.images && data.images[currentImageIndex] && (
+              <Image src={data.images[currentImageIndex].url} />
+          )}
         <RightButton style={{padding: "0px"}} position="top" onClick={handleNextClick} />
       </W.ImageWrapper>
       <W.DeveloperWrapper>
diff --git a/src/components/worklist/WorkItem.jsx b/src/components/worklist/WorkItem.jsx
index 7a6102e..88fbc12 100644
--- a/src/components/worklist/WorkItem.jsx
+++ b/src/components/worklist/WorkItem.jsx
@@ -33,7 +33,7 @@ const WorkItem = React.memo(function ({
 
   const handleItemClick = () => {
     if (isCenterSlide) {
-      navigate(`/work-detail`, { state: { category: type, id } });
+      navigate(`/${id}`, { state: { category: type } });
       console.log(`type: ${type}, id: ${id}`);
     }
   };
diff --git a/src/pages/WorkDetail.jsx b/src/pages/WorkDetail.jsx
index 6f02166..0a8df5a 100644
--- a/src/pages/WorkDetail.jsx
+++ b/src/pages/WorkDetail.jsx
@@ -1,5 +1,5 @@
 import React, { useState, useEffect, useRef } from 'react';
-import { useLocation, useNavigate } from 'react-router-dom';
+import { useLocation, useNavigate, useParams  } from 'react-router-dom';
 import axios from 'axios';
 import cdCaseImage from '../assets/img/detail_cd_case.svg';
 import RightButton from '../components/workdetail/button/RightButton';
@@ -17,8 +17,9 @@ export default function WorkDetail() {
   const imageContainerRef = useRef(null);
   const navigate = useNavigate();
 
+  const { id } = useParams();  // URL의 id 파라미터를 받아옴
   const location = useLocation();
-  const { category, id } = location.state || { category: 'big_data', id: 2 };
+  const { category = 'all' } = location.state || {};
   console.log(category);
 
   // API 데이터 fetch
@@ -79,17 +80,17 @@ export default function WorkDetail() {
     return <div>Loading...</div>;
   }
 
-  // 이전 버튼 클릭 핸들러
-  const handlePrevClick = (shouldScroll = true) => {
-    if (data && data.prev) {
-      if (shouldScroll) {
-        window.scrollTo(0, 0); // 스크롤 동작
-      }
-      navigate(`/work-detail`, { state: { category, id: data.prev } }); // 페이지 이동
-    } else {
-      console.error('이전 항목을 찾을 수 없습니다.');
+// 이전 버튼 클릭 핸들러
+const handlePrevClick = (shouldScroll = true) => {
+  if (data && data.prev) {
+    if (shouldScroll) {
+      window.scrollTo(0, 0); // 스크롤 동작
     }
-  };
+    navigate(`/${data.prev}`, { state: { category } }); // 이전 항목의 id를 경로에 포함하여 페이지 이동
+  } else {
+    console.error('이전 항목을 찾을 수 없습니다.');
+  }
+};
 
   // 다음 버튼 클릭 핸들러
   const handleNextClick = (shouldScroll = true) => {
@@ -97,7 +98,9 @@ export default function WorkDetail() {
       if (shouldScroll) {
         window.scrollTo(0, 0); // 스크롤 동작
       }
-      navigate(`/work-detail`, { state: { category, id: data.next } }); // 페이지 이동
+      navigate(`/${data.next}`, { state: { category } }); // 다음 항목의 id를 경로에 포함하여 페이지 이동
+    } else {
+      console.error('다음 항목을 찾을 수 없습니다.');
     }
   };
 

From 6e8e466359c236dc26ccd6e17ced6edcfc11f91e Mon Sep 17 00:00:00 2001
From: 7beunseo <kimes0403@gmail.com>
Date: Sat, 26 Oct 2024 02:57:48 +0900
Subject: [PATCH 11/12] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20=ED=85=8D=EC=8A=A4?=
 =?UTF-8?q?=ED=8A=B8=20=EA=B2=B9=EC=B9=98=EB=8A=94=20=EB=AC=B8=EC=A0=9C=20?=
 =?UTF-8?q?=ED=95=B4=EA=B2=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/workdetail/developer/Developer.style.js        | 2 ++
 .../workdetail/rightcomponent/RightContent.style.js           | 4 ++--
 2 files changed, 4 insertions(+), 2 deletions(-)

diff --git a/src/components/workdetail/developer/Developer.style.js b/src/components/workdetail/developer/Developer.style.js
index 0d7b6d4..b77317e 100644
--- a/src/components/workdetail/developer/Developer.style.js
+++ b/src/components/workdetail/developer/Developer.style.js
@@ -24,6 +24,7 @@ export const DeveloperName = styled.div`
   font-size: 22px;
   font-family: 'Pretendard-Medium';
   margin: 0px;
+  line-height: initial;
 
   ${({ isTwoCharacters }) =>
     isTwoCharacters &&
@@ -69,6 +70,7 @@ export const DeveloperPosition = styled.div`
   color: #696969;
   margin: 0px;
   flex: 1;
+  line-height: initial;
 
     @media (max-width: 1500px) {
     font-size: 20px;
diff --git a/src/components/workdetail/rightcomponent/RightContent.style.js b/src/components/workdetail/rightcomponent/RightContent.style.js
index e24d3bc..b5727ef 100644
--- a/src/components/workdetail/rightcomponent/RightContent.style.js
+++ b/src/components/workdetail/rightcomponent/RightContent.style.js
@@ -152,14 +152,14 @@ export const LinkTo = styled.div`
 export const DeveloperWrapper = styled.div`
   display: flex;
   flex-direction: column;
-  gap: 50px;
+  gap: 20px;
   justify-content: flex-start;
   align-items: flex-start;
   text-align: left;
   margin: 0px;
 
   @media (max-width: 1200px) {
-    gap: 40px;
+    gap: 18px;
   }
 `;
 

From 984882833e490843858579540394a8f98058560a Mon Sep 17 00:00:00 2001
From: alwn8918 <alwn8918@gmail.com>
Date: Sat, 26 Oct 2024 05:27:47 +0900
Subject: [PATCH 12/12] =?UTF-8?q?=F0=9F=90=9B=20Fix:=20=ED=83=80=EC=9D=B4?=
 =?UTF-8?q?=ED=8B=80=20=EC=95=A0=EB=8B=88=EB=A9=94=EC=9D=B4=EC=85=98=20?=
 =?UTF-8?q?=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/worklist/WorkItem.jsx      | 34 +++++++++++++++++------
 src/components/worklist/WorkItem.style.js | 15 ++++------
 2 files changed, 31 insertions(+), 18 deletions(-)

diff --git a/src/components/worklist/WorkItem.jsx b/src/components/worklist/WorkItem.jsx
index 7a6102e..64eec04 100644
--- a/src/components/worklist/WorkItem.jsx
+++ b/src/components/worklist/WorkItem.jsx
@@ -12,15 +12,19 @@ const WorkItem = React.memo(function ({
   const navigate = useNavigate();
   const titleRef = useRef(null);
   const [isOverflow, setIsOverflow] = useState(false);
+  const [widthScroll, setWidthScroll] = useState(0);
 
   // overflow 여부 체크
   useEffect(() => {
     if (titleRef.current) {
-      setIsOverflow(
-        titleRef.current.scrollWidth > titleRef.current.clientWidth,
-      );
+      const currentScrollWidth = titleRef.current.scrollWidth;
+      setIsOverflow(currentScrollWidth > titleRef.current.clientWidth);
+      setWidthScroll(currentScrollWidth);
+
+      // widthScroll이 업데이트된 후에 콘솔 출력
+      console.log(currentScrollWidth, widthScroll);
     }
-  }, [slideIndex]); // dataIndex가 변경될 때마다 확인
+  }, [dataIndex, slideIndex, widthScroll]); // dataIndex가 변경될 때마다 확인
 
   // 슬라이드가 변경될 때마다 애니메이션을 재시작하기 위해 key를 변경
   const titleKey = `${dataIndex}-${isOverflow}`; // 고유 키 생성
@@ -49,13 +53,25 @@ const WorkItem = React.memo(function ({
       </div>
       <W.Card>
         <img alt={title} src={image} />
-        <W.titleContainer>
-          {isCenterSlide && (
-            <W.Title key={titleKey} ref={titleRef} isOverflow={isOverflow}>
+        {isCenterSlide && (
+          <W.TitleContainer>
+            <W.Title
+              key={`${titleKey}-1`}
+              ref={titleRef}
+              isOverflow={isOverflow}
+              widthScroll={widthScroll}
+            >
               {title}
+              {isOverflow && (
+                <span>
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                  {title}
+                  &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
+                </span>
+              )}
             </W.Title>
-          )}
-        </W.titleContainer>
+          </W.TitleContainer>
+        )}
         {isCenterSlide && <W.Team>{team}</W.Team>}
       </W.Card>
     </W.Container>
diff --git a/src/components/worklist/WorkItem.style.js b/src/components/worklist/WorkItem.style.js
index 981ea23..49af778 100644
--- a/src/components/worklist/WorkItem.style.js
+++ b/src/components/worklist/WorkItem.style.js
@@ -60,17 +60,14 @@ export const Card = styled.div`
   }
 `;
 
-export const titleContainer = styled.div`
+export const TitleContainer = styled.div`
   width: 100%;
   overflow: hidden;
 `;
 
-const animate = keyframes`
-  0% {
-    transform: translateX(0);
-  }
+const animate = (widthScroll) => keyframes`
   100% {
-    transform: translateX(-250%);
+    transform: translateX(-${widthScroll / 2}px);
   }
 `;
 
@@ -87,9 +84,9 @@ export const Title = styled.p`
   white-space: nowrap;
   display: inline-block;
 
-  padding-left: ${(props) => (props.isOverflow ? '100%' : '0')};
-  animation: ${(props) => (props.isOverflow ? animate : 'none')} 10s linear
-    infinite;
+  animation: ${(props) =>
+      props.isOverflow ? animate(props.widthScroll) : 'none'}
+    ${(props) => props.widthScroll / 130}s 1s linear infinite;
 
   @media (max-width: 1920px) {
     font-size: 28px;