feature: redesign pages

components/BottomNav.tsx

@@ -1,14 +1,14 @@
 import { Box } from "@chakra-ui/react";
-import { useSession } from "next-auth/react";
 import Link, { LinkProps } from "next/link";
 import { usePathname, useSearchParams } from "next/navigation";
+import { useSession } from "next-auth/react";
 import { useSetRecoilState } from "recoil";
 import styled from "styled-components";
+
 import CirclePlusIcon from "../assets/icons/CirclePlusIcon";
 import HomeIcon from "../assets/icons/HomeIcon";
 import PeopleIcon from "../assets/icons/PeopleIcon";
 import StatisticsIcon from "../assets/icons/StatisticsIcon";
-
 import { HAS_STUDY_TODAY } from "../constants/keys/localStorage";
 import { getStudyStandardDate } from "../libs/study/date/getStudyStandardDate";
 import { slideDirectionState } from "../recoils/navigationRecoils";

components/atoms/Selector.tsx

@@ -2,8 +2,8 @@
 
 import { Select } from "@chakra-ui/react";
 import { ChangeEvent, useEffect, useState } from "react";
-import BottomArrowIcon from "../../assets/icons/BottomArrowIcon";
 
+import BottomArrowIcon from "../../assets/icons/BottomArrowIcon";
 import { DispatchType } from "../../types/hooks/reactTypes";
 import { ActiveLocation } from "../../types/services/locationTypes";
 import { isLocationType } from "../../utils/validationUtils";

components/atoms/buttons/ArrowTextButton.tsx

@@ -1,5 +1,6 @@
 import { Box } from "@chakra-ui/react";
 import styled from "styled-components";
+
 import LeftArrowIcon from "../../../assets/icons/arrows/LeftArrowIcon";
 import RightArrowIcon from "../../../assets/icons/arrows/RightArrowIcon";
 

components/molecules/Calendar.tsx

@@ -1,5 +1,6 @@
 import { Flex, Grid } from "@chakra-ui/react";
 import dayjs, { Dayjs } from "dayjs";
+
 import { getTextSwitcherProps } from "../../pageTemplates/home/studyController/StudyController";
 import { getCalendarDates } from "../../utils/dateTimeUtils";
 import DatePointButton from "./DatePointButton";
@@ -32,10 +33,10 @@ function Calendar({ type, selectedDate, func }: CalendarProps) {
       <>
         {type === "week" ? (
           <Flex h="58px" justify="space-between">
-            {calendarArr.map((dateStr) => {
+            {calendarArr.map((dateStr, idx) => {
               const date = dayjs(dateStr).date();
               return (
-                <Flex flex={1} w="100%" justify="center" align="center">
+                <Flex key={idx} flex={1} w="100%" justify="center" align="center">
                   <DatePointButton
                     date={date}
                     func={() => func(date)}
@@ -47,10 +48,10 @@ function Calendar({ type, selectedDate, func }: CalendarProps) {
           </Flex>
         ) : (
           <Grid templateColumns="repeat(7,1fr)" rowGap="12px">
-            {calendarArr.map((dateStr) => {
+            {calendarArr.map((dateStr, idx) => {
               const date = dayjs(dateStr).date();
               return (
-                <Flex w="100%" justify="center" align="center">
+                <Flex key={idx} w="100%" justify="center" align="center">
                   <DatePointButton
                     date={date}
                     func={() => func(date)}

components/molecules/DatePointButton.tsx

@@ -9,14 +9,14 @@ interface DatePointButtonProps {
 }
 
 function DatePointButton({ date, func, isSelected }: DatePointButtonProps) {
-  const PointDot = () => (
-    <Flex w="16px" h="16px" justify="center" align="center">
+  function PointDot() {
+  return <Flex w="16px" h="16px" justify="center" align="center">
       <Box w="4px" h="4px" borderRadius="50%" bgColor="var(--color-mint)" />
     </Flex>
-  );
+}
 
-  const TodayCircle = ({ date }: { date: number }) => (
-    <Flex
+  function TodayCircle({ date }: { date: number }) {
+  return <Flex
       justify="center"
       align="center"
       w="100%"
@@ -31,7 +31,7 @@ function DatePointButton({ date, func, isSelected }: DatePointButtonProps) {
     >
       {date}
     </Flex>
-  );
+}
 
   return (
     <Button onClick={func}>

components/molecules/DateVoteBlock.tsx

@@ -1,5 +1,6 @@
 import { Box, Button, Flex } from "@chakra-ui/react";
 import dayjs from "dayjs";
+
 import { DateVoteButtonProps } from "../../pageTemplates/home/studyController/StudyControllerVoteButton";
 import { dayjsToFormat } from "../../utils/dateTimeUtils";
 

components/molecules/badge/AttendanceBadge.tsx

@@ -11,7 +11,7 @@ export default function AttendanceBadge({ type, time }: IAttendanceBadge) {
     <BadgeContainer time={time}>
       <OutlineBadge
         text={type === "attend" ? "출석" : "불참"}
-        colorScheme={type === "attend" ? "mintTheme" : "redTheme"}
+        color={type === "attend" ? "var(--color-mint)" : "var(--color-red)"}
       />
 
       {time && <TimeText>{time}</TimeText>}

components/molecules/cards/PostThumbnailCard.tsx

@@ -4,9 +4,9 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import Image from "next/image";
 import Link from "next/link";
 import styled from "styled-components";
+
 import LocationDotIcon from "../../../assets/icons/LocationDotIcon";
 import UserIcon from "../../../assets/icons/UserIcon";
-
 import { SingleLineText } from "../../../styles/layout/components";
 import { IImageProps } from "../../../types/components/assetTypes";
 import { ITextAndColorSchemes } from "../../../types/components/propTypes";

modals/aboutHeader/DateCalendarModal.tsx

@@ -4,6 +4,7 @@ import { useSession } from "next-auth/react";
 import { useRouter, useSearchParams } from "next/navigation";
 import { Dispatch } from "react";
 import { useRecoilValue } from "recoil";
+
 import Calendar from "../../components/molecules/Calendar";
 import DateVoteBlock from "../../components/molecules/DateVoteBlock";
 import { useTypeToast } from "../../hooks/custom/CustomToast";
@@ -16,10 +17,9 @@ import {
   getStudyVoteButtonProps,
 } from "../../pageTemplates/home/studyController/StudyControllerVoteButton";
 import { myStudyState, studyDateStatusState } from "../../recoils/studyRecoils";
-
 import { IModal } from "../../types/components/modalTypes";
 import { dayjsToFormat } from "../../utils/dateTimeUtils";
-import { IHeaderOptions, ModalLayout } from "../Modals";
+import { ModalLayout } from "../Modals";
 interface DateCalendarModalProps extends IModal {
   selectedDate: Dayjs;
   setModalType: Dispatch<VoteType>;
@@ -56,8 +56,6 @@ function DateCalendarModal({ selectedDate, setIsModal, setModalType }: DateCalen
     setModalType(ACTION_TO_VOTE_TYPE[type]);
   };
 
-  const headerOptions: IHeaderOptions = {};
-
   return (
     <ModalLayout title={dayjsToFormat(selectedDate, "YYYY년 M월")} setIsModal={setIsModal}>
       <Calendar selectedDate={selectedDate} type="month" func={onClick} />

modals/home/writeDrawer.tsx

@@ -11,9 +11,9 @@ import {
 } from "@chakra-ui/react";
 import { faBooks, faCampfire, faCloudBolt } from "@fortawesome/pro-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useSession } from "next-auth/react";
 import Link from "next/link";
 import { usePathname, useRouter, useSearchParams } from "next/navigation";
+import { useSession } from "next-auth/react";
 import { useEffect } from "react";
 
 import { useToast, useTypeToast } from "../../hooks/custom/CustomToast";

modals/userRequest/RequestPromotionRewardModal.tsx

@@ -1,11 +1,11 @@
 import { Button } from "@chakra-ui/react";
-import { useSession } from "next-auth/react";
 import Image from "next/image";
+import { useSession } from "next-auth/react";
 import { useState } from "react";
 import styled from "styled-components";
 
 import { CopyBtn } from "../../components/atoms/Icons/CopyIcon";
-import { PromotionComponent, PROMOTION_TEXT } from "../../constants/contentsText/Private";
+import { PROMOTION_TEXT,PromotionComponent } from "../../constants/contentsText/Private";
 import { POINT_SYSTEM_PLUS } from "../../constants/settingValue/pointSystem";
 import { useCompleteToast, useErrorToast } from "../../hooks/custom/CustomToast";
 import { usePointSystemMutation } from "../../hooks/user/mutations";

pageTemplates/gather/detail/GatherComment.tsx

@@ -1,8 +1,8 @@
 import { faEllipsis } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import dayjs from "dayjs";
-import { useSession } from "next-auth/react";
 import { useRouter } from "next/dist/client/router";
+import { useSession } from "next-auth/react";
 import { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 

pageTemplates/gather/detail/GatherParticipation.tsx

@@ -1,8 +1,8 @@
 import { Box, Button } from "@chakra-ui/react";
 import { fa1, fa2, faCrown, faInfinity } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
 import { useState } from "react";
 import { useSetRecoilState } from "recoil";
 import styled from "styled-components";

pageTemplates/gather/writing/GatherWritingDateDate.tsx

@@ -6,8 +6,8 @@ import DatePicker from "react-datepicker";
 import styled from "styled-components";
 
 import {
-  PickerDateAndTimeHeader,
   PICKER_DATE_AND_TIME,
+  PickerDateAndTimeHeader,
 } from "../../../components/molecules/picker/DatePickerOptions";
 import { DispatchType } from "../../../types/hooks/reactTypes";
 import { IGatherWriting } from "../../../types/models/gatherTypes/gatherTypes";

pageTemplates/group/GroupBlock.tsx

@@ -1,8 +1,8 @@
 import { faLockKeyhole } from "@fortawesome/pro-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import dayjs from "dayjs";
-import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
 import { useSetRecoilState } from "recoil";
 import styled from "styled-components";
 

pageTemplates/group/detail/GroupComment.tsx

@@ -1,8 +1,8 @@
 import { faEllipsis } from "@fortawesome/pro-light-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import dayjs from "dayjs";
-import { useSession } from "next-auth/react";
 import { useRouter } from "next/dist/client/router";
+import { useSession } from "next-auth/react";
 import { useEffect, useRef, useState } from "react";
 import styled from "styled-components";
 

pageTemplates/group/detail/GroupContent/ContentAttendance.tsx

@@ -4,8 +4,8 @@ import { faCheckCircle as checkCircle } from "@fortawesome/pro-regular-svg-icons
 import { faCaretLeft, faCaretRight } from "@fortawesome/pro-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import dayjs from "dayjs";
-import { useSession } from "next-auth/react";
 import { useRouter } from "next/router";
+import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 import styled from "styled-components";
 

pageTemplates/group/detail/GroupContent/ContentInfo.tsx

@@ -1,7 +1,7 @@
 import { faBellOn } from "@fortawesome/pro-regular-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { useSession } from "next-auth/react";
 import Link from "next/link";
+import { useSession } from "next-auth/react";
 import styled from "styled-components";
 
 import BlurredPart from "../../../../components/molecules/BlurredPart";

pageTemplates/home/HomeCategoryNav.tsx

@@ -3,12 +3,12 @@ import { useSearchParams } from "next/navigation";
 import { useState } from "react";
 import { useSetRecoilState } from "recoil";
 import styled from "styled-components";
+
 import CalendarIcon from "../../assets/icons/CalendarIcon";
 import ChatIcon from "../../assets/icons/ChatIcon";
 import GiftIcon from "../../assets/icons/GiftIcon";
 import LoaderIcon from "../../assets/icons/LoaderIcon";
 import UserTwoIcon from "../../assets/icons/UserTwoIcon";
-
 import { NewAlertIcon } from "../../components/atoms/Icons/AlertIcon";
 import NotCompletedModal from "../../modals/system/NotCompletedModal";
 import { slideDirectionState } from "../../recoils/navigationRecoils";
@@ -114,9 +114,4 @@ const CustomLink = styled(Link)`
   border-radius: 6px;
 `;
 
-const Button = styled.button`
-  margin-bottom: 9px;
-  position: relative;
-`;
-
 export default HomeCategoryNav;

pageTemplates/home/HomeGatherSection.tsx

@@ -1,9 +1,8 @@
 import { Box, Flex } from "@chakra-ui/react";
 import dayjs from "dayjs";
-import { useRouter, useSearchParams } from "next/navigation";
+import { useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useSetRecoilState } from "recoil";
-import styled from "styled-components";
 
 import { IPostThumbnailCard } from "../../components/molecules/cards/PostThumbnailCard";
 import {
@@ -18,7 +17,6 @@ import { IUserSummary } from "../../types/models/userTypes/userInfoTypes";
 import { getRandomImage } from "../../utils/imageUtils";
 
 export default function HomeGatherSection() {
-  const router = useRouter();
   const searchParams = useSearchParams();
   const location = searchParams.get("location");
 
@@ -94,7 +92,3 @@ const getGatherBadge = (gatherStatus: GatherStatus): ITextAndColorSchemes => {
       return { text: "open", color: "mint" };
   }
 };
-
-const Layout = styled.div`
-  padding: 16px;
-`;

pageTemplates/home/HomeInitialSetting.tsx

@@ -1,6 +1,6 @@
 import dayjs from "dayjs";
-import { useSession } from "next-auth/react";
 import { useSearchParams } from "next/navigation";
+import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 import Joyride, { CallBackProps, STATUS, Step } from "react-joyride";
 import { useSetRecoilState } from "recoil";

pageTemplates/home/HomeReviewSection.tsx

@@ -1,7 +1,7 @@
 import { Box } from "@chakra-ui/react";
 import { useSetRecoilState } from "recoil";
-import ArrowTextButton from "../../components/atoms/buttons/ArrowTextButton";
 
+import ArrowTextButton from "../../components/atoms/buttons/ArrowTextButton";
 import SectionBar from "../../components/molecules/bars/SectionBar";
 import ImageTileGridLayout, {
   IImageTileData,

pageTemplates/home/HomeStudySection.tsx

@@ -1,7 +1,7 @@
 import dayjs from "dayjs";
 import { AnimatePresence, motion, PanInfo } from "framer-motion";
-import { useSession } from "next-auth/react";
 import { useRouter, useSearchParams } from "next/navigation";
+import { useSession } from "next-auth/react";
 import { useEffect, useState } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import styled from "styled-components";

pageTemplates/home/HomeWinRecordSection.tsx

@@ -1,8 +1,8 @@
 import { useRouter } from "next/navigation";
 import { useSetRecoilState } from "recoil";
 import styled from "styled-components";
-import ArrowTextButton from "../../components/atoms/buttons/ArrowTextButton";
 
+import ArrowTextButton from "../../components/atoms/buttons/ArrowTextButton";
 import SectionBar from "../../components/molecules/bars/SectionBar";
 import SummaryTable from "../../components/organisms/tables/SummaryTable";
 import { slideDirectionState } from "../../recoils/navigationRecoils";

pageTemplates/home/homeHeader/HomeHeader.tsx

@@ -5,6 +5,7 @@ import { useRouter, useSearchParams } from "next/navigation";
 import { useEffect, useState } from "react";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import styled from "styled-components";
+
 import BellIcon from "../../../assets/icons/BellIcon";
 import UserCircleIcon from "../../../assets/icons/UserCircleIcon";
 import MainLogo from "../../../assets/MainLogo";
@@ -23,7 +24,6 @@ import { slideDirectionState } from "../../../recoils/navigationRecoils";
 import { renderHomeHeaderState } from "../../../recoils/renderRecoils";
 import { transferShowDailyCheckState } from "../../../recoils/transferRecoils";
 import { NOTICE_ARR } from "../../../storage/notice";
-import { AlertIcon } from "../../../styles/icons";
 import { dayjsToStr } from "../../../utils/dateTimeUtils";
 // export type HomeHeaderModalType =
 //   | "promotion"
@@ -146,15 +146,4 @@ const Layout = styled.header`
   }
 `;
 
-const Title = styled.span`
-  font-weight: 800;
-  color: var(--gray-900);
-`;
-
-const Alert = styled(AlertIcon)`
-  position: absolute;
-  right: 14px;
-  bottom: 24px;
-`;
-
 export default HomeHeader;

pageTemplates/home/studyController/StudyController.tsx

@@ -78,7 +78,7 @@ interface ControllerHeaderProps {
   setModalType: Dispatch<VoteType>;
 }
 
-const ControllerHeader = ({ selectedDateDayjs, setModalType }: ControllerHeaderProps) => {
+function ControllerHeader({ selectedDateDayjs, setModalType }: ControllerHeaderProps) {
   const [isModal, setIsModal] = useState(false);
 
   return (
@@ -98,7 +98,7 @@ const ControllerHeader = ({ selectedDateDayjs, setModalType }: ControllerHeaderP
       )}
     </>
   );
-};
+}
 
 export const getTextSwitcherProps = (
   selectedDateDayjs: Dayjs,