Merge pull request #34 from Kusitms-28th-Kobaco-B/feat/#28

[feat] 마이페이지 완성

src/app/user/page.tsx

@@ -0,0 +1,14 @@
+"use client";
+
+import NOSSR from "@/components/common/NOSSR";
+import Mypage from "@/components/mypage/Mypage";
+
+const User = async () => {
+  return (
+    <NOSSR>
+      <Mypage />
+    </NOSSR>
+  );
+};
+
+export default User;

src/components/mypage/MyIndex.tsx

@@ -0,0 +1,38 @@
+"use client";
+
+import { useState } from "react";
+import { styled } from "styled-components";
+
+const MyIndex = () => {
+  const [selected, setSelected] = useState(1);
+
+  return (
+    <Layout>
+      <Index selected={selected === 1} onClick={() => setSelected(1)}>
+        마이 카피
+      </Index>
+      <Index selected={selected === 2} onClick={() => setSelected(2)}>
+        마이 스토리보드
+      </Index>
+    </Layout>
+  );
+};
+
+export default MyIndex;
+
+const Layout = styled.div`
+  display: flex;
+  text-align: center;
+  cursor: pointer;
+`;
+
+const Index = styled.div<{ selected: boolean }>`
+  width: 10rem;
+  padding: 0.7rem 0;
+  border-bottom: 2px solid
+    ${({ theme, selected }) =>
+      selected ? theme.colors.main : theme.colors.grey1};
+  color: ${({ theme, selected }) =>
+    selected ? theme.colors.white : theme.colors.grey1};
+  white-space: nowrap;
+`;

src/components/mypage/Mypage.tsx

@@ -0,0 +1,39 @@
+import { styled } from "styled-components";
+import MyIndex from "./MyIndex";
+import ServiceBox from "./ServiceBox";
+import ServiceResult from "./ServiceResult";
+
+const Mypage = () => {
+  return (
+    <Layout>
+      <Title>마이 페이지</Title>
+      <MyIndex />
+      <ServiceContent>
+        <ServiceBox />
+        <ServiceResult />
+      </ServiceContent>
+    </Layout>
+  );
+};
+
+export default Mypage;
+
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  padding: 5.5rem 6% 0 6%;
+  gap: 1.5rem;
+`;
+
+const Title = styled.div`
+  color: ${({ theme }) => theme.colors.white};
+  font-size: 1.6rem;
+  font-weight: 500;
+  margin-left: 1rem;
+`;
+
+const ServiceContent = styled.div`
+  display: inline-flex;
+  width: 100%;
+`;

src/components/mypage/Service.tsx

@@ -0,0 +1,63 @@
+import { colors } from "@/styles/theme";
+import { styled } from "styled-components";
+
+interface ServiceProps {
+  button1: string;
+  button2: string;
+  content: string;
+}
+
+const Service = (props: ServiceProps) => {
+  const { button1, button2, content } = props;
+
+  return (
+    <CopyWrapper>
+      <TagWrapper>
+        <Tag color={colors.secondary} background={colors.secondaryLight3}>
+          {button1}
+        </Tag>
+        <Tag color={colors.grey1} background={colors.grey5}>
+          {button2}
+        </Tag>
+      </TagWrapper>
+      {content}
+    </CopyWrapper>
+  );
+};
+
+export default Service;
+
+const CopyWrapper = styled.div`
+  display: flex;
+  width: 49%;
+  flex-direction: column;
+  justify-content: space-between;
+  border-radius: 0.875rem;
+  background: ${colors.grey0};
+  padding: 1rem 1rem 3rem 1rem;
+  color: var(--Basic-White, #fff);
+  text-align: center;
+  font-size: 0.9rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 1.375rem;
+  margin-bottom: 2%;
+`;
+const TagWrapper = styled.div`
+  display: inline-flex;
+  gap: 0.5rem;
+  margin-bottom: 3rem;
+`;
+const Tag = styled.div<{ color: string; background: string }>`
+  padding: 0.375rem 0.875rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 1.375rem;
+  border: 1px solid ${(props) => props.color};
+  background: ${(props) => props.background};
+  color: ${(props) => props.color};
+  font-size: 0.75rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+`;

src/components/mypage/ServiceBox.tsx

@@ -0,0 +1,176 @@
+"use client";
+
+import { serviceOption, toneMannerOption } from "@/lib/user/userData";
+import { colors } from "@/styles/theme";
+import { useEffect, useState } from "react";
+import styled from "styled-components";
+
+const ServiceBox = () => {
+  const [values, setValues] = useState({
+    service: "",
+    toneManner: "",
+  });
+
+  const [category, setCategory] = useState("");
+  const [toneManner, setToneManner] = useState("");
+  const categoryClick = (opt: string) => {
+    category === opt ? setCategory("") : setCategory(opt);
+  };
+  const toneMannerClick = (opt: string) => {
+    toneManner === opt ? setToneManner("") : setToneManner(opt);
+  };
+
+  const [canSubmit, setCanSubmit] = useState(false);
+  const [okSubmit, setOkSubmit] = useState(false);
+  const handleSubmit = () => {
+    setValues({ service: category, toneManner: toneManner });
+    if (canSubmit) {
+      setOkSubmit(true);
+    }
+  };
+
+  useEffect(() => {
+    if (category !== "" && toneManner !== "") {
+      setCanSubmit(true);
+    } else {
+      setCanSubmit(false);
+    }
+  }, [category, toneManner]);
+
+  return (
+    <BoxWrapper>
+      <BoxContent id="createCopy">
+        <Contents focus={""} opt={"none"}>
+          서비스 선택
+          <InlineContent gap="0.5rem">
+            {serviceOption.map((item) => (
+              <ToneButton
+                key={item.id}
+                active={category == item.name}
+                color={colors.main}
+                background="#212121"
+                onClick={() => categoryClick(item.name)}
+              >
+                {item.name}
+              </ToneButton>
+            ))}
+          </InlineContent>
+        </Contents>
+
+        <Contents focus={""} opt={"none"}>
+          톤 앤 매너
+          <InlineContent gap="0.5rem">
+            {toneMannerOption.map((item) => (
+              <ToneButton
+                key={item.id}
+                active={toneManner == item.name}
+                color={colors.main}
+                background="#212121"
+                onClick={() => toneMannerClick(item.name)}
+              >
+                {item.name}
+              </ToneButton>
+            ))}
+          </InlineContent>
+        </Contents>
+      </BoxContent>
+
+      <SubmitButton
+        onClick={handleSubmit}
+        okSubmit={okSubmit}
+        disabled={!canSubmit}
+      >
+        적용하기
+      </SubmitButton>
+    </BoxWrapper>
+  );
+};
+
+export default ServiceBox;
+
+const BoxWrapper = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 40%;
+  justify-content: space-between;
+  flex-shrink: 0;
+  border-radius: 0.875rem;
+  background: #212121;
+  padding: 1.88rem 2.5rem;
+  align-items: center;
+`;
+const InlineContent = styled.div<{ gap: string }>`
+  display: flex;
+  flex-wrap: wrap;
+  gap: ${(props) => props.gap};
+  margin-bottom: 1rem;
+`;
+const BoxContent = styled.div`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow-y: scroll;
+  gap: 1.5rem;
+  ::-webkit-scrollbar {
+    display: none;
+  }
+  -ms-overflow-style: none; /* 인터넷 익스플로러 */
+  scrollbar-width: none; /* 파이어폭스 */
+`;
+const Contents = styled.div<{ focus: string; opt: string }>`
+  display: flex;
+  flex-direction: column;
+  flex-wrap: nowrap;
+  width: 100%;
+  gap: 1rem;
+  color: ${(props) => (props.focus === props.opt ? colors.main : colors.white)};
+  font-size: 1rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+`;
+const ToneButton = styled.button<{
+  active: boolean;
+  color: string;
+  background: string;
+}>`
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 1.825rem;
+  border: 1px solid ${(props) => (props.active ? props.color : colors.grey1)};
+  background: ${(props) => (props.active ? props.background : "transparent")};
+  color: ${(props) => (props.active ? props.color : colors.grey1)};
+  font-size: 0.875rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+  padding: 0.5rem 1.3rem;
+  cursor: pointer;
+  &:focus {
+    outline-color: ${colors.main};
+    outline-offset: 0;
+    outline-width: 1px;
+    outline-style: solid;
+    border-color: transparent;
+  }
+`;
+
+const SubmitButton = styled.button<{ okSubmit: boolean; disabled: boolean }>`
+  display: flex;
+  width: 100%;
+  padding: 0.75rem 2.5rem;
+  justify-content: center;
+  align-items: center;
+  border-radius: 2.1875rem;
+  border: none;
+  margin-top: 1.88rem;
+  color: ${(props) => (props.okSubmit ? colors.white : "#5D5D5D")};
+  background: ${(props) => (props.okSubmit ? colors.main : "#393939")};
+  cursor: ${(props) => (props.disabled ? "not-allowed" : "pointer")};
+  &:hover {
+    color: ${(props) => (props.disabled ? colors.grey05 : colors.white)};
+    background: ${(props) => (props.disabled ? "#393939" : colors.main)};
+    transition: 0.3s;
+  }
+`;

src/components/mypage/ServiceResult.tsx

@@ -0,0 +1,60 @@
+"use client";
+
+import styled from "styled-components";
+import { colors } from "@/styles/theme";
+import { useState } from "react";
+import { useWindowSize } from "@/hooks/useWindowSize";
+import { serviceData } from "@/lib/user/userData";
+import Service from "./Service";
+
+const ServiceResult = () => {
+  const size = useWindowSize();
+  const [categoryIndex, setCategoryIndex] = useState(0);
+
+  return (
+    <BoxWrapper>
+      {categoryIndex == 0 ? (
+        <BoxContents style={{ height: size.height * 0.65 }}>
+          {serviceData.map((data) => (
+            <Service
+              key={data.id}
+              button1={data.button1}
+              button2={data.button2}
+              content={data.content}
+            />
+          ))}
+        </BoxContents>
+      ) : (
+        <></>
+      )}
+    </BoxWrapper>
+  );
+};
+
+export default ServiceResult;
+
+const BoxWrapper = styled.div`
+  width: 60%;
+  padding-left: 1.38rem;
+`;
+const BoxContents = styled.div`
+  width: 100%;
+  display: inline-flex;
+  flex-wrap: wrap;
+  overflow-y: auto;
+  justify-content: space-between;
+  padding-right: 0.875rem;
+
+  &::-webkit-scrollbar-track {
+    margin: 1rem;
+    border-radius: 10px;
+    background-color: ${colors.secondaryLight3};
+  }
+  &::-webkit-scrollbar {
+    width: 0.375rem;
+  }
+  &::-webkit-scrollbar-thumb {
+    border-radius: 10px;
+    background-color: ${colors.secondary};
+  }
+`;