Merge pull request #58 from Kusitms-29th-ASAP/design/#53

[Design] 모든 페이지 디테일 수정

src/app/page.tsx

@@ -14,23 +14,66 @@ export default function Home() {
         alt="background"
         over-fit="cover"
       />
-      <SocialKakao />
+
+      <Layout>
+        <Title>
+          <p>우리 아이 학교소식 핵심 콕콕!</p>
+          <h1>스쿨포인트</h1>
+        </Title>
+        <Image
+          src={"/assets/main/main_chick.svg"}
+          width={272}
+          height={272}
+          alt="logo"
+        />
+        <SocialKakao />
+      </Layout>
     </Container>
   );
 }
 
 const Container = styled.div`
-  max-width: 480px;
-  width: 100%;
-  height: 100vh;
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   align-items: center;
+  max-width: 480px;
+  width: 100%;
+  height: 100vh;
 `;
 
 const StyledImage = styled(Image)`
   width: 100%;
   height: 100%;
   object-fit: cover;
 `;
+
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  img {
+    margin: 64px 0 48px 0;
+  }
+`;
+
+const Title = styled.div`
+  color: ${({ theme }) => theme.colors.primary600};
+  text-align: center;
+
+  p {
+    ${({ theme }) => theme.fonts.heading2_r};
+  }
+  h1 {
+    font-size: 32px;
+    font-weight: 700;
+    line-height: 134%; /* 42.88px */
+    letter-spacing: -0.64px;
+  }
+`;

src/app/school/page.tsx

@@ -14,7 +14,7 @@ const School = () => {
   return (
     <>
       <Container>
-        <Topbar text="학교생활" />
+        <Topbar text="학교생활" icon={false} />
       </Container>
       <Background>
         <SchoolHomeTop title={"주간 학습 안내"} />

src/app/signin/completion/page.tsx

@@ -2,8 +2,8 @@
 
 import Button from "@/components/common/Button";
 import styled from "styled-components";
-import Image from "next/legacy/image";
 import { useRouter } from "next/navigation";
+import Image from "next/image";
 
 const Completion = () => {
   const router = useRouter();
@@ -14,17 +14,33 @@ const Completion = () => {
 
   return (
     <Container>
-      <Image
-        src="/assets/common/grade1.svg"
-        alt="complete"
-        width={232}
-        height={232}
+      <StyledImage
+        src="/assets/main/main_background.svg"
+        width={480}
+        height={800}
+        alt="background"
+        over-fit="cover"
       />
-      <AddChildren>
-        <div>혹시, 자녀 추가 등록이 필요하신가요?</div>
-        <Button text="자녀 추가하러 가기" type="primaryLight" size="medium" />
-      </AddChildren>
-      <Button text="스쿨포인트 시작하기" onClick={handleStartButtonClick} />
+      <Layout>
+        <Title>
+          <h1>회원가입 완료!</h1>
+          <p>스쿨포인트에 오신 것을 환영합니다!</p>
+        </Title>
+        <Image
+          src={"/assets/common/grade3.svg"}
+          width={232}
+          height={232}
+          alt="logo"
+        />
+        <AddChildren>
+          <div>혹시, 자녀 추가 등록이 필요하신가요?</div>
+          <Button text="자녀 추가하러 가기" type="primaryLight" size="medium" />
+        </AddChildren>
+      </Layout>
+
+      <ButtonBox>
+        <Button text="스쿨포인트 시작하기" onClick={handleStartButtonClick} />
+      </ButtonBox>
     </Container>
   );
 };
@@ -34,27 +50,63 @@ export default Completion;
 const Container = styled.div`
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
+  justify-content: flex-start;
   align-items: center;
-
-  padding: 20px;
-  background-image: url("/assets/main/complete_background.svg");
-  background-position: center;
-  background-repeat: no-repeat;
+  max-width: 480px;
   width: 100%;
   height: 100vh;
   position: relative;
 `;
 
+const StyledImage = styled(Image)`
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+`;
+
+const Layout = styled.div`
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+
+  position: absolute;
+  width: 100%;
+  height: 100%;
+
+  img {
+    margin: 20px 0 56px 0;
+  }
+`;
+
 const AddChildren = styled.div`
   display: flex;
   flex-direction: column;
   justify-content: center;
   align-items: center;
   gap: 8px;
-  margin: 56px 0 123px 0;
   div {
     color: ${({ theme }) => theme.colors.b400};
     ${({ theme }) => theme.fonts.body3_m};
   }
 `;
+
+const Title = styled.div`
+  text-align: center;
+
+  h1 {
+    ${({ theme }) => theme.fonts.heading1_b};
+    color: ${({ theme }) => theme.colors.primary500};
+  }
+  p {
+    ${({ theme }) => theme.fonts.body3_m};
+    color: ${({ theme }) => theme.colors.b400};
+  }
+`;
+
+const ButtonBox = styled.div`
+  position: absolute;
+  bottom: 0;
+  padding: 0 20px 28px 20px;
+  width: 100%;
+`;

src/app/signin/process1/page.tsx

@@ -12,6 +12,8 @@ import Subtitle from "@/components/signin/Subtitle";
 const TITLE = "안녕하세요!\n스쿨포인트에 오신 걸 환영해요.";
 const CONTEXT =
   "학부모님의 편리한 소식 확인을 위해 \n 몇 가지 정보를 입력해 주세요!";
+const WARNING =
+  "잘못된 입력 형식입니다. \n010-0000-0000 으로 다시 작성해주세요!";
 
 const SigninProcess1 = () => {
   const [phoneNumber, setPhoneNumber] = useState("");
@@ -24,6 +26,11 @@ const SigninProcess1 = () => {
     router.push("/signin/process2");
   };
 
+  const isValidPhoneNumber = (number: string) => {
+    const regex = /^01([0|1|6|7|8|9]?)-(\d{3,4})-(\d{4})$/;
+    return regex.test(number);
+  };
+
   return (
     <Container>
       <Topbar text="회원가입" />
@@ -36,13 +43,16 @@ const SigninProcess1 = () => {
         <Input
           value={phoneNumber}
           onChange={handlePhoneNumberChange}
-          placeholder="010 - 0000 - 0000"
+          placeholder="010-0000-0000"
         />
+        {phoneNumber && !isValidPhoneNumber(phoneNumber) && (
+          <WarningText>{WARNING}</WarningText>
+        )}
       </ContentBox>
 
       <Button
         text="다음"
-        disabled={!phoneNumber}
+        disabled={!isValidPhoneNumber(phoneNumber)}
         onClick={handleNextButtonClick}
       />
     </Container>
@@ -75,3 +85,9 @@ const Context = styled.div`
 const ContentBox = styled.div`
   height: 100%;
 `;
+
+const WarningText = styled.div`
+  color: #ef4444;
+  ${({ theme }) => theme.fonts.caption1_m};
+  margin-top: 6px;
+`;

src/app/signin/process3-1/page.tsx

@@ -42,12 +42,12 @@ const Process3_1 = () => {
 
   const handleSelectGrade = (selectedGrade: string) => {
     setGrade(selectedGrade);
-    setOpenGradePopup(false); // 선택 후 팝업 닫기
+    setOpenGradePopup(false);
   };
 
   const handleSelectclassNum = (selectedclassNum: string) => {
     setClassNum(selectedclassNum);
-    setOpenclassNumPopup(false); // 선택 후 팝업 닫기
+    setOpenclassNumPopup(false);
   };
 
   return (
@@ -93,7 +93,11 @@ const Process3_1 = () => {
           />
         )}
       </ContentBox>
-      <Button text="다음" onClick={handleNextButtonClick} />
+      <Button
+        text="다음"
+        onClick={handleNextButtonClick}
+        disabled={grade === "" || classNum === ""}
+      />
     </Container>
   );
 };

src/app/signin/terms/page.tsx

@@ -5,7 +5,7 @@ import Checkbox from "@/components/common/Checkbox";
 import Topbar from "@/components/common/Topbar";
 import { useDeleteUser } from "@/hooks/auth/useDeleteUser";
 import { useRouter } from "next/navigation";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import styled from "styled-components";
 
 const CONTENT = "스쿨포인트를 사용하려면 \n약관 동의가 필요해요";
@@ -17,6 +17,14 @@ const Terms = () => {
   const [isPrivacyAgreed, setIsPrivacyAgreed] = useState(false);
   const [isMarketingAgreed, setIsMarketingAgreed] = useState(false);
 
+  useEffect(() => {
+    if (isServiceAgreed && isPrivacyAgreed && isMarketingAgreed) {
+      setIsAllAgreed(true);
+    } else {
+      setIsAllAgreed(false);
+    }
+  }, [isServiceAgreed, isPrivacyAgreed, isMarketingAgreed]);
+
   const handleAllAgreeChange = (isChecked: boolean) => {
     setIsAllAgreed(isChecked);
     setIsServiceAgreed(isChecked);

src/app/study/page.tsx

@@ -11,7 +11,7 @@ const Study = () => {
   return (
     <>
       <Container>
-        <Topbar text="가정학습" />
+        <Topbar text="가정학습" icon={false} />
         <Banner />
         <Subjects />
       </Container>

src/components/common/Checkbox.tsx

@@ -2,15 +2,18 @@ import { theme } from "@/styles/theme";
 import styled from "styled-components";
 import Image from "next/image";
 
+type checkboxType = "checkbox" | "grayCheckbox" | "checkBtn" | "checkArrow";
+type checkboxColor = "primary" | "gray" | "black";
+
 export interface CheckBoxProps {
-  checkboxType?: "checkbox" | "grayCheckbox" | "checkBtn" | "checkArrow";
+  checkboxType?: checkboxType;
   value?: string;
   label?: string;
   text?: string;
   checked?: boolean;
   onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
   essential?: boolean;
-  color?: "primary" | "gray" | "black";
+  color?: checkboxColor;
 }
 
 const Checkbox = (props: CheckBoxProps) => {
@@ -72,7 +75,7 @@ const CheckBoxLayout = styled.div<{ $check: boolean }>`
 
   &.checkBtn {
     width: 100%;
-    padding: 15px 6px;
+    padding: 12px 16px;
     border-radius: 10px;
     background: rgba(255, 135, 0, 0.05);
     white-space: nowrap;

src/components/common/ListBox.tsx

@@ -201,7 +201,7 @@ const Delete = styled.div`
   justify-content: center;
   align-items: center;
   gap: 4px;
-  margin-top: 2px;
+  margin-top: 8px;
   margin-right: 10px;
   position: absolute;
   top: 0;

src/components/common/Tabbar.tsx

@@ -1,4 +1,4 @@
-import React, { useEffect, useState } from "react";
+import React, { useState } from "react";
 import styled from "styled-components";
 import { usePathname, useRouter } from "next/navigation";
 import Image from "next/image";
@@ -54,6 +54,7 @@ const Container = styled.div`
   position: sticky;
   bottom: 0;
   left: 0;
+  z-index: 100;
 `;
 
 const Tab = styled.div<TabProps>`

src/components/signin/SocialKakao.tsx

@@ -29,8 +29,6 @@ const SocialLoginBox = styled.div`
   width: 100%;
   height: 48px;
   cursor: pointer;
-  position: absolute;
-  bottom: 140px;
   display: flex;
   flex-direction: column;
   justify-content: center;