feat: add API

1. 테스트
#25

Author: yoon-junseo

package.json

@@ -19,7 +19,9 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^5.3.0",
     "styled-components": "^5.3.3",
-    "styled-reset": "^4.3.4"
+    "styled-reset": "^4.3.4",
+    "swr": "^1.1.2",
+    "universal-cookie": "^4.0.4"
   },
   "devDependencies": {
     "@babel/core": "^7.16.0",

src/components/atomic/atoms/Image/index.tsx

@@ -6,7 +6,7 @@ export interface IImageProps {
   objectFit?: string;
   src: string;
   alt?: string;
-  maxWidth: string;
+  maxWidth?: string;
   width: string;
   height: string;
   borderRadius?: string;

src/components/atomic/atoms/KakaoLoginButton/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+
+import Button from '@/components/atomic/atoms/Button';
+import Text from '@/components/atomic/atoms/Text';
+
+interface IKakaoLoginButtonProps {
+  onClick: () => void;
+}
+
+const KakaoLoginButton = ({ onClick }: IKakaoLoginButtonProps) => {
+  return (
+    <Button
+      maxWidth="375px"
+      width="100%"
+      height="54px"
+      backgroundColor="#FEE500"
+      boxShadow="0px 0px 4px rgba(0, 0, 0, 0.25)"
+      onClick={onClick}>
+      <Text fontColor="black" fontSize="16px" fontWeight="500">
+        카카오 로그인
+      </Text>
+    </Button>
+  );
+};
+
+export default KakaoLoginButton;

src/components/atomic/atoms/LeftRadiusButton/index.tsx

@@ -6,6 +6,8 @@ import Text from '@/components/atomic/atoms/Text';
 interface ILeftRadiusButtonProps {
   width: string;
   backgroundColor: string;
+  fontColor?: string;
+  boxShadow?: string;
   margin?: string;
   disabled?: boolean;
   onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
@@ -18,6 +20,8 @@ interface ILeftRadiusButtonComponentProps extends ILeftRadiusButtonProps {
 const LeftRadiusButton = ({
   width,
   backgroundColor,
+  fontColor = '#FFFFFF',
+  boxShadow = '0',
   margin,
   disabled = false,
   onClick,
@@ -30,10 +34,11 @@ const LeftRadiusButton = ({
       height="54px"
       backgroundColor={backgroundColor}
       borderRadius="20px 0px 0px 0px"
+      boxShadow={boxShadow}
       margin={margin}
       disabled={disabled}
       onClick={onClick}>
-      <Text fontColor="#FFFFFF" fontSize="18px" fontWeight="700">
+      <Text fontColor={fontColor} fontSize="18px" fontWeight="700">
         {children}
       </Text>
     </Button>

src/components/atomic/molecules/EmptyImageLabel/index.tsx

@@ -9,9 +9,10 @@ interface IEmptyImageLabel {
   width: number;
   height: number;
   margin?: string;
+  onChangeImg: (e: React.ChangeEvent<HTMLInputElement>) => void;
 }
 
-const EmptyImageLabel = ({ width, height, margin = '0' }: IEmptyImageLabel) => {
+const EmptyImageLabel = ({ width, height, margin = '0', onChangeImg }: IEmptyImageLabel) => {
   return (
     <>
       <Label
@@ -24,7 +25,7 @@ const EmptyImageLabel = ({ width, height, margin = '0' }: IEmptyImageLabel) => {
         htmlFor="file">
         <Icon icon="EmptyImage" width={30} height={30} />
       </Label>
-      <StyledInput id="file" type="file" accept="image/png, image/jpeg" />
+      <StyledInput id="file" type="file" onChange={onChangeImg} accept="image/png, image/jpeg" />
     </>
   );
 };

src/components/atomic/molecules/GroupInfoPeople/index.tsx

@@ -1,5 +1,7 @@
 import React, { useState, useCallback, useRef, useEffect } from 'react';
 
+import client from '@/lib/api/client';
+
 import Input from '@/components/atomic/atoms/Input';
 import Button from '@/components/atomic/atoms/Button';
 import Text from '@/components/atomic/atoms/Text';
@@ -12,9 +14,9 @@ import { Contents, InputWrapper } from './style';
 
 interface IGroupInfoPeople {
   email: string;
-  members: Array<string>;
+  members: Array<number>;
   onChangeEmail: (e: React.ChangeEvent<HTMLInputElement>) => void;
-  setMembers: React.Dispatch<React.SetStateAction<IGroupStateProps>>;
+  setMembers: React.Dispatch<React.SetStateAction<Array<number>>>;
 }
 
 const GroupInfoPeople = ({ email, members, onChangeEmail, setMembers }: IGroupInfoPeople) => {
@@ -25,6 +27,15 @@ const GroupInfoPeople = ({ email, members, onChangeEmail, setMembers }: IGroupIn
     setOpen((prev) => !prev);
   }, [open]);
 
+  const onClickAdd = async () => {
+    const res = await client.post('/member', { email });
+    if (res.status === 200) {
+      const memberId = res.data.id;
+      setMembers([...members, memberId]);
+      alert('추가 되었습니다!');
+    }
+  };
+
   useEffect(() => {
     if (open) {
       inputRef.current?.focus();
@@ -49,7 +60,7 @@ const GroupInfoPeople = ({ email, members, onChangeEmail, setMembers }: IGroupIn
           height="50px"
           borderBottom="1px solid black"
         />
-        <Button width="50px" height="30px" borderRadius="15px" backgroundColor="#6BE065">
+        <Button onClick={onClickAdd} width="50px" height="30px" borderRadius="15px" backgroundColor="#6BE065">
           <Text fontColor="#FFFFFF" fontSize="14px" fontWeight="500">
             추가
           </Text>

src/components/atomic/molecules/GroupResultInfo/index.tsx

@@ -24,9 +24,8 @@ const GroupResultInfo = ({ party }: IGroupResultInfoProps) => {
       <Image objectFit="cover" src={party.imageUrl} maxWidth="500px" width="100%" height="200px" />
       <ContentsWrapper>
         <TravelHistorySummary
-          name={party.title}
-          startDate={party.period[0]}
-          endDate={party.period[1]}
+          title={party.title}
+          period={party.period}
           location={party.location}
           participantsCount={party.participantsCount}
           type="white"

src/components/atomic/molecules/TravelHistoryImage/index.tsx

@@ -7,11 +7,11 @@ import { ITravelHistoryImage } from '@/types/travelHistory';
 
 import { Wrapper, PositionWrapper } from './style';
 
-const TravelHistoryImage = ({ src, alt }: ITravelHistoryImage) => {
+const TravelHistoryImage = ({ imageUrl, alt, isAgreed }: ITravelHistoryImage) => {
   return (
     <Wrapper>
       <Image
-        src={src || '/image/Christmas.png'}
+        src={imageUrl || '/image/Christmas.png'}
         alt={alt || '크리스마스 사진'}
         width="100%"
         maxWidth="150px"

src/components/atomic/molecules/TravelHistorySummary/index.tsx

@@ -15,14 +15,17 @@ const typeCheck = (type: string) => {
 };
 
 const TravelHistorySummary = ({
-  name,
-  startDate,
-  endDate,
+  title,
+  period,
   location,
   participantsCount,
   type = 'black',
 }: ITravelHistorySummary) => {
   const isBlackType = typeCheck(type);
+  const sDate = new Date(period[0]);
+  const eDate = new Date(period[1]);
+  let startDate = sDate.getFullYear() + '-' + (sDate.getMonth() + 1) + '-' + sDate.getDay();
+  let endDate = eDate.getFullYear() + '-' + (eDate.getMonth() + 1) + '-' + eDate.getDay();
 
   return (
     <Wrapper>
@@ -31,15 +34,15 @@ const TravelHistorySummary = ({
           fontColor={isBlackType ? Theme.F_4 : Theme.F_1}
           fontSize={isBlackType ? '15px' : '20px'}
           fontWeight={isBlackType ? '500' : '700'}>
-          {name}
+          {title}
         </Text>
       ) : (
         <FlexWrapper isBlackType={isBlackType}>
           <Text
             fontColor={isBlackType ? Theme.F_4 : Theme.F_1}
             fontSize={isBlackType ? '15px' : '20px'}
             fontWeight={isBlackType ? '500' : '700'}>
-            {name}
+            {title}
           </Text>
         </FlexWrapper>
       )}

src/components/atomic/molecules/TreatySelectionBox/index.tsx

@@ -11,8 +11,8 @@ export interface ITreatySelectionBoxProps {
   title: string;
   isAgreed: boolean;
   color: string;
-  count0: number;
-  count1: number;
+  count0: string;
+  count1: string;
   selected: number;
 }
 
@@ -25,7 +25,7 @@ const TreatySelectionBox = ({ title, isAgreed, color, count0, count1, selected }
         </Text>
         {isAgreed === false && <TreatyWarningText />}
       </TitleWrapper>
-      <TreatyVersusSelection color={color} isAgreed={isAgreed} selected={selected} />
+      <TreatyVersusSelection color={color} isAgreed={isAgreed} selected={selected} count0={count0} count1={count1} />
     </Wrapper>
   );
 };