Merge pull request #62 from 2024-Team-Techeer-Salon/design/#61

[design] 다크모드 시 라이트모드 디자인으로 적용되도록 디자인 등

src/app/components/Icon.tsx

@@ -1,4 +1,5 @@
 import { iconClassnameProps } from '@/types/component.ts';
+import Image from 'next/image';
 
 export function GpsIcon({ className }: iconClassnameProps) {
   return (
@@ -71,3 +72,14 @@ export function CameraIcon({ className }: iconClassnameProps) {
     </svg>
   );
 }
+
+export function Marker({ className }: iconClassnameProps) {
+  <figure className={`relative ${className}`}>
+    <Image
+      src="https://i.ibb.co/sCQvt3z/Group-2608599.png"
+      alt=""
+      fill
+      sizes="100vw"
+    />
+  </figure>;
+}

src/app/components/MannerStatBar.tsx

@@ -4,7 +4,7 @@ function MannerStatBar({ mannerStat }: { mannerStat: number }) {
   return (
     <div className="ml-10 mt-2 flex w-full flex-col p-2">
       <div className="flex flex-row">
-        <p className="w-full pl-1 text-sm font-light">매너스탯</p>
+        <p className="w-full pl-1 text-sm text-black">매너스탯</p>
         <p className="w-full pr-2 text-right text-sm font-semibold">
           {mannerStatTranslate(mannerStat)}
         </p>

src/app/components/Post.tsx

@@ -12,11 +12,11 @@ function Post({ titleImage, title, location, meetingId, endTime }: postProps) {
       className="m-4 flex cursor-pointer flex-col justify-center"
       href={`/meeting/${meetingId}`}
     >
-      <figure className="relative flex h-32 w-32 sm:h-40 sm:w-40 md:h-48 md:w-48 lg:h-56 lg:w-56">
+      <figure className="relative flex h-32 w-32 rounded-lg shadow-xl sm:h-40 sm:w-40 md:h-48 md:w-48 lg:h-56 lg:w-56">
         <Image
           src={titleImage}
           alt={titleImage}
-          className="relative rounded-lg object-cover "
+          className="relative rounded-lg object-cover"
           fill
           sizes="100vm"
         />

src/app/home/Body.tsx

@@ -213,7 +213,7 @@ function Distance() {
                   position={{ lat: marker.lat, lng: marker.lng }}
                   onClick={() => handleMain(marker)}
                   image={{
-                    src: 'https://i.ibb.co/Cnwf3x8/image.png',
+                    src: 'https://i.ibb.co/sCQvt3z/Group-2608599.png',
                     size: { width: 64, height: 70 },
                     options: { offset: { x: 27, y: 69 } },
                   }}

src/app/layout.tsx

@@ -31,7 +31,9 @@ export default function RootLayout({
           <Suspense fallback={<div>로딩중인데요?ㅋㅋ</div>}>
             <Header />
             <StoreProvider>
-              <div className="flex min-h-screen w-full">{children}</div>
+              <div className="flex min-h-screen min-w-full justify-center">
+                {children}
+              </div>
             </StoreProvider>
             <Footer />
           </Suspense>

src/app/meeting/[meetingParam]/MeetingHeader.tsx

@@ -101,7 +101,7 @@ function MeetingHeader({
               ref={detailsRef}
               className="dropdown dropdown-end dropdown-bottom"
             >
-              <summary className="btn btn-circle mt-1">
+              <summary className="btn btn-circle mt-1 border-none bg-zinc-100 hover:bg-zinc-200">
                 {' '}
                 <svg
                   xmlns="http://www.w3.org/2000/svg"
@@ -116,7 +116,7 @@ function MeetingHeader({
                   <circle cx="12" cy="18" r="1.5" fill="currentColor" />
                 </svg>
               </summary>
-              <ul className="menu dropdown-content z-[10] w-52 rounded-box bg-base-100 p-2 shadow">
+              <ul className="menu dropdown-content z-[10] w-52 rounded-box bg-white p-2 shadow">
                 {!endTime && (
                   <li>
                     <a

src/app/posts/page.tsx

@@ -526,7 +526,7 @@ function page() {
                 placeholder="주소"
               />
               <button
-                className="btn h-12 w-32 bg-[#e0e0e0] text-sm text-white hover:bg-[#0a0a0a] sm:text-base"
+                className="btn h-12 w-32 border-none bg-gray-200 text-sm text-zinc-500 hover:bg-gray-300 sm:text-base"
                 onClick={() => setMeetingAddressModalOpen(true)}
               >
                 주소 검색
@@ -761,7 +761,7 @@ function page() {
         )}
         <div className="mt-12 flex w-full flex-row justify-end">
           <button
-            className="btn h-12 w-32 bg-[#dadada] text-white hover:bg-[#202020]"
+            className="btn h-12 w-32 border-none bg-gray-200 text-sm text-zinc-500 hover:bg-gray-300 sm:text-base"
             onClick={handlePostMeetings}
             type="button"
           >

src/app/signup/page.tsx

@@ -1,3 +1,5 @@
+/* eslint-disable react-hooks/rules-of-hooks */
+
 'use client';
 
 import { Montserrat } from 'next/font/google';
@@ -13,7 +15,7 @@ import WarningAlert from '../components/WarningAlert.tsx';
 
 const mont = Montserrat({ subsets: ['latin'], weight: ['400'] });
 
-function Page() {
+function page() {
   const today = dayjs();
   const [selectedRadio, setSelectedRadio] = useState<string>('radio-1');
   const [birthDate, setBirthDate] = useState<Dayjs | null>(today);
@@ -71,10 +73,10 @@ function Page() {
   };
 
   return (
-    <div className="flex flex-col items-center">
+    <div className="flex h-screen w-screen flex-col items-center justify-center">
       <WarningAlert errorMessage={errorMessage} showAlert={showAlert} />
       <div>
-        <h1 className="mb-14 mt-20 flex flex-row text-3xl font-light">
+        <h1 className="mb-14 flex flex-row text-3xl font-light">
           <p
             className={`text-center text-xl sm:text-xl lg:text-3xl ${mont.className}`}
           >
@@ -96,7 +98,7 @@ function Page() {
             type="radio"
             name="radio-1"
             style={{ width: '18px', height: '18px' }}
-            className="radio mr-2"
+            className="radio mr-2 text-white"
             value="radio-1"
             checked={selectedRadio === 'radio-1'}
             onChange={handleRadioChange}
@@ -129,7 +131,7 @@ function Page() {
         </div>
         <input
           type="text"
-          className="input mb-4 h-10 w-60 border border-b border-black sm:w-60 lg:w-80"
+          className="input mb-4 h-10 w-60 border border-b border-zinc-400 bg-white sm:w-60 lg:w-80"
           value={name}
           onChange={(event) => setName(event.target.value)}
         />
@@ -138,7 +140,7 @@ function Page() {
         </div>
         <input
           type="text"
-          className="input mb-4 h-10 w-60 border border-b border-black sm:w-60 lg:w-80"
+          className="border- input mb-4 h-10 w-60 border border-zinc-400 bg-white sm:w-60 lg:w-80"
           value={location}
           onChange={(event) => setLocation(event.target.value)}
         />
@@ -153,4 +155,4 @@ function Page() {
   );
 }
 
-export default Page;
+export default page;

src/app/styles/globals.css

@@ -2,14 +2,35 @@
 @tailwind components;
 @tailwind utilities;
 
+/* 시스템이 다크 모드 설정이라도 라이트 모드 스타일을 강제 적용 */
+@media (prefers-color-scheme: dark) {
+  body,
+  button,
+  input,
+  textarea,
+  input,
+  select {
+    background-color: #ffffff; /* 백색 배경 */
+    color: #000000; /* 검정색 텍스트 */
+    border-color: #cccccc; /* 회색 테두리 */
+  }
+  .radio:checked {
+    background-color: white; /* 배경색 */
+    border: 1px solid #ccc; /* 테두리 색상 */
+  }
+  a {
+    color: #000000; /* 기본 링크 색상 */
+  }
+}
+
 /* 웹킷(Chrome, Safari 등) 브라우저의 스크롤바 */
 ::-webkit-scrollbar {
   width: 0.4rem; /* 스크롤바의 너비 */
 }
 
 /* 스크롤바의 Track (배경) */
 ::-webkit-scrollbar-track {
-  background: transparent;
+  background: #f5f5f5;
 }
 
 /* 스크롤바의 Thumb (드래그할 수 있는 부분) */