Merge pull request #65 from KNU-Design-Web/fix#64

Fix#64 모바일 반응형 UI 깨지는 현상 수정
KNU-Design-Web · Oct 28, 2024 · 94e6ef8 · 94e6ef8
2 parents 95e03a0 + f52c8f4
commit 94e6ef8
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 38 deletions.
diff --git a/src/apps/data/index.ts b/src/apps/data/index.ts
@@ -284,7 +284,7 @@ export const data: DataItem[] = [
             },
             email: "[email protected]",
             instagram: "zooya._.design",
-            link: "behance.net/64528efd",
+            link: "https://www.behance.net/64528efd",
         },
         project: {
             thumbnail: "https://images.knud2024.com/project-individual-thumbnail/Heeju-Son_1960x1000.webp",
@@ -382,7 +382,7 @@ export const data: DataItem[] = [
             },
             email: "[email protected]",
             instagram: "0nemnn",
-            link: "miryutats",
+            link: "https://www.behance.net/miryutats",
         },
         project: {
             thumbnail: "https://images.knud2024.com/project-individual-thumbnail/Minju-Won_1960x1000.webp",
@@ -771,7 +771,7 @@ export const data: DataItem[] = [
             },
             email: "[email protected]",
             instagram: "d_bysjh",
-            link: "https://be.net/hwangsusu",
+            link: "https://www.behance.net/hwangsusu",
         },
         project: {
             thumbnail: "https://images.knud2024.com/project-individual-thumbnail/Sujung-Hwang_1960x1000.webp",

diff --git a/src/common/components/Footer/Footer.style.ts b/src/common/components/Footer/Footer.style.ts
@@ -3,7 +3,7 @@ import styled from "@emotion/styled";
 
 export const Wrapper = styled.footer`
     position: relative;
-    z-index: 100;
+    z-index: 40;
 
     display: flex;
     flex-direction: column;

diff --git a/src/common/components/NavBar/NavTop.style.ts b/src/common/components/NavBar/NavTop.style.ts
@@ -5,7 +5,7 @@ export const Wrapper = styled.nav`
     position: fixed;
     top: 0;
     left: 0;
-    z-index: 4;
+    z-index: 50;
 
     width: 100%;
     height: 60px;
@@ -20,6 +20,9 @@ export const Wrapper = styled.nav`
 `;
 
 export const Item = styled.li<{ active: boolean }>`
+    position: relative;
+    z-index: 50;
+
     display: flex;
     width: 100%;
     height: 100%;

diff --git a/src/common/components/NavBar/NavTopItem.style.ts b/src/common/components/NavBar/NavTopItem.style.ts
@@ -2,6 +2,9 @@ import { navItems } from "@/apps/constants/navItems";
 import styled from "@emotion/styled";
 
 export const Item = styled.li<{ index: number; active: boolean }>`
+    position: relative;
+    z-index: 50;
+
     display: flex;
     width: 100%;
     height: 100%;

diff --git a/src/components/ProfilePage/ProfileDetail/ProfileDetail.style.ts b/src/components/ProfilePage/ProfileDetail/ProfileDetail.style.ts
@@ -35,11 +35,45 @@ export const Info = styled.div`
     }
 `;
 
+export const AuthorContainer = styled.div`
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+
+    width: 50%;
+`;
+
 export const Author = styled.div`
     p span {
         display: block;
         margin: 2px 0px;
     }
+
+    ${BREAKPOINT.MOBILE} {
+        h1 span {
+            font-size: 24px;
+        }
+        h3 span {
+            font-size: 16px;
+        }
+        p span {
+            font-size: 12px;
+        }
+    }
+`;
+
+export const MobileProjectTitle = styled.div`
+    display: none;
+
+    ${BREAKPOINT.MOBILE} {
+        display: block;
+        width: 100%;
+        white-space: nowrap;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        span {
+        }
+    }
 `;
 
 export const Project = styled.div`
@@ -95,10 +129,19 @@ export const ProjectTitle = styled.div`
     margin: 0px 10px;
 
     ${BREAKPOINT.TABLET} {
-        margin: 10px;
+        margin: 10px 0px;
+        h2 {
+            width: 100px;
+        }
+
+        h2 span {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
     }
     ${BREAKPOINT.MOBILE} {
-        margin: 10px;
+        margin: 10px 0px;
         display: none;
     }
 `;
@@ -112,6 +155,7 @@ export const Profile = styled.img`
     height: 500px;
 
     ${BREAKPOINT.MOBILE} {
+        margin-top: 20px;
         max-width: 100%;
     }
 `;
diff --git a/src/components/ProfilePage/ProfileDetail/ProfileDetail.tsx b/src/components/ProfilePage/ProfileDetail/ProfileDetail.tsx
@@ -14,27 +14,47 @@ export const ProfileDetail = (props: ProfileDetailProps) => {
     return (
         <ProfileDetailStyles.Wrapper>
             <ProfileDetailStyles.Info>
-                <ProfileDetailStyles.Author>
-                    <h1>
-                        <Text size="xl">{props.koName}</Text>
-                    </h1>
-                    <h3>
-                        <Text size="s" weight={400}>
-                            {props.enName}
-                        </Text>
-                    </h3>
-                    <p>
-                        <Text size="xs" weight={200} color="purple">
-                            {props.email}
-                        </Text>
-                        <Text size="xs" weight={200} color="purple">
-                            {props.instagram}
-                        </Text>
-                        <Text size="xs" weight={200} color="purple">
-                            {props.link}
+                <ProfileDetailStyles.AuthorContainer>
+                    <ProfileDetailStyles.Author>
+                        <h1>
+                            <Text size="xl">{props.koName}</Text>
+                        </h1>
+                        <h3>
+                            <Text size="s" weight={400}>
+                                {props.enName}
+                            </Text>
+                        </h3>
+                        <p>
+                            <Text size="xs" weight={200} color="purple">
+                                {props.email}
+                            </Text>
+                            <Text size="xs" weight={200} color="purple">
+                                {props.instagram && (
+                                    <a
+                                        href={`https://www.instagram.com/${props.instagram}`}
+                                        target="_blank"
+                                        style={{ color: "var(--color-purple)" }}
+                                    >
+                                        @{props.instagram}
+                                    </a>
+                                )}
+                            </Text>
+                            <Text size="xs" weight={200} color="purple">
+                                {props.link && (
+                                    <a href={props.link} target="_blank" style={{ color: "var(--color-purple)" }}>
+                                        {props.link?.split("/").at(-1)}
+                                    </a>
+                                )}
+                            </Text>
+                        </p>
+                    </ProfileDetailStyles.Author>
+
+                    <ProfileDetailStyles.MobileProjectTitle>
+                        <Text size="s" weight={600}>
+                            {props.projectThumbnailTitle}
                         </Text>
-                    </p>
-                </ProfileDetailStyles.Author>
+                    </ProfileDetailStyles.MobileProjectTitle>
+                </ProfileDetailStyles.AuthorContainer>
 
                 <ProfileDetailStyles.Project>
                     <ProfileDetailStyles.ProjectImgContianer
@@ -47,15 +67,11 @@ export const ProfileDetail = (props: ProfileDetailProps) => {
                     </ProfileDetailStyles.ProjectImgContianer>
 
                     <ProfileDetailStyles.ProjectTitle>
-                        {props.projectTitle.map((title) => {
-                            return (
-                                <h2>
-                                    <Text size="s" weight={500} color="#000">
-                                        {title}
-                                    </Text>
-                                </h2>
-                            );
-                        })}
+                        <h2>
+                            <Text size="s" weight={500} color="#000">
+                                {props.projectThumbnailTitle}
+                            </Text>
+                        </h2>
                     </ProfileDetailStyles.ProjectTitle>
                 </ProfileDetailStyles.Project>
             </ProfileDetailStyles.Info>

diff --git a/src/components/ProfilePage/ProfileItem/ProfileItem.tsx b/src/components/ProfilePage/ProfileItem/ProfileItem.tsx
@@ -19,7 +19,7 @@ export interface ProfileItemProps {
     profileImg: string;
     projectImg: string;
 
-    projectTitle: string[];
+    projectThumbnailTitle: string;
 }
 
 export const ProfileItem = (props: ProfileItemProps) => {

diff --git a/src/components/ProfilePage/ProfileList/ProfileList.style.ts b/src/components/ProfilePage/ProfileList/ProfileList.style.ts
@@ -12,4 +12,7 @@ export const Container = styled.ul`
     ${BREAKPOINT.TABLET} {
         margin-top: 60px;
     }
+    ${BREAKPOINT.MOBILE} {
+        margin-top: 60px;
+    }
 `;
diff --git a/src/pages/profile/ProfilePage.tsx b/src/pages/profile/ProfilePage.tsx
@@ -24,7 +24,7 @@ export default function ProfilePage() {
                                 link={item.author.link}
                                 profileImg={`https://images.knud2024.com/profile-webp-resized/${item.id}_780x1000.webp`}
                                 projectImg={`https://images.knud2024.com/project-card-thumbnail/thumbnail${item.id}_980x980.webp`}
-                                projectTitle={item.project.title}
+                                projectThumbnailTitle={item.project.thumbnailTitle}
                             />
                         );
                     })}