[Design] 클라이언트 페이지 디자인 및 수정 사항 반영 (#71)

* feat: wowds-ui 최신 버전 설치 * feat: client not-found 페이지 추가 * feat: ui 패키지 스타일 변경사항 반영 * feat: not-found 버튼 aria-label 추가 * feat: 클라이언트 에러 페이지 추가 * feat: 어드민 화면 에러페이지 추가 * fix: 빌드에러 해결 * chore: 내비게이션 바에서 나의 과제 페이지 삭제 * design: 수강 신청 페이지 스터디 한 줄 소개 ellipsis 처리 추가 * design: 버튼 maxWidth 지정 * design: 내비게이션 바 active 상태 안 보이는 부분 수정 * design: navbar 고정되도록 수정 --------- Co-authored-by: Eugene Kim <[email protected]>
GDSC-Hongik · Aug 27, 2024 · 6524a7d · 6524a7d
1 parent a987977
commit 6524a7d
Show file tree

Hide file tree

Showing 13 changed files with 68 additions and 27 deletions.
diff --git a/apps/admin/app/error.tsx b/apps/admin/app/error.tsx
@@ -43,5 +43,5 @@ const errorPageContentStyle = css({
 });
 
 const buttonStyle = {
-  width: 328,
+  maxWidth: 328,
 };
diff --git a/apps/admin/app/not-found.tsx b/apps/admin/app/not-found.tsx
@@ -50,5 +50,5 @@ const notFoundPageContentStyle = css({
 });
 
 const buttonStyle = {
-  width: 328,
+  maxWidth: 328,
 };
diff --git a/apps/client/app/(afterLogin)/layout.tsx b/apps/client/app/(afterLogin)/layout.tsx
@@ -13,7 +13,12 @@ const Layout = ({ children }: { children: React.ReactNode }) => {
   return (
     <>
       <Navbar />
-      <styled.main padding="54px 0 0 101px" width="calc(100vw - 351px)">
+      <styled.main
+        left="250px"
+        padding="54px 0 0 101px"
+        position="absolute"
+        width="calc(100vw - 351px)"
+      >
         {children}
       </styled.main>
     </>

diff --git a/apps/client/app/(afterLogin)/study-apply/_components/StudyItem.tsx b/apps/client/app/(afterLogin)/study-apply/_components/StudyItem.tsx
@@ -42,19 +42,18 @@ const StudyItem = ({ study, appliedStudyId }: StudyItemProps) => {
   const isNotApplicable = !isApplicable && !isCancelable;
   return (
     <Table>
-      <Flex direction="column" gap="xxs" justifyContent="center">
+      <Flex direction="column" gap="xxs" justifyContent="center" width={334}>
         <Flex className={contentStyle} gap="xs">
           <Text typo="h3">{title}</Text>
           <Tag color={sessionColors[studyType] ?? "green"} variant="solid1">
             {studyType}
           </Tag>
         </Flex>
-        <Text color="sub" typo="body2">
-          {`${introduction} -`}
-          <Link href={notionLink ?? ""} target="_blank">
-            {notionLink}
-          </Link>
-        </Text>
+        <Link href={notionLink ?? ""} target="_blank">
+          <Text className={introductionLinkTextStyle} color="sub" typo="body2">
+            {`(${introduction})`}
+          </Text>
+        </Link>
       </Flex>
       <Text className={textCellStyle}>{mentorName}</Text>
       <Text className={textCellStyle}>{studyTime}</Text>
@@ -102,6 +101,12 @@ const contentStyle = css({
   minWidth: "313px",
 });
 
+const introductionLinkTextStyle = css({
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+});
+
 const sessionColors: Record<StudyType, ComponentProps<typeof Tag>["color"]> = {
   "과제 스터디": "green",
   "온라인 세션": "blue",

diff --git a/apps/client/app/(beforeLogin)/(auth-error)/auth-error-after-recruitment/page.tsx b/apps/client/app/(beforeLogin)/(auth-error)/auth-error-after-recruitment/page.tsx
@@ -32,7 +32,12 @@ const AuthErrorAfterRecruitmentPage = () => {
         모집 기간에 합류 후 이용해주세요.
       </p>
       <div className={buttonContainerStyle}>
-        <Button aria-label="홈으로 이동" asProp={Link} href={routePath.landing}>
+        <Button
+          aria-label="홈으로 이동"
+          asProp={Link}
+          href={routePath.landing}
+          style={buttonStyle}
+        >
           홈으로 이동
         </Button>
       </div>
@@ -79,3 +84,7 @@ const buttonContainerStyle = css({
   gap: "12px",
   width: "100%",
 });
+
+const buttonStyle = {
+  maxWidth: "328px",
+};
diff --git a/apps/client/app/(beforeLogin)/(auth-error)/auth-error-during-recruitment/page.tsx b/apps/client/app/(beforeLogin)/(auth-error)/auth-error-during-recruitment/page.tsx
@@ -32,13 +32,19 @@ const AuthErrorDuringRecruitmentPage = () => {
         아래 버튼을 눌러 가입할 수 있어요!
       </p>
       <div className={buttonContainerStyle}>
-        <Button aria-label="홈으로 이동" asProp={Link} href={routePath.landing}>
+        <Button
+          aria-label="홈으로 이동"
+          asProp={Link}
+          href={routePath.landing}
+          style={buttonStyle}
+        >
           홈으로 이동
         </Button>
         <Button
           aria-label="GDSC Hongik 가입하기"
           asProp={Link}
           href={routePath.onboarding}
+          style={buttonStyle}
           variant="outline"
         >
           GDSC Hongik 가입하기
@@ -87,3 +93,7 @@ const buttonContainerStyle = css({
   gap: "12px",
   width: "100%",
 });
+
+const buttonStyle = {
+  maxWidth: "328px",
+};
diff --git a/apps/client/app/(beforeLogin)/auth/page.tsx b/apps/client/app/(beforeLogin)/auth/page.tsx
@@ -43,7 +43,7 @@ const AuthPage = async () => {
           asProp={Link}
           href={routePath["github-oauth"]}
           icon={githubLogoIcon}
-          style={{ backgroundColor: `${color.github}` }}
+          style={githubLoginButtonStyle}
         >
           GitHub 로그인
         </Button>
@@ -108,3 +108,8 @@ const authImageStyle = css({
   height: "100%",
   width: "100%",
 });
+
+const githubLoginButtonStyle = {
+  backgroundColor: `${color.github}`,
+  maxWidth: "328px",
+};
diff --git a/apps/client/app/(beforeLogin)/landing/page.tsx b/apps/client/app/(beforeLogin)/landing/page.tsx
@@ -33,6 +33,7 @@ const LandingPage = () => {
           asProp={Link}
           href={routePath.auth}
           size="lg"
+          style={loginButtonStyle}
         >
           로그인
         </Button>
@@ -85,3 +86,7 @@ const descriptionStyle = css({
   marginBottom: "48px",
   zIndex: 1,
 });
+
+const loginButtonStyle = {
+  maxWidth: "232px",
+};
diff --git a/apps/client/app/error.tsx b/apps/client/app/error.tsx
@@ -43,5 +43,5 @@ const errorPageContentStyle = css({
 });
 
 const buttonStyle = {
-  width: 328,
+  maxWidth: 328,
 };
diff --git a/apps/client/app/not-found.tsx b/apps/client/app/not-found.tsx
@@ -50,5 +50,5 @@ const notFoundPageContentStyle = css({
 });
 
 const buttonStyle = {
-  width: 328,
+  maxWidth: 328,
 };
diff --git a/apps/client/components/Navbar.tsx b/apps/client/components/Navbar.tsx
@@ -42,7 +42,7 @@ const Navbar = async () => {
               alt={menu.alt}
               href={menu.href}
               imageUrl={menu.imageUrl}
-              items={menu.items}
+              // items={menu.items}
               key={menu.name}
               name={menu.name}
             />
@@ -66,7 +66,8 @@ export default Navbar;
 const navbarContainerStyle = css({
   width: "250px",
   minWidth: "250px",
-  minHeight: "100vh",
+  height: "100vh",
+  position: "fixed",
   paddingTop: "54px",
   borderRightWidth: "arrow",
   borderColor: "mono.400",

diff --git a/apps/client/constants/navMenu.ts b/apps/client/constants/navMenu.ts
@@ -1,4 +1,4 @@
-import folderImageUrl from "../public/images/folder.svg";
+// import folderImageUrl from "../public/images/folder.svg";
 import homeImageUrl from "../public/images/home.svg";
 import personImageUrl from "../public/images/person.svg";
 import scheduleImageUrl from "../public/images/schedule.svg";
@@ -9,14 +9,14 @@ export const navMenu = [
     imageUrl: homeImageUrl,
     alt: "home-icon",
     name: "나의 스터디",
-    items: [
-      {
-        href: "/my-assignment",
-        imageUrl: folderImageUrl,
-        alt: "folder-icon",
-        name: "나의 과제",
-      },
-    ],
+    // items: [
+    //   {
+    //     href: "my-assignment",
+    //     imageUrl: folderImageUrl,
+    //     alt: "folder-icon",
+    //     name: "나의 과제",
+    //   },
+    // ],
   },
   {
     href: "/study-apply",

diff --git a/packages/ui/src/components/NavItem/index.tsx b/packages/ui/src/components/NavItem/index.tsx
@@ -56,7 +56,8 @@ const NavItem = ({ href, imageUrl, alt, name, items }: NavItemProps) => {
         role="menuitem"
         tabIndex={0}
         className={navItemStyle({
-          type: !segment[1] && segment[0] === href ? "active" : "inactive",
+          type:
+            !segment[1] && `/${segment[0]}` === href ? "active" : "inactive",
         })}
         onClick={handleClickNavItem}
       >