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

apps/admin/app/error.tsx

@@ -43,5 +43,5 @@ const errorPageContentStyle = css({
 });
 
 const buttonStyle = {
-  width: 328,
+  maxWidth: 328,
 };

apps/admin/app/not-found.tsx

@@ -50,5 +50,5 @@ const notFoundPageContentStyle = css({
 });
 
 const buttonStyle = {
-  width: 328,
+  maxWidth: 328,
 };

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",

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",
+};

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",
+};

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",
+};

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",
+};

apps/client/app/error.tsx

@@ -43,5 +43,5 @@ const errorPageContentStyle = css({
 });
 
 const buttonStyle = {
-  width: 328,
+  maxWidth: 328,
 };

apps/client/app/not-found.tsx

@@ -50,5 +50,5 @@ const notFoundPageContentStyle = css({
 });
 
 const buttonStyle = {
-  width: 328,
+  maxWidth: 328,
 };

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}
             />

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",

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}
       >