[Deploy] 학생용 페이지 모바일 대응

apps/client/app/(afterLogin)/(mobile)/mobile/_components/Navigation.tsx

@@ -0,0 +1,67 @@
+"use client";
+
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Text } from "@wow-class/ui";
+import { Alarm } from "components/Icon/Alarm";
+import { Calendar } from "components/Icon/Calendar";
+import { Home } from "components/Icon/Home";
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+
+const Navigation = () => {
+  const pathname = usePathname();
+
+  return (
+    <nav aria-label="mobile-my-study-navigation" className={navigationStyle}>
+      <Flex justifyContent="space-around">
+        <Link href="/mobile/my-study">
+          <Flex alignItems="center" direction="column" gap="5px">
+            <Home selected={pathname === "/mobile/my-study"} />
+            <Text
+              color={pathname === "/mobile/my-study" ? "primary" : "sub"}
+              typo="body3"
+            >
+              홈
+            </Text>
+          </Flex>
+        </Link>
+        <Link href="/mobile/announcement">
+          <Flex alignItems="center" direction="column" gap="5px">
+            <Alarm selected={pathname === "/mobile/announcement"} />
+            <Text
+              color={pathname === "/mobile/announcement" ? "primary" : "sub"}
+              typo="body3"
+            >
+              공지사항
+            </Text>
+          </Flex>
+        </Link>
+        <Link href="/mobile/curriculum">
+          <Flex alignItems="center" direction="column" gap="5px">
+            <Calendar selected={pathname === "/mobile/curriculum"} />
+            <Text
+              color={pathname === "/mobile/curriculum" ? "primary" : "sub"}
+              typo="body3"
+            >
+              커리큘럼
+            </Text>
+          </Flex>
+        </Link>
+      </Flex>
+    </nav>
+  );
+};
+
+export default Navigation;
+
+const navigationStyle = css({
+  position: "fixed",
+  left: 0,
+  bottom: 0,
+  backgroundColor: "backgroundNormal",
+  height: "90px",
+  width: "100%",
+  paddingTop: "16px",
+  boxShadow: "0px -2px 10px 0px rgba(0, 0, 0, 0.10)",
+});

apps/client/app/(afterLogin)/(mobile)/mobile/_components/PageHeader.tsx

@@ -0,0 +1,33 @@
+import { css } from "@styled-system/css";
+import { membersApi } from "apis/membersApi";
+import { headers } from "next/headers";
+import Header from "wowds-ui/Header";
+
+const PageHeader = async () => {
+  const headersList = await headers();
+  const pathname = headersList.get("x-pathname");
+
+  if (pathname === "/mobile/auth") {
+    return (
+      <div className={headerStyle}>
+        <Header />
+      </div>
+    );
+  }
+
+  const myInfo = await membersApi.getMyAccountInfo();
+
+  return (
+    <div className={headerStyle}>
+      <Header username={myInfo?.name} variant={myInfo ? "username" : "none"} />
+    </div>
+  );
+};
+
+const headerStyle = css({
+  position: "fixed",
+  backgroundColor: "backgroundNormal",
+  width: "100%",
+});
+
+export default PageHeader;

apps/client/app/(afterLogin)/(mobile)/mobile/_components/Spinner.tsx

@@ -0,0 +1,12 @@
+import { Flex } from "@styled-system/jsx";
+import BlueSpinner from "wowds-ui/BlueSpinner";
+
+const Spinner = () => {
+  return (
+    <Flex justifyContent="center">
+      <BlueSpinner />
+    </Flex>
+  );
+};
+
+export default Spinner;

apps/client/app/(afterLogin)/(mobile)/mobile/announcement/layout.tsx

@@ -0,0 +1,23 @@
+import { css } from "@styled-system/css";
+import type { Metadata } from "next";
+
+import Navigation from "../_components/Navigation";
+
+export const metadata: Metadata = {
+  title: "스터디 공지",
+};
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <>
+      <section className={layoutContainerStyle}>{children}</section>
+      <Navigation />
+    </>
+  );
+};
+
+export default Layout;
+
+const layoutContainerStyle = css({
+  marginBottom: "90px",
+});

apps/client/app/(afterLogin)/(mobile)/mobile/announcement/page.tsx

@@ -0,0 +1,90 @@
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Text } from "@wow-class/ui";
+import { formatISODateWithDot } from "@wow-class/utils";
+import { myStudyApi } from "apis/myStudyApi";
+import Image from "next/image";
+import Link from "next/link";
+
+import EmptyStudy from "../my-study/_components/EmptyStudy";
+
+const MobileStudyAnnouncementPage = async () => {
+  const myOngoingStudyInfoData = await myStudyApi.getMyOngoingStudyInfo();
+
+  if (!myOngoingStudyInfoData?.studyId) {
+    return <EmptyStudy />;
+  }
+
+  const studyAnnouncementListData = await myStudyApi.getStudyAnnouncementList(
+    myOngoingStudyInfoData?.studyId
+  );
+
+  return (
+    <section aria-label="study-announcement-list">
+      <Text as="h1" className={studyAnnouncementListHeadingStyle} typo="h1">
+        스터디 공지
+      </Text>
+      <Flex direction="column" gap="12px" justifyContent="center">
+        {studyAnnouncementListData?.length ? (
+          studyAnnouncementListData?.map(
+            ({ studyAnnounceId, title, createdDate, link }) => (
+              <Link
+                className={studyAnnouncementListBoxStyle}
+                href={link}
+                key={studyAnnounceId}
+                target="_blank"
+              >
+                <Text
+                  as="span"
+                  className={studyAnnouncementTitleStyle}
+                  typo="body2"
+                >
+                  {title}
+                </Text>
+                <Text as="span" color="sub" typo="body3">
+                  {formatISODateWithDot(createdDate)}
+                </Text>
+              </Link>
+            )
+          )
+        ) : (
+          <Flex alignItems="center" direction="column" gap={24} paddingY={38}>
+            <Image
+              alt="empty-study"
+              height={140}
+              src="/images/empty.svg"
+              width={186}
+            />
+            <Text as="h2" color="sub" typo="h2">
+              올라온 공지가 없어요.
+            </Text>
+          </Flex>
+        )}
+      </Flex>
+    </section>
+  );
+};
+
+export default MobileStudyAnnouncementPage;
+
+const studyAnnouncementListHeadingStyle = css({
+  marginBottom: "md",
+});
+
+const studyAnnouncementListBoxStyle = css({
+  alignItems: "center",
+  borderRadius: "10px",
+  height: "72px",
+  display: "flex",
+  justifyContent: "space-between",
+  border: "1px solid",
+  borderColor: "outline",
+  backgroundColor: "backgroundNormal",
+  padding: "24px",
+});
+
+const studyAnnouncementTitleStyle = css({
+  whiteSpace: "nowrap",
+  overflow: "hidden",
+  textOverflow: "ellipsis",
+});

apps/client/app/(afterLogin)/(mobile)/mobile/attendance-check-info/_components/AttendanceCheckBox.tsx

@@ -0,0 +1,72 @@
+"use client";
+
+import { css } from "@styled-system/css";
+import { Flex } from "@styled-system/jsx";
+import { Space, Text } from "@wow-class/ui";
+import { parseISODate } from "@wow-class/utils";
+import useAttendanceCheckSearchParams from "hooks/useAttendanceCheckSearchParams";
+import Link from "next/link";
+import Button from "wowds-ui/Button";
+import Divider from "wowds-ui/Divider";
+
+export const AttendanceCheckBox = () => {
+  const { studyDetailId, studyName, deadLine, currentWeek, mentorName } =
+    useAttendanceCheckSearchParams();
+
+  const { year, month, day, hours, minutes } = parseISODate(deadLine);
+
+  const {
+    year: currentYear,
+    month: currentMonth,
+    day: currentDay,
+  } = parseISODate(new Date().toISOString());
+
+  return (
+    <div className={boxContainerStyle}>
+      <Text color="sub" typo="body3">
+        현재 진행 강의
+      </Text>
+      <Space height={8} />
+      <Flex alignItems="center" direction="column">
+        <Text typo="h1">{studyName}</Text>
+        <Space height={8} />
+        <Text typo="body1">{mentorName}</Text>
+      </Flex>
+      <Space height={20} />
+      <Divider />
+      <Space height={20} />
+      <Flex justifyContent="space-between" textStyle="body1">
+        <Text>출석 체크</Text>
+        <Text typo="body2">{currentWeek}주차</Text>
+      </Flex>
+      <Flex justifyContent="space-between" textStyle="body1">
+        <Text>수강 날짜</Text>
+        <Text typo="body2">
+          {currentYear}년 {currentMonth}월 {currentDay}일
+        </Text>
+      </Flex>
+      <Flex justifyContent="space-between" textStyle="body1">
+        <Text>출석 인정 시간</Text>
+        <Text color="error" typo="body2">
+          {year}년 {month}월 {day}일 00:00 - {hours}:{minutes}
+        </Text>
+      </Flex>
+      <Space height={40} />
+      <Button
+        asProp={Link}
+        href={`/mobile/attendance-check-input?study-detail-id=${studyDetailId}&week=${currentWeek}&study-name=${studyName}`}
+      >
+        출석 체크하기
+      </Button>
+    </div>
+  );
+};
+
+const boxContainerStyle = css({
+  backgroundColor: "backgroundNormal",
+  paddingX: "1.5rem",
+  paddingY: "1.75rem",
+  borderRadius: "0.5rem",
+  border: "1px solid",
+  borderColor: "outline",
+});

apps/client/app/(afterLogin)/(mobile)/mobile/attendance-check-info/layout.tsx

@@ -0,0 +1,11 @@
+import type { Metadata } from "next";
+
+export const metadata: Metadata = {
+  title: "출석 체크",
+};
+
+const Layout = ({ children }: { children: React.ReactNode }) => {
+  return <>{children}</>;
+};
+
+export default Layout;

apps/client/app/(afterLogin)/(mobile)/mobile/attendance-check-info/page.tsx

@@ -0,0 +1,23 @@
+"use client";
+
+import { Space, Text } from "@wow-class/ui";
+import { Suspense } from "react";
+
+import Spinner from "../_components/Spinner";
+import { AttendanceCheckBox } from "./_components/AttendanceCheckBox";
+
+const MobileAttendanceCheckInfoPage = () => {
+  return (
+    <>
+      <Text as="h1" typo="h1">
+        출석 체크
+      </Text>
+      <Space height={40} />
+      <Suspense fallback={<Spinner />}>
+        <AttendanceCheckBox />
+      </Suspense>
+    </>
+  );
+};
+
+export default MobileAttendanceCheckInfoPage;