Skip to content

Commit 2817c50

Browse files
youngminssclaude
youngminss
and
claude
authored
feat: opinion 랜딩 페이지 UI 업데이트 (로고·lottie·footer) (#120)
* chore: add .worktrees to gitignore * feat: opinion 랜딩 페이지 로고·lottie·footer 버튼 업데이트 - 랜딩 전용 LandingLogoIcon 컴포넌트 추가 (새 서체 SVG path 적용) - LandingIntroLottie: opinion-landing.json → create-landing.json 변경 - LandingPage footer에 "이미 입력했어요" 버튼 추가 (pending 페이지 라우팅) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: opinion 랜딩 footer 레이아웃 구조 수정 Layout.Footer(고정 높이) 대신 raw footer로 교체하여 safe-area-inset-bottom 처리 및 두 버튼에 맞는 동적 높이 지원. main 영역 bottom padding도 148px+safe-area로 조정. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * refactor: 이미 입력했어요 버튼을 Button 컴포넌트에서 button element로 교체 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * fix: opinion 랜딩 배경색 gray → white로 수정 (피그마 시안 반영) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * style: 이미 입력했어요 버튼 hover 배경색 및 transition 추가 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> * refactor: LandingLogoIcon을 src/icons/로 이동 및 메인 랜딩 로고 교체 - LandingLogoIcon: pageComponents/gathering/opinion/landing → src/icons/landingLogoIcon - 모임생성 랜딩: logo.svg Image 컴포넌트 → LandingLogoIcon(color="white") 교체 - 의견수합 랜딩: import 경로 업데이트 Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com> --------- Co-authored-by: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent a720a76 commit 2817c50

File tree

5 files changed

+81
-20
lines changed

5 files changed

+81
-20
lines changed

‎src/icons/landingLogoIcon/LandingLogoIcon.tsx‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
import type { SVGProps } from "react";
2+
3+
interface LandingLogoIconProps extends Omit<
4+
SVGProps<SVGSVGElement>,
5+
"children"
6+
> {
7+
color?: string;
8+
}
9+
10+
export const LandingLogoIcon = ({
11+
color = "currentColor",
12+
...props
13+
}: LandingLogoIconProps) => {
14+
return (
15+
<svg
16+
xmlns="http://www.w3.org/2000/svg"
17+
width="64"
18+
height="20"
19+
viewBox="0 0 64 20"
20+
fill="none"
21+
{...props}
22+
>
23+
<path
24+
d="M55.708 12.3184C56.0695 12.3184 56.3111 12.3701 56.4316 12.4746C56.552 12.5791 56.6123 12.7958 56.6123 13.124V13.6396C56.6123 14.5055 56.4465 15.267 56.1152 15.9238C56.4466 16.4911 56.9965 16.7744 57.7646 16.7744C58.5327 16.7743 59.4513 16.4685 60.5205 15.8564C60.7766 15.7071 61.0478 15.5952 61.334 15.5205C61.6352 15.4309 61.8991 15.3867 62.125 15.3867C62.6822 15.3868 63.1341 15.5655 63.4805 15.9238C63.8269 16.2672 64 16.7227 64 17.29C64 18.1112 63.6834 18.768 63.0508 19.2607C62.4182 19.7534 61.5294 20 60.3848 20C59.1649 20 58.0881 19.7384 57.1543 19.2158C56.2355 18.7082 55.6033 18.0137 55.2568 17.1328C54.3833 18.0286 53.1103 18.6864 51.4385 19.1045C49.7816 19.5375 47.7553 19.7539 45.3604 19.7539C45.1194 19.7539 44.9536 19.7087 44.8633 19.6191C44.7729 19.5296 44.7127 19.41 44.6826 19.2607L44.5693 18.791C44.5392 18.6417 44.555 18.5147 44.6152 18.4102C44.6905 18.3206 44.8406 18.2603 45.0664 18.2305C47.5064 18.0065 49.2912 17.5284 50.4209 16.7969C51.5505 16.0653 52.1161 15.0132 52.1162 13.6396V13.124C52.1162 12.7957 52.1764 12.5791 52.2969 12.4746C52.4174 12.3702 52.6583 12.3184 53.0195 12.3184H55.708ZM39.5947 0.223633C40.0765 0.223683 40.4082 0.320627 40.5889 0.514648C40.7696 0.708751 40.8594 1.03059 40.8594 1.47852V18.5439C40.8594 18.9916 40.7694 19.3127 40.5889 19.5068C40.4082 19.7009 40.0765 19.7988 39.5947 19.7988H37.5156C37.0337 19.7988 36.7022 19.7009 36.5215 19.5068C36.3409 19.3127 36.251 18.9917 36.251 18.5439V1.47852C36.251 1.03059 36.3407 0.708751 36.5215 0.514648C36.7023 0.320678 37.0338 0.223648 37.5156 0.223633H39.5947ZM32.8164 0.448242C33.3134 0.44826 33.6449 0.552703 33.8105 0.761719C33.9761 0.955838 34.0586 1.26932 34.0586 1.70215V5.12891C34.0586 7.26393 33.7873 9.13752 33.2451 10.75C32.7029 12.3625 31.9429 13.7514 30.9639 14.916C29.9849 16.0657 28.8101 17.0142 27.4395 17.7607C26.0688 18.5222 24.5469 19.1112 22.875 19.5293C22.5436 19.6189 22.3178 19.5295 22.1973 19.2607L22.0166 18.8574C21.8812 18.5738 21.9941 18.3422 22.3555 18.1631C23.3946 17.6704 24.3511 17.0887 25.2246 16.417C26.0982 15.7451 26.8518 14.9086 27.4844 13.9082C28.132 12.9079 28.6366 11.7136 28.998 10.3252C29.3595 8.92169 29.54 7.25617 29.54 5.33008V2.70996C29.54 2.4746 29.4998 2.30791 29.4189 2.20996L29.3447 2.13574C29.2476 2.05556 29.0866 2.01562 28.8623 2.01562H23.1914C22.9805 2.01562 22.837 1.97797 22.7617 1.90332C22.7017 1.82864 22.6719 1.70885 22.6719 1.54492V0.917969C22.6719 0.753876 22.7015 0.634184 22.7617 0.55957C22.837 0.484918 22.9805 0.448244 23.1914 0.448242H32.8164ZM6.82324 13.7959C7.29003 13.7959 7.61414 13.8929 7.79492 14.0869C7.97567 14.2661 8.06641 14.5879 8.06641 15.0508V17.5586H12.3584V15.0508C12.3584 14.5879 12.4491 14.2661 12.6299 14.0869C12.8107 13.893 13.1348 13.7959 13.6016 13.7959H15.7256C16.192 13.796 16.5155 13.8932 16.6963 14.0869C16.877 14.2661 16.9678 14.5879 16.9678 15.0508V17.5586H19.8828C20.0784 17.5586 20.2138 17.5888 20.2891 17.6484C20.3644 17.7231 20.4023 17.8501 20.4023 18.0293V18.6562C20.4023 18.8354 20.3644 18.9549 20.2891 19.0146C20.2138 19.0892 20.0783 19.1269 19.8828 19.127H0.519531C0.323981 19.1269 0.188604 19.0892 0.113281 19.0146C0.0379781 18.9549 8.67189e-06 18.8354 0 18.6562V18.0293C0 17.8501 0.0379694 17.7231 0.113281 17.6484C0.188589 17.5888 0.323916 17.5586 0.519531 17.5586H3.45703V15.0508C3.45703 14.5879 3.54681 14.2661 3.72754 14.0869C3.90825 13.8929 4.23245 13.7959 4.69922 13.7959H6.82324ZM62.1924 0.223633C62.6741 0.223633 63.0057 0.320774 63.1865 0.514648C63.3673 0.708751 63.458 1.03059 63.458 1.47852V11.4893C63.458 11.9372 63.3673 12.258 63.1865 12.4521C63.0058 12.6463 62.6744 12.7432 62.1924 12.7432H60.1143C59.6323 12.7432 59.3009 12.6463 59.1201 12.4521C58.9394 12.258 58.8486 11.9372 58.8486 11.4893V1.47852C58.8486 1.03059 58.9394 0.708751 59.1201 0.514648C59.3009 0.32079 59.6326 0.223633 60.1143 0.223633H62.1924ZM10.167 0C13.1192 0 15.364 0.500605 16.9004 1.50098C18.4515 2.50136 19.2275 4.06918 19.2275 6.2041C19.2275 8.339 18.4516 9.9069 16.9004 10.9072C15.364 11.9076 13.1192 12.4072 10.167 12.4072C7.20003 12.4072 4.94843 11.9074 3.41211 10.9072C1.87582 9.9069 1.10749 8.33907 1.10742 6.2041C1.10742 4.06898 1.87575 2.50135 3.41211 1.50098C4.94844 0.500667 7.19986 2.05674e-05 10.167 0ZM50.2637 0.223633C51.2123 0.22367 52.0857 0.335706 52.8838 0.55957C53.6971 0.783527 54.3979 1.13454 54.9854 1.6123C55.5728 2.07516 56.0319 2.67269 56.3633 3.4043C56.6946 4.1209 56.8603 4.97926 56.8604 5.97949C56.8604 6.97986 56.6947 7.84651 56.3633 8.57812C56.032 9.29456 55.5726 9.89146 54.9854 10.3691C54.3979 10.832 53.6972 11.1755 52.8838 11.3994C52.0857 11.6233 51.2124 11.7353 50.2637 11.7354C49.3148 11.7354 48.4334 11.6233 47.6201 11.3994C46.8218 11.1755 46.1284 10.832 45.541 10.3691C44.9538 9.89146 44.4944 9.29456 44.1631 8.57812C43.8317 7.84651 43.666 6.97986 43.666 5.97949C43.6661 4.97926 43.8318 4.1209 44.1631 3.4043C44.4945 2.67268 44.9536 2.07516 45.541 1.6123C46.1284 1.13453 46.8218 0.78353 47.6201 0.55957C48.4334 0.335684 49.3149 0.223633 50.2637 0.223633ZM10.167 1.56738C9.45918 1.5674 8.82677 1.65025 8.26953 1.81445C7.71222 1.97869 7.24472 2.24684 6.86816 2.62012C6.49163 2.97845 6.20557 3.4565 6.00977 4.05371C5.81396 4.63601 5.71582 5.35305 5.71582 6.2041C5.71584 7.05489 5.81404 7.77887 6.00977 8.37598C6.20554 8.95818 6.4917 9.43633 6.86816 9.80957C7.24472 10.1679 7.71222 10.4295 8.26953 10.5938C8.82673 10.7579 9.45925 10.8398 10.167 10.8398C10.8749 10.8398 11.5081 10.758 12.0654 10.5938C12.6226 10.4295 13.0893 10.1678 13.4658 9.80957C13.8424 9.4363 14.1284 8.95827 14.3242 8.37598C14.52 7.77885 14.6181 7.05494 14.6182 6.2041C14.6182 5.35304 14.52 4.63602 14.3242 4.05371C14.1284 3.45651 13.8424 2.97844 13.4658 2.62012C13.0894 2.24702 12.6225 1.97869 12.0654 1.81445C11.5081 1.65021 10.8749 1.56738 10.167 1.56738ZM50.2637 1.79199C49.9172 1.79199 49.6154 1.86632 49.3594 2.01562C49.1033 2.15001 48.8848 2.3815 48.7041 2.70996C48.5384 3.0384 48.4107 3.47139 48.3203 4.00879C48.23 4.54623 48.1846 5.20323 48.1846 5.97949C48.1846 6.77063 48.23 7.43521 48.3203 7.97266C48.4107 8.49524 48.5384 8.92152 48.7041 9.25C48.8848 9.57839 49.1034 9.81751 49.3594 9.9668C49.6154 10.1011 49.9173 10.168 50.2637 10.168C50.5948 10.1679 50.8886 10.1011 51.1445 9.9668C51.4156 9.81751 51.6341 9.57841 51.7998 9.25C51.9806 8.92152 52.1157 8.49524 52.2061 7.97266C52.2964 7.43521 52.3418 6.77063 52.3418 5.97949C52.3418 5.20323 52.2964 4.54623 52.2061 4.00879C52.1157 3.47142 51.9805 3.03839 51.7998 2.70996C51.6341 2.38153 51.4156 2.15001 51.1445 2.01562C50.8886 1.86639 50.5949 1.79206 50.2637 1.79199Z"
25+
fill={color}
26+
/>
27+
</svg>
28+
);
29+
};

‎src/icons/landingLogoIcon/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { LandingLogoIcon } from "./LandingLogoIcon";

‎src/pageComponents/gathering/opinion/landing/LandingIntroLottie.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -26,7 +26,7 @@ export const LandingIntroLottie = () => {
2626
<Player
2727
autoplay
2828
loop
29-
src="/lotties/opinion-landing.json"
29+
src="/lotties/create-landing.json"
3030
style={{ width: "100%", height: "100%" }}
3131
/>
3232
</motion.div>

‎src/pageComponents/gathering/opinion/landing/LandingPage.tsx‎

Lines changed: 47 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,23 +1,32 @@
11
"use client";
22

3-
import { useParams } from "next/navigation";
3+
import { useParams, useRouter } from "next/navigation";
44
import { useEffect } from "react";
55

6-
import { trackViewPage } from "#/components/analytics";
6+
import { twJoin } from "tailwind-merge";
7+
8+
import { trackCtaClick, trackViewPage } from "#/components/analytics";
79
import { Layout } from "#/components/layout";
810
import { useGetGathering } from "#/hooks/apis/gathering";
9-
import { LogoIcon } from "#/icons/logoIcon";
10-
import { LandingIntroLottie } from "./LandingIntroLottie";
1111
import { GatheringDateBadge } from "./GatheringDateBadge";
12+
import { LandingIntroLottie } from "./LandingIntroLottie";
13+
import { LandingLogoIcon } from "#/icons/landingLogoIcon";
1214
import { OpinionStartButton } from "./OpinionStartButton";
15+
import { Button } from "#/components/button";
1316

1417
const PAGE_ID = "의견수합_랜딩";
1518

1619
export function LandingPage() {
1720
const { accessKey } = useParams<{ accessKey: string }>();
21+
const router = useRouter();
1822

1923
const { data: gathering } = useGetGathering(accessKey);
2024

25+
const handleAlreadySubmitted = () => {
26+
trackCtaClick({ page_id: PAGE_ID, button_name: "이미 입력했어요" });
27+
router.push(`/gathering/${accessKey}/opinion/pending`);
28+
};
29+
2130
useEffect(() => {
2231
if (gathering) {
2332
trackViewPage({
@@ -29,13 +38,20 @@ export function LandingPage() {
2938

3039
return (
3140
<>
32-
<Layout.Header background="gray">
41+
<Layout.Header background="white">
3342
<div className="ygi:h-full ygi:w-full" />
3443
</Layout.Header>
35-
<Layout.Content background="gray">
44+
<main
45+
className={twJoin(
46+
"ygi:relative ygi:h-dvh ygi:pt-layout-header-height",
47+
"ygi:pb-[calc(148px+env(safe-area-inset-bottom))]",
48+
"ygi:scrollbar-hide ygi:overflow-x-hidden ygi:overflow-y-auto",
49+
"ygi:bg-bg-white",
50+
)}
51+
>
3652
<section className="ygi:flex ygi:h-full ygi:flex-col ygi:bg-clip-padding">
3753
<div className="ygi:flex ygi:flex-col ygi:gap-6 ygi:px-6">
38-
<LogoIcon className="ygi:text-button-secondary" />
54+
<LandingLogoIcon className="ygi:text-button-secondary" />
3955
<h1 className="ygi:display-24-bd ygi:whitespace-pre-line ygi:text-text-primary">
4056
메뉴 고르기 어려우시죠?
4157
<br />
@@ -45,12 +61,31 @@ export function LandingPage() {
4561
</div>
4662
<LandingIntroLottie />
4763
</section>
48-
</Layout.Content>
49-
<Layout.Footer background="gray">
50-
<div className="ygi:py-auto ygi:px-6">
51-
<OpinionStartButton />
64+
</main>
65+
<footer
66+
className={twJoin(
67+
"ygi:fixed ygi:bottom-0 ygi:left-0 ygi:z-layout-footer",
68+
"ygi:flex ygi:w-full ygi:items-center ygi:justify-center",
69+
)}
70+
>
71+
<div
72+
className={twJoin(
73+
"ygi:w-full ygi:max-w-root-layout ygi:bg-bg-white",
74+
"ygi:pb-[env(safe-area-inset-bottom)]",
75+
)}
76+
>
77+
<div className="ygi:flex ygi:flex-col ygi:gap-3 ygi:px-6 ygi:py-4">
78+
<OpinionStartButton />
79+
<Button
80+
variant="tertiary"
81+
width="full"
82+
onClick={handleAlreadySubmitted}
83+
>
84+
이미 입력했어요
85+
</Button>
86+
</div>
5287
</div>
53-
</Layout.Footer>
88+
</footer>
5489
</>
5590
);
5691
}

‎src/pageComponents/landing/LandingPage.tsx‎

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,8 @@ import { useEffect } from "react";
55
import dynamic from "next/dynamic";
66
import Image from "next/image";
77

8+
import { LandingLogoIcon } from "#/icons/landingLogoIcon";
9+
810
const Player = dynamic(
911
() =>
1012
import("@lottiefiles/react-lottie-player").then(
@@ -47,13 +49,7 @@ export const LandingPage = () => {
4749
height={17}
4850
priority
4951
/>
50-
<Image
51-
src="/images/landing/logo.svg"
52-
alt="요기잇"
53-
width={170}
54-
height={54}
55-
priority
56-
/>
52+
<LandingLogoIcon color="white" width={170} height={54} />
5753
</div>
5854

5955
{/* Illustration Section */}

0 commit comments

Comments
 (0)