Merge branch 'main' of https://github.com/prgrms-fe-devcourse/FEDC2_S…

…hallenge_Jaeho into fix/following-status

src/api/notification.ts

@@ -1,7 +1,9 @@
 import axios from "@lib/axios";
+import { Notification } from "src/types";
 
 export const fetchGetNotificationList = async () => {
-  const { data } = await axios.get("/notifications");
+  const { data } = await axios.get<Notification[]>("/notifications");
+
   return data;
 };
 

src/components/base/ChakraInput.tsx

@@ -2,15 +2,15 @@
 import { Input } from "@chakra-ui/react";
 import { useState } from "react";
 
-type inputTypes = {
+interface Props {
   placeholder: string;
   variant: string;
   size?: string;
   width?: number | string;
   type?: string;
   children?: string;
   onChangeValue?: any;
-};
+}
 
 const ChakraInput = ({
   children = "",
@@ -20,7 +20,7 @@ const ChakraInput = ({
   width = 400,
   type = "text",
   onChangeValue,
-}: inputTypes) => {
+}: Props) => {
   const bgColor = variant === "outline" ? "#FFFFFF" : "#E2E8F0";
   const border = variant === "outline" ? "2px solid" : "2px solid transparent";
   const borderColor = variant === "outline" ? "#E2E8F0" : "transparent";

src/components/base/ChakraText.tsx

@@ -1,13 +1,13 @@
 import React from "react";
 import { Text } from "@chakra-ui/react";
 
-type textTypes = {
+interface Props {
   children: React.ReactNode;
   size?: "sm" | "md" | "lg";
   color?: string;
-};
+}
 
-const ChakraText = ({ children, size = "lg", color = "black" }: textTypes) => {
+const ChakraText = ({ children, size = "lg", color = "black" }: Props) => {
   return (
     <Text textAlign="center" fontSize={size} color={color}>
       {children}

src/components/base/DefaultText.tsx

@@ -1,12 +1,12 @@
 import { Text } from "@chakra-ui/react";
 import React from "react";
 
-type DefaultTextTypes = {
+interface Props {
   children: React.ReactNode;
   styleProps?: React.CSSProperties;
-};
+}
 
-const DefaultText = ({ children, styleProps = {} }: DefaultTextTypes) => {
+const DefaultText = ({ children, styleProps = {} }: Props) => {
   return (
     <Text
       fontSize="lg"

src/components/base/Icon.tsx

@@ -3,17 +3,13 @@ import React from "react";
 import styled from "@emotion/styled";
 import { Buffer } from "buffer";
 
-type iconTypes = {
+interface Props {
   name: string;
   size?: number;
   color?: string;
-};
-
-const IconWrapper = styled.i`
-  display: inline-block;
-`;
+}
 
-const Icon = ({ name, size = 38, color = "#000000" }: iconTypes) => {
+const Icon = ({ name, size = 38, color = "#000000" }: Props) => {
   const iconStyle: React.CSSProperties = {
     width: size,
     height: size,
@@ -36,3 +32,7 @@ const Icon = ({ name, size = 38, color = "#000000" }: iconTypes) => {
 };
 
 export default Icon;
+
+const IconWrapper = styled.i`
+  display: inline-block;
+`;

src/components/domain/ChallengePage/CertificationBox.tsx

@@ -1,10 +1,10 @@
 import { Box } from "@chakra-ui/react";
 
-type CertificationBoxType = {
+interface Props {
   isChecked: boolean;
-};
+}
 
-const CertificationBox = ({ isChecked }: CertificationBoxType) => {
+const CertificationBox = ({ isChecked }: Props) => {
   const bgColor = isChecked ? "#FFAA6D" : "#EAEDF2";
   return <Box w="40px" h="40px" bg={bgColor} borderRadius="5px"></Box>;
 };

src/components/domain/ChallengePage/CertificationButton.tsx

@@ -1,11 +1,11 @@
 import { Circle } from "@chakra-ui/react";
 import Icon from "@base/Icon";
 
-type activeType = {
+interface Props {
   isActive?: boolean;
-};
+}
 
-const CertificationButton = ({ isActive }: activeType) => {
+const CertificationButton = ({ isActive }: Props) => {
   const bgColor = isActive ? "#FF7900" : "#D9D9D9";
   const name = isActive ? "arrow-up" : "check";
   const color = isActive ? "#FFFFFF" : "#000000";

src/components/domain/ChallengePage/CertificationTable.tsx

@@ -6,11 +6,11 @@ type CertificationBoxType = {
   isChecked: boolean;
 };
 
-type CertificationTableType = {
+interface Props {
   children: Array<CertificationBoxType>;
-};
+}
 
-const CertificationTable = ({ children: days }: CertificationTableType) => {
+const CertificationTable = ({ children: days }: Props) => {
   return (
     <Grid templateColumns="repeat(6, 1fr)" gridGap="20px" w="340px">
       {days.length === 30 &&

src/components/domain/ChallengePage/ChallengeReward.tsx

@@ -3,12 +3,12 @@ import ChakraText from "@base/ChakraText";
 import ChakraHeading from "@base/ChakraHeading";
 import { Flex } from "@chakra-ui/react";
 
-type ChallengeRewardTypes = {
+interface Props {
   startDate: string;
   endDate: string;
   reward: string;
   restDay: number;
-};
+}
 
 const RewardContainer = styled.div`
   display: flex;
@@ -26,7 +26,7 @@ const ChallengeReward = ({
   endDate,
   reward = "보상 내용",
   restDay = 30,
-}: ChallengeRewardTypes) => {
+}: Props) => {
   return (
     <Flex flexDirection="column" maxW="610px" w="100%">
       <Flex justifyContent="space-between" w="100%">

src/components/domain/ChallengePage/CheerUpButton.tsx

@@ -1,15 +1,16 @@
 import Social from "@base/Social";
 import { Center } from "@chakra-ui/react";
 
-type CheerUpButtonType = {
+interface Props {
   isCheered?: boolean;
   count: number;
-};
+}
 
-const CheerUpButton = ({ isCheered = false, count }: CheerUpButtonType) => {
+const CheerUpButton = ({ isCheered = false, count }: Props) => {
   const bgColor = isCheered ? "#FFAA6D" : "#FFFFFF";
   const fill = isCheered ? "#F4F6F8" : "#000000";
   const color = isCheered ? "#F4F6F8" : "#000000";
+
   return (
     <Center
       w="120px"

src/components/domain/ChallengePage/CommentButton.tsx

@@ -1,11 +1,11 @@
 import Social from "@base/Social";
 import { Center } from "@chakra-ui/react";
 
-type CommentButtonType = {
+interface Props {
   count: number;
-};
+}
 
-const CommentButton = ({ count }: CommentButtonType) => {
+const CommentButton = ({ count }: Props) => {
   return (
     <Center
       w="120px"

src/components/domain/ChallengesPage/Challenges.tsx

@@ -7,11 +7,6 @@ interface ChallengesProps {
   posts: Post[];
 }
 
-const CardContainer = styled.div`
-  margin-bottom: 12px;
-  cursor: pointer;
-`;
-
 const Challenges = ({ posts }: ChallengesProps) => {
   const navigate = useNavigate();
   const handleClick = (channelId: string, challengeId: string) => {
@@ -49,3 +44,8 @@ const Challenges = ({ posts }: ChallengesProps) => {
 };
 
 export default Challenges;
+
+const CardContainer = styled.div`
+  margin-bottom: 12px;
+  cursor: pointer;
+`;