From 23615688e4f569e97c590c430175791e9c6e756a Mon Sep 17 00:00:00 2001
From: k-wisdom <bnm1354@gmail.com>
Date: Mon, 3 Jun 2024 00:20:54 +0900
Subject: [PATCH 01/14] [Design] Add Form mobile responsive

---
 src/app/(auth)/(pages)/signin/page.tsx        |  4 +-
 src/app/(auth)/(pages)/signup/page.tsx        |  4 +-
 src/app/(auth)/(pages)/terms/page.tsx         | 19 +++++-
 .../components/common/ButtonInInput.tsx       |  2 +-
 .../(auth)/components/common/Container.tsx    |  2 +-
 .../(auth)/components/common/RoundedFrame.tsx |  2 +-
 .../components/common/TogglePassword.tsx      |  2 +-
 src/app/(auth)/components/signin/Login.tsx    |  8 ++-
 .../components/signin/LoginCheckbox.tsx       |  2 +-
 .../(auth)/components/signup/EmailInput.tsx   |  4 +-
 .../(auth)/components/signup/SignupForm.tsx   |  7 +-
 src/app/(auth)/components/terms/ArrowBtn.tsx  |  4 +-
 .../(auth)/components/terms/TermToggleBox.tsx |  6 +-
 src/app/(auth)/components/terms/Terms.tsx     | 65 +++++++------------
 .../(auth)/components/terms/TermsContent.tsx  | 13 ++--
 .../common/components/form/BlueSquareBtn.tsx  |  2 +-
 src/app/common/components/form/CheckBox.tsx   |  4 +-
 src/app/common/components/form/Input.tsx      |  5 +-
 src/app/common/components/form/InputBox.tsx   |  8 +--
 .../common/components/form/MobileBackBtn.tsx  |  9 +++
 .../common/components/form/RadioButton.tsx    |  2 +-
 .../components/form/RoundedCheckbox.tsx       |  8 +--
 src/app/common/components/icons/Check.tsx     |  1 +
 src/app/common/components/icons/Eyes.tsx      |  2 +
 24 files changed, 104 insertions(+), 81 deletions(-)
 create mode 100644 src/app/common/components/form/MobileBackBtn.tsx

diff --git a/src/app/(auth)/(pages)/signin/page.tsx b/src/app/(auth)/(pages)/signin/page.tsx
index d6a0b28..c5a232d 100644
--- a/src/app/(auth)/(pages)/signin/page.tsx
+++ b/src/app/(auth)/(pages)/signin/page.tsx
@@ -23,7 +23,7 @@ export default async function SignInpage({
           기업 회원가입
         </Link>
         <Link
-          className={`mt-[1rem] mb-[1rem] ${BlueBorderLink}`}
+          className={`mt-[1rem] mb-[1rem] ${BlueBorderLink} max-md:mb-[0.5rem]`}
           href={'/terms'}
         >
           개인 회원가입
@@ -33,4 +33,4 @@ export default async function SignInpage({
   );
 }
 
-const BlueBorderLink = `block w-full h-[3.875rem] border-[1.5px] border-solid border-blue-400 rounded-[0.5rem] text-main-black text-[1.25rem] font-bold text-center leading-[3.875rem]`;
+const BlueBorderLink = `block w-full h-[3.875rem] border-[1.5px] border-solid border-blue-400 rounded-[0.5rem] text-main-black text-[1.25rem] font-bold text-center leading-[3.875rem] max-md:h-[2.75rem] max-md:leading-[2.75rem] max-md:rounded-[0.5rem] max-md:text-[1rem] max-md:border-[1px]`;
diff --git a/src/app/(auth)/(pages)/signup/page.tsx b/src/app/(auth)/(pages)/signup/page.tsx
index 525cfd8..baaa30e 100644
--- a/src/app/(auth)/(pages)/signup/page.tsx
+++ b/src/app/(auth)/(pages)/signup/page.tsx
@@ -13,8 +13,8 @@ export default function SignupPage({ searchParams: { type } }: Props) {
   return (
     <Container>
       <RoundedFrame>
-        <h2 className="mb-[2.5rem] text-center text-[1.5rem] font-bold">
-          {!type ? '회원가입' : '기업 회원가입'}
+        <h2 className="mb-[2.5rem] text-center text-[1.5rem] font-bold leading-none max-md:mb-[2.08rem] max-md:text-[1.25rem]">
+          {!type ? '개인 회원가입' : '기업 회원가입'}
         </h2>
         <SignupForm type={type} />
       </RoundedFrame>
diff --git a/src/app/(auth)/(pages)/terms/page.tsx b/src/app/(auth)/(pages)/terms/page.tsx
index a77cac3..af94d19 100644
--- a/src/app/(auth)/(pages)/terms/page.tsx
+++ b/src/app/(auth)/(pages)/terms/page.tsx
@@ -1,4 +1,7 @@
 import Terms from '@/app/(auth)/components/terms/Terms';
+import { Suspense } from 'react';
+import RoundedFrame from '@/app/(auth)/components/common/RoundedFrame';
+import Container from '@/app/(auth)/components/common/Container';
 
 // 임시로 넣음
 const OPTIONAL_TERMS = [
@@ -15,6 +18,20 @@ const REQUIRED_TERMS = [
 
 export default function TermsPage() {
   return (
-    <Terms optionalTerms={OPTIONAL_TERMS} requiredTerms={REQUIRED_TERMS} />
+    <Container>
+      <RoundedFrame>
+        <div className="px-[1rem] max-md:px-0">
+          <h2 className="mb-[5rem] text-center text-[1.5rem] font-bold leading-none max-md:mb-[2.08rem] max-md:text-[1.25rem]">
+            회원가입
+          </h2>
+          <Suspense>
+            <Terms
+              optionalTerms={OPTIONAL_TERMS}
+              requiredTerms={REQUIRED_TERMS}
+            />
+          </Suspense>
+        </div>
+      </RoundedFrame>
+    </Container>
   );
 }
diff --git a/src/app/(auth)/components/common/ButtonInInput.tsx b/src/app/(auth)/components/common/ButtonInInput.tsx
index 1f30472..c293b33 100644
--- a/src/app/(auth)/components/common/ButtonInInput.tsx
+++ b/src/app/(auth)/components/common/ButtonInInput.tsx
@@ -8,7 +8,7 @@ export default function ButtonInInput({ text, disabled, onClick }: Props) {
     <button
       type="button"
       disabled={disabled}
-      className="absolute right-[1.5rem] top-1/2 -translate-y-1/2 px-[0.72rem] min-w-[4.5rem] h-[2.125rem] bg-blue-400 disabled:bg-[#d0d0d8] rounded-[0.25rem] text-white disabled:text-main-black text-[0.875rem] font-bold"
+      className="absolute right-[1.5rem] top-1/2 -translate-y-1/2 px-[0.72rem] min-w-[4.5rem] h-[2.125rem] bg-blue-400 disabled:bg-[#d0d0d8] rounded-[0.25rem] text-white disabled:text-main-black text-[0.875rem] font-bold max-md:right-[1rem] max-md:px-[0.5rem] max-md:min-w-[4.0625rem] max-md:h-[2.125rem] max-md:text-[0.875rem]"
       onClick={onClick}
     >
       {text}
diff --git a/src/app/(auth)/components/common/Container.tsx b/src/app/(auth)/components/common/Container.tsx
index a5427b3..426d58a 100644
--- a/src/app/(auth)/components/common/Container.tsx
+++ b/src/app/(auth)/components/common/Container.tsx
@@ -4,7 +4,7 @@ interface Props {
 
 export default function Container({ children }: Props) {
   return (
-    <div className="flex items-center justify-center min-w-[100vw] min-h-[100vh] p-[3.19rem] pt-[10rem]  bg-blue-100 box-border">
+    <div className="flex items-center justify-center min-w-[100vw] min-h-[100vh] p-[3.19rem] pt-[10rem]  bg-blue-100 box-border max-md:p-[1.25rem] max-md:pt-[4.875rem]">
       {children}
     </div>
   );
diff --git a/src/app/(auth)/components/common/RoundedFrame.tsx b/src/app/(auth)/components/common/RoundedFrame.tsx
index bcb98e0..7ddb57c 100644
--- a/src/app/(auth)/components/common/RoundedFrame.tsx
+++ b/src/app/(auth)/components/common/RoundedFrame.tsx
@@ -4,7 +4,7 @@ interface Props {
 
 export default function RoundedFrame({ children }: Props) {
   return (
-    <div className="max-w-[46.75rem] w-full p-10 box-border rounded-3xl bg-blue-50 shrink-0">
+    <div className="max-w-[46.75rem] w-full p-10 box-border rounded-3xl bg-blue-50 shrink-0 max-md:max-w-[25rem] max-md:p-[1rem] max-md:pt-[1.5rem] max-md:rounded-[1rem]">
       {children}
     </div>
   );
diff --git a/src/app/(auth)/components/common/TogglePassword.tsx b/src/app/(auth)/components/common/TogglePassword.tsx
index 69a318f..4919ab5 100644
--- a/src/app/(auth)/components/common/TogglePassword.tsx
+++ b/src/app/(auth)/components/common/TogglePassword.tsx
@@ -35,7 +35,7 @@ export default function TogglePassword({
       <button
         type="button"
         onClick={pwToggleFn}
-        className="absolute right-[1.5rem] top-1/2 -translate-y-1/2"
+        className="absolute right-[1.5rem] top-1/2 -translate-y-1/2 max-md:w-[1.5rem] max-md:h-[1.5rem] max-md:right-[1rem]"
       >
         {showPassword ? <EyesOn /> : <EyesOff />}
       </button>
diff --git a/src/app/(auth)/components/signin/Login.tsx b/src/app/(auth)/components/signin/Login.tsx
index 660280c..31c2e80 100644
--- a/src/app/(auth)/components/signin/Login.tsx
+++ b/src/app/(auth)/components/signin/Login.tsx
@@ -73,7 +73,7 @@ export default function Login({ callbackUrl }: { callbackUrl: string }) {
 
   return (
     <div>
-      <h2 className="mb-[2.5rem] text-center text-[1.75rem] font-bold leading-[2.375rem]">
+      <h2 className="mb-[2.5rem] text-center text-[1.75rem] font-bold leading-0 max-md:text-[1.25rem]">
         로그인
       </h2>
       <form onSubmit={handleSubmit(onSubmit)}>
@@ -109,14 +109,16 @@ export default function Login({ callbackUrl }: { callbackUrl: string }) {
           <div>
             <Link
               href="/"
-              className="inline-block -mt-[1.25rem] mb-[3.75rem] underline text-[0.875rem] font-bold leading-none text-[#8d8d9b]"
+              className="inline-block -mt-[1.25rem] mb-[3.75rem] underline text-[0.875rem] font-bold leading-none text-[#8d8d9b]
+              max-md:mb-[2.5rem] max-md:-mt-[0.25rem] max-md:text-[0.75rem]
+              "
             >
               비밀번호를 잊으셨나요?
             </Link>
           </div>
           <LoginCheckbox register={register}>로그인 상태 유지</LoginCheckbox>
         </div>
-        <div className="mt-[1.5rem]">
+        <div className="mt-[1.5rem] max-md:mt-[0.6rem]">
           <BlueSquareBtn
             name="로그인"
             type="submit"
diff --git a/src/app/(auth)/components/signin/LoginCheckbox.tsx b/src/app/(auth)/components/signin/LoginCheckbox.tsx
index ffc507f..75d6a3d 100644
--- a/src/app/(auth)/components/signin/LoginCheckbox.tsx
+++ b/src/app/(auth)/components/signin/LoginCheckbox.tsx
@@ -10,7 +10,7 @@ interface Props {
 const LoginCheckbox = ({ children, register }: Props) => {
   return (
     <>
-      <label className="inline-flex items-center">
+      <label className="inline-flex items-center max-md:text-[0.875rem]">
         <input
           type="checkbox"
           className="peer hide"
diff --git a/src/app/(auth)/components/signup/EmailInput.tsx b/src/app/(auth)/components/signup/EmailInput.tsx
index 1e02e56..d526434 100644
--- a/src/app/(auth)/components/signup/EmailInput.tsx
+++ b/src/app/(auth)/components/signup/EmailInput.tsx
@@ -111,8 +111,8 @@ export default function EmailInput({
         isVerify
           ? '인증이 완료되었습니다.'
           : '' || isLoading
-          ? '잠시만 기다려 주세요.'
-          : ''
+            ? '잠시만 기다려 주세요.'
+            : ''
       }
     >
       <span className="block relative">
diff --git a/src/app/(auth)/components/signup/SignupForm.tsx b/src/app/(auth)/components/signup/SignupForm.tsx
index 0b8e7cd..44e3c37 100644
--- a/src/app/(auth)/components/signup/SignupForm.tsx
+++ b/src/app/(auth)/components/signup/SignupForm.tsx
@@ -170,7 +170,7 @@ export default function SignupForm({ type }: Props) {
         />
 
         <InputBox text="산업군" errorMsg={errors.industry?.message}>
-          <div className="flex flex-wrap gap-[1rem] my-[1rem]">
+          <div className="flex flex-wrap gap-[1rem] my-[1rem] max-md:gap-[0.55rem] max-md:[&_label]:min-w-[calc((100%_-_1.65rem)/4)] max-[290px]:[&_label]:min-w-[calc((100%_-_1.65rem)/3)]">
             {industryList.map((item: string, index: number) => (
               <RadioButton
                 key={index}
@@ -184,8 +184,9 @@ export default function SignupForm({ type }: Props) {
             ))}
           </div>
         </InputBox>
+
         <InputBox text="직무" errorMsg={errors.occupation?.message}>
-          <div className="flex flex-wrap gap-[1rem] my-[1rem]">
+          <div className="flex flex-wrap gap-[1rem] my-[1rem] max-md:gap-[0.55rem] max-md:[&_label]:min-w-[calc((100%_-_1.65rem)/4)] max-[290px]:[&_label]:min-w-[calc((100%_-_1.65rem)/3)]">
             {occupationList.map((item: string, index: number) => (
               <RadioButton
                 key={index}
@@ -201,7 +202,7 @@ export default function SignupForm({ type }: Props) {
         </InputBox>
 
         <BlueSquareBtn
-          classname="mt-[5rem]"
+          classname="mt-[5rem] max-md:mt-[1.5rem]"
           name="가입 완료"
           type="submit"
           disabled={!isDirty || !isValid}
diff --git a/src/app/(auth)/components/terms/ArrowBtn.tsx b/src/app/(auth)/components/terms/ArrowBtn.tsx
index b4b85f7..78a4e47 100644
--- a/src/app/(auth)/components/terms/ArrowBtn.tsx
+++ b/src/app/(auth)/components/terms/ArrowBtn.tsx
@@ -8,7 +8,7 @@ export default function ArrowBtn({ handleClick, isActive }: Props) {
     <button
       type="button"
       onClick={handleClick}
-      className="w-[1.5rem] h-[1.5rem]"
+      className="w-[1.5rem] h-[1.5rem] max-md:w-[1rem] max-md:h-[1rem]"
     >
       <svg
         xmlns="http://www.w3.org/2000/svg"
@@ -16,7 +16,7 @@ export default function ArrowBtn({ handleClick, isActive }: Props) {
         height="24"
         viewBox="0 0 24 24"
         fill="none"
-        className={`transition-all ${isActive ? 'rotate-180' : ''} `}
+        className={`transition-all ${isActive ? 'rotate-180' : ''} w-full h-full`}
       >
         <path d="M4 8L12 16L20 8" stroke="#B9B9C3" strokeWidth="1.5" />
       </svg>
diff --git a/src/app/(auth)/components/terms/TermToggleBox.tsx b/src/app/(auth)/components/terms/TermToggleBox.tsx
index 287821f..186f7fb 100644
--- a/src/app/(auth)/components/terms/TermToggleBox.tsx
+++ b/src/app/(auth)/components/terms/TermToggleBox.tsx
@@ -27,15 +27,15 @@ export default function TermToggleBox({
     setShowDetail(!showDetail);
   };
   return (
-    <div className="mb-[1rem]">
-      <div className="flex justify-between items-center">
+    <div className="mb-[1rem] max-md:mb-[0.5rem]">
+      <div className="flex justify-between items-center max-md:text-[0.729rem]">
         <Checkbox onChange={onChange} name={id} isChecked={isChecked}>
           <span>{name}</span>
         </Checkbox>
         <ArrowBtn handleClick={handleClick} isActive={showDetail} />
       </div>
       {showDetail && (
-        <div className="overflow-y-auto mt-3 mb-5 p-[1.5rem] h-[10rem] rounded-[1.2rem] bg-white whitespace-pre-line">
+        <div className="overflow-y-auto mt-3 mb-5 p-[1.5rem] h-[10rem] rounded-[1.2rem] bg-white whitespace-pre-line max-md:mt-2 max-md:mb-3 max-md:p-[0.875rem] max-md:h-[10rem]">
           {detail}
         </div>
       )}
diff --git a/src/app/(auth)/components/terms/Terms.tsx b/src/app/(auth)/components/terms/Terms.tsx
index deedec3..0ac6ce3 100644
--- a/src/app/(auth)/components/terms/Terms.tsx
+++ b/src/app/(auth)/components/terms/Terms.tsx
@@ -2,8 +2,6 @@
 import { FormEvent, useCallback, useState } from 'react';
 import { useRouter, useSearchParams } from 'next/navigation';
 import BlueSquareBtn from '@common/components/form/BlueSquareBtn';
-import Container from '@/app/(auth)/components/common/Container';
-import RoundedFrame from '@/app/(auth)/components/common/RoundedFrame';
 import TermsContent from './TermsContent';
 
 interface Props {
@@ -46,44 +44,31 @@ export default function Terms({ requiredTerms, optionalTerms }: Props) {
   );
 
   return (
-    <Container>
-      <RoundedFrame>
-        <div className="px-[1rem]">
-          <h2 className="mb-[5rem] text-center text-[1.5rem] font-bold">
-            회원가입
-          </h2>
-          <form onSubmit={handleSubmit}>
-            <TermsContent
-              title="[필수] 전체동의"
-              data={requiredData}
-              type="toggle"
-              setData={setRequiredData}
-            />
+    <form onSubmit={handleSubmit}>
+      <TermsContent
+        title="[필수] 전체동의"
+        data={requiredData}
+        type="toggle"
+        setData={setRequiredData}
+      />
 
-            <div className="mt-[2.5rem] mb-[6.38rem]">
-              <TermsContent
-                title="[선택] 혜택 및 마케팅 정보 수신 동의"
-                data={optionalData}
-                setData={setOptionalData}
-              />
-              <p className="-mt-[1rem] text-[1rem] text-gray-400 font-medium">
-                예약 및 결제 정보는 수신 동의 여부와 관계없이 발송됩니다.
-              </p>
-            </div>
-
-            <BlueSquareBtn
-              name="동의하고 가입하기"
-              type="submit"
-              disabled={
-                !(
-                  requiredData.filter((item) => item.isChecked !== true)
-                    .length < 1
-                )
-              }
-            />
-          </form>
-        </div>
-      </RoundedFrame>
-    </Container>
+      <div className="mt-[2.5rem] mb-[6.38rem] max-md:mt-[2.08rem] max-md:mb-[]">
+        <TermsContent
+          title="[선택] 혜택 및 마케팅 정보 수신 동의"
+          data={optionalData}
+          setData={setOptionalData}
+        />
+        <p className="-mt-[1rem] text-[1rem] text-gray-400 font-medium max-md:text-[0.75rem] max-md:leading-[150%] ">
+          예약 및 결제 정보는 수신 동의 여부와 관계없이 발송됩니다.
+        </p>
+      </div>
+      <BlueSquareBtn
+        name="동의하고 가입하기"
+        type="submit"
+        disabled={
+          !(requiredData.filter((item) => item.isChecked !== true).length < 1)
+        }
+      />
+    </form>
   );
 }
diff --git a/src/app/(auth)/components/terms/TermsContent.tsx b/src/app/(auth)/components/terms/TermsContent.tsx
index cf91dc7..a5405ee 100644
--- a/src/app/(auth)/components/terms/TermsContent.tsx
+++ b/src/app/(auth)/components/terms/TermsContent.tsx
@@ -48,14 +48,16 @@ export default memo(function TermsContent({
     }
   };
   return (
-    <div className="mb-[2rem]">
-      <div className="mb-[1.5rem]">
+    <div className="mb-[2rem] max-md:mb-[2rem]">
+      <div className="mb-[1.5rem] max-md:mb-[1rem]">
         <RoundedCheckbox
           name="all"
           onChange={handleChange}
           isChecked={data.filter((item) => item.isChecked !== true).length < 1}
         >
-          <b className="text-[1.25rem]">{title}</b>
+          <b className="inline-block text-[1.25rem] max-md:text-[0.875rem]">
+            {title}
+          </b>
         </RoundedCheckbox>
       </div>
 
@@ -71,7 +73,10 @@ export default memo(function TermsContent({
           );
         } else {
           return (
-            <div className="mb-[1rem]" key={term.id}>
+            <div
+              className="mb-[1rem] max-md:mb-[0.5rem] max-md:text-[0.729rem]"
+              key={term.id}
+            >
               <Checkbox
                 onChange={handleChange}
                 name={term.id}
diff --git a/src/app/common/components/form/BlueSquareBtn.tsx b/src/app/common/components/form/BlueSquareBtn.tsx
index c135313..83b87c0 100644
--- a/src/app/common/components/form/BlueSquareBtn.tsx
+++ b/src/app/common/components/form/BlueSquareBtn.tsx
@@ -17,7 +17,7 @@ export default function BlueSquareBtn({
     <button
       type={type}
       disabled={disabled}
-      className={`w-full h-[3.875rem] bg-blue-400 disabled:bg-[#d0d0d8] rounded-[0.5rem] text-white disabled:text-main-black text-[1.25rem] font-bold ${classname}`}
+      className={`w-full h-[3.875rem] bg-blue-400 disabled:bg-[#d0d0d8] rounded-[0.5rem] text-white disabled:text-main-black text-[1.25rem] font-bold ${classname} max-md:h-[2.75rem] max-md:rounded-[0.5rem] max-md:text-[1rem]`}
       onClick={onClick}
     >
       {name}
diff --git a/src/app/common/components/form/CheckBox.tsx b/src/app/common/components/form/CheckBox.tsx
index 04178d5..2086311 100644
--- a/src/app/common/components/form/CheckBox.tsx
+++ b/src/app/common/components/form/CheckBox.tsx
@@ -23,10 +23,10 @@ export default function Checkbox({
           name={name}
           checked={isChecked || false}
         />
-        <span className="peer-checked:inline-block hidden mr-[0.5rem]">
+        <span className="peer-checked:inline-block hidden mr-[0.5rem] max-md:w-[1.66rem] max-md:h-[1.66rem]">
           <Check color="#97BAFE" />
         </span>
-        <span className="peer-checked:hidden inline-block mr-[0.5rem]">
+        <span className="peer-checked:hidden inline-block mr-[0.5rem] max-md:w-[1.66rem] max-md:h-[1.66rem]">
           <Check />
         </span>
         {children}
diff --git a/src/app/common/components/form/Input.tsx b/src/app/common/components/form/Input.tsx
index 9ec71b9..0f45fa1 100644
--- a/src/app/common/components/form/Input.tsx
+++ b/src/app/common/components/form/Input.tsx
@@ -20,8 +20,9 @@ export default function Input({
 }: Props) {
   return (
     <input
-      className={`block px-[1.5rem] w-full h-[3.5rem] bg-white border-[1.5px] border-[#d0d0d8] box-border focus-visible:outline-none focus-visible:border-blue-500  autofill:border-white autofill:border-solid autofill:border-[2px] rounded-[0.5rem] text-[0.875rem] font-bold placeholder:text-[#a3a3af] my-[1rem] 
-        ${isError ? '!border-[#FF1000] border-[1.5px]' : ''}
+      className={`block my-[1rem] px-[1.5rem] w-full h-[3.5rem] bg-white border-[1.5px] border-[#d0d0d8] box-border focus-visible:outline-none focus-visible:border-blue-500  autofill:border-solid rounded-[0.5rem] text-[0.875rem] font-bold placeholder:text-[#a3a3af]  
+        max-md:mt-[1rem] max-md:mb-[0.5rem] max-md:px-[1rem] max-md:h-[3.5rem] max-md:text-[0.75rem] max-md:font-normal max-md:border-[1px]
+        ${isError ? '!border-[#FF1000] border-[1.5px] max-md:border-[1px]' : ''}
       `}
       type={type}
       placeholder={placeholder}
diff --git a/src/app/common/components/form/InputBox.tsx b/src/app/common/components/form/InputBox.tsx
index f0b55a5..149b0a4 100644
--- a/src/app/common/components/form/InputBox.tsx
+++ b/src/app/common/components/form/InputBox.tsx
@@ -6,22 +6,22 @@ interface Props {
 }
 export default function InputBox({ children, text, errorMsg, msg }: Props) {
   return (
-    <div className="mb-[2.5rem]">
+    <div className="mb-[2.5rem] max-md:mb-[1.5rem] max-md:[&_>_i]:break-keep max-md:[&_>_i]:leading-[1.5]">
       <label
-        className={`block text-[1.25rem] font-bold  text-main-black leading-none`}
+        className={`block text-[1.25rem] font-bold  text-main-black leading-none max-md:text-[0.875rem]`}
       >
         {text}
         {children}
       </label>
       {errorMsg && (
         <i
-          className={`block text-[#ff513f] text-[0.875rem] not-italic leading-none`}
+          className={`block text-[#ff513f] text-[0.875rem] not-italic leading-none max-md:text-[0.75rem] max-md:px-[1rem]`}
         >
           {errorMsg}
         </i>
       )}
       {msg && (
-        <i className="block text-blue-600 text-[0.875rem] not-italic leading-none">
+        <i className="block text-blue-600 text-[0.875rem] not-italic leading-none max-md:text-[0.75rem] max-md:px-[1rem]">
           {msg}
         </i>
       )}
diff --git a/src/app/common/components/form/MobileBackBtn.tsx b/src/app/common/components/form/MobileBackBtn.tsx
new file mode 100644
index 0000000..0fa5d6a
--- /dev/null
+++ b/src/app/common/components/form/MobileBackBtn.tsx
@@ -0,0 +1,9 @@
+'use client';
+
+export default function MobileBackBtn() {
+  return (
+    <button>
+      <span className="hide">뒤로가기</span>
+    </button>
+  );
+}
diff --git a/src/app/common/components/form/RadioButton.tsx b/src/app/common/components/form/RadioButton.tsx
index f8e548a..faea7af 100644
--- a/src/app/common/components/form/RadioButton.tsx
+++ b/src/app/common/components/form/RadioButton.tsx
@@ -18,7 +18,7 @@ export default function RadioButton({
 }: Props) {
   return (
     <label
-      className={`${classname} flex-1 shrink-0 inline-block px-[0.32rem] min-w-[4.34375rem] h-[2.5rem] leading-[2.5rem] box-border bg-white has-[:checked]:bg-blue-400 border-[1px] border-[#D0D0Db] rounded-[0.5rem] text-center text-[0.875rem] has-[:checked]:text-white font-medium`}
+      className={`${classname} flex-1 shrink-0 inline-block px-[0.32rem] min-w-[4.34375rem] h-[2.5rem] leading-[2.5rem] box-border bg-white has-[:checked]:bg-blue-400 border-[1px] border-[#D0D0Db] rounded-[0.5rem] text-center text-[0.875rem] has-[:checked]:text-white font-medium max-md:text-[0.75rem] max-md:font-normal max-md:min-w-[4.0625rem]`}
     >
       <input
         type="radio"
diff --git a/src/app/common/components/form/RoundedCheckbox.tsx b/src/app/common/components/form/RoundedCheckbox.tsx
index 0746530..3e20d93 100644
--- a/src/app/common/components/form/RoundedCheckbox.tsx
+++ b/src/app/common/components/form/RoundedCheckbox.tsx
@@ -1,4 +1,4 @@
-import { ChangeEvent } from 'react';
+import React, { ChangeEvent } from 'react';
 import CircleWithCheck from '../icons/CircleWithCheck';
 
 interface Props {
@@ -15,7 +15,7 @@ export default function RoundedCheckbox({
 }: Props) {
   return (
     <>
-      <label className="inline-flex items-center">
+      <label className="inline-flex items-center [&_>_span]:mr-[0.5rem] [&_>_span]:w-[2rem] [&_>_span]:h-[2rem] [&_>_span]:max-md:mr-[1rem] [&_>_span]:max-md:w-[1.66rem] [&_>_span]:max-md:h-[1.66rem]">
         <input
           type="checkbox"
           className="peer hide"
@@ -23,10 +23,10 @@ export default function RoundedCheckbox({
           checked={isChecked}
           name={name}
         />
-        <span className="peer-checked:inline-block hidden mr-[0.5rem] w-[2rem] h-[2rem]">
+        <span className="peer-checked:inline-block hidden ">
           <CircleWithCheck fillColor="#688AF2" />
         </span>
-        <span className="peer-checked:hidden inline-block mr-[0.5rem] w-[2rem] h-[2rem]">
+        <span className="peer-checked:hidden inline-block">
           <CircleWithCheck />
         </span>
         {children}
diff --git a/src/app/common/components/icons/Check.tsx b/src/app/common/components/icons/Check.tsx
index 339e9d6..c412897 100644
--- a/src/app/common/components/icons/Check.tsx
+++ b/src/app/common/components/icons/Check.tsx
@@ -10,6 +10,7 @@ const Check = ({ color = '#B9B9C3' }: Props) => {
       height="32"
       viewBox="0 0 32 32"
       fill="none"
+      className="w-full h-full"
     >
       <path d="M8 15L14 21L24 11" stroke={color} strokeWidth="1.5" />
     </svg>
diff --git a/src/app/common/components/icons/Eyes.tsx b/src/app/common/components/icons/Eyes.tsx
index b19dac4..d685f6e 100644
--- a/src/app/common/components/icons/Eyes.tsx
+++ b/src/app/common/components/icons/Eyes.tsx
@@ -6,6 +6,7 @@ export const EyesOn = () => {
       height="32"
       viewBox="0 0 32 32"
       fill="none"
+      className="max-md:w-[1.5rem] max-md:h-[1.5rem]"
     >
       <circle cx="16" cy="16" r="5" stroke="#797986" strokeWidth="1.5" />
       <path
@@ -25,6 +26,7 @@ export const EyesOff = () => {
       height="32"
       viewBox="0 0 32 32"
       fill="none"
+      className="max-md:w-[1.5rem] max-md:h-[1.5rem]"
     >
       <path
         fillRule="evenodd"

From d2c811166ca6bad25eecf0c8d1a1c9ea88699c44 Mon Sep 17 00:00:00 2001
From: k-wisdom <bnm1354@gmail.com>
Date: Mon, 3 Jun 2024 01:07:50 +0900
Subject: [PATCH 02/14] [Feat] Add  Mobile back button

---
 src/app/(auth)/(pages)/signup/page.tsx        | 10 +++++---
 .../common/components/form/MobileBackBtn.tsx  | 23 +++++++++++++++++--
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/app/(auth)/(pages)/signup/page.tsx b/src/app/(auth)/(pages)/signup/page.tsx
index baaa30e..5900bc2 100644
--- a/src/app/(auth)/(pages)/signup/page.tsx
+++ b/src/app/(auth)/(pages)/signup/page.tsx
@@ -1,6 +1,7 @@
 import Container from '@/app/(auth)/components/common/Container';
 import RoundedFrame from '@/app/(auth)/components/common/RoundedFrame';
 import SignupForm from '@/app/(auth)/components/signup/SignupForm';
+import MobileBackBtn from '@/app/common/components/form/MobileBackBtn';
 
 interface Props {
   searchParams: {
@@ -13,9 +14,12 @@ export default function SignupPage({ searchParams: { type } }: Props) {
   return (
     <Container>
       <RoundedFrame>
-        <h2 className="mb-[2.5rem] text-center text-[1.5rem] font-bold leading-none max-md:mb-[2.08rem] max-md:text-[1.25rem]">
-          {!type ? '개인 회원가입' : '기업 회원가입'}
-        </h2>
+        <div className="relative">
+          <MobileBackBtn className="absolute left-0 -top-[0.3rem]" />
+          <h2 className="mb-[2.5rem] text-center text-[1.5rem] font-bold leading-none max-md:mb-[2.08rem] max-md:text-[1.25rem]">
+            {!type ? '개인 회원가입' : '기업 회원가입'}
+          </h2>
+        </div>
         <SignupForm type={type} />
       </RoundedFrame>
     </Container>
diff --git a/src/app/common/components/form/MobileBackBtn.tsx b/src/app/common/components/form/MobileBackBtn.tsx
index 0fa5d6a..872600b 100644
--- a/src/app/common/components/form/MobileBackBtn.tsx
+++ b/src/app/common/components/form/MobileBackBtn.tsx
@@ -1,9 +1,28 @@
 'use client';
 
-export default function MobileBackBtn() {
+import { useRouter } from 'next/navigation';
+
+export default function MobileBackBtn({ className }: { className: string }) {
+  const router = useRouter();
+  const handleClick = () => {
+    router.back();
+  };
   return (
-    <button>
+    <button
+      className={`max-md:block hidden w-[1.5rem] h-[1.5rem] ${className}`}
+      onClick={handleClick}
+    >
       <span className="hide">뒤로가기</span>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="24"
+        height="24"
+        viewBox="0 0 24 24"
+        fill="none"
+        className="inline-block"
+      >
+        <path d="M16 20L8 12L16 4" stroke="#171717" strokeWidth="1.5" />
+      </svg>
     </button>
   );
 }

From e30ce32f497142c438d8433384861821d55352ff Mon Sep 17 00:00:00 2001
From: k-wisdom <bnm1354@gmail.com>
Date: Mon, 3 Jun 2024 01:14:48 +0900
Subject: [PATCH 03/14] [Fix] authOptions

---
 src/app/api/auth/authOptions.ts | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/api/auth/authOptions.ts b/src/app/api/auth/authOptions.ts
index 36ff172..7a55009 100644
--- a/src/app/api/auth/authOptions.ts
+++ b/src/app/api/auth/authOptions.ts
@@ -67,7 +67,6 @@ export const authOptions: NextAuthOptions = {
   },
   jwt: {
     secret: process.env.JWT_SECRET,
-    maxAge: 60 * 60,
   },
   callbacks: {
     async jwt({ user, token }: any) {

From aa762bfd4a01ad43b8222b7f9ac86f05de164587 Mon Sep 17 00:00:00 2001
From: k-wisdom <bnm1354@gmail.com>
Date: Mon, 3 Jun 2024 01:46:25 +0900
Subject: [PATCH 04/14] [Fix] main home

---
 src/app/page.tsx | 16 +++-------------
 1 file changed, 3 insertions(+), 13 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 978195d..a2e918c 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,5 @@
 import type { Metadata } from 'next';
-import { getServerSession } from 'next-auth';
 import NoneLoginHome from './(home)/components/noneLogin/NoneLoginHome';
-import { authOptions } from './api/auth/authOptions';
 
 export const metadata: Metadata = {
   title: 'Linkup',
@@ -9,16 +7,8 @@ export const metadata: Metadata = {
 };
 
 export default async function Home() {
-  const session = await getServerSession(authOptions);
+  // const session = await getServerSession(authOptions);
 
-  if (!session) {
-    return <NoneLoginHome />;
-  } else {
-    return (
-      <>
-        <h1>main</h1>
-        {/* 임시 로그아웃버튼 */}
-      </>
-    );
-  }
+  //임시로 모든 사용자에게 보여줌
+  return <NoneLoginHome />;
 }

From f6a2f9c364460404a439e1b1b260b156827c01db Mon Sep 17 00:00:00 2001
From: k-wisdom <bnm1354@gmail.com>
Date: Mon, 3 Jun 2024 01:48:58 +0900
Subject: [PATCH 05/14] [Fix] Delete console.log

---
 src/app/(home)/components/noneLogin/FlipSwiper.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/src/app/(home)/components/noneLogin/FlipSwiper.tsx b/src/app/(home)/components/noneLogin/FlipSwiper.tsx
index c796756..d47f69b 100644
--- a/src/app/(home)/components/noneLogin/FlipSwiper.tsx
+++ b/src/app/(home)/components/noneLogin/FlipSwiper.tsx
@@ -26,7 +26,6 @@ export default function FlipSwiper() {
         spaceBetween={0}
         slidesPerView={'auto'}
         onSlideChange={handleChange}
-        onSwiper={(swiper) => console.log(swiper)}
         modules={[Autoplay]}
         breakpoints={{
           768: {

From 87878ce89ded26676355ae2afc23e4a916763055 Mon Sep 17 00:00:00 2001
From: moonyah <dltk456@naver.com>
Date: Mon, 3 Jun 2024 02:11:39 +0900
Subject: [PATCH 06/14] [Design] header mobile publishing

---
 src/app/common/header/Header.tsx     | 119 ++++++++++++---------------
 src/app/common/header/HeaderMenu.tsx |  41 +++++++++
 src/app/common/header/Profile.tsx    |  37 +++++++++
 src/styles/globals.css               |  17 ++--
 4 files changed, 139 insertions(+), 75 deletions(-)
 create mode 100644 src/app/common/header/HeaderMenu.tsx
 create mode 100644 src/app/common/header/Profile.tsx

diff --git a/src/app/common/header/Header.tsx b/src/app/common/header/Header.tsx
index aa602f9..b47e413 100644
--- a/src/app/common/header/Header.tsx
+++ b/src/app/common/header/Header.tsx
@@ -5,6 +5,8 @@ import { useSession } from 'next-auth/react';
 import { usePathname } from 'next/navigation';
 import ContentWrap from '@common/components/frame/ContentWrap';
 import HamburgerMenuModal from './HamburgerMenuModal';
+import HeaderMenu from './HeaderMenu';
+import Profile from './Profile';
 
 export default function Header() {
   const { data: session } = useSession();
@@ -15,89 +17,72 @@ export default function Header() {
     setIsModalOpen((prevState) => !prevState);
   };
 
+  // 메뉴 항목 데이터
+  const menuItems = [
+    { label: '탐색', href: '/map', isActive: pathname.startsWith('/map') },
+    {
+      label: '커뮤니티',
+      href: '/community',
+      isActive: pathname.startsWith('/community'),
+    },
+    {
+      label: '공지사항',
+      href: '/notice',
+      isActive: pathname.startsWith('/notice'),
+    },
+  ];
+
   return (
     <header className="fixed top-0 left-0 right-0 z-50 h-[5rem] bg-blue-100 text-main-black px-[1.25rem] flex items-center">
       <ContentWrap>
-        <div className="flex justify-between items-center h-full">
+        <div className="flex justify-between items-center h-full w-full">
           {/* part1 */}
-          <div className="flex basis-1/3 items-center text-base">
-            <Link href="/map">
-              <div
-                className={`flex justify-center items-center w-[6.375rem] h-[2.5rem] border rounded-full border-black mx-3 font-bold ${
-                  pathname.startsWith('/map')
-                    ? 'bg-main-black text-blue-100'
-                    : ''
-                }`}
-              >
-                탐색
-              </div>
-            </Link>
-            <Link href="/community">
-              <div
-                className={`flex justify-center items-center w-[6.375rem] h-[2.5rem] border rounded-full border-black mx-3 font-bold ${
-                  pathname.startsWith('/community')
-                    ? 'bg-main-black text-blue-100'
-                    : ''
-                }`}
-              >
-                커뮤니티
-              </div>
+          <HeaderMenu menuItems={menuItems} />
+
+          {/* 모바일 사이즈의 로고와 아이콘들 */}
+          <div className="flex md:hidden w-full justify-between items-center">
+            <Profile />
+            <Link href="/" className="flex justify-center">
+              <img className="h-10" src="svg/header/logo.svg" alt="Logo" />
             </Link>
-            <Link href="/notice">
-              <div
-                className={`flex justify-center items-center w-[6.375rem] h-[2.5rem] border rounded-full border-black mx-3 font-bold ${
-                  pathname.startsWith('/notice')
-                    ? 'bg-main-black text-blue-100'
-                    : ''
-                }`}
-              >
-                공지사항
+            <div className="flex">
+              <img
+                className="mx-3"
+                src="svg/header/unconfirmedAlarmIcon.svg"
+                alt="Unconfirmed Alarm Icon"
+              />
+              <div className="relative cursor-pointer" onClick={toggleModal}>
+                <img
+                  src="svg/header/hamburgerMenuIcon.svg"
+                  alt="Hamburger Menu Icon"
+                />
+                {/* Modal */}
+                <HamburgerMenuModal
+                  session={session}
+                  isOpen={isModalOpen}
+                  onClose={toggleModal}
+                />
               </div>
-            </Link>
+            </div>
           </div>
+
           {/* part2 */}
-          <div className="flex basis-1/3 justify-center min-w-[15rem]">
+          <div className="hidden md:flex basis-1/3 justify-center max-w-[15rem] shrink-0">
             <Link href="/">
-              <img className="my-auto" src="svg/header/logo.svg" alt="Logo" />
+              <img className="" src="svg/header/logo.svg" alt="Logo" />
             </Link>
           </div>
+
           {/* part3 */}
-          <div className="flex basis-1/3 justify-end items-center min-w-[25.625rem]">
-            <div className="flex mx-3 items-center">
-              {session ? (
-                <>
-                  <div className="h-6 w-6 border border-[#45AD56] rounded-full overflow-hidden">
-                    {session.user.profile_image ? (
-                      <img
-                        src={session.user.profile_image}
-                        alt={session.user.name + '프로필 이미지'}
-                        className="h-full w-full object-cover"
-                      />
-                    ) : (
-                      <img
-                        src="svg/header/profileDefault.svg"
-                        alt="Profile Default"
-                        className="h-full w-full object-cover"
-                      />
-                    )}
-                  </div>
-                  <div className="flex mx-2 font-bold">
-                    {session?.user.name} 님
-                  </div>
-                </>
-              ) : (
-                <Link href={'/signin'} className="flex mx-2 font-bold">
-                  로그인 하기
-                </Link>
-              )}
-            </div>
-            <div className="mx-3 ">
+          <div className="hidden md:flex basis-1/3 justify-end items-center min-w-[25.625rem]">
+            <Profile />
+            <div className="mx-3">
               <img src="svg/header/chatIcon.svg" alt="Chat Icon" />
             </div>
-            <div className="mx-3 ">
+            <div className="mx-3">
               <img src="svg/header/friendIcon.svg" alt="Friend Icon" />
             </div>
-            <div className="mx-3 ">
+            <div className="mx-3">
               <img
                 src="svg/header/unconfirmedAlarmIcon.svg"
                 alt="Unconfirmed Alarm Icon"
diff --git a/src/app/common/header/HeaderMenu.tsx b/src/app/common/header/HeaderMenu.tsx
new file mode 100644
index 0000000..726049b
--- /dev/null
+++ b/src/app/common/header/HeaderMenu.tsx
@@ -0,0 +1,41 @@
+import Link from 'next/link';
+
+interface MenuItemProps {
+  href: string;
+  isActive: boolean;
+  children: React.ReactNode;
+}
+
+const MenuItem = ({ href, isActive, children }: MenuItemProps) => {
+  return (
+    <Link href={href}>
+      <div
+        className={`flex justify-center items-center w-[6.375rem] h-[2.5rem] border rounded-full border-black mx-3 font-bold ${
+          isActive ? 'bg-main-black text-blue-100' : ''
+        }`}
+      >
+        {children}
+      </div>
+    </Link>
+  );
+};
+
+interface HeaderMenuProps {
+  menuItems: {
+    label: string;
+    href: string;
+    isActive: boolean;
+  }[];
+}
+
+export default function HeaderMenu({ menuItems }: HeaderMenuProps) {
+  return (
+    <div className="flex md:basis-1/3 items-center text-base max-md:hidden">
+      {menuItems.map((item, index) => (
+        <MenuItem key={index} href={item.href} isActive={item.isActive}>
+          {item.label}
+        </MenuItem>
+      ))}
+    </div>
+  );
+}
diff --git a/src/app/common/header/Profile.tsx b/src/app/common/header/Profile.tsx
new file mode 100644
index 0000000..ace2504
--- /dev/null
+++ b/src/app/common/header/Profile.tsx
@@ -0,0 +1,37 @@
+import { Session } from 'next-auth';
+import Link from 'next/link';
+import React from 'react';
+import { useSession } from 'next-auth/react';
+
+export default function Profile() {
+  const { data: session } = useSession();
+
+  return (
+    <div className="flex mx-3 items-center shrink-0">
+      {session ? (
+        <>
+          <div className="h-6 w-6 border border-[#45AD56] rounded-full overflow-hidden">
+            {session.user.profile_image ? (
+              <img
+                src={session.user.profile_image}
+                alt={`${session.user.name} 프로필 이미지`}
+                className="h-full w-full object-cover"
+              />
+            ) : (
+              <img
+                src="svg/header/profileDefault.svg"
+                alt="Profile Default"
+                className="h-full w-full object-cover"
+              />
+            )}
+          </div>
+          <div className="flex mx-2 font-bold">{session?.user.name} 님</div>
+        </>
+      ) : (
+        <Link href="/signin" className="flex mx-2 font-bold">
+          로그인 하기
+        </Link>
+      )}
+    </div>
+  );
+}
diff --git a/src/styles/globals.css b/src/styles/globals.css
index e4e48c6..4d6317f 100644
--- a/src/styles/globals.css
+++ b/src/styles/globals.css
@@ -1,23 +1,23 @@
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
-<<<<<<< HEAD
-=======
 
->>>>>>> dev
+a,
+button {
+  cursor: pointer;
+}
+
 @media (min-width: 768px) and (max-width: 920px) {
+
   html,
   body {
     font-size: 11px;
   }
 
-  a,
-  button {
-    cursor: pointer;
-  }
 }
 
 @media (min-width: 921px) and (max-width: 1024px) {
+
   html,
   body {
     font-size: 12px;
@@ -25,6 +25,7 @@
 }
 
 @media (min-width: 1025px) and (max-width: 1280px) {
+
   html,
   body {
     font-size: 13px;
@@ -52,4 +53,4 @@ input[type='number']::-webkit-inner-spin-button {
 
 input:-webkit-autofill {
   -webkit-box-shadow: 0 0 0 500px white inset !important;
-}
+}
\ No newline at end of file

From 56297eb9062d5d51c9a5fe49f38d3e1cea2468e0 Mon Sep 17 00:00:00 2001
From: moonyah <dltk456@naver.com>
Date: Mon, 3 Jun 2024 03:11:22 +0900
Subject: [PATCH 07/14] [Design] fix HamburgetMenuModal

---
 src/app/common/header/HamburgerMenuModal.tsx | 124 ++++++++++---------
 src/app/common/header/Header.tsx             |  13 +-
 2 files changed, 75 insertions(+), 62 deletions(-)

diff --git a/src/app/common/header/HamburgerMenuModal.tsx b/src/app/common/header/HamburgerMenuModal.tsx
index 45cdefe..310c7c7 100644
--- a/src/app/common/header/HamburgerMenuModal.tsx
+++ b/src/app/common/header/HamburgerMenuModal.tsx
@@ -19,67 +19,75 @@ export default function HamburgerMenuModal({
 
   return (
     <div className="bg-white w-[25rem] absolute right-0 font-bold rounded-xl shadow-lg">
-      <div className="flex justify-between bg-blue-50 rounded-t-xl">
-        {session && (
-          <div className="pt-[2.5rem] pb-[2rem] px-[2.5rem]">
-            <div className="mb-4 text-[1.75rem] leading-none">
-              {session.user.name}님
-            </div>
-            <div className="flex gap-[1.5rem] leading-none text-[1.25rem]">
-              <Link href="/profile">내 정보</Link>
-              <button onClick={() => signoutWithCredentials()}>로그아웃</button>
+      {/* 오른쪽 상단에 닫기 아이콘 */}
+      <div
+        className="text-2xl pr-6 pt-4 absolute top-0 right-0 cursor-pointer"
+        onClick={() => onClose()}
+      >
+        ✕
+      </div>
+      {session ? (
+        <div className="pt-[2.5rem] pb-[2rem] px-[2.5rem] bg-blue-50 rounded-t-xl">
+          <div className="mb-4 text-[1.75rem] leading-none">
+            {session.user.name}님 장문용님
+          </div>
+          <div className="flex gap-[1.5rem] leading-none text-[1.25rem]">
+            <Link href="/profile">내 정보</Link>
+            <button onClick={() => signoutWithCredentials()}>로그아웃</button>
+          </div>
+        </div>
+      ) : (
+        <div className="pt-8">
+          {/* 여백 추가 */}
+          <div className="p-[2rem] border-b border-gray-100">
+            <div className="text-xl pb-[2rem] leading-none">Linkup</div>
+            <ul className="leading-none text-gray-600">
+              <li className="mb-4">
+                <Link href="/company">회사 소개</Link>
+              </li>
+              <li>
+                <Link href="/membership">멤버십 안내</Link>
+              </li>
+            </ul>
+          </div>
+          <div className="p-[2rem] border-b border-gray-100">
+            <div className="text-xl pb-[2rem] leading-none">탐색</div>
+            <ul className="leading-none text-gray-600">
+              <li>
+                <Link href="/map">지점 찾기 / 예약하기</Link>
+              </li>
+            </ul>
+          </div>
+          <div className="p-[2rem] border-b border-gray-100">
+            <div className="text-xl pb-[2rem] leading-none">커뮤니티</div>
+            <ul className="leading-none text-gray-600">
+              <li>
+                <Link href="/clubs">소모임</Link>
+              </li>
+            </ul>
+          </div>
+          <div className="p-[2rem] border-b border-gray-100">
+            <div className="text-xl pb-[2rem] leading-none">고객센터</div>
+            <ul className="leading-none text-gray-600">
+              <li className="mb-4">
+                <Link href="/faq">자주 묻는 질문</Link>
+              </li>
+              <li>
+                <Link href="/support">1:1 문의하기</Link>
+              </li>
+            </ul>
+          </div>
+          <div>
+            <div className="pt-[4.62rem] pb-[2.5rem] flex justify-center font-medium">
+              <ul className="leading-none text-gray-600">
+                <li>
+                  <div>개인정보처리방침 | 이용약관</div>
+                </li>
+              </ul>
             </div>
           </div>
-        )}
-        <div className="text-2xl pr-6 pt-4">✕</div>
-      </div>
-      <div className="p-[2rem] border-b border-gray-100">
-        <div className="text-xl pb-[2rem] leading-none">Linkup</div>
-        <ul className="leading-none text-gray-600">
-          <li className="mb-4">
-            <Link href="/company">회사 소개</Link>
-          </li>
-          <li>
-            <Link href="/membership">멤버십 안내</Link>
-          </li>
-        </ul>
-      </div>
-      <div className="p-[2rem] border-b border-gray-100">
-        <div className="text-xl pb-[2rem] leading-none">탐색</div>
-        <ul className="leading-none text-gray-600">
-          <li>
-            <Link href="/map">지점 찾기 / 예약하기</Link>
-          </li>
-        </ul>
-      </div>
-      <div className="p-[2rem] border-b border-gray-100">
-        <div className="text-xl pb-[2rem] leading-none">커뮤니티</div>
-        <ul className="leading-none text-gray-600">
-          <li>
-            <Link href="/clubs">소모임</Link>
-          </li>
-        </ul>
-      </div>
-      <div className="p-[2rem] border-b border-gray-100">
-        <div className="text-xl pb-[2rem] leading-none">고객센터</div>
-        <ul className="leading-none text-gray-600">
-          <li className="mb-4">
-            <Link href="/faq">자주 묻는 질문</Link>
-          </li>
-          <li>
-            <Link href="/support">1:1 문의하기</Link>
-          </li>
-        </ul>
-      </div>
-      <div>
-        <div className="pt-[4.62rem] pb-[2.5rem] flex justify-center font-medium">
-          <ul className="leading-none text-gray-600">
-            <li>
-              <div>개인정보처리방침 | 이용약관</div>
-            </li>
-          </ul>
         </div>
-      </div>
+      )}
     </div>
   );
 }
diff --git a/src/app/common/header/Header.tsx b/src/app/common/header/Header.tsx
index b47e413..a84c276 100644
--- a/src/app/common/header/Header.tsx
+++ b/src/app/common/header/Header.tsx
@@ -14,7 +14,10 @@ export default function Header() {
   const pathname = usePathname();
 
   const toggleModal = () => {
-    setIsModalOpen((prevState) => !prevState);
+    setIsModalOpen((prevState) => {
+      const newState = !prevState;
+      return newState;
+    });
   };
 
   // 메뉴 항목 데이터
@@ -43,7 +46,7 @@ export default function Header() {
           <div className="flex md:hidden w-full justify-between items-center">
             <Profile />
             <Link href="/" className="flex justify-center">
-              <img className="h-10" src="svg/header/logo.svg" alt="Logo" />
+              <img className="h-8" src="svg/header/logo.svg" alt="Logo" />
             </Link>
             <div className="flex">
               <img
@@ -51,10 +54,11 @@ export default function Header() {
                 src="svg/header/unconfirmedAlarmIcon.svg"
                 alt="Unconfirmed Alarm Icon"
               />
-              <div className="relative cursor-pointer" onClick={toggleModal}>
+              <div className="relative cursor-pointer">
                 <img
                   src="svg/header/hamburgerMenuIcon.svg"
                   alt="Hamburger Menu Icon"
+                  onClick={toggleModal}
                 />
                 {/* Modal */}
                 <HamburgerMenuModal
@@ -88,10 +92,11 @@ export default function Header() {
                 alt="Unconfirmed Alarm Icon"
               />
             </div>
-            <div className="mx-3 relative cursor-pointer" onClick={toggleModal}>
+            <div className="mx-3 relative cursor-pointer">
               <img
                 src="svg/header/hamburgerMenuIcon.svg"
                 alt="Hamburger Menu Icon"
+                onClick={toggleModal}
               />
               {/* Modal */}
               <HamburgerMenuModal

From cdf9d7623d84d6f8e556869d740e0e6d1aaee7ff Mon Sep 17 00:00:00 2001
From: moonyah <dltk456@naver.com>
Date: Mon, 3 Jun 2024 07:33:52 +0900
Subject: [PATCH 08/14] [Design] Club mobile publishing

---
 src/app/common/header/HamburgerMenuModal.tsx  |   2 +-
 src/app/community/(pages)/club/page.tsx       |   2 +-
 .../components/club/CategoryDropdown.tsx      |   2 +-
 src/app/community/components/club/Club.tsx    | 175 ++++++++++++------
 .../community/components/club/ClubList.tsx    |   2 +-
 .../community/components/club/MyClubMenu.tsx  |  23 ++-
 .../components/club/PlaceDropdown.tsx         |   6 +-
 .../community/components/club/SearchInput.tsx |   2 +-
 src/app/community/layout.tsx                  |   4 +-
 9 files changed, 145 insertions(+), 73 deletions(-)

diff --git a/src/app/common/header/HamburgerMenuModal.tsx b/src/app/common/header/HamburgerMenuModal.tsx
index 310c7c7..0ace368 100644
--- a/src/app/common/header/HamburgerMenuModal.tsx
+++ b/src/app/common/header/HamburgerMenuModal.tsx
@@ -62,7 +62,7 @@ export default function HamburgerMenuModal({
             <div className="text-xl pb-[2rem] leading-none">커뮤니티</div>
             <ul className="leading-none text-gray-600">
               <li>
-                <Link href="/clubs">소모임</Link>
+                <Link href="/community/club">소모임</Link>
               </li>
             </ul>
           </div>
diff --git a/src/app/community/(pages)/club/page.tsx b/src/app/community/(pages)/club/page.tsx
index 88f4952..6688bec 100644
--- a/src/app/community/(pages)/club/page.tsx
+++ b/src/app/community/(pages)/club/page.tsx
@@ -4,7 +4,7 @@ import { Suspense } from 'react';
 export default function ClubPage() {
   return (
     <Suspense>
-      <Club></Club>
+      <Club />
     </Suspense>
   );
 }
diff --git a/src/app/community/components/club/CategoryDropdown.tsx b/src/app/community/components/club/CategoryDropdown.tsx
index d409142..7371691 100644
--- a/src/app/community/components/club/CategoryDropdown.tsx
+++ b/src/app/community/components/club/CategoryDropdown.tsx
@@ -68,7 +68,7 @@ export default function CategoryDropdown() {
   }, []);
 
   return (
-    <div className="relative" ref={dropdownRef}>
+    <div className="relative z-10" ref={dropdownRef}>
       <button
         onClick={toggleDropdown}
         className="font-semibold text-lg bg-white px-2 h-[2.38rem] flex items-center justify-center rounded border border-gray-200"
diff --git a/src/app/community/components/club/Club.tsx b/src/app/community/components/club/Club.tsx
index f3d87d6..11e0760 100644
--- a/src/app/community/components/club/Club.tsx
+++ b/src/app/community/components/club/Club.tsx
@@ -126,72 +126,127 @@ export default function Club() {
       ) : (
         <ContentWrap>
           <div className="bg-blue-50 rounded-2xl p-[2rem] relative z-10">
-            {menuSelection !== '찜' && menuSelection !== '내 소모임' && (
-              <div className="relative z-20">
-                <Dropdown
-                  options={dropdownOptions}
-                  selectedOption={selectedOption}
-                  onSelect={handleOptionSelect}
+            {menuSelection === '전체' && (
+              <>
+                <div className="relative z-20">
+                  <Dropdown
+                    options={dropdownOptions}
+                    selectedOption={selectedOption}
+                    onSelect={handleOptionSelect}
+                  />
+                </div>
+                {/* 전체, 찜, 내 소모임 메뉴 */}
+                <MenuButtons
+                  menuSelection={menuSelection}
+                  handleMenuSelect={handleMenuSelect}
                 />
-              </div>
+                <div className="md:flex items-center justify-between mt-5 relative z-10">
+                  <div className="flex items-center mb-4 md:mb-0">
+                    <div className="flex space-x-4">
+                      <CategoryDropdown />
+                      <TeamExclusionButton />
+                    </div>
+                    <button
+                      className="md:hidden bg-blue-400 text-white px-4 py-2 rounded-full ml-auto"
+                      onClick={handleButtonClick}
+                    >
+                      +
+                    </button>
+                  </div>
+                  <div className="flex items-center space-x-4">
+                    <SearchInput />
+                    <button
+                      className="bg-blue-400 text-white px-4 py-2 rounded-full hidden md:flex"
+                      onClick={handleButtonClick}
+                    >
+                      +
+                    </button>
+                  </div>
+                </div>
+                <div>
+                  {currentPage === 1 && (
+                    <div className="md:block hidden">
+                      <div className="font-bold text-2xl mt-8">
+                        이 달의 인기 소모임!
+                      </div>
+                      {renderClubs(
+                        getPaginatedClubs(hotClubs.slice(0, 8)),
+                        hotClubs.length,
+                        false,
+                      )}
+                    </div>
+                  )}
+                  {currentPage === 1 && (
+                    <div className="font-bold text-2xl pt-20 leading-none md:block hidden">
+                      전체 소모임
+                    </div>
+                  )}
+                  <div>{renderClubs(displayedClubs, totalItems, true)}</div>
+                </div>
+              </>
             )}
-
-            {/* 전체, 찜, 내 소모임 */}
-            <MenuButtons
-              menuSelection={menuSelection}
-              handleMenuSelect={handleMenuSelect}
-            />
-
-            <div className="flex items-center justify-between mt-5 relative z-10">
-              <div className="flex items-center space-x-4">
-                {menuSelection === '내 소모임' ? (
-                  // 가입한 모든 모임, 승인 대기중인 모임, 모임 관리하기
-                  <MyClubMenu onSelect={handleSubMenuSelect} />
-                ) : (
-                  <>
-                    <CategoryDropdown />
-                    {menuSelection !== '찜' && <TeamExclusionButton />}
-                  </>
-                )}
-              </div>
-              <div className="flex items-center space-x-4">
-                <SearchInput />
-                <button
-                  className="bg-blue-400 text-white px-4 py-2 rounded-full"
-                  onClick={handleButtonClick}
-                >
-                  +
-                </button>
-              </div>
-            </div>
-
-            {/* 찜한 클럽 목록 또는 전체 소모임 목록 */}
-            {menuSelection === '찜' || menuSelection === '내 소모임' ? (
-              renderClubs(displayedClubs, totalItems, true)
-            ) : (
+            {menuSelection === '찜' && (
               <>
-                {currentPage === 1 && (
-                  <div className="">
-                    <div className="font-bold text-2xl mt-8">
-                      이 달의 인기 소모임!
+                {/* 전체, 찜, 내 소모임 메뉴 */}
+                <MenuButtons
+                  menuSelection={menuSelection}
+                  handleMenuSelect={handleMenuSelect}
+                />
+                <div className="md:flex items-center justify-between mt-5 relative z-10">
+                  <div className="flex items-center mb-4 md:mb-0">
+                    <div className="flex space-x-4">
+                      <CategoryDropdown />
+                    </div>
+                    <button
+                      className="md:hidden bg-blue-400 text-white px-4 py-2 rounded-full ml-auto"
+                      onClick={handleButtonClick}
+                    >
+                      +
+                    </button>
+                  </div>
+                  <div className="flex items-center space-x-4">
+                    <SearchInput />
+                    <button
+                      className="bg-blue-400 text-white px-4 py-2 rounded-full hidden md:flex"
+                      onClick={handleButtonClick}
+                    >
+                      +
+                    </button>
+                  </div>
+                </div>
+                <div>{renderClubs(displayedClubs, totalItems, true)}</div>
+              </>
+            )}
+            {menuSelection === '내 소모임' && (
+              <>
+                {/* 전체, 찜, 내 소모임 메뉴 */}
+                <MenuButtons
+                  menuSelection={menuSelection}
+                  handleMenuSelect={handleMenuSelect}
+                />
+                <div className="md:flex items-center justify-between mt-5 relative z-10">
+                  <div className="flex items-center mb-4 md:mb-0">
+                    <div className="flex space-x-4">
+                      <MyClubMenu onSelect={handleSubMenuSelect} />
                     </div>
-                    {renderClubs(
-                      getPaginatedClubs(hotClubs.slice(0, 8)),
-                      hotClubs.length,
-                      false,
-                    )}
+                    <button
+                      className="md:hidden bg-blue-400 text-white px-4 py-2 rounded-full ml-auto"
+                      onClick={handleButtonClick}
+                    >
+                      +
+                    </button>
                   </div>
-                )}
-                {currentPage === 1 && (
-                  <div className="font-bold text-2xl pt-20 leading-none">
-                    전체 소모임
+                  <div className="flex items-center space-x-4">
+                    <SearchInput />
+                    <button
+                      className="bg-blue-400 text-white px-4 py-2 rounded-full hidden md:flex"
+                      onClick={handleButtonClick}
+                    >
+                      +
+                    </button>
                   </div>
-                )}
-                {renderClubs(
-                  getPaginatedClubs(allClubs),
-                  allClubs.length,
-                  true,
-                )}
+                </div>
+                <div>{renderClubs(displayedClubs, totalItems, true)}</div>
               </>
             )}
           </div>
diff --git a/src/app/community/components/club/ClubList.tsx b/src/app/community/components/club/ClubList.tsx
index 086ad7f..1e16cb6 100644
--- a/src/app/community/components/club/ClubList.tsx
+++ b/src/app/community/components/club/ClubList.tsx
@@ -6,7 +6,7 @@ interface ClubListProps {
 
 export default function ClubList({ clubs }: ClubListProps) {
   return (
-    <div className="grid grid-cols-4 gap-[2rem] mt-8">
+    <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 gap-[2rem] mt-8">
       {clubs.map((club, index) => (
         <ClubCard key={index} {...club} />
       ))}
diff --git a/src/app/community/components/club/MyClubMenu.tsx b/src/app/community/components/club/MyClubMenu.tsx
index c4cb1da..44174c3 100644
--- a/src/app/community/components/club/MyClubMenu.tsx
+++ b/src/app/community/components/club/MyClubMenu.tsx
@@ -1,4 +1,4 @@
-import React, { useState } from 'react';
+import React, { useState, useEffect } from 'react';
 
 interface MyClubMenuProps {
   onSelect: (selection: string) => void;
@@ -6,12 +6,27 @@ interface MyClubMenuProps {
 
 export default function MyClubMenu({ onSelect }: MyClubMenuProps) {
   const [selectedMenu, setSelectedMenu] = useState<string>('myClubs');
+  const [isMobile, setIsMobile] = useState<boolean>(false);
 
   const handleSelect = (selection: string) => {
     setSelectedMenu(selection);
     onSelect(selection);
   };
 
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth < 768);
+    };
+
+    handleResize();
+
+    window.addEventListener('resize', handleResize);
+
+    return () => {
+      window.removeEventListener('resize', handleResize);
+    };
+  }, []);
+
   return (
     <div className="flex items-center space-x-4">
       <button
@@ -22,7 +37,7 @@ export default function MyClubMenu({ onSelect }: MyClubMenuProps) {
             : 'bg-white text-black'
         }`}
       >
-        가입한 모든 모임
+        {isMobile ? '가입한 모임' : '가입한 모든 모임'}
       </button>
       <button
         onClick={() => handleSelect('unapprovedClubs')}
@@ -32,7 +47,7 @@ export default function MyClubMenu({ onSelect }: MyClubMenuProps) {
             : 'bg-white text-black'
         }`}
       >
-        승인 대기중인 모임
+        {isMobile ? '승인 대기 모임' : '승인 대기중인 모임'}
       </button>
       <button
         onClick={() => handleSelect('manageableClubs')}
@@ -42,7 +57,7 @@ export default function MyClubMenu({ onSelect }: MyClubMenuProps) {
             : 'bg-white text-black'
         }`}
       >
-        모임 관리하기
+        {isMobile ? '모임 관리' : '모임 관리하기'}
       </button>
     </div>
   );
diff --git a/src/app/community/components/club/PlaceDropdown.tsx b/src/app/community/components/club/PlaceDropdown.tsx
index 3017ada..5fff616 100644
--- a/src/app/community/components/club/PlaceDropdown.tsx
+++ b/src/app/community/components/club/PlaceDropdown.tsx
@@ -63,10 +63,10 @@ export default function PlaceDropdown({
   return (
     <div ref={dropdownRef} className="relative">
       <div
-        className="selected-option w-[18.3rem] cursor-pointer"
+        className="selected-option w-[16rem] cursor-pointer"
         onClick={toggleDropdown}
       >
-        <div className="flex items-center justify-between w-[18.3rem] h-[3.5rem] px-[0.5rem]">
+        <div className="flex items-center justify-between w-[16rem] h-[3.5rem] px-[0.5rem]">
           <div className="font-semibold text-2xl">{getOptionText()}</div>
           <img
             src={isOpen ? '/svg/club/arrowDown.svg' : '/svg/club/arrowUp.svg'}
@@ -76,7 +76,7 @@ export default function PlaceDropdown({
         </div>
       </div>
       {isOpen && (
-        <div className="absolute top-[3.3rem] bg-white rounded-b w-[18.3rem] border-t border-gray-100 cursor-pointer">
+        <div className="absolute top-[3.3rem] bg-white rounded-b w-[16rem] border-t border-gray-100 cursor-pointer">
           {options.map((option, index) => (
             <div
               key={option}
diff --git a/src/app/community/components/club/SearchInput.tsx b/src/app/community/components/club/SearchInput.tsx
index 728d577..49d1478 100644
--- a/src/app/community/components/club/SearchInput.tsx
+++ b/src/app/community/components/club/SearchInput.tsx
@@ -4,7 +4,7 @@ export default function SearchInput() {
       <input
         type="text"
         placeholder="찾고 싶은 소모임 제목, 내용 등을 입력해 주세요."
-        className="w-full px-4 py-2 pr-10 rounded-full border border-gray-300 focus:outline-none focus:border-blue-300"
+        className="w-full px-4 py-2 pr-10 rounded-full border border-gray-300 focus:outline-none focus:border-blue-300 mb:h-[2.5rem]"
       />
       <div className="absolute inset-y-0 right-0 flex items-center pr-3 cursor-pointer">
         <img
diff --git a/src/app/community/layout.tsx b/src/app/community/layout.tsx
index 308d95a..39e7a74 100644
--- a/src/app/community/layout.tsx
+++ b/src/app/community/layout.tsx
@@ -8,7 +8,9 @@ export default function layout({
 }>) {
   return (
     <div className="mt-[5rem]">
-      <CommunityNav />
+      <div className="max-md:hidden">
+        <CommunityNav />
+      </div>
       <div>{children}</div>
     </div>
   );

From d0cd37eec78e6acf9e296513ba6f44ec4322068c Mon Sep 17 00:00:00 2001
From: moonyah <dltk456@naver.com>
Date: Mon, 3 Jun 2024 07:34:07 +0900
Subject: [PATCH 09/14] [Design] Club Card mobile publishing

---
 .../community/components/club/ClubCard.tsx    | 186 +++++++++++++-----
 1 file changed, 133 insertions(+), 53 deletions(-)

diff --git a/src/app/community/components/club/ClubCard.tsx b/src/app/community/components/club/ClubCard.tsx
index 75b5098..f9a561a 100644
--- a/src/app/community/components/club/ClubCard.tsx
+++ b/src/app/community/components/club/ClubCard.tsx
@@ -14,7 +14,7 @@ export interface ClubCardProps {
   isAdmin?: boolean;
   showCancelButton?: boolean;
   showManageButton?: boolean;
-  clubId?: number; // 필수로 수정 에정
+  clubId?: number; // 필수로 수정 예정
 }
 
 export default function ClubCard({
@@ -39,75 +39,155 @@ export default function ClubCard({
   };
 
   return (
-    <div className="bg-white rounded-lg overflow-hidden relative">
-      <div className="h-[22.4rem] relative">
-        <img
-          src={imageUrl}
-          alt={title}
-          className="w-full object-cover absolute inset-0"
-        />
-        {isHost && (
-          <div className="absolute top-2 left-2 bg-yellow-600 p-2 rounded-full z-10">
-            <img src="/svg/club/crownIcon.svg" alt="Host Badge Icon" />
+    <div>
+      {/* 모바일 화면 */}
+      <div
+        className={`bg-white ${showCancelButton || showManageButton ? 'rounded-t-2xl' : 'rounded-2xl'} relative p-4 block md:hidden`}
+      >
+        <div className="overflow-hidden relative flex">
+          <div className="w-24 h-24 relative mr-4">
+            <img
+              src={imageUrl}
+              alt={title}
+              className="w-full h-full object-cover rounded-md"
+            />
           </div>
-        )}
-        {isAdmin && !isHost && (
-          <div className="absolute top-2 left-2 bg-main-blue p-2 rounded-full z-10">
-            <img src="/svg/club/crownIcon.svg" alt="Admin Badge Icon" />
-          </div>
-        )}
-        <div className="absolute bottom-0 w-full p-4 bg-white backdrop-blur-sm">
-          <div className="flex justify-between items-center">
-            <h3 className="text-lg font-bold">{title}</h3>
-            <button onClick={handleBookmarkToggle}>
-              <img
-                src={
-                  isBookmarked
-                    ? '/svg/club/bookmarkedHeart.svg'
-                    : '/svg/club/unbookmarkedHeart.svg'
-                }
-                alt="Heart Icon"
-                className="w-6 h-6"
-              />
-            </button>
-          </div>
-          <p className="mt-2 overflow-hidden overflow-ellipsis">
-            {description}
-          </p>
-          <div className="text-sm mt-2 flex gap-4">
-            <div className="flex items-center">
-              <img
-                src="/svg/club/locationIcon.svg"
-                alt="Location Icon"
-                className="mr-1"
-              />
-              <div>{location}</div>
+          <div className="flex-1">
+            <div className="flex justify-between items-center">
+              <h3 className="text-lg font-bold">{title}</h3>
             </div>
-            <div className="flex items-center">
-              <img
-                src="/svg/club/peoplesIcon.svg"
-                alt="Peoples Icon"
-                className="mr-1"
-              />
-              {currentMembers}/{maxMembers}
+            <p className="mt-2 overflow-hidden overflow-ellipsis">
+              {description}
+            </p>
+            <div className="text-sm mt-2 flex gap-4">
+              <div className="flex items-center">
+                <img
+                  src="/svg/club/locationIcon.svg"
+                  alt="Location Icon"
+                  className="mr-1"
+                />
+                <div className="font-bold">{location}</div>
+              </div>
+              <div className="flex items-center font-bold">
+                <img
+                  src="/svg/club/peoplesIcon.svg"
+                  alt="Peoples Icon"
+                  className="mr-1"
+                />
+                {currentMembers}/{maxMembers}
+              </div>
             </div>
           </div>
-          <div className="flex gap-4 items-center text-sm mt-2 font-semibold">
+        </div>
+        <div className="flex justify-between items-center text-sm mt-2 font-semibold">
+          <div className="flex gap-4">
             <div className="bg-yellow-600 p-[0.5rem] rounded">{category}</div>
             <div className="bg-yellow-600 p-[0.5rem] rounded">
               모임 {meetingDday}
             </div>
           </div>
+          <button onClick={handleBookmarkToggle} className="mr-2">
+            <img
+              src={
+                isBookmarked
+                  ? '/svg/club/bookmarkedHeart.svg'
+                  : '/svg/club/unbookmarkedHeart.svg'
+              }
+              alt="Heart Icon"
+              className="w-6 h-6"
+            />
+          </button>
+        </div>
+      </div>
+      {showCancelButton && (
+        <button className="w-full bg-red-cancel text-white py-[1.3rem] leading-none text-xl font-medium rounded-b-2xl md:hidden">
+          신청 취소
+        </button>
+      )}
+      {showManageButton && (
+        <Link href={`/community/club/manage/${clubId}`}>
+          <button className="w-full bg-blue-400 text-white py-[1.3rem] leading-none text-xl font-medium rounded-b-2xl md:hidden">
+            관리하기
+          </button>
+        </Link>
+      )}
+      {/* PC 화면 */}
+      <div
+        className={`hidden md:block bg-white ${showCancelButton || showManageButton ? 'rounded-t-lg' : 'rounded-lg'} overflow-hidden relative`}
+      >
+        <div className="h-[22.4rem] relative">
+          <img
+            src={imageUrl}
+            alt={title}
+            className="w-full object-cover absolute inset-0"
+          />
+          {isHost && (
+            <div className="absolute top-2 left-2 bg-yellow-600 p-2 rounded-full z-10">
+              <img src="/svg/club/crownIcon.svg" alt="Host Badge Icon" />
+            </div>
+          )}
+          {isAdmin && !isHost && (
+            <div className="absolute top-2 left-2 bg-main-blue p-2 rounded-full z-10">
+              <img src="/svg/club/crownIcon.svg" alt="Admin Badge Icon" />
+            </div>
+          )}
+          <div className="absolute bottom-0 w-full p-4 bg-white backdrop-blur-sm">
+            <div className="flex justify-between items-center">
+              <h3 className="text-lg font-bold">{title}</h3>
+              <button onClick={handleBookmarkToggle}>
+                <img
+                  src={
+                    isBookmarked
+                      ? '/svg/club/bookmarkedHeart.svg'
+                      : '/svg/club/unbookmarkedHeart.svg'
+                  }
+                  alt="Heart Icon"
+                  className="w-6 h-6"
+                />
+              </button>
+            </div>
+            <p className="mt-2 overflow-hidden overflow-ellipsis">
+              {description}
+            </p>
+            <div className="text-sm mt-2 flex gap-4">
+              <div className="flex items-center">
+                <img
+                  src="/svg/club/locationIcon.svg"
+                  alt="Location Icon"
+                  className="mr-1"
+                />
+                <div>{location}</div>
+              </div>
+              <div className="flex items-center">
+                <img
+                  src="/svg/club/peoplesIcon.svg"
+                  alt="Peoples Icon"
+                  className="mr-1"
+                />
+                {currentMembers}/{maxMembers}
+              </div>
+            </div>
+            <div className="flex justify-between items-center text-sm mt-2 font-semibold">
+              <div className="flex gap-4">
+                <div className="bg-yellow-600 p-[0.5rem] rounded">
+                  {category}
+                </div>
+                <div className="bg-yellow-600 p-[0.5rem] rounded">
+                  모임 {meetingDday}
+                </div>
+              </div>
+            </div>
+          </div>
         </div>
       </div>
       {showCancelButton && (
-        <button className="w-full bg-red-cancel text-white py-[1.3rem] leading-none text-xl font-medium">
+        <button className="w-full bg-red-cancel text-white py-[1.3rem] leading-none text-xl rounded-b-lg font-medium hidden md:block">
           신청 취소
         </button>
       )}
       {showManageButton && (
         <Link href={`/community/club/manage/${clubId}`}>
-          <button className="w-full bg-blue-400 text-white py-[1.3rem] leading-none text-xl font-medium">
+          <button className="w-full bg-blue-400 text-white py-[1.3rem] leading-none text-xl rounded-b-lg font-medium hidden md:block">
             관리하기
           </button>
         </Link>

From 1ce604ba89d4579eff39bcd335bc0dfc567b25f2 Mon Sep 17 00:00:00 2001
From: mac <mac@macui-MacBookPro.local>
Date: Sun, 2 Jun 2024 21:26:56 -0700
Subject: [PATCH 10/14] =?UTF-8?q?buildinginfo=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(search)/atom/search.ts               |  4 +++
 .../map/components/BuildingFilter.tsx         | 36 ++++++++++++++-----
 .../map/components/BuildingImageSlider.tsx    |  2 +-
 .../(search)/map/components/BuildingInfo.tsx  |  6 ++--
 .../(search)/map/components/BuildingItem.tsx  |  9 ++++-
 .../(search)/map/components/BuildingList.tsx  | 22 ++++++------
 .../map/components/LocationButton.tsx         |  2 +-
 src/app/(search)/map/components/Map.tsx       |  3 +-
 src/app/(search)/map/components/Zoom.tsx      |  2 +-
 src/app/(search)/map/page.tsx                 |  4 +--
 .../[id]/components/OnePassMembership.tsx     |  7 ++--
 .../table/mobile/OpenDeskMobile.tsx           |  4 +--
 src/app/layout.tsx                            |  3 --
 src/app/page.tsx                              |  5 ++-
 src/styles/reservation.css                    |  4 +--
 15 files changed, 70 insertions(+), 43 deletions(-)

diff --git a/src/app/(search)/atom/search.ts b/src/app/(search)/atom/search.ts
index 3cd8494..c47b7f9 100644
--- a/src/app/(search)/atom/search.ts
+++ b/src/app/(search)/atom/search.ts
@@ -14,3 +14,7 @@ export const currentBuildingState = atom<OfficeBuilding | null>({
   key: 'currentBuilding',
   default: null,
 });
+export const showInfoState = atom<boolean> ({
+  key: 'showInfo',
+  default: false
+})
\ No newline at end of file
diff --git a/src/app/(search)/map/components/BuildingFilter.tsx b/src/app/(search)/map/components/BuildingFilter.tsx
index 584bb41..8dd3eb9 100644
--- a/src/app/(search)/map/components/BuildingFilter.tsx
+++ b/src/app/(search)/map/components/BuildingFilter.tsx
@@ -1,13 +1,15 @@
-import { useState } from 'react';
+import { useEffect, useState } from 'react';
 import { OfficeBuilding } from '@/types/office/office';
 import Image from 'next/image';
 
 interface BuildingFilterProps {
   officeBuildings: OfficeBuilding[] | null;
+  isUp: boolean
+  
 }
 
 export default function BuildingFilter({
-  officeBuildings,
+  officeBuildings, isUp
 }: BuildingFilterProps) {
   const [selectedRegion, setSelectedRegion] = useState(false);
   const [selectedIndustry, setSelectedIndustry] = useState(false);
@@ -59,6 +61,13 @@ export default function BuildingFilter({
     '사무지원',
     '기타',
   ];
+  useEffect(() => {
+    if(!isUp) {
+      setSelectedRegion(false);
+      setSelectedIndustry(false);
+      setSelectedOccupation(false)
+    }
+  })
   const handleRegionClick = () => {
     setSelectedRegion(!selectedRegion);
     setSelectedIndustry(false);
@@ -78,7 +87,7 @@ export default function BuildingFilter({
   };
 
   return (
-    <div className="flex gap-2 w-[26.6875rem] items-center">
+    <div className="justify-start mb:pl-4 flex gap-2 md:pl-0 mb:w-[22.5rem] md:w-[26.6875rem] items-center">
       <div
         className={`bg-white rounded-t-md ${
           selectedRegion
@@ -88,7 +97,8 @@ export default function BuildingFilter({
       >
         <div
           onClick={handleRegionClick}
-          className="flex w-[10.0625rem] h-[2.5rem] rounded-md items-center justify-center cursor-pointer shadow-md transition-all duration-1000"
+          className="flex mb:w-[6.5625rem] mb:h-[2rem] mb:text-[0.75rem]  
+          md:text-[1rem] md:w-[10.0625rem] md:h-[2.5rem] rounded-md items-center justify-center cursor-pointer shadow-md transition-all duration-1000"
         >
           <div className="flex items-center">
             <span className="mr-2">지역 선택</span>
@@ -116,7 +126,7 @@ export default function BuildingFilter({
             >
               강남
             </h1>
-            
+            
             <div className="flex gap-5 items-center">
               <div className="flex gap-2 items-center">
                 <p className="font-normal md:text-sm mb:text-[0.625rem]">
@@ -195,10 +205,14 @@ export default function BuildingFilter({
       )}
       <div
         onClick={handleSanupkunClick}
-        className="w-[7.8125rem] h-[2.5rem] text-gray-400 bg-white rounded-md flex items-center justify-center cursor-pointer shadow-md transition-all duration-300"
+        className="mb:w-[5.1875rem] mb:h-[2rem] 
+        mb:text-[0.75rem] 
+          
+        md:text-[1rem] 
+        md:w-[7.8125rem] md:h-[2.5rem] text-gray-400 bg-white rounded-md flex items-center justify-center cursor-pointer shadow-md transition-all duration-300"
       >
         <div className="flex items-center">
-          <span className="mr-2 ">산업군 선택</span>
+          <span className="mr-2 ">산업군</span>
           <Image src="svg/map/arrow.svg" width={24} height={24} alt="화살표" />
         </div>
       </div>
@@ -227,10 +241,12 @@ export default function BuildingFilter({
       <div className="relative">
         <div
           onClick={handleJickunClick}
-          className="w-[7.8125rem] h-[2.5rem] text-gray-400 bg-white rounded-md flex items-center justify-center cursor-pointer shadow-md transition-all duration-300"
+          className="mb:w-[5.1875rem] mb:h-[2rem] mb:text-[0.75rem] 
+          
+          md:text-[1rem] md:w-[7.8125rem] md:h-[2.5rem] text-gray-400 bg-white rounded-md flex items-center justify-center cursor-pointer shadow-md transition-all duration-300"
         >
           <div className="flex items-center">
-            <span className="mr-2">직군 선택</span>
+            <span className="mr-2">직군</span>
             <Image
               src="svg/map/arrow.svg"
               width={24}
@@ -261,6 +277,8 @@ export default function BuildingFilter({
           </ul>
         </div>
       )}
+         <div className="border-t border-blue-500 md:my-2 mb:my-1"></div>
     </div>
+    
   );
 }
diff --git a/src/app/(search)/map/components/BuildingImageSlider.tsx b/src/app/(search)/map/components/BuildingImageSlider.tsx
index dd29d07..90583bd 100644
--- a/src/app/(search)/map/components/BuildingImageSlider.tsx
+++ b/src/app/(search)/map/components/BuildingImageSlider.tsx
@@ -9,7 +9,7 @@ export default function BuildingImageSlider({
 }: ImageViewProps) {
   if (!images) return <div>이미지 준비중</div>;
   return (
-    <div>
+    <div className='overflow-hidden rounded-t-3xl h-[17.25rem]'>
       <Image
         width={491}
         height={276}
diff --git a/src/app/(search)/map/components/BuildingInfo.tsx b/src/app/(search)/map/components/BuildingInfo.tsx
index 49e8b84..f7d8bdf 100644
--- a/src/app/(search)/map/components/BuildingInfo.tsx
+++ b/src/app/(search)/map/components/BuildingInfo.tsx
@@ -11,17 +11,17 @@ export default function BuildingInfo() {
   return (
     <>
       <div
-        className="hidden-md gap-[3rem] rounded-3xl flex flex-col top-[110px] w-[30.6875rem] absolute ease-in duration-300 shadow-2xl right-[530px] bottom-5 z-10 bg-white p-0 m-0 
+        className="hidden-md rounded-3xl flex flex-col  top-[110px] w-[30.6875rem] h-[56.75rem]  absolute ease-in duration-300 shadow-2xl right-[530px] bottom-5 z-10 bg-white p-0 m-0 
        "
       >
-        <div className="overflow-hidden rounded-t-3xl">
+        <div className="">
           <BuildingImageSlider
             images={BuildingImageUrl!}
             buildingId={BuildingId!}
           />
         </div>
 
-        <div className="flex flex-col gap-3 justify-start items-center bg-[#E4EEFF] overflow-hidden overflow-y-scroll scrollbar-hide rounded-b-3xl">
+        <div className="flex flex-col justify-start items-center bg-[#E4EEFF] overflow-hidden overflow-y-scroll scrollbar-hide rounded-b-3xl">
           <BuildingServiceView currentBuilding={currentBuilding} />
         </div>
       </div>
diff --git a/src/app/(search)/map/components/BuildingItem.tsx b/src/app/(search)/map/components/BuildingItem.tsx
index 14fa012..59dc8b9 100644
--- a/src/app/(search)/map/components/BuildingItem.tsx
+++ b/src/app/(search)/map/components/BuildingItem.tsx
@@ -1,23 +1,30 @@
 import { OfficeBuilding } from '@/types/office/office';
 import { currentBuildingState } from '../../atom/search';
 import { useRecoilValue, useSetRecoilState } from 'recoil';
+import { useState } from 'react';
 import Image from 'next/image';
 
 interface BuildingItemProps {
   officeBuildings: OfficeBuilding[] | null;
 }
 export default function BuildingItem({ officeBuildings }: BuildingItemProps) {
+  const [showInfo, setShowInfo] = useState(false);
   const setCurrentBuilding = useSetRecoilState<OfficeBuilding | null>(
     currentBuildingState,
   );
 
+  
   return (
     <>
       {officeBuildings?.map((office, index) => (
         <div
           key={index}
           className="flex justify-center px-2 py-2 rounded-sm z-40 "
-          onClick={() => setCurrentBuilding(office)}
+          onClick={() => {
+            setCurrentBuilding(office);
+            setShowInfo(true);
+          }}
+          
         >
           <div className="flex gap-5  p-4 items-center bg-white rounded-md active:bg-blue-500 active:rounded-md active:text-white">
             <div>
diff --git a/src/app/(search)/map/components/BuildingList.tsx b/src/app/(search)/map/components/BuildingList.tsx
index e34c9a3..584c890 100644
--- a/src/app/(search)/map/components/BuildingList.tsx
+++ b/src/app/(search)/map/components/BuildingList.tsx
@@ -5,22 +5,21 @@ import { useState } from 'react';
 
 export interface BuildingListProps {
   officeBuildings: OfficeBuilding[] | null;
-  isMobile: boolean;
   isUp: boolean;
 }
 
 export default function BuildingList({
-  officeBuildings,
-  isMobile,
+  officeBuildings
 }: BuildingListProps) {
-  const [isUp, setIsUp] = useState(false);
+  const [isUp, setIsUp] = useState(true);
+
   const listUp = () => {
     setIsUp((prev) => !prev);
   };
   return (
     <>
       <button
-        className="fixed btn-hidden shadow-lg bg-[#F9D91B] p-[0.5rem] rounded-2xl font-bold text-[0.875rem] w-[5.3125rem] h-[2.5rem]  transform-tramslate-1/2 z-990
+        className="fixed btn-hidden shadow-lg bg-[#F9D91B] p-[0.5rem] rounded-2xl font-bold text-[0.875rem] w-[5.3125rem] h-[2.5rem]  transform-tramslate-1/2 
         "
         style={{
           bottom: '110px',
@@ -34,17 +33,18 @@ export default function BuildingList({
       </button>
 
       <div
-        className={`hidden-md fixed mb:bottom-0 mb:right-0 mb:h-[43.25rem] mb:w-[22.5rem]  mx-auto 
-    mb:transition-transform mb:duration-600 overflow-hidden mb:border-4 ${
-      isUp ? 'mb:h-[43.25rem] ' : 'mb:h-[5.5rem]'
+        className={`hidden-md fixed mb:bottom-0 mb:right-0 mb:h-[43.25rem] mb:w-full  mx-auto 
+    mb:transition-transform mb:duration-600 overflow-hidden ${
+      isUp ? 'mb:h-[43.25rem] mb:transition-all mb:duration-500 mb:ease-in-out' 
+      : 'mb:h-[5.5rem] mb:transition-all mb:duration-500 mb:ease-in-out'
     }
 
-    md:fixed md:top-[110px] md:w-[30.6875rem] md:rounded-3xl md:shadow-2xl  md:right-[30px] md:bottom-5 flex flex-col bg-[#E4EEFF] md:h-[56.75rem] overflow-hidden z-10
+    md:fixed md:top-[110px] md:w-[30.6875rem] md:rounded-3xl md:shadow-2xl  md:right-[30px] md:bottom-5 flex flex-col bg-[#E4EEFF] md:h-[56.75rem]  z-10
 
           `}
       >
-        <div className="pt-6 flex flex-col items-center h-[5.5rem] mt-2 mb-4 mx-auto">
-          <BuildingFilter officeBuildings={officeBuildings} />
+        <div className="pt-4 flex flex-col items-center mb-2 mx-auto">
+          <BuildingFilter officeBuildings={officeBuildings} isUp={isUp}/>
         </div>
         <div className="overflow-y-auto scrollbar-hide cursor-pointer  mt-3 ">
           <BuildingItem officeBuildings={officeBuildings} />
diff --git a/src/app/(search)/map/components/LocationButton.tsx b/src/app/(search)/map/components/LocationButton.tsx
index c149647..0b765f4 100644
--- a/src/app/(search)/map/components/LocationButton.tsx
+++ b/src/app/(search)/map/components/LocationButton.tsx
@@ -51,7 +51,7 @@ export default function CurrentLocationButton() {
       <button
         type="button"
         onClick={handleCurrentPosition}
-        className="fixed z-[1000] w-[2.5rem] h-[2.5rem] p-2 shadow left-10 top-40 bg-white rounded-md hover:shadow-lg focus:shadow-lg hover:bg-blue-200"
+        className="fixed z-[10] w-[2.5rem] h-[2.5rem] p-2 shadow left-10 top-40 bg-white rounded-md hover:shadow-lg focus:shadow-lg hover:bg-blue-200"
       >
         <Image
           src="/svg/map/geolocation.svg"
diff --git a/src/app/(search)/map/components/Map.tsx b/src/app/(search)/map/components/Map.tsx
index 7710073..2c10316 100644
--- a/src/app/(search)/map/components/Map.tsx
+++ b/src/app/(search)/map/components/Map.tsx
@@ -39,7 +39,8 @@ export default function MapCompnent({ lat, lng, zoom }: MapProps) {
         src={`//dapi.kakao.com/v2/maps/sdk.js?appkey=${process.env.NEXT_PUBLIC_KAKAO_MAP_CLIENT}&autoload=false`}
         onReady={loadKakaoMap}
       />
-      <div id="map" className="w-full relative h-[calc(100vh_-_5rem)]"></div>
+      {/* h-[calc(100vh_-_5rem)] */}
+      <div id="map" className="w-full relative h-screen"></div>
     </>
   );
 }
diff --git a/src/app/(search)/map/components/Zoom.tsx b/src/app/(search)/map/components/Zoom.tsx
index 0e685f1..d5f4e95 100644
--- a/src/app/(search)/map/components/Zoom.tsx
+++ b/src/app/(search)/map/components/Zoom.tsx
@@ -17,7 +17,7 @@ export default function Zoom() {
     }
   };
   return (
-    <div className="fixed left-10 top-60 z-[1000] flex flex-col">
+    <div className="fixed left-10 top-60 z-[10] flex flex-col">
       <button
         onClick={() => handleZoomIn()}
         type="button"
diff --git a/src/app/(search)/map/page.tsx b/src/app/(search)/map/page.tsx
index 47582fe..9662d5f 100644
--- a/src/app/(search)/map/page.tsx
+++ b/src/app/(search)/map/page.tsx
@@ -19,7 +19,7 @@ export default function MapPage() {
   const [currentBuilding, setCurrentBuilding] =
     useRecoilState(currentBuildingState);
   const [isUp, setIsUp] = useState(false);
-  const isMobile = useRecoilValue(mobileReservationLayoutState);
+
   useEffect(() => {
     const fetchBuildingsData = async () => {
       try {
@@ -47,7 +47,7 @@ export default function MapPage() {
           <BuildingList
             officeBuildings={officeBuildings}
             isUp={isUp}
-            isMobile={isMobile}
+       
           />
           {currentBuilding && <BuildingInfo />}
         </div>
diff --git a/src/app/(search)/reservation/[id]/components/OnePassMembership.tsx b/src/app/(search)/reservation/[id]/components/OnePassMembership.tsx
index 1cfd510..bd0a461 100644
--- a/src/app/(search)/reservation/[id]/components/OnePassMembership.tsx
+++ b/src/app/(search)/reservation/[id]/components/OnePassMembership.tsx
@@ -37,7 +37,7 @@ interface SeatReservation {
 
 export default function OnePassMembership({
   seatType,
-  spaceType,
+  spaceType
 }: OnePassMembershipProps) {
   const [RTab, setRTab] = useRecoilState(Rtab);
   const [seatList, setSeatList] = useRecoilState(seatListReservation);
@@ -53,7 +53,7 @@ export default function OnePassMembership({
   const content = `예약을 추가하려면 위에서 날짜와 좌석 유형을 선택해 주세요.
 당일권은 최대 5개까지 예약할 수 있습니다.`;
 
-  const info = useLineBreak({ content });
+
   const handleDayClick = (day: Date) => {
     setSelectedDate(day);
     setSelectedSeatAll({});
@@ -109,9 +109,10 @@ export default function OnePassMembership({
       borderRadius: '50%',
     },
   };
-
+  const info = useLineBreak({ content });
   return (
     <>
+    
       <div className="flex flex-col gap-6 mb-6">
         {RTab === '좌석' ? (
           <>
diff --git a/src/app/(search)/reservation/[id]/components/table/mobile/OpenDeskMobile.tsx b/src/app/(search)/reservation/[id]/components/table/mobile/OpenDeskMobile.tsx
index d98f7b5..b276763 100644
--- a/src/app/(search)/reservation/[id]/components/table/mobile/OpenDeskMobile.tsx
+++ b/src/app/(search)/reservation/[id]/components/table/mobile/OpenDeskMobile.tsx
@@ -55,7 +55,7 @@ export default function OpenDeskMobile() {
 
   return (
     <>
-      <div className="hidden-desk w-[22.5rem]  mx-auto">
+      <div className="hidden-desk w-full mx-auto">
         <Image
           src="/images/office/1.jpeg"
           height={293}
@@ -65,7 +65,7 @@ export default function OpenDeskMobile() {
         <div className="">
           <div
             onClick={toggleUp}
-            className={`overflow-y-scroll scrollbar-hide flex flex-col items-center  pt-3 rounded-t-3xl  bg-[#E4EEFF] w-[22.5rem] transition-transform duration-1000 ${
+            className={`overflow-y-scroll scrollbar-hide flex flex-col items-center  pt-3 rounded-t-3xl  bg-[#E4EEFF] w-ful transition-transform duration-1000 ${
               isUp ? 'translate-y-[-120px]' : ''
             }`}
             style={{ height: isUp ? '42.25rem' : '42.25rem' }}
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 5418933..c823ad3 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -5,11 +5,8 @@ import AuthContext from '@/context/AuthContext';
 import AuthorizationHeader from '@/context/AuthorizationHeader';
 
 import type { Metadata } from 'next';
-<<<<<<< HEAD
 import RecoilProvider from '@/context/Provider';
-=======
 import QueryProvider from '@/context/QueryProvider';
->>>>>>> dev
 
 export const metadata: Metadata = {
   title: 'Create Next App',
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 040e7e5..aee2d6e 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,7 +1,7 @@
 import type { Metadata } from 'next';
 import { getServerSession } from 'next-auth';
 import NoneLoginHome from './(home)/components/noneLogin/NoneLoginHome';
-import Test from './(auth)/Test';
+
 import { authOptions } from './api/auth/authOptions';
 
 export const metadata: Metadata = {
@@ -18,8 +18,7 @@ export default async function Home() {
     return (
       <>
         <h1>main</h1>
-        {/* 임시 로그아웃버튼 */}
-        <Test />
+
       </>
     );
   }
diff --git a/src/styles/reservation.css b/src/styles/reservation.css
index 4c2f6e9..01b67d2 100644
--- a/src/styles/reservation.css
+++ b/src/styles/reservation.css
@@ -13,7 +13,7 @@
     display: none;
   }
 }
-@media (max-width: 400px) {
+@media (max-width: 766px) {
   .btn-hidden {
     display: block;
   }
@@ -24,7 +24,7 @@
     display: none;
   }
 }
-@media (max-width: 360px) {
+@media (max-width: 766px) {
   .hidden-md {
     display: block;
   }

From ae5e254e47e3f2da833cf3eca18142761db1ba70 Mon Sep 17 00:00:00 2001
From: mac <mac@macui-MacBookPro.local>
Date: Sun, 2 Jun 2024 22:22:15 -0700
Subject: [PATCH 11/14] =?UTF-8?q?=EC=9D=B4=EB=AF=B8=EC=A7=80=20=EA=B2=BD?=
 =?UTF-8?q?=EB=A1=9C=20/=20=EC=B6=94=EA=B0=80?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/app/(search)/map/components/BuildingFilter.tsx | 10 +++++-----
 src/app/(search)/map/components/Marker.tsx         |  4 ++--
 2 files changed, 7 insertions(+), 7 deletions(-)

diff --git a/src/app/(search)/map/components/BuildingFilter.tsx b/src/app/(search)/map/components/BuildingFilter.tsx
index 8dd3eb9..45fdae7 100644
--- a/src/app/(search)/map/components/BuildingFilter.tsx
+++ b/src/app/(search)/map/components/BuildingFilter.tsx
@@ -103,7 +103,7 @@ export default function BuildingFilter({
           <div className="flex items-center">
             <span className="mr-2">지역 선택</span>
             <Image
-              src="svg/map/arrow.svg"
+              src="/svg/map/arrow.svg"
               width={24}
               height={24}
               alt="화살표"
@@ -133,7 +133,7 @@ export default function BuildingFilter({
                   선택 초기화
                 </p>
                 <Image
-                  src="svg/reservation/reset.svg"
+                  src="/svg/reservation/reset.svg"
                   width={12}
                   height={12}
                   alt="필터 초기화"
@@ -142,7 +142,7 @@ export default function BuildingFilter({
               <Image
                 className="btn-hidden"
                 onClick={() => setSelectedRegion(false)}
-                src="svg/reservation/cancel.svg"
+                src="/svg/reservation/cancel.svg"
                 width={18}
                 height={18}
                 alt="취소"
@@ -213,7 +213,7 @@ export default function BuildingFilter({
       >
         <div className="flex items-center">
           <span className="mr-2 ">산업군</span>
-          <Image src="svg/map/arrow.svg" width={24} height={24} alt="화살표" />
+          <Image src="/svg/map/arrow.svg" width={24} height={24} alt="화살표" />
         </div>
       </div>
       {selectedIndustry && (
@@ -248,7 +248,7 @@ export default function BuildingFilter({
           <div className="flex items-center">
             <span className="mr-2">직군</span>
             <Image
-              src="svg/map/arrow.svg"
+              src="/svg/map/arrow.svg"
               width={24}
               height={24}
               alt="화살표"
diff --git a/src/app/(search)/map/components/Marker.tsx b/src/app/(search)/map/components/Marker.tsx
index 90869d9..fbd81be 100644
--- a/src/app/(search)/map/components/Marker.tsx
+++ b/src/app/(search)/map/components/Marker.tsx
@@ -31,7 +31,7 @@ export default function Marker({
                 <p class="font-bold text-lg">${office.location}</p>
                 <div class="bg-white text-black group-hover:block hidden items-center">
                   <div class="flex gap-1 items-center">
-                    <Image src="svg/map/star.svg" width={18} height={18} alt="별점이미지" />
+                    <Image src="/svg/map/star.svg" width={18} height={18} alt="별점이미지" />
                     <b>${office.avg_rating} (${office.review_count})</b>
                   </div>
                 </div>
@@ -41,7 +41,7 @@ export default function Marker({
                   <p class="text-xs">${office.traffic}</p>
                 </span>
                 <span class="flex gap-2 items-center text-gray-400">
-                  <Image src="svg/map/cow.svg" width={18} height={18} alt="소이미지" />
+                  <Image src="/svg/map/cow.svg" width={18} height={18} alt="소이미지" />
                   <span>소모임 ${office.club_count} 개</span>
                 </span>
                 <button class="absolute bottom-4 right-5 font-bold w-[4rem] h-[2rem] bg-[#688AF2] rounded-xl text-white">

From 411283c11eced9ed17f7cf9fd3240708160e0a7e Mon Sep 17 00:00:00 2001
From: mac <mac@macui-MacBookPro.local>
Date: Mon, 3 Jun 2024 00:25:41 -0700
Subject: [PATCH 12/14] =?UTF-8?q?buildingList=20style=20=EC=88=98=EC=A0=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .eslintrc.json                                |  1 -
 .../map/components/BuildingFilter.tsx         | 27 ++++++++++++-------
 .../(search)/map/components/BuildingInfo.tsx  |  3 ++-
 .../(search)/map/components/BuildingItem.tsx  | 15 ++++++-----
 .../(search)/map/components/BuildingList.tsx  |  6 ++---
 .../[id]/components/MonthPassMembership.tsx   | 22 ++++++++-------
 .../table/mobile/OpenDeskMobile.tsx           | 21 +++++++++------
 src/app/(search)/reservation/[id]/page.tsx    |  2 +-
 8 files changed, 56 insertions(+), 41 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index b9eddc1..00007ac 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -2,7 +2,6 @@
   "extends": [
     "next/core-web-vitals",
     "prettier",
-    "eslint:recommended",
     "plugin:prettier/recommended"
   ],
   "plugins": ["prettier"],
diff --git a/src/app/(search)/map/components/BuildingFilter.tsx b/src/app/(search)/map/components/BuildingFilter.tsx
index 45fdae7..6f133a9 100644
--- a/src/app/(search)/map/components/BuildingFilter.tsx
+++ b/src/app/(search)/map/components/BuildingFilter.tsx
@@ -87,7 +87,7 @@ export default function BuildingFilter({
   };
 
   return (
-    <div className="justify-start mb:pl-4 flex gap-2 md:pl-0 mb:w-[22.5rem] md:w-[26.6875rem] items-center">
+    <div className="justify-center mb:pl-4 flex gap-2 md:pl-0 mb:w-[22.5rem] md:w-[26.6875rem] items-center ">
       <div
         className={`bg-white rounded-t-md ${
           selectedRegion
@@ -97,7 +97,8 @@ export default function BuildingFilter({
       >
         <div
           onClick={handleRegionClick}
-          className="flex mb:w-[6.5625rem] mb:h-[2rem] mb:text-[0.75rem]  
+          className="flex mx-auto
+          mb:w-[6.5625rem] mb:h-[2rem] mb:text-[0.75rem]  
           md:text-[1rem] md:w-[10.0625rem] md:h-[2.5rem] rounded-md items-center justify-center cursor-pointer shadow-md transition-all duration-1000"
         >
           <div className="flex items-center">
@@ -114,9 +115,9 @@ export default function BuildingFilter({
       {selectedRegion && (
         <div
           className="
-        md:absolute md:top-[80px] md:left-7 md:right-0 md:bottom-0 md:w-[26.6875rem] md:h-[30rem]
-        mb:w-[20.5rem] mb:h-[22.25rem] mb:fixed p-4 mb:top-20 mb:left-5 mb:right-0 mb:bottom-0 
-        bg-white z-50 shadow-lg rounded-xl border border-gray-300"
+        md:absolute md:top-[70px] md:w-[26.6875rem] md:h-[30rem]
+        mb:absolute mb:w-[20.5rem] mb:h-[22.25rem] p-4 mb:top-[70px] 
+        bg-white z-50 shadow-lg rounded-xl border border-gray-300 transform -translate-x-1 -translate-y-1"
         >
           <div className="flex justify-between items-center">
             <h1
@@ -217,7 +218,10 @@ export default function BuildingFilter({
         </div>
       </div>
       {selectedIndustry && (
-        <div className="absolute p-4 top-20 bg-white w-[26.6875rem] h-[27rem] z-50 shadow-lg rounded-md border border-gray-300">
+        <div className="
+        md:absolute md:top-[70px] md:w-[26.6875rem] md:h-[30rem]
+        mb:absolute mb:w-[20.5rem] mb:h-[22.25rem] p-4 mb:top-[70px] 
+        bg-white z-50 shadow-lg rounded-xl border border-gray-300 transform -translate-x-1 -translate-y-1">
           <h1
             className="
                    mb:text-[1rem] md:font-bold
@@ -230,7 +234,8 @@ export default function BuildingFilter({
           <ul className="p-2 grid grid-cols-4 gap-4">
             {Industry.map((industry) => (
               <li key={industry}>
-                <button className="bg-white border-2 w-full rounded-md">
+                <button className="md:w-[5.25rem] md:h-[3rem] mb:w-[4.25rem] mb:h-[2rem] bg-white border-2 rounded-xl
+                mb:text-xs md:text-[1rem]">
                   {industry}
                 </button>
               </li>
@@ -257,7 +262,10 @@ export default function BuildingFilter({
         </div>
       </div>
       {selectedOccupation && (
-        <div className="absolute p-4 top-20 bg-white w-[26.6875rem] h-[27rem] z-50 shadow-lg rounded-md border border-gray-300">
+        <div className="
+        md:absolute md:top-[70px] md:w-[26.6875rem] md:h-[30rem]
+        mb:absolute mb:w-[20.5rem] mb:h-[22.25rem] p-4 mb:top-[70px] 
+        bg-white z-50 shadow-lg rounded-xl border border-gray-300 transform -translate-x-1 -translate-y-1">
           <h1
             className="
                    mb:text-[1rem] md:font-bold
@@ -269,7 +277,8 @@ export default function BuildingFilter({
           <ul className="p-2 grid grid-cols-4 gap-4">
             {Occupation.map((occupation) => (
               <li key={occupation}>
-                <button className="bg-white border-2 w-full rounded-md">
+                <button className="md:w-[5.25rem] md:h-[3rem] mb:w-[4.25rem] mb:h-[2rem] bg-white border-2 rounded-xl
+                mb:text-xs md:text-[1rem]">
                   {occupation}
                 </button>
               </li>
diff --git a/src/app/(search)/map/components/BuildingInfo.tsx b/src/app/(search)/map/components/BuildingInfo.tsx
index f7d8bdf..42f9470 100644
--- a/src/app/(search)/map/components/BuildingInfo.tsx
+++ b/src/app/(search)/map/components/BuildingInfo.tsx
@@ -11,7 +11,8 @@ export default function BuildingInfo() {
   return (
     <>
       <div
-        className="hidden-md rounded-3xl flex flex-col  top-[110px] w-[30.6875rem] h-[56.75rem]  absolute ease-in duration-300 shadow-2xl right-[530px] bottom-5 z-10 bg-white p-0 m-0 
+        className="hidden-md mb:h-[43.25rem] mb:w-full md:w-[30.6875rem] md:h-[56.75rem] 
+        rounded-3xl flex flex-col top-[110px] absolute ease-in duration-300 shadow-2xl right-[530px] bottom-5 z-10 bg-white p-0 m-0 
        "
       >
         <div className="">
diff --git a/src/app/(search)/map/components/BuildingItem.tsx b/src/app/(search)/map/components/BuildingItem.tsx
index 59dc8b9..1d66de8 100644
--- a/src/app/(search)/map/components/BuildingItem.tsx
+++ b/src/app/(search)/map/components/BuildingItem.tsx
@@ -19,14 +19,15 @@ export default function BuildingItem({ officeBuildings }: BuildingItemProps) {
       {officeBuildings?.map((office, index) => (
         <div
           key={index}
-          className="flex justify-center px-2 py-2 rounded-sm z-40 "
+          className="flex justify-center p-2 md:rounded-lg mb:rounded-sm z-40 "
           onClick={() => {
             setCurrentBuilding(office);
             setShowInfo(true);
           }}
           
         >
-          <div className="flex gap-5  p-4 items-center bg-white rounded-md active:bg-blue-500 active:rounded-md active:text-white">
+          <div className="md:w-[26.6875rem] md:h-[8.5rem] mb:w-[20.5rem] mb:h-[5.875rem]  
+          flex gap-5 p-4 items-center bg-white rounded-md active:bg-blue-500 active:rounded-md active:text-white">
             <div>
               <Image
                 src="/images/office/check.png"
@@ -35,9 +36,9 @@ export default function BuildingItem({ officeBuildings }: BuildingItemProps) {
                 alt={`${office.building.location}`}
               />
             </div>
-            <div className="flex flex-col w-[16.6875rem] h-[5.125rem] justify-between">
+            <div className="flex flex-col mb:w-[14.125rem] md:w-[16.6875rem] mb:h-[3.875rem] md:h-[5.125rem] justify-between">
               <div className="flex justify-between">
-                <p className="font-bold text-lg">{office.building.location}</p>
+                <p className="font-bold mb:text-[1rem] md:text-lg">{office.building.location}</p>
                 {office.reviews &&
                   office.reviews.avg_rating &&
                   office.reviews.review_count && (
@@ -53,15 +54,15 @@ export default function BuildingItem({ officeBuildings }: BuildingItemProps) {
                     </div>
                   )}
               </div>
-              <p className="text-gray-300 text-sm">
+              <p className="text-gray-300 mb:text-[0.625rem] md:text-sm">
                 {office.building.traffic_info}
               </p>
-              <div className="flex gap-4 justify-between text-xs">
+              <div className="flex gap-4 justify-between mb:text-[0.625rem] md:text-xs">
                 <p>
                   {office.building.street} {office.building.adress}
                 </p>
                 <div>
-                  <button className="bg-blue-400 rounded-xl w-[3.8125rem] h-[1.6875rem] text-white p-1">
+                  <button className="bg-blue-400 rounded-lg mb:w-[3.375rem] mb:h-[1.4375rem] md:w-[3.8125rem] md:h-[1.6875rem] text-white p-1">
                     바로 예약
                   </button>
                 </div>
diff --git a/src/app/(search)/map/components/BuildingList.tsx b/src/app/(search)/map/components/BuildingList.tsx
index 584c890..bcbd367 100644
--- a/src/app/(search)/map/components/BuildingList.tsx
+++ b/src/app/(search)/map/components/BuildingList.tsx
@@ -38,15 +38,13 @@ export default function BuildingList({
       isUp ? 'mb:h-[43.25rem] mb:transition-all mb:duration-500 mb:ease-in-out' 
       : 'mb:h-[5.5rem] mb:transition-all mb:duration-500 mb:ease-in-out'
     }
-
-    md:fixed md:top-[110px] md:w-[30.6875rem] md:rounded-3xl md:shadow-2xl  md:right-[30px] md:bottom-5 flex flex-col bg-[#E4EEFF] md:h-[56.75rem]  z-10
-
+    md:fixed md:top-[110px] md:w-[30.6875rem] md:rounded-3xl md:shadow-2xl md:right-[30px] md:bottom-5 flex flex-col bg-[#E4EEFF] md:h-[56.75rem] z-10
           `}
       >
         <div className="pt-4 flex flex-col items-center mb-2 mx-auto">
           <BuildingFilter officeBuildings={officeBuildings} isUp={isUp}/>
         </div>
-        <div className="overflow-y-auto scrollbar-hide cursor-pointer  mt-3 ">
+        <div className="overflow-y-auto scrollbar-hide cursor-pointer mt-3 ">
           <BuildingItem officeBuildings={officeBuildings} />
         </div>
       </div>
diff --git a/src/app/(search)/reservation/[id]/components/MonthPassMembership.tsx b/src/app/(search)/reservation/[id]/components/MonthPassMembership.tsx
index 9f8f820..a248ff8 100644
--- a/src/app/(search)/reservation/[id]/components/MonthPassMembership.tsx
+++ b/src/app/(search)/reservation/[id]/components/MonthPassMembership.tsx
@@ -358,8 +358,8 @@ export default function MonthPassMembership({
                             </div>
                           </div>
                           <div className="flex items-center">
-                            {!isMobile ? (
-                              <div className="">
+            
+                              <div className="hidden-desk hidden-md">
                                 <button
                                   className="rounded-lg w-[4.625rem] h-[2rem] text-sm text-white font-semibold bg-[#FF4163]"
                                   onClick={() => removeReservation(index)}
@@ -367,14 +367,16 @@ export default function MonthPassMembership({
                                   선택 취소
                                 </button>
                               </div>
-                            ) : (
-                              <button
-                                className="rounded-lg w-[1.75rem] h-[1.75rem] text-sm text-white font-semibold bg-[#FF4163]"
-                                onClick={() => removeReservation(index)}
-                              >
-                                X
-                              </button>
-                            )}
+                    <div className="hidden-360">
+                        <button
+                                    className=" rounded-lg w-[1.75rem] h-[1.75rem] text-sm text-white font-semibold bg-[#FF4163]"
+                                    onClick={() => removeReservation(index)}
+                                  >
+                                    X
+                                  </button>
+                    </div>
+                
+                     
                           </div>
                         </div>
                       </div>
diff --git a/src/app/(search)/reservation/[id]/components/table/mobile/OpenDeskMobile.tsx b/src/app/(search)/reservation/[id]/components/table/mobile/OpenDeskMobile.tsx
index b276763..59fecb4 100644
--- a/src/app/(search)/reservation/[id]/components/table/mobile/OpenDeskMobile.tsx
+++ b/src/app/(search)/reservation/[id]/components/table/mobile/OpenDeskMobile.tsx
@@ -16,9 +16,6 @@ export default function OpenDeskMobile() {
   const [selectedSeatAll, setSelectedSeatAll] =
     useRecoilState(selectedSeatAllState);
   const [isUp, setIsUp] = useState(false);
-
-  const isMobile = useRecoilValue(mobileReservationLayoutState);
-  const minDesk = useRecoilState(minDeskLayoutState);
   const [seatList, setSeatList] = useRecoilState(seatListReservation);
 
   const setMobileConfirm = useSetRecoilState(mobileConfirmedState);
@@ -58,6 +55,7 @@ export default function OpenDeskMobile() {
       <div className="hidden-desk w-full mx-auto">
         <Image
           src="/images/office/1.jpeg"
+          layout="responsive"
           height={293}
           width={360}
           alt="요미"
@@ -120,11 +118,18 @@ export default function OpenDeskMobile() {
                   </div>
                 </div>
                 <button
-                  className="w-[5.75rem] h-[2.5rem] bg-[#A3A3AF] rounded-lg text-white"
-                  onClick={handleSeatReady}
-                >
-                  확정
-                </button>
+  className={`w-[5.75rem] h-[2.5rem] rounded-lg text-white ${
+    selectedSeatAll?.start_date &&
+    selectedSeatAll?.type &&
+    selectedSeatAll?.code
+      ? 'bg-[#688AF2]'
+      : 'bg-[#A3A3AF]'
+  }`}
+  onClick={handleSeatReady}
+>
+  확정
+</button>
+
               </div>
             </div>
           </div>
diff --git a/src/app/(search)/reservation/[id]/page.tsx b/src/app/(search)/reservation/[id]/page.tsx
index 433ec41..4862436 100644
--- a/src/app/(search)/reservation/[id]/page.tsx
+++ b/src/app/(search)/reservation/[id]/page.tsx
@@ -21,7 +21,7 @@ export default function Reservation({ params }: ReservationParamProps) {
 
   return (
     <>
-      <div className="md:flex justify-center">
+      <div className="mt-[5rem] md:flex justify-center">
         <div className="md:flex md:w-[95rem] mb:w-full mx-auto pt-2 gap-4">
           <div className="flex justify-center">
             {/* 패스구입  UI*/}

From 67c992f5b436494d5db8f88d300ab8a22b9740df Mon Sep 17 00:00:00 2001
From: mac <mac@macui-MacBookPro.local>
Date: Mon, 3 Jun 2024 02:33:38 -0700
Subject: [PATCH 13/14] [Disign] buildinginfomobilepublishing

---
 ...46\264\353\236\231\354\212\244\353\243\270.svg" |  8 ++++++++
 .../service/\353\247\245\354\243\274.svg"          | 10 ++++++++++
 .../\354\232\260\355\216\270\355\225\250.svg"      | 14 ++++++++++++++
 .../\355\217\260\353\266\200\354\212\244.svg"      |  8 ++++++++
 4 files changed, 40 insertions(+)
 create mode 100644 "public/svg/reservation/service/\353\246\264\353\236\231\354\212\244\353\243\270.svg"
 create mode 100644 "public/svg/reservation/service/\353\247\245\354\243\274.svg"
 create mode 100644 "public/svg/reservation/service/\354\232\260\355\216\270\355\225\250.svg"
 create mode 100644 "public/svg/reservation/service/\355\217\260\353\266\200\354\212\244.svg"

diff --git "a/public/svg/reservation/service/\353\246\264\353\236\231\354\212\244\353\243\270.svg" "b/public/svg/reservation/service/\353\246\264\353\236\231\354\212\244\353\243\270.svg"
new file mode 100644
index 0000000..c4f492a
--- /dev/null
+++ "b/public/svg/reservation/service/\353\246\264\353\236\231\354\212\244\353\243\270.svg"
@@ -0,0 +1,8 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Component 208">
+<path id="Vector" d="M24.875 15.8691C27.6364 15.8691 29.875 13.6306 29.875 10.8691C29.875 8.10772 27.6364 5.86914 24.875 5.86914C22.1136 5.86914 19.875 8.10772 19.875 10.8691C19.875 13.6306 22.1136 15.8691 24.875 15.8691Z" fill="#FCF697" stroke="black" stroke-miterlimit="10"/>
+<path id="Vector_2" d="M26.5645 36.8309V36.8409C26.5645 38.5641 27.9613 39.9609 29.6845 39.9609H35.5245C37.2476 39.9609 38.6445 38.5641 38.6445 36.8409V36.8309C38.6445 35.1078 37.2476 33.7109 35.5245 33.7109H29.6845C27.9613 33.7109 26.5645 35.1078 26.5645 36.8309Z" fill="#FCF697" stroke="black" stroke-miterlimit="10"/>
+<path id="Vector_3" d="M11.1152 36.8192V36.8292C11.1152 38.5523 12.5121 39.9492 14.2352 39.9492H29.1452C30.8684 39.9492 32.2652 38.5523 32.2652 36.8292V36.8192C32.2652 35.0961 30.8684 33.6992 29.1452 33.6992H14.2352C12.5121 33.6992 11.1152 35.0961 11.1152 36.8192Z" fill="#FCF697" stroke="black" stroke-miterlimit="10"/>
+<path id="Vector_4" d="M40.2644 30.7199L34.4044 25.3299L32.4444 19.9799C31.8944 18.6599 31.2144 17.6699 29.3244 17.6699H28.3244H21.3144H20.3144C19.3144 17.6799 17.9044 18.3799 17.3044 19.9899L15.3544 25.3399L9.49443 30.7299C8.72443 31.4399 8.67443 32.6499 9.38443 33.4199C10.0944 34.1899 11.3044 34.2399 12.0744 33.5299L18.1644 27.9299C18.2444 27.8499 18.3244 27.7699 18.3844 27.6799C18.5644 27.4999 18.7044 27.2799 18.7944 27.0199L19.3144 25.5899V33.7099H30.3244V25.2399L30.9744 27.0199C31.0644 27.2699 31.2044 27.4899 31.3844 27.6799C31.4544 27.7699 31.5244 27.8499 31.6044 27.9299L37.6944 33.5299C38.4644 34.2399 39.6744 34.1899 40.3844 33.4199C41.0944 32.6499 41.0444 31.4399 40.2744 30.7299L40.2644 30.7199Z" fill="#FCF697" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git "a/public/svg/reservation/service/\353\247\245\354\243\274.svg" "b/public/svg/reservation/service/\353\247\245\354\243\274.svg"
new file mode 100644
index 0000000..9f9c230
--- /dev/null
+++ "b/public/svg/reservation/service/\353\247\245\354\243\274.svg"
@@ -0,0 +1,10 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Component 208">
+<path id="Vector" d="M34.7959 19.7402L34.7559 23.4402C37.2159 23.4402 39.2259 24.3602 39.2259 26.6102V29.9002C39.2259 32.1502 37.2159 33.0702 34.7559 33.0702L34.7959 36.7702C39.2159 36.7702 42.8359 34.3802 42.8359 30.3402V26.1702C42.8359 22.1302 39.2159 19.7402 34.7959 19.7402Z" fill="#FAEC23" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M9.04492 36.3802C9.04492 39.4702 11.5749 42.0002 14.6649 42.0002H30.0049C33.0949 42.0002 35.6249 39.4702 35.6249 36.3802V17.4102H9.04492V36.3802Z" fill="#FAEC23" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M22.3449 21.8594H22.3349C21.2083 21.8594 20.2949 22.7727 20.2949 23.8994V35.3194C20.2949 36.446 21.2083 37.3594 22.3349 37.3594H22.3449C23.4716 37.3594 24.3849 36.446 24.3849 35.3194V23.8994C24.3849 22.7727 23.4716 21.8594 22.3449 21.8594Z" fill="#FEF9C1" stroke="black"/>
+<path id="Vector_4" d="M15.8352 21.8594H15.8252C14.6985 21.8594 13.7852 22.7727 13.7852 23.8994V35.3194C13.7852 36.446 14.6985 37.3594 15.8252 37.3594H15.8352C16.9618 37.3594 17.8752 36.446 17.8752 35.3194V23.8994C17.8752 22.7727 16.9618 21.8594 15.8352 21.8594Z" fill="#FEF9C1" stroke="black"/>
+<path id="Vector_5" d="M28.8645 21.8594H28.8545C27.7278 21.8594 26.8145 22.7727 26.8145 23.8994V35.3194C26.8145 36.446 27.7278 37.3594 28.8545 37.3594H28.8645C29.9911 37.3594 30.9045 36.446 30.9045 35.3194V23.8994C30.9045 22.7727 29.9911 21.8594 28.8645 21.8594Z" fill="#FEF9C1" stroke="black"/>
+<path id="Vector_6" d="M35.6345 17.4C35.7445 16.96 35.8045 14.73 35.8045 14.26C35.8045 11.13 33.0945 8.6 29.9745 8.6C28.9445 8.6 27.9745 8.88 27.1445 9.37C26.2645 7.39 24.2845 6 21.9745 6C19.7845 6 17.8945 7.24 16.9545 9.06C16.2645 8.77 15.5145 8.6 14.7245 8.6C11.5945 8.6 8.89453 11.13 8.89453 14.26C8.89453 14.73 8.95453 16.96 9.06453 17.4H35.6445H35.6345Z" fill="#FEFDE6" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git "a/public/svg/reservation/service/\354\232\260\355\216\270\355\225\250.svg" "b/public/svg/reservation/service/\354\232\260\355\216\270\355\225\250.svg"
new file mode 100644
index 0000000..147cbf3
--- /dev/null
+++ "b/public/svg/reservation/service/\354\232\260\355\216\270\355\225\250.svg"
@@ -0,0 +1,14 @@
+<svg width="49" height="48" viewBox="0 0 49 48" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Component 208">
+<path id="Vector" d="M16.8145 15.2305H35.2645C38.6145 15.2305 41.3445 17.9505 41.3445 21.3105V33.9805H16.8145V15.2305Z" fill="#FF645C" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_2" d="M16.0956 15.2305H17.5356C20.8856 15.2305 23.6156 17.9505 23.6156 21.3105V33.9805H10.0156V21.3105C10.0156 17.9605 12.7356 15.2305 16.0956 15.2305Z" fill="#DD3E38" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M32.0742 26.6094C33.1788 26.6094 34.0742 25.7139 34.0742 24.6094C34.0742 23.5048 33.1788 22.6094 32.0742 22.6094C30.9696 22.6094 30.0742 23.5048 30.0742 24.6094C30.0742 25.7139 30.9696 26.6094 32.0742 26.6094Z" fill="#EEEEEE" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_4" d="M32.0742 10.1797V22.6097" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_5" d="M37.1242 8.89062H32.0742V11.4706H37.1242V8.89062Z" fill="#97BAFE" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_6" d="M20.2757 21.4297H7.3457V29.5997H20.2757V21.4297Z" fill="#D0D0D8" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_7" d="M7.3457 29.6005L13.8157 23.9805" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_8" d="M20.2745 29.6005L13.8145 23.9805" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_9" d="M30.2852 33.9805H26.1152V42.0005H30.2852V33.9805Z" fill="#FFD4D8" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_10" d="M13.8157 26.5597L20.2757 21.4297H7.3457L13.8157 26.5597Z" fill="#D0D0D8" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>
diff --git "a/public/svg/reservation/service/\355\217\260\353\266\200\354\212\244.svg" "b/public/svg/reservation/service/\355\217\260\353\266\200\354\212\244.svg"
new file mode 100644
index 0000000..43225cc
--- /dev/null
+++ "b/public/svg/reservation/service/\355\217\260\353\266\200\354\212\244.svg"
@@ -0,0 +1,8 @@
+<svg width="40" height="42" viewBox="0 0 40 42" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g id="Group">
+<path id="Vector" d="M38.1762 5.06041C37.4062 3.35041 36.0462 2.01041 34.3962 1.18041C33.3362 0.640408 32.0462 1.32041 31.7962 2.48041L31.4562 4.05041C31.2362 5.06041 31.8762 6.05041 32.8862 6.27041L34.0862 6.53041C34.7462 6.67041 35.2262 7.24041 35.2662 7.91041C35.4062 10.2004 34.8462 12.7904 33.7662 14.8204C33.4462 15.4204 32.7762 15.7304 32.1162 15.5904L30.9162 15.3304C29.9062 15.1104 28.9162 15.7504 28.6962 16.7604L28.3462 18.3804C28.0962 19.5304 28.9562 20.6704 30.1362 20.6404C36.1262 20.4904 40.0262 13.4004 38.9562 7.58041C38.8062 6.68041 38.5462 5.84041 38.1862 5.05041L38.1762 5.06041Z" fill="#FF513F" stroke="black" stroke-miterlimit="10"/>
+<path id="Vector_2" d="M19.045 10.87V5C19.045 3.9 18.145 3 17.045 3H4.125C3.025 3 2.125 3.9 2.125 5V11.76C2.125 12.86 3.025 13.76 4.125 13.76H21.825L19.045 10.87Z" fill="#F9C00D" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+<path id="Vector_3" d="M2.07568 25.41C2.84568 23.7 4.20568 22.36 5.85568 21.53C6.91568 20.99 8.20568 21.67 8.45568 22.83L8.79568 24.4C9.01568 25.41 8.37568 26.4 7.36568 26.62L6.16568 26.88C5.50568 27.02 5.02568 27.59 4.98568 28.26C4.84568 30.55 5.40568 33.14 6.48568 35.17C6.80568 35.77 7.47568 36.08 8.13568 35.94L9.33568 35.68C10.3457 35.46 11.3357 36.1 11.5557 37.11L11.9057 38.73C12.1557 39.88 11.2957 41.02 10.1157 40.99C4.12568 40.84 0.225684 33.75 1.29568 27.93C1.44568 27.03 1.70568 26.19 2.06568 25.4L2.07568 25.41Z" fill="#EEEEEE" stroke="black" stroke-miterlimit="10"/>
+<path id="Vector_4" d="M21.2058 36.1102V30.2402C21.2058 29.1402 22.1058 28.2402 23.2058 28.2402H36.1258C37.2258 28.2402 38.1258 29.1402 38.1258 30.2402V37.0002C38.1258 38.1002 37.2258 39.0002 36.1258 39.0002H18.4258L21.2058 36.1102Z" fill="#688AF2" stroke="black" stroke-linecap="round" stroke-linejoin="round"/>
+</g>
+</svg>

From ecdfb3b617fc05ccfe6927eed36df3a438432966 Mon Sep 17 00:00:00 2001
From: k-wisdom <bnm1354@gmail.com>
Date: Mon, 3 Jun 2024 10:19:21 +0900
Subject: [PATCH 14/14] [Fix] .eslintrc.json

---
 .eslintrc.json | 4 ----
 1 file changed, 4 deletions(-)

diff --git a/.eslintrc.json b/.eslintrc.json
index 949e069..00007ac 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -1,11 +1,7 @@
 {
   "extends": [
     "next/core-web-vitals",
-<<<<<<< HEAD
     "prettier",
-=======
-    "eslint:recommended",
->>>>>>> origin/dev
     "plugin:prettier/recommended"
   ],
   "plugins": ["prettier"],