Profile page styling

app/(main)/components/PhotoUpload.module.css

@@ -0,0 +1,99 @@
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  position: relative;
+}
+
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  overflow: hidden;
+  border: 1px dashed #cbd5e0;
+  background: #fff;
+  cursor: pointer;
+  transition:
+    border-color 0.2s ease,
+    background 0.2s ease;
+}
+
+.container img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.container:hover {
+  border-color: #2d3748;
+  background: #edf2f7;
+}
+
+.container.hasPhoto {
+  border: none;
+}
+
+.container.dragging {
+  border-color: #2d3748;
+  background: #e2e8f0;
+  transform: scale(1.05);
+}
+
+.circle {
+  width: 12.5rem;
+  height: 12.5rem;
+  border-radius: 50%;
+}
+
+.rectangle {
+  width: 100%;
+  aspect-ratio: 1;
+  border-radius: 0.5rem;
+}
+
+.placeholder {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 0.25rem;
+  padding: 0.75rem;
+  text-align: center;
+  color: #000;
+  width: 100%;
+  height: 100%;
+}
+
+.placeholder .placeholderImage {
+  width: 2rem;
+  height: 2rem;
+}
+
+.removeButton {
+  position: absolute;
+  top: -1rem;
+  right: -1rem;
+  width: 2rem;
+  height: 2rem;
+  border-radius: 50%;
+  font-weight: 600;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: 0.2s ease;
+  background-color: #ffefef;
+  border-color: #c53030;
+  border: 1px solid;
+  color: #c53030;
+}
+
+.removeButton:hover {
+  background-color: #f1c9c9;
+}
+
+.removeButtonCircle {
+  top: 0.8rem;
+  right: 0.8rem;
+}

app/(main)/components/PhotoUpload.tsx

@@ -1,55 +1,133 @@
 'use client';
 
-import { forwardRef, useImperativeHandle, useRef } from 'react';
-import React from 'react';
-
-type FileUploaderProps = {
-  onFileSelect: (file: File) => void;
-  inputRef: React.RefObject<HTMLInputElement | null>;
-};
-
-const FileUploader = ({ onFileSelect, inputRef }: FileUploaderProps) => {
-  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
-    const file = event.target.files?.[0];
-    if (file) {
-      onFileSelect(file);
-    }
-  };
-
-  return (
-    <input
-      ref={inputRef}
-      type="file"
-      accept="image/*"
-      onChange={handleFileChange}
-    />
-  );
-};
+import { forwardRef, useImperativeHandle, useRef, useState } from 'react';
+import Image from 'next/image';
+import defaultProfilePhoto from '@/public/image-placeholder.svg';
+import uploadPhotoIcon from '@/public/image-upload.svg';
+import styles from '@/app/(main)/components/PhotoUpload.module.css';
 
 type PhotoUploadProps = {
+  variant?: 'circle' | 'rectangle';
+  initialPhotoUrl?: string | null;
   onFileSelect?: (file: File) => void;
+  onRemove?: () => void;
+  previewUrl?: string | null;
+  isPendingDelete?: boolean;
+  id?: string;
 };
 
 const PhotoUpload = forwardRef<{ resetFile: () => void }, PhotoUploadProps>(
-  ({ onFileSelect }, ref) => {
+  (
+    {
+      variant = 'rectangle',
+      initialPhotoUrl,
+      onFileSelect,
+      onRemove,
+      previewUrl,
+      isPendingDelete,
+      id = 'photo-upload-input',
+    },
+    ref,
+  ) => {
     const inputRef = useRef<HTMLInputElement>(null);
+    const [isDragging, setIsDragging] = useState(false);
 
     useImperativeHandle(ref, () => ({
       resetFile: () => {
-        if (inputRef.current) {
-          inputRef.current.value = '';
-        }
+        if (inputRef.current) inputRef.current.value = '';
       },
     }));
 
-    const handleFileUpload = (file: File) => {
-      onFileSelect?.(file);
+    const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+      const file = e.target.files?.[0];
+      if (file) onFileSelect?.(file);
+    };
+
+    const handleDragOver = (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsDragging(true);
+    };
+
+    const handleDragLeave = () => setIsDragging(false);
+
+    const handleDrop = (e: React.DragEvent) => {
+      e.preventDefault();
+      setIsDragging(false);
+      const file = e.dataTransfer.files?.[0];
+      if (file?.type.startsWith('image/')) onFileSelect?.(file);
     };
 
-    return <FileUploader onFileSelect={handleFileUpload} inputRef={inputRef} />;
+    const displayImage = isPendingDelete
+      ? defaultProfilePhoto.src
+      : previewUrl || initialPhotoUrl || defaultProfilePhoto.src;
+
+    const hasPhoto = displayImage !== defaultProfilePhoto.src;
+
+    return (
+      <div className={styles.wrapper}>
+        <label
+          htmlFor={id}
+          className={[
+            styles.container,
+            styles[variant],
+            isDragging ? styles.dragging : '',
+            hasPhoto ? styles.hasPhoto : '',
+          ].join(' ')}
+          onDragOver={handleDragOver}
+          onDragLeave={handleDragLeave}
+          onDrop={handleDrop}
+        >
+          {hasPhoto ? (
+            <Image
+              src={displayImage}
+              alt="Profile photo"
+              width={200}
+              height={200}
+              style={{ objectFit: 'cover' }}
+              unoptimized
+            />
+          ) : (
+            <div className={styles.placeholder}>
+              <Image
+                src={uploadPhotoIcon.src}
+                alt="Upload photo"
+                width={32}
+                height={32}
+                className={styles.placeholderImage}
+                unoptimized
+              />
+              <span className={styles.photoPlaceholderText}>
+                Drag and drop file here or <u>browse</u>
+              </span>
+            </div>
+          )}
+        </label>
+
+        {!isPendingDelete && hasPhoto && (
+          <button
+            type="button"
+            onClick={onRemove}
+            className={[
+              styles.removeButton,
+              variant === 'circle' ? styles.removeButtonCircle : '',
+            ].join(' ')}
+          >
+            —
+          </button>
+        )}
+
+        <input
+          ref={inputRef}
+          id={id}
+          type="file"
+          accept="image/*"
+          onChange={handleFileChange}
+          style={{ display: 'none' }}
+        />
+      </div>
+    );
   },
 );
 
 PhotoUpload.displayName = 'PhotoUpload';
-
 export default PhotoUpload;

app/(main)/hq/[storeId]/components/EditStoreForm.module.css

@@ -0,0 +1,18 @@
+.layout {
+  display: flex;
+  align-items: flex-start;
+  gap: 3rem;
+  margin-bottom: 40px;
+  flex-wrap: wrap;
+}
+
+.photoColumn {
+  width: 200px;
+  height: 210px;
+  flex-shrink: 0;
+}
+
+.fieldsColumn {
+  flex: 1;
+  min-width: 0;
+}