Merge pull request #120 from ASAP-Lettering/design/#117

[Design] 홈 버튼 변경 및 편지지 디자인 추가

Author: yyypearl

public/assets/letter/background_10.png

@@ -86,7 +86,7 @@ const LetterPreviewPage = () => {
   return (
     <Layout>
       <NavigatorBar
-        title={letterId ? "편지 수정하기" : "새 편지 등록하기"}
+        title={letterId ? "편지 수정하기" : "받은 편지 보관하기"}
         cancel={false}
       />
       <Container>

public/assets/letter/background_11.png

@@ -186,13 +186,13 @@ const LetterRegisterPage = () => {
   return (
     <Layout>
       <NavigatorBar
-        title={letterId ? "편지 수정하기" : "새 편지 등록하기"}
+        title={letterId ? "편지 수정하기" : "받은 편지 보관하기"}
         cancel={false}
       />
       <Container>
         <Essential>* 필수</Essential>
         <Column>
-          <Label>편지를 보낸 사람은 누구인가요? *</Label>
+          <Label>나에게 편지를 보낸 사람은 누구인가요? *</Label>
           <Input
             inputType="boxText"
             value={sender}

public/assets/letter/background_12.png

@@ -6,14 +6,15 @@ import { theme } from "@/styles/theme";
 import NavigatorBar from "@/components/common/NavigatorBar";
 import Button from "@/components/common/Button";
 import { useRouter, useSearchParams } from "next/navigation";
-import Image from "next/image";
 import Letter from "@/components/letter/Letter";
 import { useRecoilValue, useSetRecoilState } from "recoil";
 import {
   registerLetterState,
   useSsrComplectedState,
 } from "@/recoil/letterStore";
 import Loader, { LoaderContainer } from "@/components/common/Loader";
+import LetterTemplateList from "@/components/letter/LetterTemplateList";
+import { ALL_TEMPLATES } from "@/constants/templates";
 
 const LetterTemplatePage = () => {
   const router = useRouter();
@@ -24,7 +25,9 @@ const LetterTemplatePage = () => {
     useRecoilValue(registerLetterState);
   const setRegisterLetterState = useSetRecoilState(registerLetterState);
 
-  const [template, setTemplateType] = useState<number>(templateType || 0);
+  const [template, setTemplateType] = useState<number>(
+    templateType || ALL_TEMPLATES[0]
+  );
   const totalPage = 10;
 
   /* SSR 완료 시 상태 업데이트 */
@@ -58,14 +61,14 @@ const LetterTemplatePage = () => {
   return (
     <Layout>
       <NavigatorBar
-        title={letterId ? "편지 수정하기" : "새 편지 등록하기"}
+        title={letterId ? "편지 수정하기" : "받은 편지 보관하기"}
         cancel={false}
       />
       <Container>
         <Essential>* 필수</Essential>
         <Column>
           <Label>편지지를 골라볼까요? *</Label>
-          <SmallText>마음에 드는 배경으로 편지를 저장할 수 있어요</SmallText>
+          <SmallText>마음에 드는 배경으로 편지를 보관할 수 있어요</SmallText>
           <LetterWrapper>
             <LetterContainer>
               <Letter
@@ -82,22 +85,11 @@ const LetterTemplatePage = () => {
               />
             </LetterContainer>
           </LetterWrapper>
-          <TemplatesList>
-            {[0, 1, 2, 3, 4, 5, 6, 7, 8, 9].map((item) => (
-              <TemplateImage
-                key={item}
-                src={`/assets/letter/background_${item}.png`}
-                width={70}
-                height={70}
-                alt="편지지"
-                $selected={template === item}
-                onClick={() => hanleChangeTemplate(item)}
-              />
-            ))}
-          </TemplatesList>
-          <Page>
-            <Current>{template + 1}</Current>/{totalPage}
-          </Page>
+          <LetterTemplateList
+            selectedTemplate={template}
+            onChangeTemplate={hanleChangeTemplate}
+            templates={ALL_TEMPLATES}
+          />
         </Column>
         <ButtonWrapper>
           <Button
@@ -241,87 +233,6 @@ const LetterContainer = styled.div`
     min-height: 182px;
   }
 `;
-
-const TemplatesList = styled.div`
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  gap: 12px;
-  height: 78px;
-  padding-left: 4px;
-  margin-top: 69px;
-  margin-bottom: 14px;
-  overflow-x: scroll;
-
-  ::-webkit-scrollbar {
-    display: none;
-  }
-  -ms-overflow-style: none; /* IE, Edge */
-  scrollbar-width: none; /* Firefox */
-
-  @media (max-height: 740px) {
-    margin-top: 30px;
-    margin-bottom: 5px;
-    ${theme.fonts.body14};
-    gap: 11px;
-  }
-
-  @media (max-height: 680px) {
-    margin-top: 15px;
-    margin-bottom: 5px;
-    ${theme.fonts.body14};
-    gap: 11px;
-  }
-
-  @media (max-height: 628px) {
-    margin-top: 12px;
-    margin-bottom: 5px;
-    ${theme.fonts.body14};
-    gap: 11px;
-  }
-`;
-
-const TemplateImage = styled(Image)<{ $selected: boolean }>`
-  width: 70px;
-  height: 70px;
-  border-radius: 8px;
-  box-sizing: content-box;
-
-  ${({ $selected, theme }) =>
-    $selected &&
-    css`
-      box-shadow: 0 0 0 4px ${theme.colors.sub03};
-    `}
-
-  @media (max-height: 628px) {
-    width: 50px;
-    height: 50px;
-    border-radius: 4px;
-    ${({ $selected, theme }) =>
-      $selected &&
-      css`
-        box-shadow: 0 0 0 2px ${theme.colors.sub03};
-      `}
-  }
-`;
-
-const Page = styled.div`
-  width: 100%;
-  display: flex;
-  justify-content: flex-end;
-  color: ${theme.colors.gray500};
-  ${theme.fonts.caption03};
-`;
-
-const Current = styled.span`
-  color: ${theme.colors.white};
-  margin-bottom: 100px;
-
-  @media (max-height: 628px) {
-    margin-bottom: 50px;
-  }
-`;
-
 const ButtonWrapper = styled.div`
   width: 100%;
   position: absolute;

public/assets/letter/background_13.png

@@ -77,7 +77,7 @@ const Onboarding = () => {
       step === 1 ? "99px" : step === 2 ? "133px" : step === 3 ? "133px" : "",
     left:
       step === 1
-        ? "136px"
+        ? "132px"
         : step === 2
         ? "105px"
         : step === 3
@@ -91,7 +91,7 @@ const Onboarding = () => {
       step === 1 ? "141px" : step === 2 ? "122px" : step === 3 ? "122px" : "",
     left:
       step === 1
-        ? "71px"
+        ? "68px"
         : step === 2
         ? "159px"
         : step === 3
@@ -124,11 +124,15 @@ const Onboarding = () => {
           <TotalStep> / 4</TotalStep>
         </OverlayClose>
         {step === 1 && (
-          <OverlayBtnWrapper left="24px" bottom="28px" width="65%">
+          <OverlayBtnWrapper
+            left="24px"
+            bottom="28px"
+            width="calc(100% - 167px)"
+          >
             <Button
               buttonType="primary"
               size="large"
-              text="새 편지 등록하기"
+              text="받은 편지 보관하기"
               height="60px"
             />
           </OverlayBtnWrapper>
@@ -166,25 +170,19 @@ const Onboarding = () => {
               src="/assets/onboarding/onboardingline5.svg"
               alt="Overlay Line 5"
               bottom="110px"
-              left="85%"
+              right="80px"
             />
-            <OverlayText bottom="149px" left="263px" textAlign="center">
+            <OverlayText bottom="150px" right="30px" textAlign="center">
               {overlayTexts[4]}
             </OverlayText>
             <OverlayBtnWrapper right="24px" bottom="28px">
               <Button
                 buttonType="secondary"
                 size="large"
-                width="100%"
+                width="131px"
                 height="60px"
-              >
-                <img
-                  src="/assets/icons/ic_rocket.svg"
-                  width={40}
-                  height={40}
-                  alt="rocket"
-                />
-              </Button>
+                text="편지 보내기"
+              />
             </OverlayBtnWrapper>
           </>
         )}