feat/#29: 仮のプロフィール画面の実装

package.json

@@ -16,12 +16,15 @@
     "@chakra-ui/react": "^2.1.1",
     "@emotion/react": "^11.13.3",
     "@emotion/styled": "^11.13.0",
+    "@heroicons/react": "^2.1.5",
     "firebase": "^11.0.1",
     "framer-motion": "^11.11.11",
     "next-themes": "^0.4.3",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-icons": "^5.3.0",
+    "react-masonry-css": "^1.0.16",
+    "react-responsive-carousel": "^3.2.23",
     "react-router-dom": "^6.27.0"
   },
   "devDependencies": {

src/App.jsx

@@ -8,6 +8,8 @@ import Thread from './components/Thread';
 import ThreadDetail from './components/ThreadDetail';
 import CreateThread from './components/CreateThread';
 import AdminPage from './components/AdminPage';
+import ProfileMasonry from './components/Profile/ProfileMasonry';
+import ProfileEdit from './components/ProfileEdit';
 
 function App() {
   const location = useLocation();
@@ -25,6 +27,8 @@ function App() {
         <Route path="/thread/:id" element={<ThreadDetail />} />
         <Route path="/create-thread" element={<CreateThread />} />
         <Route path="/admin/:id" element={<AdminPage />} />
+        <Route path="/profile" element={<ProfileMasonry />} />
+        <Route path="/profile/edit" element={<ProfileEdit />} />
       </Routes>
     </>
   );

src/components/HeroCard.jsx

@@ -0,0 +1,35 @@
+import { motion } from 'framer-motion';
+import { PropTypes } from 'prop-types';
+import { Avatar, Text } from '@chakra-ui/react';
+
+const HeroCard = ({ user }) => {
+  const cardVariants = {
+    hover: {
+      scale: 1.05,
+      transition: { duration: 0.2 },
+    },
+  };
+
+  HeroCard.propTypes = {
+    user: PropTypes.object.isRequired,
+  };
+
+  return (
+    <motion.div
+      initial={{ opacity: 0, y: 20 }}
+      animate={{ opacity: 1, y: 0 }}
+      transition={{ duration: 0.5 }}
+      whileHover="hover"
+      variants={cardVariants}
+      className="hero-card"
+    >
+      <Avatar size="2xl" src={user.photoURL || 'defaultPhotoURL'} />
+      <Text fontSize="2xl" color="white" fontWeight="bold">
+        {user.displayName || 'Anonymous'}
+      </Text>
+      <Text color="whiteAlpha.700">{user.email}</Text>
+    </motion.div>
+  );
+};
+
+export default HeroCard;

src/components/Profile/AchievementCard.jsx

@@ -0,0 +1,66 @@
+import { Box, Grid, HStack, Text, Icon, VStack } from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+import { TrophyIcon } from '@heroicons/react/24/outline';
+
+import { PropTypes } from 'prop-types';
+
+const MotionBox = motion(Box);
+
+const AchievementBadge = ({ icon: IconComponent, name }) => (
+  <VStack
+    p={4}
+    spacing={2}
+    bg="rgba(255, 255, 255, 0.05)"
+    borderRadius="lg"
+    _hover={{
+      transform: 'scale(1.05)',
+      transition: 'transform 0.2s',
+    }}
+  >
+    <Icon as={IconComponent} boxSize={6} color="purple.400" />
+    <Text color="white" fontSize="sm" textAlign="center">
+      {name}
+    </Text>
+  </VStack>
+);
+
+AchievementBadge.propTypes = {
+  icon: PropTypes.elementType.isRequired,
+  name: PropTypes.string.isRequired,
+};
+
+const AchievementCard = ({ achievements }) => (
+  <MotionBox
+    initial={{ opacity: 0, y: 20 }}
+    animate={{ opacity: 1, y: 0 }}
+    mb={6}
+    bg="rgba(255, 255, 255, 0.05)"
+    borderRadius="xl"
+    p={6}
+    backdropFilter="blur(10px)"
+    boxShadow="0 4px 30px rgba(0, 0, 0, 0.1)"
+    border="1px solid rgba(255, 255, 255, 0.1)"
+  >
+    <HStack mb={4}>
+      <Icon as={TrophyIcon} color="purple.400" boxSize={6} />
+      <Text color="white" fontSize="xl" fontWeight="bold">
+        アチーブメント
+      </Text>
+    </HStack>
+    <Grid templateColumns="repeat(3, 1fr)" gap={4}>
+      {achievements.map((achievement) => (
+        <AchievementBadge
+          key={achievement.id}
+          icon={achievement.icon}
+          name={achievement.name}
+        />
+      ))}
+    </Grid>
+  </MotionBox>
+);
+
+AchievementCard.propTypes = {
+  achievements: PropTypes.array.isRequired,
+};
+
+export default AchievementCard;

src/components/Profile/HallOfFameCard.jsx

@@ -0,0 +1,49 @@
+import { Box, HStack, Text, Icon } from '@chakra-ui/react';
+import { motion } from 'framer-motion';
+import { HiOutlineStar } from 'react-icons/hi';
+import { PropTypes } from 'prop-types';
+
+const MotionBox = motion(Box);
+
+const HallOfFameCard = ({ post }) => (
+  <MotionBox
+    initial={{ opacity: 0, y: 20 }}
+    animate={{ opacity: 1, y: 0 }}
+    mb={6}
+    bg="rgba(255, 255, 255, 0.05)"
+    borderRadius="xl"
+    p={6}
+    backdropFilter="blur(10px)"
+    boxShadow="0 4px 30px rgba(0, 0, 0, 0.1)"
+    border="1px solid rgba(255, 255, 255, 0.1)"
+    _hover={{
+      transform: 'translateY(-5px)',
+      transition: 'transform 0.2s',
+    }}
+  >
+    <HStack mb={4}>
+      <Icon as={HiOutlineStar} color="yellow.400" boxSize={6} />
+      <Text color="white" fontSize="lg" fontWeight="bold">
+        殿堂入り投稿
+      </Text>
+    </HStack>
+    <Text color="whiteAlpha.800" fontSize="md">
+      {post.content}
+    </Text>
+    <HStack mt={4} justify="space-between">
+      <Text color="whiteAlpha.600" fontSize="sm">
+        {new Date(post.createdAt?.toDate()).toLocaleDateString()}
+      </Text>
+      <HStack>
+        <Icon as={HiOutlineStar} color="yellow.400" />
+        <Text color="whiteAlpha.800">{post.likes}</Text>
+      </HStack>
+    </HStack>
+  </MotionBox>
+);
+
+HallOfFameCard.propTypes = {
+  post: PropTypes.object.isRequired,
+};
+
+export default HallOfFameCard;