[Fix] discord 관련 QA 반영

src/components/discordConnect/DiscordName.tsx

@@ -5,15 +5,15 @@ import TextField from 'wowds-ui/TextField';
 import TextButton from 'wowds-ui/TextButton';
 import RoutePath from '@/routes/routePath';
 import { useFormContext, useController, Control } from 'react-hook-form';
-import { useState, useCallback, memo, useEffect } from 'react';
+import { useCallback, memo, useEffect } from 'react';
 import { Image } from '../common/Image';
 import { DiscordFormValues } from '@/types/discord';
 import { usePostDiscordName } from '@/hooks/mutation/usePostDiscordName';
+import Divider from 'wowds-ui/Divider';
 
 export const DiscordName = ({ onNext }: { onNext: () => void }) => {
   const { getValues, control, trigger, setError } =
     useFormContext<DiscordFormValues>();
-  const [count, setCount] = useState(1);
 
   const { checkDuplicate, data, isSuccess } = usePostDiscordName(
     getValues('discordUsername')
@@ -43,7 +43,6 @@ export const DiscordName = ({ onNext }: { onNext: () => void }) => {
         message: '하단 규정에 맞춰 작성해주세요.'
       });
     }
-    setCount((prev) => prev + 1);
   }, [checkDuplicate, setError, trigger]);
 
   return (
@@ -53,7 +52,7 @@ export const DiscordName = ({ onNext }: { onNext: () => void }) => {
       </Flex>
       <Space height="lg" />
       <div style={{ width: '100%' }}>
-        <NameField control={control} key={count} />
+        <NameField control={control} />
       </div>
       <Space height={75} />
       <Flex direction="column">
@@ -92,6 +91,7 @@ const TextSection = memo(() => {
       <Text typo="body1">
         본인의 디스코드 사용자명을 아래 규정과 맞게 설정한 후 입력해주세요.
       </Text>
+      <Divider />
     </>
   );
 });
@@ -137,9 +137,6 @@ const NameField = ({ control }: { control: Control<DiscordFormValues> }) => {
       }
       label="디스코드 사용자명"
       placeholder="내용을 입력해주세요"
-      style={{
-        borderStyle: 'solid'
-      }}
       error={!!fieldState.error}
     />
   );

src/components/discordConnect/DiscordNickName.tsx

@@ -2,16 +2,16 @@ 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';
-import { useState, useCallback, memo, useEffect } from 'react';
+import { useCallback, memo, useEffect } from 'react';
 import { Control, useController, useFormContext } from 'react-hook-form';
 import { DiscordFormValues } from '@/types/discord';
 import { Image } from '../common/Image';
 import { usePostDiscordNickname } from '@/hooks/mutation/usePostDiscordNickname';
+import Divider from 'wowds-ui/Divider';
 
 export const DiscordNickName = ({ onNext }: { onNext: () => void }) => {
   const { getValues, control, setError, clearErrors, trigger } =
     useFormContext<DiscordFormValues>();
-  const [count, setCount] = useState(1);
   const { checkDuplicate, data, isSuccess } = usePostDiscordNickname(
     getValues('discordNickname')
   );
@@ -40,7 +40,6 @@ export const DiscordNickName = ({ onNext }: { onNext: () => void }) => {
         message: '하단 규정에 맞춰 작성해주세요.'
       });
     }
-    setCount((prev) => prev + 1);
   }, [checkDuplicate, setError, trigger]);
 
   return (
@@ -50,7 +49,7 @@ export const DiscordNickName = ({ onNext }: { onNext: () => void }) => {
       </Flex>
       <Space height="lg" />
       <div style={{ width: '100%' }}>
-        <NameField control={control} key={count} />
+        <NameField control={control} />
       </div>
       <Space height={146} />
       <Flex direction="column">
@@ -76,6 +75,7 @@ const TextSection = memo(() => (
       가입이 완료되면 가입 신청서에 제출하신 별명으로 자동으로 수정될 거예요.
       추후 별명을 수정하고 싶다면 카카오톡 채널로 코어멤버에게 연락 주세요.
     </Text>
+    <Divider />
   </>
 ));
 
@@ -111,9 +111,6 @@ const NameField = ({ control }: { control: Control<DiscordFormValues> }) => {
       }
       label="디스코드 별명"
       placeholder="내용을 입력해주세요"
-      style={{
-        borderStyle: 'solid'
-      }}
       error={!!fieldState.error}
     />
   );

src/components/discordConnect/ServerConnect.tsx

@@ -9,11 +9,12 @@ import { DiscordLinkRequest } from '@/apis/discord/discordType';
 import { DiscordFormValues } from '@/types/discord';
 import { useEffect, useState } from 'react';
 import { usePostDiscordLink } from '@/hooks/mutation/usePostDiscordLink';
+import Divider from 'wowds-ui/Divider';
+import RoutePath from '@/routes/routePath';
 
 export const ServerConnect = ({ onNext }: { onNext: () => void }) => {
   const { getValues, control } = useFormContext<DiscordFormValues>();
   const [error, setError] = useState(false);
-  const [count, setCount] = useState(1);
   const { postDiscordLink, isSuccess, isError } = usePostDiscordLink();
 
   useEffect(() => {
@@ -32,7 +33,6 @@ export const ServerConnect = ({ onNext }: { onNext: () => void }) => {
     } as DiscordLinkRequest;
 
     postDiscordLink({ ...data });
-    setCount((prev) => prev + 1);
   };
 
   const { field } = useController({
@@ -65,28 +65,32 @@ export const ServerConnect = ({ onNext }: { onNext: () => void }) => {
             height={157}
           />
           <Space height="lg" />
+          <Divider />
           <Space height="lg" />
           <TextButton
             text="번호 발급받기↗︎"
             style={{ color: color.discord }}
+            as="a"
+            href={RoutePath.DiscordCodeLink}
+            target="_blank"
           />
         </Flex>
         <TextField
           {...field}
           label="인증번호"
           placeholder="내용을 입력해주세요"
           style={{
-            borderStyle: 'solid'
+            width: '100%'
           }}
           error={error}
-          key={count}
           {...(error && {
             helperText: (
               <li>번호가 올바르지 않아요. 다시 발급받아 진행해주세요.</li>
             )
           })}
         />
       </Flex>
+      <Space height={200} />
       <Flex direction="column">
         <Button
           onClick={() => {

src/routes/routePath.ts

@@ -34,6 +34,7 @@ const RoutePath = {
 
   InstagramLink: 'https://www.instagram.com/gdsc.hongik/',
   DiscordRegisterLink: 'https://discord.com/register',
+  DiscordCodeLink: 'https://discord.gg/BrEjs3NW',
 
   PaymentsCheckout: '/payments/checkout',
   PaymentsSuccess: '/payments/success',