Merge pull request #72 from Neighbors-dev/develop

[DEPLOY] 공식 1차 배포

Author: AAminha

src/apis/user.ts

@@ -36,6 +36,7 @@ export const postLogout = async () => {
     logout()
     return true
   } catch (error) {
+    logout()
     if (error instanceof Error) {
       console.error(error.message)
     }

src/components/SolidButton.tsx

@@ -1,44 +1,44 @@
-import { ComponentPropsWithoutRef } from 'react'
+import { ComponentPropsWithoutRef, forwardRef } from 'react'
 import { twMerge } from 'tailwind-merge'
 
 interface SolidButtonProps extends ComponentPropsWithoutRef<'button'> {
   variant: 'primary' | 'secondary'
   size: 'small' | 'medium' | 'large'
   className?: string
   children: React.ReactNode
+  ref?: React.RefObject<HTMLButtonElement>
 }
 
-export default function SolidButton({
-  variant,
-  size,
-  className,
-  children,
-  ...props
-}: SolidButtonProps) {
-  // TODO: 색상 - 디자인시스템
+const SolidButton = forwardRef<HTMLButtonElement, SolidButtonProps>(
+  ({ variant, size, className, children, ...props }, ref) => {
+    const variantClass = {
+      primary: 'bg-brand-yellow text-neutral-100 disabled:bg-neutral-80 disabled:text-neutral-90',
+      secondary: 'bg-neutral-80 text-white',
+    }[variant]
 
-  const variantClass = {
-    primary: 'bg-brand-yellow text-neutral-100 disabled:bg-neutral-80 disabled:text-neutral-90',
-    secondary: 'bg-neutral-80 text-white',
-  }[variant]
+    const sizeClass = {
+      large: 'px-6 py-3 label-large-prominent rounded-[10px]',
+      medium: 'px-5 py-2 label-large-prominent rounded-lg',
+      small: 'px-3.5 py-1.5 label-medium-prominent rounded-md',
+    }[size]
 
-  const sizeClass = {
-    large: 'px-6 py-3 label-large-prominent rounded-[10px]',
-    medium: 'px-5 py-2 label-large-prominent rounded-lg',
-    small: 'px-3.5 py-1.5 label-medium-prominent rounded-md',
-  }[size]
+    return (
+      <button
+        ref={ref}
+        className={twMerge(
+          'flex shrink-0 items-center justify-center gap-1.5',
+          variantClass,
+          sizeClass,
+          className
+        )}
+        {...props}
+      >
+        {children}
+      </button>
+    )
+  }
+)
 
-  return (
-    <button
-      className={twMerge(
-        'flex shrink-0 items-center justify-center gap-1.5',
-        variantClass,
-        sizeClass,
-        className
-      )}
-      {...props}
-    >
-      {children}
-    </button>
-  )
-}
+SolidButton.displayName = 'SolidButton'
+
+export default SolidButton

src/constants/key.ts

@@ -1,4 +1,4 @@
-export const SHARE_CODE_KEY = 'TH-SC-qa-7'
-export const REFRESH_TOKEN_KEY = 'TH-RT-qa-7'
-export const MEMBER_INFO_KEY = 'TH-MI-qa-7'
-export const GUEST_INFO_KEY = 'TH-GI-qa-7'
+export const SHARE_CODE_KEY = 'TH-SC'
+export const REFRESH_TOKEN_KEY = 'TH-RT'
+export const MEMBER_INFO_KEY = 'TH-MI'
+export const GUEST_INFO_KEY = 'TH-GI'

src/constants/write.ts

@@ -53,3 +53,9 @@ export const BOTTOM_SHEET_CONTENT = {
     cancelText: null,
   },
 }
+
+export const SEARCH_EXAMPLE =
+  '검색하고 싶은 근무지가 구의119안전센터일 경우\n1. 근무지 이름로 검색\nex) 구의\n\n2. 주소지로 검색(광진구 광나루로 480 (구의동))\nex) 광진구, 구의동, 광나루로'
+
+export const SECRET_EXPLANATION =
+  '공개 시, 더 많은 사람들이 당신의 따뜻한 마음을 보고 공감할 수 있으며,\n특별한 메시지는 다양한 채널을 통해 소개될 수도 있습니다.\n비공개로 설정하면, 나만의 소중한 기록으로 남길 수 있어요.'

src/containers/Share/Onboarding.tsx

@@ -1,22 +1,59 @@
 import Header from '@/components/Header'
 import useEmblaCarousel from 'embla-carousel-react'
 import { twMerge } from 'tailwind-merge'
-import FirstSlide from './FirstSlide'
-import SecondSlide from './SecondSlide'
-import ThirdSlide from './ThirdSlide'
 import useAuthStore from '@/stores/authStore'
 import { useDotButton } from '@/hooks/useDotButton'
 import SolidButton from '@/components/SolidButton'
 import { shareLink } from '@/utils/shareLink'
 import { useEffect } from 'react'
 import { useQueryClient } from '@tanstack/react-query'
+import Slide from './Slide'
 
 export default function Onboarding() {
   const nickname = useAuthStore((state) => state.user)?.nickname ?? ''
   const [emblaRef, emblaApi] = useEmblaCarousel()
   const { selectedIndex, scrollSnaps, onDotButtonClick } = useDotButton(emblaApi)
   const queryClient = useQueryClient()
 
+  const SLIDE_DATA = [
+    {
+      title: `${nickname}님, 어두웠던 아파트를\n밝혀주셨어요`,
+      subtitle: '이제 가족, 친구들과 함께 더 많은 불빛을 켜볼까요?',
+      windowObj: { 0: nickname },
+    },
+    {
+      title: `공유하기 버튼을 눌러\n친구에게 초대 링크를 보내고`,
+      windowObj: { 0: nickname, 7: '내 친구', 9: '내 친구' },
+    },
+    {
+      title: `친구가 감사메시지를 남기면\n불빛이 켜져요`,
+      subtitle: '함께하는 사람마다 불빛이 하나씩 늘어날거에요',
+      windowObj: { 0: nickname, 7: '내 친구', 9: '내 친구', 2: '' },
+    },
+    {
+      title: `${nickname}님의 공유 한 번이\n이 도시를 빛나게 할거에요`,
+      subtitle: `익숙하지 않은 이름이 보여도 놀라지 마세요\n${nickname}님의 선한 영향력을 받은 분이에요`,
+      windowObj: {
+        0: nickname,
+        7: '내 친구',
+        9: '내 친구',
+        2: '',
+        8: '',
+      },
+    },
+    {
+      title: `자, 이제 친구들에게\n공유해볼까요?`,
+      windowObj: {
+        0: nickname,
+        7: '내 친구',
+        9: '내 친구',
+        2: '',
+        5: '',
+        8: '',
+      },
+    },
+  ]
+
   useEffect(() => {
     document.body.style.overflowY = 'hidden'
     return () => {
@@ -34,23 +71,33 @@ export default function Onboarding() {
   return (
     <>
       <Header className="bg-[#14192F]" prevPath="/" />
+      <div className="px-5">
+        <div className="h-[2px] w-full rounded-full bg-white/20">
+          <div
+            className="tras h-full rounded-full bg-brand-yellow transition-all duration-300 ease-out"
+            style={{ width: `calc(100% * (${selectedIndex} + 1) / ${SLIDE_DATA.length})` }}
+          />
+        </div>
+      </div>
       <main className="flex grow flex-col pt-[7%] text-center">
         <div className="absolute left-1/2 top-[10px] z-[-10] h-[350px] w-screen -translate-x-1/2 bg-star-top bg-cover bg-center" />
         <div className="absolute left-1/2 top-[325px] z-[-10] h-[390px] w-screen -translate-x-1/2 bg-star-bottom bg-cover bg-center" />
         <section className="flex w-full grow flex-col">
           <div className="flex grow flex-col overflow-hidden" ref={emblaRef}>
             <div className="flex grow touch-pan-y touch-pinch-zoom">
-              <FirstSlide nickname={nickname} />
-              <SecondSlide nickname={nickname} />
-              <ThirdSlide nickname={nickname} />
+              {SLIDE_DATA.map(({ title, subtitle, windowObj }) => (
+                <Slide key={title} title={title} subtitle={subtitle} windowObj={windowObj} />
+              ))}
             </div>
           </div>
           <SolidButton
             variant="primary"
             size="large"
             className={twMerge(
               'fixed bottom-[5%] left-1/2 z-20 w-[175px] -translate-x-1/2 rounded-full px-[30px] py-4 drop-shadow-[0_15px_25px_rgba(0,0,0,0.35)] transition-opacity duration-300',
-              selectedIndex === 2 ? 'opacity-100' : 'pointer-events-none opacity-0'
+              selectedIndex === SLIDE_DATA.length - 1
+                ? 'opacity-100'
+                : 'pointer-events-none opacity-0'
             )}
             onClick={() => {
               shareLink(nickname)

src/containers/Share/SecondSlide.tsx

@@ -2,29 +2,27 @@ import { BUILDING_WINDOW } from '@/constants/window'
 import BuildingWindow from '@/containers/Share/BuildingWindow'
 import { chunkWindow } from '@/utils/chunkWindow'
 
-interface FirstSlideProps {
-  nickname: string
+interface SlideProps {
+  title: string
+  subtitle?: string
+  windowObj: Record<number, string | undefined>
 }
 
-export default function FirstSlide({ nickname }: FirstSlideProps) {
+export default function Slide({ title, subtitle, windowObj }: SlideProps) {
   return (
     <div className="relative flex w-full shrink-0 flex-col items-center">
-      <div className="h-[144px]">
-        <h1 className="headline-small w-sm:text-[20px] mb-5 text-center text-white">
-          {nickname}님, 어두웠던 아파트를
-          <br />
-          밝혀주셨어요.
-        </h1>
-        <p className="title-small text-neutral-30">하지만 아직 많이 어두운 것 같아요.</p>
+      <div className="mb-7 flex h-[120px] flex-col gap-3 whitespace-pre-wrap">
+        <h1 className="headline-small text-center text-white w-sm:text-[20px]">{title}</h1>
+        <p className="title-small text-neutral-30">{subtitle}</p>
       </div>
-      <div className="absolute top-[160px] z-[-10] h-[151px] w-[150px] rounded-full bg-[#C4EF66] blur-[77px]" />
+      <div className="absolute top-[170px] z-[-10] h-[151px] w-[150px] rounded-full bg-[#C4EF66] blur-[77px]" />
       <section className="w-full max-w-[375px] grow overflow-hidden bg-[#262831] pb-24">
         <div className="roof-background mt-[-7px] h-[29px]" />
         <div className="h-3 w-full bg-[#3E3E42]" />
         <div className="flex flex-col gap-3 px-10 pt-7">
           {chunkWindow(
             BUILDING_WINDOW.slice(0, 12).map((window, index) => (
-              <BuildingWindow key={index} imgSrc={window} name={index === 0 ? nickname : null} />
+              <BuildingWindow key={index} imgSrc={window} name={windowObj[index] ?? null} />
             ))
           ).map((row, index) => (
             <div key={index} className="flex justify-between">

src/containers/Share/FirstSlide.tsx src/containers/Share/Slide.tsxsrc/containers/Share/FirstSlide.tsx renamed to src/containers/Share/Slide.tsx

@@ -42,7 +42,9 @@ export default function ShareLink() {
         <section className="mt-1 h-[76px] text-center text-white">
           <p className="title-large mb-2">친구들에게 공유하러 가요</p>
           <p className="body-medium whitespace-pre-wrap text-center">
-            다른 친구들에게 공유해 거리를 환하게 밝혀주세요
+            다른 친구들에게 초대링크를 보내고
+            <br />
+            함께 거리를 환하게 밝혀주세요
           </p>
         </section>
         <section className="flex w-full flex-col gap-3">

src/containers/Share/ThirdSlide.tsx

@@ -24,7 +24,7 @@ export default function MessagesCollection() {
       )}
       <div className="grow">
         <h2 className="body-large my-5 text-neutral-30">
-          다른 사람이 작성한 감사 메시지를
+          다른 사람들이 작성한 감사 메시지를
           <br />
           참고해 작성해보세요!
         </h2>