Neighbors-dev · AAminha · Jan 14, 2025 · Jan 13, 2025 · Jan 13, 2025 · Jan 14, 2025
diff --git a/index.html b/index.html
@@ -5,6 +5,13 @@
     <link rel="icon" type="image/svg+xml" href="/vite.svg" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Vite + React + TS</title>
+    <link
+      rel="stylesheet"
+      as="style"
+      crossorigin
+      href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.min.css"
+    />
+    <link rel="preload" href="/src/assets/images/lamp.png" as="image" />
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/assets/images/envelope.png b/src/assets/images/envelope.png
diff --git a/src/assets/images/lamp.png b/src/assets/images/lamp.png
diff --git a/src/assets/images/light.png b/src/assets/images/light.png
diff --git a/src/containers/Main/Header.tsx b/src/containers/Main/Header.tsx
@@ -6,11 +6,13 @@ interface HeaderProps {
 
 export default function Header({ onClick }: HeaderProps) {
   return (
-    <header className="max-w-600 fixed left-1/2 top-0 z-40 mb-1 flex -translate-x-1/2 items-center justify-between bg-[#14192F] px-5 py-3">
-      <h1 className="text-white">로고</h1>
-      <button type="button" onClick={onClick}>
-        <HamburgerIcon className="h-6 w-6 text-white" />
-      </button>
-    </header>
+    <div className="fixed left-0 top-0 z-40 mb-1 w-full bg-[#14192F]">
+      <header className="max-w-600 flex items-center justify-between px-5 py-3">
+        <h1 className="text-white">로고</h1>
+        <button type="button" onClick={onClick}>
+          <HamburgerIcon className="h-6 w-6 text-white" />
+        </button>
+      </header>
+    </div>
   )
 }
diff --git a/src/containers/Register/NicknameComplete.tsx b/src/containers/Register/NicknameComplete.tsx
@@ -1,6 +1,6 @@
 import Header from '@/components/Header'
 import SolidButton from '@/components/SolidButton'
-import LampImage from '@/assets/images/lamp.png'
+import LampImagePng from '@/assets/images/lamp.png'
 
 interface NicknameCompleteProps {
   nickname: string
@@ -16,12 +16,12 @@ export default function NicknameComplete({
   return (
     <>
       <Header onClick={prevButtonOnclick} />
-      <main className="content-padding flex w-full grow flex-col items-center justify-between">
+      <main className="content-padding flex w-full grow flex-col items-center justify-between gap-10">
         <section className="w-full text-center">
           <h2 className="headline-small mb-4 text-white">반가워요, {nickname} 님!</h2>
           <h3 className="body-large text-neutral-30">메시지를 작성해 거리를 환하게 밝혀주세요</h3>
         </section>
-        <img src={LampImage} alt="램프 이미지" className="h-auto w-[177px]" />
+        <img src={LampImagePng} alt="램프 이미지" />
         <SolidButton
           variant="primary"
           size="large"

diff --git a/src/containers/Register/WriteNickname.tsx b/src/containers/Register/WriteNickname.tsx
@@ -19,8 +19,6 @@ export default function WriteNickname({ nextButtonOnClick }: WriteNicknameProps)
     if (currentValue.length > MAX_NICKNAME_LENGTH)
       currentValue = currentValue.slice(0, MAX_NICKNAME_LENGTH)
     setNickname(currentValue)
-
-    console.log(currentValue)
   }
 
   const handleSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
@@ -45,7 +43,10 @@ export default function WriteNickname({ nextButtonOnClick }: WriteNicknameProps)
 
   return (
     <main className="content-padding flex grow flex-col">
-      <form className="flex h-full w-full grow flex-col justify-between" onSubmit={handleSubmit}>
+      <form
+        className="flex h-full w-full grow flex-col justify-between gap-10"
+        onSubmit={handleSubmit}
+      >
         <section>
           <h1 className="headline-small mb-12 text-white">
             메시지 작성 전<br />

diff --git a/src/containers/Write/BottomSheet/WriteFinish.tsx b/src/containers/Write/BottomSheet/WriteFinish.tsx
@@ -56,11 +56,7 @@ export default function WriteFinish() {
             <CancelIcon />
           </button>
         )}
-        {isShareVisible ? (
-          <img src={Light} alt="가로등 아이콘" className="h-auto w-[102px]" />
-        ) : (
-          <img src={Envelope} alt="편지 아이콘" className="h-auto w-[102px]" />
-        )}
+        <img src={isShareVisible ? Light : Envelope} alt="아이콘" className="h-auto w-[102px]" />
         <section className="mt-1 h-[76px] text-center text-white">
           <p className="title-large mb-2">{title}</p>
           <p className="body-medium whitespace-pre-wrap text-center">{body}</p>

diff --git a/src/containers/Write/Funnel/SelectTarget.tsx b/src/containers/Write/Funnel/SelectTarget.tsx
@@ -1,5 +1,5 @@
-import OutlinedButton from '@/components/OutlinedButton'
-import SolidButton from '@/components/SolidButton'
+import OutlinedButton from '@/components/OutlinedButton';
+import SolidButton from '@/components/SolidButton';
 
 interface SelectTargetProps {
   buttonList: { text: string; value: string }[]
@@ -15,7 +15,7 @@ export default function SelectTarget({
   onClickNextStep,
 }: SelectTargetProps) {
   return (
-    <div className="flex grow flex-col justify-between">
+    <div className="flex grow flex-col justify-between gap-10">
       <section>
         <h2 className="headline-small mb-4 text-white">
           경찰관, 소방관 분들에게

diff --git a/src/containers/Write/Funnel/WriteMessage.tsx b/src/containers/Write/Funnel/WriteMessage.tsx
@@ -36,7 +36,7 @@ export default function WriteMessage() {
   }
 
   return (
-    <div className="flex grow flex-col justify-between">
+    <div className="flex grow flex-col justify-between gap-10">
       <section>
         <h2 className="headline-small mb-2 text-white">
           감사의 메시지를

diff --git a/src/containers/Write/Funnel/WriteTargetInfo.tsx b/src/containers/Write/Funnel/WriteTargetInfo.tsx
@@ -26,7 +26,7 @@ export default function WriteTargetInfo({ onSearch, onClickNextStep }: WriteTarg
   }
 
   return (
-    <div className="flex grow flex-col justify-between">
+    <div className="flex grow flex-col justify-between gap-10">
       <section className="">
         <div className="mb-8 flex flex-col gap-4">
           <h2 className="headline-small text-white">

diff --git a/src/layouts/NonRegisteredRoute.tsx b/src/layouts/NonRegisteredRoute.tsx
@@ -1,13 +1,18 @@
 import useAuthStore from '@/stores/authStore'
-import { Navigate, Outlet } from 'react-router-dom'
+import { useEffect } from 'react'
+import { Outlet, useNavigate } from 'react-router-dom'
 
 export default function NonRegisteredRoute() {
   const isLoggedIn = useAuthStore((state) => state.isLoggedIn)
   const user = useAuthStore((state) => state.user)
+  const navigate = useNavigate()
 
-  if (isLoggedIn && user?.nickname) {
-    return <Navigate to="/" replace />
-  }
+  useEffect(() => {
+    console.log('teststest')
+    if (isLoggedIn && user?.nickname) {
+      navigate('/', { replace: true })
+    }
+  }, [])
 
   return <Outlet />
 }
diff --git a/src/pages/EditSetting.tsx b/src/pages/EditSetting.tsx
@@ -27,7 +27,7 @@ export default function EditSetting() {
     <>
       <Header title="닉네임 변경" />
       <main className="content-padding flex grow flex-col">
-        <form className="flex w-full grow flex-col justify-between" onSubmit={handleSubmit}>
+        <form className="flex w-full grow flex-col justify-between gap-10" onSubmit={handleSubmit}>
           <fieldset className="flex flex-col gap-1">
             <label className="title-small text-white">닉네임</label>
             <TextField

diff --git a/src/pages/Withdraw.tsx b/src/pages/Withdraw.tsx
@@ -57,7 +57,7 @@ export default function Withdraw() {
   return (
     <>
       <Header title="탈퇴하기" />
-      <main className="content-padding flex grow flex-col justify-between">
+      <main className="content-padding flex grow flex-col justify-between gap-10">
         <section>
           <div className="text-white">
             <p className="label-large mb-1">탈퇴 후, 계정 복구는 불가능해요 🥺</p>
@@ -66,7 +66,7 @@ export default function Withdraw() {
           <Dropdown
             options={WITHDRAW_OPTIONS}
             selected={selected}
-            className="h-sm:my-2 my-5"
+            className="my-5 h-sm:my-2"
             handleSelected={handleSelected}
           />
           <TextareaField

diff --git a/src/pages/Write.tsx b/src/pages/Write.tsx
@@ -14,13 +14,26 @@ import SelectIsSpecific from '@/containers/Write/Funnel/SelectIsSpecific'
 import SelectHeroType from '@/containers/Write/Funnel/SelectHeroType'
 import CollectionIntro from '@/containers/Write/BottomSheet/CollectionIntro'
 import WriteFinish from '@/containers/Write/BottomSheet/WriteFinish'
+import { useNavigate } from 'react-router-dom'
+import useWriteBottomStore from '@/stores/writeBottomStore'
 
 export default function Write() {
   const { Funnel, Step, setPrevStep, setNextStep, currentStep } = useFunnel(WRITE_STEPS[0])
   const targetType = useWriteMessageStore((state) => state.targetType)
   const clearTargetType = useWriteMessageStore((state) => state.clearTargetType)
+  const preventShow = useWriteBottomStore((state) => state.preventShow)
+  const navigate = useNavigate()
   useBodyBackgroundColor('neutral-90')
 
+  const handlePrevStep = () => {
+    preventShow()
+    if (currentStep === WRITE_STEPS[0]) {
+      navigate(-1)
+    } else {
+      setPrevStep()
+    }
+  }
+
   useEffect(() => {
     clearTargetType()
   }, [])
@@ -31,7 +44,7 @@ export default function Write() {
         title={HEADER_TITLE[currentStep]}
         className="bg-neutral-90"
         icons={currentStep === WRITE_STEPS[4] && <WriteMessageHeader setNextStep={setNextStep} />}
-        onClick={setPrevStep}
+        onClick={handlePrevStep}
       />
       <CollectionIntro />
       <WriteFinish />

diff --git a/src/stores/writeBottomStore.ts b/src/stores/writeBottomStore.ts
@@ -10,6 +10,7 @@ interface WriteBottomAction {
   toggleCollectionIntro: () => void
   toggleWriteFinish: () => void
   toggleShareVisible: () => void
+  preventShow: () => void
 }
 
 const useWriteBottomStore = create<WriteBottomState & WriteBottomAction>((set) => ({
@@ -20,6 +21,8 @@ const useWriteBottomStore = create<WriteBottomState & WriteBottomAction>((set) =
     set((state) => ({ showCollectionIntro: !state.showCollectionIntro })),
   toggleWriteFinish: () => set((state) => ({ showWriteFinish: !state.showWriteFinish })),
   toggleShareVisible: () => set((state) => ({ isShareVisible: !state.isShareVisible })),
+  preventShow: () =>
+    set({ showCollectionIntro: false, showWriteFinish: false, isShareVisible: false }),
 }))
 
 export default useWriteBottomStore
diff --git a/src/styles/tailwind.css b/src/styles/tailwind.css
@@ -1,4 +1,3 @@
-@import url('https://cdn.jsdelivr.net/gh/fonts-archive/Pretendard/Pretendard.css');
 @tailwind base;
 @tailwind components;
 @tailwind utilities;