Merge branch 'dev' into feature/#48

src/components/common/Image.tsx

@@ -0,0 +1,25 @@
+import { css } from '@emotion/react';
+import styled from '@emotion/styled';
+import { ImgHTMLAttributes } from 'react';
+
+interface ImageProps extends ImgHTMLAttributes<HTMLImageElement> {
+  align?: 'left' | 'center' | 'right';
+  css?: ReturnType<typeof css>;
+}
+
+export const Image = ({ align = 'center', css, ...props }: ImageProps) => {
+  return <StyledImg align={align} css={css} {...props} />;
+};
+
+const StyledImg = styled.img<{
+  align?: 'left' | 'center' | 'right';
+  css?: ReturnType<typeof css>;
+}>`
+  display: block;
+  margin-left: ${({ align }) =>
+    align === 'left' ? '0' : align === 'center' ? 'auto' : 'auto'};
+  margin-right: ${({ align }) =>
+    align === 'left' ? 'auto' : align === 'center' ? 'auto' : '0'};
+
+  ${({ css }) => css};
+`;

src/components/common/Wrapper.tsx

@@ -1,10 +1,16 @@
 import { css } from '@emotion/react';
-import type { color as colorType } from 'wowds-tokens';
-import type { typography as typographyType } from 'wowds-tokens';
-import type { space as spaceType } from 'wowds-tokens';
-import { color as wowColor } from 'wowds-tokens';
-import { typography as wowTypo } from 'wowds-tokens';
-import { space as wowSpace } from 'wowds-tokens';
+import type {
+  color as colorType,
+  typography as typographyType,
+  space as spaceType
+} from 'wowds-tokens';
+
+import {
+  color as wowColor,
+  typography as wowTypo,
+  space as wowSpace
+} from 'wowds-tokens';
+
 import styled from '@emotion/styled';
 
 type colorKey = keyof typeof colorType;
@@ -33,12 +39,22 @@ export const Flex = styled.div<{
 `;
 
 export const Space = styled.div<{
-  height?: number;
-  width?: number;
+  height?: number | spaceKey;
+  width?: number | spaceKey;
   css?: ReturnType<typeof css>;
 }>`
-  height: ${({ height }) => (height ? `${height}px` : '')};
-  width: ${({ width }) => (width ? `${width}px` : '')};
+  height: ${({ height }) =>
+    height && typeof height === 'number'
+      ? `${height}px`
+      : height && height in wowSpace
+        ? wowSpace[height]
+        : ''};
+  width: ${({ width }) =>
+    width && typeof width === 'number'
+      ? `${width}px`
+      : width && width in wowSpace
+        ? wowSpace[width]
+        : ''};
   ${({ css }) => css}
 `;
 
@@ -47,9 +63,9 @@ export const Text = styled.p<{
   color?: colorKey;
   css?: ReturnType<typeof css>;
 }>`
+  font-family: 'SUIT', 'Apple SD Gothic Neo';
   ${({ typo = 'body1' }) => wowTypo[typo]};
   color: ${({ color = 'textBlack' }) => wowColor[color]};
-
   text-align: start;
 
   white-space: pre-wrap;

src/components/discordConnect/CompleteDiscordConnect.tsx

@@ -0,0 +1,45 @@
+import { Flex, Space, Text } from '@/components/common/Wrapper';
+import Button from 'wowds-ui/Button';
+
+export const CompleteDiscordConnect = () => {
+  //   const { register, watch, formState, getValues } = useForm({
+  //     defaultValues: {
+  //       discordHandle: '',
+  //       discordNickname: '',
+  //       code: ''
+  //     },
+  //     mode: 'onChange'
+  //   });
+
+  //   const postDiscordLinkMutation = useMutation({
+  //     mutationFn: discordApi.POST_DISCORD,
+  //     onSuccess: () => {
+  //       toast('디스코드 연동이 완료되었습니다.');
+  //       navigate(RoutePath.MyPage);
+  //     }
+  //   });
+
+  //   const handleLinkButtonClick = () => {
+  //     const data = {
+  //       discordUsername: getValues('discordHandle'),
+  //       nickname: getValues('discordNickname'),
+  //       code: Number(getValues('code'))
+  //     } as DiscordLinkRequest;
+
+  //     postDiscordLinkMutation.mutate({ ...data });
+  //   };
+
+  return (
+    <>
+      <Flex direction="column" align="flex-start">
+        <Text typo="h1">디스코드 연동이 완료되었어요!</Text>
+        <Space height="lg" />
+        <Text typo="body1">
+          회비 납부, Bevy 가입 등 모든 절차가 완료되면 자동으로 승인될
+          예정이에요!
+        </Text>
+      </Flex>
+      <Button>완료하기</Button>
+    </>
+  );
+};

src/components/discordConnect/DiscordName.tsx

@@ -0,0 +1,89 @@
+import { Flex, Space, Text } from '@/components/common/Wrapper';
+import Button from 'wowds-ui/Button';
+import DiscordImage from '/discord/discord-name.png';
+import TextField from 'wowds-ui/TextField';
+import TextButton from 'wowds-ui/TextButton';
+import RoutePath from '@/routes/routePath';
+
+export const DiscordName = ({ onNext }: { onNext: () => void }) => {
+  //   const { register, watch, formState, getValues } = useForm({
+  //     defaultValues: {
+  //       discordHandle: '',
+  //       discordNickname: '',
+  //       code: ''
+  //     },
+  //     mode: 'onChange'
+  //   });
+
+  //   const postDiscordLinkMutation = useMutation({
+  //     mutationFn: discordApi.POST_DISCORD,
+  //     onSuccess: () => {
+  //       toast('디스코드 연동이 완료되었습니다.');
+  //       navigate(RoutePath.MyPage);
+  //     }
+  //   });
+
+  //   const handleLinkButtonClick = () => {
+  //     const data = {
+  //       discordUsername: getValues('discordHandle'),
+  //       nickname: getValues('discordNickname'),
+  //       code: Number(getValues('code'))
+  //     } as DiscordLinkRequest;
+
+  //     postDiscordLinkMutation.mutate({ ...data });
+  //   };
+
+  return (
+    <>
+      <Flex direction="column" align="flex-start" gap="lg">
+        <div>
+          <Text typo="h1">사용자명을 알려주세요.</Text>
+          <Space height="sm" />
+          <Text typo="body1">
+            GDSC Hongik 디스코드 서버에서는 사용자명을 통해 멤버를 구분해요.
+          </Text>
+        </div>
+        <img src={DiscordImage} alt="discord-name" width={325} height={157} />
+        <Text typo="body1">
+          본인의 디스코드 사용자명을 아래 규정과 맞게 설정한 후 입력해주세요.
+        </Text>
+      </Flex>
+      <Space height="lg" />
+      <TextField
+        helperText={
+          <ul style={{ listStyle: 'disc', paddingLeft: '20px' }}>
+            <li>최소 2자, 최대 32자까지만 작성 가능</li>
+            <li>대문자가 아닌 소문자로만 작성 가능</li>
+            <li>밑줄(_)과 마침표(.)가 아닌 특수 문자 사용 불가능</li>
+            <li>
+              연속적인 밑줄(a__b)과 마침표(a..b)로 이루어진 경우 사용 불가능
+            </li>
+            <li>discord, nitro, nelly와 같은 디스코드 공식 이름 사용 불가능</li>
+          </ul>
+        }
+        label="디스코드 사용자명"
+        placeholder="내용을 입력해주세요"
+        style={{
+          backgroundColor: 'white',
+          borderStyle: 'solid'
+        }}
+      />
+      <Space height={75} />
+      <Flex direction="column">
+        <Button
+          onClick={() => {
+            onNext();
+          }}>
+          다음으로
+        </Button>
+        <Space height="xs" />
+        <TextButton
+          text="디스코드 계정이 없으신가요?"
+          as="a"
+          target="_blank"
+          href={RoutePath.DiscordRegisterLink}
+        />
+      </Flex>
+    </>
+  );
+};

src/components/discordConnect/DiscordNickName.tsx

@@ -0,0 +1,82 @@
+import { Flex, Space, Text } from '@/components/common/Wrapper';
+import Button from 'wowds-ui/Button';
+import DiscordImage from '/discord/discord-nickname.png';
+import TextField from 'wowds-ui/TextField';
+
+export const DiscordNickName = ({ onNext }: { onNext: () => void }) => {
+  //   const { register, watch, formState, getValues } = useForm({
+  //     defaultValues: {
+  //       discordHandle: '',
+  //       discordNickname: '',
+  //       code: ''
+  //     },
+  //     mode: 'onChange'
+  //   });
+
+  //   const postDiscordLinkMutation = useMutation({
+  //     mutationFn: discordApi.POST_DISCORD,
+  //     onSuccess: () => {
+  //       toast('디스코드 연동이 완료되었습니다.');
+  //       navigate(RoutePath.MyPage);
+  //     }
+  //   });
+
+  //   const handleLinkButtonClick = () => {
+  //     const data = {
+  //       discordUsername: getValues('discordHandle'),
+  //       nickname: getValues('discordNickname'),
+  //       code: Number(getValues('code'))
+  //     } as DiscordLinkRequest;
+
+  //     postDiscordLinkMutation.mutate({ ...data });
+  //   };
+
+  return (
+    <>
+      <Flex direction="column" align="flex-start" gap="lg">
+        <div>
+          <Text typo="h1">별명을 설정하세요.</Text>
+          <Space height="sm" />
+          <Text typo="body1">
+            GDSC Hongik 디스코드 서버에서 사용할 별명을 설정해주세요.
+          </Text>
+        </div>
+        <img
+          src={DiscordImage}
+          alt="discord-nickname"
+          width={325}
+          height={157}
+        />
+        <Text typo="body1">
+          가입이 완료되면 가입 신청서에 제출하신 별명으로 자동으로 수정될
+          거예요. 추후 별명을 수정하고 싶다면 채널톡으로 코어멤버에게 연락
+          주세요.
+        </Text>
+      </Flex>
+      <Space height="lg" />
+      <TextField
+        helperText={
+          <ul style={{ listStyle: 'disc', paddingLeft: '20px' }}>
+            <li>최소 2자, 최대 6자의 한글만 작성 가능</li>
+            <li>GDSC Hongik 가이드라인에 어긋나지 않게 작성</li>
+          </ul>
+        }
+        label="디스코드 별명"
+        placeholder="내용을 입력해주세요"
+        style={{
+          backgroundColor: 'white',
+          borderStyle: 'solid'
+        }}
+      />
+      <Space height={146} />
+      <Flex direction="column">
+        <Button
+          onClick={() => {
+            onNext();
+          }}>
+          다음으로
+        </Button>
+      </Flex>
+    </>
+  );
+};

src/components/discordConnect/JoinServer.tsx

@@ -0,0 +1,74 @@
+import { Flex, Space, Text } from '@/components/common/Wrapper';
+import Button from 'wowds-ui/Button';
+import TextButton from 'wowds-ui/TextButton';
+import { color } from 'wowds-tokens';
+import { css } from '@emotion/react';
+
+export const JoinServer = ({ onNext }: { onNext: () => void }) => {
+  //   const { register, watch, formState, getValues } = useForm({
+  //     defaultValues: {
+  //       discordHandle: '',
+  //       discordNickname: '',
+  //       code: ''
+  //     },
+  //     mode: 'onChange'
+  //   });
+
+  //   const postDiscordLinkMutation = useMutation({
+  //     mutationFn: discordApi.POST_DISCORD,
+  //     onSuccess: () => {
+  //       toast('디스코드 연동이 완료되었습니다.');
+  //       navigate(RoutePath.MyPage);
+  //     }
+  //   });
+
+  //   const handleLinkButtonClick = () => {
+  //     const data = {
+  //       discordUsername: getValues('discordHandle'),
+  //       nickname: getValues('discordNickname'),
+  //       code: Number(getValues('code'))
+  //     } as DiscordLinkRequest;
+
+  //     postDiscordLinkMutation.mutate({ ...data });
+  //   };
+
+  return (
+    <>
+      <Flex direction="column" align="flex-start">
+        <Text typo="h1">서버에 합류하세요.</Text>
+        <Space height="lg" />
+        <Text typo="body1">
+          아래 버튼을 통해 GDSC Hongik 디스코드 서버로 이동해서 가입하세요.
+          서버에 가입 후 #명령어 채널에서 본인의 디스코드 계정을 연동할 수
+          있어요.
+          <br />
+          <br />
+          서버 합류 후, 다시 돌아와서 연동 절차를 마무리해주세요.
+        </Text>
+      </Flex>
+      <Flex direction="column" gap="xs">
+        <TextButton
+          text=" GDSC Hongik 공식 디스코드 서버↗︎"
+          style={{ color: color.discord }}
+        />
+
+        <Button
+          onClick={() => {
+            onNext();
+          }}>
+          합류가 확인되면 넘어갈 수 있어요.
+        </Button>
+
+        <Text
+          typo="body2"
+          color="sub"
+          css={css`
+            text-align: center;
+          `}>
+          합류가 확인되지 않을 경우 <br />
+          채널톡을 통해 코어멤버에게 문의해주세요!
+        </Text>
+      </Flex>
+    </>
+  );
+};