Merge branch 'develop' of https://github.com/2024WISCOM/WISCOM-FE int…

…o feature/about
2024WISCOM · Oct 26, 2024 · 2b987c3 · 2b987c3
2 parents 6317eea + 55ff2f3
commit 2b987c3
Show file tree

Hide file tree

Showing 13 changed files with 153 additions and 65 deletions.
diff --git 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/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;
 
   }
 
@@ -24,11 +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 :0;
   }
 
 `;
@@ -214,7 +216,6 @@ export const UrlContainer = styled.div`
 
     img{
       height : 5vh;
-      width: 8vw;
       }
   }
 

diff --git 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,20 +33,20 @@ 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 ;
   }
 `;
 
 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%;
   }
@@ -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.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
@@ -5,24 +5,26 @@ 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: 100vh;
 
   @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%;
+
+    min-height: 110vh;
   }
 `;
 
@@ -133,7 +135,8 @@ export const Label = styled.label`
 
   &.from-label {
     bottom: 5%;
-    right: -30%;
+    right: ${({ length }) => `calc(-35% + ${length * 0.5}em)`}; /* 입력된 글자의 길이에 따라 위치 조정 */
+
   }
 
   @media (max-width: 768px) {
@@ -146,7 +149,8 @@ export const Label = styled.label`
 
     &.from-label {
       bottom: 5%;
-      right: -17%;
+      right:${({ length }) => `calc(-20% + ${length * 0.35}em)`};
+     
     }
   }
 
@@ -159,6 +163,7 @@ export const Label = styled.label`
 
     &.from-label {
       bottom: 5%;
+      right:${({ length }) => `calc(-25% + ${length * 0.35}em)`};
     }
   }
 `;
@@ -198,12 +203,12 @@ 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;
-  font-size: 1.4em;
+  font-size: 1.1em;
   resize: none;
   text-align: left;
   z-index: 10;
@@ -227,13 +232,13 @@ 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) {
-    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
@@ -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;
   }
 `;
diff --git 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 &&
@@ -68,6 +69,8 @@ export const DeveloperPosition = styled.div`
   font-family: 'Pretendard-Regular';
   color: #696969;
   margin: 0px;
+  flex: 1;
+  line-height: initial;
 
     @media (max-width: 1500px) {
     font-size: 20px;

diff --git a/src/components/workdetail/mobile/WorkIntroduce.jsx b/src/components/workdetail/mobile/WorkIntroduce.jsx
@@ -42,21 +42,31 @@ 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>
         <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
@@ -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>

diff --git 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;
   }
 `;