설정 브랜드 페이지 구성

pageStyle/brand-suggestion/style.tsx

@@ -0,0 +1,42 @@
+import styled from 'styled-components';
+
+const Layout = styled.div`
+  .arrowleft,
+  .setting {
+    width: 24px;
+    height: 24px;
+  }
+`;
+
+const Content = styled.div`
+  margin-top: 32px;
+  padding: 0px 20px;
+
+  .warning {
+    margin: 8px 0px 24px 0px;
+  }
+`;
+
+interface ButtonProps {
+  state: Boolean;
+}
+
+const Button = styled.div<ButtonProps>`
+  margin: 0px 20px;
+  width: calc(100% - 40px);
+  position: fixed;
+  bottom: 24px;
+  background-color: ${(props) =>
+    props.state ? props.theme.color.grey_00 : props.theme.color.grey_90};
+  padding: 14px 0px;
+  color: #fff;
+  text-align: center;
+`;
+
+const S = {
+  Layout,
+  Content,
+  Button,
+};
+
+export default S;

pages/brand-suggestion/index.tsx

@@ -0,0 +1,98 @@
+import AppBar from '@/components/Appbar';
+import S from '@/pageStyle/brand-suggestion/style';
+import { AiOutlineArrowLeft } from 'react-icons/ai';
+import { useRouter } from 'next/router';
+import {
+  Body2,
+  Body3,
+  Body4,
+  Button3,
+  Headline1,
+  Headline2,
+} from '@/components/UI';
+import { ComponentWithLayout } from '../sign-up';
+import { AppLayoutProps } from '@/AppLayout';
+import Input from '@/components/Input';
+import { useEffect, useState } from 'react';
+import ClothApi from '@/apis/domain/Cloth/ClothApi';
+
+/*
+이름: 브랜드 건의하기 페이지
+역할: 브랜드 건의하기 페이지
+*/
+
+const BrandSuggestion: ComponentWithLayout = () => {
+  const router = useRouter();
+
+  const [noBrandName, setNoBrandName] = useState<string>('');
+  const [possible, setPossible] = useState<Boolean>(false);
+
+  const { postBrand } = ClothApi();
+
+  const onClickSubmitButton = async () => {
+    if (noBrandName !== '' && possible) {
+      const result = await postBrand({ requestContents: noBrandName });
+      if (result) {
+        router.push({
+          pathname: `/settings`,
+          query: { state: 'brandSuggestionSuccess' },
+        });
+      } else {
+        alert('실패');
+      }
+    }
+  };
+
+  useEffect(() => {
+    if (noBrandName) {
+      setPossible(true);
+    } else {
+      setPossible(false);
+    }
+  }, [noBrandName]);
+
+  return (
+    <>
+      <S.Layout>
+        <AppBar
+          leftProps={
+            <AiOutlineArrowLeft
+              onClick={() => router.back()}
+              className="arrowleft"
+            />
+          }
+          middleProps={<></>}
+          rightProps={<></>}
+        />
+        <S.Content>
+          <Headline2>찾고 있는 브랜드를</Headline2>
+          <Headline2>알려주세요.</Headline2>
+          <div className="warning">
+            <Body3>저희에게 알려주시면 최대한 빨리 업데이트하겠습니다.</Body3>
+            <Body3>업데이트가 완료되면 알림을 통해 바로 알려드릴게요!</Body3>
+          </div>
+          <Input>
+            <Input.Text
+              placeholder="브랜드명 (나이키, cos 등)"
+              size="big"
+              line="outline"
+              state={true}
+              onChange={setNoBrandName}
+            />
+          </Input>
+        </S.Content>
+        <S.Button state={possible} onClick={onClickSubmitButton}>
+          <Button3>제출하기</Button3>
+        </S.Button>
+      </S.Layout>
+    </>
+  );
+};
+
+export default BrandSuggestion;
+
+BrandSuggestion.Layout = ({ children }: AppLayoutProps) => {
+  return <>{children}</>;
+};
+
+BrandSuggestion.Layout.displayName = 'BrandSuggestion';

pages/settings/index.tsx

@@ -22,6 +22,7 @@ export default function Setting() {
   const router = useRouter();
 
   const [queryState, setQueryState] = useState<Boolean>(false); // 취향정보 수정 상태
+  const [brandState, setBrandState] = useState<Boolean>(false); // 브랜드 건의 상태
   const [URLState, setURLState] = useState<any>(false); // 이메일 공유 상태
   const [platform, setPlatform] = useState(''); // 내 플랫폼 상태
 
@@ -46,9 +47,12 @@ export default function Setting() {
   };
 
   useEffect(() => {
-    if (router.query.state !== undefined) {
+    if (router.query.state == 'likeInfoEditSuccess') {
       setQueryState(true);
     }
+    if (router.query.state == 'brandSuggestionSuccess') {
+      setBrandState(true);
+    }
   }, []);
 
   useEffect(() => {
@@ -110,6 +114,10 @@ export default function Setting() {
               text="커뮤니티 가이드라인"
               buttonClick={() => router.push('/CommunityGuideline')}
             /> */}
+            <SettingBlock
+              text="브랜드 건의하기"
+              buttonClick={() => router.push('/brand-suggestion')}
+            />
             <SettingBlock
               text="이용약관"
               buttonClick={() => router.push('/agree-policy')}
@@ -154,6 +162,14 @@ export default function Setting() {
               state={queryState}
             />
           )}
+          {brandState && (
+            <Toast
+              className="brandSuggestion"
+              text={`브랜드 건의가 정상적으로 접수되었습니다.`}
+              setState={setBrandState}
+              state={brandState}
+            />
+          )}
         </S.SettingDiv>
       </S.Layout>
     </>