[FEAT & DESIGN] 마이페이지

src/app/guide/page.tsx

@@ -134,6 +134,7 @@ const GuidePage = () => {
         checked={isCheckedBox}
         onChange={handleBoxChange}
       />
+
       <br />
       <h3>Input</h3>
       <Input

src/app/mypage/delete/page.tsx

@@ -0,0 +1,164 @@
+"use client";
+
+import Button from "@/components/common/Button";
+import Check from "@/components/common/Check";
+import Dropdown from "@/components/common/Dropdown";
+import Input from "@/components/common/Input";
+import Loader, { LoaderContainer } from "@/components/common/Loader";
+import NavigatorBar from "@/components/common/NavigatorBar";
+import { Suspense, useState } from "react";
+import styled from "styled-components";
+
+const DeleteAccount = () => {
+  const [selectedOption, setSelectedOption] = useState(""); //드롭다운
+  const options = [
+    "개인정보를 삭제하고 싶어요",
+    "서비스 이용이 불편해요",
+    "탈퇴 후 다시 가입할 예정이에요",
+    "서비스를 이용하지 않아요",
+    "그 외 기타",
+  ];
+  const [textarea, setTextarea] = useState(""); //질문2
+  const [isCheckedBox, setIsCheckedBox] = useState(false); // 체크박스
+
+  const handleBoxChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    setIsCheckedBox(e.target.checked);
+  };
+
+  return (
+    <Container>
+      <Wrapper>
+        <NavigatorBar title="회원 탈퇴" cancel={false} />
+      </Wrapper>
+      <MainWrapper>
+        <MainTitle>정말 레터링을 탈퇴하시겠어요?</MainTitle>
+        <SubTitle>
+          회원 탈퇴 후에는 레터링에 저장된 행성과 편지들이
+          <br />
+          모두 삭제되며, 삭제된 내용은 복구할 수 없어요{" "}
+        </SubTitle>
+        <QuestionWrapper>
+          <QuestionText>레터링을 탈퇴하는 이유를 말씀해주세요</QuestionText>
+          <Dropdown
+            options={options}
+            value={selectedOption}
+            onChange={setSelectedOption}
+            placeholder="선택해주세요"
+          ></Dropdown>
+        </QuestionWrapper>
+        <QuestionWrapper>
+          <QuestionText>
+            더 나은 서비스를 위해 의견을 남겨주세요
+            <span>{textarea.length + " / 500"}</span>
+          </QuestionText>
+          <Input
+            inputType="boxTextArea"
+            value={textarea}
+            onChange={setTextarea}
+            //placeholder="BoxTexarea Input (height=150px)"
+            height="150px"
+          />
+        </QuestionWrapper>
+        <Check
+          checkType="box"
+          labelFont="button03"
+          label="모든 데이터를 삭제하고 탈퇴하는 것에 동의합니다"
+          checked={isCheckedBox}
+          onChange={handleBoxChange}
+        />
+      </MainWrapper>
+      <Wrapper>
+        <Button buttonType="primary" size="large" text="탈퇴하기" />
+      </Wrapper>
+    </Container>
+  );
+};
+
+export default function SendedLetterPaging() {
+  return (
+    <Suspense
+      fallback={
+        <LoaderContainer>
+          <Loader />
+        </LoaderContainer>
+      }
+    >
+      <DeleteAccount />
+    </Suspense>
+  );
+}
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 100%;
+    max-height: 100%;
+    justify-content: space-between;
+    color: white;
+    background:${(props) => props.theme.colors.bg};
+`;
+
+const MainWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    padding: 5px 24px;
+    height: 100%;
+    overflow-y: auto;
+    box-sizing: border-box;
+    &::-webkit-scrollbar {
+        width: 5px; /* Width of the scrollbar */
+    }
+
+    &::-webkit-scrollbar-track {
+        background: ${(props: any) => props.theme.colors.gray800};
+        border-radius: 10px; /* Rounded corners */
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: ${(props: any) => props.theme.colors.gray600};
+        border-radius: 10px; /* Rounded corners */
+    }
+`;
+
+const Wrapper = styled.div`
+    display: flex;
+    width: 100%;
+    padding: 24px;
+`;
+
+const MainTitle = styled.div`
+    ${(props: any) => props.theme.fonts.title01};
+    color: ${(props: any) => props.theme.colors.white};
+    padding: 9px 0;
+`;
+
+const SubTitle = styled.div`
+    ${(props: any) => props.theme.fonts.body08};
+    color: ${(props: any) => props.theme.colors.white};
+    margin-bottom: 35px;
+`;
+
+const QuestionText = styled.div`
+    ${(props: any) => props.theme.fonts.subtitle};
+    color: ${(props: any) => props.theme.colors.white}; 
+    display : flex;
+    justify-content: space-between;
+
+    //글자수
+    span {
+        display: flex;
+        text-align: center;
+        align-items: center;
+        ${(props: any) => props.theme.fonts.caption03};
+        color: ${(props: any) => props.theme.colors.white}; 
+    }
+`;
+
+const QuestionWrapper = styled.div`
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    gap: 12px;
+    padding: 20px 0;
+`;

src/app/mypage/lettertype/page.tsx

@@ -0,0 +1,155 @@
+"use client";
+
+import Button from "@/components/common/Button";
+import Check from "@/components/common/Check";
+import Loader, { LoaderContainer } from "@/components/common/Loader";
+import NavigatorBar from "@/components/common/NavigatorBar";
+import { useRouter } from "next/navigation";
+import { Suspense, useState } from "react";
+import styled from "styled-components";
+
+const LetterType = () => {
+  const [isCheckedBox, setIsCheckedBox] = useState(false); // false라면 이름만, true라면 이름과 날짜
+  const router = useRouter();
+
+  const handleBoxChange = (newCheckedState: boolean) => {
+    if (!isCheckedBox || !newCheckedState) {
+      setIsCheckedBox(newCheckedState);
+    }
+  };
+
+  const handleSumbit = () => {
+    if (isCheckedBox) {
+      console.log("이름과날짜");
+    } else {
+      console.log("이름만");
+    }
+    router.push("/mypage");
+  };
+
+  return (
+    <Container>
+      <Wrapper>
+        <NavigatorBar title="편지 날짜 보기" cancel={false} />
+      </Wrapper>
+      <MainWrapper>
+        <MainText>해당 날짜는 스페이스에 등록된 날짜예요</MainText>
+        <SelectWrapper>
+          <Select>
+            <SelectTitle>이름만 (기본)</SelectTitle>
+            <SampleImg src="/assets/mypage/img_date_sample.png" />
+            <Check
+              checkType="large"
+              checked={!isCheckedBox}
+              onChange={() => handleBoxChange(false)}
+            />
+          </Select>
+          <Select>
+            <SelectTitle>이름과 날짜</SelectTitle>
+            <SampleImg src="/assets/mypage/img_date_sample.png" />
+            <Check
+              checkType="large"
+              checked={isCheckedBox}
+              onChange={() => handleBoxChange(true)}
+            />
+          </Select>
+        </SelectWrapper>
+      </MainWrapper>
+      <Wrapper>
+        <Button
+          buttonType="primary"
+          size="large"
+          text="저장하기"
+          onClick={handleSumbit}
+        />
+      </Wrapper>
+    </Container>
+  );
+};
+
+export default function LetterTypePaging() {
+  return (
+    <Suspense
+      fallback={
+        <LoaderContainer>
+          <Loader />
+        </LoaderContainer>
+      }
+    >
+      <LetterType />
+    </Suspense>
+  );
+}
+
+const Container = styled.div`
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    min-height: 100%;
+    max-height: 100%;
+    justify-content: space-between;
+    color: white;
+    background:${(props) => props.theme.colors.bg};
+`;
+
+const MainWrapper = styled.div`
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 24px;
+    overflow-y: auto;
+    box-sizing: border-box;
+    &::-webkit-scrollbar {
+        width: 5px; /* Width of the scrollbar */
+    }
+
+    &::-webkit-scrollbar-track {
+        background: ${(props: any) => props.theme.colors.gray800};
+        border-radius: 10px; /* Rounded corners */
+    }
+
+    &::-webkit-scrollbar-thumb {
+        background: ${(props: any) => props.theme.colors.gray600};
+        border-radius: 10px; /* Rounded corners */
+    }
+`;
+
+const MainText = styled.div`
+    ${(props: any) => props.theme.fonts.body07};
+    color: ${(props: any) => props.theme.colors.gray300};
+`;
+
+const SelectWrapper = styled.div`
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    gap: 20px;
+    margin: 42px 0;
+`;
+
+const Select = styled.div`
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    flex-direction: column;
+    width: 50%;
+    gap: 20px;
+`;
+
+const SelectTitle = styled.div`
+    width: 100%;
+    text-align: center;
+    ${(props: any) => props.theme.fonts.body08};
+    color: ${(props: any) => props.theme.colors.white};
+`;
+
+const SampleImg = styled.img`
+    width: 100%;
+    height: auto;
+`;
+
+const Wrapper = styled.div`
+    display: flex;
+    width: 100%;
+    padding: 24px;
+`;